New FHEM Tablet UI

[bmwfan]

Hallo,

ich komme mit der Verteilung auf mehrere Anzeigeseiten nicht weiter. Wollte es analog zum Beispiel von nesges machen, aber mit html-Dateien anstatt PHP (da habe ich 0 Ahnung von). Leider gehen die Aufrufe nicht, da anscheinend die Pfade nicht stimmen und ich komme trotz vieler Versuche nicht auf die Lösung. Kann jemand helfen?

Die ganzen Dateien liegen wie in der Anleitung beschrieben unter /fritz.nas/fhem/www/tablet mit entsprechenden Unterordnern /js, /css, /fonts, /lib.

Wenn ich mit TabletFrontend das Frontend aufrufe, wird mir in der Browser-Commandzeile angezeigt: fritz.box:8083/fhem/tablet.
Hier ist schon mein erstes Verständnisproblem. Das müßte doch heißen: ...8083/fhem/www/tablet?

Gehe ich auf das Wohnzimmersymbol im Frontend wird mir als Sprungadresse angezeigt: fritz.box:8083/fhem/wohnzimmer.html. Da die Datei dort aber nicht liegt, springt er beim Aufruf in die WEB-Oberfläche von fhem.
Das ist mein Aufrufcode in der index.html:

Code Auswählen Erweitern

<li data-row="1" data-col="1" data-sizex="1" data-sizey="4">
<header>R&Auml;UME</header>
<style>
#room_index #bg {
color: rgb(170,105,0) !important;
border: 3px
}
</style>
<div class="container">
<a id="room_index" href="home.html" class="cell fa-stack fa-2x">
<i id="bg" class="fa fa-stack-2x fa-circle" style="color: rgb(111,69,0);"></i>
<i id="fg" class="fa fa-stack-1x fa-home" style="color: rgb(42, 42, 42);"></i>
</a>
<a id="room_wohnzimmer" href="wohnzimmer.html" class="cell fa-stack fa-2x">
<i id="bg" class="fa fa-stack-2x fa-circle" style="color: rgb(111,69,0);"></i>
<i id="fg" class="fa fa-stack-1x fa-film" style="color: rgb(42, 42, 42);"></i>
</a>
<a id="room_kueche" href="kueche.html" class="cell fa-stack fa-2x">
<i id="bg" class="fa fa-stack-2x fa-circle" style="color: rgb(111,69,0);"></i>
<i id="fg" class="fa fa-stack-1x fa-cutlery" style="color: rgb(42, 42, 42);"></i>
</a>
<a id="room_schlafzimmer" href="schlafzimmer.html" class="cell fa-stack fa-2x">
<i id="bg" class="fa fa-stack-2x fa-circle" style="color: rgb(111,69,0);"></i>
<i id="fg" class="fa fa-stack-1x fa-bed" style="color: rgb(42, 42, 42);"></i>
</a>
<a id="room_bad" href="bad.html" class="cell fa-stack fa-2x">
<i id="bg" class="fa fa-stack-2x fa-circle" style="color: rgb(111,69,0);"></i>
<i id="fg" class="fa fa-stack-1x fa-female" style="color: rgb(42, 42, 42);"></i>
</a>
<a id="room_buero" href="arbeitszimmer.html" class="cell fa-stack fa-2x">
<i id="bg" class="fa fa-stack-2x fa-circle" style="color: rgb(111,69,0);"></i>
<i id="fg" class="fa fa-stack-1x fa-laptop" style="color: rgb(42, 42, 42);"></i>
</a>
<a id="room_aussen" href="aussen.html" class="cell fa-stack fa-2x">
<i id="bg" class="fa fa-stack-2x fa-circle" style="color: rgb(111,69,0);"></i>
<i id="fg" class="fa fa-stack-1x fa-sun-o" style="color: rgb(42, 42, 42);"></i>
</a>
</div>
</li>

Wenn ich hier die Pfade korrigiere klappt der Aufruf von Wohnzimmer.html, aber der Rücksprung läuft ins leere. Was muss ich denn wie einstellen, dass die Ein- und Aussprünge klappen?

Gruß Jürgen

[bjoernbo]

Vielleicht hilft dir meine Hardcopy weiter 

