status.badge mit Symbolen?

[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?

[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 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]

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,

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

[Sipple]

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

Ist das Leerzeichen so gewollt?

[KaiAlfonso]

Das muss beim c/p hier passiert sein. Im Editor ist da kein Leerzeichen

Screenshot 2022-12-15 103746.png

[wvhn]

Status.collapse versteckt das angebundene Element, wenn das item den angegebenen Wert annimmt. Erst in der aktuellen develop-Version kann man den Effekt umdrehen, also Elemente anzeigen, wenn ein bestimmter Wert erreicht ist.. Du kannst aber seit v3.1 eine Liste von Werten angeben. Wenn Du hier die möglichen Werte außer 12 angibst, sollte es passen.

Gruß
Wolfram

[KaiAlfonso]

Status.collapse versteckt das angebundene Element, wenn das item den angegebenen Wert annimmt. Erst in der aktuellen develop-Version kann man den Effekt umdrehen, also Elemente anzeigen, wenn ein bestimmter Wert erreicht ist.. Du kannst aber seit v3.1 eine Liste von Werten angeben. Wenn Du hier die möglichen Werte außer 12 angibst, sollte es passen.

Gruß
Wolfram

Ja Perfekt - das geht und reicht mir erstmal. Danke dir dafür. Fehlt nur noch die richtige Positionierung. Durch den status.collapse ist das badge nach links unten gewandert

[wvhn]

Wenn Du nicht noch ein <div> um das <span> legst, sondern das vorhandene <span> auch für status.collapse verwendest, sollte der badge-Hintergrund nicht mehr wandern.

<span class="hide" data-bind="Heizung_Arbeitszimmer_WindowOpen.1" style="position: relative">​

[KaiAlfonso]

Wenn Du nicht noch ein <div> um das <span> legst, sondern das vorhandene <span> auch für status.collapse verwendest, sollte der badge-Hintergrund nicht mehr wandern.

<span class="hide" data-bind="Heizung_Arbeitszimmer_WindowOpen.1" style="position: relative">​

Perfekt - jetzt geht es. Hast Du eigentlich eine Paypal Adresse oder ähnliches, wo man dir mal einen Kaffee als Dank ausgeben kann?

[KaiAlfonso]

Was wirklich merkwürdig ist und ich auch noch nie so hatte. In den Chrome Dev Tools mit Geräteprofil Iphone 11 Pro sieht alles gut aus, beim richtigen iPhone 11 Pro aber so:

IMG_0380.jpg

Cache hatte ich schon gelöscht, ein anderes iPhone zeigt mir das selbe verhalten. Physikalische 7 und 10 Zoll Tablets sehen aber gut aus. Auf einem Android Handy sieht es auch gut aus. Was macht denn das iPhone da?

[wvhn]

Die visu.css beginnt mit einer Festlegung für Medien mit 600 px und mehr Breite:

@Media all and (min-width: 600px) {
   .page-bg {
      background-image: url('../../pics/bg/luminous_lines.png');
   }
}​

Kann es sein, dass Du die Stile für my-badge vor die letzte Klammer kopiert hast? Dann gelten die Klassen nämlich nicht für kleinere Geräte.

Gruß
Wolfram

[KaiAlfonso]

Die visu.css beginnt mit einer Festlegung für Medien mit 600 px und mehr Breite:

@Media all and (min-width: 600px) {
.page-bg {
background-image: url('../../pics/bg/luminous_lines.png');
}
}​

Kann es sein, dass Du die Stile für my-badge vor die letzte Klammer kopiert hast? Dann gelten die Klassen nämlich nicht für kleinere Geräte.

Gruß
Wolfram

Moin

nein, definitiv leider nicht - das würde sich ja auch in den Dev Tools und am Android Handy bemerkbar machen. Der Fehler kommt auf beiden iPhone nur - mit dem Viewport hat es nix zu tun - scheint ggf an Mobile Safari zu liegen?

[wvhn]

Auf meinem iPhone SE unter iOS 15.7 ist die Darstellung mit Safari OK. Auf einem iPhone SE 2 unter iOS16.2 ebenfalls. Wenn ich eine Klammer der @ media-Anweisung weglasse und my-badge direkt dahinter steht, bekomme ich auf kleinen Displays die gleiche fehlerhafte Anzeige wie Du.

Irgendetwas verhindert, dass die Klasse my-badge von Deinen iPhones verwendet wird. Die Webseitendaten für Safari auf den iPhones hast Du gelöscht?