Test VIS 2 inventwo Widgets

Mani79

@sigi234 Danke für die Antwort. Arbeite im Chrome Browser. Aber wie gerate geändert bei meinem Eintrag geht es jetzt nach Neustart von der Web Instanz.

Merlin123

Ich versuche gerade ein Bild einzufügen, da es kein passendes Icon gibt (oder ich das übersehe :P )
In den Einstellungen des Widgets wird es angezeigt, im Icon aber nicht.....
Irgendeine Idee, was da schief geht?

Screenshot 2025-10-25 105432.png

icebear

@merlin123 said in Test VIS 2 inventwo Widgets:

In den Einstellungen des Widgets wird es angezeigt, im Icon aber nicht.....
Irgendeine Idee, was da schief geht?

Hab ich bei mir auch irgendwann mal festgestellt, mal gehts und mal nicht, deshalb hab mir angewöhnt immer den absoluten Pfad bei Bildern anzugeben, also z.B. so ../vis-2.0/Icons/luefter_wp.png

Merlin123

@icebear Hmmm. Wenn ich
../vis-2.0/Icons/sonnenaufgang_klein.jpg
statt
_PRJ_NAME/Icons/sonnenaufgang_klein.jpg

mache, zeigt er das Gleiche an....

skvarel

@merlin123 .. hast du das Icon schon ins Issue eingetragen? Ich wollte morgen wieder ein paar Icons erstellen.

Merlin123

@skvarel ne, noch nicht... mach ich direkt...

Wenn ich die Bilder als Bild Widget einbinde geht es.... echt seltsam....
Aber reicht als Workaround :)

AlexAtHome

Ich habe eine Frage zum Widget "Tabelle".

Ich möchte damit JSON-Tabellen anzeigen, die mit dem Logparser erstellt werden.
Dieser kann so konfiguriert werden, dass er via CSS-Formatierungen bzw. Klassen mitgibt.

Beispiel:
{"date":"23.10. 18:10","severity":"info","from":"javascript.0","message":"*** Zigbee Connection auto-wiederhergestellt.","ts":1761235814044}

In meiner VIS-1-Visualisierung habe ich hierfür das Widget "basic - table" verwendet. Es hat die -Notation korrekt interpretiert, sprich als Klasse, und demzufolge in der Tabelle nicht als Text angezeigt.

Prinzipiell gefällt mir aber das Tabellen-Widget der inventwo design-Widgets von der Anpassbarkeit her besser.
Das funktioniert prinzipiell auch sehr schön, mit einer Ausnahme:

Kann ich das Widget irgendwie dazu "überreden", ebenfalls die -Tags zu interpretieren und nicht im Tabelleninhalt auszugeben? Aktuell wird die Klassenangabe ignoriert und mein zugehöriges CSS nicht angewendet.

btw: die Angabe unter "CSS Ränder" wird ignoriert, es wird kein Rand angezeigt.

Overall konnte ich bereits mit den vis-2-inventwo-widgets eine toll aussehende Visualisierung bauen, herzlichen Dank dafür!! (Natürlich auch an BlueFox Denis für die VIS-2 generell!)

--- Ergänzung ---
Ich habe eine Spalte im JSON, die einen Bool-Wert enthält. Kann ich diesen schön formatiert anzeigen? Im Moment habe ich nur die Möglichkeit gesehen, die Spalte als Zahl zu formatieren, es wird dann 0 oder 1 anzeigt.
Im VIS1-Widget konnte ich angeben, dass der Wert als Checkbox angezeigt wird, das fand ich sehr gut.

--- Ergänzung 2 ---
Ich bekomme den Tabellenhintergrund nicht formatiert. Leider wird anscheinend die Angabe unter "CSS Hintergrund" nicht angewendet. Eine globale CSS-Formatierung (Tab "CSS") unter Angabe einer CSS-Klasse wird ebenfalls nicht berücksichtigt.

BananaJoe

@alexathome ich nutze es das Widget für den Stromverbrauch und habe da auch den Text entsprechend eingefärbt:

