New FHEM Tablet UI

[setstate]

Die gesamte Farbe ändern, geht mit einer zusätzlichen Zeile an der richtigen Stelle bestimmt. Einen Farbverlauf, dafür müsste man die ganze draw Funktion überschreiben, wie ich es beim Thermostat gemacht habe.

[harry66]

  da fehlt jetzt was? nach Update??

[setstate]

Die orangen Icons auf oragenem Grund? Sind das data-type="button"? Dann nimm mal data-type="pagebutton" erfüllt den gleichen Zweck, ist aber gepflegt.

[harry66]

Danke das hat funktioniert
allerdings hat sich in der Ansicht meiner Thermostate auch was geändert.

Code Auswählen Erweitern

<div data-type="thermostat"
    data-device="WT_Wohnzimmer" 
    data-valve="valveposition"
    data-get="desiredTemperature"
    data-temp="temperature" 
    data-set="desiredTemperature auto"
    class="cell big top-space-2x">
  </div>

bild 1 jetzt
bild 2 vorher

[setstate]

Ich glaube, du musst statt big jetzt large nehmen. Das habe ich vertauscht, damit es zu der Anstufung bei den Fonts passt. Die nutzen die gleichen Begriffe.

class="...large..."

[harry66]

ja das hatte ich gerade auch probiert  funktioniert

Danke für die schnelle Hilfe



Gruß Rolf

[harry66]

gibt eigentlich eine Möglichkeit beim circlemenu den Zentralen Button auf die jeweils angewählte Unterseite anzupassen?

Zum beispiel wenn (siehe unten) media-wohnzimmer.html angewählt ist, den Zentralen Button data-icon="fa-music" und orange???

Code Auswählen Erweitern

<div data-type="circlemenu" data-direction="right-half" class="circlemenu">
               <ul class="menu">
                <li><div data-type="pagebutton" data-icon="rk-sofa"></div></li>
                <li><div data-type="pagebutton" data-url="wohnzimmer.html" data-icon="rk-sofa"</div></li>
                <li><div data-type="pagebutton" data-url="media-wohnzimmer.html" data-icon="fa-music"</div></li>
                <li><div data-type="pagebutton" data-url="termine.html" data-icon="fa-calendar"</div></li>
               </ul>


Gruß Rolf

[andreas13]

Hallo zusammen,

das Modul FHT liefert bei dem Reading "actuator" die Einheit "%" mit, so dass ich bei dem Thermostat zweimal "%%" habe. Gibt es eine elegante Möglichkeit, dies zu korrigieren oder kann man das irgendwo konfigurieren?

Liebe Grüße

Andreas

[rvideobaer]

Hallo,

ich habe mich heute mehrere Stunden mit meinen "Button" beschäftigt. Nun als Pagebutton machen die teile was sie wollen.

Code Auswählen Erweitern

<table width="100%" height="95%"><tr width="100%">
       
        <td width="80%">
        <div data-type="pagebutton" data-device="ELRO_A" data-get="state" data-cmd="set"
             data-icon="fa-check" data-on-background-color="DarkGreen" data-off-background-color="lime"
             data-set-off="on" class="cell narrow bigger">
        </div>A
        <div data-type="pagebutton" data-device="ELRO_A" data-get="state" data-cmd="set"
             data-icon="fa-ban" data-off-background-color="DarkRed" data-on-background-color="Red"
             data-set-on="off" class="cell narrow bigger">
        </div>
        </td>
        <td width="20%">
       
      <div data-type="popup" data-height="190px" data-width="350px">
        <div data-type="pagebutton" data-icon="fa-clock-o" class="cell"></div>
    <div class="dialog">
      <header>Startzeit-Endzeit</header>
      <table width="90%" height="80%"><tr width="100%">
        <td width="5%" height="50%">  An
        </td>
        <td width="80%" height="50%">
        <div class="inline cell top" >
            <div data-type="datetimepicker" data-device="Dose_A"
              data-get="TIMESPEC" data-set-value="*$v" data-cmd="modify"
              data-step="15"
              data-datepicker="false" data-format="H:i"
              class="inline bigger orange cell">
              </div>
              </div>
              </td>
              <td width="15%" height="50%">
              </td></tr>
              <tr width="100%">
              <td width="5%" height="50%">  Aus
        </td>
              <td width="80%" height="50%">
                <div class="inline cell" >
                <div data-type="datetimepicker" data-device="Dose_A_aus"
              data-get="TIMESPEC" data-set-value="*$v" data-cmd="modify"
              data-step="15"
              data-datepicker="false" data-format="H:i"
              class="inline bigger orange cell">
              </div></td>
              <td width="15%" height="50%">
              <div data-type="checkbox" data-device='timer_a'
                data-get-on="!off" data-get-off="inactive"
                data-set-on="active" data-set-off="inactive"
                class="inline">
                </div></div></td>
  </div>
  </tr>
        </table>
