status.badge mit Symbolen?

[Sipple]

{{ status.collapse('Heizung_Arbeitszimmer_WindowOpen. 1','Heizung_Arbeitszimmer_WindowOpen','12')}}

Ist das Leerzeichen so gewollt?

[KaiAlfonso]

Hallo Wolfram,

ich habe das dann die Eigenschaft direkt in der my-badge geändert. Das reicht mir und sieht auch schon mal gut aus

Screenshot 2022-12-15 095315.png

Allerdings, wenn ich das Fenster schließe, verschwindet zwar das Badgesymbol, allerdings der Background bleibt bestehen, was irgendwie auch sinnlos ist

Screenshot 2022-12-15 095430.png

Jetzt dachte ich, ich arbeite mit status.collapse, um die ganze Sektion auszublenden

{{ icon.heating('', '','Heizung_Arbeitszimmer_Valve',0,100) }}
{{ status.collapse('Heizung_Arbeitszimmer_WindowOpen. 1','Heizung_Arbeitszimmer_WindowOpen','12')}}
  <div class="hide" data-bind="Heizung_Arbeitszimmer_WindowOpen.1">
     <span style="position: relative">
        <span class="my-badge">
            {{ basic.symbol('', 'Heizung_Arbeitszimmer_WindowOpen', '', 'fts_window_1w_tilt.svg','12' )}}
        </span>
     </span>
  </div>

was bewirkt, dass Badge nach links unten wandert

Screenshot 2022-12-15 095909.png

Außerdem sollte es doch hidden sein, wenn Value ungleich 12 ist, wenn ich die Doku von status.collapse richtig verstehe. Jetzt ist es so - wenn der Wert = 12 ist, dann verschwindet das Badge, ansonsten ist es sichtbar.

Vielleicht kannst Du mir noch mal unter die Arme greifen? Danke Dir schon einmal

[wvhn]

Dazu gibt es ein Beispiel in der Inline-Doku. Dort wird die CSS-Eigenschaft "color" verändert. Hier muss man "background" verändern.

[KaiAlfonso]

Hallo Wolfram,

das ist ja großartig. Vielen Dank dafür. Werde ich morgen mal direkt testen.

Allerdings ist die Hintergrundfarbe dann fest eingestellt (hier: rot). Das wiederum könnte man noch mit einem Skript, in basic.print manipulieren.

Wie würde das dann bei einer Ersetzung in einer beliebigen Farbe zum Beispiel aussehen?

[wvhn]

Das Widget status.badge gibt das nicht her, aber man kann das mit CSS erreichen:
grafik.png
Dazu den Code für status.badge aus der ./pages/base/base.css in die eigene visu.css kopieren und umbenennen.

.my-badge {
   position: absolute;
   display: inline-block;
   height:1.5rem;
   right: 0px;
   top: -15px;
   min-width: 1.3rem;
   padding: 0 .1rem;
   white-space: nowrap;
   overflow: visible;
   text-align: center;
   line-height: 1.5rem;;
   font-size: 1rem;
   border-radius: 50%;
   background: red;
   color:white;
}
.my-badge svg.fx-icon, .my-badge .icon {
   vertical-align: middle;
   width: 20px;
   height: 20px;
}​

Dann in der Visu-Seite folgendes anlegen:

{{ basic.symbol( >>Parameter für großes Symbol<< ) }} <span style="position: relative"><span class="my-badge">{{ basic.symbol(>>Parameter für Badge-Symbol <<) }}</span></span>

Allerdings ist die Hintergrundfarbe dann fest eingestellt (hier: rot). Das wiederum könnte man noch mit einem Skript, in basic.print manipulieren.

Gruß
Wolfram

[KaiAlfonso]

Hallo Zusammen,

es gibt ja das schöne Widget status.badge. Ich hätte gerne sowas, nur mit Symbolen. Hat da jemand eine Idee?

Hintergrund. Ich würde gerne bei den icon.heating oder icon.shutter ein kleines badge haben, um den status darzustellen. Also eine kleine Sonne im Badge für Rolladen sind im Beschattungsmodus oder ein kleines Mond für Rollladen sind im Nachtmodus

Das sollte natürlich nicht mein Layout verhunzen und als Overlay über das bestehende sein.

Versteht ihr, was ich meine?