New FHEM Tablet UI

[Marie]

Hallo Marie,

machbar wäre das, aber 1:1 kann man das nicht zu FHEM durchreichen, da verhaspelt sich das System, da die Latenzzeiten zu groß sind. Es dauert schon einige Millisekunden, bis es beim Device ankommt. Ausserdem werden dann zu viele Events hintereinander von dem UI geschickt. Man könnte versuchen aller 200ms einen neuen Wert zu schicken. Mal probieren ...

Hallo Setstate,

ja sowas in der Art dachte ich mir schon....na mal schauen..

LG

Marie

[Stril]

@Stril:
Ich bin immer noch der Meinung, dass mein Code auch für deinen Fall passend wäre:

Code Auswählen Erweitern


<div data-type="dimmer" data-device='aLd_EG_Esszimmer_LichtLinks'
       data-get-on="on"
       data-get-off="off"
       data-set="dim"
       class="cell"></div>


Sendet folgendes:
Press Button on:  set aLd_EG_Esszimmer_LichtLinks dim 62
Press Button off:  set aLd_EG_Esszimmer_LichtLinks off
Slider geändert:   set aLd_EG_Esszimmer_LichtLinks dim 77

Wenn Fhem ein set aLd_EG_Esszimmer_LichtLinks dim 0 bekommt, ändert das nichts am Control

@setstate:
Du hast absolut Recht. So funktioniert es grundsätzlich. Ich habe die ganze Zeit es besonders gut machen wollen und es damit kaputt konfiguriert.

Leider funktioniert es nur 4-5 mal. Danach werden die Befehle nicht, oder nur mit einem großen Zeitversatz (30-60s) ausgeführt - trotz potenter Hardware. Die CPU langweilt sich und im FHEM Log passiert während der 30s einfach nichts. Danach sieht alles normal aus.

Dimmen funktioniert - on/off dann nicht mehr zuverlässig. Starte ich den Browser neu, geht es wieder ein paar Mal - manchmal auch für 10 Minuten.

Hast Du dazu auch noch eine Idee?


Gruß und vielen Dank
Phil

[bjoernbo]

Hallo zusammen, da liest man aus der Ferne, welche neuen Funktionen in kürzester Zeit hinzugekommen sind und man hat aus der Ferne keine Chance die neuen Sachen zu implementieren. Ein Glück ist heute ein Feiertag und es gibt genügend Zeit, alles auszuprobieren.

Ich habe folgende Frage im Bezug auf das Update für "Symbol".

Ich habe folgenden Code eingebaut:

<div data-type="symbol" data-device="Fensterkontakt.Schlafzimmer"
        data-get-on='["open","closed"]'
        data-icons='["ftui-door warn","ftui-door"]'
        data-on-colors='["#777","#555"]'
        class="narrow big">

Allerdings wird mir immer das Ausrufezeichen angezeigt. Unabhängig vom Status. Mein Fensterkontakt von HomeMatic kann den Status geöffnet/closed sowie geschlossen/closed annehemen. Egal welchen Wert ich eintrage ändert sich das Symbol leider nicht.
Wo könnte mein Fehler liegen ? 

[bjoernbo]

...hat sich erledigt!!!!

Die Farben die beim jeweiligen Status angezeigt werden sollen, sind in dem genannten Beispiel ein wenig verwirrend! Ich habe es nicht erkannt, dass es einmal grau bzw. hellgrau ist. Mit anderen Werten sieht es nun besser aus!!

[setstate]

Aber das rote Ausrufezeichen darf trotzdem nur beim Status open erscheinen, laut dem HTML Code.
Wenn dem nicht so ist, und es bei open und closed bleibt, ist noch was faul.
Mit den Farben muss ich auch erst noch probieren, ob das grau -> hellgrau zusammen mit den Warn Zeichen passt, oder ob es bei mir auch noch bunter werden muss, damit man den Zustand sofort erkennt.

[bjoernbo]

Nein Nein! Es ist alles gut! Es macht genau das, was es machen soll!
Fenster => OPEN = "!"   
Fenster => CLOSED = "kein !"

Alles ist gut!

[bjoernbo]

Wo bekomme ich eine Übersicht im Bezug auf die FTUI-Icons her. Die Datei ftui-icons.svg kann ich nicht öffnen bzw. es wird mir in inkscape lediglich eine leere Seite angezeigt

[setstate]

Wo bekomme ich eine Übersicht im Bezug auf die FTUI-Icons her. Die Datei ftui-icons.svg kann ich nicht öffnen bzw. es wird mir in inkscape lediglich eine leere Seite angezeigt

  Es gibt erst nur zwei: ftui-door und ftui-window http://forum.fhem.de/index.php/topic,34233.msg290173/topicseen.html#msg290173

Das sind die ersten beiden, die ich gemalt habe, weil so etwas im font awesome nicht dabei ist und die openautomation icons mir nicht gefallen. Es kann sein, dass da noch welche hinzukommen, wenn Bedarf besteht. Aber außer einem eigenen Batterie Icon fällt mir da spontan nix ein, was fehlt.

