Jahresrückblick 2025 – unser neuer Blogbeitrag ist online! ✨

[DNC74]

@Zefau Klasse, funktioniert :+1:

So kann dann z.B. der Entsorgungskalender aussehen:

• 1 Tag vor Abholung
  • das Icon wechselt auf das "Abhol-Icon" und fängt an in der passenden Farbe zu "glühen"
  • der Text für die Resttage wird fett geschrieben
• am Tag der Abholung
  • das Icon blinkt zusätzlich für 10 Sekunden
  • der Text für die Resttage wird fett und in der sekundären Farbe geschrieben

Geräte im json-Format

  "ec4d61d9-112e-489d-8c3c-9159e03a6c52": {
    "id": "ec4d61d9-112e-489d-8c3c-9159e03a6c52",
    "function": "other",
    "states": {
      "daysLeft": {
        "state": {
          "node": "trashschedule.0.type.Altpapier_blau.daysLeft"
        },
        "icon": {
          "0": "delete-restore blink2s5x",
          "1": "delete-restore",
          "default": "delete-empty"
        },
        "unit": {
          "default": "Tage",
          "=1": "",
          "=0": ""
        },
        "label": "verbeibende Tage",
        "bodyElement": null,
        "iconStyle": {
          "default": {
            "fontSize": "48px"
          },
          "<=1": {
            "fontSize": "48px",
            "text-shadow": "0 0 25px blue"
          }
        },
        "stateStyle": {
          "0": {
            "color": "var(--secondary)",
            "fontWeight": "bold"
          },
          "<=1": {
            "fontWeight": "bold"
          }
        },
        "display": {
          "0": "heute",
          "1": "morgen"
        }
      },
      "nextDate": {
        "state": {
          "node": "trashschedule.0.type.Altpapier_blau.nextDateFormat"
        },
        "label": "Datum",
        "icon": "calendar",
        "iconStyle": ""
      }
    },
    "options": {},
    "attributes": {
      "_created": 1609527230666,
      "_updated": 1609599916081
    },
    "name": "Abfall Altpapier",
    "label": "Altpapier (blau)",
    "icon": "delete-empty",
    "hash": 1609599916082,
    "suppressPopup": true
  },
  "ec4d61d9-112e-489d-8c3c-9159e03a6c52_4cfab": {
    "id": "ec4d61d9-112e-489d-8c3c-9159e03a6c52_4cfab",
    "function": "other",
    "states": {
      "daysLeft": {
        "state": {
          "node": "trashschedule.0.type.Bioabfall_gruen.daysLeft"
        },
        "icon": {
          "0": "delete-restore blink2s5x",
          "1": "delete-restore",
          "default": "delete-empty"
        },
        "unit": {
          "default": "Tage",
          "=1": "",
          "=0": ""
        },
        "label": "verbeibende Tage",
        "bodyElement": null,
        "iconStyle": {
          "default": {
            "fontSize": "48px"
          },
          "<=1": {
            "fontSize": "48px",
            "text-shadow": "0 0 25px green"
          }
        },
        "stateStyle": {
          "0": {
            "color": "var(--secondary)",
            "fontWeight": "bold"
          },
          "<=1": {
            "fontWeight": "bold"
          }
        },
        "display": {
          "0": "heute",
          "1": "morgen"
        }
      },
      "nextDate": {
        "state": {
          "node": "trashschedule.0.type.Bioabfall_gruen.nextDateFormat"
        },
        "label": "Datum",
        "icon": "calendar",
        "iconStyle": ""
      }
    },
    "options": {},
    "attributes": {
      "_created": 1609527230666,
      "_updated": 1609605254477
    },
    "name": "Abfall Bio",
    "label": "Biotonne (grün)",
    "icon": "delete-empty",
    "hash": 1609605254477,
    "suppressPopup": true
  },
  "ec4d61d9-112e-489d-8c3c-9159e03a6c52_9099b": {
    "id": "ec4d61d9-112e-489d-8c3c-9159e03a6c52_9099b",
    "function": "other",
    "states": {
      "daysLeft": {
        "state": {
          "node": "trashschedule.0.type.Restmuell_schwarz.daysLeft"
        },
        "icon": {
          "0": "delete-restore blink2s5x",
          "1": "delete-restore",
          "default": "delete-empty"
        },
        "unit": {
          "default": "Tage",
          "=1": "",
          "=0": ""
        },
        "label": "verbeibende Tage",
        "bodyElement": null,
        "iconStyle": {
          "default": {
            "fontSize": "48px"
          },
          "<=1": {
            "fontSize": "48px",
            "text-shadow": "0 0 25px var(--text)"
          }
        },
        "stateStyle": {
          "0": {
            "color": "var(--secondary)",
            "fontWeight": "bold"
          },
          "<=1": {
            "fontWeight": "bold"
          }
        },
        "display": {
          "0": "heute",
          "1": "morgen"
        }
      },
      "nextDate": {
        "state": {
          "node": "trashschedule.0.type.Restmuell_schwarz.nextDateFormat"
        },
        "label": "Datum",
        "icon": "calendar",
        "iconStyle": ""
      }
    },
    "options": {},
    "attributes": {
      "_created": 1609527230666,
      "_updated": 1609610552738
    },
    "name": "Abfall Restmüll",
    "label": "Restmüll (schwarz)",
    "icon": "delete-empty",
    "hash": 1609610552739,
    "suppressPopup": true
  },
  "ec4d61d9-112e-489d-8c3c-9159e03a6c52_86c10": {
    "id": "ec4d61d9-112e-489d-8c3c-9159e03a6c52_86c10",
    "function": "other",
    "states": {
      "daysLeft": {
        "state": {
          "node": "trashschedule.0.type.Wertstoff_rot.daysLeft"
        },
        "icon": {
          "0": "delete-restore blink2s5x",
          "1": "delete-restore",
          "default": "delete-empty"
        },
        "unit": {
          "default": "Tage",
          "=1": "",
          "=0": ""
        },
        "label": "verbeibende Tage",
        "bodyElement": null,
        "iconStyle": {
          "default": {
            "fontSize": "48px"
          },
          "<=1": {
            "fontSize": "48px",
            "text-shadow": "0 0 25px red"
          }
        },
        "stateStyle": {
          "0": {
            "color": "var(--secondary)",
            "fontWeight": "bold"
          },
          "<=1": {
            "fontWeight": "bold"
          }
        },
        "display": {
          "0": "heute",
          "1": "morgen"
        }
      },
      "nextDate": {
        "state": {
          "node": "trashschedule.0.type.Wertstoff_rot.nextDateFormat"
        },
        "label": "Datum",
        "icon": "calendar",
        "iconStyle": ""
      }
    },
    "options": {},
    "attributes": {
      "_created": 1609527230666,
      "_updated": 1609531575579
    },
    "name": "Abfall Wertstoff",
    "label": "Wertstoff (rot)",
    "icon": "delete-empty",
    "hash": 1609531575580,
    "suppressPopup": true
  },
  "ec4d61d9-112e-489d-8c3c-9159e03a6c52_ff8a0": {
    "id": "ec4d61d9-112e-489d-8c3c-9159e03a6c52_ff8a0",
    "function": "other",
    "states": {
      "daysLeft": {
        "state": {
          "node": "trashschedule.0.type.Sperrmuell.daysLeft"
        },
        "icon": {
          "0": "delete-restore blink2s5x",
          "1": "delete-restore",
          "default": "delete-empty"
        },
        "unit": {
          "default": "Tage",
          "=1": "",
          "=0": ""
        },
        "label": "verbeibende Tage",
        "bodyElement": null,
        "iconStyle": {
          "default": {
            "fontSize": "48px"
          },
          "<=1": {
            "fontSize": "48px",
            "text-shadow": "0 0 25px magenta"
          }
        },
        "stateStyle": {
          "0": {
            "color": "var(--secondary)",
            "fontWeight": "bold"
          },
          "<=1": {
            "fontWeight": "bold"
          }
        },        
        "display": {
          "0": "heute",
          "1": "morgen"
        }
      },
      "nextDate": {
        "state": {
          "node": "trashschedule.0.type.Sperrmuell.nextDateFormat"
        },
        "label": "Datum",
        "icon": "calendar",
        "iconStyle": ""
      }
    },
    "options": {},
    "attributes": {
      "_created": 1609527230666,
      "_updated": 1609531539033
    },
    "name": "Abfall Sperrmüll",
    "label": "Sperrmüll",
    "icon": "delete-empty",
    "hash": 1609531539034,
    "suppressPopup": true
  }

