Tile: eigenes Widget basierend auf cv-status-chart

[mivola]

Hallo,

ich würde gern ein Widget erstellen welches auf dem cv-status-chart basiert und zusätzlich je einen Button rechts und links hat mit welchem man einen/den Wert ändern kann.
image.png

Also ähnlich wie im Shutter/RTC Widget:
image.png

Das Widget möchte ich dann in ein Widget-Pair einbinden.


Sollte ich dazu ein komplett neues Widget anhand der Anleitung erstellen: https://www.cometvisu.org/CometVisu/...ets-definieren ? Und das cv-status-chart aus https://github.com/CometVisu/CometVi...lates.xml#L305 kopieren?

Oder gibt es eine Möglichkeit des cv-status-chart zu erweitern ohne den Code zu duplizieren?

Danke und VG
Micha

[peuter]

Vorhandene Widgets kannst du nicht erweitern. Für sowas musst du dir ein eigenes Widget erstellen.

[mivola]

OK, hier mein erster Versuch:

image.png oder image.png
Das Chart hat irgendwie noch nicht seinen richtigen Platz gefunden: es soll eigentlich nur im Hintergrund in der zweite Zeile (über die hanze Breite) angezeigt werden.
Und die Buttons an sich funktionieren, jedoch öffnet sich auch immer das Popup. Es soll sich aber nur öffnen wenn man in die mittlere Zeile klickt.

@peuter: wie könnte ich das lösen?

Danke und VG
Micha

Hier mein Template:

    <template id="status-chart-with-buttons">
        <header>
            <label class="title">
                <slot name="title">TITLE</slot>
            </label>
            <slot name="header"/>
        </header>
        <cv-tile>
            <cv-row colspan="3" row="1">
                <cv-spinner slot-format="Vorgabe: %.1f °C" slot-min="20" slot-max="25" slot-step-width="0.5" colspan="3">
                    <slot name="temperatureAddress" parent-scope="1">NEEDS ADDRESS</slot>
                    <label class="value primary"/>
                </cv-spinner>
            </cv-row>
            <cv-row colspan="3" row="2">
                <cv-chart background="true" show-grid="false" show-y-axis="false"
                      show-x-axis="false" slot-y-format="" slot-series="month" slot-refresh="300" colspan="3"
                      rowspan="3" slot-x-format="%d. %b" slot-min="">
                    <slot name="dataset">NEEDS DATASET</slot>
                    <slot name="liveUpdateAddress">NEEDS ADDRESS</slot>
                </cv-chart>
                <label class="primary">
                    <slot name="label">RTC</slot>
                </label>
            </cv-row>

            <cv-popup slot="popup" modal="true" fullscreen="true">
                <header>
                    <label class="title">
                        <slot name="popup-title">TITLE</slot>
                    </label>
                </header>
                <cv-chart slot-y-format="%.2f m³" slot-series="month" slot-refresh="300"
                          slot-x-format="%d. %b" slot-selection="all" slot-min="">
                    <slot name="dataset">NEEDS DATASET</slot>
                </cv-chart>
            </cv-popup>
            <cv-row colspan="3" row="3">
                <cv-spinner slot-format="Vorgabe: %.1f °C" slot-min="20" slot-max="25" slot-step-width="0.5" colspan="3">
                    <slot name="temperatureLowAddress" parent-scope="1">NEEDS ADDRESS</slot>
                    <label class="value primary"/>
                </cv-spinner>
            </cv-row>
            <slot name="tileAddress">NEEDS ADDRESS</slot>
        </cv-tile>
        <footer><slot name="footer"/></footer>
    </template>​

[peuter]

Um das Problem zu lösen, dass das Chart-Element nur im Hintergrund der mittleren Zeile ist musst Du zwei Dinge tun:
1. Die <cv-row> in der der <cv-chart> liegt braucht ein zusätzliches `style="position: relative"`
2. Im Cv-Meta Bereich folgendes hinzufügen:

<style>
body cv-tile > cv-row > cv-chart[background=true] {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}
</style>​

Das Problem mit dem Popup, kannst Du nicht selbst lösen. Da musst Du auf eine neue Version der CV warten in der ich das gefixt habe. Das wird aber noch ein wenig dauert, ich hab da noch andere Änderungen drin, die ich erst noch ein wenig testen muss.

Und als weitere Korrektur (auch wenn es vermutlich keinen sichtbaren Unterschied macht): Die Elemente die bei Dir unterhalb der <cv-row>s liegen haben teilweise noch row-/colspan Attribute. Brauchen die da nicht, steht ja schon in der cv-row.

[mivola]

Um das Problem zu lösen, dass das Chart-Element nur im Hintergrund der mittleren Zeile ist musst Du zwei Dinge tun

Danke, das hat gut funktioniert!

Bzgl Popup: kein Problem, damit kann ich leben :-)