Neues YouTube-Video: Visualisierung im Devices-Adapter

[flkontakt]

@MCU sagte:

@flkontakt welche Version von aura?

Early Adopter, v0.9.127 😉

[MCU]

@flkontakt
Diesen JSON als Override nutzen

{
  "xAxis": {
    "axisLabel": {
      "color": "#ffffff",
      "fontSize": 12,
      "fontWeight": "bold"
    },
    "axisLine": {
      "lineStyle": {
        "color": "#ffffff"
      }
    }
  },
  "yAxis": {
    "axisLabel": {
      "color": "#ffffff",
      "fontSize": 12,
      "fontWeight": "bold"
    },
    "axisLine": {
      "lineStyle": {
        "color": "#ffffff"
      }
    },
    "splitLine": {
      "lineStyle": {
        "color": "rgba(255,255,255,0.15)"
      }
    }
  }
}

[MCU]

Man kann den Konverter jarvis2aura jetzt testen.
https://mcuiobroker.gitbook.io/iobroker-tipps/tipps/aura-visualisierung/jarvis2aura

[flkontakt]

@MCU sagte:

@flkontakt
Diesen JSON als Override nutzen

Mega, vielen Dank, sieht für mich gut aus. Wenn jetzt noch die Schrift der Werte über den Balken anpassbar wären, würde es auch auf dem Handy usw. besser erkennbar sein.

Sofern es noch kein Issue hierzu gibt, würde ich hierzu eins anlegen (grundsätzlich mehr Möglichkeiten, Beschriftungen anpassbar zu machen).

[MCU]

@flkontakt Versuch mal dies.

{
  "textStyle": {
    "color": "#ffffff",
    "fontWeight": "bold"
  },
  "xAxis": {
    "axisLabel": {
      "color": "#ffffff",
      "fontSize": 12,
      "fontWeight": "bold"
    },
    "axisLine": {
      "lineStyle": {
        "color": "#ffffff"
      }
    }
  },
  "yAxis": {
    "axisLabel": {
      "color": "#ffffff",
      "fontSize": 12,
      "fontWeight": "bold"
    },
    "axisLine": {
      "lineStyle": {
        "color": "#ffffff"
      }
    },
    "splitLine": {
      "lineStyle": {
        "color": "rgba(255,255,255,0.15)"
      }
    }
  }
}

[flkontakt]

@MCU sagte:

@flkontakt Versuch mal dies.

Balkenwert leider unverändert, ist aber kein Problem, grab dich da bitte nicht zu tief ein. Mit den Achsenwerten usw. hast du mir schon enorm geholfen. Vielen Dank!

[MCU]

@flkontakt Hiermit sollte es gehen

{
  "textStyle": {
    "color": "#ffffff",
    "fontWeight": "bold"
  },
  "xAxis": {
    "axisLabel": {
      "color": "#ffffff",
      "fontSize": 12,
      "fontWeight": "bold"
    },
    "axisLine": {
      "lineStyle": {
        "color": "#ffffff"
      }
    }
  },
  "yAxis": {
    "axisLabel": {
      "color": "#ffffff",
      "fontSize": 12,
      "fontWeight": "bold"
    },
    "axisLine": {
      "lineStyle": {
        "color": "#ffffff"
      }
    },
    "splitLine": {
      "lineStyle": {
        "color": "rgba(255,255,255,0.15)"
      }
    }
  },
  "series": 
    {
      "label": {
        "show": true,
        "position": "top",
        "color": "#ffffff",
        "fontSize": 12,
        "fontWeight": 900
      }
    }
  
}

[MCU]

Konvertierung Jarvis -> Aura in eigenem Thread.
https://forum.iobroker.net/topic/84636/konvertierung-jarvis-aura

[flkontakt]

@MCU sagte:

@flkontakt Hiermit sollte es gehen

