[FHEM-Tablet-UI] User-Demos

[ChrisK]

Ich hätte da auch Interesse dran Toni.
Hauptsächlich in der Hoffnung, mein Verständnisproblem von hier vielleicht selbst zu lösen.

Vielen Dank schon mal!

[waschbaerbauch]

Vielleicht sollte man es einfach an den Post hängen, dann werden die Threads nicht von Anfragen überfrachtet ...

[l-j-silver]

Vielleicht sollte man es einfach an den Post hängen, dann werden die Threads nicht von Anfragen überfrachtet ...

So die Version hängt jetzt an mein Thread

Bei Fragen, oder Verbesserungsvorschlägen schreibt einfach.

Gruß Toni

[Andy89]

Servus,
ein User hat mal wegen meiner mobilen GUI angefragt, da dachte ich, ich stell's einfach mal allen zur Verfügung. Die GUI ist für mein iPhone 6 ausgelegt. Es ist teilweise nicht perfekt, aber es ist ja alles noch nicht fertig^^

Info 1: In der Index habe ich alle Pfade absolut gemacht und es ist eine fehlerhafte IP samt Port angegeben
Info 2: da die Batterien Seite zur Zeit nur eine Test-Seite ist, habe ich die HTML Seite gar nicht angehängt.

Bei Fragen könnt ihr mich gerne anschreiben.
Beste Grüße
Andy

P.s.: da mein iPhone gerade repariert wird, hab ich die Bilder mit dem "Responsive Design" von Safari gemacht..^^

[klausw]

Hallo Andy,

schöne Oberfläche.
Was mich interessieren würde ist, wie schaut deine CheckUpdatesAvailable Routine aus? 
Und wie rebootest du das Raspberry? Ist dein user fhem in der sudoers Gruppe oder hast du es anderweitig gelöst?

Grüße
Klaus

[xsasx]

Sehr geil vielen dank schau ich mir gleich mal an - kann ich da auch nen dimmer integrieren und easy steuern ?

[Andy89]

Hallo Andy,

schöne Oberfläche.
Was mich interessieren würde ist, wie schaut deine CheckUpdatesAvailable Routine aus? 
Und wie rebootest du das Raspberry? Ist dein user fhem in der sudoers Gruppe oder hast du es anderweitig gelöst?

Grüße
Klaus

Servus Klaus,
für die updates hab ich ein DOIF, ein at und eine Routine in meinen Utils

DOIF:

Code Auswählen Erweitern

([UpdatesAvailable]) ({ updates() })
DOELSEIF ([08:00]) (set at_CheckUpdatesAvailable active)

at:

Code Auswählen Erweitern

+*00:15:00 { my $a = `wget -qO - http://fhem.de/fhemupdate4/svn/controls_fhem.txt | cat - FHEM/controls_fhem.txt | sort | uniq -u | cut -d " " -f 4 | uniq`."keineUpdates";
fhem "setreading UpdatesAvailable state $a";
}

myUtils:

Code Auswählen Erweitern

#######################################################################################
#                                                                                     #
#   UpdatesAvailable => in ein dummy als Text                                         #
#                                                                                     #
#######################################################################################

sub updates()
{
    my $updates = ReadingsVal("UpdatesAvailable","state","");
    my @array = split(/\s+/,$updates);
    my $Anzahl = @array;
    #Log(0, "updates(): Anzahl ".$Anzahl); 
    my $retVal ="";
    if ($Anzahl eq 1) {
        $retVal = " <br> Keine Updates vorhanden ";
        fhem "setreading UpdatesAvailable available false";             
        fhem "set UpdatesAvailable false"; 
        fhem "set at_CheckUpdatesAvailable inactive";
        fhem "attr WEB menuEntries Edit fhem.cfg,/fhem?cmd=style+edit+fhem.cfg,Edit 99_myUtils.pm,/fhem?cmd=style+edit+99_myUtils.pm,Update Check,/fhem?cmd=update+check,Herunterfahren,/fhem?cmd=shutdown,Neustart,/fhem?cmd=shutdown+restart";
    }
    else
    {       
        $retVal = "<div> <br>";
        for(my $i = 0; $i < ($Anzahl-1)/2; $i++)
        #foreach my $eintrag (@array)
        {
            #Log(0, "updates(): array-".$i.". eintrag: ".$array[$i]);
            $retVal .= "<div class=\"row\">";
            $retVal .= $array[$i];
            $retVal .= "</div><div class=\"newline\"></div>";
        }
        fhem "setreading UpdatesAvailable available true";
        fhem "set UpdatesAvailable true";
        fhem "attr WEB menuEntries Edit fhem.cfg,/fhem?cmd=style+edit+fhem.cfg,Edit 99_myUtils.pm,/fhem?cmd=style+edit+99_myUtils.pm,Update,/fhem?cmd=update,Herunterfahren,/fhem?cmd=shutdown,Neustart,/fhem?cmd=shutdown+restart";               
        $retVal .= "</div>";
        #Log(0, "updates(): ausgabe: ".$retVal);
    }
    fhem "setreading UpdatesAvailable updates ". $retVal;
    fhem "setreading UpdatesAvailable anzahl ". ($Anzahl-1)/2;
    fhem "save";
   
}

