New FHEM Tablet UI

[setstate]

Updates
- Neu: Progress Widget zur Anzeige von Prozentwerten im runden Stil

Code Auswählen Erweitern


<div data-type="progress" data-device="dummy1" data-get='pct'></div>


Mit 'data-max' kann man den maximalen Wert direkt als Zahl angeben, oder ein Reading angeben, was den max. Value  beinhaltet.
Es gibt die Class 'novalue', um die Anzeige der Wertes als Zahl auszuschalten.
Mit der Class 'percent' wird die angezeigte Zahl in % umgerechnet.

- Zusatz: beim Push Widget kann man jetzt mehrere data-set-on Werte als Array angeben. Das ermöglicht zum Beispiel ein Toggeln zwischen zwei Werten.

Code Auswählen Erweitern


<div data-type="push" data-device="EZ_Heizung_Clima"
        data-icon="fa-hand-o-right"
        data-set="controlMode"
        data-set-on='["auto","manual"]'>
</div>


- Zusatz Class beim Label Widget (Dank an viegener)
mit der Class 'fixedlabel' kann man Label einbauen, die einen festen Text (direkt im HTML) haben, aber trotzdem die Farbe per Reading Value beeinflusst werden könnte.

[setstate]

@update71.

Du bekommst den Kreis der Sub Buttons größer mit:

data-circle-radius="100"

Die Button selber größer klappt mit:

class="cell circlemenu large" data-item-diameter="80"

[update71]

@update71.

Du bekommst den Kreis der Sub Buttons größer mit:

data-circle-radius="100"

Die Button selber größer klappt mit:

class="cell circlemenu large" data-item-diameter="80"

Moin, so richtig klappt das nicht. So in etwa hatte ich schon probiert aber mir zeigts dann mein Label darunter nicht mehr an weil es durch den Kreis überdeckt wird. Offenbar passt der Kreis nicht mehr in den DIV und überlagert ihn. Sieht zumindest im FF Inspector so aus.
Hier mal der ganze Block:

Code Auswählen Erweitern

<!------------- Gästezimmer ---------------- 3. Reihe waagerecht Platz 5+6 ----------------->
        <li data-row="3" data-col="6" data-sizex="2" data-sizey="1" class="gs-w">
            <header>Gästezimmer</header>
               
                 <div class="left">
                     
                        <div data-type="circlemenu" class="cell circlemenu large" data-item-diameter="80" data-direction="bottom-half" data-circle-radius="100">
                            <ul class="menu">
                              <li>
                                   <div data-type="symbol" data-device="HUEDevice3"
                                    data-get-on='["off","dim[12][0-9]%","dim[3456][0-9]%","dim[789][0-9]%","on"]' 
                                    data-on-colors='["#505050","#ffffff","#ffffff","#ffffff","#ffffff"]'
                                    data-background-icon="fa-circle-thin"
                                    data-on-background-colors='["#505050","#aa6900","#aa6900","#aa6900","#aa6900"]'
                                    data-icons='["oa-light_light_dim_00","oa-light_light_dim_20","oa-light_light_dim_50","oa-light_light_dim_80","oa-light_light_dim_100"]' >
                                   </div>
                              </li>
                              <li><div data-type="push" data-device="HUEDevice3"
                                       data-set="off"
                                       data-icon="oa-light_light_dim_00"></div></li>
                              <li><div data-type="push" data-device="HUEDevice3"
                                       data-set="pct 20"
                                       data-icon="oa-light_light_dim_20"></div></li>
                              <li><div data-type="push" data-device="HUEDevice3"
                                       data-set="pct 50"
                                       data-icon="oa-light_light_dim_50"></div></li>
                              <li><div data-type="push" data-device="HUEDevice3"
                                       data-set="pct 80"
                                       data-icon="oa-light_light_dim_80"></div></li>
                              <li><div data-type="push" data-device="HUEDevice3"
                                       data-set="pct 100"
                                       data-icon="oa-light_light_dim_100"></div></li>
                            </ul>
                        </div>
                    <div data-type="label">Decke</div>
                   
               </div>         
                   
             
                <div class="right">
                    <div data-type="label" data-device="GZ_Thermostat"
                         data-get="measured-temp" data-unit="%B0C%0A"
                         class="cell big" style="text-align:right;">
                    </div>
                </div>
        </li> 
    <!------------- Ende Gästezimmer ----------------------------------------------------------->

Und im Anhang ein Bild was ich meine.

Schönen Tag zusammen

[setstate]

sooo siehts besser aus:

Code Auswählen Erweitern

<!------------- Gästezimmer ---------------- 3. Reihe waagerecht Platz 5+6 ----------------->
         <li data-row="3" data-col="6" data-sizex="2" data-sizey="1" class="gs-w">
             <header>Gästezimmer</header>

                  <div class="left">

                     <div data-type="circlemenu" class="circlemenu large " data-item-diameter="80" data-direction="bottom-half" data-circle-radius="100">
                             <ul class="menu">
                               <li>
                                    <div data-type="symbol" data-device="HUEDevice3"
                                     data-get-on='["off","dim[12][0-9]%","dim[3456][0-9]%","dim[789][0-9]%","on"]'
                                     data-on-colors='["#505050","#ffffff","#ffffff","#ffffff","#ffffff"]'
                                     data-background-icon="fa-circle-thin"
                                     data-on-background-colors='["#505050","#aa6900","#aa6900","#aa6900","#aa6900"]'
                                     data-icons='["oa-light_light_dim_00","oa-light_light_dim_20","oa-light_light_dim_50","oa-light_light_dim_80","oa-light_light_dim_100"]' >
                                    </div>
                               </li>
                               <li><div data-type="push" data-device="HUEDevice3"
                                        data-set="off"
                                        data-icon="oa-light_light_dim_00"></div></li>
                               <li><div data-type="push" data-device="HUEDevice3"
                                        data-set="pct 20"
                                        data-icon="oa-light_light_dim_20"></div></li>
                               <li><div data-type="push" data-device="HUEDevice3"
                                        data-set="pct 50"
                                        data-icon="oa-light_light_dim_50"></div></li>
                               <li><div data-type="push" data-device="HUEDevice3"
                                        data-set="pct 80"
                                        data-icon="oa-light_light_dim_80"></div></li>
                               <li><div data-type="push" data-device="HUEDevice3"
                                        data-set="pct 100"
                                        data-icon="oa-light_light_dim_100"></div></li>
                             </ul>
                         </div>
                     <div data-type="label" class="left-space-2x top-space-2x ">Decke</div>

                </div>


                 <div class="right">
                     <div data-type="label" data-device="GZ_Thermostat"
                          data-get="measured-temp" data-unit="%B0C%0A"
                          class="cell big" style="text-align:right;">
                     </div>
                 </div>
         </li>
     <!------------- Ende Gästezimmer ----------------------------------------------------------->


