New FHEM Tablet UI

nesges · 02 April 2015, 13:27:40

Zitat von: schka17 am 02 April 2015, 10:31:09
Habe ich da etwa irgendwo ein Problem mit den Codepages?

Du nicht, aber irgendwo ist in der Übertragung was schief gelaufen, die Umlaute sind doppelt kodiert im Repository. Kannst du bitte einmal mit der Version von https://github.com/nesges/Widgets-for-fhem-tablet-ui/blob/master/js/widget_weather.js testen und - bei Umlautwetterlage - Rückmeldung geben, ob's damit funktioniert? Danke!

nesges · 02 April 2015, 13:37:54

Zitat von: bmwfan am 02 April 2015, 12:23:36
2: Wie kann ich eine zyklische Aktualisierung bei Zustandsänderung einbauen? Ich muss jedesmal das Interface neu laden, wenn ich eine Zustandsänderung angezeigt bekommen will.

Willst du wirklich zyklisch? Das ist bereits als shortpollInterval aktiv und Standardmässig auf 30s, bzw. bei aktivem longPoll auf 15min eingestellt (fhem-tablet-ui.js Zeilen 24 u. 165). Ansonsten eher longPoll (fhems eventgesteuerter Benachrichtungsdienst) in fhem und im UI aktivieren. Ist aber beides standardmässig aktiv, bitte kontrolliere in fhem:

Code Auswählen

list WEB

sollte eine Zeile "longpoll 1" anzeigen ("WEB" ggf. durch deine FHEMWEB-Instanz ersetzen) und im HTML Code des UI sollte die Zeile

Code Auswählen

<meta name="longpoll" content="1">

enthalten sein. Wenn das beides gegeben ist, passiert die Aktualisierung wahrscheinlich deshalb nicht, weil data-get (-on/off) falsch definiert sind. In dem Fall im fhem Eventmonitor schauen, was bei Statusänderung tatsächlich gesendet wird.

Edit: Da die Frage öfter kommt, habe ich dazu mal eine FAQ angelegt: https://github.com/knowthelist/fhem-tablet-ui/wiki/FAQ
Bitte ergänzen, korrigieren, erweitern

selfarian · 02 April 2015, 13:41:51

Ich weiß nicht, ob ich es schonmal geschrieben habe, falls doch, sorry für den Doppelpost: Ich finde das Interface absolut klasse!

Ich hätte nur einen Wunsch oder einen Verbesserungsvorschlag:
Wäre es vielleicht möglich, eine Art Meldung oder so einzubauen die irgendwie getriggert wird?
Also das z.B. bei einem Alarm eine Rote Meldung im Vordergrund eingeblendet wird o.ä.?

nesges · 02 April 2015, 14:30:59

Zitat von: selfarian am 02 April 2015, 13:41:51
Wäre es vielleicht möglich, eine Art Meldung oder so einzubauen die irgendwie getriggert wird?
Also das z.B. bei einem Alarm eine Rote Meldung im Vordergrund eingeblendet wird o.ä.?

Sowas?

Code Auswählen

<div data-type="symbol" 
    data-device="ALARM" 
    data-get="active"
    data-get-on="on"
    data-get-off="off"
    data-icon="fa-exclamation-triangle"
    data-background-icon="fa-circle"
    data-on-color="#ffffff"
    data-on-background-color="#ff0000"
    data-off-color="rgba(0,0,0,0)"
    data-off-background-color="rgba(0,0,0,0)"
    style="font-size:250px;top:20px;left:150px;position:absolute;z-index:9999;pointer-events:none;"></div>

Muss allerdings ausserhalb(!) des <div class="gridster"> notiert werden.

mw_fhem · 02 April 2015, 14:46:03