das geht bestimmt auch einfacher, aber das funktioniert 


für den Rasoberry restart habe ich ein dummy, notify und auf dem rPi eine Shell

notify:

Code Auswählen Erweitern

rPi_Reboot:on {system ("sudo -u root /opt/fhem/FHEM/reboot.sh &")}

Shell:

Code Auswählen Erweitern

#!/bin/bash
perl /opt/fhem/fhem.pl 7072 "set rPi_Reboot off"
perl /opt/fhem/fhem.pl 7072 "set Pushbullet message rPi3 wird neugestartet | rPi3 wird neugestartet"
perl /opt/fhem/fhem.pl 7072 "save"
sudo reboot


und in der sudoers hab ich folgendes eingeippt:

Code Auswählen Erweitern

fhem ALL=(ALL) NOPASSWD:/opt/fhem/FHEM/reboot.sh
Somit hat fhem nur für diese Shell den Zugriff. Aber ehrlich gesagt kenn ich mich nicht soooooo gut mit Linux aus 

Sehr geil vielen dank schau ich mir gleich mal an - kann ich da auch nen dimmer integrieren und easy steuern ?

Klar kannst du das. Ich kann ja auch meine LEDs easy steuern

Beste Grüße
Andy

edit: hab mal ein Bild hochgeladen, wie's aussieht mit vorhandenen Updates^^
edit2: hab nochmal in meine sudoers geschaut und dort habe ich scheinbar noch einen weiteren Eintrag für den reboot drin:

Code Auswählen Erweitern

fhem ALL=(ALL) NOPASSWD:/sbin/reboot

[pole23]

Hallo l-j-Silver, könntest du mir bitte auch deinen Code zur Verfügung stellen?

[Helmi55]

Hallo
Hat er doch schon. Im Post #452 hat er in verlinkt

Gruß Helmu

[homeum]

Hallo,

lange habe ich es vor mir her geschoben, mit meinem TabletUI anzufangen, aber nun musste es sein.
Hier habe ich jede Menge Vorlagen und Hinweise bekommen, deshalb möchte ich auch etwas zurückgeben,
wozu ich keine direkten Vorlagen gefunden habe.

Widget Luftdruck (basiert auf klimatrend)
Erklärt sich von selbst, der Tendenz-Pfeil benötigt das statistiks-Modul(Reading Tendenzy 1h) im Luftdruck-Device.

Code Auswählen Erweitern


<li data-row="1" data-col="3" data-sizex="1" data-sizey="2">
<header>Luftdruck</header>
<div class="right top-space-2x">
<div class="inline">
<div data-type="label" data-device="ESPEasy_Witty1_BMP" data-get="Pres" data-limits='[-73,0,2500]' data-colors='["#6699FF","#AA6900","#FF0000"]' data-unit="hPa" class="big"></div>
<div data-type="label" class="cell top-space">Luftdruck</div>
</div>

<div data-type="klimatrend"
data-device="ESPEasy_Witty1_BMP"
data-get="statPresTendency"
class="inline top-space blink bigger"
data-refperiod="1" 
data-stagnating-color="A4A4A4"
data-icon="fa-angle"
data-rising-color="#F3F781"
data-falling-color="#084B8A"
data-highmark="5"
data-highmark-icon="fa-angle-double"
data-highmark-rising-color="#F3F781"
data-highmark-falling-color="#084B8A">
</div>
<div data-type="label" class="cell top-space">momentane Tendenz</div>
</li>



Widget Luftdruck-Verlauf (basiert auf level)
Hierbei werden alle 4 Werte aus dem statistics-Reading Tendency abgefragt.

Code Auswählen Erweitern