</div>
</div>
        </td>
        </tr>
        <tr width="100%">
        <td width="80%">
        <div data-type="pagebutton" data-device="ELRO_B" data-get="state" data-cmd="set"
             data-icon="fa-check" data-on-background-color="DarkGreen" data-off-background-color="lime"
             data-set-off="on" class="cell narrow bigger">
        </div>B
        <div data-type="pagebutton" data-device="ELRO_B" data-get="state" data-cmd="set"
             data-icon="fa-ban" data-off-background-color="DarkRed" data-on-background-color="Red"
             data-set-on="off" class="cell narrow bigger">
        </div>
        </td>
        <td width="20%">
       
    <div data-type="popup" data-height="190px" data-width="350px">
        <div data-type="pagebutton" data-icon="fa-clock-o" class="cell"></div>
    <div class="dialog">
      <header>Startzeit-Endzeit</header>
      <table width="90%" height="80%"><tr width="100%">
        <td width="5%" height="50%">  An
        </td>
        <td width="80%" height="50%">
        <div class="inline cell top" >
            <div data-type="datetimepicker" data-device="Dose_B"
              data-get="TIMESPEC" data-set-value="*$v" data-cmd="modify"
              data-step="15"
              data-datepicker="false" data-format="H:i"
              class="inline bigger orange cell">
              </div>
              </div>
              </td>
              <td width="15%" height="50%">
              </td></tr>
              <tr width="100%">
              <td width="5%" height="50%">  Aus
        </td>
              <td width="80%" height="50%">
                <div class="inline cell" >
                <div data-type="datetimepicker" data-device="Dose_B_aus"
              data-get="TIMESPEC" data-set-value="*$v" data-cmd="modify"
              data-step="15"
              data-datepicker="false" data-format="H:i"
              class="inline bigger orange cell">
              </div></td>
              <td width="15%" height="50%">
              <div data-type="checkbox" data-device='timer_b'
                data-get-on="!off" data-get-off="inactive"
                data-set-on="active" data-set-off="inactive"
                class="inline">
                </div></div></td>
  </div>
  </tr>
        </table>
</div>
</div>
        </tr>
        <tr width="100%">
        <td width="80%">
        <div data-type="pagebutton" data-device="ELRO_C" data-get="state" data-cmd="set"
             data-icon="fa-check" data-on-background-color="DarkGreen" data-off-background-color="lime"
             data-set-off="on" class="cell narrow bigger">
        </div>C
        <div data-type="pagebutton" data-device="ELRO_C" data-get="state" data-cmd="set"
             data-icon="fa-ban" data-off-background-color="DarkRed" data-on-background-color="Red"
             data-set-on="off" class="cell narrow bigger">
        </div>
        </td>
        <td width="20%">
       
    <div data-type="popup" data-height="190px" data-width="350px">
        <div data-type="pagebutton" data-icon="fa-clock-o" class="cell"></div>
    <div class="dialog">
      <header>Startzeit-Endzeit</header>
      <table width="90%" height="80%"><tr width="100%">
        <td width="5%" height="50%">  An
        </td>
        <td width="80%" height="50%">
        <div class="inline cell top" >
            <div data-type="datetimepicker" data-device="Dose_C"
              data-get="TIMESPEC" data-set-value="*$v" data-cmd="modify"
              data-step="15"
              data-datepicker="false" data-format="H:i"
              class="inline bigger orange cell">
              </div>
              </div>
              </td>
              <td width="15%" height="50%">
              </td></tr>
              <tr width="100%">
              <td width="5%" height="50%">  Aus
        </td>
              <td width="80%" height="50%">
                <div class="inline cell" >
                <div data-type="datetimepicker" data-device="Dose_C_aus"
              data-get="TIMESPEC" data-set-value="*$v" data-cmd="modify"
              data-step="15"
              data-datepicker="false" data-format="H:i"
              class="inline bigger orange cell">
              </div></td>
              <td width="15%" height="50%">
              <div data-type="checkbox" data-device='timer_c'
                data-get-on="!off" data-get-off="inactive"
                data-set-on="active" data-set-off="inactive"
                class="inline">
                </div></div></td>
  </div>
  </tr>
        </table>
</div>
</div>
</tr>
        <tr width="100%">
        <td width="80%">
        <div data-type="pagebutton" data-device="Steckdose_ausen" data-get="state" data-cmd="set"
             data-icon="fa-check" data-on-background-color="DarkGreen" data-off-background-color="lime"
             data-set-off="on" class="cell narrow bigger">
        </div>D
        <div data-type="pagebutton" data-device="Steckdose_ausen" data-get="state" data-cmd="set"
             data-icon="fa-ban" data-off-background-color="DarkRed" data-on-background-color="Red"
             data-set-on="off" class="cell narrow bigger">
        </div>
        </td>
        <td width="20%">
       
    <div data-type="popup" data-height="190px" data-width="350px">
        <div data-type="pagebutton" data-icon="fa-clock-o" class="cell"></div>
    <div class="dialog">
      <header>Startzeit-Endzeit</header>
      <table width="90%" height="80%"><tr width="100%">
        <td width="5%" height="50%">  An
        </td>
        <td width="80%" height="50%">
        <div class="inline cell top" >
            <div data-type="datetimepicker" data-device="Ausensteckdose"
              data-get="TIMESPEC" data-set-value="*$v" data-cmd="modify"
              data-step="15"
              data-datepicker="false" data-format="H:i"
              class="inline bigger orange cell">
              </div>
              </div>
              </td>
              <td width="15%" height="50%">
              </td></tr>
              <tr width="100%">
              <td width="5%" height="50%">  Aus
        </td>
              <td width="80%" height="50%">
                <div class="inline cell" >
                <div data-type="datetimepicker" data-device="Ausensteckdose_aus"
              data-get="TIMESPEC" data-set-value="*$v" data-cmd="modify"
              data-step="15"
              data-datepicker="false" data-format="H:i"
              class="inline bigger orange cell">
              </div></td>
              <td width="15%" height="50%">
              <div data-type="checkbox" data-device='timer_ausen'
                data-get-on="!off" data-get-off="inactive"
                data-set-on="active" data-set-off="inactive"
                class="inline">
                </div></div></td>
  </div>
  </tr>
        </table>
