Tile: cv-info, mappings, cv-button/cv-switch

[mivola]

Hallo zusammen,

ich versuche aktuell meine Raffstores im Tile Design einzubinden. So sieht es in meiner alten Config im Metal Design aus:
image.png

So ähnlich würde ich es auch gern mit dem Tile Design umsetzen. Ich habe das Shutter Widget gesehen, aber irgendwie ist das nicht so ganz das, was ich mir vorstelle. Also versuche ich es anders. Aktuell habe ich:

<div class="content">
    <label class="primary">${label}</label>
</div>
<cv-info mapping="Shutter" size="button">
    <cv-address slot="address" mode="read" transform="DPT:5.001">${position-address}</cv-address>
    <cv-icon slot="value-component" size="large"/>
</cv-info>
<cv-info value-size="medium" size="button" format="%d %%">
    <cv-address slot="address" mode="read" transform="DPT:5.001">${position-address}</cv-address>
</cv-info>
<cv-button class="round-button" mapping="Up" size="small" styling="GreyGrey">
    <cv-address mode="write" transform="DPT:1.001" value="0">${drive-address}</cv-address>
    <cv-icon class="value" />
</cv-button>
<cv-button class="round-button" mapping="Stop" size="small" styling="GreyGrey">
    <cv-address mode="write" transform="DPT:1.001" value="1">${stop-address}</cv-address>
    <cv-icon class="value" />
</cv-button>
<cv-button class="round-button" mapping="Down" size="small" styling="GreyGrey">
    <cv-address mode="write" transform="DPT:1.001" value="1">${drive-address}</cv-address>
    <cv-icon class="value" />
</cv-button>
<cv-button class="round-button" mapping="LockUnlock" size="small">
    <cv-address mode="readwrite" transform="DPT:1.001">${lock-address}</cv-address>
    <cv-icon class="value" />
</cv-button>
<cv-button class="round-button" mapping="Ventilate" size="small">
    <cv-address mode="readwrite" transform="DPT:5.001" value="50">${vent-address}</cv-address>
    <cv-address mode="read" transform="DPT:5.001">${vent-read-address}</cv-address>
    <cv-icon class="value" />
</cv-button>​​

Dazu ein paar Mappings und Stylings:

        <cv-mapping name="Up"><entry value="*">ri-arrow-up-s-line</entry></cv-mapping>
        <cv-mapping name="Down"><entry value="*">ri-arrow-down-s-line</entry></cv-mapping>
        <cv-mapping name="Stop"><entry value="*">ri-stop-line</entry></cv-mapping>
        <cv-mapping name="Shutter">
            <entry value="0">knxuf-fts_shutter_2w</entry>
            <entry range_min="1" range_max="15">knxuf-fts_shutter_10</entry>
            <entry range_min="15" range_max="25">knxuf-fts_shutter_20</entry>
            <!-- TODO -->
            <entry range_min="25" range_max="99">knxuf-fts_shutter_30</entry>
            <entry value="100">knxuf-fts_shutter_100</entry>
        </cv-mapping>
        <cv-mapping name="Ventilate">
          <entry range_min="0" range_max="15">knxuf-fts_blade_arc_10</entry>
          <entry range_min="15" range_max="25">knxuf-fts_blade_arc_20</entry>
          <entry range_min="25" range_max="35">knxuf-fts_blade_arc_30</entry>
          <entry range_min="35" range_max="45">knxuf-fts_blade_arc_40</entry>
          <entry range_min="45" range_max="55">knxuf-fts_blade_arc_50</entry>
          <entry range_min="55" range_max="65">knxuf-fts_blade_arc_60</entry>
          <entry range_min="65" range_max="75">knxuf-fts_blade_arc_70</entry>
          <entry range_min="75" range_max="85">knxuf-fts_blade_arc_80</entry>
          <entry range_min="85" range_max="99">knxuf-fts_blade_arc_90</entry>
          <entry value="100">knxuf-fts_blade_arc_100</entry>
        </cv-mapping>
        <cv-mapping name="LockUnlock">            
            <entry value="0">ri-lock-line</entry>
            <entry value="1">ri-lock-unlock-line</entry>
        </cv-mapping>
        <cv-styling name="GreyGrey">
            <entry value="0">grey</entry>
            <entry value="1">grey</entry>
        </cv-styling>​
