New FHEM Tablet UI

[bjoernbo]

@CoolTux, kannst Du deinen Code und die dazugehörige FHEM Konfiguration zur Verfügung stellen? Vielen Dank.

[CoolTux]

Kann ich gerne machen. Musst nur schauen ob es so reicht oder Du noch mehr brauchst.

ROOMATE definition in FHEM

Code Auswählen Erweitern


define rr_Marko ROOMMATE AnniKraussStr
attr rr_Marko alias Marko
attr rr_Marko devStateIcon .*home:user_available:absent .*absent:user_away:home .*gone:user_ext_away:home .*gotosleep:scene_toilet:asleep .*asleep:scene_sleeping:awoken .*awoken:scene_sleeping_alternat:home .*:user_unknown
attr rr_Marko group Marko
attr rr_Marko icon people_sensor
attr rr_Marko room AnniKraussStr
attr rr_Marko rr_locationHome home
attr rr_Marko rr_locations work
attr rr_Marko rr_passPresenceTo rr_Steven rg_Anna
attr rr_Marko rr_states home,gotosleep,asleep,awoken,absent,gone
attr rr_Marko rr_wakeupDevice rr_Marko_wakeuptimer1
attr rr_Marko sortby 0
attr rr_Marko webCmd state:mood


Und hier dann die html für tabletui

Code Auswählen Erweitern


<li data-row="2" data-col="2" data-sizex="2" data-sizey="2">
        <header>Marko</header>
        <div data-type="homestatus" data-device='rr_Marko'
                data-version='roommate'
                data-get-on='["home","asleep","absent","gone","gotosleep"]'
                data-alias='["Home","Nacht","Abwesend","Urlaub","Bett fein"]'
                data-icons='["fa-home","fa-bed","fa-car","fa-suitcase","fa-tint"]'
                class="" >
        </div>
</li>


Wenn Fragen dann einfach Fragen   

[selfarian]

Ich stehe gerade auf dem Schlauch... Ich wollte meine StatusLEDs darstellen und irgendwie ist mein rotes LED orange statt rot. Hier der entsprechende Code:

Code Auswählen Erweitern

<div data-type="symbol" data-device="og.sz.led.eg.fl.tuer" data-get-on='["green","orange","red"]' data-colors='["#6699FF","#aa6900","#bb6242"]' data-icons='["fa-bell","fa-bell","fa-bell"]'></div>
hängt das irgendwie mit regexen zusammen?

[nesges]

Deine Definition in Deutsch:

Zeig mir ein symbol-Widget. Wenn das Device og.sz.led.eg.fl.tuer den Wert "green" hat, dann benutze das Icon fa-bell in der Farbe #6666FF. Wenn es den Wert "orange" hat, dann benutze das Icon fa-bell in der Farbe #aa6900 und wenn es den Wert "red" dann benutze das Icon fa-bell in der Farbe #bb6242

Alles klar?

[selfarian]

Ok, das wäre ja genau das was ich will.
Ich habe jetzt noch ein zweites mit der selben definition (nur anderes Device) hinzugefügt. Das eine hat den Status red, das andere green und beide sind orange.
Was mich etwas wundert, meine Fenster und Türsensoren sind auch alle orange:

Code Auswählen Erweitern

<div data-type="symbol" data-device="eg.az.fenster"  data-icons='["oa-fts_window_2w","oa-fts_window_2w_open"]' data-get-on='["closed","open"]' class="narrow"/>

[nesges]

orange, bzw. #aa6900, ist die Standardfarbe für ein symbol im on-Zustand. Und da du "closed" und "opened" als on-Zustände definiert und keine andere Farbe angegeben hast, ist klar, dass es immer orange angezeigt wird. Die fehlt das data-colors Array. zB:

Code Auswählen Erweitern

<div data-type="symbol" data-device="eg.az.fenster"  data-icons='["oa-fts_window_2w","oa-fts_window_2w_open"]' data-get-on='["closed","open"]' data-colors='["#505050", "#aa6900"]' class="narrow"/>