[bjoernbo]

  axo!

Ich war nämlich auf der Suche nach einem "KODI" / XBMC-Icon. Ich meine nesges hat das in seinem UI und dachte er hätte es aus eben genannten svg File

[nesges]

Ich war nämlich auf der Suche nach einem "KODI" / XBMC-Icon. Ich meine nesges hat das in seinem UI und dachte er hätte es aus eben genannten svg File

Das ist ein Logo-Image aus dem Kodi-Wiki in SVG gewandelt und per IcoMoon-App in einen eigenen Font eingebaut.

[bjoernbo]

Danke.

Habe ich prompt ausprobiert, aber es will leider nicht so .....

Habe mir zunächst die Icon zusammengestellt. Dann das polfix "font1-" in den Einstellungen hinterlegt. Danach in der style.css  den Eintrag entspr. angepasst:

ORIGINAL:

[class^="font1-"], [class*=" font1-"] {
   display: inline-block;
   width: 1em;
   height: 1em;
   fill: currentColor;
}

/* ================================================================================
Example showing how to change the color/size of the icons:
.font1-name {
   font-size: 32px; // works because "width" & "height" were set using em units
   color: red; // works because "fill" was set to "currentColor"
}
================================================================================ */

.font1-connection {
   width: 1.25em;
}

.font1-users {
   width: 1.125em;
}

ANPASSUNG:

[class^="font1-"], [class*=" font1-"] {
   display: inline-block;
   width: 1em;
   height: 1em;
   fill: currentColor;
}

/* ================================================================================
Example showing how to change the color/size of the icons:
.font1-name {
   font-size: 32px; // works because "width" & "height" were set using em units
   color: red; // works because "fill" was set to "currentColor"
}
================================================================================ */

.font1-connection {
   width: 1.25em;
}

.font1-users {
   width: 1.125em;
}

Dann das Verzeichnis

/fhem/tablet/customfonts/font1/

angelegt. Einen entsprechenden Verweis in der HTML Datei ebenso angelegt:

<link rel="stylesheet" href="/fhem/tablet/customfonts/font1/style.css">

Alle Dateien habe ich dann in das o.g. Verzeichnis kopiert und folgende Code zum testen verwendet.

<div data-type="push" data-device="WECKER" data-icon="font1-fire"></div>

Leider wird mir nur ein Kreis anstelle von "Feuer" angezeigt. 

By the Way....wenn ich den Fehler gefunden habe, kannst Du mir das KODI Symbol und den Auszug aus der selection.json zur Verfügung stellen?

[matzemoerk]

Ich wurde per PM gefragt ob ich meine Sonos Integration hier veröffentlichen könnt. Das ist damit erledigt. Es würde mich freuen, wenn wir die Ansicht gemeinsam noch verbessern könnten.

Die drei infoSummerize Label müssen in FHEM noch entsprechend angepasst werden. In meinem Fall ist das wie folgt:

generateInfoSummerize1: <NormalAudio><Artist prefix="<b>Künstler: </b>"/></NormalAudio><StreamAudio><Sender prefix="<b>Sender: </b>"/></StreamAudio>
generateInfoSummerize2: <NormalAudio><Title prefix="<b>Titel: </b> "/></NormalAudio><StreamAudio><SenderInfo/></StreamAudio>
generateInfoSummerize2: <Volume prefix="Lautstärke: "/><Mute instead=" ~ Kein Ton" ifempty=" ~ Ton An" emptyval="0"/> ~ Balance: <Balance ifempty="Mitte" emptyval="0"/><HeadphoneConnected instead=" ~ Kopfhörer aktiv" ifempty=" ~ Kein Kopfhörer" emptyval="0"/>

Code Auswählen Erweitern


<li data-row="1" data-col="2" data-sizex="2" data-sizey="2">
<header>SONOS MATTHIAS</header>
<div data-type="image" data-device="Sonos_Matthias" data-get="currentAlbumArtURL" data-size="100%"></div>
</li>

<li data-row="3" data-col="2" data-sizex="2" data-sizey="1">
<div class="container cell">
<div data-type="label" class="" data-device="Sonos_Matthias" data-get="infoSummarize1"></div><br>
<div data-type="label" class="" data-device="Sonos_Matthias" data-get="infoSummarize2"></div><br>
<div data-type="label" class=" small darker" data-device="Sonos_Matthias" data-get="infoSummarize3"></div>
</div>
</li>
           
