Push Widget mit Farbdefinition von anderem Device - Ist das möglich?

[Ajuba]

Hallo

Aus Platzgründen möchte ich die Rahmenfarbe des Rollladen PUSH Widgets mit dem Magnetschalter der Fensteröffnung steuern (roter Rahmen = offen, grüner Rahmen = geschlossen)

Kann das das PUSH Widget überhaupt?
Wenn ja, wie?
Wenn nein, gibt es einen Workarround? Z.B ein Rahmen der dahinter gelegt wird?

Hier mein nicht erfolgreicher Versuch: Der Background wird einfach fix rot aber der Magnetschalter hat keinen Einfluss auf die Farbe.

Code Auswählen Erweitern


        <div data-type="push"
          data-icon="fa-angle-up" data-background-icon="fa-square-o"
          class="bigger"
          data-device="PB_RollAuf_WzLi"
          data-set="trigger"
          data-get="MS_WZL"
          data-get-on="on"
          data-get-off="off"
          data-on-background-color="#009900"
          data-off-background-color="#ff0000"
          class="cell">
        </div>


Kann man data-get so verwenden? Ist etwas mit den Klammern falsch?

Für Hilfe wäre ich sehr dankbar.

[setstate]

Push hat kein get, das kann nur setzen. Man könnte, wie du schon vermutet hast, den äußeren Container beeinflussen. Ein Label zum Beispiel oder classchanger

<div data-type="label"...><div data-type="push" ...></div></div>

Knifflig wird es nur mit der richtigen Größe, damit es ein Bild ergibt. Das müsste ich zu Hause erst mal ausprobieren.

[Ajuba]

Wie du erwartet hattest ist das Problem, das korrekte Übereinanderlegen.
Außerdem habe ich das Problem, dass ich bei Label nicht die Rahmenfarbe oder zumindest den Hintergrund abhängig von der Variablen machen kann sondern nur den Text.
Ehrlich gesagt habe ich auch größte Schwierigkeiten, die Syntax Definitionen im Wiki zu verstehen obwohl ich nicht ganz programmier-unerfahren bin.
http://www.fhemwiki.de/wiki/FHEM_Tablet_UI#Beispiel_label.
Wenn nicht zufällig ein Beispiel vorhanden ist, stehe ich an. Gibt es irgendwo weiterführende, tiefergehende Literatur dazu?
Wenn ich mal mehr durchblicke würde ich auch gerne mithelfen, das Wiki zu erweitern sofern das erwünscht ist.

Hier mein Code Versuch und das Ergebnis.

Code Auswählen Erweitern

        <div
          data-type="push"
          data-icon="fa-angle-up"
          data-background-icon="transparent"
          data-device="PB_RollAuf_WzLi"
          data-set="trigger"
          class="cell">
        <div
          data-type="label"
          data-device="MS_VR_Door"
          data-colors='["red","green"]'
          data-limits='["off","on"]'
          class="icon squareborder cell"
          class="cell">
        </div>
        </div>

[setstate]

Code Auswählen Erweitern


<li data-row="8" data-col="1" data-sizex="5" data-sizey="2">
    <header>PUSH</header>
    <div class="hbox">
        <div class="vbox">
            <div data-type="classchanger" data-device="dummy2" data-off-class="bg-red" data-on-class="bg-green" class="bg-square">
                <div data-type="push" data-icon="fa-angle-up" data-background-icon="fa-square-o" data-device="PB_RollAuf_WzLi" data-set="trigger" class="">
                </div>
            </div>
        </div>
        <div class="vbox">
            <div data-type="classchanger" data-device="dummy2" data-off-class="bg-red" data-on-class="bg-green" class="bg-square">
                <div data-type="push" data-icon="fa-angle-up" data-background-icon="fa-square-o" data-device="PB_RollAuf_WzLi" data-set="trigger" class="big">
                </div>
            </div>
        </div>
        <div class="vbox">
            <div data-type="classchanger" data-device="dummy2" data-off-class="bg-red" data-on-class="bg-green" class="bg-square">
                <div data-type="push" data-icon="fa-angle-up" data-background-icon="fa-square-o" data-device="PB_RollAuf_WzLi" data-set="trigger" class="bigger">
                </div>
            </div>
        </div>
    </div>
</li>


[Ajuba]

Hurra - Danke - Perfekt

[Ajuba]

Hallo Setstate
Der Hund liegt offensichtlich im Detail. Am PC Browser konnte ich alles gut einrichten aber am Tablet passt dann gar nichts mehr.
Siehe Bilder anbei (Bei geschlossenem Fenster mache ich keine Farbveränderung sondern nur bei offenem Fenster).
Selbst wenn ich das Widget Gitter vergrößere oder die "Pushs" auf normal Größe verkleinere oder auf "doublebox-h" / "doublebox-v" umstelle bringt es keine Verbesserung.
Kannst du mir da bitte noch einen Tip geben?


Und folgende Fragen haben sich ergeben weil ich auch verstehen will was ich da tue:

   
• "vbox", "hbox" und "classchanger" waren neu für mich - Kommt das mal ins Wiki?
• Was ist eigentlich der Unterschied zwischen "doublebox-h" / "doublebox-v" und "hbox" / "vbox"?
• Kann man "classchanger" auch mit Arrays verwenden um für mehrere Zustände mehrere unterschiedliche Farben zuzuordnen?
• Wozu ist eigentlich class="bg-square" gut? Wenn ich es weg lasse, ändert sich bei mir gar nichts.

Hier noch der Code zu meinen durchgerüttelten Pushs
So ist das Gitter eingestellt

Code Auswählen Erweitern

   <meta name="widget_base_width" content="74">
    <meta name="widget_base_height" content="75">
    <meta name="widget_margin" content="2">
Und das ist der Codeteil für ein Zimmer

Code Auswählen Erweitern



<li data-col="5" data-row="5" data-sizex="2" data-sizey="2">
    <header>Wohnzimmer</header>
    <div class="hbox">
      <div class="vbox">
        <div data-type="classchanger" data-device="MS_WZL" data-off-class="bg-red" data-on-class="" class="bg-square">
          <div data-type="push" data-device="PB_RollAuf_WzLi" data-set="trigger" data-icon="fa-angle-up" data-background-icon="fa-square-o" class="big"><>
          <div data-type="push" data-device="PB_RollAb_WzLi" data-set="trigger" data-icon="fa-angle-down" data-background-icon="fa-square-o" class="big"><>
        <>
      <>
      <div class="vbox">
        <div data-type="classchanger" data-device="MS_WZR" data-off-class="bg-red" data-on-class="" class="bg-square">
          <div data-type="push" data-device="PB_RollAuf_WzRe" data-set="trigger" data-icon="fa-angle-up" data-background-icon="fa-square-o" class="big"><>
          <div data-type="push" data-device="PB_RollAb_WzRe" data-set="trigger" data-icon="fa-angle-down" data-background-icon="fa-square-o" class="big"><>
        <>
      <>
    <>
  </li>


Besten Dank
Andi

[Ajuba]

Ich konnte das Problem selbst lösen.
Der WebViewControl Browser war der Übeltäter. Auch der der Fest installierte Browser meines POV Tablets konnte mit dieser Konstruktion nicht umgehen.


Abhilfe schaffte die Installation des Chrome Browsers für Android, der auch Full Screen kann.


Falls mir jemand trotzdem noch meine 4 Fragen vom 9. Dezember beantworten könnte wäre ich sehr dankbar.