CSS Klassen für das Blinken

/* Blinking Icons */
.blink {
   animation: blinker 2s linear infinite;
}
.blink1s {
   animation: blinker 1s linear infinite;
}
.blink2s5x {
   animation: blinker 2s linear 5;
}

@keyframes blinker {
   50% { opacity: 0; }
}

Danke @dabbeljuh :+1:

[Torrid]

@DNC74
wie hast du das "glühen" realisiert?

[DNC74]

@Torrid schau in den Spoiler "Geräte im json-Format" und du findest

"text-shadow": "0 0 25px blue"

siehe auch https://www.w3schools.com/css/css3_shadows.asp

[Johannes Bauerstatter]

Großes Lob an den Entwickler. Das Ding ist sehr schnell einsatzfähig und sehr intuitiv.

Ein kleines Problem hab ich noch:
Wie muss ich einen Schalter definieren, damit dieser meinen Alias mit 0 oder 1 schaltet:

[DNC74]

@sigi234 ich befürchte fast, Du hast dort nen Bug gefunden...

@Zefau zumindest laufe ich auf einen, wenn ich versuche, den max-Wert auf "0" zu setzen, es wird dann ein Slider von "-80" bis "100" angezeigt.

Mit einer Spanne von "-80" bis "10" klappt's dann.