<li data-row="4" data-col="2" data-sizex="2" data-sizey="2">
<header>PLAYER</header>
<div class="cell">
    <div data-type="push" data-device="Sonos_Mattthias"
    data-icon="fa-step-backward" data-background-icon="-"
             data-set="Previous" class="inline">
        </div>
        <div data-type="push" data-device="Sonos_Matthias"
             data-icon="fa-stop" data-background-icon="-"
             data-set="Stop" class="inline">
        </div>
        <div data-type="push" data-device="Sonos_Matthias"
             data-icon="fa-play" data-background-icon="-"
             data-set="Play" class="inline">
        </div>
        <div data-type="push" data-device="Sonos_Matthias"
             data-icon="fa-step-forward" data-background-icon="-"
             data-set="Next" class="inline">
        </div>
    </div>
    <div class="top-narrow">
        <div data-type="push"
            data-set="VolumeD"
            data-icon="fa-volume-off"
            data-background-icon="-"
            data-device="Sonos_Matthias"
            class="inline top-narrow"></div>
        <div data-type="slider"
            data-device="Sonos_Matthias"
            data-get="Volume"
            data-set="Volume"
            class="inline horizontal"></div>
        <div data-type="push"
            data-set="VolumeU"
            data-icon="fa-volume-up"
            data-background-icon="-"
            data-device="Sonos_Matthias"
            class="inline top-narrow"></div>
    </div>

<div class="cell">        
<div data-type="select" data-device="Sonos_Matthias" data-items='["Radio7","SWR3","Chillstep","Aktuelles","Google_Radio"]' data-set="startFavourite" class="inline top-space"></div>                 
</div>
         
    <div class="container">
  <div class="inline">
        <div data-type="switch" data-device="OG.mm.SD.Sonos"
             data-icon="fa-plug" class="cell"></div>
                 <div data-type="label" >Standby</div>   
   
  </div>     
        <div class="inline">
        <div data-type="push"
            data-device="OG.mm.SD.Sonos"
          data-icon="fa-clock-o"
data-set="on-for-timer 900"
            class="cell"></div>
        <div data-type="label" >15min</div>   
        </div>
            <div class="inline">
        <div data-type="push"
            data-device="OG.mm.SD.Sonos"
          data-icon="fa-clock-o"
data-set="on-for-timer 1800"
            class="cell"></div>
        <div data-type="label" >30min</div>   
        </div>
     </div>
       
         
</li>



[DJ_SAMMY190]

Was hier im Moment alles passiert ist Wahnsinn. Da kommt man ja kaum hinterher alles einzubauen. Aber nach dem Umzug dann^^

Habe Gerade ein Problem. Irgendwas übersehe ich:

Ich möchte vom Tablet den Akkuzustand mit einem Batteriezeichen anzeigen lassen.
Beim Taster hat das funktioniert. "ok" oder "low", aber bei dem direkten Zahlenwert funzt es nicht.
Entweder bekomme ich ein leeres Batteriezeichen dann wieder keins.

Danke für eure Hilfe Hab jetzt schon alles versucht..

Taster (Funktioniert) :

Code Auswählen Erweitern


<div data-type="symbol" data-device="HM_319828" data-get="battery"
data-background-icon="fa-circle"
data-icons='["oa-measure_battery_100","oa-measure_battery_25"]'
data-get-on='["ok","low"]'
data-on-colors='["#0CFB0C","#E50005"]'
style="font-size:2em">
</div>


Tablet (funktioniert nicht) :

Code Auswählen Erweitern


<div data-type="symbol"
data-device="Nexus7"
data-get="powerLevel"
data-background-icon="fa-circle"
data-get-on='["[1-24]","[25-40]","[41-66]","[67-92]","[93-100]"]'
data-on-colors='["#E50005","#FB5909","#F5FF10","#42BC0A","#0CFB0C"]'
data-icons='["oa-measure_battery_0","oa-measure_battery_25","oa-measure_battery_50","oa-measure_battery_75","oa-measure_battery_100"]'
style="font-size:2em">
</div>


[nesges]

Alle Dateien habe ich dann in das o.g. Verzeichnis kopiert und folgende Code zum testen verwendet.

Code Auswählen Erweitern

<div data-type="push" data-device="WECKER" data-icon="font1-fire"></div>
Leider wird mir nur ein Kreis anstelle von "Feuer" angezeigt. 

Naja, sofern dein CSS oben vollständig ist, hast du kein Icon mit dem Namen "font1-fire" Mein Icon-Font liegt im Repository der Demo Installation: https://github.com/nesges/TabletUI-Demo-WOPR/tree/master/html/fonts/nesges und unter http://fhem.nesg.es/demo/fonts/nesges/demo.html kannst du dir die enhaltenen Icons anschauen.

[nesges]

Leider funktioniert es nur 4-5 mal. Danach werden die Befehle nicht, oder nur mit einem großen Zeitversatz (30-60s) ausgeführt - trotz potenter Hardware. Die CPU langweilt sich und im FHEM Log passiert während der 30s einfach nichts. Danach sieht alles normal aus.

Oft kommen solche "Denkpausen" vor, wenn in Fhem blockierende Aktionen ablaufen. Fängt man sich leicht ein, wenn man zB Perl-Code in {} benutzt und dieser eine lange Ausführungszeit hat. Solche Calls sollte man dann besser in at-Jobs auslagern. Aber die Suche danach ist aufwendig und sehr individuell.