​

Das führt aktuell zu dieser Ansicht:
image.png
image.png

Offensichtlich gibt es damit einige Probleme:
- das erste Icon wird nicht angezeigt (außer wenn der Wert genau 100 ist - gibt es evtl ein Problem mit range_min/max?)
- die beiden cv-info Elemente hätte ich gern ohne diesen unschönen Hintergrund
- das Icon im letzen cv-button wird trotz Mapping gar nicht angezeigt
- gibt es eine Möglichkeit die Icons (für Hoch/Runter/Stop) im Moment des Drückens eine andere Farbe anzeigen zu lassen?
- Was ist der Unterschied zw cv-button (aus der Tile Demo Config) ind dem cv-switch (aus der Doku)

Danke und VG
Micha

[peuter]

Als erster Hinweis: Du solltest einen Editor benutzen der Dich auf Fehler in der Config hinweist, der dürfte allerdings den gesamten Code aus dem Beispiel rot anmalen, denn davon ist vermutlich nichts valide.

- das erste Icon wird nicht angezeigt (außer wenn der Wert genau 100 ist - gibt es evtl ein Problem mit range_min/max?)

Wenn man die richtig angibt nicht: die heißen "range-min" und "range-max" also mit Bindestrich und nicht mit Unterstrich.

- die beiden cv-info Elemente hätte ich gern ohne diesen unschönen Hintergrund

Du kannst alles mit CSS-Regeln im "style"-Attribut an dem Element überschreiben, am besten in den Entwicklertools anschauen, da kannst Du auch live das CSS ändern und wenn es für dich passt einfach rüberkopieren.

- das Icon im letzen cv-button wird trotz Mapping gar nicht angezeigt

Siehe oben, falsche Syntax

- gibt es eine Möglichkeit die Icons (für Hoch/Runter/Stop) im Moment des Drückens eine andere Farbe anzeigen zu lassen?

Wenn Du ein anderes Styling als "GreyGrey" schon. Das sind Trigger-Buttons die gehen beim klicken mal kurz in den "on"-Zustand, daher kannst Du die Farbe einfach per styling steuern.

- Was ist der Unterschied zw cv-button (aus der Tile Demo Config) ind dem cv-switch (aus der Doku)

cv-button ist eine Komponente, cv-switch ist ein Widget. Ein Widget ist eine Kachel die sich i.d.R. aus mehreren Komponenten zusammen setzt. Beim cv-switch sind das ein cv-button und ein Label, beim cv-shutter z.B. mehrere Buttons und ein Label, usw.
Komponenten sind die Bausteine aus denen man sich Widgets zusammenbaut.

Mal ein kurzer Hinweis zu dem was du Dir da gerade zusammen baust: Das Tile-Design basiert auf Kacheln (wie der Name schon sagt), die sind so dimensioniert, dass Du damit ohne eigenes Zutun eine responsive Seite hast die sich selbstständig an alle Bildschirmgrößen anpasst. Wenn Du keine Kacheln benutzt verlierst Du diesen Vorteil und hast abgesehen davon auch eine invalide Config.
Außerdem verlässt Du hier die Pfade dessen was in Sachen Customizing angedacht ist, kann dementsprechend sein, dass Du bei zukünftigen Updates der CometVisu erstmal Deine Anpassungen überarbeiten musst.
Kann man alles machen, wenn man möchte. Aber ich will zumindest gewarnt haben. Ich kann aus den o.g. Gründen nur dazu raten das in ein Widget zu packen, die gibts auch in doppelter Breite `size="2x1"` wenn die normale Größe zu klein ist.

[mivola]

Als erster Hinweis: Du solltest einen Editor benutzen der Dich auf Fehler in der Config hinweist, der dürfte allerdings den gesamten Code aus dem Beispiel rot anmalen, denn davon ist vermutlich nichts valide.