@sigi234
Wichtig hier die Punkte "LevelBodyConfig": { "markStep": "9", "step": "5" },
und "properties": { "min": "-80", "max": "10" },

  "6c9e247b-f90f-4d27-a820-2662514d58f4": {
    "id": "6c9e247b-f90f-4d27-a820-2662514d58f4",
    "function": "other",
    "states": {
      "zoneMainVolumeDB": {
        "state": {
          "node": "denon.0.zoneMain.volumeDB"
        },
        "bodyElement": "LevelBody",
        "LevelBodyConfig": {
          "markStep": "9",
          "step": "5"
        },
        "properties": {
          "min": "-80",
          "max": "10"
        },
        "action": "denon.0.zoneMain.volumeDB",
        "actionElement": "InputAction"
      },
      "mainZoneVolume": {
        "state": {
          "node": "denon.0.zoneMain.volume"
        },
        "properties": {
          "min": "0",
          "max": "90"
        },
        "bodyElement": "LevelBody",
        "LevelBodyConfig": {
          "markStep": "9"
        },
        "action": "denon.0.zoneMain.volume",
        "actionElement": "InputAction"
      }
    },
    "options": {},
    "attributes": {
      "_created": 1609617271585,
      "_updated": 1609618559958
    },
    "name": "Denon AVR",
    "label": "Denon AVR",
    "icon": "audio-video",
    "hash": 1609618559958
  }

[DNC74]

@Johannes-Bauerstatter rechts unten über das "Action Element" kannst Du den Schalter auswählen.

[Zefau]

@Johannes-Bauerstatter sagte in jarvis v2.1.0 - just another remarkable vis:

Wie muss ich einen Schalter definieren, damit dieser meinen Alias mit 0 oder 1 schaltet:

siehe Wiki, https://github.com/Zefau/ioBroker.jarvis/wiki/de-Devices#datenpunkt-eigenschaften (mit on / off)

[sigi234]

@DNC74
Ja, 100 dB wäre fatal, das würde der AV nicht verkraften.

[DNC74]

@sigi234 würde mich aber auch wundern, wenn er es annehmen würde. Zumal man sowas wohl am besten am Datenpunkt im iobroker Objekt-Baum begrenzt ;-)

[Zefau]

@Aru sagte in jarvis v2.1.0 - just another remarkable vis:

Ich suche nach einer Möglichkeit über Jarvis einen Wert in einen Datenpunkt zu füllen. Ist das Möglich? Ich arbeite in einem Schichtsystem und habe unterschiedliche scripte die Schichtabhängig arbeiten. Ich würde gerne direkt in der Oberfläche mit 1-2 Klicks die Schicht für die Woche festlegen finde aber keine passende Möglichkeit.