Die Style-Anweisungen habe ich aber direkt in das JSON eingebaut:

{
    "name": "<!-- Strom-Einspeisung--><div style=\"color:orange;\">Strom-Einspeisung</div>",
    "phase": "L1L2L3",
    "power-W": 0,
    "today-kWh": 4.456,
    "today-costs-euro": 0.37,
    "yesterday-kWh": 0.616,
    "yesterday-costs": 0.05,
    "currentWeek-kWh": 7.603,
    "currentWeek-cost": 0.62,
    "currentMonth-kWh": 82.814,
    "currentMonth-cost": 6.79,
    "previousMonth-kWh": 216.941,
    "previousMonth-cost": 17.79,
    "currentQuarter-kWh": 82.814,
    "currentQuarter-cost": 6.79,
    "previousQuarter-kWh": 435.545,
    "previousQuarter-cost": 35.71,
    "currentYear-kWh": 1579.85,
    "currentYear-cost": 129.55,
    "previousYear-kWh": 1690.969,
    "previousYear-cost": 138.66
  },

Der Kommentar davor dient dazu die Sortierung zu Steuern, bei dem Beispiel ist das Egal aber ich habe andere Einträge die sonst nicht so sortiert werden wie ich das wollte. Der Kommentar wird zwar nicht angezeigt, beim sortieren aber berücksichtigt

AlexAtHome

@bananajoe Danke für die Idee, das schau ich mir mal an, ob das mit dem logparser auch so geht.

BananaJoe

@alexathome ich habe gerade erst einmal gesucht ob den Hochkommas in HTML-Code erlaubt sind ... scheint so.
Hatte ich noch nie gesehen (bei mir habe ich die ja escaped um die im JSON unterzubringen)

AlexAtHome

@bananajoe Im Logparser kann man leider nur angeben, dass er diese Klasseninformation ins JSON einfügt, aber keine eigene Formatierung oder Code angeben.

Ich habe die Klasseninformationen daher als Workaround nun erstmal rausgenommen, so bleibt das JSON lesbar.

Das ist jetzt auch kein Weltuntergang. Ich fände es halt praktisch, wenn Errors etwas mehr ins Auge springen würden.

BananaJoe

@alexathome naja, du könntest ja auch einfach den JSON der da rauskommt mit einem Skirpt nochmal bearbeiten und die bearbeitete Version dann verwenden.
Beim "bearbeiten" könnte dann schon ein Suchen & Ersetzen reichen, ersetze alle ERROR mit <formatierung>ERROR</> oder ähnlich

gto

Hallo, gibt es eine Anleitung zum Dropdown-Widget??
LG Thomas

skvarel

@gto sagte in Test VIS 2 inventwo Widgets:

Hallo, gibt es eine Anleitung zum Dropdown-Widget??
LG Thomas

Nicht wirklich. Wo hapert es? Du trägst einfach nur den Datenpunkt deiner Liste ein und hast dann den Inhalt als Dropdown.

gto

@skvarel
Hallo, ich stehe leider auf dem Schlauch.
Im Widget habe ich unter Allgemein die Objekt Identifikation und unter Dropdown Vom Widget.

Wie kann ein Datenpunkt eine Liste enthalten?
Wo kommt der Schaltoutput hin?

skvarel

@gto .. so sieht zum Beispiel der Datenpunkt vom WLED Preset aus:

wled.0.94b97ed90764.seg.0.fx