Also ich nutze den normalen Editor der CV. Der hatte für range_min/max keine Fehler angezeigt. Erst nach einem Reload der Seite wurden die Fehler entsprechend angezeigt. Und dann auch dieser hier: "Character content other than whitespace is not allowed because the content type is 'element-only'." - was hat das zu bedeuten?

image.png

Wenn man die richtig angibt nicht: die heißen "range-min" und "range-max" also mit Bindestrich und nicht mit Unterstrich.

OK, damit funktioniert es; Danke!! Allerdings hatte ich die aus der Doku kopiert und dort stehen sie noch mit "_": https://www.cometvisu.org/CometVisu/...g.html#mapping ;-)

Du kannst alles mit CSS-Regeln im "style"-Attribut an dem Element überschreiben, am besten in den Entwicklertools anschauen, da kannst Du auch live das CSS ändern und wenn es für dich passt einfach rüberkopieren.

Das hatte ich versucht. Ich scheiterte aber daran das richtige Element zu "treffen/finden". Wenn ich die Properties "background-color" & "box-shadow" von cv-widget lösche, habe ich den gewünschten Effekt - aber leider bei allen "cv-widget" Elementen.
Jetzt habe ich nochmal einen anderen Ansatz versucht: ich setze id="shutter-info" in den <cv-info> Elementen und in <style> definiere ich dann:

        #shutter-info {
          background-color: var(--tileForeground);
          box-shadow: 0px 0px 0px var(--tileForeground);
        }​

Wenn Du ein anderes Styling als "GreyGrey" schon. Das sind Trigger-Buttons die gehen beim klicken mal kurz in den "on"-Zustand, daher kannst Du die Farbe einfach per styling steuern.

Ja, das ist richtig. Das Problem dabei ist, dass dann beim initialen Laden der Seite die Buttons entsprechend des zuletzt gesendeten Wertes eingefärbt werden. Da für Stop zb immer eine 1 gesendet wird, ist das Icon demzufolge beim Laden immer "active".
image.png
Nach dem ersten Klick ist es dann "inactive" und wird bei jedem weiteren Klick nur kurz "active" - so wie es sein sollte.

Evtl müsste man das Laden/Lesen des Wertes verhinden, wenn im Button nur eine "write"-Adresse definiert ist?

cv-button ist eine Komponente, cv-switch ist ein Widget. Ein Widget ist eine Kachel die sich i.d.R. aus mehreren Komponenten zusammen setzt. Beim cv-switch sind das ein cv-button und ein Label, beim cv-shutter z.B. mehrere Buttons und ein Label, usw.
Komponenten sind die Bausteine aus denen man sich Widgets zusammenbaut.

Mal ein kurzer Hinweis zu dem was du Dir da gerade zusammen baust: Das Tile-Design basiert auf Kacheln (wie der Name schon sagt), die sind so dimensioniert, dass Du damit ohne eigenes Zutun eine responsive Seite hast die sich selbstständig an alle Bildschirmgrößen anpasst. Wenn Du keine Kacheln benutzt verlierst Du diesen Vorteil und hast abgesehen davon auch eine invalide Config.
Außerdem verlässt Du hier die Pfade dessen was in Sachen Customizing angedacht ist, kann dementsprechend sein, dass Du bei zukünftigen Updates der CometVisu erstmal Deine Anpassungen überarbeiten musst.
Kann man alles machen, wenn man möchte. Aber ich will zumindest gewarnt haben. Ich kann aus den o.g. Gründen nur dazu raten das in ein Widget zu packen, die gibts auch in doppelter Breite `size="2x1"` wenn die normale Größe zu klein ist.

Danke für die Hinweise, das muss ich mir nochmal in Ruhe anschauen/überlegen. Prinzipiell finde ich die Kacheln und das Responsive Design schon gut und richtig. Aber an manchen Stellen verbraucht es einfach ziemlich viel Platz. Wenn ich zB eine Übersicht über 15 Raffstores haben möchte, müsste ich (auf dem Handy) ganz schön viel scrollen ...