<li data-row="1" data-col="5" data-sizex="2" data-sizey="2">
<header>Barometer</header>
<div class="inline">
<div data-type="level" data-device='ESPEasy_Witty1_BMP'
data-get='statPresTendency'
data-part='2'
data-min="-10"
data-max="10"
data-width="6"
data-limits='["-100","-0.9","1"]'
data-colors='["#084B8A","#A4A4A4","#F3F781"]'
class="inline top-space"></div>
<div data-type="label" class="cell mini top-space-2x">1h</div>
</div>
<div class="inline">
<div data-type="level" data-device='ESPEasy_Witty1_BMP'
data-get='statPresTendency'
data-part='4'
data-min="-10"
data-max="10"
data-width="6"
data-limits='["-100","-0.9","1"]'
data-colors='["#084B8A","#A4A4A4","#F3F781"]'
class="inline top-space"></div>
<div data-type="label" class="cell mini top-space-2x">2h</div>
</div>
<div class="inline">
<div data-type="level" data-device='ESPEasy_Witty1_BMP'
data-get='statPresTendency'
data-part='6'
data-min="-10"
data-max="10"
data-width="6"
data-limits='["-100","-0.9","1"]'
data-colors='["#084B8A","#A4A4A4","#F3F781"]'
class="inline top-space"></div>
<div data-type="label" class="cell mini top-space-2x">3h</div>
</div>
<div class="inline">
<div data-type="level" data-device='ESPEasy_Witty1_BMP'
data-get='statPresTendency'
data-part='8'
data-min="-10"
data-max="10"
data-width="6"
data-limits='["-100","-0.9","1"]'
data-colors='["#084B8A","#A4A4A4","#F3F781"]'
class="inline top-space"></div>
<div data-type="label" class="cell mini top-space-2x">6h</div>
</div>
<div data-type="label" class="cell">Luftdruck-Verlauf</div>
</li>



Widget Stromampel (basiert auf range)
Ausgelesen wird ein Dummy StromAktuell, erzeugt aus Modul ElectricityCalculator Reading xx_energy_PowerCurrent (Durchschnitt der letzten 5 Minuten)

Code Auswählen Erweitern


<li data-row="3" data-col="6" data-sizex="1" data-sizey="2">
<header>STROM</header>
    <div class="container">
<div class="top-space">
<div data-type="range" data-device="StromAktuell"
data-max="4000"
data-min="0"
data-limit-low="1000"
data-limit-high="2500"
data-width="20"
data-height="120"
data-color-low="#04B404"
data-color="#AEB404"
data-color-high="#FF0000"
class="inline"></div>
</div>
<div class="cell">
<div data-type="label" data-device="StromAktuell" data-part="1" data-limits='[0,1000,2500]' data-colors='["#04B404","#AEB404","#FF0000"]' class="big"></div>
<div data-type="label" class="cell">Watt</div>
</div>
</div>
</li>


Hier die Screenshots...

Gruß Gerd

[bjoernbo]

@Andiy89: Danke für deinen Quellcode. Dieser gibt sehr viel Inspiration und Grundlage zur weiteren individuellen Ansichten und Anzeigen.

Wird bei dir das "Warn"-Zeichen eines geöffnete Fenster ebenfalls über den "<selektion>"-Bereich hinausgeschrieben? Kann ich das irgendwo anpassen?

[Andy89]

@Andiy89: Danke für deinen Quellcode. Dieser gibt sehr viel Inspiration und Grundlage zur weiteren individuellen Ansichten und Anzeigen.

Wird bei dir das "Warn"-Zeichen eines geöffnete Fenster ebenfalls über den "<selektion>"-Bereich hinausgeschrieben? Kann ich das irgendwo anpassen?

gerne

ehrlich gesagt keine Ahnung, da ich das Warn Zeichen nur in der Menübar oben nutze. Ich glaube einstellen kann man das nicht, aber es ist abhängig von der Größe des Displays. Auf dem Laptop bei voller Auflösung ist das warn-Zeichen gar nicht sichtbar und sobald man das Fenster verkleinert rückt es immer näher an das Symbol. Ich weiß nicht, ob das überhaupt so gewollt ist...

[bjoernbo]

ja, genau. Auf dem Notebook wird es gar nicht angezeigt und es verschwindet förmlich. Das es nicht ganz korrekt angezeigt wird stört mich jetzt nicht, aber anders wäre schöner 

[Andy89]

ich hab mal meine mobile UI nun etwas verändert, indem ich das CSS File auf "dark" umgestellt habe, da ich auf meinem Handy, vor allem morgens dunkel angenehmer finde.
Irgendwie werden die "on" Farben nicht mit übernommen. Ich weiß nicht, woran das liegt. So sind dann alle Symbole und co bei "on" orange. Dafür hab ich dann einfach in der fhem-tablet-ui.css die Hex Werte für Orange durch Blau ersetzt.

wems gefällt, im Anhang ist die CSS und paar Beispielbilder  Dafür dann einfach in der index die css einbinden statt der normalem mobilen CSS.

Beste Grüße
Andy

[TWART016]

Hallo Andy,

sieht super aus. Bei mir wird nur der Text angezeigt, ohne Design. Liegt vermutlich daran, dass m_myStyle.css fehlt. Könntest du das noch zur Verfügung stellen?

Oder woran kann es noch liegen?


Gruß
TWART016