{
  "type": "state",
  "common": {
    "name": "ID of the effect ",
    "type": "number",
    "role": "value",
    "read": true,
    "unit": "",
    "write": true,
    "states": {
      "0": "Solid",
      "1": "Blink",
      "2": "Breathe",
      "3": "Wipe",
      "4": "Wipe Random",
      "5": "Random Colors",
      "6": "Sweep",
      "7": "Dynamic",
      "8": "Colorloop",
      "9": "Rainbow",
      "10": "Scan",
      "11": "Scan Dual",
      "12": "Fade",
      "13": "Theater",
      "14": "Theater Rainbow",
      "15": "Running",
      "16": "Saw",
      "17": "Twinkle",
      "18": "Dissolve",
      "19": "Dissolve Rnd",
      "20": "Sparkle",
      "21": "Sparkle Dark",
      "22": "Sparkle+",
      "23": "Strobe",
      "24": "Strobe Rainbow",
      "25": "Strobe Mega",
      "26": "Blink Rainbow",
      "27": "Android",
      "28": "Chase",
      "29": "Chase Random",
      "30": "Chase Rainbow",
      "31": "Chase Flash",
      "32": "Chase Flash Rnd",
      "33": "Rainbow Runner",
      "34": "Colorful",
      "35": "Traffic Light",
      "36": "Sweep Random",
      "37": "Chase 2",
      "38": "Aurora",
      "39": "Stream",
      "40": "Scanner",
      "41": "Lighthouse",
      "42": "Fireworks",
      "43": "Rain",
      "44": "Tetrix",
      "45": "Fire Flicker",
      "46": "Gradient",
      "47": "Loading",
      "48": "Rolling Balls",
      "49": "Fairy",
      "50": "Two Dots",
      "51": "Fairytwinkle",
      "52": "Running Dual",
      "53": "RSVD",
      "54": "Chase 3",
      "55": "Tri Wipe",
      "56": "Tri Fade",
      "57": "Lightning",
      "58": "ICU",
      "59": "Multi Comet",
      "60": "Scanner Dual",
      "61": "Stream 2",
      "62": "Oscillate",
      "63": "Pride 2015",
      "64": "Juggle",
      "65": "Palette",
      "66": "Fire 2012",
      "67": "Colorwaves",
      "68": "Bpm",
      "69": "Fill Noise",
      "70": "Noise 1",
      "71": "Noise 2",
      "72": "Noise 3",
      "73": "Noise 4",
      "74": "Colortwinkles",
      "75": "Lake",
      "76": "Meteor",
      "77": "Meteor Smooth",
      "78": "Railway",
      "79": "Ripple",
      "80": "Twinklefox",
      "81": "Twinklecat",
      "82": "Halloween Eyes",
      "83": "Solid Pattern",
      "84": "Solid Pattern Tri",
      "85": "Spots",
      "86": "Spots Fade",
      "87": "Glitter",
      "88": "Candle",
      "89": "Fireworks Starburst",
      "90": "Fireworks 1D",
      "91": "Bouncing Balls",
      "92": "Sinelon",
      "93": "Sinelon Dual",
      "94": "Sinelon Rainbow",
      "95": "Popcorn",
      "96": "Drip",
      "97": "Plasma",
      "98": "Percent",
      "99": "Ripple Rainbow",
      "100": "Heartbeat",
      "101": "Pacifica",
      "102": "Candle Multi",
      "103": "Solid Glitter",
      "104": "Sunrise",
      "105": "Phased",
      "106": "Twinkleup",
      "107": "Noise Pal",
      "108": "Sine",
      "109": "Phased Noise",
      "110": "Flow",
      "111": "Chunchun",
      "112": "Dancing Shadows",
      "113": "Washing Machine",
      "114": "Rotozoomer",
      "115": "Blends",
      "116": "TV Simulator",
      "117": "Dynamic Smooth",
      "118": "Spaceships",
      "119": "Crazy Bees",
      "120": "Ghost Rider",
      "121": "Blobs",
      "122": "Scrolling Text",
      "123": "Drift Rose",
      "124": "Distortion Waves",
      "125": "Soap",
      "126": "Octopus",
      "127": "Waving Cell",
      "128": "Pixels",
      "129": "Pixelwave",
      "130": "Juggles",
      "131": "Matripix",
      "132": "Gravimeter",
      "133": "Plasmoid",
      "134": "Puddles",
      "135": "Midnoise",
      "136": "Noisemeter",
      "137": "Freqwave",
      "138": "Freqmatrix",
      "139": "GEQ",
      "140": "Waterfall",
      "141": "Freqpixels",
      "142": "RSVD",
      "143": "Noisefire",
      "144": "Puddlepeak",
      "145": "Noisemove",
      "146": "Noise2D",
      "147": "Perlin Move",
      "148": "Ripple Peak",
      "149": "Firenoise",
      "150": "Squared Swirl",
      "151": "RSVD",
      "152": "DNA",
      "153": "Matrix",
      "154": "Metaballs",
      "155": "Freqmap",
      "156": "Gravcenter",
      "157": "Gravcentric",
      "158": "Gravfreq",
      "159": "DJ Light",
      "160": "Funky Plank",
      "161": "RSVD",
      "162": "Pulser",
      "163": "Blurz",
      "164": "Drift",
      "165": "Waverly",
      "166": "Sun Radiation",
      "167": "Colored Bursts",
      "168": "Julia",
      "169": "RSVD",
      "170": "RSVD",
      "171": "RSVD",
      "172": "Game Of Life",
      "173": "Tartan",
      "174": "Polar Lights",
      "175": "Swirl",
      "176": "Lissajous",
      "177": "Frizzles",
      "178": "Plasma Ball",
      "179": "Flow Stripe",
      "180": "Hiphotic",
      "181": "Sindots",
      "182": "DNA Spiral",
      "183": "Black Hole",
      "184": "Wavesins",
      "185": "Rocktaves",
      "186": "Akemi"
    }
  },
  "from": "system.adapter.wled.0",
  "user": "system.user.admin",
  "ts": 1772646305568,
  "_id": "wled.0.94b97ed90764.seg.0.fx",
  "acl": {
    "object": 1636,
    "state": 1636,
    "owner": "system.user.admin",
    "ownerGroup": "system.group.administrator"
  }
}