Ich wollte mich auch generell nochmal bei Dir, Chris und allen anderen, die die CometVisu am Leben halten, ausdrücklich bedanken. Ich nutze sie jetzt schon seit 10 Jahren und freue mich schon auf die nächste Version mit dem Tile-Design.
Kann man dir/euch/dem Projekt etwas Gutes tun? Spenden? Bier?

Danke und VG
Micha

[peuter]

Also ich nutze den normalen Editor der CV. Der hatte für range_min/max keine Fehler angezeigt. Erst nach einem Reload der Seite wurden die Fehler entsprechend angezeigt. Und dann auch dieser hier: "Character content other than whitespace is not allowed because the content type is 'element-only'." - was hat das zu bedeuten?

Das bedeutet dass da irgendwo einfacher Text (also kein etwas was nicht in ein Element mit <> eingeschlossen ist) drin steht, der Screenshots zeigt nicht den ganzen Inhalt, zumindest in dem Teil sehe ich keinen Text. Warum der den Fehler erst nach reload anzeigt kann ich auch nicht erklären.

OK, damit funktioniert es; Danke!! Allerdings hatte ich die aus der Doku kopiert und dort stehen sie noch mit "_": https://www.cometvisu.org/CometVisu/...g.html#mapping ;-)

Danke für den Hinweis, da ist die Doku tatsächlich falsch.

Das hatte ich versucht. Ich scheiterte aber daran das richtige Element zu "treffen/finden". Wenn ich die Properties "background-color" & "box-shadow" von cv-widget lösche, habe ich den gewünschten Effekt - aber leider bei allen "cv-widget" Elementen.
Jetzt habe ich nochmal einen anderen Ansatz versucht: ich setze id="shutter-info" in den <cv-info> Elementen und in <style> definiere ich dann:

Ist im Grunde der richtige Ansatz, nur als kleine Feinheit: Eigentlich sollte innerhalb einer Seite eine ID immer nur von genau einem Element benutzt werden (da ist aber kein Browser so streng, dass er da was gegen tut). Richtiger wäre es eine "class" zu benutzen, sprich class="shutter-info" und in CSS dann mit ".shutter-info" anstatt "#shutter-info" ansprechen.

Ja, das ist richtig. Das Problem dabei ist, dass dann beim initialen Laden der Seite die Buttons entsprechend des zuletzt gesendeten Wertes eingefärbt werden. Da für Stop zb immer eine 1 gesendet wird, ist das Icon demzufolge beim Laden immer "active".
image.png
Nach dem ersten Klick ist es dann "inactive" und wird bei jedem weiteren Klick nur kurz "active" - so wie es sein sollte.

Evtl müsste man das Laden/Lesen des Wertes verhinden, wenn im Button nur eine "write"-Adresse definiert ist?

Das sollte genau so sein, eine "write"-Adresse sollte niemals lesen, sonst wäre das ein Bug. Bin mir auch relativ sicher, dass die das nicht tut. Das Problem kommt vermutlich eher durch das value="1", wenn ich das richtig im Kopf habe wird das Element in diesem Fall mit diesem Wert vor-initialisiert. Es gibt Gründe warum das so ist (hab ich nur gerade nicht parat), aber das ist in Deinem Anwendungsfall natürlich kontraproduktiv. Da muss ich nochmal in Ruhe drüber nachdenken, ob mir da eine bessere Lösung einfällt.

Danke für die Hinweise, das muss ich mir nochmal in Ruhe anschauen/überlegen. Prinzipiell finde ich die Kacheln und das Responsive Design schon gut und richtig. Aber an manchen Stellen verbraucht es einfach ziemlich viel Platz. Wenn ich zB eine Übersicht über 15 Raffstores haben möchte, müsste ich (auf dem Handy) ganz schön viel scrollen ...

Das ist der klassische Anwendungsfall für eigene Widgets, die kannst Du ja mit doppelter Breite machen und dann mit dem Inhalt füllen den Du oben schon ohne Widget hast. Dann hast Du Platz gespart und bleibst trotzdem bei den Kacheln.