</div>
</div>
        </tr>
        </table>


die Button waren so angelegt das ich meine Steckdosen ein und ausschalten konnte (auch mehrfach bei Fehlern) und mir der Status angezeigt wurde egal wo ich geschalten habe.
Jetzt stimmt der Status nicht mehr und die Button beeinflussen sich gegenseitig. ich schalte einen ein und ein anderer geht mit an oder der status aller wird auf aus gesetzt.

ich bin fast am verzweifeln.

Gruß Rolf

[setstate]

So geht es bei mir mit einem Dummy:

Code Auswählen Erweitern


    <div data-type="switch" data-device="dummy1"
                 data-icon="fa-check" data-on-background-color="DarkGreen" data-off-background-color="lime"
                 data-set-off="on" class="cell narrow bigger">
    </div>C
    <div data-type="switch" data-device="dummy1"
         data-icon="fa-ban" data-off-background-color="DarkRed" data-on-background-color="Red"
         data-set-on="off" class="cell narrow bigger">
    </div>


Einen Pagebutton braucht man nur zu nutzen, wenn man mit data-url auf eine andere Seite springen will und der Button sich automatisch auf ON schalten soll, wenn die hinterlegte Seite gerade der aktuellen Seite entspricht.

[setstate]

gibt eigentlich eine Möglichkeit beim circlemenu den Zentralen Button auf die jeweils angewählte Unterseite anzupassen?

Zum beispiel wenn (siehe unten) media-wohnzimmer.html angewählt ist, den Zentralen Button data-icon="fa-music" und orange???

Code Auswählen Erweitern

<div data-type="circlemenu" data-direction="right-half" class="circlemenu">
               <ul class="menu">
                <li><div data-type="pagebutton" data-icon="rk-sofa"></div></li>
                <li><div data-type="pagebutton" data-url="wohnzimmer.html" data-icon="rk-sofa"</div></li>
                <li><div data-type="pagebutton" data-url="media-wohnzimmer.html" data-icon="fa-music"</div></li>
                <li><div data-type="pagebutton" data-url="termine.html" data-icon="fa-calendar"</div></li>
               </ul>


Gruß Rolf

Mit einer kleinen Erweiterung am Pagebutton-Widget geht das easy zu realisieren:

Code Auswählen Erweitern


<div data-type="circlemenu" data-direction="right-half" class="circlemenu">
    <ul>
        <li><div data-type="pagebutton" data-set-off="" data-set-on=""
                 data-states='[".*/wohnzimmer.html",".*/media-wohnzimmer.html",".*/termine.html"]'
                 data-icons='["fa-wrench","fa-music","fa-calendar"]'></div></li>
        <li><div data-type="pagebutton" data-url="wohnzimmer.html" data-icon="fa-wrench"</div></li>
        <li><div data-type="pagebutton" data-url="media-wohnzimmer.html" data-icon="fa-music"</div></li>
        <li><div data-type="pagebutton" data-url="termine.html" data-icon="fa-calendar"</div></li>
    </ul>
</div>


Der erste mittlere Pagebutton bekommt ein  data-set-off="" data-set-on="", damit werden jegliche Drück-Aktionen unterdrückt.
Zur Änderung nutze ich Multi-State Notation: Die Muster in data-states werden mit der aktuellen URL verglichen und setzen bei Übereinstimmung die jeweiligen Definitionen von data-icons, data-background-colors, data-colors, data-background-icons.

Änderung ist im Update ...

[harry66]

@setstate  du bist der beste

[harry66]

Kleinigkeit für dich noch(damit du keine Langeweile bekommst ) im Browser auf dem PC funktioniert einwandfrei
Tablet geht das Circlemenu nicht auf?

Gruß Rolf

[heimkino1]

Hallo
Ich denke ich bin hier nicht richtig ich weiss es aber nicht genau
Meine frage ist
Leinwand habe ich in fhem eingebunden mit hoch und runter geht auch alles super
Aber gibt es keine stop staste
Gruss frank

[setstate]

Frank, definitiv! Wie lautet das Command für Stop in Fhem?
Evtl. mit einem Push-Button und Stop Icon ...