(//)

Ps: Du hast oben rechts, "Müll". Ist woher kommen deine Werte? Kalender, o.ä?

[bmwfan]

Ist z.B. julia.html im Verzeichnis js? Das würde meiner bisherigen Logik widersprechen, wobei die ja nicht wirklich funktioniert.
Ich vermute eher, dass es ein Problem mit dem Basisverzeichnis und den relativen Pfadangaben ist, auf dessen Lösung ich nicht komme.

Ich habe einen Müllkalender (holiday-template) angelegt und meine Abholtermine eingetragen. Von dessen readings-group erzeuge ich einen dummy mit dem Status Nichts, wenn am nächsten Tag keine Abholung ansteht bzw. mit dem Müll, der abgeholt wird. Bei uns Papier, Restmüll und Gelber Sack. Den wiederum blende ich ein und generiere eine push-message am Vorabend der Abholung.

[bmwfan]

Ich habe es verm. falsch verstanden. Alle html sind im Verzeichnis www/tablet, genau so wie bei mir. Hast Du in der Inex.html irgend einen Basispfad o.ä. angegeben? Ich weiss nicht, ob man das bei html-Seiten machen muss und es wäre meine einzige Erklärung, warum es bei mir nicht funktioniert.

[bjoernbo]

es liegen alle Dateien innerhalb von /tablet.
In der Index Datei habe ich keine sonstigen Einträge

Das ist meine index.html => das "Menü" was ich links habe. Dies habe ich in jede Datei (Julia.html, Wohnzimmer.html etc.) eingetragen !!!!

<li data-row="1" data-col="1" data-sizex="1" data-sizey="4">
   <header>RÄUME</header>
    <style>
    #room_index #bg {
        color: rgb(170,105,0) !important;
        border: 3px
    }
</style>
    <div class="container">
    <a id="room_index" href="index.html" class="cell fa-stack fa-2x">
    <i id="bg" class="fa fa-stack-2x fa-circle" style="color: rgb(111,69,120);"></i>
    <i id="fg" class="fa fa-stack-1x fa-home" style="color: rgb(255,255,255);"></i>
    </a>
    <a id="room_schlafzimmer" href="schlafzimmer.html" class="cell fa-stack fa-2x">
    <i id="bg" class="fa fa-stack-2x fa-circle" style="color: rgb(111,69,120);"></i>
    <i id="fg" class="fa fa-stack-1x fa-bed" style="color: rgb(255,255,255);"></i>
    </a>
    <a id="room_kueche" href="kueche.html" class="cell fa-stack fa-2x">
    <i id="bg" class="fa fa-stack-2x fa-circle" style="color: rgb(111,69,120);"></i>
    <i id="fg" class="fa fa-stack-1x fa-cutlery" style="color: rgb(255,255,255);"></i>
    </a>
    <a id="room_wohnzimmer" href="wohnzimmer.html" class="cell fa-stack fa-2x">
    <i id="bg" class="fa fa-stack-2x fa-circle" style="color: rgb(111,69,120);"></i>
    <i id="fg" class="fa fa-stack-1x fa-film" style="color: rgb(255,255,255);"></i>
    </a>
    <a id="room_ben" href="ben.html" class="cell fa-stack fa-2x">
    <i id="bg" class="fa fa-stack-2x fa-circle" style="color: rgb(111,69,120);"></i>
    <i id="fg" class="fa fa-stack-1x fa-male" style="color: rgb(255,255,255);"></i>
    </a>
    <a id="room_julia" href="julia.html" class="cell fa-stack fa-2x">
    <i id="bg" class="fa fa-stack-2x fa-circle" style="color: rgb(111,69,120);"></i>
    <i id="fg" class="fa fa-stack-1x fa-female" style="color: rgb(255,255,255);"></i>
    </a>
    <a id="room_wetter" href="wetter.html" class="cell fa-stack fa-2x">
    <i id="bg" class="fa fa-stack-2x fa-circle" style="color: rgb(111,69,120);"></i>
    <i id="fg" class="fa fa-stack-1x fa-umbrella" style="color: rgb(255,255,255);"></i>
    </a>
   
</div>
</li>

[bjoernbo]

Ich habe einen Müllkalender (holiday-template) angelegt und meine Abholtermine eingetragen. Von dessen readings-group erzeuge ich einen dummy mit dem Status Nichts, wenn am nächsten Tag keine Abholung ansteht bzw. mit dem Müll, der abgeholt wird. Bei uns Papier, Restmüll und Gelber Sack. Den wiederum blende ich ein und generiere eine push-message am Vorabend der Abholung.

Super ! kannst Du mir den Auszug aus dem "dummy" und der "reading-group" mal zukommen lassen. Habe auch eine .holiday - Datei, bekomme das aber nicht hin 

[mrfloppy]

Hab das Menü auch ausprobiert bei mir funktionierts so:

Code Auswählen Erweitern


<a id="room_garten" href="www/tablet/garten.html" class="cell fa-stack fa-2x">
<i id="bg" class="fa fa-stack-2x fa-circle" style="color: rgb(111,69,0);"></i>
<i id="fg" class="fa fa-stack-1x fa-film" style="color: rgb(42, 42, 42);"></i>
</a>


