Neues Design: Tile

[rene54321]

Hallo,

vielen Dank für die neue Tile Visu. Ich wollte mich über die Feiertage ransetzen die neue Visu zu erstellen, scheitere aber schon an der Verbinung mit openHAB 4. Ich wollte auf den in OH4 integrierten Webserver zurückgreifen und hoffe das dies möglich ist? Einen API-Token habe ich erstellt und in der Visu hinterlegt:

<cv-meta>
<cv-backendtype="openhab"username="oh.CometVisuTile.RgsRJeKKMmDN1g7HYEN33lQDiprL C1os DOw932xi........................."/>

Beim Aufruf der Visu mittels Firefox oder auf dem iPad mit Safari erhalte ich eine Fehlermeldung:
grafik.png

Mittels Edge wird die Test-Seite aber angezeigt:
grafik.png
Leider erhalte ich aber keine Information der Werte über OH, so dass ich davon ausgehe das die Verbindung nicht korrekt hergestellt ist.

<cv-infoformat="%.2f">
<cv-addresstransform="OH:number">Temperatur_Wohnzimmer</cv-address>
<spanslot="label">Wohnzimmer</span>
<spanslot="unit">°C</span>
</cv-info>

Ich hoffe ihr könnt mir helfen.

VG René

[peuter]

Ich wollte mich über die Feiertage ransetzen die neue Visu zu erstellen, scheitere aber schon an der Verbinung mit openHAB 4. Ich wollte auf den in OH4 integrierten Webserver zurückgreifen und hoffe das dies möglich ist?

Ja das geht. Ich glaube die rote Fehlermeldung hat erstmal nichts mit der Verbindung zu tun. Die Fehlermeldung ist aber leider nicht sehr aussagekräftig, daher bleibt es bei der Vermutung. Ich brauche da mal die komplette Config (natürlich ohne irgendwelche Zugangsdaten), dann sehe ich vielleicht was. Aber irgendwie fehlen bei deinen Code-Schnipseln Leerzeichen, was die schwer lesbar macht.

2. Option: in der roten Fehlermeldung unten beide Checkboxen aktivieren, neu laden und wenn der Fehler kommt den Anweisungen folgen.

Eventuell liefert die Netzwerkkonsole des Browser auch noch irgendeinen Fehler (also irgendwas, was rot ist)?

[rene54321]

Hallo,

anbei die Test Config. Wenn ich den API-Key leicht abändere erhalte ich auch im OH4 Log einen Fehler:
grafik.png
somit scheint die Verbindung ja aufgebaut zu werden.

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<config
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:noNamespaceSchemaLocation="../visu_config_tile.xsd"
    version="1">
    <cv-meta>
       <cv-backend type="openhab" username="oh.CometVisuTile.RgsRJeKKMmDN1g7HYEN33lQ...................."/>
       <cv-mapping name="Connected">
            <entry value="0">ri-link-unlink-m</entry>
            <entry value="1">ri-link-m</entry>
        </cv-mapping>
        <cv-styling name="RedActive">
            <entry value="0">red</entry>
            <entry value="1">active</entry>
        </cv-styling>
    </cv-meta>
    <header>
        <cv-small-status format="tr('%d on')">
            <cv-icon slot="icon">ri-lightbulb-line</cv-icon>
            <cv-address transform="OH:switch">gHueLights_Alle_Switch</cv-address>
        </cv-small-status>
        <nav>
            <cv-menu model="pages"/>
        </nav>
    </header>
    <main>
        <cv-page id="eg" name="Erdgeschoss">
            <cv-page id="ez" name="Esszimmer" />
            <cv-page id="wz" name="Wohnzimmer" />
            <cv-page id="ku" name="Küche" />
            <cv-page id="bad" name="Badezimmer" />
        </cv-page>
        <cv-page id="og" name="Obergeschoss">
            <cv-page id="sz" name="Schlafzimmer" />
            <cv-page id="kz1" name="Kinderzimmer 1" />
            <cv-page id="kz2" name="Kinderzimmer 2" />
            <cv-page id="badOg" name="Badezimmer" />
        </cv-page>
        <cv-switch mapping="Connected" styling="RedActive">
            <cv-address slot="address" backend="system" mode="write" value="restart">backend:main</cv-address>
            <cv-address slot="address" backend="system" mode="read">backend:main:connected</cv-address>
            <span slot="primaryLabel">Verbindung</span>
            <span slot="secondaryLabel">openHAB</span>
        </cv-switch>
        <cv-info format="%.2f">
            <cv-address transform="OH:number">Temperatur_Wohnzimmer</cv-address>
            <span slot="label">Wohnzimmer</span>
            <span slot="unit">°C</span>
        </cv-info>
    </main>
    <footer>
        <!-- Optionaler Inhalt unten -->
        <cv-breadcrumbs/>
    </footer>
</config>​

VG René

[peuter]

Bei den beiden cv-address die vom openHAB-Backend gelesen werden sollen fehlt das slot="address", dadurch sich die Widgets falsch konfiguriert und es gibt keine Addressen die von openHAB gelesen werden sollen. Und deswegen wird die Verbindung gar nicht erst hergestellt.

[rene54321]

Hallo,

und danke für die prompte Hilfe :-). Die Werte werden nun angezeigt. Gibt es noch eine Erklärung wieso die Tile Visu nur in Edge ohne Fehler angezeigt wird. In meinem Firefox Browser und Safari auf den iPad kommt leider die oben schon erwähnte Fehlermeldung.

VG René

[peuter]