So, ein erster Schritt ist getan - ich habe einen Artikel im Wiki begonnen (http://www.fhemwiki.de/wiki/FHEM_Tablet_UI). Und hoffe natürlich darauf, dass sich einige finden, die mithlefen dieses tolle UI zu dokumentieren.

nesges · 02 April 2015, 15:03:33

Zitat von: mw_fhem am 02 April 2015, 14:46:03
So, ein erster Schritt ist getan - ich habe einen Artikel im Wiki begonnen (http://www.fhemwiki.de/wiki/FHEM_Tablet_UI). Und hoffe natürlich darauf, dass sich einige finden, die mithlefen dieses tolle UI zu dokumentieren.

Das hat sich ja schön überschnitten, hab grade unter https://github.com/knowthelist/fhem-tablet-ui/wiki/FAQ einen ersten Artikel angelegt. Wie sollen wir's machen? Von dort ins fhemwiki umziehen? Vom fhemwiki dorthin linken?

mw_fhem · 02 April 2015, 15:09:38

Nicht dass ich auf meiner Lösung bestehen würde, aber ich denke im Wiki ist es besser aufgehoben, da es dort vlt. eher gefunden wird.

bmwfan · 02 April 2015, 15:44:22

@nesges: Beides gecheckt und war bereits aktiv. Wie von Dir richtig vermutet waren es nicht die richtigen Stati, die ich abgefragt habe. Jetzt geht es.

Weis noch jemand was zu Punkt 3? Bekomme den Homestatus weder mit residents noch mit roommate angezeigt. Habe zum Test verschiedene Varianten eingegeben (auch als switch), aber keine funktioniert.

Code Auswählen

<li data-row="3" data-col="2" data-sizex="2" data-sizey="2">
    <header>ANWESENHEIT</header>
	<div data-type="homestatus" data-device="SteigStr" data-version="residents" class=""></div>
</li>
<li data-row="2" data-col="4" data-sizex="2" data-sizey="1">
	<header>ANDREAS</header>
</li>
<li data-row="3" data-col="3" data-sizex="3" data-sizey="2">
    <header>ANWESENHEIT-Test</header>
    <div class="centered container">
    <div class="left">
        <div type="homestatus" device="rr_Juergen" data-version="roommate" class=""></div>
    </div>
    <div class="left">
        <div type="symbol" device="rr_Petra" data-icon="fa-user" data-get-on="home" data-get-off="absent" data-devicetype="roommate" class="cell"></div>
        <div type="label" class="cell">Petra</div>
    </div>
    <div class="left">
        <div type="switch" device="rr_Andreas" class="cell" data-icon="fa-user" data-devicetype="PRESENCE"></div>
        <div type="label" class="cell">Andreas</div>
    </div>
    <div class="left">
        <div type="switch" device="OMW" class="cell" data-icon="fa-suitcase" data-devicetype="dummy10"></div>
        <div type="label" class="cell">OMW</div>
    </div>
    <div class="left">
        <div type="switch" device="OPT_PARTY" class="cell" data-icon="fa-glass" data-devicetype="dummy10"></div>
    </div>
</div>    </li>

Gruß Jürgen

selfarian · 02 April 2015, 16:07:23

Zitat von: nesges am 02 April 2015, 14:30:59
Sowas?

Code Auswählen Erweitern
<div data-type="symbol" data-device="ALARM" data-get="active" data-get-on="on" data-get-off="off" data-icon="fa-exclamation-triangle" data-background-icon="fa-circle" data-on-color="#ffffff" data-on-background-color="#ff0000" data-off-color="rgba(0,0,0,0)" data-off-background-color="rgba(0,0,0,0)" style="font-size:250px;top:20px;left:150px;position:absolute;z-index:9999;pointer-events:none;"></div>

Muss allerdings ausserhalb(!) des <div class="gridster"> notiert werden.

Genau! Dankeschön!

bjoernbo · 02 April 2015, 16:36:34

Freunde des gepflegten UI !

Wo liegt mein Fehler?

circlemenu.js liegt im lib Verzeichnis! entsprechender Eintrag ist in der HTML Datei eingetragen

Zitat<script type="text/javascript" src="/fhem/tablet/lib/jquery.circlemenu.js"></script>

Zitat<li data-row="2" data-col="2" data-sizex="1" data-sizey="1">
<div class="left">
<div class="cell circlemenu">
<ul class="menu">
<li><div data-type="push" data-icon="fa-wrench"></div></li>
<li><div data-type="push" data-device="AvReceiver" data-set="remoteControl subwoofer-temporary-level -6" data-icon="">-6</div></li>
<li><div data-type="push" data-device="AvReceiver" data-set="remoteControl subwoofer-temporary-level -2" data-icon="">-2</div></li>
<li><div data-type="push" data-device="AvReceiver" data-set="remoteControl subwoofer-temporary-level 0" data-icon="">0</div></li>
<li><div data-type="push" data-device="AvReceiver" data-set="remoteControl subwoofer-temporary-level +3" data-icon="">2</div></li>
<li><div data-type="push" data-device="AvReceiver" data-set="remoteControl subwoofer-temporary-level +9" data-icon="">9</div></li>
<li><div data-type="push" data-device="AvReceiver" data-set="remoteControl subwoofer-temporary-level +C" data-icon="">12</div></li>
</ul>
</div>
<div data-type="label" class="cell">woofer</div>
</div>
</li>

bjoernbo · 02 April 2015, 16:47:39

HAT SICH ERLEDIGT !!! FEHLER GEFUNDEN !!! MEIN FEHLER !!!

nesges · 02 April 2015, 16:49:33

Zitat von: bjoernbo am 02 April 2015, 16:36:34
Wo liegt mein Fehler?

Die CSS-Klassen "cell" und "circlemenu" vertragen sich nicht.

michiatlnx · 02 April 2015, 17:07:34

Hallo zusammen,

auch von mir gibt es großes Kompliment für die Arbeit, ein tolles Tablet UI.
Bisher war ich nur ein aufmerksamer Leser des Forums und Wiki.
Auch ich habe seit Januar mich mit dem FHEM Thema beschäftigt und habe mit dem HMLAN die Heizungs- und Lichtsteuerung, EM1010PC per USB für den Stromzähler, mit der Fitzbox Anrufe, verpasste Anrufe und das Gäste WLAN ein/aus, Abfallkalender und die Wetter Daten per Yahoo oder Proplant im Integriert, für die Trends habe ich das geniale widget_klimatrend eingesetzt.

Zu den Wetterdaten habe ich zusätzlich eine Art Windrose aus den Anfängen des volume widget rudimentär angepasst und dazu habe eine Frage ob ihr das widget_wind_direction.js mit den Himmelsrichtungen erweitern bzw. verschönern

und die Regel/Update-funktion herausnehmen könnt , leider fehlt mir dazu die Idee und Verständnis. Den Namen könnt ihr natürlich ändern.

Gruss Michi

bjoernbo · 02 April 2015, 17:14:57

ich muss innerhalb vom circlemenu ein js ausführen. beide beigefügten Codes funtzen nicht
die frage ist ob es generell funktionieren würde

?

Zitat<div class="left">
<div class="cell circlemenu">
<ul class="menu">
<li><div data-type="push" data-icon="fa-sliders"></div></li>
<li><a href="javascript:doCam1('command=6&onestep=7',1)"><div data-type="push" data-icon="fa-arrow-up"></a></div></li>
....

Zitat<div class="cell circlemenu">
<ul class="menu">
<li><div data-type="push" data-icon="fa-sliders"></div></li>
<li><div data-type="push" data-icon="fa-arrow-up"><a href="javascript:doCam1('command=6&onestep=7',1)"></a></div></li>
....

setstate · 02 April 2015, 17:24:18

Zitat von: bjoernbo am 02 April 2015, 17:14:57
ich muss innerhalb vom circlemenu ein js ausführen. beide beigefügten Codes funtzen nicht
die frage ist ob es generell funktionieren würde ?

Entweder den Link oder den Push button. Beiden nacheinander dürfte nicht funktionieren. In den Push ein onclick mit dem Java Script, würde ich probieren.
Sorry für meine kurzen Antworten. Ich sitze zur Zeit in der Bahn nur mit dem Telefon.