Und bei Mouseover sehe ich den richtigen Pfad zur Datei.
Mit diesem Code gehts bei mir auch nicht

Code Auswählen Erweitern


<a id="room_garten" href="garten.html" class="cell fa-stack fa-2x">
<i id="bg" class="fa fa-stack-2x fa-circle" style="color: rgb(111,69,0);"></i>
<i id="fg" class="fa fa-stack-1x fa-cutlery" style="color: rgb(42, 42, 42);"></i>
</a>


kommt beim Mouseover IP/fhem/garten.html

Also muss da wohl wo was anderes eingetragen sein ?!?

EDIT: AAAH , das funktioniert nur bei ersten mal, nach weiteren aufrufen stimmt dann der Eintrag nicht mehr.

[setstate]

Hallo alle, die mehrere Seiten anlegen wollen.
Ich würde das Button-Widget von nesges nutzen, dort ist alles nötige untergebracht und ihr braucht euch nicht mit id, style, href usw. rumschlagen.
Hier der Link zum Widget: https://github.com/nesges/Widgets-for-fhem-tablet-ui/#button
Einfach ins js Verzeichnis kopieren.

Seite1

Code Auswählen Erweitern

<div data-type="button" data-url="index2.html"></div>

Seite2

Code Auswählen Erweitern

<div data-type="button" data-url="index.html"></div>

[mrfloppy]

Das Button-Widget hatte ich vorher versucht und dort  habe ich das selbe Problem mit den Links zu den Unterseiten.

EDIT:  nichts geändert und jetzt gehts wie bei bjoernbo mit "href="index.html".

Ich verstehs nicht mehr 

[bmwfan]

Voila, meine Mülllogik:

Code Auswählen Erweitern

#########################################################
# --- Abholtage Abfall anzeigen ---
#########################################################
define rgAbfallkalender readingsGroup abfallkalender:!title\
abfallkalender:!day|0,!Restabfall|0,!Leichtverpackungen|0,!Papier|0,!Bioabfall|0,!O-Tonne|0,!Tannenbaum|0\
abfallkalender:!day|1,!Restabfall|1,!Leichtverpackungen|1,!Papier|1,!Bioabfall|1,!O-Tonne|1,!Tannenbaum|1\
abfallkalender:!day|2,!Restabfall|2,!Leichtverpackungen|2,!Papier|2,!Bioabfall|2,!O-Tonne|2,!Tannenbaum|2\
abfallkalender:!day|3,!Restabfall|3,!Leichtverpackungen|3,!Papier|3,!Bioabfall|3,!O-Tonne|3,!Tannenbaum|3\
abfallkalender:!day|4,!Restabfall|4,!Leichtverpackungen|4,!Papier|4,!Bioabfall|4,!O-Tonne|4,!Tannenbaum|4\
abfallkalender:!day|5,!Restabfall|5,!Leichtverpackungen|5,!Papier|5,!Bioabfall|5,!O-Tonne|5,!Tannenbaum|5\
abfallkalender:!day|6,!Restabfall|6,!Leichtverpackungen|6,!Papier|6,!Bioabfall|6,!O-Tonne|6,!Tannenbaum|6\
abfallkalender:!day|7,!Restabfall|7,!Leichtverpackungen|7,!Papier|7,!Bioabfall|7,!O-Tonne|7,!Tannenbaum|7\
abfallkalender:!day|8,!Restabfall|8,!Leichtverpackungen|8,!Papier|8,!Bioabfall|8,!O-Tonne|8,!Tannenbaum|8\
abfallkalender:!day|9,!Restabfall|9,!Leichtverpackungen|9,!Papier|9,!Bioabfall|9,!O-Tonne|9,!Tannenbaum|9\
abfallkalender:!day|10,!Restabfall|10,!Leichtverpackungen|10,!Papier|10,!Bioabfall|10,!O-Tonne|10,!Tannenbaum|10\
abfallkalender:!day|11,!Restabfall|11,!Leichtverpackungen|11,!Papier|11,!Bioabfall|11,!O-Tonne|11,!Tannenbaum|11\
abfallkalender:!day|12,!Restabfall|12,!Leichtverpackungen|12,!Papier|12,!Bioabfall|12,!O-Tonne|12,!Tannenbaum|12\
abfallkalender:!day|13,!Restabfall|13,!Leichtverpackungen|13,!Papier|13,!Bioabfall|13,!O-Tonne|13,!Tannenbaum|13\
abfallkalender:!day|14,!Restabfall|14,!Leichtverpackungen|14,!Papier|14,!Bioabfall|14,!O-Tonne|14,!Tannenbaum|14
attr rgAbfallkalender alias Müllabfuhr
attr rgAbfallkalender cellStyle { "r:1"=>'style="font-weight:bold;;font-size:16px"',"c:1"=>'style="font-weight:bold;;text-align:right;;padding-left:28pt;;"'}
attr rgAbfallkalender group Müll
attr rgAbfallkalender nonames 1
attr rgAbfallkalender valueColumns { title => 'colspan="7"' }
attr rgAbfallkalender valueFormat {if($READING eq 'title'){$VALUE="recycling"}else{my($r,$d)=split(/\|/,$READING);;;;my $v=fhem("get abfallkalender days $d",1);;;;if($v eq "none"){$VALUE=undef}else{if($r eq 'day'){if($d==0){$VALUE="Heute"}elsif($d==1){$VALUE="Morgen"}else{$VALUE="in $d Tagen"}}else{if($v=~m/$r/){$VALUE=1}else{$VALUE=' '}}}}}
attr rgAbfallkalender valueIcon {if($VALUE eq 'recycling'){$VALUE}elsif($VALUE eq 1){if($READING=~m/Restabfall/){$VALUE='bag'}elsif($READING=~m/Leichtverpackungen/){$VALUE='bag@FFFF00'}elsif($READING=~m/Papier/){$VALUE='bag@01A3F5'}elsif($READING=~m/Bioabfall/){$VALUE='bag@04D921'}elsif($READING=~m/O-Tonne/){$VALUE='dustbin@FF6D00'}elsif($READING=~m/Tannenbaum/){$VALUE='christmas_tree@2B6B17'}}else{$VALUE=''}}
attr rgAbfallkalender valueSuffix {'title'=>' Müllabfuhr'}