So dann im VIS Editor:

So dann in der Runtime:

skvarel

Das klappt auch mit anderen Datenpunkten.

Hier ein Beispiel von meinem Rasen-Roboter

Der Datenpunkt:

{
  "type": "state",
  "common": {
    "name": {
      "en": "Send command",
      "de": "Befehl senden",
      "ru": "Отправить команду",
      "pt": "Enviar comando",
      "nl": "Stuur het bevel",
      "fr": "Envoyer la commande",
      "it": "Invia comando",
      "es": "Enviar comando",
      "pl": "Dowództwo Senatu",
      "uk": "Надіслати команду",
      "zh-cn": "总指挥"
    },
    "type": "number",
    "role": "value",
    "read": true,
    "write": true,
    "desc": "send Command to Landroid",
    "states": {
      "1": "Start",
      "2": "Stop",
      "3": "Home",
      "4": "Follow border",
      "5": "Wi-Fi Lock",
      "6": "Wi-Fi Unlock",
      "7": "Reset Log",
      "8": "Pause over border",
      "9": "safe homing",
      "100": "Pairing command",
      "103": "Start driving",
      "104": "Stop driving"
    }
  },
  "native": {},
  "from": "system.adapter.worx.0",
  "user": "system.user.admin",
  "ts": 1759328365411,
  "_id": "worx.0.202430267101003276EC.mower.sendCommand",
  "acl": {
    "object": 1636,
    "state": 1636,
    "owner": "system.user.admin",
    "ownerGroup": "system.group.administrator"
  }
}

gto

Danke, habe es geschafft.
Noch eine Frage: Kann man für das heruntergeklappte Menü auch "ohne Rundungen an den Ecken" einstellen?

skvarel

Hast du hier die Einstellungen ausprobiert?

Wenn das nichts bringt, bitte ein Issue beim Adapter aufmachen. Mein Sohn ist hier nicht sehr aktiv, auf Issues reagiert aber recht schnell.

gto

Radius auf 0 bringt leider nichts, mache dann ein Issue, danke für deine Hilfe

Community Forum

NEWS

Test VIS 2 inventwo Widgets

Support us

609

32.7k

82.5k

1.3m