Hallo @mcu , sorry für die späte Rückmeldung. Siehe Bilder, im Backend ist der gewünschte Effekt zu sehen, im Frontend werden die Balken dann aber nicht mehr angezeigt. Habe es mit Strg+F5 usw. versucht, auch habe ich in den CSS&JS den Eintrag rausgenommen, Balken werden dennoch nicht angezeigt. Bin ratlos. Aber nochmal der Hinweis, ist für mich kein Problem, die Werte oberhalb des Balken wären nur das Sahnehäubchen ;-).

Vielen Dank für deinen Support!

[OliverIO]

Hast du auf deiner roadmap evtl auch die Möglichkeit weitere 3rd-party widgets bereit stellen zu können, ohne das sie bei dir im repository sind?

evtl könnte ich dann ein paar meiner widgets für aura adaptieren und bspw über einen zusätzlich installierbaren adapter ala

ioBroker.aura-widgets-rssfeed

bereitzustellen, genau wie bspw
https://github.com/oweitman/ioBroker.vis-2-widgets-rssfeed
(das nur Beispielhaft)

[dering]

@OliverIO Coole Idee. Erstelle bitte dafür ein Issue, dann können wir dort gemeinsam überlegen, wie das aussehen könnte.

[Skippy07]

Hi, ist es irgendwie möglich, z.B. mit den Schnellzugriff-Chips Widget auf ein Tab zu verlinken. So das bei Klick das gewünschte Tab geöffnet wird?

[MCU]

@Skippy07
Das kann man mit einem Button machen und der Klick-Action.

[flkontakt]

@dering , siehe Screenshot und Link https://www.erforscht.com/forum/index.php?thread/328-zigbee-radar-raum-tracking-bewegungsmelder-esp32-c6-hlk-ld2450/&postID=1999&highlight=ld2450#post1999

Kann man das htmlWidget direkt in Aura einbinden?

[MCU]

@flkontakt Wo ist denn Dein DP?

[flkontakt]

@MCU sagte:

@flkontakt Wo ist denn Dein DP?

javascript.0.Raum-Wohnzimmer.widgetHtml

      <style>
        .roomWrap{position:relative;width:100%;height:100%;border:2px solid #000;background:#eee;overflow:hidden}
        .dot{position:absolute;width:16px;height:16px;border-radius:50%;transform:translate(-50%,-50%)}
        .zone{position:absolute;pointer-events:none;border:2px dashed;opacity:.15}
        .zone span{position:absolute;left:2px;top:2px;font-size:12px;color:#000}
      </style>
      <div class="roomWrap"><div class="dot" style="background:red;left:71.5%;top:87.4%"></div><div class="dot" style="background:blue;left:-100%;top:-100%"></div><div class="dot" style="background:green;left:-100%;top:-100%"></div><div class="zone" style="border-color:brown;background:brown;
                left:0.0%;top:51.9%;width:71.7%;height:46.2%"><span>Couch</span></div><div class="zone" style="border-color:green;background:green;
                left:0.0%;top:11.5%;width:113.0%;height:40.4%"><span>Couch bis Fernseher</span></div><div class="zone" style="border-color:black;background:black;
                left:28.3%;top:0.0%;width:80.4%;height:11.5%"><span>Schrank</span></div></div>

[MCU]

@flkontakt Und das klappt nicht?
Entweder über das Widget ->

oder CSS ->

.aura-widget-w-1777821996087 div:has(> style + .roomWrap) {
  height: 100vh !important;
}

[flkontakt]

@MCU sagte:

@flkontakt Und das klappt nicht?
Entweder über das Widget ->

oder CSS ->

.aura-widget-w-1777821996087 div:has(> style + .roomWrap) {
  height: 100vh !important;
}

Moin @mcu , vielen Dank für deine Rückmeldung, mit dem Eintrag <div style="height:520px">{dp}</div> funktioniert es jetzt. Siehe Bild, links das direkte Ergebnis in Aura mit dessen html-Widget, rechts per iframe aus iob-vis. Jetzt kann ich mir an der Stelle die Brücke nach iob-vis sparen.

Schönes Wochenende!