Ich wollte mich auch generell nochmal bei Dir, Chris und allen anderen, die die CometVisu am Leben halten, ausdrücklich bedanken. Ich nutze sie jetzt schon seit 10 Jahren und freue mich schon auf die nächste Version mit dem Tile-Design.
Kann man dir/euch/dem Projekt etwas Gutes tun? Spenden? Bier?

Haben wir jetzt meines Wissens keinen Weg für wie man das machen kann. Du hilfst gerade schon ungemein in dem Du das Tile Design intensiv benutzt und ja auch schon diverse Bugs/Doku-Fehler gefunden hast. Das ist das was mich momentan noch davon abhält überhaupt mal über ein Release nachzudenken, dazu müssten das mehr Leute testen und solche Fehler zu finden.
Daher bitte immer weiter machen und wenn Du mal fertig bist würde ich mich auch über ein paar Screenshots vom Endergebnis hier freuen. Vielleicht motiviert das auch den ein oder anderen seine Visu auch mal mit dem Tile-Design einzurichten.

[Chris M.]

Ich wollte mich auch generell nochmal bei Dir, Chris und allen anderen, die die CometVisu am Leben halten, ausdrücklich bedanken. Ich nutze sie jetzt schon seit 10 Jahren und freue mich schon auf die nächste Version mit dem Tile-Design.
Kann man dir/euch/dem Projekt etwas Gutes tun? Spenden? Bier?

Danke für diese Worte. Die sind für mich persönlich schon viel Wert. Mein normaler Job ist aber ausreichend bezahlt, da brauche ich keine Spende. Aber, das zeigt umgedreht, was hilft: Zeit, denn die kann man ja nicht kaufen
D.h. die beste Unterstützung ist, wenn Du Zeit in das Projekt investierst. Je nach eigenen Fähigkeit können das ganz unterschiedliche Bereiche sein: Testen, Doku-Schreiben und/oder verbessern (aufgrund der unterschiedlichen Sichtweiten ist eine gute Anwender-Doku für Entwickler nur sehr, sehr schwer zu erstellen), Werbung machen (letzte beiden Themen kann man auch verbinden: Anleitungs-Videos machen), ... - alles möglich ohne irgend eine Ahnung vom Programmieren zu haben.
Und wenn man sich schon bisschen auskennt, und/oder eine künstlerische Ader hat, dann würde ich mich über weitere Designs freuen.

[mivola]

OK, dann werde ich erstmal fleißig weiter testen und Bugs suchen. Wenn ich irgendwann soweit bin, stelle ich meine Config mal vor ...

[mivola]

Richtiger wäre es eine "class" zu benutzen, sprich class="shutter-info" und in CSS dann mit ".shutter-info" anstatt "#shutter-info" ansprechen.

Danke für den Tipp. Das funktioniert, allerdings nur wenn ich "!important" hinzufüge, also so hier:

        .shutter-info {
          background-color: var(--tileForeground) !important;
          box-shadow: 0px 0px 0px var(--tileForeground) !important;
        }​

[peuter]

Eine Alternative zu "!important" ist es mit dem Selektor in der CSS-Regel präziser zu sein als die vorhandenen Regeln, sprich

body cv-widget.shutter-info {
  background-color: var(--tileForeground) !important;
  box-shadow: 0px 0px 0px var(--tileForeground) !important;
}​​

müsste eigentlich auch gehen (habs aber nicht getestet)

[mivola]

So hier funktioniert es auch:

        body .shutter-info {
          background-color: var(--tileForeground);
          box-shadow: 0px 0px 0px var(--tileForeground);
        }​

[peuter]

Ja, das ist richtig. Das Problem dabei ist, dass dann beim initialen Laden der Seite die Buttons entsprechend des zuletzt gesendeten Wertes eingefärbt werden. Da für Stop zb immer eine 1 gesendet wird, ist das Icon demzufolge beim Laden immer "active".

Auch dieses Verhalten wurde in der 0.13.0-dev126 geändert und sollte nun in Deinem Anwendungsfall wie gewünscht funktionieren.

[mivola]

Auch dieses Verhalten wurde in der 0.13.0-dev126 geändert und sollte nun in Deinem Anwendungsfall wie gewünscht funktionieren.

Danke, passt!