Bei deinem anderen sind die Farbdefinitionen seltsam (#6666ff ist weit entfernt von rot), aber wenn du das haben willst, ist's ok. Wenn "red" und "green" dabei gleich dargestellt werden, prüfe erstmal ob die Werte tatsächlich stimmen. Auch im Eventmonitor. Siehe auch http://www.fhemwiki.de/wiki/FHEM_Tablet_UI/FAQ#Das_UI_zeigt_Status.C3.A4nderungen_gar_nicht_an

[selfarian]

Pardon, ich war nur zu doof.

Der Parameter heißt data-on-colors, nicht data-colors. Hatte blöderweise ein label widged kopiert gehabt und daher das data-colors übernommen.
Jetzt passt es . Danke für die Hilfe

[nesges]

oh, das hab ich selbst übersehen.

[selfarian]

Ich war jetzt eigentlich nur drauf gekommen, weil du geschrieben hattest, dass dieses orange die Standardfarbe für "on" ist und deswegen die Fenster orange sind ... da hat sich mein Hinterkopf gemeldet und meinte, das es da doch ein data-on-colors gab

[setstate]

Ist schon verwirrend ...

Ich denke mittlerweile, es wäre sauberer, wenn man  die Namenskonvention etwas überarbeiteten würde:

data-on-color und data-off-color nur als skalarer Wert.
und data-colors für die Arrays. Weil es ja gar kein data-off-color als Array geben kann, rein logisch.

Man könnte auch darüber nachdenken, data-on-color und data-off-color garnicht mehr zu unterstützen und immer mit Arrays zu arbeiten, für jegliche Zustände. Also "on" und "off" aus dem Namen raus und in Plural setzten.

[viegener]

Egal ob ich

Code Auswählen Erweitern

define TABLETUI HTTPSRV ftui/ ./www/tablet Tablet-UI

oder so definiere,

Code Auswählen Erweitern

define TABLETUI HTTPSRV ftui ./www/tablet Tablet-UI

es kommt immer eine leere Seite beim Aufruf mit dieser URL
http://networkspace2:8083/fhem/ftui

Man muss den letzten Slash immer selber setzen:
http://networkspace2:8083/fhem/ftui/

Hallo setstate,
ganz einfach wird sich das nicht ändern lassen.
Hier ist der vereinfachte Hintergrund --> Wenn eine Seite mit /fhem/ftui aufgerufen wird, so ist das aktuelle Verzeichnis /fhem und relative URLs starten von da. Also
- Zugriffe auf "#some_detail.html" enden bei /fhem/ftui#some_detail.html was in FHEMWEB leider nicht weitergereicht wird ....
- Zugriffe auf manche js und css-Dateien bleiben auch in FHEMWEB hängen und werden deshalb nie aus dem tablet/... Verzeichnis gelesen.

Mit dem neuen HTTPSRV wird aber erreicht, dass, wenn die Definition den Slash enthält der richtige URL definiert und aufgerufen wird.

Für Dein Problem könnte aber ein einfaches Java script in index.html sorgen, etwas wie:

Code Auswählen Erweitern


  <script language="javascript">
    if ( document.location.pathname == "/fhem/ftui" ) {
      var href = document.location.protocol + "//" + document.location.host + document.location.pathname + "/" + document.location.hash ;
      document.location.replace( href );
    }
  </script>


Disclaimer: Das habe ich jetzt nur mal so runtergeschrieben, ich habe es nicht bei mir ausprobiert...

[hyper2910]

Hallo, danke für das Modul, echt klasse.

Ich habe ein paar probleme mit dem layout:

Ich habe in einem Raum alle Geräte drin, nur die Anordung gefällt mir nicht, bzw. es ist ein Zeilenumbruch drin, welchen ich nicht wegbekomme!

Könnt ihr mir helfen?

Anbei Bild (Rot Markierte Stelle) und code   

Code Auswählen Erweitern

<li data-row="2" data-col="4" data-sizex="5" data-sizey="4">
        <header>WOHNZIMMER</header>
        <div class="container">
          <div class="left">
                <div data-type="thermostat" data-device="Wohnzimmer" data-valve="valveposition" data-get="desiredTemperature"  data-set="desiredTemperature auto"  data-temp="temperature" class="big">
                </div>
          <div class="right">
                <div data-type="switch" data-device="FensterLicht" class="cell"></div>
                <div data-type="label" class="cell">Fensterlicht</div>
<div data-type="switch" data-device="Aquariumlicht" class="cell"></div>
<div data-type="label" class="cell">Aquariumlicht</div>
             <div data-type="switch" data-device="Wandlampe" class="cell"></div>
<div data-type="label" class="cell">Wandlampe</div>
          </div>
          <div class="left">
               
                        <div data-type="symbol" data-device="WZ_Terasse1" data-icon="ftui-door" class="narrow"></div>
                        <div data-type="label" class="narrow darker small">Terassentür</div>
                        <div data-type="symbol" data-device="WZ_Shutter1" data-icon="ftui-window" class="narrow"></div>
                        <div data-type="label" class="narrow darker small">Fenster</div>
</div>
                </div>
<div class="cell left">
<div class="cell">
<header>STEHLAMPE</header>
        <div data-type="switch" data-device="Stehlampe" data-get-on="!off" data-get-off="off" data-set-on="hsv 0,0,10" class="cell" data-icon="fa-paint-brush" data-on-background-color="hsl(360,100%,100%)"></div>
        <div data-type="label" class="cell">Stehlampe Weiss</div>
        <div data-type="volume" data-device="Stehlampe" data-min="0" data-max="360" data-get="hue" data-set="hue" class="hue-tick top-space-1x" ></div>
        <div data-type="label" class="cell">Color</div>
        <div data-type="volume" data-device="Stehlampe" data-min="0" data-max="100" data-get="brightness" data-set="dim" class="bigger" ></div>
        <div data-type="label" class="cell">Hell</div>
  </div>
  </div>
 
    <header>TVLICHT</header>
<div data-type="switch" data-device="TVLicht" data-get-on="!off" data-get-off="off" data-set-on="hsv 0,0,10" class="cell" data-icon="fa-paint-brush" data-on-background-color="hsl(360,100%,100%)"></div>
        <div data-type="label" class="cell">TVLicht Weiss</div>
        <div data-type="volume" data-device="TVLicht" data-min="0" data-max="360" data-get="hue" data-set="hue" class="hue-tick top-space-1x" ></div>
        <div data-type="label" class="cell">Color</div>
        <div data-type="volume" data-device="TVLicht" data-min="0" data-max="100" data-get="brightness" data-set="dim" class="bigger" ></div>
        <div data-type="label" class="cell">Hell</div> 
        </div>
</li>

[update71]

hyper, versuch mal so:

Code Auswählen Erweitern

<li data-row="2" data-col="4" data-sizex="5" data-sizey="4">
        <header>WOHNZIMMER</header>
        <div class="container">
          <div class="left">
                <div data-type="thermostat" data-device="Wohnzimmer" data-valve="valveposition" data-get="desiredTemperature"  data-set="desiredTemperature auto"  data-temp="temperature" class="big">
                </div>
          <div class="right">
                <div data-type="switch" data-device="FensterLicht" class="cell"></div>
                <div data-type="label" class="cell">Fensterlicht</div>
                <div data-type="switch" data-device="Aquariumlicht" class="cell"></div>
                <div data-type="label" class="cell">Aquariumlicht</div>
             <div data-type="switch" data-device="Wandlampe" class="cell"></div>
                <div data-type="label" class="cell">Wandlampe</div>
          </div>
          <div class="left">
               
                        <div data-type="symbol" data-device="WZ_Terasse1" data-icon="ftui-door" class="narrow"></div>
                        <div data-type="label" class="narrow darker small">Terassentür</div>
                        <div data-type="symbol" data-device="WZ_Shutter1" data-icon="ftui-window" class="narrow"></div>
                        <div data-type="label" class="narrow darker small">Fenster</div>
                </div>
                </div>
                <div class="left">
                <div class="">
            <header>STEHLAMPE</header>
        <div data-type="switch" data-device="Stehlampe" data-get-on="!off" data-get-off="off" data-set-on="hsv 0,0,10" class="cell" data-icon="fa-paint-brush" data-on-background-color="hsl(360,100%,100%)"></div>
        <div data-type="label" class="cell">Stehlampe Weiss</div>
        <div data-type="volume" data-device="Stehlampe" data-min="0" data-max="360" data-get="hue" data-set="hue" class="hue-tick top-space-1x" ></div>
        <div data-type="label" class="cell">Color</div>
        <div data-type="volume" data-device="Stehlampe" data-min="0" data-max="100" data-get="brightness" data-set="dim" class="bigger" ></div>
        <div data-type="label" class="cell">Hell</div>
                  </div>
                  </div>
                 
            <header>TVLICHT</header>
        <div data-type="switch" data-device="TVLicht" data-get-on="!off" data-get-off="off" data-set-on="hsv 0,0,10" class="cell" data-icon="fa-paint-brush" data-on-background-color="hsl(360,100%,100%)"></div>
        <div data-type="label" class="cell">TVLicht Weiss</div>
        <div data-type="volume" data-device="TVLicht" data-min="0" data-max="360" data-get="hue" data-set="hue" class="hue-tick top-space-1x" ></div>
        <div data-type="label" class="cell">Color</div>
        <div data-type="volume" data-device="TVLicht" data-min="0" data-max="100" data-get="brightness" data-set="dim" class="bigger" ></div>
        <div data-type="label" class="cell">Hell</div> 
        </div>
</li>

Im Anhang noch die Änderung

[setstate]

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.

Ich habe einfach ein bisschen in deinem Code rum geändert. Ist auch nicht besser, aber vllt. eine neue Position für den Weg zum Ziel:

Code Auswählen Erweitern

<li data-row="2" data-col="4" data-sizex="5" data-sizey="4">
     <header>WOHNZIMMER</header>
     <div class="container">
        <div class="inline">
           <div class="inline">
             <div data-type="thermostat" data-device="Wohnzimmer" data-valve="valveposition" data-get="desiredTemperature"  data-set="desiredTemperature auto"  data-temp="temperature" class="big"></div>
             <div data-type="switch" data-device="FensterLicht" class="cell"></div>
             <div data-type="label" class="cell">Fensterlicht</div>
             <div data-type="switch" data-device="Aquariumlicht" class="cell"></div>
             <div data-type="label" class="cell">Aquariumlicht</div>
             <div data-type="switch" data-device="Wandlampe" class="cell"></div>
             <div data-type="label" class="cell">Wandlampe</div>
           </div>
           <div class="inline">
             <div data-type="symbol" data-device="WZ_Terasse1" data-icon="ftui-door" class="narrow"></div>
             <div data-type="label" class="narrow darker small">Terassentür</div>
             <div data-type="symbol" data-device="WZ_Shutter1" data-icon="ftui-window" class="narrow"></div>
             <div data-type="label" class="narrow darker small">Fenster</div>
            </div>
         </div>
         <div class="inline">
             <header>STEHLAMPE</header>
             <div data-type="switch" data-device="Stehlampe" data-get-on="!off" data-get-off="off" data-set-on="hsv 0,0,10" class="cell" data-icon="fa-paint-brush" data-on-background-color="hsl(360,100%,100%)"></div>
             <div data-type="label" class="cell">Stehlampe Weiss</div>
             <div data-type="volume" data-device="Stehlampe" data-min="0" data-max="360" data-get="hue" data-set="hue" class="hue-tick top-space-1x" ></div>
             <div data-type="label" class="cell">Color</div>
             <div data-type="volume" data-device="Stehlampe" data-min="0" data-max="100" data-get="brightness" data-set="dim" class="bigger" ></div>
             <div data-type="label" class="cell">Hell</div>
        </div>
        <div class="inline">
             <header>TVLICHT</header>
             <div data-type="switch" data-device="TVLicht" data-get-on="!off" data-get-off="off" data-set-on="hsv 0,0,10" class="cell" data-icon="fa-paint-brush" data-on-background-color="hsl(360,100%,100%)"></div>
             <div data-type="label" class="cell">TVLicht Weiss</div>
             <div data-type="volume" data-device="TVLicht" data-min="0" data-max="360" data-get="hue" data-set="hue" class="hue-tick top-space-1x" ></div>
             <div data-type="label" class="cell">Color</div>
             <div data-type="volume" data-device="TVLicht" data-min="0" data-max="100" data-get="brightness" data-set="dim" class="bigger" ></div>
             <div data-type="label" class="cell">Hell</div>
         </div>
     </div>
</li>

[update71]

Ich bräuchte auch mal wieder Hilfe

ich bekomm das circlemenu nicht größer, dann verhauts immer alles. Hier mal ein Device was ich gern etwas größer hätte da es aucf dem Tablet arg lütt ist ...

Code Auswählen Erweitern

<div>
                    <div data-type="circlemenu" class="cell circlemenu" data-direction="bottom-half">
                        <ul class="menu">
                          <li>
                               <div data-type="symbol" data-device="HUEDevice1"
                                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="HUEDevice1"
                                   data-set="off"
                                   data-icon="oa-light_light_dim_00"></div></li>
                          <li><div data-type="push" data-device="HUEDevice1"
                                   data-set="pct 20"
                                   data-icon="oa-light_light_dim_20"></div></li>
                          <li><div data-type="push" data-device="HUEDevice1"
                                   data-set="pct 50"
                                   data-icon="oa-light_light_dim_50"></div></li>
                          <li><div data-type="push" data-device="HUEDevice1"
                                   data-set="pct 80"
                                   data-icon="oa-light_light_dim_80"></div></li>
                          <li><div data-type="push" data-device="HUEDevice1"
                                   data-set="pct 100"
                                   data-icon="oa-light_light_dim_100"></div></li>
                        </ul>
                    </div>
                        <div data-type="label" >Rechts</div>
                </div>

Danke für Hinweise und auch mal wieder ein DANKE an die Coder und Supporter