Kommt drauf an, was du genau machen willst. InputAction liefert die ein Eingabefeld.

[sigi234]

@DNC74 sagte in jarvis v2.1.0 - just another remarkable vis:

@sigi234 würde mich aber auch wundern, wenn er es annehmen würde. Zumal man sowas wohl am besten am Datenpunkt im iobroker Objekt-Baum begrenzt ;-)

Nimmt er an, hatte mal aus Versehen 100 in den DP geschrieben. Nach einem lauten Klick hat er sich dann sofort ausgeschaltet. Das mit dem DP zu ändern muss ich mir noch anschauen. Bin da aber sehr vorsichtig.
Der DP ist ja eine Zeichenfolge und keine Zahl.

[DNC74]

@sigi234 keine Zahl? hmm... seltsam. also beim Denon gibt es zwei Werte für die Lautstärke, welche aber eigentlich nur eine andere Einheit darstellen, beides "type": "number"
volume

  "common": {
    "name": "Main Volume",
    "role": "level.volume",
    "type": "number",
    "min": 0,
    "max": 98,
    "read": true,
    "write": true
  },

und volumeDB

  "common": {
    "name": "Main Volume DB",
    "role": "level.volume.main",
    "type": "number",
    "read": true,
    "write": true,
    "min": -80,
    "max": 18,
    "unit": "dB"
  },

[Zefau]

Nutzt jemand den MQTT Adapter (https://github.com/Zefau/ioBroker.jarvis/issues/454) und könnte mir die Adapter-Struktur screenshoten?

[Aru]

@Zefau Öhem. Dazu hab ich im Wiki nichts gefunden, wo versteckt sich denn InputAction? Das ist kein Widget Modul oder?

[Zefau]

@Aru sagte in jarvis v2.1.0 - just another remarkable vis:

Dazu hab ich im Wiki nichts gefunden, wo versteckt sich denn InputAction? Das ist kein Widget Modul oder?

im StateList Modul:

[nolimitek]

@flkontakt besten Dank funktioniert perfekt lg

[Aru]

@Zefau Tatsächlich wäre das perfekt. Ich hab damit ein bisschen rumgespielt Ich sehe aber keinen Weg damit einen Datenpunkt anzusprechen der kein Gerät ist. Und beim Anlegen eines Fake Geräts kann Ich zwar einen Datenpunkt anlegen aber nicht auf einen Verweisen, zb auf einen in meinen Userdata

Und den in Jarvis angvelegten Datenpunkt kann Ich dann wiederum leider nicht als Objeckt über das Script ansprechen. Dann muss Ich mir vielleicht was anderes ausdenken

[Zefau]

@Aru sagte in jarvis v2.1.0 - just another remarkable vis:

Und beim Anlegen eines Fake Geräts kann Ich zwar einen Datenpunkt anlegen aber nicht auf einen Verweisen

Was meinst du damit? Der Anwendungsfall wäre hier tatsächlich das Anlegen eines Geräts in jarvis und dort einen Datenpunkt, der mittels Datenpunkt (Trigger) auf deinen userdata Datenpunkt in ioBroker zeigt. Diesem Trigger weist du dann das InputAction zu.

[Aru]

@Zefau Jetzt wo Ich die Namensgebung richtig hinbekommen habe funktionierts auch. Mein Unvermögen :slightly_smiling_face: , danke für die Hilfe.

[Tim12]

Ich komme in v2.0.0 mit dem iFrame-Modul noch nicht so ganz klar.

Worauf beziehen sich die Skalierungen mit den % bzw. vh-Werten? Die iFrames laufen unabhängig von der Einstellung grundsätzlich über die volle Spalten-/Seitenbreite - selbst bei festen Pixelwerten - und die Höhe bei 100% scheint eher in der Größenordnung von 100px zu liegen, so dass ich je nach Inhalt bei Werten von 500% liege, um eine 16:9 Grafik ordentlich darzustellen.
Auch die "Ausrichtung des Inhalts" und der Skalierungsbutton scheinen keine Auswirkung auf die Darstellung zu haben.
Habe ich da eine Grundidee des iFrame noch nicht verstanden? Ich wäre da für eine Beispielanwendung wirklich dankbar.