[CoolTux]

- Zusatz: beim Push Widget kann man jetzt mehrere data-set-on Werte als Array angeben. Das ermöglicht zum Beispiel ein Toggeln zwischen zwei Werten.

Code Auswählen Erweitern


<div data-type="push" data-device="EZ_Heizung_Clima"
        data-icon="fa-hand-o-right"
        data-set="controlMode"
        data-set-on='["auto","manual"]'>
</div>


Wie genau wird der aktuelle Zustand ermittelt. So schickt er mir beim neuladen der Seite ja immer den ersten Wert im Array.


Grüße

[nesges]

In Chrome (Windows) habe ich bereits länger das Problem, dass die Ticks sämtlicher Knob-Widgets (Volume, Thermostat, Settimer) nicht mehr vollständig angezeigt werden. In neueren Screenshots zur Live-Demo sieht man den Fehler:

(https://github.com/nesges/TabletUI-Demo-WOPR/raw/master/screenshots/small/index.png?raw=true)

Ältere sind noch in Ordnung:

(https://raw.githubusercontent.com/nesges/TabletUI-Demo-WOPR/master/screenshots/small/schlafzimmer-wecker.png)

Hat jemand das gleiche Problem? Ich konnte bisher keine lokale Ursache (Addons) festmachen, aber da ich bisher keine weitere gleichlautende Fehlerbeschreibung im Netz gefunden habe, bin ich skeptisch, dass es   sich wirklich um ein generelles Chrome-Problem handelt. In anderen Browsern (Opera, Firefox, IE, Chrome Android, Safari) ist die Darstellung in Ordnung.

[SvenJust]

Ich kann das Problem bestätigen, die Darstellung in Chrome ist bei mir auch fehlerhaft, Firefox ist ok.

[Brockmann]

Ja, das ist in Chrome so, vermutlich seit dem letzten Chrome-Update (weil ich Tablet UI schon länger nicht mehr aktualisiert habe).
Ist übrigens auch beim Android-Chrome so, also mit Sicherheit ein Chrome-Problem.

Im Firefox am PC und Android sowie WebviewControl in Android sieht es wie immer aus.

[Jewo]

Hallo,

vermutlich ist es zu heiß  , aber wie kann ich einen Weblink darstellen ?

Ich möchte gern die Bilder (siehe Anhang) im UI anzeigen lassen.
Leider fällt mir gerade nicht ein wie ich das machen kann.

[nesges]

Danke für eure Bestätigung! Dann scheint das wirklich ein Bug in Chrome zu sein und ich suche nen Workarround.

[nesges]

vermutlich ist es zu heiß  , aber wie kann ich einen Weblink darstellen ?

Der Trick an der Geschichte ist, die Ausgabe der Perl-Funktion einzufügen. Das kann man mit dem template-Mechanismus hinbekommen, versuch mal:

Code Auswählen Erweitern

<div data-template="/fhem?cmd={UWZAsHtmlFP(%22Unwetterzentrale%22)}&XHR=1"></div>

[Jewo]

Der Trick an der Geschichte ist, die Ausgabe der Perl-Funktion einzufügen. Das kann man mit dem template-Mechanismus hinbekommen, versuch mal:

Code Auswählen Erweitern

<div data-template="/fhem?cmd={UWZAsHtmlFP(%22Unwetterzentrale%22)}&XHR=1"></div>

Hallo Nesges,

genau das war es.
Super, vielen Dank.

[setstate]

Danke für eure Bestätigung! Dann scheint das wirklich ein Bug in Chrome zu sein und ich suche nen Workarround.

Beim Chrome dürfen die Ticks nicht schmaler als 0.03 sein. Ansonsten werden sie nicht dargestellt.
Mit if (w<0.03) w=0.03; geht es erst einmal
Ich schaue noch etwas, ansonsten baue ich diesen Workaround ein ...

Update
0.025 ist untere Grenze. Ist jetzt in Thermostat, Volume und Homestatus gefixt

[hyper2910]

Hallo hyper2910,

leider weiß ich nicht, was du genau erreichen willst. Vielleicht erklärst du es noch etwas, oder du schiebst in einem Malprogramm die Objekte des Screenshots so zusammen, wie es aussehen soll und postest das hier nochmal.

Was ich will ist das die 3 "Kreise" oben alle in der gleichen Höhe anfangen und nicht diesen Versatz haben!

[update71]

Was ich will ist das die 3 "Kreise" oben alle in der gleichen Höhe anfangen und nicht diesen Versatz haben!

@hyper, was ich gepostet habe geht nicht?