Ich habe gerade nur einen Chrome + Safari (beides auf MacOS) zur Hand, da tritt kein Fehler auf. Kann es morgen nochmal unter Firefox (Linux) probieren.

Nur als allgemeine Hinweise zu Deiner Config (dürfte beides nichts mit dem Fehler zu tun haben):
1. Das cv-small-status Widget im Header darf da eigentlich nicht direkt drin verwendet werden. Das gehört in eine cv-group. Das fällt bei einem nicht auf aber sobald Du da mehr reinpackst wird das Layout kaputt sein.
2. Die beiden Widgets die man im Screenshot auch sehen kann liegen nicht innerhalb einer cv-page (deswegen sind die auch so komisch positioniert und haben keinen Abstand). So werden die immer angezeigt egal auf welcher Seite du geraden bist (oder es passieren anderen komische Dinge). Einfach eine cv-page nochmal um alles innerhalb von main machen sollte das Problem lösen.

[rene54321]

Hallo peuter,

das setze ich gleich um "aller Anfang ist schwer". Vielen dank nochmals und schöne Feiertage.

VG René

[peuter]

Wie fast schon erwartet, habe ich den Fehler auch im Firefox nicht (Version 120.0 unter Linux). Kannst Du mal die Demo testen:
https://www.cometvisu.org/CometVisu/...op/demo/#start

Kommt da auch ein Fehler? Welche Firefox Version benutzt du?

So langsam bleibt nur noch das was ich in Post #77 als "2. Option" beschrieben habe über, wenn ich das damit auch nicht reproduzieren kann, dann gehen mir die einfachen Ideen aus.

[rene54321]

Hallo,

die Demo geht auch bei mir im Firefox auf Windows 11.

grafik.png
VG René

[rene54321]

Hallo,

wie ich gesehen habe wird auch das RSS-Log Plugin unterstützt. Für openHAB gab es dafür ja ein spezielles:
<rsslogsrc="plugins/rsslog/rsslog_oh.php"refresh="60"filter="Logger">

Gibt es in der Tile Visu hier auch einen Weg die Werte von openHAB anzeigen zu lassen?

VG René

[peuter]

Gibt es in der Tile Visu hier auch einen Weg die Werte von openHAB anzeigen zu lassen?

Momentan geht das noch nicht.

[rene54321]

Hallo,

gibt es eine Möglichkeit ein WebCam Image innerhalb eines Widgets zu platzieren, so dass es die Form des Widgets annimmt? Bei mir wird es auf die Breite skaliert aber es lappt über und die Ecken sind nicht rund.

Code:
<cv-widgetsize="2x1">
<cv-imagesrc="http://192.168.0.13/cgi-bin/CGIProxy.fcgi?cmd=snapPicture2&amp;usr=&amp;pwd="refresh="2"/>
</cv-widget>

<cv-widget-pair>
<cv-switchmapping="Mapping_Pforte_Push"styling="OnOff"button-size="normal">
<cv-addressslot="address"transform="OH:switch"mode="write"value="0">Pforte</cv-address>
<spanslot="secondaryLabel"tr="true">Pforte öffnen</span>
</cv-switch>
<cv-switchmapping="Mapping_Tor_Push"styling="OnOff"button-size="normal">
<cv-addressslot="address"transform="OH:switch"mode="write"value="0">Tor</cv-address>
<spanslot="secondaryLabel"tr="true">Tor öffnen</span>
</cv-switch>
</cv-widget-pair>

VG René

[rene54321]

Hallo,

nächste Frage zum Media-Player widget. Openhab übergibt für Duration und Progress nur ms Werte. Diese habe ich schon mit einem Mapping in Sekunden umgerechnet und im Widget eingebunden. Leider wird kein Progress angezeigt. Hat jemand eine Idee was man hier anpassen muss damit es korrekt angezeigt wird?


VG René

[peuter]

gibt es eine Möglichkeit ein WebCam Image innerhalb eines Widgets zu platzieren, so dass es die Form des Widgets annimmt? Bei mir wird es auf die Breite skaliert aber es lappt über und die Ecken sind nicht rund.

Die Config ist so nicht valide. Womit erstellt Du eigentlich Deine Configs? Der Editor sollte da eigentlich einen Fehler anzeigen. Denn die Grundstruktur eines Custom-Widgets ist:

<cv-widget>
  <cv-tile>
  ...
  </cv-tile>
</cv-widget>

Wenn Du Dein cv-image da einfügst, dann sollte es schon mal auf die Widget-Größe skalieren. Runde Ecke gehen aber nicht out-of-the-box (das würde andere Dinge kaputt machen). Aber Du kannst das natürlich für dieses spezielle Widget anpassen. Ein komplettes Beispiel sollte in etwa so aussehen:

<cv-meta>
  <style>
  .fill-image {
    overflow: hidden;
  }
  .fill-image img {
    object-fit: fill;
  }
  </style>​
</cv-meta>
...
<cv-widget size="2x1" class="fill-image">
  <cv-tile>
   <cv-image src="http://192.168.0.13/cgi-bin/CGIProxy.fcgi?cmd=snapPicture2&amp;usr=&amp;pwd="refresh="2"/>
  </cv-tile>
</cv-widget>​

[rene54321]

Hi,

ich erstelle die Confg direkt in VS-Code somit werden keine Fehler im Editor. Hast du vielleicht eine Idee fürs Media Widget wie man den Progress angezeigt bekommt? Die ersten inkompatibilitäten im Browser sind nach dem löschen des Browser-Cache nun nicht mehr aufgetreten.

VG René