und die dummys

Code Auswählen Erweitern

# --- Müllstatus in dummy ablegen, damit im WEB-UI angezeigt werden kann
# --- di_abfallkalender: Kopiert Info über Abholung von morgen in du_abfallkalender
define du_abfallkalender dummy
define di_abfallkalender DOIF ([abfallkalender:tomorrow] eq "Papier") ({fhem ("setreading du_abfallkalender state Papier")}) DOELSEIF ([abfallkalender:tomorrow] eq "Restabfall") ({fhem ("setreading du_abfallkalender state Restmüll")}) DOELSEIF ([abfallkalender:tomorrow] eq "Leichtverpackungen") ({fhem ("setreading du_abfallkalender state Gelber Sack")}) DOELSE ({fhem ("setreading du_abfallkalender state Nichts")})

# --- Prüft täglich um 18:00 Uhr, ob am nächsten Tag Abholung ansteht
define di_pushmsg_Abfallkalender DOIF ([20:00] and [?du_abfallkalender:state] ne "Nichts") ({fhem("set PushoverAdresse1 msg 'Müllabfuhr' 'Morgen wird [du_abfallkalender:state] geleert' '' 0 ''")},{fhem("set PushoverAdresse2 msg 'Müllabfuhr' 'Morgen wird [du_abfallkalender:state] geleert' '' 0 ''")})

[Damian]

Ich melde mich mal wieder. Nachdem ich alles upgedatet habe, funktioniert nun auch das Longpoll bei mir (Verzögerung ca. 2 bis 3. Sekunden)

Was ich gerne anpassen würde, ist die kleine Anzeige der measure-temp im thermostat-Wigdet - die ist für meine Augen einfach zu klein. Von meinen Eltern, die zukünftig das tablet UI nutzen sollen, will ich gar nicht sprechen.

Im thermostat-Wigdet habe ich die passende Stelle nicht finden können. Kann mir jemand einen Tipp geben?

Gruß

Damian

[setstate]

widget_thermostat.js
Zeile 127:

Code Auswählen Erweitern

c.font="10px sans-serif";

[bjoernbo]

Danke bmwfan ! Den obrigen code habe ich, da ich die Müllabfuhr damals schon im Dashboard hatte. Die Dummys fehlte mit jetzt nur noch.
Kann dieser auch 2 Werte ausgeben, also wenn an einem Tag zwei Tonnen geleert werden?
Dank.

[bjoernbo]

der Schwiegervater hatte heute Spaß mit dem UI. Was ihm, aber auch mir schon aufgefallen ist, wenn man das Thermostat bedient und die Temperatur mit dem Finger einstellt, muss man immer um den Finger herum gucken, da man nicht (so gut) erkennt, welchen Wert man gerade hat. Das aber nur kurz am Rande.

[bmwfan]

Habe ich nie getestet, aber wenn Du in ein 2.tes Reading schreibst müsste es gehen.  Ich vermute, dass man pro dummy beliebig viele readings anlegen kann. Bin aber wirklich noch ganz am Anfang mit dieser Art der Programmierung und vermute es nur. Würde es mit setreading du_abfallkalender state2 Sonderabfall versuchen.
Beim Anzeigen en weiteres Label definieren.