Skip to content
  • Home
  • Aktuell
  • Tags
  • 0 Ungelesen 0
  • Kategorien
  • Unreplied
  • Beliebt
  • GitHub
  • Docu
  • Hilfe
Skins
  • Light
  • Brite
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Standard: (Kein Skin)
  • Kein Skin
Einklappen
ioBroker Logo

Community Forum

donate donate
  1. ioBroker Community Home
  2. Deutsch
  3. Praktische Anwendungen (Showcase)
  4. Glass Vis 3

NEWS

  • UPDATE 31.10.: Amazon Alexa - ioBroker Skill läuft aus ?
    apollon77A
    apollon77
    48
    3
    8.6k

  • Monatsrückblick – September 2025
    BluefoxB
    Bluefox
    13
    1
    2.1k

  • Neues Video "KI im Smart Home" - ioBroker plus n8n
    BluefoxB
    Bluefox
    16
    1
    2.9k

Glass Vis 3

Geplant Angeheftet Gesperrt Verschoben Praktische Anwendungen (Showcase)
17 Beiträge 8 Kommentatoren 3.3k Aufrufe 13 Watching
  • Älteste zuerst
  • Neuste zuerst
  • Meiste Stimmen
Antworten
  • In einem neuen Thema antworten
Anmelden zum Antworten
Dieses Thema wurde gelöscht. Nur Nutzer mit entsprechenden Rechten können es sehen.
  • O Ostpower

    @enrico-fischer
    Deine VIS Seite sieht Mega aus, ich habe dazu mal eine Frage.
    Wie bekommst du den Hintergrund in deine VIS. Ich habe deine zip importiert und
    das Hintergrundbild ist direkt mit dabei.
    Ich würde sowas auch in meiner Vis implementieren, nur weiß ich nicht wie Du
    das gemacht hast. Ich finde z.b. dein Bild nicht unter Dateimanager und wo Du es
    verknüpft hast, in der "Glass Vis 3" Vorlage.

    Über eine Hilfe würde ich mich freuen.

    Danke :)

    WszeneW Offline
    WszeneW Offline
    Wszene
    schrieb am zuletzt editiert von
    #4

    @ostpower
    Das hat er via CSS gemacht
    Geh mal rechts auf den Reiter CSS
    Dort siehst du ganz oben folgenden Code

    .vis-view {
       background-image: linear-gradient(21deg, rgba(64, 83, 206, 0.3697003234675773) 68%, rgba(255, 206, 196, 0.5) 163%),linear-gradient(163deg, rgba(49, 146, 170, 0.07944489965716128) 86%, rgba(239, 112, 138, 0.5) 40%),linear-gradient(30deg, rgba(76, 79, 173, 0.6173675716587805) 22%, rgba(237, 106, 134, 0.5) 169%),linear-gradient(48deg, rgba(31, 85, 147, 0.7323890641868473) 64%, rgba(247, 126, 132, 0.5) 43%);
       color:#f1e9e9;
    
    }
    

    Dieser Code ist für den Hintergrund zuständig

    Meine Hard- & Software:

    • MSI Cubi 5 10M-049DE mit Proxmox
    • CC2652P Zigbee Stick
    • Steckdosen mit Tasmota und Zigbee
    • Lichtschalter mit Tasmota
    • IKEA TRÅDFRI Glühbirnen
    • Aqara Sensoren
    O ChaotC 2 Antworten Letzte Antwort
    0
    • WszeneW Wszene

      @ostpower
      Das hat er via CSS gemacht
      Geh mal rechts auf den Reiter CSS
      Dort siehst du ganz oben folgenden Code

      .vis-view {
         background-image: linear-gradient(21deg, rgba(64, 83, 206, 0.3697003234675773) 68%, rgba(255, 206, 196, 0.5) 163%),linear-gradient(163deg, rgba(49, 146, 170, 0.07944489965716128) 86%, rgba(239, 112, 138, 0.5) 40%),linear-gradient(30deg, rgba(76, 79, 173, 0.6173675716587805) 22%, rgba(237, 106, 134, 0.5) 169%),linear-gradient(48deg, rgba(31, 85, 147, 0.7323890641868473) 64%, rgba(247, 126, 132, 0.5) 43%);
         color:#f1e9e9;
      
      }
      

      Dieser Code ist für den Hintergrund zuständig

      O Offline
      O Offline
      Ostpower
      schrieb am zuletzt editiert von Ostpower
      #5

      @wszene
      Super Danke!

      ich Depp geh zwar auf CSS aber schalte nie um auf Projekt :(.

      Danke für die schnelle Hilfe

      Wie kann man solch einen Hintergrund selber erstellen? Gibt es dafür ein Tool?

      Gruß
      Ostpower

      WszeneW 1 Antwort Letzte Antwort
      0
      • O Ostpower

        @wszene
        Super Danke!

        ich Depp geh zwar auf CSS aber schalte nie um auf Projekt :(.

        Danke für die schnelle Hilfe

        Wie kann man solch einen Hintergrund selber erstellen? Gibt es dafür ein Tool?

        Gruß
        Ostpower

        WszeneW Offline
        WszeneW Offline
        Wszene
        schrieb am zuletzt editiert von
        #6

        @ostpower sagte in Glass Vis 3:

        Wie kann man solch einen Hintergrund selber erstellen? Gibt es dafür ein Tool?

        schau mal hier
        https://www.google.com/search?q=css+gradient+generator&oq=css+gradient+&aqs=edge.1.69i57j0i512l8.6681j0j1&sourceid=chrome&ie=UTF-8
        Da gibt es sehr viele Generatoren

        Meine Hard- & Software:

        • MSI Cubi 5 10M-049DE mit Proxmox
        • CC2652P Zigbee Stick
        • Steckdosen mit Tasmota und Zigbee
        • Lichtschalter mit Tasmota
        • IKEA TRÅDFRI Glühbirnen
        • Aqara Sensoren
        1 Antwort Letzte Antwort
        1
        • arteckA arteck

          @enrico-fischer sieht gut aus

          kannst du mir ein export der widgets machen von dem hier
          ea6f21ef-6590-416f-ae96-95a5db1b0f44-grafik.png
          danke

          GlasfaserG Offline
          GlasfaserG Offline
          Glasfaser
          schrieb am zuletzt editiert von
          #7

          @arteck

          [{"tpl":"tplHtml","data":{"g_fixed":true,"g_visibility":false,"g_css_font_text":true,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","refreshInterval":"0","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"class":"container_radius30px","html":""},"style":{"left":"30px","top":"30px","z-index":"1","text-align":"center","line-height":"9","width":"400px","height":"335px","font-size":"large","opacity":""},"widgetSet":"basic"},{"tpl":"tplBasicState","data":{"oid":"alexa2.0.Echo-Devices.90F00818714705KQ.Commands.weather","g_fixed":true,"g_visibility":false,"g_css_font_text":true,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"class":"container_radius30px","value":"true","html":"Wetter"},"style":{"left":"44px","top":"118px","width":"100px","height":"100px","z-index":"3","line-height":"6","text-align":"center"},"widgetSet":"basic"},{"tpl":"tplBasicState","data":{"oid":"alexa2.0.Echo-Devices.90F00818714705KQ.Commands.traffic","g_fixed":true,"g_visibility":false,"g_css_font_text":true,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"class":"container_radius30px","value":"true","html":"Verkehr"},"style":{"left":"163px","top":"118px","width":"100px","height":"100px","z-index":"3","line-height":"6","text-align":"center"},"widgetSet":"basic"},{"tpl":"tplBasicState","data":{"oid":"alexa2.0.Echo-Devices.90F00818714705KQ.Commands.calendarToday","g_fixed":true,"g_visibility":false,"g_css_font_text":true,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"class":"container_radius30px","value":"true","html":"Termine Heute"},"style":{"left":"284px","top":"117px","width":"130px","height":"50px","z-index":"3","line-height":"3.2","text-align":"center","font-size":"15px"},"widgetSet":"basic"},{"tpl":"tplBasicState","data":{"oid":"alexa2.0.Echo-Devices.90F00818714705KQ.Commands.flashbriefing","g_fixed":true,"g_visibility":false,"g_css_font_text":true,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"class":"container_radius30px","value":"true","html":"Nachrichten"},"style":{"left":"44px","top":"238px","width":"100px","height":"100px","z-index":"3","line-height":"6","text-align":"center"},"widgetSet":"basic"},{"tpl":"tplBasicState","data":{"oid":"alexa2.0.Echo-Devices.90F00818714705KQ.Commands.deviceStop","g_fixed":true,"g_visibility":false,"g_css_font_text":true,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"class":"container_radius30px","value":"true","html":"Alexa Stop"},"style":{"left":"163px","top":"238px","width":"100px","height":"100px","z-index":"3","line-height":"6","text-align":"center"},"widgetSet":"basic"},{"tpl":"tplBasicState","data":{"oid":"alexa2.0.Echo-Devices.90F00818714705KQ.Commands.calendarNext","g_fixed":true,"g_visibility":false,"g_css_font_text":true,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"class":"container_radius30px","value":"true","html":"Nächster Termin"},"style":{"left":"284px","top":"203px","width":"130px","height":"50px","z-index":"3","line-height":"3.2","text-align":"center","font-size":"15px"},"widgetSet":"basic"},{"tpl":"tplBasicState","data":{"oid":"alexa2.0.Echo-Devices.90F00818714705KQ.Commands.calendarTomorrow","g_fixed":true,"g_visibility":false,"g_css_font_text":true,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"class":"container_radius30px","value":"true","html":"Termine Morgen"},"style":{"left":"284px","top":"289px","width":"130px","height":"50px","z-index":"3","line-height":"3.2","text-align":"center","font-size":"15px"},"widgetSet":"basic"},{"tpl":"tplHtml","data":{"g_fixed":true,"g_visibility":false,"g_css_font_text":true,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","refreshInterval":"0","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"html":"ALEXA","class":"Kopf30px"},"style":{"left":"30px","top":"30px","width":"400px","height":"58px","z-index":"4","text-align":"center","line-height":"3"},"widgetSet":"basic"}]
          

          .vis-view {
            background-image: linear-gradient(21deg, rgba(64, 83, 206, 0.3697003234675773) 68%, rgba(255, 206, 196, 0.5) 163%),linear-gradient(163deg, rgba(49, 146, 170, 0.07944489965716128) 86%, rgba(239, 112, 138, 0.5) 40%),linear-gradient(30deg, rgba(76, 79, 173, 0.6173675716587805) 22%, rgba(237, 106, 134, 0.5) 169%),linear-gradient(48deg, rgba(31, 85, 147, 0.7323890641868473) 64%, rgba(247, 126, 132, 0.5) 43%);
            color:#f1e9e9;
          
          }
          
          .Kopf30px {
           color: white;
           border-top-left-radius: 30px;
           border-top-right-radius: 30px;
           background-color: #22244a;
             box-shadow: 10px 10px 25px rgba(0,0,0,0.5);
          }
          
          .container_radius30px {
           color: white;
           border-radius: 30px;
           box-shadow: 0 1px 1px rgba(0, 0, 0, 0.11), 0 2px 2px rgba(0, 0, 0, 0.11), 0 4px 4px rgba(0, 0, 0, 0.11), 0 6px 8px rgba(0, 0, 0, 0.11), 0 8px 16px rgba(0, 0, 0, 0.11), 0 -6px 8px rgba(255, 255, 255, 0.11), 0 -8px 16px rgba(255, 255, 255, 0.11);
           border: 0.5px solid #29323C;
          }
          
          
          .container_radius30pxglow {
           color: white;
           border-radius: 30px;
           border: 0.5px solid #29323C;
           animation: lightsbg 5s 750ms linear infinite;
          }
          
          
          .container_radius30pxBlank {
           border-radius: 30px;
          }
          
          
          .app-container {
           border-radius: 10px;
           background: linear-gradient(180deg, rgba(224,233,253,1) 0%, rgba(233,236,241,1) 90%);
           box-shadow: 0 0 0 10px rgba(255, 255, 255,.4);
          }
          
          
          .app-container2 {
             box-shadow: 20px 20px 50px rgba(0,0,0,0.5);
             border-radius:15px;
             border:1px solid rgba(255,255,255,0.5);
             backdrop-filter: blur(5px);
          }
          
          /*container*/
          
          .container_radius10px {
           color: white;
           border-radius: 10px;
           box-shadow: 0 1px 1px rgba(0, 0, 0, 0.11), 0 2px 2px rgba(0, 0, 0, 0.11), 0 4px 4px rgba(0, 0, 0, 0.11), 0 6px 8px rgba(0, 0, 0, 0.11), 0 8px 16px rgba(0, 0, 0, 0.11), 0 -6px 8px rgba(255, 255, 255, 0.11), 0 -8px 16px rgba(255, 255, 255, 0.11);
           border: 0.5px solid #29323C;
          }
          
          
          
          .container_radius60px {
           color: white;
           border-radius: 60px;
           box-shadow: 0 1px 1px rgba(0, 0, 0, 0.11), 0 2px 2px rgba(0, 0, 0, 0.11), 0 4px 4px rgba(0, 0, 0, 0.11), 0 6px 8px rgba(0, 0, 0, 0.11), 0 8px 16px rgba(0, 0, 0, 0.11), 0 -6px 8px rgba(255, 255, 255, 0.11), 0 -8px 16px rgba(255, 255, 255, 0.11);
           border: 0.5px solid #29323C;
          }
          
          
          .container_radius100 {
           color: white;
           border-radius: 100%;
           box-shadow: 0 1px 1px rgba(0, 0, 0, 0.11), 0 2px 2px rgba(0, 0, 0, 0.11), 0 4px 4px rgba(0, 0, 0, 0.11), 0 6px 8px rgba(0, 0, 0, 0.11), 0 8px 16px rgba(0, 0, 0, 0.11), 0 -6px 8px rgba(255, 255, 255, 0.11), 0 -8px 16px rgba(255, 255, 255, 0.11);
           border: 0.5px solid #29323C;
          }
          
          .container_gradient {
           background-image: linear-gradient(270deg, #485563 0%, #29323C 100%);
           border-radius: 10px;
           border: 0.5px solid #29323C;
           box-shadow: 0 1px 1px rgba(0, 0, 0, 0.11), 0 2px 2px rgba(0, 0, 0, 0.11), 0 4px 4px rgba(0, 0, 0, 0.11), 0 6px 8px rgba(0, 0, 0, 0.11), 0 8px 16px rgba(0, 0, 0, 0.11), 0 -6px 8px rgba(255, 255, 255, 0.11), 0 -8px 16px rgba(255, 255, 255, 0.11);
          }
          
          
          /*custom-radio*/
          
          .custom-radio {
           text-align: center;
           border-radius: 100%;
           border: none;
           box-shadow:
             -1px -1px 3px rgba(255, 255, 255, 0.1),
             2px 2px 6px rgba(0, 0, 0, 0.8),
             inset -2px -2px 10px rgba(255, 255, 255, 0.05),
             inset 2px 2px 10px rgba(0, 0, 0, 0.5);
          }
          
          
          .custom-radio-glow {
           border-radius: 100px;
           box-shadow:
             -1px -1px 3px rgba(255, 255, 255, 0.1),
             2px 2px 6px rgba(0, 0, 0, 0.8),
             inset -2px -2px 10px rgba(255, 255, 255, 0.05),
             inset 2px 2px 10px rgba(0, 0, 0, 0.5);
           animation: lightsbg 5s 750ms linear infinite;
          }
          
          @keyframes lightsbg {
           0% {
             color: hsl(230, 40%, 80%);
             box-shadow:
               0 0 1em hsla(320, 100%, 50%, 0.2),
               0 0 0.125em hsla(320, 100%, 60%, 0.3),
               -1em -0.125em 0.5em hsla(40, 100%, 60%, 0),
               1em 0.125em 0.5em hsla(200, 100%, 60%, 0);
           }
          
           30% {
             color: hsl(230, 80%, 90%);
             box-shadow:
               0 0 1em hsla(320, 100%, 50%, 0.5),
               0 0 0.125em hsla(320, 100%, 60%, 0.5),
               -0.5em -0.125em 0.25em hsla(40, 100%, 60%, 0.2),
               0.5em 0.125em 0.25em hsla(200, 100%, 60%, 0.4);
           }
          
           40% {
             color: hsl(230, 100%, 95%);
             box-shadow:
               0 0 1em hsla(320, 100%, 50%, 0.5),
               0 0 0.125em hsla(320, 100%, 90%, 0.5),
               -0.25em -0.125em 0.125em hsla(40, 100%, 60%, 0.2),
               0.25em 0.125em 0.125em hsla(200, 100%, 60%, 0.4);
           }
          
           70% {
             color: hsl(230, 80%, 90%);
             box-shadow:
               0 0 1em hsla(320, 100%, 50%, 0.5),
               0 0 0.125em hsla(320, 100%, 60%, 0.5),
               0.5em -0.125em 0.25em hsla(40, 100%, 60%, 0.2),
               -0.5em 0.125em 0.25em hsla(200, 100%, 60%, 0.4);
           }
          
           100% {
             color: hsl(230, 40%, 80%);
             box-shadow:
               0 0 1em hsla(320, 100%, 50%, 0.2),
               0 0 0.125em hsla(320, 100%, 60%, 0.3),
               1em -0.125em 0.5em hsla(40, 100%, 60%, 0),
               -1em 0.125em 0.5em hsla(200, 100%, 60%, 0);
           }
          }
          
          .custom-radio_radius30px {
           text-align: center;
           border-radius: 30px;
           box-shadow:
             -1px -1px 3px rgba(255, 255, 255, 0.1),
             2px 2px 6px rgba(0, 0, 0, 0.8),
             inset -2px -2px 10px rgba(255, 255, 255, 0.05),
             inset 2px 2px 10px rgba(0, 0, 0, 0.5);
          }
          
          
          .custom-radio__fortschritt {
           text-align: center;
           border-radius: 30px;
           box-shadow: inset -1px -1px 3px rgba(255, 255, 255, 0.1), inset 2px 2px 6px rgba(0, 0, 0, 0.8);
           box-shadow: inset 9px 9px 29px #151a1f,
             inset -9px -9px 29px #3d4a59;
          }
          
          
          
          

          Synology 918+ 16GB - ioBroker in Docker v9 , VISO auf Trekstor Primebook C13 13,3" , Hikvision Domkameras mit Surveillance Station .. CCU RaspberryMatic in Synology VM .. Zigbee CC2538+CC2592 .. Sonoff .. KNX .. Modbus ..

          arteckA 1 Antwort Letzte Antwort
          0
          • GlasfaserG Glasfaser

            @arteck

            [{"tpl":"tplHtml","data":{"g_fixed":true,"g_visibility":false,"g_css_font_text":true,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","refreshInterval":"0","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"class":"container_radius30px","html":""},"style":{"left":"30px","top":"30px","z-index":"1","text-align":"center","line-height":"9","width":"400px","height":"335px","font-size":"large","opacity":""},"widgetSet":"basic"},{"tpl":"tplBasicState","data":{"oid":"alexa2.0.Echo-Devices.90F00818714705KQ.Commands.weather","g_fixed":true,"g_visibility":false,"g_css_font_text":true,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"class":"container_radius30px","value":"true","html":"Wetter"},"style":{"left":"44px","top":"118px","width":"100px","height":"100px","z-index":"3","line-height":"6","text-align":"center"},"widgetSet":"basic"},{"tpl":"tplBasicState","data":{"oid":"alexa2.0.Echo-Devices.90F00818714705KQ.Commands.traffic","g_fixed":true,"g_visibility":false,"g_css_font_text":true,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"class":"container_radius30px","value":"true","html":"Verkehr"},"style":{"left":"163px","top":"118px","width":"100px","height":"100px","z-index":"3","line-height":"6","text-align":"center"},"widgetSet":"basic"},{"tpl":"tplBasicState","data":{"oid":"alexa2.0.Echo-Devices.90F00818714705KQ.Commands.calendarToday","g_fixed":true,"g_visibility":false,"g_css_font_text":true,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"class":"container_radius30px","value":"true","html":"Termine Heute"},"style":{"left":"284px","top":"117px","width":"130px","height":"50px","z-index":"3","line-height":"3.2","text-align":"center","font-size":"15px"},"widgetSet":"basic"},{"tpl":"tplBasicState","data":{"oid":"alexa2.0.Echo-Devices.90F00818714705KQ.Commands.flashbriefing","g_fixed":true,"g_visibility":false,"g_css_font_text":true,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"class":"container_radius30px","value":"true","html":"Nachrichten"},"style":{"left":"44px","top":"238px","width":"100px","height":"100px","z-index":"3","line-height":"6","text-align":"center"},"widgetSet":"basic"},{"tpl":"tplBasicState","data":{"oid":"alexa2.0.Echo-Devices.90F00818714705KQ.Commands.deviceStop","g_fixed":true,"g_visibility":false,"g_css_font_text":true,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"class":"container_radius30px","value":"true","html":"Alexa Stop"},"style":{"left":"163px","top":"238px","width":"100px","height":"100px","z-index":"3","line-height":"6","text-align":"center"},"widgetSet":"basic"},{"tpl":"tplBasicState","data":{"oid":"alexa2.0.Echo-Devices.90F00818714705KQ.Commands.calendarNext","g_fixed":true,"g_visibility":false,"g_css_font_text":true,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"class":"container_radius30px","value":"true","html":"Nächster Termin"},"style":{"left":"284px","top":"203px","width":"130px","height":"50px","z-index":"3","line-height":"3.2","text-align":"center","font-size":"15px"},"widgetSet":"basic"},{"tpl":"tplBasicState","data":{"oid":"alexa2.0.Echo-Devices.90F00818714705KQ.Commands.calendarTomorrow","g_fixed":true,"g_visibility":false,"g_css_font_text":true,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"class":"container_radius30px","value":"true","html":"Termine Morgen"},"style":{"left":"284px","top":"289px","width":"130px","height":"50px","z-index":"3","line-height":"3.2","text-align":"center","font-size":"15px"},"widgetSet":"basic"},{"tpl":"tplHtml","data":{"g_fixed":true,"g_visibility":false,"g_css_font_text":true,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","refreshInterval":"0","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"html":"ALEXA","class":"Kopf30px"},"style":{"left":"30px","top":"30px","width":"400px","height":"58px","z-index":"4","text-align":"center","line-height":"3"},"widgetSet":"basic"}]
            

            .vis-view {
              background-image: linear-gradient(21deg, rgba(64, 83, 206, 0.3697003234675773) 68%, rgba(255, 206, 196, 0.5) 163%),linear-gradient(163deg, rgba(49, 146, 170, 0.07944489965716128) 86%, rgba(239, 112, 138, 0.5) 40%),linear-gradient(30deg, rgba(76, 79, 173, 0.6173675716587805) 22%, rgba(237, 106, 134, 0.5) 169%),linear-gradient(48deg, rgba(31, 85, 147, 0.7323890641868473) 64%, rgba(247, 126, 132, 0.5) 43%);
              color:#f1e9e9;
            
            }
            
            .Kopf30px {
             color: white;
             border-top-left-radius: 30px;
             border-top-right-radius: 30px;
             background-color: #22244a;
               box-shadow: 10px 10px 25px rgba(0,0,0,0.5);
            }
            
            .container_radius30px {
             color: white;
             border-radius: 30px;
             box-shadow: 0 1px 1px rgba(0, 0, 0, 0.11), 0 2px 2px rgba(0, 0, 0, 0.11), 0 4px 4px rgba(0, 0, 0, 0.11), 0 6px 8px rgba(0, 0, 0, 0.11), 0 8px 16px rgba(0, 0, 0, 0.11), 0 -6px 8px rgba(255, 255, 255, 0.11), 0 -8px 16px rgba(255, 255, 255, 0.11);
             border: 0.5px solid #29323C;
            }
            
            
            .container_radius30pxglow {
             color: white;
             border-radius: 30px;
             border: 0.5px solid #29323C;
             animation: lightsbg 5s 750ms linear infinite;
            }
            
            
            .container_radius30pxBlank {
             border-radius: 30px;
            }
            
            
            .app-container {
             border-radius: 10px;
             background: linear-gradient(180deg, rgba(224,233,253,1) 0%, rgba(233,236,241,1) 90%);
             box-shadow: 0 0 0 10px rgba(255, 255, 255,.4);
            }
            
            
            .app-container2 {
               box-shadow: 20px 20px 50px rgba(0,0,0,0.5);
               border-radius:15px;
               border:1px solid rgba(255,255,255,0.5);
               backdrop-filter: blur(5px);
            }
            
            /*container*/
            
            .container_radius10px {
             color: white;
             border-radius: 10px;
             box-shadow: 0 1px 1px rgba(0, 0, 0, 0.11), 0 2px 2px rgba(0, 0, 0, 0.11), 0 4px 4px rgba(0, 0, 0, 0.11), 0 6px 8px rgba(0, 0, 0, 0.11), 0 8px 16px rgba(0, 0, 0, 0.11), 0 -6px 8px rgba(255, 255, 255, 0.11), 0 -8px 16px rgba(255, 255, 255, 0.11);
             border: 0.5px solid #29323C;
            }
            
            
            
            .container_radius60px {
             color: white;
             border-radius: 60px;
             box-shadow: 0 1px 1px rgba(0, 0, 0, 0.11), 0 2px 2px rgba(0, 0, 0, 0.11), 0 4px 4px rgba(0, 0, 0, 0.11), 0 6px 8px rgba(0, 0, 0, 0.11), 0 8px 16px rgba(0, 0, 0, 0.11), 0 -6px 8px rgba(255, 255, 255, 0.11), 0 -8px 16px rgba(255, 255, 255, 0.11);
             border: 0.5px solid #29323C;
            }
            
            
            .container_radius100 {
             color: white;
             border-radius: 100%;
             box-shadow: 0 1px 1px rgba(0, 0, 0, 0.11), 0 2px 2px rgba(0, 0, 0, 0.11), 0 4px 4px rgba(0, 0, 0, 0.11), 0 6px 8px rgba(0, 0, 0, 0.11), 0 8px 16px rgba(0, 0, 0, 0.11), 0 -6px 8px rgba(255, 255, 255, 0.11), 0 -8px 16px rgba(255, 255, 255, 0.11);
             border: 0.5px solid #29323C;
            }
            
            .container_gradient {
             background-image: linear-gradient(270deg, #485563 0%, #29323C 100%);
             border-radius: 10px;
             border: 0.5px solid #29323C;
             box-shadow: 0 1px 1px rgba(0, 0, 0, 0.11), 0 2px 2px rgba(0, 0, 0, 0.11), 0 4px 4px rgba(0, 0, 0, 0.11), 0 6px 8px rgba(0, 0, 0, 0.11), 0 8px 16px rgba(0, 0, 0, 0.11), 0 -6px 8px rgba(255, 255, 255, 0.11), 0 -8px 16px rgba(255, 255, 255, 0.11);
            }
            
            
            /*custom-radio*/
            
            .custom-radio {
             text-align: center;
             border-radius: 100%;
             border: none;
             box-shadow:
               -1px -1px 3px rgba(255, 255, 255, 0.1),
               2px 2px 6px rgba(0, 0, 0, 0.8),
               inset -2px -2px 10px rgba(255, 255, 255, 0.05),
               inset 2px 2px 10px rgba(0, 0, 0, 0.5);
            }
            
            
            .custom-radio-glow {
             border-radius: 100px;
             box-shadow:
               -1px -1px 3px rgba(255, 255, 255, 0.1),
               2px 2px 6px rgba(0, 0, 0, 0.8),
               inset -2px -2px 10px rgba(255, 255, 255, 0.05),
               inset 2px 2px 10px rgba(0, 0, 0, 0.5);
             animation: lightsbg 5s 750ms linear infinite;
            }
            
            @keyframes lightsbg {
             0% {
               color: hsl(230, 40%, 80%);
               box-shadow:
                 0 0 1em hsla(320, 100%, 50%, 0.2),
                 0 0 0.125em hsla(320, 100%, 60%, 0.3),
                 -1em -0.125em 0.5em hsla(40, 100%, 60%, 0),
                 1em 0.125em 0.5em hsla(200, 100%, 60%, 0);
             }
            
             30% {
               color: hsl(230, 80%, 90%);
               box-shadow:
                 0 0 1em hsla(320, 100%, 50%, 0.5),
                 0 0 0.125em hsla(320, 100%, 60%, 0.5),
                 -0.5em -0.125em 0.25em hsla(40, 100%, 60%, 0.2),
                 0.5em 0.125em 0.25em hsla(200, 100%, 60%, 0.4);
             }
            
             40% {
               color: hsl(230, 100%, 95%);
               box-shadow:
                 0 0 1em hsla(320, 100%, 50%, 0.5),
                 0 0 0.125em hsla(320, 100%, 90%, 0.5),
                 -0.25em -0.125em 0.125em hsla(40, 100%, 60%, 0.2),
                 0.25em 0.125em 0.125em hsla(200, 100%, 60%, 0.4);
             }
            
             70% {
               color: hsl(230, 80%, 90%);
               box-shadow:
                 0 0 1em hsla(320, 100%, 50%, 0.5),
                 0 0 0.125em hsla(320, 100%, 60%, 0.5),
                 0.5em -0.125em 0.25em hsla(40, 100%, 60%, 0.2),
                 -0.5em 0.125em 0.25em hsla(200, 100%, 60%, 0.4);
             }
            
             100% {
               color: hsl(230, 40%, 80%);
               box-shadow:
                 0 0 1em hsla(320, 100%, 50%, 0.2),
                 0 0 0.125em hsla(320, 100%, 60%, 0.3),
                 1em -0.125em 0.5em hsla(40, 100%, 60%, 0),
                 -1em 0.125em 0.5em hsla(200, 100%, 60%, 0);
             }
            }
            
            .custom-radio_radius30px {
             text-align: center;
             border-radius: 30px;
             box-shadow:
               -1px -1px 3px rgba(255, 255, 255, 0.1),
               2px 2px 6px rgba(0, 0, 0, 0.8),
               inset -2px -2px 10px rgba(255, 255, 255, 0.05),
               inset 2px 2px 10px rgba(0, 0, 0, 0.5);
            }
            
            
            .custom-radio__fortschritt {
             text-align: center;
             border-radius: 30px;
             box-shadow: inset -1px -1px 3px rgba(255, 255, 255, 0.1), inset 2px 2px 6px rgba(0, 0, 0, 0.8);
             box-shadow: inset 9px 9px 29px #151a1f,
               inset -9px -9px 29px #3d4a59;
            }
            
            
            
            

            arteckA Offline
            arteckA Offline
            arteck
            Developer Most Active
            schrieb am zuletzt editiert von
            #8

            @glasfaser danke

            zigbee hab ich, zwave auch, nuc's genauso und HA auch

            1 Antwort Letzte Antwort
            0
            • WszeneW Wszene

              @ostpower
              Das hat er via CSS gemacht
              Geh mal rechts auf den Reiter CSS
              Dort siehst du ganz oben folgenden Code

              .vis-view {
                 background-image: linear-gradient(21deg, rgba(64, 83, 206, 0.3697003234675773) 68%, rgba(255, 206, 196, 0.5) 163%),linear-gradient(163deg, rgba(49, 146, 170, 0.07944489965716128) 86%, rgba(239, 112, 138, 0.5) 40%),linear-gradient(30deg, rgba(76, 79, 173, 0.6173675716587805) 22%, rgba(237, 106, 134, 0.5) 169%),linear-gradient(48deg, rgba(31, 85, 147, 0.7323890641868473) 64%, rgba(247, 126, 132, 0.5) 43%);
                 color:#f1e9e9;
              
              }
              

              Dieser Code ist für den Hintergrund zuständig

              ChaotC Offline
              ChaotC Offline
              Chaot
              schrieb am zuletzt editiert von Chaot
              #9

              @wszene Danke für die Idee.
              Es gibt aber noch eine zweite Möglichkeit.
              Ich habe einzelne Seiten in der VIS.
              Auf der jeweiligen Unterseite schalte ich im Reiter "View" die Option "use Background" ein und platziere dann dort den CSS Code:

              rgb(222,36,36) linear-gradient(34deg, rgba(222,36,36,1) 4%, rgba(107,107,104,1) 20%, rgba(222,36,36,1) 36%, rgba(222,36,36,1) 40%, rgba(107,107,104,1) 56%, rgba(222,36,36,1) 72%)
              

              VISCSS.jpg

              So habe ich die Möglichkeit jeder einzelnen Seite einen eigenen Hintergrund zum Thema hinzuzufügen.

              P.S. Nicht wundern. Die View ist für einen 12" mit 800x600 Auflösung.

              ioBroker auf NUC unter Proxmox; VIS: 12" Touchscreen und 17" Touch; Lichtsteuerung, Thermometer und Sensoren: Tasmota (39); Ambiente Beleuchtung: WLED (9); Heizung: DECT Thermostate (9) an Fritz 6690; EMS-ESP; 1 Echo V2; 3 Echo DOT; 1 Echo Connect; 2 Echo Show 5; Unifi Ap-Ac Lite.

              1 Antwort Letzte Antwort
              0
              • Enrico FischerE Enrico Fischer

                Wieder mal ein kleines Update

                Unbenannt.jpg

                Glass3.zip

                D Offline
                D Offline
                dos1973
                schrieb am zuletzt editiert von
                #10

                @enrico-fischer
                würdest das hintergundbild teilen/ hochladen? thx

                GlasfaserG 1 Antwort Letzte Antwort
                0
                • D dos1973

                  @enrico-fischer
                  würdest das hintergundbild teilen/ hochladen? thx

                  GlasfaserG Offline
                  GlasfaserG Offline
                  Glasfaser
                  schrieb am zuletzt editiert von
                  #11

                  @dos1973 sagte in Glass Vis 3:

                  würdest das hintergundbild

                  Ist per CSS

                  .vis-view {
                    background-image: linear-gradient(21deg, rgba(64, 83, 206, 0.3697003234675773) 68%, rgba(255, 206, 196, 0.5) 163%),linear-gradient(163deg, rgba(49, 146, 170, 0.07944489965716128) 86%, rgba(239, 112, 138, 0.5) 40%),linear-gradient(30deg, rgba(76, 79, 173, 0.6173675716587805) 22%, rgba(237, 106, 134, 0.5) 169%),linear-gradient(48deg, rgba(31, 85, 147, 0.7323890641868473) 64%, rgba(247, 126, 132, 0.5) 43%);
                    color:#f1e9e9;
                  
                  }
                  

                  Synology 918+ 16GB - ioBroker in Docker v9 , VISO auf Trekstor Primebook C13 13,3" , Hikvision Domkameras mit Surveillance Station .. CCU RaspberryMatic in Synology VM .. Zigbee CC2538+CC2592 .. Sonoff .. KNX .. Modbus ..

                  D 1 Antwort Letzte Antwort
                  0
                  • GlasfaserG Glasfaser

                    @dos1973 sagte in Glass Vis 3:

                    würdest das hintergundbild

                    Ist per CSS

                    .vis-view {
                      background-image: linear-gradient(21deg, rgba(64, 83, 206, 0.3697003234675773) 68%, rgba(255, 206, 196, 0.5) 163%),linear-gradient(163deg, rgba(49, 146, 170, 0.07944489965716128) 86%, rgba(239, 112, 138, 0.5) 40%),linear-gradient(30deg, rgba(76, 79, 173, 0.6173675716587805) 22%, rgba(237, 106, 134, 0.5) 169%),linear-gradient(48deg, rgba(31, 85, 147, 0.7323890641868473) 64%, rgba(247, 126, 132, 0.5) 43%);
                      color:#f1e9e9;
                    
                    }
                    

                    D Offline
                    D Offline
                    dos1973
                    schrieb am zuletzt editiert von
                    #12

                    @glasfaser
                    danke dir

                    1 Antwort Letzte Antwort
                    0
                    • GlasfaserG Offline
                      GlasfaserG Offline
                      Glasfaser
                      schrieb am zuletzt editiert von Glasfaser
                      #13

                      @dos1973

                      Tip,
                      wenn du nur eine Viewseite mit dem Hintergrund haben möchtest dann

                      #visview_home.vis-view {
                      

                      home gegen den Viewnamen ersetzen .

                      Synology 918+ 16GB - ioBroker in Docker v9 , VISO auf Trekstor Primebook C13 13,3" , Hikvision Domkameras mit Surveillance Station .. CCU RaspberryMatic in Synology VM .. Zigbee CC2538+CC2592 .. Sonoff .. KNX .. Modbus ..

                      ChaotC 1 Antwort Letzte Antwort
                      1
                      • GlasfaserG Glasfaser

                        @dos1973

                        Tip,
                        wenn du nur eine Viewseite mit dem Hintergrund haben möchtest dann

                        #visview_home.vis-view {
                        

                        home gegen den Viewnamen ersetzen .

                        ChaotC Offline
                        ChaotC Offline
                        Chaot
                        schrieb am zuletzt editiert von
                        #14

                        @glasfaser Das kannst du aber auch genau so machen wie ich das eben beschrieben habe. Geht schneller und ist am Ende übersichtlicher finde ich.

                        ioBroker auf NUC unter Proxmox; VIS: 12" Touchscreen und 17" Touch; Lichtsteuerung, Thermometer und Sensoren: Tasmota (39); Ambiente Beleuchtung: WLED (9); Heizung: DECT Thermostate (9) an Fritz 6690; EMS-ESP; 1 Echo V2; 3 Echo DOT; 1 Echo Connect; 2 Echo Show 5; Unifi Ap-Ac Lite.

                        GlasfaserG 1 Antwort Letzte Antwort
                        0
                        • ChaotC Chaot

                          @glasfaser Das kannst du aber auch genau so machen wie ich das eben beschrieben habe. Geht schneller und ist am Ende übersichtlicher finde ich.

                          GlasfaserG Offline
                          GlasfaserG Offline
                          Glasfaser
                          schrieb am zuletzt editiert von
                          #15

                          @chaot

                          Ja , du hast recht kann man so machen ,
                          aber die Vorlage wie oben , wird dann aber nicht richtig dargestellt .

                          Synology 918+ 16GB - ioBroker in Docker v9 , VISO auf Trekstor Primebook C13 13,3" , Hikvision Domkameras mit Surveillance Station .. CCU RaspberryMatic in Synology VM .. Zigbee CC2538+CC2592 .. Sonoff .. KNX .. Modbus ..

                          ChaotC 1 Antwort Letzte Antwort
                          0
                          • GlasfaserG Glasfaser

                            @chaot

                            Ja , du hast recht kann man so machen ,
                            aber die Vorlage wie oben , wird dann aber nicht richtig dargestellt .

                            ChaotC Offline
                            ChaotC Offline
                            Chaot
                            schrieb am zuletzt editiert von
                            #16

                            @glasfaser Interessant. Muss ich mal probieren.
                            Ich habe im Projektordner eine Hintergrundanweisung für das Projekt stehen:

                            .vis-view {
                             background-color: #3EECAC;
                            background-image: linear-gradient(19deg, #3EECAC 0%, #EE74E1 100%);
                            
                            }
                            ....
                            
                            

                            aber wenn ich in der View die CSS angebe wird die genutzt. Die aus dem Projekt wird nur bei den Views sichtbar die bei "use Background" keine Anweisung stehen haben.
                            Muss ich mir mal aus Interesse anschauen wie das obige Projekt genau aufgebaut ist wenn das anders funktioniert. Kann man vielleicht auch nutzen.

                            ioBroker auf NUC unter Proxmox; VIS: 12" Touchscreen und 17" Touch; Lichtsteuerung, Thermometer und Sensoren: Tasmota (39); Ambiente Beleuchtung: WLED (9); Heizung: DECT Thermostate (9) an Fritz 6690; EMS-ESP; 1 Echo V2; 3 Echo DOT; 1 Echo Connect; 2 Echo Show 5; Unifi Ap-Ac Lite.

                            1 Antwort Letzte Antwort
                            0
                            • mgiesoM Offline
                              mgiesoM Offline
                              mgieso
                              schrieb am zuletzt editiert von
                              #17

                              Hallo wie bekomme ich meine Alexas eingebunden und eigene Radiosender ?

                              Danke im Voraus

                              1 Antwort Letzte Antwort
                              0
                              Antworten
                              • In einem neuen Thema antworten
                              Anmelden zum Antworten
                              • Älteste zuerst
                              • Neuste zuerst
                              • Meiste Stimmen


                              Support us

                              ioBroker
                              Community Adapters
                              Donate

                              863

                              Online

                              32.4k

                              Benutzer

                              81.5k

                              Themen

                              1.3m

                              Beiträge
                              Community
                              Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen | Einwilligungseinstellungen
                              ioBroker Community 2014-2025
                              logo
                              • Anmelden

                              • Du hast noch kein Konto? Registrieren

                              • Anmelden oder registrieren, um zu suchen
                              • Erster Beitrag
                                Letzter Beitrag
                              0
                              • Home
                              • Aktuell
                              • Tags
                              • Ungelesen 0
                              • Kategorien
                              • Unreplied
                              • Beliebt
                              • GitHub
                              • Docu
                              • Hilfe