[FHEM-Tablet-UI] User-Demos
FHEM Tablet UI ist ein leichtgewichtiges aber funktionsreiches Framework zum Steuern und Überwachen von in FHEM integrierten Geräten. Ein Verständnis für HTML Code ist Voraussetzung, um sich die gewünschten Widgets zu konfigurieren. Aber mit einem Texteditor und etwas Copy&Paste ist man schnell am Ziel.
1. Sinn des Threads:
- Zeigen was mit FTUI möglich ist
- Sein eigenes UI präsentieren und anderen Usern Anregungen und Hilfe bieten.
- Niemand soll das Rad zum zweiten Mal erfinden müssen
- Neuen Usern den Einstieg mit zahlreichen Beispielen erleichtern
2. Wie kann ich anderen meine FTUI zur Verfügung stellen?
- Screenshots von den FTUI Seiten erstellen ggf. als zip/rar zusammenfassen. Bitte den Screenshots den gleichen Namen wie der passenden html geben.
- html Seiten/Code am besten als zip/rar zusammenfassen.
- BITTE auf Urheberrechtsverletzungen achten und ggf. vorher entfernen. Besonders bei Bildern/Logos über deren Rechte man nicht verfügt.
- Zip/Rar Files und Screenshots hier im Thread posten oder per Email an mich.
- Ich werde den Code und die Screenshots zusammen mit setstate sichten und allen hier und in einem gesonderten Git zur Verfügung stellen.
3. Wie kann ich den html-Code und die Screenshots Downloaden
- Aus dem FTUI-User-Demo Git
Git-Clone:
git clone https://github.com/ovibox/fhem-ftui-user-demos.git
oder unter
Projekt-URL:
https://github.com/ovibox/fhem-ftui-user-demos (https://github.com/ovibox/fhem-ftui-user-demos)
4. Welche Fragen gehören in diesen Thread?
- Alle Fragen rund um die ,,User-Demos", um den originalen Thread etwas zu entlasten.
http://forum.fhem.de/index.php/topic,34233.0.html (http://forum.fhem.de/index.php/topic,34233.0.html)
Ein paar Beispiele:
Die Idee diese Sammlung anzulegen finde ich klasse und hoffe sie wird rege genutzt um die vielen tollen Anwenderbeispiele, die wir gesehen haben, einzusammeln. Daumen hoch! :)
@Phil__
Ich habe mal in meiner Testumgebung Deine User-Demo installiert. Leider lädt er die Icons in den includierten html Files nicht mit. Hast Du da eine Idee wieso das so ist? Kann es sein das die ganze Body geschichte aus der index.html nicht mit übergeben wird?
Grüße
Leon
Welche icons meinst du genau? Die auf der index.HTML?
Die verschiedenen Menü htmls hast du und die openautomation fonds in der index.HTML eingebunden?
Hast du einen Screenshot?
Ich habe wie gesagt Deine html Files 1 zu 1 übernommen. die Icons aus der index werden angezeigt, aber nicht die aus den menu html files. Zum Beispiel wird das Icon aus Home nicht angezeigt.
Die Menü HTMLs waren ja eingebunden und auch die openautomation.css ist ja eingebunden. Also wohl gemerkt in der index.html
Ist dein FTUI auf dem neusten Stand? Ist in deiner Testumgebung die include Funktionalität schon vorhanden?
Die *.html Files, die keine Links zu den CSS und JS Files im Header haben, können nicht direkt aufgerufen werden. Das funktioniert nur über das pagetab Widget.
Also die Index.html aufrufen und dann per Menü zu den Unterseiten manövrieren.
@Phil__
Ist auf den neusten Stand. Stand von heute Morgen. Die Include Funktionalität habe ich nicht expliziert konfiguriert. Was muß man da machen? Was genau muß ich machen das das mit dem Include sauber geht?
@setstate
Ich rude nicht die Menu HTMLs direkt auf sondern habe schon das Ansichtsproblem wenn ich die index.html aufrufe. Das Problem betrifft aber nur icons welche in includierten html files aufgerufen werden.
@CoolTux
Bei den includes musst du nichts explizit konfigurieren. Wenn du eine Aktuelle FTUI Umgebung hast und meine htmls genau so verwendet weiss ich auch gerade nicht weiter. Evtl. mal das Verzeichnis .../tablet/. löschen und alle Files neu aus setstates git laden. Darauf achten das alle, in meiner index.HTML includierten HTML files auch vorhanden sind. Evtl auf Datei Zugriffsrechte achten?!
@setstate
Fällt dir noch was ein? Denn grundsätzlich läuft das bei mir genau so ohne Probleme.
Habe mir gerade eine zweite Testumgebung geschaffen, da läuft es.
Werde ich mal sofort so machen. Alle Files sind ja nicht da. Habe auch die Index schon mal nur auf das Home gekürzt, hat auch nichts gebracht.
Ich danke Euch, manchmal ist es doch einfacher wie gedacht. Es waren natürlich die zusätzlichen Widgets von nesges nötig.
Soooo Peinlich :-\
Meine Updates sind jetzt im Git, inkl des neuen Abfallkalenders von gestern!
@ALLE
Schickt mir oder Postet hier eure UIs (Screenshots und html)!
Das Projekt lebt vom GEBEN und NEHMEN!
Viele Grüße
Philipp
So, hier nun meine User-Demo, noch im Anfangsstadium und Ausbaufähig.
Hi Phil___
danke für dein Interface ... hat mich schon gut weiter gebracht :)
Sag mal die 5. Seite von oben, ist dir da bei der Beschriftung ein Fehler unterlaufen. Dort steht index.png aber das passt mit dem index.html Code nicht :)
Gruß Thomas
Zitat von: update71 am 24 Mai 2015, 23:16:51
Hi Phil___
danke für dein Interface ... hat mich schon gut weiter gebracht :)
Sag mal die 5. Seite von oben, ist dir da bei der Beschriftung ein Fehler unterlaufen. Dort steht index.png aber das passt mit dem index.html Code nicht :)
Gruß Thomas
Die angehängten Screenshots sind von nesges und meiner Demo. Nr 5 scheint dann von nesges zu sein.
mein aktueller Stand 8) 8)
Gruß Rolf
Nachdem ich freundlich gebeten wurde, will ich hier auch beitragen. Ich stehe allerdings immer noch ziemlich am Anfang, denn ich habe FHEM ja erst im Februar installiert ...
Ein paar Screenshot und ein Zip mit Dateien (auch Extrawidgets und css/js Dateien) sind angefügt.
Mein "home screen" mit Überblick über alle wichtigen Einstellungen:
(http://forum.fhem.de/index.php?action=dlattach;topic=37378.0;attach=32505;image)
(http://forum.fhem.de/index.php?action=dlattach;topic=37378.0;attach=32504;image)
Stellvertretend für alle anderen Detailscreens zu den einzelnen Stockwerken der Keller mit ausgeklapptem circlemenu:
(http://forum.fhem.de/index.php?action=dlattach;topic=37378.0;attach=32507;image)
(http://forum.fhem.de/index.php?action=dlattach;topic=37378.0;attach=32506;image)
Noch nicht schön aber ein sehr einfaches Recycling:
Eine Seite mit readingGroups aus dem FHEMWEB --> dazu gibt es auch ein Extra-Widget
(http://forum.fhem.de/index.php?action=dlattach;topic=37378.0;attach=32509;image)
(http://forum.fhem.de/index.php?action=dlattach;topic=37378.0;attach=32508;image)
Ein weiteres Recycling sind Plots, das entsprechende Widget habe ich noch nicht fertig, deshalb hier noch die direkte HTML-Version:
(http://forum.fhem.de/index.php?action=dlattach;topic=37378.0;attach=32511;image)
(http://forum.fhem.de/index.php?action=dlattach;topic=37378.0;attach=32510;image)
Mein Google-Kalender ist direkt und nicht über das iframe-Widget eingebunden:
(http://forum.fhem.de/index.php?action=dlattach;topic=37378.0;attach=32513;image)
(http://forum.fhem.de/index.php?action=dlattach;topic=37378.0;attach=32512;image)
Zum Abschluss noch eine Seite für die SONOS-Steuerung:
(http://forum.fhem.de/index.php?action=dlattach;topic=37378.0;attach=32515;image)
(http://forum.fhem.de/index.php?action=dlattach;topic=37378.0;attach=32514;image)
Gruss,
Johannes
Nach der freundliche Bitte, auch von mit der aktuelle Stand (eher unspektakulär)
Risiko.
@Risiko
Kannst du den Fhem Code für die Bahn-Abfahrtszeiten hier nochmal Posten?
grüße
Siehe hier: http://forum.fhem.de/index.php/topic,36057.msg283746.html#msg283746
Risiko
Zitat von: Risiko am 25 Mai 2015, 15:28:01
Siehe hier: http://forum.fhem.de/index.php/topic,36057.msg283746.html#msg283746
Risiko
Super, danke!
Ich hätte aber noch eine Frage?
Ich beziehe meine Wetterdaten mit dem Weather Modul aus Fhem.
Wie beziehst du die Wetterdaten für "früh", "mittag", "abend", "nacht"??
Zitat von: Phil__ am 25 Mai 2015, 17:28:10
Super, danke!
Ich hätte aber noch eine Frage?
Ich beziehe meine Wetterdaten mit dem Weather Modul aus Fhem.
Wie beziehst du die Wetterdaten für "früh", "mittag", "abend", "nacht"??
OK, hat sich erledigt. Du nutzt bestimmt das Proplanta Modul...
Zitat von: Phil__ am 25 Mai 2015, 18:37:25
OK, hat sich erledigt. Du nutzt bestimmt das Proplanta Modul...
Genau. :)
Zitat von: Phil__ am 25 Mai 2015, 08:57:55
Die angehängten Screenshots sind von nesges und meiner Demo. Nr 5 scheint dann von nesges zu sein.
Wäre vielleicht sinnvoll diese ein wenig zu trennen. Sonst sucht man sich n dusseligen wenn man etwas nachbauen will :-)
So, jetzt kann ich auch Mal meinen Zwischenstand präsentieren. Derzeit funktionieren zwar noch nicht alle Seiten, aber ist wohl wie bei allen: Work in progress ;-)
Ich hab es bewusst schlicht(er) gehalten, da es mir weniger um "totale Kontrolle", als vielmehr um eine Art Info-Display geht.
@tomster
Hallo, ich sehe gerade, dass du einen Briefkasten im Angebot hast ;-)
Kannst du mal was sagen zur eingesetzten Hardware?
Die Umsetzung steht auch noch auf meiner Liste.
Servus mc-hollin,
derzeit läuft die ganze Geschichte noch ziemlich simpel mit einem Micro-Schalter an der Briefkastenklappe, der einen HM-Pushbutton-Sender aktiviert. Dieser triggert einen Dummy. Wird dann zum Rausholen der Post das Briefkastentürchen innen an der Säule geöffnet, setzt das den dummy wieder auf "off".
Geplant ist allerdings künftig der Einsatz eines optischen Türöffnungssensors. Wenn ELV nicht so katastrophale Lieferzeiten hätte, wär's wahrscheinlich schon eingebaut und ich damit fleißig am Probieren...
Zitat von: Risiko am 25 Mai 2015, 15:12:54
Nach der freundliche Bitte, auch von mit der aktuelle Stand (eher unspektakulär)
Risiko.
Hi Risiko,
Wie bekommst du das Wetter für einen Tag so angezeigt?
Hi no_Legend,
findet man doch alles in der main.html.
Verwende PROPLANTA als Wettermodul und zusätzlich noch html-tables.
Bitte die Frage ggf. konkretisieren.
Risiko.
@Phil__;
tolle Idee der Thread !
Zitat von: harry66 am 25 Mai 2015, 09:14:39
mein aktueller Stand 8) 8)
Gruß Rolf
Sehr Cool!
Stellst du es vielleicht zur verfügung?:)
Das Beste, das ich bis jetzt gesehen habe!
Ist doch alles in der angehängten ...zip datei
Nun kann ich auch nicht mehr länger an mich halten. Ich bin zwar noch lange nicht fertig aber hier mal ein erster Vorgeschmack!
Zitat von: harry66 am 08 Juli 2015, 13:43:21
Ist doch alles in der angehängten ...zip datei
oh.
Habe ich wohl übersehen! :o
Danke.
@CoolTux
Auch sehr geil.
Poste auch die Tage mal mein Ergebnis.
Hallo, es scheint ein Problem mit dem Server zu geben. Ich kann die ganzen Screenshots nicht öffnen. Bin ich alleine mit dem Problem?
Alles da !
kvo1
jetzt geht es. War wohl nur ein temporäres Problem.
Zitat von: CoolTux am 08 Juli 2015, 13:52:09
Nun kann ich auch nicht mehr länger an mich halten. Ich bin zwar noch lange nicht fertig aber hier mal ein erster Vorgeschmack!
wow.
Kannst du da mal alle Files in eine Zip packen?
MfG
Hi,
Ich hoffe es geht auch tar.bz2. Zip ist bisschen umständlich bei mir. Ginge aber auf Wunsch auch. Also erstmal hier tar.bz2
Achtung ich habe extrem weiter gebaut. Viele neue Devices und nun auch pagetab hinzu.
So mal ein paar neue Bilder von mir.
Danke ;) Passt^^
anbei meine tui. es gab eine anfrage, evtl können auch andere etwas damit anfangen
darin enthalten sind auch 2 nicht ganz fertige widgets. so wie sie definiert sind laufen sie aber schon
1. calcview widget zeigt termine deiner calciew instanz.
<div data-type="calview" data-device="View_All" data-get="all" data-max="7" class="cell"></div>
data-device = name der calview
data-max = summe der anzuzeigenden termine, ist es nicht definiert (es sollte max der wert der auch in der view gezeigt wird genommen werden da sonst null werte). ohne wert wird 100 genommen
data-get
"all" für alle termine (es werden noch today/tomorrow als möglichkeit folgen)
"STATE" für den status
2. gds widget welches alerts ausliest und diese dann in form von farbigem text zeigt (ornage, passend zu meinem design)
<div data-type="gds" data-device="gdswetter" data-get="alert" data-max="5" class="cell"></div>
data-device => gds device name
data-get
alert" - alarmmeldungen - bei 0 alarmen wird ein text ausgegeben der besagt das es keine meldungen gibt
"warn" - warnungen folgen noch
"STATE" - zeigt den status
"g" - wetterdaten folgen noch
data-max = anzahl der max warnungen die gezeigt werdne sollen
anbei ein verbessertes gds-widget
- bei warnungen wurden glegentlich zusätzlich noch "Aktuell keine Wetterwarnungen des DWD" angezeigt, dies wurde korrigiert
- um den text etwas schöner zu gestallten wird nun das "amtliche " rausgefiltert (aus "Amtliche WARNUNG vor STARKEM GEWITTER" wird nun "WARNUNG vor STARKEM GEWITTER"
ps: hier gehts heute gut ab^^ laut warnmeldungen
Wow. Schau ich mir heute Nacht mal an.
Gesendet von meinem Z30 mit Tapatalk
Hallo chris1284,
ich hab mal versucht dein "gds widget" einzubauen, leider werden mir keine alarmmeldungen angezeigt ???
Hast du eine Idee woran dies liegen kann?
<header>Deutscher Wetterdinst</header>
<div data-type="gds" data-device="GDS" data-get="alert" data-max="5" class="cell"></div>
<div data-type="gds" data-device="GDS" data-get="warn" data-max="5" class="cell"></div>
<div data-type="gds" data-device="GDS" data-get="STATE" data-max="5" class="cell"></div>
<div data-type="gds" data-device="GDS" data-get="g" data-max="5" class="cell"></div>
Zitat von: harry66 am 27 Juli 2015, 15:17:52
ich hab mal versucht dein "gds widget" einzubauen, leider werden mir keine alarmmeldungen angezeigt ???
Ich habe dasselbe Problem bei mir,
Johannes
"Aktuell keine Wetterwarnungen des DWD" wird ausgegeben wenn dein gds modul keine alert-readings hat (die readings a_0, a_1 usw )
werden die auch nicht bei neuladen der seite angezeigt?
auch ein neuladen hat die gleiche Ausgabe zur folge (mehrfach versucht ;)) das readings a_0 ist da und war gültig
ich habe heute etwas zeit gehabt um die funktionen zu überarbeiten. gefühlt laden nun beide widgets schneller und beim gds kommt sofort die meldung (hatt das problem dann doch auch selbst).
wer will kann testen
beim calview widget gabe noch eine änderung:
data-get="tomorrow" ersetzt data-get="c-tomorrow"
data-get="today" ersetzt data-get="c-today"
Hallo Chris,
ich habe soeben Dein Update widget_gds geladen. Trotzdem gibt es keine Warnung.
<header>AMTLICHE WETTERWARNUNG</header>
<div data-type="gds"
data-device="gdswetter"
data-get="alert"
data-max="5"
class="cell big"
</div>
Wobei gdswetter definiert ist
Grüße,
Ben
hast du nach dem ersetzen des widget mal den brwosercache gelöscht? ich habe bei der ui oft das verhalten das man widgets ändert und die erst danach (auch ein strg+f5 bringt nichts) richtig neu geladen wurden
hatte ich noch nicht, hat leider nichts gebracht. Wetterwarnungen sind vorhanden.
da ich es nicht nachvollziehen kann habe ich die widgets entfernt und werde sie nur für mich nutzen.
ich werde mich noch man setstate oder nesges wenden, evtl haben die eine idee
anbei mal ein versuch einen floorplan in der tui abzubilden.
paint sei dank habe ich ein hintergrundbild der wohnung "gemalt" und nur einen goßen, transparenten grid drüber gelegt. in diesem dann div's mit absoluter position eingesetzt, in welche dann die elemte kommen. so kann man sicher auch ein schönes lcars-design mit der tui verbinden ;)
als anregung für bastler ;D
Hi chris1284,
keine schlecht ;)
(und schön kühl ist es obendrein bei Dir ... oder ist das die Wunshtemperatur ;))
klaus
das sind dummys in einer testinstanz ;)
mit nem fp-bild von weethome3d kann das sicher richtig gut aussehen
Hallo Harry66.
Wo kommte den das "Sofa" Symbol (rk-sofa) her? Habe es leider nicht finden können.
Grüße Frank
unter http://www.fhemwiki.de/wiki/FHEM_Tablet_UI/FAQ#Wie_kann_ich_eigene_Icons_verwenden.3F (http://www.fhemwiki.de/wiki/FHEM_Tablet_UI/FAQ#Wie_kann_ich_eigene_Icons_verwenden.3F) ist eine Anleitung zum erstellen eigener Iconfonts
Gruß Rolf
Phil, wenn ich Deine index.html von hier herunterlade, ist dort nicht der erwartete Code für Deine Index-Seite laut Screenshot drin:
https://github.com/ovibox/fhem-ftui-user-demos/blob/master/user-demos/Phil__/html/index.html (https://github.com/ovibox/fhem-ftui-user-demos/blob/master/user-demos/Phil__/html/index.html)
Stehe ich auf dem Schlauch?
EDIT: Wenn ich die Datei online anschaue, steht dort auch etwas vernünftiges drin. Ist runterladen nicht möglich?
Rechtsklick auf die Dateien und "speichern unter" liefert mir Dateiinhalte, die nichts mit der Oberfläche zu tun haben. Ich möchte ungerne alle Inhalte händisch kopieren um zu starten.
EDIT2: Lösung: unten rechts gibt es auf der Seite eine ZIP-Datei zum runterladen. Nur falls sich noch jemand so dusselig anstellt wich ich es getan habe...
Zitat von: Phil__ am 25 Mai 2015, 17:28:10
Ich beziehe meine Wetterdaten mit dem Weather Modul aus Fhem.
Ich habe mir das Weathermodul in FHEM installiert. Es liefert mir Readings.
Leider bekomme ich in FHEM Tablet UI ab und an mal die Informationen wie auf Phils Wetterseite angezeigt. I.d.R. ist die Seite aber leider nicht gefüllt.
Komischerweise klappt es jetzt nach einiger Zeit.
Meine Fragen dazu:
1.) Wo bekomme ich die Ozon-Werte her?
Code aus der html:
<li data-row="3" data-col="5" data-sizex="1" data-sizey="1">
<header>Ozon</header>
<div class="centered">
<div data-type="label"
data-device="UVOZON"
data-get="Ozon"
data-unit=" µg/m3"
data-limits='[0,110,180,200,360]'
data-colors='["#aa6900","yellow","orange","red","fuchsia"]'
class="big"></div>
<div data-type="label" data-device="UVOZON" data-get="OzonDesc" style="margin-top:20px" class="narrow small"></div>
</div>
</li>2.) Wo bekomme ich die UV Werte her?
Code in der html:
<li data-row="2" data-col="6" data-sizex="1" data-sizey="1">
<header>UV</header>
<div class="centered">
<div data-type="label"
data-device="UVOZON"
data-get="UV"
data-unit=" min"
data-limits='[0,29,59,119,239]'
data-colors='["fuchsia","red","orange","#aa6900", "white"]'
class="big"></div>
<div data-type="label" data-device="UVOZON" data-get="UVDesc" style="margin-top:20px;width:100px;height:100px;white-space:normal" class="narrow small"></div>
</div>
</li>3.) Sonnenaufgang und Sonnenuntergang: Wo bekomme ich die Werte her
Code dazu in der html:
<li data-row="3" data-col="6" data-sizex="1" data-sizey="1">
<header>Sonne A/U</header>
<div data-type="label" class="darker small">Sonnenaufgang</div>
<span style="color:#aa6900"><div data-type="label"
data-device="Sonnenaufgang"
data-colors="orange"></div></span>
<div data-type="label" class="darker small">Sonnenuntergang</div>
<span style="color:#aa6900"><div data-type="label"
data-device="Sonnenuntergang"
data-colors="orange"></div></span>
</li>4.) Es gibt eine Vorhersage.html.
Was soll hier eigentlich angezeigt werden?
Das html-coding:
<li data-row="2" data-col="2" data-sizex="5" data-sizey="4">
<header>DWD Wetterkarte</header>
<!-- von wetter.info generierter Code //-->
<div class="wetterinfo" style="background-color:transparent;">
<div id="BigCity_2" class="Day"><a href="http://www.wetter.info/wetter-deutschland/hessen/wetter-langen/17753456" target="_blank">Langen (Hessen)</a></div>
<div id="wetterinfo_data_2">
</div>
<script language="javascript" src="http://wiga.t-online.de/wetter/webgadget_v2/getWetterinfoTemplate.php?uni=K06438006&sView=Big&Region=Germany&sFormat=HTML&sSearch=false&Box=2"></script>
<div class="BigWetterLogo"><a target="_blank" href="http://www.wetter.info"><img alt="Wetter" title="Wetter" height="18px" width="94px" id="wetterLogoBild" src="http://wiga.t-online.de/wetter/webgadget_v2/images/wetter_info.gif"/></a></div>
</div>
<!-- von wetter.info generierter Code Ende//-->
</li>
Hallo, als Newbie blicke ich hier einfach nicht mehr durch und habe schon an zu vielen Stellen rumgespielt. Also würde ich die FTUI gern neu aufbauen. Als Vorlage würde ich gern die Userdemo von nesges aus dem github nutzen. Bekomme die allerdings nicht zu laufen. Ich erhalte immer nur eine weiße Seite mit den paar definierten Labels aber keinen Grafiken. Hat jemand nesges' userdemo zum laufen bekommen und kann mir hier weiterhelfen?
Beste Grüße
O.
Hallo zusammen,
habe die Tablet UI nun auch für mich entdeckt und baue mir gerade fleissig meine UI zusammen. Daher eine kurze Frage:
@Phil___/nesges: Wie habt Ihr den schicken Plot von der ersten Seite hinbekommen? Ich hab da mal in die Küchen-HTML geschaut, aber da wird wohl
per iframe auf externe plots verlinkt (/plot/?p=...)? Ist das eine Erweiterung, die ich verpasst habe? Kleiner Tipp wäre prima - Rest bekomme ich dann schon hin.
Cheers,
h3ll
---------------------------------------------------------------------------------------------------------------------------------------------
Hat sich erledigt - werde mich also selbst an dygraphs rannmachen ....
Hallo, Ich wollte mich bei meinem ersten Post im Forum mit ein paar Bilder beteiligen. Ich habe auf vielen Screens die Plots und Diagramme gesehen und da ich daheim auch ein paar Auswertung darstellen wollte und ich mit den vorhandenen Lösung optisch nicht zu frieden war hab ich widgets basierend auf der Highcharts-API erstellt.
Ziel ist es alle sinnvollen Diagramme der Highcharts-API via Widget zur Verfügung zustellen. Die sind optisch sowie technisch gut anpassbar und halt modern ::)
WetterUI zeigt mir das Wetter mit Forecast der nächsten Stunden und Tage. Das Große Diagramm wird direkt erzeugt und nicht als Bild eingebunden. Das war mir wichtig, da in den Popups mehr Infos drinnen sind. Das andere sind Beispiele für die Darstellung in Popups und 3D-Charts.
Hier also mal ein paar Screens für den Anfang.
Willkommen blackbluegl
Wunderbar deine Charts. Gefällt mir sehr
Verstehe ich das richtig, du hast schon ein FTUI Widget gebaut für die Chart API Einbindung?
Wenn ja, dann wollen wir das natürlich alle haben !!!
Bitte Code an mich senden oder einen Pullrequest im Github anlegen ;D
Danke
Ja ich hab für Area und Line-Chart ein Widget, das auch mehrere Graphen in ein Diagramm darstellt (z.B. Speicher min/max/avg). Wie im Screen halt. Dann das 3D Balkendiagramm bottom-Up. Fand ich halt neckisch für Zustände wie Tor offen und Zu.
Dann hab ich die Screens mit der Wettervorhersage bei einigen gesehen und dachte, das kannste doch irgendwoher und siehe da :-) Also den ganzen Sourcecode in eine Lib und ein widget gebaut, und es geht.
Ich bin noch recht frisch unterwegs mit FHem und dem Tablet-UI.
Hallo zusammen,
da hier die Sprache auf charts gekommen ist, möchte ich auch mal etwas zu dem Thema beitragen. Ich habe einen etwas anderen Ansatz gewählt, und ein chart widget gebaut, welches möglichst ohne weitere Bibliotheken auskommt (ich hatte am Anfang auch mal geschaut, was es da so gibt, aber nichts gefunden, was mir richtig gefallen hat und nicht irgendwann an Grenzen gestoßen ist, bin aber auch nicht sehr tief eingestiegen) und das in weiten Teilen konfiguriert und angepasst werden kann.
Das widget kann im Prinzip alles das was die FHEM plots auch können mit einigen Ergänzungen und auch (noch) einigen Einschränkungen. Eine kurze Liste der wichtigsten Punkte:
- Es können mehrere Graphen in ein Chart gepackt werden (Steuerung geht über Arrays für Logfile etc. (siehe data-logfile von simplechart aber eben als array (Beispiel HTML file erklärt es denke ich))
- Es kann eine primäre und eine sekundäre Achse definiert werden
- Für jeden Graph kann über css styles definiert werden, wie er aussehen soll, in der html Dateil muss man dann nur den style für jeden Graphen setzen
- Die Achsen können automatisch nach Dateninhalt beschriftet werden
- Auch Symbole für die Datenpunkte sind möglich, es können alle font awesome, FHEM und open automation icons als symbole verwendet werden
- Es kann eine Legende eingeblendet werden, dort wird durch einen Klick auf die Einträge ein einzelner Graph ab oder angeschaltet
- Es kann gezoomt und gescrollt werden
- Es gibt einen Cursor, der Die Daten der Graphen als Text anzeigt
- Für den Cursor und das Scrollen/Zoomen können mehrere Charts gekoppelt werden, die scrollen/zoomen dann gemeinsam, wenn eines geschoben oder gezoomt wird
- ... (weitere Details in der Beschreibung (unten angehängt, als html damit fürs Wiki nutzbar))
Als Basis hatte ich mal mit dem simplechart angefangen, daher gibt es einige Parameter, die gleich sind (Beispiel template Datei ist auch angefügt). Eine Beschreibung, des Ganzen, die auch direkt ins Wiki eingefügt werden kann, habe ich unten angehängt, und das js file auch. Damit das Ganze richtig gut aussieht, sollten einige css styles definiert sein, ich habe das bisher über das fhem-tablet-user.css file gemacht, und dieses auch angehängt. Hierüber kann der Nutzer auch recht weitreichende Anpassungen des Aussehens machen (Fonts für die Achsen, Farben, Styles für die Graphen selbst). Damit das mit den Symbolen funktioniert, müssen die folgenden zwei Zeilen:
<!-- USER CSS Dateien -->
<!-- ---------------- -->
<link rel="stylesheet" href="/fhem/tablet/lib/openautomation.css"/>
<link rel="stylesheet" href="/fhem/tablet/lib/fhemSVG.css"/>
in die index.html Datei (unter "User CSS Dateien" im angehängten Beispiel) hinzugefügt werden.
Ich habe auch einige Beispielbilder, die ich mit der Demo FHEM gemacht habe angefügt. Ich habe zwar eine ganze Menge getestet, bin mir aber sicher, dass es noch ein paar Problemchen geben wird also fleißig testen und Feedback geben.
Sieht auch vielversprechend aus. Vor allem wenn man keine Fremd-Libs haben möchte. ;D
Da hast aber ordentlich Tipparbeit reingesteckt, mein lieber mann.
Zum Thema Highcharts muss ich sagen, das ich die halt schon ne ganze Weile für andere Sachen einsetze. Da sind ein paar schöne Sachen bei. Das gute ist, solang das hier keiner kommerziell einsetzen will, die API auch kostenlos verwendet werden kann. (CC3)
Wow, voll die Profies hier am Start
Sehr schön, dass ihr die Sachen hier shared
Ich würde mir das ansehen und dann gerne im FTUI Respository bei github einchecken, damit alle es bekommen?!
Oder wollt ihr es selbst irgendwo hosten?
Meine Change-Request auf GIT-Hub haste vorhin bekommen :-) glaube ich zu mindest...
Von Profi kann leider keine Rede sein ;).
Für mich wäre es OK, wenn Du das ins FTUI repository eincheckst. Vielleicht kannst Du mir dann noch mal kurz erklären, was ich tun muss, um dort Änderungen machen zu können (ich will das Ding ja auch reparieren/erweitern können).
Dann mache einen Fork vom Hauprepository, checke deine Änderungen bei dir ein und schicke ein Pullrequest upstream. Dann überprüfe ich die Änderungen und publiziere es
Je weniger externe Libs benutzt werden und je weniger Files installiert werden, umso lieber ist es mir
Hallo Eki,
hab gleich mal dein Graph ausprobiert... leider zeigt es bei mir nichts an und ich finde keine Fehler...
die widget_chart.js habe ich in die /opt/fhem/www/tablet/js kopiert.
dann mein HTML Code
<div class="normal"
data-type="chart"
data-logdevice="FileLog_WZ_Thermostat"
data-logfile="WZ_Thermostat-2015-10.log"
data-columnspec='["4:WZ_Thermostat_desiredTemperature:1:int","4:WZ_Thermostat_temperature:1:int","4:WZ_Thermostat_valveposition:1:int"]'
data-style='["ftui l0fill","ftui l0dot","ftui l2dash"]'
data-ptype='["lines","lines","lines"]'
data-uaxis='["primary","primary","secondary"]'
data-legend='["Dewpoint AgroWeather", "Temperature Garden", "Dewpoint Garden", "Humidity"]'
data-yunit="°C"
data-ytext="Temperature"
data-minvalue="auto"
data-maxvalue="auto"
data-yunit_sec="%"
data-ytext_sec="Percentage"
data-yticks="auto"
data-minvalue_sec="0"
data-maxvalue_sec="100"
data-daysago_start="0"
data-daysago_end="-1"
data-crosshair="true"
data-cursorgroup="1"
data-scrollgroup="1"
data-showlegend="true"
data-xticks="auto">
</div>
Würde gerne aus dem device "FileLog_WZ_Thermostat" und dem Logfile "WZ_Thermostat-2015-10.log" die Werte desiredTemperature, Termperatur und ValvePosition in einem Chart zeigen lassen ....
Grüße Steffen
Hallo Steffen,
was mir an Deinem HTML Code auffällt, ist, dass die arrays nicht zueinander passende Längen haben. Du musst auch für das data-logdevice ein array mit 3 Werten angeben (in dem Fall dann eben 3 mal das gleiche Logdevice aus der Länge des arrays ermittelt das Script wieviele Graphen es malen soll). Den Logfile Eintrag kannst Du auch weglassen, dann wird das aktuelle Logfile zu einem Device verwendet.
Du koenntest mal ein Stueck aus Deinem Logfile und die Definition des Logdevice aus der fhem.cfg posten.
Wird denn überhaupt etwas gemalt (also z.B. die Achsen, die Buttons). Bei mir sieht ein ähnliches chart so aus wie im angehängten Bild.
Hallo Eki,
aber klar doch.
also HTML Code habe ich nun so geändert
<div class="normal"
data-type="chart"
data-logdevice='["FileLog_WZ_Thermostat";"FileLog_WZ_Thermostat";"FileLog_WZ_Thermostat"]'
data-logfile="WZ_Thermostat-2015-10.log"
data-columnspec='["4:WZ_Thermostat_desiredTemperature:1:int","4:WZ_Thermostat_temperature:1:int","4:WZ_Thermostat_valveposition:1:int"]'
data-style='["ftui l0fill","ftui l0dot","ftui l2dash"]'
data-ptype='["lines","lines","lines"]'
data-uaxis='["primary","primary","secondary"]'
data-legend='["Termperatur Soll", "Temperature Ist", "Ventil"]'
data-yunit="°C"
data-ytext="Temperature"
data-minvalue="auto"
data-maxvalue="auto"
data-yunit_sec="%"
data-ytext_sec="Percentage"
data-yticks="auto"
data-minvalue_sec="0"
data-maxvalue_sec="100"
data-daysago_start="0"
data-daysago_end="-1"
data-crosshair="true"
data-cursorgroup="1"
data-scrollgroup="1"
data-showlegend="true"
data-xticks="auto">
</div>
Meine Logs in der fhem.cfg
define WZ_Thermostat MAX HeatingThermostat XXXXX
attr WZ_Thermostat IODev ml
attr WZ_Thermostat room MAX
attr WZ_Thermostat scanTemp 1
attr WZ_Thermostat userReadings onlyAutoMode { return "1";;}
define FileLog_WZ_Thermostat FileLog ./log/WZ_Thermostat-%Y-%m.log WZ_Thermostat
attr FileLog_WZ_Thermostat logtype text
attr FileLog_WZ_Thermostat room 9.90_Logs
Logfile
2015-10-30_19:44:30 WZ_Thermostat mode: auto
2015-10-30_19:44:30 WZ_Thermostat battery: ok
2015-10-30_19:44:30 WZ_Thermostat desiredTemperature: 19.0
2015-10-30_19:44:30 WZ_Thermostat temperature: 19.3
2015-10-30_19:44:30 WZ_Thermostat valveposition: 40
2015-10-30_19:44:30 WZ_Thermostat 19.0 °C
2015-10-30_19:44:30 WZ_Thermostat onlyAutoMode: 1
2015-10-30_19:44:30 WZ_Thermostat onlyAutoMode: 1
2015-10-30_19:44:30 WZ_Thermostat MAXLAN_initialized: 1
2015-10-30_19:44:30 WZ_Thermostat MAXLAN_error: 0
2015-10-30_19:44:30 WZ_Thermostat MAXLAN_errorInCommand:
2015-10-30_19:44:30 WZ_Thermostat MAXLAN_valid: 1
2015-10-30_19:44:30 WZ_Thermostat MAXLAN_isAnswer: 0
2015-10-30_19:44:30 WZ_Thermostat onlyAutoMode: 1
2015-10-30_19:44:30 WZ_Thermostat onlyAutoMode: 1
Probier mal in der Columnspec die _ durch . zu ersetzen, soweit ich das sehe, sucht er sich ansonsten ins Leere also Z.B. "4:WZ_Thermostat.desireTemperature:1:int"
data-columnspec='["4:WZ_Thermostat.desiredTemperature:1:int","4:WZ_Thermostat.temperature:1:int","4:WZ_Thermostat.valveposition:1:int"]'
zeigt immer noch nichts an
in dem Array für data-logdevice sind die elemente durch ; getrennt statt durch ,
; durch , ersetzt geht immer noch nicht...
Welchen Browser benutzt Du? Kannst Du die Seite mal auf einem Desktop Browser aufrufen und schauen ob es auf der Konsole irgendwelche Meldungen gibt?
Sorry - kurze Zwischenfrage, bei mir funzt es auch nicht - allerdings kann's auch am DbLog liegen. Wird das eigentlich unterstützt?
Ich frage, da ich auch im simplechart nichts zu sehen bekomme.
Cheers,
h3ll
Ich benutze chrome, aber bekomme auch per Tablet oder Smartphone (beides Android) nichts zu sehen.
Im log seh ich nix was nach ne Fehler aussieht....
Konsole auch nix
Gesendet von meinem GT-I9295 mit Tapatalk
Ich meinte die Konsole vom Browser (rechte Maustaste und dann 'Inspect element'
Bezüglich dblog glaube ich nicht dass es aktuell geht, das Chart Widget benutzt genauso wie das simplechart den Get Filelog per Http. Ich kann mich aber mal versuchen schlau zu machen ob das auch irgendwie geht
Hallo eki,
danke für den Tipp - hab' mir den Requestaufbau angeschaut - damit hab' ich dann schon mal den Request für DbLog hinbekommen.
Ist also keine Anpassung nötig, wenn man weiß was wohin kommt ;)
Jetzt schau ich mir noch mal Chart an - schmeißt bei mir:
Uncaught TypeError: $(...).data(...).join is not a function - ganz am Ende im widget_chart.js
Cheers,
h3ll
Der Fehler mit Join kommt, weil du vermutlich kein Array übergibst, wo eins erwartet wird und die Funktion das vorher nicht abfragt und entsprechend reagiert.
Ich glaube die ersten 4-5 data-* Parameter müssen als Array angegeben werden.
Hi setstate,
danke - korrekt - das war's. Dann kommt der nächste Fehler bei mir - Daten werden abgeholt und ich bin beim nächsten TypeError:
Uncaught TypeError: legend_container.find(...).draggable is not a function
legend_container.find('rect.lback') // add drag functionality for legend container
.draggable()
Wenn ich die Line 1038 (.draggable()) auskommentiere, dann wird alles angezeigt, das war aber wohl nicht der Plan :)
Cheers,
h3ll
Schick mir mal die js Datei, dann scha ochs mir heute Abend mal an.
Hallo eki, ich check das heute abend nochmal und geb dir Bescheid was inspect Element hergibt.
Gesendet von meinem GT-I9295 mit Tapatalk
Hallo Eki,
als bei Element Untersuchen bekomme ich folgendes, hilft dir das weiter?
Hi,
also ich hab's bei mir lösen können - es fehlt das jquery-ui.min.js - habe ich jetzt eingebunden. Läuft fehlerfrei :)
@xxsteffenxx: Sah bei mir ähnlich aus.
Cheers,
h3ll
Zitat von: h3llsp4wn am 01 November 2015, 18:21:25
Hi,
also ich hab's bei mir lösen können - es fehlt das jquery-ui.min.js - habe ich jetzt eingebunden. Läuft fehlerfrei :)
@xxsteffenxx: Sah bei mir ähnlich aus.
Cheers,
h3ll
Hallo h3ll,
wo und wie hast du diese eingebunden??
Steffen
Das sollte in die HTML Datei, die im Hauptverzeichns des Tablet Ordners steht und typischerweise Index.html heißt. Wie es aussehen sollte, kannst Du an den bereits enthaltenen Einträgen sehen.
So sieht meine index.html aus
<link rel="stylesheet" href="/fhem/tablet/lib/jquery.gridster.min.css" />
<link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/font-awesome.min.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/jquery.toast.min.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/powerange.min.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/openautomation.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/fhemSVG.css" />
[b] <link rel="stylesheet" href="/fhem/tablet/lib/jquery-ui.min.css" />[/b]
<script type="text/javascript" src="/fhem/pgm2/jquery.min.js"></script>
<script type="text/javascript" src="/fhem/tablet/lib/jquery.knob.mod.min.js"></script>
<script type="text/javascript" src="/fhem/tablet/lib/jquery.toast.min.js"></script>
<script type="text/javascript" src="/fhem/tablet/lib/jquery.circlemenu.js"></script>
<script type="text/javascript" src="/fhem/tablet/lib/powerange.min.js"></script>
<script type="text/javascript" src="/fhem/tablet/lib/jquery.gridster.min.js"></script>
<script type="text/javascript" src="/fhem/tablet/lib/fa-multi-button.min.js"></script>
<script type="text/javascript" src="/fhem/tablet/js/fhem-tablet-ui.js"></script>
[b]<script type="text/javascript" src="/fhem/tablet/js/jquery-ui.min.js"></script>[/b]
und meine html-seite
<li data-row="2" data-col="2" data-sizex="6" data-sizey="4">
<div class="normal"
data-type="chart"
data-device="WZ_Thermostat"
data-logdevice='["FileLog_WZ_Thermostat","FileLog_WZ_Thermostat","FileLog_WZ_Thermostat"]'
data-logfile="WZ_Thermostat-2015-11-01.log"
data-columnspec='["4:WZ_Thermostat.desiredTemperature:1:int","4:WZ_Thermostat.temperature:1:int","4:WZ_Thermostat.valveposition:1:int"]'
data-style='["ftui l0fill","ftui l0dot","ftui l2dash"]'
data-ptype='["lines","lines","lines"]'
data-uaxis='["primary","primary","secondary"]'
data-legend='["Termperatur Soll", "Temperature Ist", "Ventil"]'
data-yunit="°C"
data-ytext="Temperature"
data-minvalue="auto"
data-maxvalue="auto"
data-yunit_sec="%"
data-ytext_sec="Percentage"
data-yticks="auto"
data-minvalue_sec="0"
data-maxvalue_sec="100"
data-daysago_start="0"
data-daysago_end="-1"
data-crosshair="true"
data-cursorgroup="1"
data-scrollgroup="1"
data-showlegend="true"
data-xticks="auto">
</div></li>
Das raster zeit es schonmal an
Falls Du nichts hin- und her kopiert hast, steht die jquery-ui.min.js Datei auch im pgm2 Ordner und nicht im Tablet/lib Ordner.
Bitte schaut Euch auch die Styles in der css Datei in meiner ursprünglichen Mail an, über die könnt Ihr noch was am Aussehen anpassen bzw. meine Voreinstellungen verwenden. Dort sind auch die Styles für die Graphen also z.B. ftui l0fill definiert (aber vielleicht wolltest Du ja auch schwarze Schrift auf dunkelgrauem Hintergrund ;)
Zitat von: blackbluegl am 30 Oktober 2015, 11:18:41
Hallo, Ich wollte mich bei meinem ersten Post im Forum mit ein paar Bilder beteiligen. Ich habe auf vielen Screens die Plots und Diagramme gesehen und da ich daheim auch ein paar Auswertung darstellen wollte und ich mit den vorhandenen Lösung optisch nicht zu frieden war hab ich widgets basierend auf der Highcharts-API erstellt.
Ziel ist es alle sinnvollen Diagramme der Highcharts-API via Widget zur Verfügung zustellen. Die sind optisch sowie technisch gut anpassbar und halt modern ::)
WetterUI zeigt mir das Wetter mit Forecast der nächsten Stunden und Tage. Das Große Diagramm wird direkt erzeugt und nicht als Bild eingebunden. Das war mir wichtig, da in den Popups mehr Infos drinnen sind. Das andere sind Beispiele für die Darstellung in Popups und 3D-Charts.
Hier also mal ein paar Screens für den Anfang.
diese schicken graphen von blackbluegl hätt ich so gern, bitte, bitte, bitte. ::) ;D oder hab ich die plugins übersehen?
http://forum.fhem.de/index.php/topic,37378.msg352171.html#msg352171 (http://forum.fhem.de/index.php/topic,37378.msg352171.html#msg352171)
@h3ll: Schoen, dass es bei Dir jetzt zu klappen scheint, ich hatte schon an mir gezweifelt. Kannst Du trotzdem Deine Variante mit dem Get fuer dblog mal posten, ich würde das dann versuchen so zu integrieren, dass alle davon profitieren können.
@eki:
das wäre noch gut für das widget_chart.js Zeile 591:
if (!$.fn.draggable)
dynamicload('../pgm2/jquery-ui.min.js', null, null, false);
Dann brauchen sich die User nicht um die Abhängigkeiten zu kümmern.
Und kannst du bitte auch noch die Eingabeparameter etwas flexibler machen:?
- Kein Array: wenn nicht als Array angegeben, dann Chart nur für einen Wert aufbauen
- Array-Count nicht gleich: wenn Feld nicht in Array gefunden wird, dann nimm den zuletzt gefundenen Wert
Sonst, super Arbeit !!!
Zitat von: roman1528 am 01 November 2015, 23:37:25
diese schicken graphen von blackbluegl hätt ich so gern, bitte, bitte, bitte. ::) ;D oder hab ich die plugins übersehen?
http://forum.fhem.de/index.php/topic,37378.msg352171.html#msg352171 (http://forum.fhem.de/index.php/topic,37378.msg352171.html#msg352171)
Geduld, ist schon in Arbeit. blackbluegl hat schon geliefert, jetzt muss ich mir das ansehen ....
Hi,
@eki:
Nachdem ich das mit dem Array begriffen habe, hat sich der Umbau erledigt - Beispiel s.u. logdb ist mein DbLog, HISTORY die Tabelle, damit wir alles
einwandfrei aus meinem DbLog gelesen.
... und - Klasse Arbeit!
<div class="normal"
data-type="chart"
data-logdevice='["logdb","logdb","logdb"]'
data-logfile='["HISTORY","HISTORY","HISTORY"]'
data-columnspec='["WZ.Sensor:temperature","WZ.Sensor:humidity","Pool.Sensor:temperature"]'
data-style='["ftui l3fill","ftui l4","ftui l1fill"]'
data-ptype='["lines","lines","lines"]'
data-uaxis='["primary","secondary","primary"]'
data-legend='["Temperatur", "Luftfeuchtigkeit","Pool"]'
...
Zu den Styles - ich denke, die wir jeder so anpassen, wie es ihm gefällt - als Basisset ok finde ich.
@setstate: +1 für Deine Änderungsvorschläge :)
Cheers,
h3ll
Zitat von: setstate am 02 November 2015, 09:08:43
Geduld, ist schon in Arbeit. blackbluegl hat schon geliefert, jetzt muss ich mir das ansehen ....
Sehr geil 8)
Danke schon mal an alle beteiligten^^
@setstate: Das mit der Abfrage bezüglich array oder nicht array ist schon enthalten. Außer beim Logdevice (das war für mich sozusagen die Basis) wird das bei den anderen Arrays schon so gemacht, wie Du es vorschlägst. Ich werde das jetzt nochmal dahingehend ändern dass es auch für "zu kurze" arrays klappt und dass auch das Logdevice entsprechend behandelt wird.
Das mit dem dynamischen Einbinden ist eine super Idee, werd ich auch nachziehen. Ich melde mich wenns fertig ist.
also ich bekomm das nicht hin es bleibt immer noch schwarz...
Zitat von: eki am 02 November 2015, 13:25:12
@setstate: Das mit der Abfrage bezüglich array oder nicht array ist schon enthalten. Außer beim Logdevice (das war für mich sozusagen die Basis) wird das bei den anderen Arrays schon so gemacht, wie Du es vorschlägst. Ich werde das jetzt nochmal dahingehend ändern dass es auch für "zu kurze" arrays klappt und dass auch das Logdevice entsprechend behandelt wird.
Das mit dem dynamischen Einbinden ist eine super Idee, werd ich auch nachziehen. Ich melde mich wenns fertig ist.
Mit der CSS können wir das auch so machen:
$('head').append('<link rel="stylesheet" href="'+ dir + '/../css/ftui_chart_orange.css" type="text/css" />');
Zitat von: xxsteffenxx am 02 November 2015, 19:48:59
also ich bekomm das nicht hin es bleibt immer noch schwarz...
hier die fhem-tablet-ui-user.css runterladen:
http://forum.fhem.de/index.php/topic,37378.msg352326.html#msg352326und in dein html einfügen:
<link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui-user.css" />Dann sollte es bunt werden
So ...
habe nun alle Tipps umgesetzt und bekomme mal wieder eine leere Anzeige.
meine Index.html
<link rel="stylesheet" href="/fhem/tablet/lib/jquery.gridster.min.css" />
<link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/font-awesome.min.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/jquery.toast.min.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/powerange.min.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/openautomation.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/fhemSVG.css" />
<link rel="stylesheet" href="/www/pgm2/jquery-ui.min.css" />
<link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui-user.css" />
<script type="text/javascript" src="/fhem/pgm2/jquery.min.js"></script>
<script type="text/javascript" src="/fhem/tablet/lib/jquery.knob.mod.min.js"></script>
<script type="text/javascript" src="/fhem/tablet/lib/jquery.toast.min.js"></script>
<script type="text/javascript" src="/fhem/tablet/lib/jquery.circlemenu.js"></script>
<script type="text/javascript" src="/fhem/tablet/lib/powerange.min.js"></script>
<script type="text/javascript" src="/fhem/tablet/lib/jquery.gridster.min.js"></script>
<script type="text/javascript" src="/fhem/tablet/lib/fa-multi-button.min.js"></script>
<script type="text/javascript" src="/fhem/tablet/js/fhem-tablet-ui.js"></script>
<script type="text/javascript" src="/www/pgm2/jquery-ui.min.js"></script>
meine Wohnzimmer.html
<li data-row="2" data-col="2" data-sizex="4" data-sizey="1">
<div class="normal"
data-type="chart"
data-logdevice='["FileLog_WZ_Thermostat","FileLog_WZ_Thermostat","FileLog_WZ_Thermostat"]'
data-logfile='["WZ_Thermostat-2015-11-01.log","WZ_Thermostat-2015-11-01.log","WZ_Thermostat-2015-11-01.log"]'
data-columnspec='["4:WZ_Thermostat.desiredTemperature","4:WZ_Thermostat.temperature","4:WZ_Thermostat.valveposition"]'
data-style='["ftui l0fill","ftui l0dot","ftui l2dash"]'
data-ptype='["lines","lines","lines"]'
data-uaxis='["primary","primary","secondary"]'
data-legend='["Termperatur Soll", "Temperature Ist", "Ventil"]'
data-yunit="°C"
data-ytext="Temperature"
data-minvalue="auto"
data-maxvalue="auto"
data-yunit_sec="%"
data-ytext_sec="Percentage"
data-yticks="auto"
data-minvalue_sec="0"
data-maxvalue_sec="100"
data-daysago_start="0"
data-daysago_end="-1"
data-crosshair="true"
data-cursorgroup="1"
data-scrollgroup="1"
data-showlegend="true"
data-xticks="auto">
</div></li>
die jquery-ui.min.js liegt in pgm2, die fhem-tablet-ui-user.css liegt in tablet/css
Steffen
Fehler gefunden :-)
Irgendwie haben bei mir alle stylesheets und scripts den falschen Pfad gehabt :-(
@setstate: anbei nun eine neue Version des chart widgets mit den von Dir vorgeschlagenen Ergänzungen (flexible arrays, Einbinden von jquery-min-ui.js, Einbinden des CSS).
Bei der über js eingebundenen CSS Datei habe ich nicht so ganz verstanden warum wir die ftui_chart_orange.css nennen sollen, ich habe sie jetzt unter dem Namen ftui_chart.css eingebunden.
Hallo eki,
vielen Dank für dein Chart-Widget - ich habe es jetzt ins Repo aufgenommen und hochgeladen.
Hallo,
Widget_Chart ist super! Klasse gemacht!
Es klappt bei mir auch super, als einzelnes Widget:
<header>TEST</header>
<div class="top-space"
data-type="chart"
data-device="TS_EG_SKUECHE"
data-logdevice='["FileLog_TS_EG_SKUECHE","FileLog_TS_EG_SKUECHE","FileLog_TS_EG_SKUECHE"]'
data-columnspec='["4:desired-temp","4:measured-temp","4:actuator"]'
data-style='["ftui l0fill","ftui l0dot","ftui l2dash"]'
data-ptype='["lines","lines","lines"]'
data-uaxis='["primary","primary","secondary"]'
data-legend='["Ist", "Soll", "Ventil"]'
data-yunit="°C"
data-ytext="Temperatur"
data-minvalue="auto"
data-maxvalue="auto"
data-yunit_sec="%"
data-ytext_sec="Prozent"
data-yticks="auto"
data-minvalue_sec="0"
data-maxvalue_sec="100"
data-daysago_start="0"
data-daysago_end="-1"
data-crosshair="true"
data-cursorgroup="1"
data-scrollgroup="1"
data-showlegend="true"
data-xticks="auto"
data-height="500px">
</div>
doch wenn ich versuche den Code in ein Popup zu stecken dann kommt eine Warnung und es scheint nicht zu funktionieren, klappt aber nach ca. 2 Minuten doch und es erscheint Chart im Popupfenster. (siehe Anhang)
<div data-type="popup" data-width="1200px" data-height="600px">
<div data-type="label" data-device="TS_OG_BAD_Clima" data-get="measured-temp" data-limits='[10,15,23]' data-colors='["#6699FF","#aa6900","#bb6242"]' data-unit="%B0C%0A" class="big"></div>
<div class="dialog top-space">
<header>TEST</header>
<div class="normal"
data-type="chart"
data-device="TS_EG_SKUECHE"
data-logdevice='["FileLog_TS_EG_SKUECHE","FileLog_TS_EG_SKUECHE","FileLog_TS_EG_SKUECHE"]'
data-columnspec='["4:desired-temp","4:measured-temp","4:actuator"]'
data-style='["ftui l0fill","ftui l0dot","ftui l2dash"]'
data-ptype='["lines","lines","lines"]'
data-uaxis='["primary","primary","secondary"]'
data-legend='["Ist", "Soll", "Ventil"]'
data-yunit="°C"
data-ytext="Temperatur"
data-minvalue="auto"
data-maxvalue="auto"
data-yunit_sec="%"
data-ytext_sec="Prozent"
data-yticks="auto"
data-minvalue_sec="0"
data-maxvalue_sec="100"
data-daysago_start="0"
data-daysago_end="-1"
data-crosshair="true"
data-cursorgroup="1"
data-scrollgroup="1"
data-showlegend="true"
data-xticks="auto"
data-height="500px">
</div>
</div>
</div>
Grüße
Daniel
Zitat von: setstate am 02 November 2015, 09:08:43
Geduld, ist schon in Arbeit. blackbluegl hat schon geliefert, jetzt muss ich mir das ansehen ....
Ich bleib dran und werde noch weiter nachliefern, sobald der minimale Stand jetzt durch ist. Sonst bauen wir zu viel hin und her. Ich hoffe ich hab mich weitestgehend an eure Struktur gehalten. ;D
Hallo Daniel,
Das Verhalten kann ich bei mir nachvollziehen, liegt daran, dass das Chart im popup Fall angelegt aber nicht angezeigt wird, dadurch bekomme ich einige Infos nicht richtig. Muss mir mal überlegen wie ich das Umgehe. Ich melde mich.
Bezüglich chart widget und popup. Ich hätte eine Lösung, dazu müsste allerdings auch eine kleine Änderung im popup widget erfolgen. Beim fadeIn (Zeile 57) müsste statt
dialog.fadeIn(500);
dialog.fadeIn(500,function () {$(this).trigger('fadein');});
stehen, dann würde beim Ende des fadeIn ein event getriggert, auf den ich hören könnte und erst danach das Chart richtig aufbauen.
@setstate: wäre das OK? falls ja würde ich ein update für das chart widget und das popup widget mit den entsprechenden Änderungen liefern, gib kurz Bescheid.
Hallo h3ll,
hast Du was am Modul-code geändert, damit es mit DbLog funktioniert? Mit einem Wert funktioniert es, mit einem weiteren bleibt der chart leer.
ciao Walter
Zitat von: h3llsp4wn am 02 November 2015, 09:38:33
Hi,
@eki:
Nachdem ich das mit dem Array begriffen habe, hat sich der Umbau erledigt - Beispiel s.u. logdb ist mein DbLog, HISTORY die Tabelle, damit wir alles
einwandfrei aus meinem DbLog gelesen.
... und - Klasse Arbeit!
<div class="normal"
data-type="chart"
data-logdevice='["logdb","logdb","logdb"]'
data-logfile='["HISTORY","HISTORY","HISTORY"]'
data-columnspec='["WZ.Sensor:temperature","WZ.Sensor:humidity","Pool.Sensor:temperature"]'
data-style='["ftui l3fill","ftui l4","ftui l1fill"]'
data-ptype='["lines","lines","lines"]'
data-uaxis='["primary","secondary","primary"]'
data-legend='["Temperatur", "Luftfeuchtigkeit","Pool"]'
...
Zu den Styles - ich denke, die wir jeder so anpassen, wie es ihm gefällt - als Basisset ok finde ich.
@setstate: +1 für Deine Änderungsvorschläge :)
Cheers,
h3ll
Zitat von: wkarl am 06 November 2015, 12:29:49
Hallo h3ll,
hast Du was am Modul-code geändert, damit es mit DbLog funktioniert? Mit einem Wert funktioniert es, mit einem weiteren bleibt der chart leer.
ciao Walter
Exakt das selbe Problem habe ich auch.
Wenn ich statt data-logdevice='["logdb","logdb","logdb"]' nur data-logdevice='["logdb"]' mache bekomme ich natürlich nur einen Chart aber es werden trotzdem alle Werte von den anderen Devices übergeben, eben halt nur nicht angezeigt.
Bei mehr als einem logdevice bleibt das ganze bei "GET /fhem/?cmd=list+logd,logdb,logdb+STATE&XHR=1&_=1446810458029" stehen. Anwort ist 3 mal connected.
Gruß Gerd
Zitat von: eki am 06 November 2015, 09:50:06
@setstate: wäre das OK? falls ja würde ich ein update für das chart widget und das popup widget mit den entsprechenden Änderungen liefern, gib kurz Bescheid.
@eki: das mit den Triggern geht i. O.
Zitat von: eki am 06 November 2015, 09:50:06
Bezüglich chart widget und popup. Ich hätte eine Lösung, dazu müsste allerdings auch eine kleine Änderung im popup widget erfolgen. Beim fadeIn (Zeile 57) müsste statt
dialog.fadeIn(500);
dialog.fadeIn(500,function () {$(this).trigger('fadein');});
stehen, dann würde beim Ende des fadeIn ein event getriggert, auf den ich hören könnte und erst danach das Chart richtig aufbauen.
@setstate: wäre das OK? falls ja würde ich ein update für das chart widget und das popup widget mit den entsprechenden Änderungen liefern, gib kurz Bescheid.
@setstate
@eki
danke im vorraus!
Gruß Daniel
@Gerd/wkarl:
Ich habe nichts geändert - ich schaue zur Sicherheit noch mal nach, nicht, dass ich da was übersehen habe. Muss nur mal eine Sicherung machen. Ich habe aber noch das data-device ergänzt, da ich die Tage ein Update gemacht habe und es ohne gar nicht
läuft.
Sieht dann so aus:
<div class="normal"
data-type="chart"
data-device="logdb"
data-logdevice='["logdb","logdb","logdb"]'
data-logfile='["HISTORY","HISTORY","HISTORY"]'
So läufts bei mir jetzt. Ich hatte bei meinen ersten versuchen auch nur zwei von drei Sätzen zu Gesicht bekommen, da die Daten
außerhalb der definierten Anzeige lagen.
Cheers,
h3ll
Halle h3ll,
das war es - 'data-device=MyDbLog' fehlte. Jetzt funktioniert es.
Danke nochmal.
ciao Walter
Zitat von: h3llsp4wn am 06 November 2015, 23:11:10
@Gerd/wkarl:
Ich habe nichts geändert - ich schaue zur Sicherheit noch mal nach, nicht, dass ich da was übersehen habe. Muss nur mal eine Sicherung machen. Ich habe aber noch das data-device ergänzt, da ich die Tage ein Update gemacht habe und es ohne gar nicht
läuft.
Sieht dann so aus:
<div class="normal"
data-type="chart"
data-device="logdb"
data-logdevice='["logdb","logdb","logdb"]'
data-logfile='["HISTORY","HISTORY","HISTORY"]'
So läufts bei mir jetzt. Ich hatte bei meinen ersten versuchen auch nur zwei von drei Sätzen zu Gesicht bekommen, da die Daten
außerhalb der definierten Anzeige lagen.
Cheers,
h3ll
Top!
mir fehlte auch das data-device.
Danke
Gruß Gerd
Hier sind die Änderungen mit denen jetzt auch popup funktonieren sollte.
@eki
einfach Klasse.
Klappt auf anhieb, und schnell :)
Danke & Gruß
Daniel
Zitat von: blackbluegl am 30 Oktober 2015, 11:18:41
Hallo, Ich wollte mich bei meinem ersten Post im Forum mit ein paar Bilder beteiligen. Ich habe auf vielen Screens die Plots und Diagramme gesehen und da ich daheim auch ein paar Auswertung darstellen wollte und ich mit den vorhandenen Lösung optisch nicht zu frieden war hab ich widgets basierend auf der Highcharts-API erstellt.
Ziel ist es alle sinnvollen Diagramme der Highcharts-API via Widget zur Verfügung zustellen. Die sind optisch sowie technisch gut anpassbar und halt modern ::)
WetterUI zeigt mir das Wetter mit Forecast der nächsten Stunden und Tage. Das Große Diagramm wird direkt erzeugt und nicht als Bild eingebunden. Das war mir wichtig, da in den Popups mehr Infos drinnen sind. Das andere sind Beispiele für die Darstellung in Popups und 3D-Charts.
Hier also mal ein paar Screens für den Anfang.
Die Highcharts-Widgets sind nun eingechecket und per Update verfügbar.
Dank an blackbluegl: https://github.com/knowthelist/fhem-tablet-ui/pull/122 (https://github.com/knowthelist/fhem-tablet-ui/pull/122)
Beispiele sind im examples Ordner verfügbar.
Hallo Forum,
großes Lob an alle Beteiligten - Das ist richtig gut was Ihr da gebaut habt.
Ich habe mit dem Chart aber leider ein Problem. Solange ich ein Wert im Chart habe, funktioniert es. Wenn ich einen zweiten Wert einfüge habe ich ein leeres Widget.
Es werden in der Browser-Console keine Fehlerausgaben gemacht.
Wäre schön wenn mir einer eine Tipp geben könnte.
Geht:
<header>GÄSTEZIMMER</header>
<div class="normal"
data-type="chart"
data-device="OG_GZ_RTth"
data-logdevice='["OG_GZ_HZ_FL"]'
data-columnspec='["4:measured-temp"]'
data-style='["ftui l0fill","ftui l0dot","ftui l2dash"]'
data-ptype='["lines","lines","lines"]'
data-uaxis='["primary","primary","secondary"]'
data-legend='["Ist", "Soll", "Ventil"]'
data-yunit="°C"
data-ytext="Temperatur"
data-minvalue="auto"
data-maxvalue="auto"
data-yunit_sec="%"
data-ytext_sec="Prozent"
data-yticks="auto"
data-minvalue_sec="0"
data-maxvalue_sec="100"
data-daysago_start="0"
data-daysago_end="-1"
data-crosshair="true"
data-cursorgroup="1"
data-scrollgroup="1"
data-showlegend="true"
data-xticks="auto"
data-height="300px">
</div>
Geht nicht:
<header>GÄSTEZIMMER</header>
<div class="normal"
data-type="chart"
data-device="OG_GZ_RTth"
data-logdevice='["OG_GZ_HZ_FL","OG_GZ_HZ_FL"]'
data-columnspec='["4:measured-temp","4:humidity"]'
data-style='["ftui l0fill","ftui l0dot"]'
data-ptype='["lines","lines"]'
data-uaxis='["primary","primary"]'
data-legend='["Ist", "Soll"]'
data-yunit="°C"
data-ytext="Temperatur"
data-minvalue="auto"
data-maxvalue="auto"
data-yunit_sec="%"
data-ytext_sec="Prozent"
data-yticks="auto"
data-minvalue_sec="0"
data-maxvalue_sec="100"
data-daysago_start="0"
data-daysago_end="-1"
data-crosshair="true"
data-cursorgroup="1"
data-scrollgroup="1"
data-showlegend="true"
data-xticks="auto"
data-height="300px">
</div>
Gruß aus dem Ruhrgebiet
Michael
Zitat von: setstate am 08 November 2015, 10:58:12
Die Highcharts-Widgets sind nun eingechecket und per Update verfügbar.
Dank an blackbluegl: https://github.com/knowthelist/fhem-tablet-ui/pull/122 (https://github.com/knowthelist/fhem-tablet-ui/pull/122)
Beispiele sind im examples Ordner verfügbar.
Super. Danke.
ZitatIch habe mit dem Chart aber leider ein Problem. Solange ich ein Wert im Chart habe, funktioniert es. Wenn ich einen zweiten Wert einfüge habe ich ein leeres Widget.
Es werden in der Browser-Console keine Fehlerausgaben gemacht.
Auf den ersten Blick sieht es OK aus, kannst Du mal einen Auszug aus dem Logfile posten.
@eki, hab gerade erst gelesen. Mach ich morgen abend.
Hallo eki,
das ist superklasse, und der Einbau klappte mehr oder weniger auf Anhieb - vielen Dank! Ich visualisiere damit die Daten eines Poolcontrollers, der in 1500 km vor sich hindümpelt und über einen vpn Tunnel (vvia GSM) mit
dem hiesigen Router verbunden ist.
In der Beschreibung sind die CSS Klassen für die Formatierung von Schrift usw. erwähnt (.text.axes Font and color for the chart axes usw.).
Wo/wie genau müsste man diese einsetzen bzw. gibt es dafür vielleicht ein Beispiel, aus dem man das ersehen kann? Mein "css" ist leider noch ausbaufähiger als mein perl :-[
Grüße
Martin
Kanns mir jetzt selbst beantworten - muss ich in der fhem-tablet-ui-user.css ändern. Dachte deshalb, es geht nicht, weil ich nicht auf dem Schirm hatte, dass ich nach jeder Änderung erst den FF Cache leeren muss, um sie zu sehen.
Hallo eki,
danke für dein Interesse. Habe mal für den Fall "Geht nicht" die Logausgabe der Chrome-Console eingehangen.
Plugin dir: /fhem/tablet/js
fhem-tablet-ui.js:118 Filename: index_Test.html
fhem-tablet-ui.js:211 Collecting required readings
VM803:598 start init
jquery.min.js:4 Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check http://xhr.spec.whatwg.org/.
VM803:630 init exit
VM803:1663 start update
VM803:1680 update exit
fhem-tablet-ui.js:57 Loaded plugin: widget_chart
fhem-tablet-ui.js:223 Request readings from FHEM
fhem-tablet-ui.js:278 start longpoll
2fhem-tablet-ui.js:278 start longpoll
fhem-tablet-ui.js:346 2015-11-11 18:21:35 / OG_GZ_RTth / STATE / T: 20.9 desired: 18.0
VM803:1663 start update
VM803:1680 update exit
fhem-tablet-ui.js:65 update done for device:OG_GZ_RTth parameter:STATE
3fhem-tablet-ui.js:278 start longpoll
fhem-tablet-ui.js:346 2015-11-11 18:24:08 / OG_GZ_RTth / STATE / T: 20.9 desired: 18.0
VM803:1663 start update
VM803:1680 update exit
fhem-tablet-ui.js:65 update done for device:OG_GZ_RTth parameter:STATE
Mehr kommt nicht.
Hier für "geht"
Plugin dir: /fhem/tablet/js
fhem-tablet-ui.js:118 Filename: index_Test.html
fhem-tablet-ui.js:211 Collecting required readings
VM852:598 start init
jquery.min.js:4 Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check http://xhr.spec.whatwg.org/.
VM852:630 init exit
VM852:1663 start update
VM852:1680 update exit
VM852:1663 start update
VM852:633 start refresh
2VM852:734 Main loop HTTP
2VM852:1145 Main loop page content
VM852:1680 update exit
fhem-tablet-ui.js:57 Loaded plugin: widget_chart
fhem-tablet-ui.js:223 Request readings from FHEM
fhem-tablet-ui.js:278 start longpoll
Die "start" und "exit" habe ich für mein Verständnis in widget_chart.js eingebaut. Es kommt im Fehlerfall anscheinend gar nicht zu einem "start refresh"
Hallo dadoc,
Es muss eben in einem der Files definiert werden, die in der HTML Datei, welche Du laedst, eingebunden sind. Gleichzeitig wird direkt im Chart Widget js noch die Datei ftui_chart.js eingebunden, dort sind auch Beispiele enthalten. Im Wiki sind alle CSS Parameter jetzt auch beschrieben.
Hallo Michael,
Anhand Deiner Logs wird zumindest klar, an welcher Stelle das Problem liegt. Kannst Du mal versuchen nur das Array mit den columnspec mit zwei Werten zu setzen und das data-logdevice, wie im Gutfall, mit nur einem Wert, das sollte dann trotzdem 2 Graphen ergeben.
Müsste dann also etwa so aussehen:
<header>GÄSTEZIMMER</header>
<div class="normal"
data-type="chart"
data-device="OG_GZ_RTth"
data-logdevice='["OG_GZ_HZ_FL"]'
data-columnspec='["4:measured-temp","4:humidity"]'
data-style='["ftui l0fill","ftui l0dot"]'
data-ptype='["lines","lines"]'
data-uaxis='["primary","primary"]'
data-legend='["Ist", "Soll"]'
data-yunit="°C"
data-ytext="Temperatur"
data-minvalue="auto"
data-maxvalue="auto"
data-yunit_sec="%"
data-ytext_sec="Prozent"
data-yticks="auto"
data-minvalue_sec="0"
data-maxvalue_sec="100"
data-daysago_start="0"
data-daysago_end="-1"
data-crosshair="true"
data-cursorgroup="1"
data-scrollgroup="1"
data-showlegend="true"
data-xticks="auto"
data-height="300px">
</div>
Hallo eki, teste ich mal.
Sorry für die lange Anttwortzeit. Bin gerade ein bisschen eingespannt.
Gruss Michael
Hallo eki,
habe getestet. Wenn ich data-columnspec erweitere sehe ich trotzdem nur die Daten des ersten Kanal. Der zweite, der jetzt korrigiert auf data-uaxis "secondary" liegt, zeigt zwar auf der rechten Skala den richtigen min und max Wert an, aber der Trend ist nicht zu sehen.
EDIT: Hab gerade gesehen das ich humidity und temp vertaucht habe!
<header>GÄSTEZIMMER</header>
<div class="normal"
data-type="chart"
data-device="OG_GZ_RTth"
data-logdevice='["OG_GZ_HZ_FL"]'
data-columnspec='["4:humidity","4:measured-temp"]'
data-style='["ftui l1fill","ftui l0fill"]'
data-ptype='["lines","lines"]'
data-uaxis='["primary","secondary"]'
data-legend='["Ist", "Soll"]'
data-yunit="°C"
data-ytext="Temperatur"
data-minvalue="auto"
data-maxvalue="auto"
data-yunit_sec="%"
data-ytext_sec="Prozent"
data-yticks="auto"
data-minvalue_sec="auto"
data-maxvalue_sec="auto"
data-daysago_start="0"
data-daysago_end="-1"
data-crosshair="true"
data-cursorgroup="1"
data-scrollgroup="1"
data-showlegend="true"
data-xticks="auto"
data-height="300px">
</div>
Plugin dir: /fhem/tablet/js
fhem-tablet-ui.js:118 Filename: index_Test.html
fhem-tablet-ui.js:211 Collecting required readings
VM225:598 start init
jquery.min.js:4 Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check http://xhr.spec.whatwg.org/.
VM225:630 init exit
VM225:1663 start update
VM225:1680 update exit
VM225:1663 start update
VM225:633 start refresh
2VM225:734 Main loop HTTP
2VM225:1145 Main loop page content
VM225:1680 update exit
fhem-tablet-ui.js:57 Loaded plugin: widget_chart
fhem-tablet-ui.js:223 Request readings from FHEM
fhem-tablet-ui.js:278 start longpoll
Hallo Michael,
Dann schick dich mal ein Stueck Logfile, dann kann ich mal versuchen zu debuggen.
Hallo eki,
danke das Du mich unterstützt. Wenn ich bei mir was schauen soll, sag Bescheid. Ggf. hängt es ja mit meine Konfiguration in fhem zusammen.
Hallo eki,
kann ich zwei Graphen in einen Popup-Dialog darstellen?
ciao Walter
Zitat von: eki am 07 November 2015, 17:32:04
Hier sind die Änderungen mit denen jetzt auch popup funktonieren sollte.
hallo Walter,
meinst Du 2 charts oder zwei graphen in einem chart? Es muesste beides funktionieren. Selbst getestet habe ich nur mehrere graphen in einem chart.
Hallo eki,
ich meine zwei charts. Aktuell sieht es aus wie im ersten screenshot. Wobei ich auf Grund des Verlaufs am Zweifeln bin, ob wirklich zwei unterschiedliche Datensätze herangezogen werden. Es funktionierte auch schon mal (siehe zweiten screenshot).
Folgend auch noch der code.
ciao walter
<html>
<header><font size="+1">Büro</font></header>
<div class="container">
<div class="cell big">
<div data-type="popup" data-width="1000px" data-height="600px">
<div class="inline"
data-type="label"
data-device="Buero_TC" data-get="measured-temp" data-unit="%B0C%0A" data-fix="1"
data-limits='[-20,20,24]' data-colors='["skyblue","darkorange","orangered"]'>
</div>
<div class="inline"
data-type="label"
data-device="Buero_TC" data-get="humidity" data-unit="%%0A" data-fix="1"
data-limits='[0,40,60]' data-colors='["skyblue","darkorange","orangered"]'>
</div>
<div class="dialog">
<header><font size="+1">Büro</font></header>
<div class="nobuttons"
data-type="chart"
data-device="MyDbLog"
data-logdevice='["MyDbLog","MyDbLog","MyDbLog","MyDbLog"]'
data-logfile='["HISTORY","HISTORY","HISTORY","HISTORY"]'
data-columnspec='["Buero_TC:measured-temp","Buero_TC:desired-temp","Buero_TC:humidity","Buero_TC:actuator"]'
data-style='["ftui l0fill","ftui l3dot","ftui l2","ftui l4"]'
data-ptype='["lines","lines","lines","lines"]'
data-uaxis='["primary","primary","secondary","secondary"]'
data-legend='["IST","SOLL","Luft","Ventil"]'
data-yunit="°C" data-ytext="Temperatur" data-minvalue="10" data-maxvalue="auto"
data-yunit_sec="%" data-ytext_sec="Prozent" data-minvalue_sec="0" data-maxvalue_sec="100"
data-yticks="auto"
data-daysago_start="0" data-daysago_end="-1"
data-xticks="auto"
data-crosshair="true"
data-cursorgroup="1"
data-scrollgroup="1"
data-showlegend="true"
data-height="250px"
data-width="90%">
</div>
<div class="nobuttons"
data-type="chart"
data-device="MyDbLog"
data-logdevice='["MyDbLog","MyDbLog","MyDbLog"]'
data-logfile='["HISTORY","HISTORY","HISTORY"]'
data-columnspec='["Buero_HK:measured-temp","Buero_HK:desired-temp","Buero_HK:actuator"]'
data-style='["ftui l0fill","ftui l3dot","ftui l4"]'
data-ptype='["lines","lines","lines"]'
data-uaxis='["primary","primary","secondary"]'
data-legend='["IST","SOLL","Ventil"]'
data-yunit="°C" data-ytext="Temperatur" data-minvalue="10" data-maxvalue="auto"
data-yunit_sec="%" data-ytext_sec="Prozent" data-minvalue_sec="0" data-maxvalue_sec="100"
data-yticks="auto"
data-daysago_start="0" data-daysago_end="-1"
data-xticks="auto"
data-crosshair="true"
data-cursorgroup="1"
data-scrollgroup="1"
data-showlegend="true"
data-height="250px"
data-width="90%">
</div>
</div>
</div>
</div>
<div class="cell" data-type="label">Heizkörper</div>
<div class="cell">
<table><tr><td>
<div class="inline"
data-type="thermostat"
data-device="Buero_HK_Clima" data-get="desired-temp" data-set="desired-temp" data-temp="measured-temp" data-valve="ValvePosition"
data-min="0" data-max="30" data-step="0.5"
data-off="controlManu off" data-boost="controlMode boost"
data-fgColor="darkorange"
data-height="100px"
data-width="100px">
</div>
</td><td>
<div class="cell inline small">
<div data-type="multistatebutton"
data-device="Buero_HK_Clima" data-get="controlMode" data-get-on='["auto","manual"]'
data-set='["controlMode manual","controlMode auto"]' data-icons='["oa-sani_heating_automatic","oa-sani_heating_manual"]' data-colors='["darkgreen","darkblue"]'
data-background-icon="fa-square" data-background-colors='["grey","grey"]'
>
</div><br>
<div data-type="multistatebutton"
data-device="Buero_HK" data-get="R-btnLock" data-get-on='["on","off"]'
data-set='["regSet btnLock off","regSet btnLock on"]' data-icons='["oa-secur_locked","oa-secur_open"]' data-colors='["darkred","darkblue"]'
data-background-icon="fa-square" data-background-colors='["grey","grey"]'
>
</div>
</div>
</td></tr></table>
</div>
<div class="cell" data-type="label">Fussboden</div>
<div class="cell">
<table><tr><td>
<div class="inline"
data-type="thermostat"
data-device="Buero_TC" data-get="desired-temp" data-set="desired-temp" data-temp="measured-temp" data-valve="actuator"
data-min="0" data-max="30" data-step="0.5"
data-off="controlManu off" data-boost="controlMode boost"
data-fgColor="darkorange"
data-height="100px"
data-width="100px">
</div>
</td><td>
<div class="cell inline small">
<div data-type="multistatebutton"
data-device="Buero_TC_Climate" data-get="controlMode" data-get-on='["auto","manual"]'
data-set='["controlMode manual","controlMode auto"]' data-icons='["oa-sani_heating_automatic","oa-sani_heating_manual"]' data-colors='["darkgreen","darkblue"]'
data-background-icon="fa-square" data-background-color="dimgrey"
>
</div><br>
<div data-type="multistatebutton"
data-device="Buero_TC" data-get="R-btnLock" data-get-on='["on","off"]'
data-set='["regSet btnLock off","regSet btnLock on"]' data-icons='["oa-secur_locked","oa-secur_open"]' data-colors='["darkred","darkblue"]'
data-background-icon="fa-square" data-background-color="dimgrey"
>
</div>
</div>
</td></tr></table>
</div>
</div>
</html>
Zitat von: MichaelT am 15 November 2015, 09:37:48
Hallo eki,
danke das Du mich unterstützt. Wenn ich bei mir was schauen soll, sag Bescheid. Ggf. hängt es ja mit meine Konfiguration in fhem zusammen.
Hallo Michael,
ich habe Dein Logfile mal bei mir als dummy eingebunden (also dummy mit Deinem Device Namen definiert, und Log mit entsprechendem Namen)
define OG_GZ_RTth dummy
define OG_GZ_HZ_FL FileLog demolog/OG_GZ_HZ-112015.log_ Sens.Out:T:.* und mit Deinem Template bei mir geplottet, komischerweise funktioniert das bei mir (siehe Bild). Was mir aufgefallen ist, war, dass Dein Logfile im Namen am Ende einen "_" hatte.
Zitat von: wkarl am 16 November 2015, 06:55:47
Hallo eki,
ich meine zwei charts. Aktuell sieht es aus wie im ersten screenshot. Wobei ich auf Grund des Verlaufs am Zweifeln bin, ob wirklich zwei unterschiedliche Datensätze herangezogen werden. Es funktionierte auch schon mal (siehe zweiten screenshot).
Hallo Walter,
ich habe im widget_chart.js diesbezüglich noch einen Fehler entdeckt, der genau in dem Fall von mehreren <div> in einem popup zuschlägt. Bitte prüfe mal, ob es mit dem angehängten js file klappt (bei mir ging es damit).
Falls ja, gib Bescheid, dann werde ich eine neue Version fertig machen, die diesen Fehler nicht mehr hat (habe inzwischen auch schon ein paar andere Kleinigkeiten gefunden und angefangen eine Art 3D Variante der Plots dazu zu bauen, deshalb möchte ich die Version erst noch ein bisschen testen und noch nicht offiziell freigeben).
Hallo eki,
funktioniert jetzt, super. Noch ein Punkt ist mir aufgefallen - das popup ist ja über die Temperatur und die Luftfeuchtigkeit definiert. Die Selektierhand wird auch über beide Bereiche angezeigt. Der Dialog erscheint aber nur bei Klick auf die erste Zahl.
Normal oder kann ich/Du was dran machen?
ciao walter
Hi Eki,
habe bei mir als Bug entdeckt, dass sich das Widget verkleinert, wenn man in der Historie zurückgeht. Definition:
<li data-row="1" data-col="2" data-sizex="5" data-sizey="3">
<header>KLIMA-DIAGRAMM</header>
<div class="fullsize"
data-type="chart"
data-device="myDbLog"
data-logdevice='["myDbLog","myDbLog","myDbLog"]'
data-logfile='["HISTORY","HISTORY","HISTORY"]'
data-columnspec='["BK_Wetterstation:temperature","BK_Wetter:temperature","BK_Wetterstation:humidity"]'
data-style='["ftui l0fill","ftui l1dot","ftui l2dash"]'
data-ptype='["lines","lines","lines"]'
data-uaxis='["primary","primary","secondary"]'
data-legend='["Measured", "Predicted", "Humidity"]'
data-yunit="°C"
data-ytext="Temperature"
data-minvalue="auto"
data-maxvalue="auto"
data-yticks="auto"
data-yunit_sec="%"
data-ytext_sec="Humidity"
data-minvalue_sec="0"
data-maxvalue_sec="100"
data-daysago_start="0"
data-daysago_end="-1"
data-crosshair="true"
data-cursorgroup="1"
data-scrollgroup="1"
data-showlegend="true"
data-xticks="auto">
</div>
</li>
Wenn ich es mir anzeigen lasse, dann sieht es erstmal richtig aus (Bild 1):
(http://forum.fhem.de/index.php?action=dlattach;topic=37378.0;attach=40548;image)
Klicke ich dann aber auf den Pfeil links oben, so verkleinert es sich (Bild 2). Wie mir scheint, zieht dann das "fullsize" nicht mehr:
(http://forum.fhem.de/index.php?action=dlattach;topic=37378.0;attach=40550;image)
Desweiteren scheint das Chart mit weniger als zwei Kästchen Probleme zu haben? Wenn ich folgendes Definiere:
<li data-row="4" data-col="2" data-sizex="5" data-sizey="1">
<header>WIND/REGEN-DIAGRAMM</header>
<div class="fullsize"
data-type="chart"
data-device="myDbLog"
data-logdevice='["myDbLog","myDbLog"]'
data-logfile='["HISTORY","HISTORY"]'
data-columnspec='["BK_Wetterstation:wind","BK_Wetter:rain"]'
data-style='["ftui l1dot","ftui l2dash"]'
data-ptype='["lines","lines"]'
data-uaxis='["primary","secondary"]'
data-legend='["Wind", "Regen"]'
data-yunit="km/h"
data-ytext="Wind"
data-minvalue="auto"
data-maxvalue="auto"
data-yticks="auto"
data-yunit_sec="mm"
data-ytext_sec="Regen"
data-minvalue_sec="auto"
data-maxvalue_sec="auto"
data-daysago_start="0"
data-daysago_end="-1"
data-crosshair="true"
data-cursorgroup="1"
data-scrollgroup="1"
data-showlegend="true"
data-xticks="auto">
</div>
</li>
Dann sieht das wie in Bild 3 momentan aus - wie es scheint klappt es da nicht mehr die Werte zur Grafik zu positionieren?
(http://forum.fhem.de/index.php?action=dlattach;topic=37378.0;attach=40552;image)
Vielen Dank für das geniale Widget - echt super!
@SirUli,
kannst Du das auch mal mit der Version, die ich an wkarl geschickt habe testen, dort ist eine Korrektur bezüglich "fullsize" enthalten, bin mir aber nicht sicher, ob das auch Deine Probleme löst.
@wkarl:
Soweit ich das popup widget verstehe (kommt ja nicht von mir, ich hab aber im Rahmen der chart widget Aktivitäten da mal reingeschaut), ist immer nur das erste <div> innerhalb des popup widgets (genau gesagt das erste "child" objekt) dasjenige, welches das Erscheinen triggert. Eventuell kannst Du mal versuchen die beiden in ein <div> zusammen zu fassen.
Hallo Eki,
das passt jetzt zwar nicht zum Them User-Demo, aber ich habe ein noch ein Problem mit der Darstellung der Graphen.
Fall 1) Das hier funktioniert:
data-type="chart"
data-device='["DBLog"]'
data-logdevice='["DBLog"]'
data-logfile='["HISTORY"]'
data-columnspec="gaskosten:abrechnung_berechnet:::$val=~s/.*T:\s([-\.\d]+).*/$1/eg"
Fall 2) Das hier funktioniert nicht mehr (um ein weiteren Graphen erweitert):
data-type="chart"
data-device='["DBLog"]'
data-logdevice='["DBLog","DBLog"]'
data-logfile='["HISTORY","HISTORY"]'
data-columnspec='["gaskosten:abrechnung_berechnet:::$val=~s/.*T:\s([-\.\d]+).*/$1/eg","wasser:abrechnung_berechnet:::$val=~s/.*T:\s([-\.\d]+).*/$1/eg"]'
Auch
data-device='["DBLog","DBLog"]'
data-device="DBLog"
hilft nicht.
Ich vermute, dass der columnspec Split bzw. die array Abarbeitung nicht suaber funktioniert bzw. noch nicht sicher ist.
Grund- Der Request sieht wie folgt aus:
Fall 1) OK!
cmd
get DBLog HISTORY - 2012-11-10_00:00:00 2015-11-20_00:00:00 gaskosten:abrechnung_berechnet:::$val=~s
/.*T:\s([-\.\d]+).*/$1/eg
Fall 2) Fehlerhaft:
cmd
get DBLog HISTORY - 2012-11-10_00:00:00 2015-11-20_00:00:00 ["gaskosten:abrechnung_berechnet:::$val=
~s/.*T:\s([-\.\d]+).*/$1/eg","wasser:abrechnung_berechnet:::$val=~s/.*T:\s([-\.\d]+).*/$1/eg"]
Den Fehler konnte ich noch nicht näher eingränzen - hast du eine Idee?
Danke.
Gruß
Arthur
Hallo eki,
ZitatEventuell kannst Du mal versuchen die beiden in ein <div> zusammen zu fassen.
Genauso isses.
ciao walter
Gibt es eigentlich einen Weg die index.html über FHEM edit files zu bearbeiten?
Chris
Zitat von: amunra am 16 November 2015, 13:01:20
Hallo Eki,
das passt jetzt zwar nicht zum Them User-Demo, aber ich habe ein noch ein Problem mit der Darstellung der Graphen.
Fall 1) Das hier funktioniert:
data-type="chart"
data-device='["DBLog"]'
data-logdevice='["DBLog"]'
data-logfile='["HISTORY"]'
data-columnspec="gaskosten:abrechnung_berechnet:::$val=~s/.*T:\s([-\.\d]+).*/$1/eg"
Fall 2) Das hier funktioniert nicht mehr (um ein weiteren Graphen erweitert):
data-type="chart"
data-device='["DBLog"]'
data-logdevice='["DBLog","DBLog"]'
data-logfile='["HISTORY","HISTORY"]'
data-columnspec='["gaskosten:abrechnung_berechnet:::$val=~s/.*T:\s([-\.\d]+).*/$1/eg","wasser:abrechnung_berechnet:::$val=~s/.*T:\s([-\.\d]+).*/$1/eg"]'
Auch
data-device='["DBLog","DBLog"]'
data-device="DBLog"
hilft nicht.
Ich vermute, dass der columnspec Split bzw. die array Abarbeitung nicht suaber funktioniert bzw. noch nicht sicher ist.
Grund- Der Request sieht wie folgt aus:
Fall 1) OK!
cmd
get DBLog HISTORY - 2012-11-10_00:00:00 2015-11-20_00:00:00 gaskosten:abrechnung_berechnet:::$val=~s
/.*T:\s([-\.\d]+).*/$1/eg
Fall 2) Fehlerhaft:
cmd
get DBLog HISTORY - 2012-11-10_00:00:00 2015-11-20_00:00:00 ["gaskosten:abrechnung_berechnet:::$val=
~s/.*T:\s([-\.\d]+).*/$1/eg","wasser:abrechnung_berechnet:::$val=~s/.*T:\s([-\.\d]+).*/$1/eg"]
Den Fehler konnte ich noch nicht näher eingränzen - hast du eine Idee?
Danke.
Gruß
Arthur
Hallo Arthur,
ich denke das liegt daran, wie js strings behandelt. Der von Dir angegebene columnspec wert wird von js wohl als string und nicht als array interpretiert. Hat wohl etwas damit zu tun, dass der string \ enthält, welche von js als Maskierungswerte für nachfolgende Zeichen interpretiert werden.
Lange Rede kurzer Sinn: Wenn Du die \ durch \\ ersetzt sollte es klappen.
data-columnspec='["gaskosten:abrechnung_berechnet:::$val=~s/.*T:\\s([-\\.\\d]+).*/$1/eg","wasser:abrechnung_berechnet:::$val=~s/.*T:\\s([-\\.\\d]+).*/$1/eg"]'
Hallo eki,
danke, das war's.
Viele Grüße
Arthur
Zitat von: eki am 16 November 2015, 11:01:25
Hallo Michael,
ich habe Dein Logfile mal bei mir als dummy eingebunden (also dummy mit Deinem Device Namen definiert, und Log mit entsprechendem Namen)
define OG_GZ_RTth dummy
define OG_GZ_HZ_FL FileLog demolog/OG_GZ_HZ-112015.log_ Sens.Out:T:.*
und mit Deinem Template bei mir geplottet, komischerweise funktioniert das bei mir (siehe Bild). Was mir aufgefallen ist, war, dass Dein Logfile im Namen am Ende einen "_" hatte.
Hallo eki,
der underline kam von meiner Testerei, das sollte soweit i.o. sein.
Ich schau mal weiter ob ich über debugausgaben etwas raus bekomme.
Danke Dir
Zitat von: eki am 16 November 2015, 12:58:31
@SirUli,
kannst Du das auch mal mit der Version, die ich an wkarl geschickt habe testen, dort ist eine Korrektur bezüglich "fullsize" enthalten, bin mir aber nicht sicher, ob das auch Deine Probleme löst
Hmmm fast. Also das mit fullsize hat sich gelöst. Aber wenn ich zwei Charts auf einer Seite habe, mag das untere noch nicht so recht. Initiales Bild der obigen Definition:
(http://forum.fhem.de/index.php?action=dlattach;topic=37378.0;attach=40657;image)
Bild nach erstem Klick zurück (1 Tag):
(http://forum.fhem.de/index.php?action=dlattach;topic=37378.0;attach=40655;image)
Bild nach zweitem Klick zurück:
(http://forum.fhem.de/index.php?action=dlattach;topic=37378.0;attach=40659;image)
Gehe ich dann wieder nach vorne, so kehrt unten das Chart auch wieder zurück :)
Ich hab das jetzt bei mir auch nachgestellt. Scheint aber zumindest teilweise auch ein grundsätzliches ftui bzw gridster Problem zu sein. Irgendwie hat das innere Fenster der Grid Rechtecke die gleiche Größe wie das äußere, obwohl da ja noch der Header abgehen müsste. Ich melde mich wenn ich eine Idee zur Lösung habe
Hallo,
ich habe auch das Problem, wie MichaelT, dass ich nur einen Graphen sehe!
Habe jetzt den Abend ein wenig rumprobiert.
Nun habe ich etwas dazu herausgefunden, und zwar wenn ich auf die Legende klicke kann ich die anderen Graphen mit dazu/ab wählen.
Nur wie ich beim laden der Seite alle Graphen aktiviere, das weiß ich leider noch nicht.
Ich finde es eigentlich gut, wenn nicht alle Graphen gleich aktiv sind, eventuell könnte man ja so was einbauen?
data-aktiv='["1","0","1","..."]' (default=alle)
Sonst muss ich sagen super Arbeit!!
Gruß Daniel
@daniel_k: Eigentlich sollten alle Graphen beim Starten aktiviert sein, warum das bei Euch offensichtlich nicht so ist, verstehe ich nicht so ganz, da muss ich noch mal genauer reinschauen. Das mit der Voreinstellung als data Angabe werde ich mir mal vornehmen.
@SirUli: Ich habe jetzt mal eine Version hier angehängt, die hoffentlich das Problem nicht mehr hat. Kannst Du damit bitte mal bei Dir testen, damit ich das dann demnächst freigeben kann.
Hi,
ich habe ein Problem mit dem Auslesen eines Log-Werts mit Doppelpunkt, und wenn ich den Doppelpunkt mit Backslash maskiere, crasht fhem so fürchterlich, dass nur ein Reboot des Raspi hilft.
Im Log steht u.a.:
2015-11-19_01:05:21 Pool pH-_Rest: 16.00 %
2015-11-19_01:05:50 Pool ph: 7.19 --
2015-11-19_01:05:50 Pool ph+: 18.00 %
2015-11-19_01:05:50 Pool CPU_Temp: 43.54 C
2015-11-19_01:05:50 Pool Redox: 733.69 mV
2015-11-19_01:05:51 Pool Wassertmp.: 18.38 C
2015-11-19_01:05:51 Pool Zelle: 0.00 --
2015-11-19_01:05:51 Pool Pumpe: 0.00 --
2015-11-19_01:05:52 Pool pH-_Rest: 16.00 %
Klappt soweit auch alles gut. Das Problem sind die pH-Daten. Wenn ich sie die Kurve für den pH-Wert ("2015-11-19_01:05:50 Pool ph: 7.19 --") mit
data-columnspec='["4:Pool.pH:"]'
definiere, wird offensichtlich alles, was mit "pH" beginnt, für den Graph herangezogen, der dementsprechend aussieht.
data-columnspec='["4:Pool.pH\:"]'
führt zu besagtem Total-Crash.
Ist das irgendwie hinzubekommen? Hab auch schon Anführungszeichen ausprobiert, ohne Erfolg.
Grüße
Martin
Zitat von: dadoc am 19 November 2015, 15:56:28
data-columnspec='["4:Pool.pH\:"]'
führt zu besagtem Total-Crash.
ich denke Du musst nach dem \: noch einen weiteren also \:: setzen, weil der 2. : dann die Trennung zwischen den Eingabefeldern ist.
Crasht mit \:: leider genau so wie mit \:
eine zweite Möglichkeit wäre auszuschließen dass nach dem ph ein - oder + kommt also so etwas wie pH[^-^+]:
Damit klappt es, vielen Dank!
Hi,
gibt es eigentlich einen "Mindestabstand" zwischen "data-minvalue" und "data-maxvalue"?
Ich wollte damit eine Kurve für den pH-Wert anzeigen, der normalerweise immer um 7,20 (+/- 0,2) liegt.
Mit
data-minvalue="6.5"
data-maxvalue="8"
funktioniert es. Mit z.B.
data-minvalue="6.5"
data-maxvalue="7.5"
nicht, d.h. es wird keine Kurve angezeigt, obwohl kein wert im Log > 7.5 bzw. < 6.5 ist.
Grüße
Martin
Die maxvalue und minvalue Werte werden gerundet (Idee war dass keine krummen Werte an der Achse stehen sollen), das heißt, dass in Deinem Fall der max Wert auf 7 gesetzt wird und da Deine Werte ja wohl eher über 7 liegen, ist kein Plot zu sehen.
Ich werde das mal dahingehend ändern, dass ich bei gegebenen min/max Werten nicht runde, wenn dann einer krumme Werte eingibt, dann hat er selbst Schuld.
Danke Eki, das ist hilfreich, wenn man minimale Abweichungen gut sichtbar visualisieren will.
Hallo Eki,
das mit den inaktiven Graphen hat sich geklärt.
Ich hatte eine ältere Version des widget_chart.js :-[!!
Und das trotz dem ich heute erst ein Update gemacht hatte, und gestern, und vorg...
Jetzt habe ich gerade die Datei aus der Antwort #141 geladen und siehe da, alle Graphen da ;D !
Nun hab ich aber noch eine andere Frage.
wie kann ich Daten aus mehreren Logs einlesen?
Das hier geht:
<li data-row="2" data-col="2" data-sizex="8" data-sizey="2">
<header> Wohnzimmer</header>
<div class="normal">
<div class="normal"
data-type="chart"
data-logdevice='["FileLog_Wohnen"]'
data-columnspec='["4:measured-temp:1:int","4:actuator:1:int","4:desired-temp:1:int"]'
data-style='["ftui l0","ftui l1fill","ftui l2"]'
data-ptype='["lines","lines","lines"]'
data-uaxis='["primary","secondary","primary"]'
data-legend='["Ist-Temperatur","Aktor","Soll-Temperatur"]'
data-yunit="°C"
data-ytext="Temperature"
data-minvalue="0"
data-maxvalue="40"
data-yunit_sec="%"
data-ytext_sec="Aktor "
data-height="200"
data-yticks="auto"
data-minvalue_sec="0"
data-maxvalue_sec="70"
data-nofulldays="false"
data-daysago_start="0"
data-daysago_end="-1"
data-cursorgroup="1"
data-scrollgroup="1"
data-showlegend="true"
data-crosshair="true"
data-xticks="auto">
</div>
</div>
</li>
Und das hier nicht:
<li data-row="2" data-col="2" data-sizex="8" data-sizey="2">
<header> Wohnzimmer</header>
<div class="normal">
<div class="normal"
data-type="chart"
data-logdevice='["FileLog_Wohnen","FileLog_Schlafen","FileLog_Bad"]'
data-columnspec='["4:measured-temp:1:int","4:actuator:1:int","4:desired-temp:1:int"]'
data-style='["ftui l0","ftui l1fill","ftui l2"]'
data-ptype='["lines","lines","lines"]'
data-uaxis='["primary","secondary","primary"]'
data-legend='["Ist-Temperatur","Aktor","Soll-Temperatur"]'
data-yunit="°C"
data-ytext="Temperature"
data-minvalue="0"
data-maxvalue="40"
data-yunit_sec="%"
data-ytext_sec="Aktor "
data-height="200"
data-yticks="auto"
data-minvalue_sec="0"
data-maxvalue_sec="70"
data-nofulldays="false"
data-daysago_start="0"
data-daysago_end="-1"
data-cursorgroup="1"
data-scrollgroup="1"
data-showlegend="true"
data-crosshair="true"
data-xticks="auto">
</div>
</div>
</li>
Sollte doch so funktionieren, oder?
Hier bleibt alles schwarz und nichts wird geladen.
;) Hab ich noch eine Version übersehen? ;)
Danke für die Hilfe.
Gruß Daniel
welche Version vom widget_chart.js kann ich mal wieder bei Github einchecken?
Das mit den unterschiedlichen Logdevices sollte so gehen, da habe ich set der letzten freigegebenen Version nichts mehr geändert. Ich schau's mir mal an.
Die Versionen, die ich zwischenzeitlich verteilt habe, waren ja eher Tests fuer einzelne Verbesserungen. Ich bin gerade dabei, das alles zusammen zu packen und noch mal ein bisschen zu testen. Anfang der Woche sollte ich dann was haben.
Hallo eki,
hatte mich noch gar nicht gemeldet. Bei mir ist der gleiche Effekt wie bei Daniel_k: Ich muss die restliche Graphen aktivieren, dann gehts.
Gruß und Danke
Michael
Hallo an alle.
Ich bin relativ neu beim fhem und bastel gerade am "Tablet-UI"
Könntet ihr mir evtl. helfen, indem ihr mir genau erklären könnt wie ich Wetterdaten z.b.: Proplanta ins UI angezeigt bekomme!?
Also von allen befehlen im fhem bis hin zu dem Quellcode in der UI index.htm (Commandref habe ich bereits gelesen aber komme nicht so richtig weiter)
Die Wetterausgabe bei chris1284 finde ich prima. http://forum.fhem.de/index.php?action=dlattach;topic=37378.0;attach=35125;image
ich hoffe ihr könnt mir weiterhelfen.
Vielen Dank im voraus
Gruß Thomas
Hallo Thomas,
in der fhem.cfg definiert man es so:
define AgroWeather PROPLANTA Dresden
attr AgroWeather alias Proplanta Wetter Dresden
attr AgroWeather room Garten
Wenn man dann im FHEMWEB die unzähligen Reading sieht, kann man beginnen, im FTUI sich die Werte zu holen.
<li data-row="3" data-col="11" data-sizex="2" data-sizey="7">
<header>WETTER</header>
<div data-type="label" data-device="OutTemp" data-part="2" data-limits='[-73,10,23]' data-colors='["#6699FF","#aa6900","#ad3333"]' data-unit="%B0C%0A" class="bigger thin"></div>
<div data-type="label" class="cell">Außentemperatur</div>
<div data-type="label" class="cell darker top-space">Heute</div>
<div data-type="weather" data-device="AgroWeather" data-get="fc0_weatherDay" class="cell big"></div>
<div data-type="label" data-device="AgroWeather" data-get="fc0_weatherDay" class="cell top-narrow"></div>
<div data-type="label" data-device="AgroWeather" data-get="fc0_tempMin" data-unit="%B0C%0A" class="inline large darker top-narrow-10"></div>
<div data-type="label" data-device="AgroWeather" data-get="fc0_tempMax" data-unit="%B0C%0A" class="inline large top-narrow-10"></div>
<div data-type="label" class="cell darker top-space">Morgen</div>
<div data-type="weather" data-device="AgroWeather" data-get="fc1_weatherDay" class="cell big"></div>
<div data-type="label" data-device="AgroWeather" data-get="fc1_weatherDay" class="cell top-narrow"></div>
<div data-type="label" data-device="AgroWeather" data-get="fc1_tempMin" data-unit="%B0C%0A" class="inline large darker top-narrow-10"></div>
<div data-type="label" data-device="AgroWeather" data-get="fc1_tempMax" data-unit="%B0C%0A" class="inline large top-narrow-10"></div>
<div data-type="label" class="cell darker top-space">Übermorgen</div>
<div data-type="weather" data-device="AgroWeather" data-get="fc2_weatherDay" class="cell big"></div>
<div data-type="label" data-device="AgroWeather" data-get="fc2_weatherDay" class="cell top-narrow"></div>
<div data-type="label" data-device="AgroWeather" data-get="fc2_tempMin" data-unit="%B0C%0A" class="inline large darker top-narrow-10"></div>
<div data-type="label" data-device="AgroWeather" data-get="fc2_tempMax" data-unit="%B0C%0A" class="inline large top-narrow-10"></div>
</li>
super vielen Dank jetzt komme ich ein Stück weiter ;)
Zitat von: eki am 19 November 2015, 12:53:37
@SirUli: Ich habe jetzt mal eine Version hier angehängt, die hoffentlich das Problem nicht mehr hat. Kannst Du damit bitte mal bei Dir testen, damit ich das dann demnächst freigeben kann.
Viiiiel Besser. Jetzt springt es nur noch, wenn das Chart keine weiteren Werte anzeigt (also z.B. für morgen). Dann wird das Chart schmaler, Höhe bleibt die gleiche - aber das stört mich nicht so :) Sehr cool, vielen Dank!!!
Hi,
bin auch grad dabei, meine TabletUI zusammenzubasteln.
Habe mir dabei ein wenig von Harry66's Layout abgesehen, scheitere jetzt aber an einem Problem mit dem Rotor-Widget:
Wenn ich nur EIN Weather-Icon (zB fc0_weatherDay) anzeigen lasse, ist das mit dem Text zusammen schön mittig zentriert.
Binde ich das aber in ein Rotor-Widget ein, um morgens, tagsüber, abends und nacht anzeigen zu lassen, ist das Icon und der Text nach unten verschoben.
Ich komm leider nicht drauf, warum. Hat jemand ne Idee dazu?
Hier erstmal der Code des ganzen Gridster-Objekts (Rotor aktiv, einzelnes weatherDay auskommentiert)
<li data-row="1" data-col="2" data-sizex="6" data-sizey="4" class="semitransparent">
<header> Wetter in Göllersdorf </header>
<table border="0px" width="100%">
<tr>
<td class="A2"><div data-type="label"
data-device="ProPlanta"
data-get="fc0_date"></div></td>
<td class="B2"><center><div data-type="label" class="inline small"><big>↑</big><small> Sonne:</small><br></div>
<div data-type="label"
data-device="myTwilight"
data-get="sr_civil"></div></center></td>
<td class="C2"><center><div data-type="label" class="inline small"><big>↓</big><small> Sonne:</small><br></div>
<div data-type="label"
data-device="myTwilight"
data-get="ss_civil"></div></center></td>
<td class="D2"><center><div data-type="label" class="inline small"><small>Sichtweite:</small><br></div>
<div data-type="label"
data-device="ProPlanta"
data-get="visibility"
data-unit=" km"></center></td>
</tr>
<tr>
<td class="tg-031e"><div data-type="label"><small>Temp<br></small></div>
<center><div data-type="label"
data-device="Temp_Aussen"
data-get="temperature"
data-limits="[-50,0,10,25,30,40]"
data-colors='["#9999ff","#ffbdff","#aa6900","#ff6900","#ff3333","#ff0000"]'
data-unit="%B0C%0A"
class="inline cell big"></div></center></td>
<td class="tg-031e" colspan="2" rowspan="2">
<!-- <div data-type="weather"
data-device="ProPlanta"
data-get="fc0_weatherDay"
data-imageset="kleinklima"
style="font-size:250%">
</div>
Tagsüber: 
<div data-type="label"
data-device="ProPlanta"
data-get="fc0_weatherDay"
class="inline">
</div>
-->
<div data-type="rotor" class="fade semitransparent">
<ul>
<li>
<div data-type="weather"
data-device="ProPlanta"
data-get="fc0_weatherMorning"
data-imageset="kleinklima"
style="font-size:250%">
</div>
Morgens: 
<div data-type="label"
data-device="ProPlanta"
data-get="fc0_weatherMorning"
class="inline">
</div>
</li>
<li>
<div data-type="weather"
data-device="ProPlanta"
data-get="fc0_weatherDay"
data-imageset="kleinklima"
style="font-size:250%">
</div>
Tagsüber: 
<div data-type="label"
data-device="ProPlanta"
data-get="fc0_weatherDay"
class="inline">
</div>
</li></ul>
</div>
</td>
<td><center>
<div data-type="wind_direction"
data-device="Anemometer"
data-direction="wind_dir"
data-speed="wind_speed"
data-calm="-"
data-size="80"
data-tickstep="10"
data-angleoffset="0">
</div>
</center></td>
</tr>
<tr>
<td class="tg-031e"><div data-type="label"><small>Feuchte<br></small></div>
<center><div data-type="label"
data-device="Temp_Aussen"
data-get="humidity"
data-limits="[0,40,60]"
data-colors='["#9999ff","#aa6900","#ff6900"]'
data-unit=" %"
class="inline cell big">
</div></center></td>
<td class="tg-031e">
<center><div data-type="label"><small>Wind</small><br></div>
<div data-type="label"
data-device="Anemometer"
data-get="kmh"
data-limits="[0, 19, 28, 38, 49, 74, 102, 117]"
data-colors='["#ffffff","#dddddd","#aa6900","#aa6900","#ff9999","#ff6666","#ff3333","#ff0000"]'
style="display:inline"
class="inline">
</div>
</center>
</td>
</tr>
<tr>
<td class="A5"><center><div data-type="label" class="inline"><small>UV-Index</small></div><br>
<div data-type="label"
data-device="ProPlanta"
data-get="fc0_uv"
data-limits="[0,2,10]"
data-colors='["grey","orange","red"]'
style="display:inline">
</div>
</center>
</td>
<td class="B5"><center><div data-type="label" class="inline"><small>Regenrisiko</small></div><br>
<div data-type="label"
data-device="ProPlanta"
data-get="fc0_chOfRainDay"
data-unit=" %"
data-limits="[0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100]"
data-colors='["#32AD4F","#3AAB2C","green","green","green","#F6AA1D","green","green","green","green","#F6451D"]'
style="display:inline">
</div></center></td>
<td class="C5"><center><div data-type="label" class="inline"><small>Taupunkt</small></div><br>
<div data-type="label"
data-device="Temp_Aussen"
data-get="dewpoint"
data-unit="%B0C%0A"></div>
</center></td>
<td class="D5"><center><div data-type="label" class="inline"><small>Luftdruck</small></div><br>
<div data-type="label"
data-device="Temp_Badezimmer"
data-get="pressure"
data-unit=" hPa"
data-limits="[0,950,1000]"
data-colors='["#ff9999","#aa6900","#9999ff"]'></div>
<div data-type="klimatrend" data-device="Temp_Badezimmer" data-get="statPressureTendency"></div>
</center>
</td>
</tr>
</table>
</li>
Bin für jeden Tip dankbar,
schönen Abend noch,
Stefan
Zitat von: setstate am 20 November 2015, 18:39:15
welche Version vom widget_chart.js kann ich mal wieder bei Github einchecken?
Leider hatte ich diese Woche nicht genug Zeit, die neue chart widget Version dauert also noch ein paar Tage.
@setstate: wenn Du möchtest, kannst Du die Version unter http://forum.fhem.de/index.php?action=dlattach;topic=37378.0;attach=40547 freigeben, die enthält fast alle Korrekturen, aber noch nicht die neuen Features.
Hallo
Ich habe die Temperatur-Plots mittels dem widget-chart in das PopUp eingebaut. Grundsätzlich scheint das zu funktionieren.
Im Moment zeigt das PopUp die Plots nur sehr langsam an (ist klar, die Daten müssen ja ausgewertet werden), aber in den meisten Fällen werden die Plots, nachdem das PopUp geöffnet wird, gar nicht gezeigt. Wo könnte das Problem liegen?
<li data-row="4" data-col="8" data-sizex="1" data-sizey="2">
<div data-type="popup" data-height="650px" data-width="950px">
<header>Temperaturen</header>
<div class="dialog">
<header>Temperaturen und Luftfeuchtigkeit</header>
<div class="normal"
data-type="chart"
data-logdevice='["FileLog_Elektronik"]'
data-columnspec='["4:Elektronik.T:T:","6:Elektronik.*:H:"]'
data-style='["ftui l2","ftui l1"]'
data-ptype='["lines","lines"]'
data-uaxis='["primary","secondary"]'
data-legend='["Temperatur","Feuchtigkeit"]'
data-yunit="° C"
data-ytext="Temperatur"
data-minvalue="auto"
data-maxvalue="auto"
data-yunit_sec="%"
data-ytext_sec="Luftfeuchtigkeit"
data-height="200"
data-yticks="auto"
data-minvalue_sec="auto"
data-maxvalue_sec="auto"
data-nofulldays="true"
data-daysago_start="0"
data-daysago_end="-1"
data-cursorgroup="1"
data-scrollgroup="1"
data-showlegend="true"
data-crosshair="true"
data-xticks="auto">
</div>
</div>
</div>
<div class="container narrow small inline">
<div data-type="label" data-device="OG_Temperatur" data-get="temperature" data-limits='[-73,10,18,25,30]' data-colors='["Aqua","Aquamarine","SeaGreen","IndianRed","Red"]' data-unit="%B0C%0A" class="cell big thin"></div>
<div data-type="label" class="narrow">Galerie</div>
<div data-type="label" data-device="WZ_Temperatur" data-get="temperature" data-limits='[-73,10,18,25,30]' data-colors='["Aqua","Aquamarine","SeaGreen","IndianRed","Red"]' data-unit="%B0C%0A" class="cell big thin"></div>
<div data-type="label" class="narrow">Wohnzimmer</div>
<div data-type="label" data-device="UG_Temperatur" data-get="temperature" data-limits='[-73,10,18,25,30]' data-colors='["Aqua","Aquamarine","SeaGreen","IndianRed","Red"]' data-unit="%B0C%0A" class="cell big thin"></div>
<div data-type="label" class="narrow">Untergeschoss</div>
<div data-type="label" data-device="Elektronik" data-get="temperature" data-limits='[-73,5,18,25,30]' data-colors='["Aqua","Aquamarine","SeaGreen","IndianRed","Red"]' data-unit="%B0C%0A" class="cell big thin"></div>
<div data-type="label" class="narrow">Elektronik</div>
<div data-type="label" data-device="TK_Temperatur" data-get="temperature" data-limits='[-73,10,18,25,30]' data-colors='["Aqua","Aquamarine","SeaGreen","IndianRed","Red"]' data-unit="%B0C%0A" class="cell big thin"></div>
<div data-type="label" class="narrow">Tiefklühler</div>
</div>
</li>
Hallo zusammen,
ich würde mich freuen, wenn ein paar neue Demos eingestellt würden.
Ich bin noch auf der Suche nach neuen Ideen im Bezug auf das UI. Da ich nicht wirklich fit in Sachen CSS und HTML bin, bin ich eure Mithilfe angewiesen.
Eine Idee von mir wäre auch, ein Theard pro Widget incl. Beispielen (Bilder) und der dazugehörige Code. Das würde den Hauptthread entlasten für spezielle Anfragen.
Auf geht´s. ;D
Hallo skuggy,
ich bereite auch gerade ein paar Demo-Seiten für Github vor, die ich nach und nach ausbauen und erweitern will.
Dort kann man dann schön die vielen Möglichkeiten sehen und live testen und sich den Code ansehen.
Bis jetzt ist nur die Seite zum Widget Range online: http://knowthelist.github.io/fhem/tablet/demo_range.html
Hallo Zusammen,
das fände ich auch gut, bin in der gleichen Situation wie Du... Ideensuche, wenig Plan von HTML und CSS (leider) ;)
@setstate , cool Danke !
kvo1
Zitat von: setstate am 02 Dezember 2015, 07:48:30
Hallo skuggy,
ich bereite auch gerade ein paar Demo-Seiten für Github vor, die ich nach und nach ausbauen und erweitern will.
Dort kann man dann schön die vielen Möglichkeiten sehen und live testen und sich den Code ansehen.
Bis jetzt ist nur die Seite zum Widget Range online: http://knowthelist.github.io/fhem/tablet/demo_range.html
Vielen Dank. Ich freu mich auf die Demoseiten ;)
Zitat von: setstate am 02 Dezember 2015, 07:48:30
Bis jetzt ist nur die Seite zum Widget Range online: http://knowthelist.github.io/fhem/tablet/demo_range.html
Im ersten Beispiel verwendest du dort data-substitution ... das scheint bei mir aber gar nicht definiert zu sein ???
Zitat von: outhouse am 29 November 2015, 15:49:57
Hallo
Ich habe die Temperatur-Plots mittels dem widget-chart in das PopUp eingebaut. Grundsätzlich scheint das zu funktionieren.
Im Moment zeigt das PopUp die Plots nur sehr langsam an (ist klar, die Daten müssen ja ausgewertet werden), aber in den meisten Fällen werden die Plots, nachdem das PopUp geöffnet wird, gar nicht gezeigt. Wo könnte das Problem liegen?
<li data-row="4" data-col="8" data-sizex="1" data-sizey="2">
<div data-type="popup" data-height="650px" data-width="950px">
<header>Temperaturen</header>
<div class="dialog">
<header>Temperaturen und Luftfeuchtigkeit</header>
<div class="normal"
data-type="chart"
data-logdevice='["FileLog_Elektronik"]'
data-columnspec='["4:Elektronik.T:T:","6:Elektronik.*:H:"]'
data-style='["ftui l2","ftui l1"]'
data-ptype='["lines","lines"]'
data-uaxis='["primary","secondary"]'
data-legend='["Temperatur","Feuchtigkeit"]'
data-yunit="° C"
data-ytext="Temperatur"
data-minvalue="auto"
data-maxvalue="auto"
data-yunit_sec="%"
data-ytext_sec="Luftfeuchtigkeit"
data-height="200"
data-yticks="auto"
data-minvalue_sec="auto"
data-maxvalue_sec="auto"
data-nofulldays="true"
data-daysago_start="0"
data-daysago_end="-1"
data-cursorgroup="1"
data-scrollgroup="1"
data-showlegend="true"
data-crosshair="true"
data-xticks="auto">
</div>
</div>
</div>
<div class="container narrow small inline">
<div data-type="label" data-device="OG_Temperatur" data-get="temperature" data-limits='[-73,10,18,25,30]' data-colors='["Aqua","Aquamarine","SeaGreen","IndianRed","Red"]' data-unit="%B0C%0A" class="cell big thin"></div>
<div data-type="label" class="narrow">Galerie</div>
<div data-type="label" data-device="WZ_Temperatur" data-get="temperature" data-limits='[-73,10,18,25,30]' data-colors='["Aqua","Aquamarine","SeaGreen","IndianRed","Red"]' data-unit="%B0C%0A" class="cell big thin"></div>
<div data-type="label" class="narrow">Wohnzimmer</div>
<div data-type="label" data-device="UG_Temperatur" data-get="temperature" data-limits='[-73,10,18,25,30]' data-colors='["Aqua","Aquamarine","SeaGreen","IndianRed","Red"]' data-unit="%B0C%0A" class="cell big thin"></div>
<div data-type="label" class="narrow">Untergeschoss</div>
<div data-type="label" data-device="Elektronik" data-get="temperature" data-limits='[-73,5,18,25,30]' data-colors='["Aqua","Aquamarine","SeaGreen","IndianRed","Red"]' data-unit="%B0C%0A" class="cell big thin"></div>
<div data-type="label" class="narrow">Elektronik</div>
<div data-type="label" data-device="TK_Temperatur" data-get="temperature" data-limits='[-73,10,18,25,30]' data-colors='["Aqua","Aquamarine","SeaGreen","IndianRed","Red"]' data-unit="%B0C%0A" class="cell big thin"></div>
<div data-type="label" class="narrow">Tiefklühler</div>
</div>
</li>
auf Anhieb sehe ich nichts was das genannte Verhalten erklärt. Sind denn die Achsen zu sehen und nur die Graphen fehlen oder fehlen auch die Achsen. Welchen Browser verwendest Du? Bekommst Du irgendwelche Nachrichten auf der Browser Konsole. Eventuell könntest Du noch ein paar Zeilen aus dem Logfile posten, dann kann ich versuchen das nachzuvollziehen.
Die neuen Live-Demo Seiten mit den neusten Widgets ist online. Erweiterungen erfolgen nach und nach ...
http://knowthelist.github.io/fhem/tablet/demo_widgets.html
sehr schön... Danke
Hallo zusammen,
FTUI fasziniert mich nach der kurzen Zeit immer mehr! Daher zuerst einmal ein dickes Lob an alle Entwickler hier die auch die Erweiterungen nur so aus dem Boden schießen lassen!
Ich bin gerade dabei mir für meine Heizungssteuerung eine Seite mit Charts zu bauen. Ich hatte zuerst die SVG Plots über iframes eingebunden. Funktioniert aber sieht fürchterlich aus! Ich habe in den neuen Charts bereits Soll- und Ist-Temperatur und Luftfeuchte drin. In den SVG Plots habe ich zusätzlich noch die über FS20 angesteuerten Heizungsventile der Fußbodenheizung eingebunden. Da diese im Logfile nur ein on und off erzeugen habe ich im GPLOT eine DefaultValue und eine Function: $fld[2]=~"on"?50:40 hinterlegt.
Ich breche mir allerdings seit einer guten Stunde einen ab um das irgendwie in die Charts zu bekommen. Ich würde mich sehr über einen Tipp freuen.
Bernd
Zitat von: BerndF am 03 Dezember 2015, 16:56:25
Ich hatte zuerst die SVG Plots über iframes eingebunden. Funktioniert aber sieht fürchterlich aus!
Ich finde, so fürchterlich sehen die SVG Plots nicht aus, die FTUI Plots sind aber sicherlich hübscher.
VG
Sven
Hallo Sven,
"fürchterlich" ist wirklich übertrieben aber mich stört das "helle" auf dem Display ;)
Ich komme hier einfach nicht weiter... :-[
Hallo Zusammen,
hier mal der aktueller Zustand meiner Visu (+ Fertig, - Todo):
+ Es gibt im EG (ein großer Raum) ein Info-Terminal (Nexus7). Dies habe ich mit einer Eigenbauhalterung an der Wand befestigt.
+ Es gibt eine Übersicht aller Räume mit aktuelle Temperaturen und Sammelmeldung Fenster / Licht.
Denon Audio, Versorgung Gas/Strom/Heizung und Abfahrtsmonitor Bahnhof (Pendler ;-< )
+ Je Raum gibt es ein Popup mit Heizung, Rollo, Fenster und Licht (gefällt mir vom Aussehen noch nicht).
+ Screensaver (ob der wirklich schützt?) mit Großer Infoanzeige
- Calllist Fritzbox
- Außenbereich visualisieren (Ist schon an FHEM angebunden)
- Alarmmeldungen auf Screensaver
- Sprachausgabe erweitern (darf aber nicht nerven) RPi mit Lautsprecher und T2S
- Visu Heizung verbessern, derzeit nur Brenner/Vorlauf/Rücklauf/Sollwert mit Themostat-Widget
Ich finde es echt Klasse, was setstate und alle anderen Beteiligten in der Visu und in FHEM geschaffen haben.
Hut ab.
Gruß
Michael
Zitat von: setstate am 03 Dezember 2015, 15:43:04
Die neuen Live-Demo Seiten mit den neusten Widgets ist online. Erweiterungen erfolgen nach und nach ...
http://knowthelist.github.io/fhem/tablet/demo_widgets.html
@setstate: Super Arbeit, ich freu mich auf weitere Seiten... Das ThermostatWidget i. V. mit Homematik würde mich brennend interessieren 8)
@Bernd und Sven: Zur Anpassung der Farben in den SVG-Plots hatte ich mal etwas geschriebene (http://forum.fhem.de/index.php/topic,34233.msg305301.html#msg305301 (http://forum.fhem.de/index.php/topic,34233.msg305301.html#msg305301)). Ich bin allerdings aus Zeitmangel noch nicht dazu gekommen, dort weiterzumachen oder den Vergleich zur aktuellen FTUI-Lösung vorzunehmen. SVG hat für mich den Vorteil, die Plots auch in der "Expertenansicht" (FHEMWEB) verwenden zu können.
Grüße,
Mario
Zitat von: BerndF am 03 Dezember 2015, 16:56:25
Hallo zusammen,
FTUI fasziniert mich nach der kurzen Zeit immer mehr! Daher zuerst einmal ein dickes Lob an alle Entwickler hier die auch die Erweiterungen nur so aus dem Boden schießen lassen!
Ich bin gerade dabei mir für meine Heizungssteuerung eine Seite mit Charts zu bauen. Ich hatte zuerst die SVG Plots über iframes eingebunden. Funktioniert aber sieht fürchterlich aus! Ich habe in den neuen Charts bereits Soll- und Ist-Temperatur und Luftfeuchte drin. In den SVG Plots habe ich zusätzlich noch die über FS20 angesteuerten Heizungsventile der Fußbodenheizung eingebunden. Da diese im Logfile nur ein on und off erzeugen habe ich im GPLOT eine DefaultValue und eine Function: $fld[2]=~"on"?50:40 hinterlegt.
Ich breche mir allerdings seit einer guten Stunde einen ab um das irgendwie in die Charts zu bekommen. Ich würde mich sehr über einen Tipp freuen.
Bernd
Einfach die Definition aus dem GPLOT auch in die columnspecs in der chart widget definition übernehmen. Also für eine Zeile im Logfile die so aussieht:
2013-08-12_00:03:25 Garden T: 14.0 H: 72 W: 0.0 R: 70.4 IR: no etwa so:
data-columnspec='[..,"12:Garden.T\\x3a:50:$fld[11]=~\"no\"?40:50",...]'
Hallo,
heute habe ich mal wieder ein Zeit mich um mein FT-UI zu kümmern. Update heute morgen durchgeführt (fhem und FT-UI). Mein Test-Konstrukt 'Zwei Graphen in einem popup' zeigt ausser die Label mit den Titel der Graphen nichts an. Nicht einmal die Achsen.
Dann habe ich die js-Datei, die eki vor einiger Zeit zur Verfügung gestellt hat gegen die aktuelle getauscht. Aber keine Änderung des Verhaltens.
Hat jemand das gleiche Verhalten oder eine Idee wo ich weitersuchen kann?
Danke und ciao
Walter
@wkarl: Hattest Du nicht berichtet, dass Dein Setup jetzt klappt? Um dazu etwas sagen zu können , bräuchte ich am besten Deine Definitionen und einen Auszug aus dem zugehörigen Logfile(s). Hast Du irgendwelche Konsoleausgaben im Browser?
Zitat von: wkarl am 06 Dezember 2015, 12:58:44
Hallo,
heute habe ich mal wieder ein Zeit mich um mein FT-UI zu kümmern. Update heute morgen durchgeführt (fhem und FT-UI). Mein Test-Konstrukt 'Zwei Graphen in einem popup' zeigt ausser die Label mit den Titel der Graphen nichts an. Nicht einmal die Achsen.
Dann habe ich die js-Datei, die eki vor einiger Zeit zur Verfügung gestellt hat gegen die aktuelle getauscht. Aber keine Änderung des Verhaltens.
Hat jemand das gleiche Verhalten oder eine Idee wo ich weitersuchen kann?
Danke und ciao
Walter
Hallo Walter
Im Beitrag #173 habe ich dasselbe oder ein ähnliches Problem erwähnt. Wenn ich nur 1 Chart in das Popup packe, erscheint der Chart erst, nachdem die nächste Temperaturmeldung reinkommt. Packe ich 2 Charts ins Popup, passiert rein gar nichts.
Chris
Hallo Chris,
Deinen Beitrag habe ich gesehen und getestet, jedoch ohne Erfolg. Heute morgen update durchgeführt, nochmal nach weiteren Informationen gesucht, die graphische Ausgabe auf einen plot reduziert, Problem bleibt bestehen.
Folgend der code und ein screenshot.
Danke und ciao walter
PS: sorry für die verspätete Reaktion. Ich bin aktuell mit einem Firmen-Startup für DACH und Osteuropa beschäftigt.
<html>
<header><font size="+1">Büro</font></header>
<div class="container">
<div class="cell big">
<div data-type="popup" data-width="1000px" data-height="600px">
<div>
<div class="inline"
data-type="label"
data-device="Buero_TC" data-get="measured-temp" data-unit="%B0C%0A" data-fix="1"
data-limits='[-20,20,24]' data-colors='["skyblue","darkorange","orangered"]'>
</div>
<div class="inline"
data-type="label"
data-device="Buero_TC" data-get="humidity" data-unit="%%0A" data-fix="1"
data-limits='[0,40,60]' data-colors='["skyblue","darkorange","orangered"]'>
</div>
</div>
<div class="dialog">
<header><font size="+1">Büro</font></header>
<div class="cell" data-type="label"><font size="+1">Fussboden</font></div>
<div class="nobuttons"
data-type="chart"
data-device="MyDbLog"
data-logdevice='["MyDbLog"]'
data-logfile='["HISTORY"]'
data-columnspec='["Buero_TC:measured-temp:::"]'
data-style='["ftui l0fill"]'
data-ptype='["lines"]'
data-uaxis='["primary"]'
data-legend='["IST"]'
data-yunit="°C" data-ytext="Temperatur" data-minvalue="10" data-maxvalue="auto"
data-yticks="auto"
data-daysago_start="0" data-daysago_end="-1"
data-xticks="auto"
data-crosshair="true"
data-cursorgroup="1"
data-scrollgroup="1"
data-showlegend="true"
data-height="250px"
data-width="90%">
</div>
</div>
</div>
</div>
<div class="cell" data-type="label">Heizkörper</div>
<div class="cell">
<table><tr><td>
<div class="inline"
data-type="thermostat"
data-device="Buero_HK_Clima" data-get="desired-temp" data-set="desired-temp" data-temp="measured-temp" data-valve="ValvePosition"
data-min="0" data-max="30" data-step="0.5"
data-off="controlManu off" data-boost="controlMode boost"
data-fgColor="darkorange"
data-height="100px"
data-width="100px">
</div>
</td><td>
<div class="cell inline small">
<div data-type="multistatebutton"
data-device="Buero_HK_Clima" data-get="controlMode" data-get-on='["auto","manual"]'
data-set='["controlMode manual","controlMode auto"]' data-icons='["oa-sani_heating_automatic","oa-sani_heating_manual"]' data-colors='["darkgreen","darkblue"]'
data-background-icon="fa-square" data-background-colors='["grey","grey"]'
>
</div><br>
<div data-type="multistatebutton"
data-device="Buero_HK" data-get="R-btnLock" data-get-on='["on","off"]'
data-set='["regSet btnLock off","regSet btnLock on"]' data-icons='["oa-secur_locked","oa-secur_open"]' data-colors='["darkred","darkblue"]'
data-background-icon="fa-square" data-background-colors='["grey","grey"]'
>
</div>
</div>
</td></tr></table>
</div>
<div class="cell top-narrow-2x" data-type="label">Fussboden</div>
<div class="cell">
<table><tr><td>
<div class="inline"
data-type="thermostat"
data-device="Buero_TC" data-get="desired-temp" data-set="desired-temp" data-temp="measured-temp" data-valve="actuator"
data-min="0" data-max="30" data-step="0.5"
data-off="controlManu off" data-boost="controlMode boost"
data-fgColor="darkorange"
data-height="100px"
data-width="100px">
</div>
</td><td>
<div class="cell inline small">
<div data-type="multistatebutton"
data-device="Buero_TC_Climate" data-get="controlMode" data-get-on='["auto","manual"]'
data-set='["controlMode manual","controlMode auto"]' data-icons='["oa-sani_heating_automatic","oa-sani_heating_manual"]' data-colors='["darkgreen","darkblue"]'
data-background-icon="fa-square" data-background-color="dimgrey"
>
</div><br>
<div data-type="multistatebutton"
data-device="Buero_TC" data-get="R-btnLock" data-get-on='["on","off"]'
data-set='["regSet btnLock off","regSet btnLock on"]' data-icons='["oa-secur_locked","oa-secur_open"]' data-colors='["darkred","darkblue"]'
data-background-icon="fa-square" data-background-color="dimgrey"
>
</div>
</div>
</td></tr></table>
</div>
</div>
</html>
Hallo,
hab das selbe Problem wie Karl.
Wenn ich allerdings 2 Charts mache, kann ich beide charts sehen.
<li data-row="2" data-col="2" data-sizex="8" data-sizey="6">
<header>Temperatur & Luftfeuchte</header>
<div class="normal"
data-type="chart"
data-logdevice='["Log_Aussensensor_Temperatur","Log_Aussensensor_Luftfeuchte"]'
data-columnspec='["4:Aussensensor_Temperatur.*::","4:Aussensensor_Luftfeuchte.*::"]'
data-style='["ftui l0fill","ftui l2"]'
data-ptype='["lines","histeps"]'
data-uaxis='["primary","secondary"]'
data-legend='["Temperatur","Luftfeuchte"]'
data-yunit="°C"
data-ytext="Temperatur"
data-minvalue="auto"
data-maxvalue="auto"
data-yunit_sec="%rF"
data-ytext_sec="Luftfeuchte"
data-height="300"
data-yticks="auto"
data-minvalue_sec="auto"
data-maxvalue_sec="auto"
data-nofulldays="false"
data-daysago_start=""
data-daysago_end=""
data-cursorgroup="1"
data-scrollgroup="1"
data-xticks="auto"
</div>
<div class="normal"
data-type="chart"
data-logdevice='["Log_Aussensensor_Luftfeuchte"]'
data-columnspec='["4:Aussensensor_Luftfeuchte.*::"]'
data-style='["ftui l2"]'
data-ptype='["histeps"]'
data-uaxis='["secondary"]'
data-legend='["Temperatur"]'
data-yunit="°C"
data-ytext="Temperatur"
data-minvalue="auto"
data-maxvalue="auto"
data-yunit_sec="%rF"
data-ytext_sec="Luftfeuchte"
data-height="0"
data-yticks="auto"
data-minvalue_sec="auto"
data-maxvalue_sec="auto"
data-nofulldays="false"
data-daysago_start=""
data-daysago_end=""
data-cursorgroup="1"
data-scrollgroup="1"
data-xticks="auto"
</div>
</li>
Lösche ich jetzt die untere Chart sehe ich gar keine mehr.
um jede Hilfe bin ich dankbar!
Grüsse
Alex
@xyro:
Dein Problem habe ich (hoffentlich) nachvollzogen. Es liegt daran, dass bei einer Definition ohne data-device Angabe versucht wird die Information in data-logdevice als Device zu verwenden, das geht aber schief, wenn data-logdevice aus einem Array mit mehreren Einträgen besteht.
Als schnelle Lösung kannst Du einfach bei allen charts (bei Dir vor allem beim Ersten, das mehrere Logdevices enthält) eine Zeile einfügen mit data-device="Log_Aussensensor_Temperatur", dann sollte es klappen.
Das Verhalten wird in der nächsten Version (noch ein paar wenige Tage Geduld, ich komme leider aktuell nicht so dazu wie ich das gerne tun würde, man muss ja schließlich nebenbei auch noch Geld verdienen ;)) behoben sein.
@wkarl:
Ich kann das Verhalten leider bei mir nicht nachvollziehen (ich habe Deine Definition genommen und die Logdevice und columnspec ausgetauscht und bei mir gings), allerdings nutze ich dblog auch nicht, es könnte also eventuell daran liegen. Schau vielleicht mal die Einträge der Kollegen durch die mit dblog Erfolg hatten.
Hallo Eki,
Ja das hat funktioniert!
Vielen Dank dafür!
Andere Sache,...
Beim Aktualisieren der Webseite (F5) kann es passieren, dass es mir die Widgets im Gridster verwürfelt, also an einem anderen Platz sind.
Ebenso werden die Charts oft unvollständig dargestellt,...
Ich weis nicht wo ich da ansetzen könnte. Als Browser habe ich IE, chrome und firefox getestet. Alle machen das selbe, mal mehr mal weniger.
Vielleicht hat da jemand eine Lösung parat?
Grüße
Alex
Hallo Eki,
bei mir wird ja garnichts dargestellt, auch keine Achsen. Wie wird die Situation behandelt, wenn data-logdevice keine Daten liefert? Werden die Achsen gezeichnet und kein plot, oder werden auch keine Achsen angezeigt?
Die Antwort hilft mir im nächsten Schritt den Bereich einzugrenzen in dem ich suchen muss.
Danke und ciao
walter
Hallo Walter,
Wenn keine Daten kommen, werden die Achsen trotzdem gezeichnet. Wenn gar nichts zu sehen ist, deutet das eher darauf hin, dass die refresh Funktion gar nicht aufgerufen wird oder irgendein Fehler im Script oder beim GET Aufruf passiert. Das müsste man dann allerdings auf der Browser Konsole sehen.
Kannst Du mal mit der angehängten Version prüfen ob sich irgendetwas verändert.
Zitat von: xyro am 14 Dezember 2015, 19:12:10
Hallo Eki,
Ja das hat funktioniert!
Vielen Dank dafür!
Andere Sache,...
Beim Aktualisieren der Webseite (F5) kann es passieren, dass es mir die Widgets im Gridster verwürfelt, also an einem anderen Platz sind.
Ebenso werden die Charts oft unvollständig dargestellt,...
Ich weis nicht wo ich da ansetzen könnte. Als Browser habe ich IE, chrome und firefox getestet. Alle machen das selbe, mal mehr mal weniger.
Vielleicht hat da jemand eine Lösung parat?
Grüße
Alex
Siehst Du in den Fällen, in denen dein Layout durcheinander kommt Statusmeldungen (Toast) die etwas von Timeouts sagen (falls Du die Toast Meldungen ausgeschaltet hast, mal probehalber aktivieren, siehe Wiki).
Hallo eki,
keine Verbesserung mit der neuen widget_chart.js. Ich werde das ganze zu einem Basiskonstrukt zurück bauen - nicht als popup. Und von dort die Untersuchungen fortführen. Melde mich dann.
Nachtrag: Zurückgebaut funktioniert die Anzeige.
Danke und ciao
Walter
Hallo,
ich habe das gleich Problem mit den Charts im Popup (http://forum.fhem.de/index.php/topic,45864.0.html) - wie kann ich bei der Lösungsfindung helfen?
Ronny
Hallo,
ich habe mir mal die widget_chart.js angesehen: Ich habe einige Zusammenhänge finden können, komme aber nicht wirklich weiter. In der Funktion update wird definiert, dass das Refresh beim Event fadein des parent aufgerufen werden soll. Hier gibt es ein Problem:
1. der parent des Chart ist der Dialog und nicht das Popup
2. das Event fadein wird in der widget_popup.js nicht weder für den Dialog noch für das Popup getriggert, sondern für das angeklickte Objekt (z.B. ein Label)
Ich habe mal testweise in der widget_popup.js die Zeile
dialog.trigger('fadein');
nach Zeile 110 eingefügt. Dies führt dazu, dass zwar versucht wird, beim öffnen des Dialogs den Chart aufzubauen, aber es werden sehr viele Fehler auf der Console angezeigt und der Chart wird nicht korrekt angezeigt - vermutlich passt die parent-Zuordnung hier nicht.
Hier noch mein HTML:
<li data-row="5" data-col="2" data-sizex="4" data-sizey="2" class="halbTransparent">
<header class="headerTransparent">WOHNZIMMER</header>
<div class="left">
<div data-type="thermostat" data-device="DG.wz.HZ.Heizkoerperventil.Clima" data-valve="ValvePosition" data-get="desired-temp" data-temp="measured-temp" class="cell left-space"></div>
</div>
<div class="right right-space">
<div data-type="dimmer"
data-device="DG.wz.LI.Allgemein"
data-get="brightness"
data-get-off="0"
data-get-on="[1-9][0-9]*"
data-set-off="0"
data-set="dim"
data-min="0"
data-max="100">
</div>
<div data-type="label" class="cell">Licht</div>
<div data-type="symbol"
id="starter1"
data-device='DG.wz.LI.Allgemein'
data-get=""
data-off-color="DG.wz.LI.Allgemein:RGB"
data-off-background-color="DG.wz.LI.Allgemein:RGB"
data-icon="fa-ellipsis-h"
data-background-icon="fa-circle-thin"
class="small">
</div>
</div>
<div data-type="popup" data-height="240px" data-width="240px" data-mode="animate" data-starter="#starter1" class="col-1-6">
<div class="dialog dialogTransparent">
<header class="dialogheaderTransparent">RBG COLOR</header>
<div data-type="colorwheel" data-device='DG.wz.LI.Allgemein' data-get="RGB" data-set="RGB" class="roundIndicator"></div>
</div>
</div>
<div class="right top-space right-space-2x">
<div class="inline">
<div data-type="label" data-device="DG.wz.HK.Wandthermostat" data-get="measured-temp" data-limits='[-73,19,23]' data-colors='["#6699FF","#aa6900","#bb6242"]' data-unit="%B0C%0A" class="bigger thin"></div>
<div data-type="klimatrend" data-device="DG.wz.HZ.Heizkoerperventil.Clima" data-get="statMeasured-tempTendency"></div>
<div data-type="label" class="cell">Temperatur</div>
</div>
<div class="inline">
<div data-type="label" data-device="DG.wz.HK.Wandthermostat" data-fix="0" data-part="4" data-limits='[0,40,60]' data-colors='["#bb6242","#aa6900","#bb6242"]' data-unit="%" class="bigger thin"></div>
<div data-type="label" class="cell">Luftfeuchte</div>
</div>
<div class="cell">
<div data-type="popup" data-width="450px" class="inline halbTransparent">
<div data-type="simplechart"
data-device="DG.wz.HK.Wandthermostat"
data-logdevice="DBLog_XX.xx.HZ.Heizung"
data-columnspec="DG.wz.HK.Wandthermostat:measured-temp"
data-minvalue="15"
data-maxvalue="25"
data-height="60"
data-width="90"
class="noticks">
</div>
<div class="dialog dialogTransparent">
<header class="dialogheaderTransparent">TEMPERATURE</header>
<div data-type="simplechart"
data-device="DG.wz.HK.Wandthermostat"
data-logdevice="DBLog_XX.xx.HZ.Heizung"
data-columnspec="DG.wz.HK.Wandthermostat:measured-temp"
data-minvalue="15"
data-maxvalue="25"
data-yticks="2"
data-daysago="1"
data-height="250">
</div>
</div>
</div>
<div data-type="popup" data-width="800px" data-height="700px" class="inline">
<div data-type="simplechart"
data-device="DG.wz.HK.Wandthermostat"
data-logdevice="DBLog_XX.xx.HZ.Heizung"
data-columnspec="DG.wz.HK.Wandthermostat:humidity"
data-minvalue="0"
data-maxvalue="100"
data-height="60"
data-width="90"
class="noticks">
</div>
<div class="dialog dialogTransparent">
<header class="dialogheaderTransparent">CHART</header>
<div data-type="chart"
data-height="400"
data-device="DG.wz.HZ.Heizkoerperventil"
data-logdevice="DBLog_XX.xx.HZ.Heizung"
data-columnspec='["DG.wz.HK.Wandthermostat:measured-temp","DG.wz.HK.Wandthermostat:humidity","DG.wz.HZ.Heizkoerperventil:actuator"]'
data-style='["ftui l0fill","ftui l1fill","ftui l2fill"]'
data-ptype='["lines","lines","steps"]'
data-uaxis='["primary","secondary","secondary"]'
data-legend='["Temperatur","Luftfeuchte","Ventilstellung"]'
data-yunit="°C"
data-ytext="Temperature"
data-minvalue="auto"
data-maxvalue="auto"
data-yunit_sec="%"
data-ytext_sec="Percentage"
data-yticks="auto"
data-minvalue_sec="0"
data-maxvalue_sec="100"
data-daysago_start="0"
data-daysago_end="-1"
data-crosshair="true"
data-cursorgroup="1"
data-scrollgroup="1"
data-showlegend="true"
data-xticks="auto">
</div>
</div>
</div>
</div>
</div>
</li>
Ronny
Ich hab's!! Ich habe das Problem lokalisieren können: standardmäßig wird ein Popup im Modus "animate" geöffnet - damit kommt jedoch das Chart-Widget leider nicht klar, da sich die Größe des Popups langsam ändert und vermutlich das Refresh mit der initialen Größe 0 arbeitet. Ändert man den Modus auf "fade" dann funktioniert das Chart-Widget (mit der vorher beschriebenen Anpassung im widget_popup.js) auch im Popup (leider aber nicht so schön animiert "einfliegend").
<div data-type="popup" data-width="800px" data-height="700px" class="inline" data-mode="fade">
Ronny
Hallo Ronny,
das ist doch schon mal ein guter Hinweis, damit kann ich weiter prüfen. Ich hatte in die widget_popup.js nach Rücksprache mit setstate einen zusätzlichen event trigger eingebaut, der beim Öffnen des Popus dem widget_chart.js Bescheid gibt, dass das Chart aufgebaut werden kann. Eventuell kommt der event in Deinem Fall nicht, ich werde mir noch mal das popup widget anschauen, vielleicht finde ich ja was.
Gruss
Kurt
Hallo Kurt,
Zitat von: eki am 20 Dezember 2015, 19:42:19
das ist doch schon mal ein guter Hinweis, damit kann ich weiter prüfen. Ich hatte in die widget_popup.js nach Rücksprache mit setstate einen zusätzlichen event trigger eingebaut, der beim Öffnen des Popus dem widget_chart.js Bescheid gibt, dass das Chart aufgebaut werden kann. Eventuell kommt der event in Deinem Fall nicht, ich werde mir noch mal das popup widget anschauen, vielleicht finde ich ja was.
das Event kommt, jedoch vom falschen Element: Du definierst das on im widget_chart auf den parent vom chart-Element - das ist bei mir der Dialog. Im Popup wird der Event auf this getriggert - das ist bei mir jedoch weder das Popup noch der Dialog, sondern das Element, welches angeklickt wurde (in meinem Beispiel oben der Simplechart) - und das ist kein Parent von Chart sondern eher ein "Onkel" ;) (ein sibling vom parent). Wie gesagt, wenn man im widget_popup
$(this).trigger('fadein');durch
dialog.trigger('fadein');ersetzt, funktioniert es (zumindest, wenn das Popup nicht animiert wird)...
Ronny
Hallo,
mit der angehängten Version funktioniert's nach Anpassung der Funktion show auch beim Modus "animate" ;D
Ronny
PS: ich hätte da noch einen Wunsch: wäre es möglich, die Diagramme zum Chartanfang und zum aktuellen Zeitpunkt zu vervollständigen: wenn ein Wert über Nacht eine weile konstant ist, fängt die Linie nicht 0:00 Uhr sondern irgendwann später an. Gleiches gilt für das Ende: war der Wert in letzter Zeit konstant, endet die Linie mit der letzten Wertänderung und nicht zum aktuellen Zeitpunkt - das kann bei mehreren Linien im Diagramm schon merkwürdig aussehen...
Zitat von: RoBra81 am 20 Dezember 2015, 21:21:04
PS: ich hätte da noch einen Wunsch: wäre es möglich, die Diagramme zum Chartanfang und zum aktuellen Zeitpunkt zu vervollständigen: wenn ein Wert über Nacht eine weile konstant ist, fängt die Linie nicht 0:00 Uhr sondern irgendwann später an. Gleiches gilt für das Ende: war der Wert in letzter Zeit konstant, endet die Linie mit der letzten Wertänderung und nicht zum aktuellen Zeitpunkt - das kann bei mehreren Linien im Diagramm schon merkwürdig aussehen...
Ich hab's mit dem Logproxy hinbekommen :)
Hallo Ronny,
danke fuer deine Hilfe, gut analysiert. Ich werde noch mal versuchen zu kapieren, warum das bei mir und einigen anderen mit eigentlich der gleichen Struktur funktioniert hat.
Das mit den Anfangs- und Endwerten ist mir, so wie Du es gelöst hast, lieber. Ich finde es besser, dass das Chart nur die Daten verwendet, die es per get bekommt und nichts dazu "erfindet".
Hallo,
beim Basteln sind mir noch ein Wunsch gekommen, vielleicht kann der ja bei Gelegenheit umgesetzt werden :-[: ich habe reichlich Kurven in meinen Graphen eingebaut und hätte daher gern die Möglichkeit, zu konfigurieren, welche Kurven standardmäßig angezeigt werden und welche ich nur bei Bedarf zugeschaltet werden können soll.
Darüber hinaus noch eine Frage: ich habe mehr als fünf Kurven und daher die CSS analog zu den anderen um l5 erweitert - das funktioniert prinzipiell, nur das fill will nicht klappen - hast du eine Idee, woran es liegen könnte?
Vielen Dank
Ronny
Hallo Ronny,
das feature im Definitionsfile festzulegen, welche Graphen sichtbar sind und welche nicht, habe ich schon eingebaut, gibts in den nächsten Tagen :).
Wenn Du bei Deiner Definition einen Farbverlauf wie in meinen anderen Stilen verwendest, wird das so nicht funktionieren. Ich habe es nicht geschafft, Verläufe aus css Dateien so einzubinden, dass sie von den SVGs richtig verwendet werden und die Verläufe deshalb per js Code eingebunden. Man kann also nur auf die Verläufe aus den fhem plots und auf ein paar, die ich dazu erfunden habe zurückgreifen. Wenn Du mir deine Styles schickst füge ich zusätzliche passende Verläufe mit dazu.
Zitat von: eki am 20 Dezember 2015, 22:50:48
das feature im Definitionsfile festzulegen, welche Graphen sichtbar sind und welche nicht, habe ich schon eingebaut, gibts in den nächsten Tagen :).
;D
Zitat von: eki am 20 Dezember 2015, 22:50:48
Wenn Du bei Deiner Definition einen Farbverlauf wie in meinen anderen Stilen verwendest, wird das so nicht funktionieren. Ich habe es nicht geschafft, Verläufe aus css Dateien so einzubinden, dass sie von den SVGs richtig verwendet werden und die Verläufe deshalb per js Code eingebunden. Man kann also nur auf die Verläufe aus den fhem plots und auf ein paar, die ich dazu erfunden habe zurückgreifen. Wenn Du mir deine Styles schickst füge ich zusätzliche passende Verläufe mit dazu.
Ich habe einfach ein l5 analog den anderen eingebaut und ihm die Farbe 113311 gegeben - in FHEM selbst geht's ja von l1 bis l8 und l1fill bis l6fill...
Ronny
Hallo zusammen,
nach einem Update vor Weihnachten sieht es bei meinem FTUI katastrophal aus.
Jetzt werde ich von vorne anfangen, so erhalte ich auch die Möglichkeit viele Neuheiten die entwickelt wurden einzubauen.
Am Anfang dieseS Thread sind einige Demos eingestellt, die mittlerweile sicherlich überholt wurden.
Könntet ihr bitte eure neuen Dateien nochmals teilen und mit den neuen Screenshots einstellen?
Somit bleibt dieser Thread auf seiner eigentlichen Mission.
Alles andere sollte hier rein:http://forum.fhem.de/index.php/topic,34233.0.html (http://forum.fhem.de/index.php/topic,34233.0.html)
Vielen Dank für die Ideen und die Arbeit die Ihr hier hereinsteckt!
Durch euch alle ist diese Oberfläche die BESTE die mir bisher untergekommen ist!
Gruß
Ralf
Hallo,
ich habe ein wenig Zeit investiert und soweit bin ich nun:
Ein wenig Farbe bei den Rollos wäre super.
Vielleicht weiss jemand Rat?
Gruß
Ralf
Und einen guten Rutsch in das neue Jahr.
Hallo,
da zumindest die Ansteuerung der Thermostate dem entspricht was ich mir hier vorgestellt habe, folgend der code und ein screenshot wie die aussieht.
Aufbau der Dateiverküpfungen:
>index.html
>menu-main.html
>main.html (Baustelle)
>h-og-r.html
> widgets zur Steuerung der Heizkörper & Fussbodenheizung
als Beispiel h-eg-r-buero-hz.html
>h-eg-r.html
> widgets zur Steuerung der Heizkörper & Fussbodenheizung
>h-kg-r.html
> widgets zur Steuerung der Heizkörper & Fussbodenheizung
>etc (Rest Baustelle)
>menu-datetime.html
index.html:
<!DOCTYPE html>
<html>
<head>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<title>FHEM-Tablet-UI</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta name="widget_base_width" content="100">
<meta name="widget_base_height" content="120">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="longpoll" content="1"> <!-- 1=longpoll;0=shortpoll every 30sec -->
<meta name="debug" content="0"> <!-- 1=output to console;0=not output -->
<meta name="gridster_disable" content="0"> <!-- verschieben abschalten -->
<link rel="stylesheet" href="/fhem/tablet/lib/jquery.gridster.min.css" />
<link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/font-awesome.min.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/jquery.toast.min.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/powerange.min.css"/>
<!-- Charts Theme CSS -->
<link rel="stylesheet" href="/fhem/tablet/lib/openautomation.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/fhemSVG.css" />
<!-- <link rel="stylesheet" href="/fhem/pgm2/jquery-ui.min.css" /> -->
<!-- define your personal style here, it wont be overwritten -->
<link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui-user.css" />
<!-- Javascript -->
<script type="text/javascript" src="/fhem/pgm2/jquery.min.js"></script>
<script type="text/javascript" src="/fhem/tablet/lib/jquery.knob.mod.min.js"></script>
<script type="text/javascript" src="/fhem/tablet/lib/jquery.toast.min.js"></script>
<script type="text/javascript" src="/fhem/tablet/lib/jquery.circlemenu.js"></script>
<script type="text/javascript" src="/fhem/tablet/lib/powerange.min.js"></script>
<script type="text/javascript" src="/fhem/tablet/lib/jquery.gridster.min.js"></script>
<script type="text/javascript" src="/fhem/tablet/lib/fa-multi-button.min.js"></script>
<script type="text/javascript" src="/fhem/tablet/js/fhem-tablet-ui.js"></script>
<!-- <script type="text/javascript" src="/fhem/pgm2/jquery-ui.min.js"></script> -->
</head>
<body>
<div class="gridster">
<ul>
<!-- Menu -->
<div class="container">
<li data-row="1" data-col="1" data-sizex="1" data-sizey="5" data-template="menu-main.html"></li>
<li data-row="5" data-col="1" data-sizex="1" data-sizey="0.5" data-template="menu-datetime.html"></li>
</div>
<!-- Content -->
</ul>
</div>
</body>
</html>
menu-main.html:
<html>
<body>
<header class="top-space"><font size="+1">MENU</font></header>
<div class="container">
<div class="cell"
data-type="pagetab"
data-url="main.html"
data-icon="fa-home"
data-background-icon="fa-circle"
data-off-background-color="dimgrey"
data-on-background-color="darkorange"
data-on-color="black"
data-off-color="black">
</div>
<div class="cell"
data-type="pagetab"
data-url="h-og-r.html"
data-icon="oa-control_building_og"
data-background-icon="fa-circle"
data-off-background-color="dimgrey"
data-on-background-color="darkorange"
data-on-color="black"
data-off-color="black">
</div>
<div class="cell"
data-type="pagetab"
data-url="h-eg-r.html"
data-icon="oa-control_building_eg"
data-background-icon="fa-circle"
data-off-background-color="dimgrey"
data-on-background-color="darkorange"
data-on-color="black"
data-off-color="black">
</div>
<div class="cell"
data-type="pagetab"
data-url="h-kg-r.html"
data-icon="oa-control_building_kg"
data-background-icon="fa-circle"
data-off-background-color="dimgrey"
data-on-background-color="darkorange"
data-on-color="black"
data-off-color="black">
</div>
<div class="cell"
data-type="pagetab"
data-url="h-dv-versorgung.html"
data-icon="oa-time_statistic"
data-background-icon="fa-circle"
data-off-background-color="dimgrey"
data-on-background-color="darkorange"
data-on-color="black"
data-off-color="black">
</div>
<div class="cell"
data-type="pagetab"
data-url="g-bewaesserung.html"
data-icon="oa-sani_irrigation"
data-background-icon="fa-circle"
data-off-background-color="dimgrey"
data-on-background-color="darkorange"
data-on-color="black"
data-off-color="black">
</div>
<div class="cell"
data-type="pagetab"
data-url="w-ingolstadt.html"
data-icon="oa-scene_day"
data-background-icon="fa-circle"
data-off-background-color="dimgrey"
data-on-background-color="darkorange"
data-on-color="black"
data-off-color="black">
</div>
</div>
</body>
</html>
h-eg-r.html: (og und kg sind ähnlich aufgebaut)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta name="widget_base_width" content="100">
<meta name="widget_base_height" content="120">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="longpoll" content="1"> <!-- 1=longpoll;0=shortpoll every 30sec -->
<meta name="debug" content="0"> <!-- 1=output to console;0=not output -->
<meta name="gridster_disable" content="0"> <!-- verschieben abschalten -->
<link rel="stylesheet" href="/fhem/tablet/lib/jquery.gridster.min.css" />
<link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/font-awesome.min.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/jquery.toast.min.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/powerange.min.css"/>
<!-- Charts Theme CSS -->
<link rel="stylesheet" href="/fhem/tablet/lib/openautomation.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/fhemSVG.css" />
<!-- define your personal style here, it wont be overwritten -->
<link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui-user.css" />
<!-- Javascript -->
<script type="text/javascript" src="/fhem/pgm2/jquery.min.js"></script>
<script type="text/javascript" src="/fhem/tablet/lib/jquery.knob.mod.min.js"></script>
<script type="text/javascript" src="/fhem/tablet/lib/jquery.toast.min.js"></script>
<script type="text/javascript" src="/fhem/tablet/lib/jquery.circlemenu.js"></script>
<script type="text/javascript" src="/fhem/tablet/lib/powerange.min.js"></script>
<script type="text/javascript" src="/fhem/tablet/lib/jquery.gridster.min.js"></script>
<script type="text/javascript" src="/fhem/tablet/lib/fa-multi-button.min.js"></script>
<script type="text/javascript" src="/fhem/tablet/js/fhem-tablet-ui.js"></script>
<title>EG Heizung</title>
</head>
<body>
<div class="gridster">
<ul>
<!-- Menu -->
<div class="container">
<li data-row="1" data-col="1" data-sizex="1" data-sizey="5" data-template="menu-main.html"></li>
<li data-row="6" data-col="1" data-sizex="1" data-sizey="1.5" data-template="menu-datetime.html"></li>
</div>
<!-- Content -->
<li data-row="2" data-col="2" data-sizex="2" data-sizey="3" data-template="h-eg-r-buero-hz.html"></li>
<li data-row="2" data-col="4" data-sizex="2" data-sizey="3" data-template="h-eg-r-kueche-hz.html"></li>
<li data-row="2" data-col="6" data-sizex="2" data-sizey="3" data-template="h-eg-r-esszimmer-hz.html"></li>
<li data-row="2" data-col="8" data-sizex="2" data-sizey="3" data-template="h-eg-r-wohnzimmer-hz.html"></li>
<li data-row="5" data-col="2" data-sizex="2" data-sizey="2" data-template="h-eg-r-gaestetoilette-hz.html"></li>
<li data-row="5" data-col="4" data-sizex="2" data-sizey="2" data-template="h-eg-r-dielewindfang-hz.html"></li>
</ul>
</div>
</body>
</html>
h-eg-r-buero-hz.html: (als Beispiel für die anderen Heizungssteuerung der verbleibenden Räume)
<!DOCTYPE html>
<html>
<body>
<header><font size="+1">Büro</font></header>
</div>
<div class="container">
<div class="container row big top-space">
<div class="col-1-2 left">
<div data-type="label"
data-device="Buero_TC" data-get="measured-temp" data-unit="%B0C%0A" data-fix="1"
data-limits='[-20,20,24]' data-colors='["skyblue","darkorange","orangered"]'>
</div>
</div>
<div class="col-1-2 right">
<div data-type="label"
data-device="Buero_TC" data-get="humidity" data-unit="%%0A" data-fix="1"
data-limits='[0,40,60]' data-colors='["skyblue","darkorange","orangered"]'>
</div>
</div>
</div>
<div class="container row">
<div class="top-space" data-type="label">Heizkörper</div>
<div class="container top-space">
<div class="col-2-3 left">
<div data-type="thermostat"
data-device="Buero_HK_Clima" data-get="desired-temp" data-set="desired-temp" data-temp="measured-temp" data-valve="ValvePosition"
data-min="0" data-max="30" data-step="0.5"
data-mode="controlMode"
data-off="controlManu off" data-boost="controlMode boost"
data-fgColor="darkorange"
data-height="96px"
data-width="96px">
</div>
</div>
<div class="col-1-3 top-space right"><font size="-2">
<div data-type="multistatebutton"
data-device="Buero_HK_Clima" data-get="controlMode" data-get-on='["auto","manual"]'
data-set='["controlMode manual","controlMode auto"]' data-icons='["oa-sani_heating_automatic","oa-sani_heating_manual"]' data-colors='["darkgreen","darkblue"]'
data-background-icon="fa-square" data-background-colors='["dimgrey","dimgrey"]'
>
</div><br>
<div data-type="multistatebutton"
data-device="Buero_HK" data-get="R-btnLock" data-get-on='["on","off"]'
data-set='["regSet btnLock off","regSet btnLock on"]' data-icons='["oa-secur_locked","oa-secur_open"]' data-colors='["darkred","darkblue"]'
data-background-icon="fa-square" data-background-colors='["dimgrey","dimgrey"]'
>
</div>
</font>
</div>
</div>
</div>
<div class="container row">
<div data-type="label">Fussboden</div>
<div class="container top-space">
<div class="col-2-3 left">
<div data-type="thermostat"
data-device="Buero_TC" data-get="desired-temp" data-set="desired-temp" data-temp="measured-temp" data-valve="actuator"
data-min="0" data-max="30" data-step="0.5"
data-mode="controlMode"
data-off="controlManu off" data-boost="controlMode boost"
data-fgColor="darkorange"
data-height="96px"
data-width="96px">
</div>
</div>
<div class="col-1-3 top-space right"><font size="-2">
<div data-type="multistatebutton"
data-device="Buero_TC_Climate" data-get="controlMode" data-get-on='["auto","manual"]'
data-set='["controlMode manual","controlMode auto"]' data-icons='["oa-sani_heating_automatic","oa-sani_heating_manual"]' data-colors='["darkgreen","darkblue"]'
data-background-icon="fa-square" data-background-colors='["dimgrey","dimgrey"]'
>
</div><br>
<div data-type="multistatebutton"
data-device="Buero_TC" data-get="R-btnLock" data-get-on='["on","off"]'
data-set='["regSet btnLock off","regSet btnLock on"]' data-icons='["oa-secur_locked","oa-secur_open"]' data-colors='["darkred","darkblue"]'
data-background-icon="fa-square" data-background-colors='["dimgrey","dimgrey"]'
>
</div>
</font>
</div>
</div>
</div>
</div>
</body>
</html>
Aktuell arbeite ich u.a. am Popup-Dialog, wenn der Bereich der Temperatur/Luftfeuchtigkeit berührt wird soll ein Graph mit IST-, SOLL-Temperatur und Actuator-Verlauf dargestellt werden. Das funktioniert aber noch nicht.
Kritiken, Kommentare und weitere Ideen sind willkommen.
ciao walter
Moin Walter,
danke für die Anregungen, werde ich mir mal ansehen ;)
Klaus
Hallo Walter,
interessante Ansicht.
Wofür ist der Button gut?
<div data-type="multistatebutton"
data-device="Buero_HK" data-get="R-btnLock" data-get-on='["on","off"]'
data-set='["regSet btnLock off","regSet btnLock on"]'
data-icons='["oa-secur_locked","oa-secur_open"]' data-colors='["darkred","darkblue"]'
data-background-icon="fa-square" data-background-colors='["dimgrey","dimgrey"]'
>
Sperrst du damit die Tasten an dem Thermostaten?
Gruß
Ralf
bin zwar nicht Walter ;)
aber ja , er sperrt die Tasten an dem Thermostaten!
Ergibt sich hieraus !
data-set='["regSet btnLock off","regSet btnLock on"]'
Hallo,
was weiterhin auch fertig ist (aber man weiß ja nie) ist die Gartenbewässerung.
Aufbau der Dateiverküpfungen:
>index.html
>menu-main.html
>main.html (Baustelle)
>h-og-r.html
> widgets zur Steuerung der Heizkörper & Fussbodenheizung
als Beispiel h-eg-r-buero-hz.html
>h-eg-r.html
> widgets zur Steuerung der Heizkörper & Fussbodenheizung
>h-kg-r.html
> widgets zur Steuerung der Heizkörper & Fussbodenheizung
>g-bewaesserung.html
>g-bw-pumpe-01.html
>g-bw-programm-01.html
>g-bw-sued-busch.html
> restliche widges
>etc (Rest Baustelle)
>menu-datetime.html
index.html und menu-main.html findet ihr weiter oben und behandle ich hier nicht mehr.
g-bewaesserung.html:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta name="widget_base_width" content="100">
<meta name="widget_base_height" content="120">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="longpoll" content="1"> <!-- 1=longpoll;0=shortpoll every 30sec -->
<meta name="debug" content="0"> <!-- 1=output to console;0=not output -->
<meta name="gridster_disable" content="0"> <!-- verschieben abschalten -->
<link rel="stylesheet" href="/fhem/tablet/lib/jquery.gridster.min.css" />
<link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/font-awesome.min.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/jquery.toast.min.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/powerange.min.css"/>
<!-- Charts Theme CSS -->
<link rel="stylesheet" href="/fhem/tablet/lib/openautomation.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/fhemSVG.css" />
<!-- define your personal style here, it wont be overwritten -->
<link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui-user.css" />
<!-- Javascript -->
<script type="text/javascript" src="/fhem/pgm2/jquery.min.js"></script>
<script type="text/javascript" src="/fhem/tablet/lib/jquery.knob.mod.min.js"></script>
<script type="text/javascript" src="/fhem/tablet/lib/jquery.toast.min.js"></script>
<script type="text/javascript" src="/fhem/tablet/lib/jquery.circlemenu.js"></script>
<script type="text/javascript" src="/fhem/tablet/lib/powerange.min.js"></script>
<script type="text/javascript" src="/fhem/tablet/lib/jquery.gridster.min.js"></script>
<script type="text/javascript" src="/fhem/tablet/lib/fa-multi-button.min.js"></script>
<script type="text/javascript" src="/fhem/tablet/js/fhem-tablet-ui.js"></script>
<title>Bewässerung</title>
</head>
<body>
<div class="gridster">
<ul>
<!-- Menu -->
<div class="container">
<li data-row="1" data-col="1" data-sizex="1" data-sizey="5" data-template="menu-main.html"></li>
<li data-row="6" data-col="1" data-sizex="1" data-sizey="1.5" data-template="menu-datetime.html"></li>
</div>
<!-- Content -->
<li data-row="2" data-col="2" data-sizex="2" data-sizey="1" data-template="g-bw-pumpe-01.html"></li>
<li data-row="4" data-col="2" data-sizex="2" data-sizey="1" data-template="g-bw-programm-01.html"></li>
<li data-row="2" data-col="4" data-sizex="2" data-sizey="1" data-template="g-bw-sued-busch.html"></li>
<li data-row="4" data-col="4" data-sizex="2" data-sizey="1" data-template="g-bw-sued-rasen.html"></li>
<li data-row="2" data-col="6" data-sizex="2" data-sizey="1" data-template="g-bw-teich&ost-busch.html"></li>
<li data-row="4" data-col="6" data-sizex="2" data-sizey="1" data-template="g-bw-ost-rasen.html"></li>
<li data-row="2" data-col="8" data-sizex="2" data-sizey="1" data-template="g-bw-terasse&west-rasen.html"></li>
<li data-row="4" data-col="8" data-sizex="2" data-sizey="1" data-template="g-bw-teich.html"></li>
<li data-row="6" data-col="2" data-sizex="2" data-sizey="1" data-template="g-bw-pumpe-02.html"></li>
<li data-row="8" data-col="2" data-sizex="2" data-sizey="1" data-template="g-bw-programm-02.html"></li>
<li data-row="6" data-col="4" data-sizex="2" data-sizey="1" data-template="g-bw-ost-heide.html"></li>
<li data-row="8" data-col="4" data-sizex="2" data-sizey="1" data-template="g-bw-ost-busch.html"></li>
<li data-row="6" data-col="6" data-sizex="2" data-sizey="1" data-template="g-bw-ost-tanne.html"></li>
</ul>
</div>
</body>
</html>
g-bw-pumpe-01.html:
<!DOCTYPE html>
<html>
<body>
<header><font size="+1">Pumpe</font></header>
<div class="centered container">
<div class="cell">
<div class="cell inline" data-type="switch"
data-device="SwitchSocketPwr_12_Sw"
data-get-on="on" date-get-off="off"
data-icon="fa-circle-o-notch"
data-background-icon="fa-circle"
data-off-background-color="dimgrey"
data-on-background-color="darkgreen">
</div>
<div class="cell inline left-space">
<div class="large" data-type="label"
data-device="SwitchSocketPwr_12_Pwr" data-get="power" data-unit="W%0A" data-fix="1">
</div>
<div class="large" data-type="label"
data-device="SwitchSocketPwr_12_Pwr" data-get="energy" data-unit="Wh%0A" data-fix="1">
</div>
</div>
</div>
</div>
</body>
</html>
[/code
[b][u]g-bw-programm-01.html[/u][/b]
[code]<!DOCTYPE html>
<html>
<body>
<header><font size="+1">Programme</font></header>
<div class="centered container">
<div class="cell">
<div class="cell circlemenu inline right-space" data-type="circlemenu"
data-direction="right-half" data-circle-radius="60">
<ul class="menu">
<li><div data-type="push" data-icon="fa-gear"
data-background-icon="fa-circle"
data-off-background-color="dimgrey"
data-on-background-color="dimgrey"
data-off-color="darkorange"
data-on-color="darkorange"
></div></li>
<li><div data-type="push"
data-device="IrrigationWF_Start_01" data-set="30"
data-icon="">30</div></li>
<li><div data-type="push"
data-device="IrrigationWF_Start_01" data-set="45"
data-icon="">45</div></li>
<li><div data-type="push"
data-device="IrrigationWF_Start_01" data-set="60"
data-icon="">60</div></li>
<li><div data-type="push"
data-device="IrrigationWF_Start_01" data-set="off"
data-icon="">off</div></li>
</ul>
</div>
</div>
</div>
</body>
</html>
Definition von Irrigation_WF01:
#================================================
#==== Workflow 01 - Garden back
#================================================
define Irrigation_WF01 DOIF ([IrrigationWF_Start_01] eq "30") \
(set Irrigation_0(1|2)_Sw_0. off) \
(set SwitchSocketPwr_12_Sw on-for-timer 9000)\
(set Irrigation_01_Sw_04 on-for-timer 1800)\
(set Irrigation_02_Sw_02 on-for-timer 1800)\
(set Irrigation_01_Sw_01 on-for-timer 1800)\
(set Irrigation_01_Sw_03 on-for-timer 1800)\
(set Irrigation_01_Sw_02 on-for-timer 1800)\
(set Irrigation_0(1|2)_Sw_0. off, set SwitchSocketPwr_12_Sw off, set IrrigationWF_Start_01 off) \
DOELSEIF ([IrrigationWF_Start_01] eq "45")\
(set Irrigation_0(1|2)_Sw_0. off) \
(set SwitchSocketPwr_12_Sw on-for-timer 13500)\
(set Irrigation_01_Sw_04 on-for-timer 2700)\
(set Irrigation_02_Sw_02 on-for-timer 2700)\
(set Irrigation_01_Sw_01 on-for-timer 2700)\
(set Irrigation_01_Sw_03 on-for-timer 2700)\
(set Irrigation_01_Sw_02 on-for-timer 2700)\
(set Irrigation_0(1|2)_Sw_0. off, set SwitchSocketPwr_12_Sw off, set IrrigationWF_Start_01 off) \
DOELSEIF ([IrrigationWF_Start_01] eq "60")\
(set Irrigation_0(1|2)_Sw_0. off) \
(set SwitchSocketPwr_12_Sw on-for-timer 18000)\
(set Irrigation_01_Sw_04 on-for-timer 3600)\
(set Irrigation_02_Sw_02 on-for-timer 3600)\
(set Irrigation_01_Sw_01 on-for-timer 3600)\
(set Irrigation_01_Sw_03 on-for-timer 3600)\
(set Irrigation_01_Sw_02 on-for-timer 3600)\
(set Irrigation_0(1|2)_Sw_0. off, set SwitchSocketPwr_12_Sw off, set IrrigationWF_Start_01 off) \
DOELSE (set Irrigation_0(1|2)_Sw_0. off, set SwitchSocketPwr_12_Sw off)
attr Irrigation_WF01 group Control
attr Irrigation_WF01 room G-Bewaesserung
attr Irrigation_WF01 wait 0,0,5,1800,1800,1800,1800,1800:0,0,5,2700,2700,2700,2700,2700:0,0,5,3600,3600,3600,3600,3600
g-bw-sued-busch.html:
<!DOCTYPE html>
<html>
<body>
<header><font size="+1">Süd Busch</font></header>
<div class="centered container">
<div class="cell">
<div class="cell circlemenu inline right-space" data-type="circlemenu"
data-direction="right-half" data-circle-radius="60">
<ul class="menu">
<li><div data-type="push" data-icon="fa-clock-o"
data-background-icon="fa-circle"
data-off-background-color="dimgrey"
data-on-background-color="dimgrey"
data-off-color="darkorange"
data-on-color="darkorange"
></div></li>
<li><div data-type="push"
data-device="Irrigation_01_Sw_04,SwitchSocketPwr_12_Sw" data-set="on-for-timer 1800"
data-icon="">30</div></li>
<li><div data-type="push"
data-device="Irrigation_01_Sw_04,SwitchSocketPwr_12_Sw" data-set="on-for-timer 2700"
data-icon="">45</div></li>
<li><div data-type="push"
data-device="Irrigation_01_Sw_04,SwitchSocketPwr_12_Sw" data-set="on-for-timer 3600"
data-icon="">60</div></li>
<li><div data-type="push"
data-device="Irrigation_01_Sw_04,SwitchSocketPwr_12_Sw" data-set="off"
data-icon="">off</div></li>
</ul>
</div>
<div class="cell inline big blue" data-type="label"
data-device="Irrigation_01_Sw_04" data-get="usrCountDown"
>
</div>
<div class="cell inline left-space right" data-type="switch" data-device="Irrigation_01_Sw_04"
data-get-on="on" data-get-off="off"
data-icon="fa-circle-o-notch"
data-background-icon="fa-circle"
data-off-background-color="dimgrey"
data-on-background-color="darkgreen">
</div>
</div>
</div>
</body>
</html>
Der erste screenshot zeigt das Ergebnis. Der zweite mit aufgeklappten circle-menu.
Ach ja, den CountDown-Zähler habe ich hier http://forum.fhem.de/index.php/topic,39090.msg312198.html#msg312198 beschrieben.
ciao walter
Zitat von: kvo1 am 02 Januar 2016, 01:12:11
bin zwar nicht Walter ;)
aber ja , er sperrt die Tasten an dem Thermostaten!
Stimmt beides ;-)
Hi Walter,
Saubere Arbeit, danke. Das Thema Bewässerung habe ich auch noch vor mir.
Gruß
Klaus
Zitat von: kvo1 am 02 Januar 2016, 01:12:11
bin zwar nicht Walter ;)
aber ja , er sperrt die Tasten an dem Thermostaten!
Ergibt sich hieraus !
data-set='["regSet btnLock off","regSet btnLock on"]'
Hallo,
danke für die Antworten.
Da ich MAX! Thermostatantriebe nutze und diese kein regSet unterstützen war ich verwundert.
@Walter
Warum benötigst du diesen Schalter im FTUI?
Ich kann meine Knöpfe direkt am Stellantrieb sperren!
Wenn du diese Sperre am FTUI einschaltest, kann man dies nicht wieder am Stellantrieb freigeben?
Gruß
Ralf
Zitat von: pnewman am 03 Januar 2016, 03:41:24
@Walter
Warum benötigst du diesen Schalter im FTUI?
Ich kann meine Knöpfe direkt am Stellantrieb sperren!
Wenn du diese Sperre am FTUI einschaltest, kann man dies nicht wieder am Stellantrieb freigeben?
Hallo Ralf,
nun, irgendwann entstand der Bedarf. Vorwiegend gegen versehentliches verstellen der Thermostate.
Ja, Du kannst nach aktivieren/deaktivieren der Sperre am Thermostat dies wieder rückgängig machen.
ciao walter
Hallo Zusammen.
Ich habe ein kleines Problem mit der Chart Funktion. Bei mir werden im EDGE und auf meinem Android Tablet die Achsen Beschriftungen nicht angezeigt. Bei Win 10 mit Google Chrome funktioniert es. Weiß jemand woran das liegen könnte. ?
Ach ja ich habe noch ein paar andere kleinere Fragen zum Chart Thema:
1.Bei mir werden die Buttons oben (+ - Links rechts) etwas abgeschnitten.
2. Wie kann ich im SVG einen Monat (aktueller) fix anzeigen
3. Wenn ich den zurück Button drücke wird der vorherige Monat (12/2015) nicht angezeigt
Ich würde gerne ein Bild mit anhängen, leider kenne ich mich im Forum noch nicht so gut aus und weiß nicht wie man das macht ?
Sorry wenn mein Beitrag etwas unprofessionell wirkt, aber bin erst am dazulernen.
Zitat von: sam50 am 03 Januar 2016, 11:51:32
Ich würde gerne ein Bild mit anhängen, leider kenne ich mich im Forum noch nicht so gut aus und weiß nicht wie man das macht ?
das + vor Erweiterte Optionen anklicken und dann "Datei anhängen:"
Zitat von: Nobby1805 am 03 Januar 2016, 12:33:33
das + vor Erweiterte Optionen anklicken und dann "Datei anhängen:"
Ok
Habs versucht
Hier beide Darstellungen. Einmal Chrome und einmal Edge/Android
Hallo,
vielleicht kann mir hier jemand einen Tipp geben wie ich "on" und "off" Werte als "1" und "0" aus dem DBLog ins chart widget bekomme.
In fhemweb kann ich durch folgende Eingabe die Werte abfragen und konvertieren:
get myDbLog - - 2016-01-03 2016-01-04 vito300c:Brenner:::$val=~s/(on|off).*/$1eq"on"?1:0/eg
Wenn ich die Chart nun folgend definiere funktioniert es nicht:
<div class="normal narrow"
data-type="chart"
data-device="myDbLog"
data-logdevice='["myDbLog"]'
data-logfile='["HISTORY"]'
data-columnspec='["vito300c:Brenner:::$val=~s/(on|off).*/$1eq"on"?1:0/eg"]'
data-style='["ftui l4"]'
data-uaxis='["primary"]'
data-minvalue="-1"
data-maxvalue="2"
></div>
@sam05
Zu Punkt 3.: Bei mir werden Tage nicht angezeigt, aber nur wenn in der dblog Zeichen anstatt Zahlen stehen. Dies passiert zum Beispiel bei meinen MAX-Thermostaten wenn ich den Eco-Taster betätige und ein desiredTemperatur "eco" oder "auto" auslöse. Ich hab dafür aber auch noch keine Lösung gefunden. Vielleicht kann man dies durch regex abfangen, aber da hab ich grad mein Problem.
@sam05
Zu Punkt 3.: Bei mir werden Tage nicht angezeigt, aber nur wenn in der dblog Zeichen anstatt Zahlen stehen. Dies passiert zum Beispiel bei meinen MAX-Thermostaten wenn ich den Eco-Taster betätige und ein desiredTemperatur "eco" oder "auto" auslöse. Ich hab dafür aber auch noch keine Lösung gefunden. Vielleicht kann man dies durch regex abfangen, aber da hab ich grad mein Problem.
[/quote]
Hi
Ich benutze keine Datenbank, sondern nut Textfiles fürs Logging, und meine Logfiles sehen inhaltlich identisch aus (Zahlen keine Texte). Also eigentlich dürfte das bei mir kein Problem darstellen.
Zu deinem Thema mit dem Brenner bin ich auch auf der Suche, da ich den Verlauf so wie du im Chart darstellen möchte, was ja unter fhem funktioniert.
Zitat von: sam50 am 04 Januar 2016, 12:07:54
Zu Punkt 3.: Bei mir werden Tage nicht angezeigt, aber nur wenn in der dblog Zeichen anstatt Zahlen stehen
... um das zu umschiffen, habe ich mir einen Trigger für die Datenbank gebaut. Istt nur weuin Workaround, funktioniert aber bestens. Welche DB nimmst Du?
Ich MySQL auf nem RPI.
Bei mir sieht das in etwa so aus:
CREATE DEFINER=`root`@`localhost` TRIGGER `history_before_insert` BEFORE INSERT ON `history` FOR EACH ROW if
(New.reading ='desiredTemperatur' and New.value='eco') then Set New.value = 0;
ELSEIF
(New.TYPE='CUL_EM' and New.READING='power') then Set New.value = CAST(New.value AS DECIMAL(8,4));
ELSEIF
(New.TYPE='OWTHERM' and New.READING='data') then Set New.value =digits(New.value);
END IF
Moin.
Ich habe ja nun schon lange eine Demo von mir versprochen.... ;D
Mir fehlen zwar immer noch sehr viele Aktoren und Sensoren um einiges zum Laufen zu bekommen und zu alles zu komplettieren, aber hier SIND sie schon mal:
Meine Demo's:
FTUI-Tablet
http://ueberueck.com/index.php/fhem-hausautomatisierung/fhem-tablet-ui/ftui-tablet (http://ueberueck.com/index.php/fhem-hausautomatisierung/fhem-tablet-ui/ftui-tablet)
hier fehlt noch die ZIP... kommt ganz bald!
FTUI-Mobile
http://ueberueck.com/index.php/fhem-hausautomatisierung/fhem-tablet-ui/ftui-mobile (http://ueberueck.com/index.php/fhem-hausautomatisierung/fhem-tablet-ui/ftui-mobile)
Viel Spaß damit.
@nesges: Es steht dir frei die Demo's / Files mit in dein Repo zu nehmen. ;)
Grüße^^
Hallo Zusammen,
sorry, Anfängerfrage: bin Neuling und habe die UserDemo von Phil heruntergeladen und ins tablet-Verzeichnis kopiert. Ich habe erstmal nichts verändert und sehe die Ansicht wie im Screenshot, aber ohne Icons (stattdessen nur orange Kreise). Woran liegt das?
Zitat von: FhemPiUser am 04 Januar 2016, 22:03:24
Hallo Zusammen,
sorry, Anfängerfrage: bin Neuling und habe die UserDemo von Phil heruntergeladen und ins tablet-Verzeichnis kopiert. Ich habe erstmal nichts verändert und sehe die Ansicht wie im Screenshot, aber ohne Icons (stattdessen nur orange Kreise). Woran liegt das?
das liegt an:
data-type="button"ein FTUI-Widget von nesges.
Damit gibt es seit geraumer Zeit Probleme. Nicht nur bei den Icon's.
@Roman
Sieht echt top aus ! :)
@JoeALLb
Danke, das Workaround funktioniert sehr gut. Ich habe auch eine mysql auf einem Raspberry. Der TRIGGER löst mal gleich mehrere Probleme mit den charts. Bei mir sieht der nun so aus:
CREATE DEFINER=`root`@`localhost` TRIGGER `history_before_insert` BEFORE INSERT ON `history` FOR EACH ROW if
(New.event ='desiredTemperature auto') then Set New.value = 22.0;
ELSEIF
(New.event ='desiredTemperature eco') then Set New.value = 18.0;
ELSEIF
(New.event ='desiredTemperature comfort') then Set New.value = 22.0;
ELSEIF
(New.event ='desiredTemperature off') then Set New.value = 5.0;
ELSEIF
(New.event ='desiredTemperature boost') then Set New.value = 30.0;
ELSEIF
(New.event ='desiredTemperature on') then Set New.value = 30.0;
ELSEIF
(New.value='off') then Set New.value = 0;
ELSEIF
(New.value='on') then Set New.value = 1;
END IF
Was kann ich tun damit die Graphen am Anfang des Tages beginnen und nicht erst mit dem ersten Wert der in der Datenbank drin steht? (siehe Screenshot bei den Räumen Bad und Vorraum)
@Sam05
Welche Heizung hast du? Und wie kommst du an den Ölverbrauch ran?
Hallo,
Zitat von: Baldure am 04 Januar 2016, 23:47:54
Was kann ich tun damit die Graphen am Anfang des Tages beginnen und nicht erst mit dem ersten Wert der in der Datenbank drin steht? (siehe Screenshot bei den Räumen Bad und Vorraum)
dafür nutze ich den LogProxy:
Zunächst einen LogProxy im FHEM definieren:
define Helper.LogProxy logProxyund diesen dann im Chart benutzen. Hier ein Auszug meines Charts:
<div data-type="chart"
data-height="400"
data-device="#!par02!#.HZ.Heizkoerperventil"
data-logdevice="Helper.LogProxy"
data-columnspec='["DbLog:DBLog_XX.xx.HZ.Heizung,extend=60*60*24:#!par02!#.HZ.Heizkoerperventil:measured-temp",
"DbLog:DBLog_XX.xx.KL.Klima,extend=60*60*24:#!par03!#.HK.Wandthermostat:humidity",
"DbLog:DBLog_XX.xx.HZ.Heizung,extend=60*60*24:#!par02!#.HZ.Heizkoerperventil:actuator",
"Func:logProxy_WeekProfile2Plot(\"#!par02!#.HZ.Heizkoerperventil.Clima\",$from,$to)",
"DbLog:DBLog_XX.xx.HZ.Heizung,extend=60*60*24:#!par02!#.HZ.Heizkoerperventil:desired-temp",
"DbLog:DBLog_XX.xx.KL.Klima,extend=60*60*24:#!par03!#.HK.Wandthermostat:dewpoint"]'
data-style='["ftui l0",
"ftui l1",
"ftui l2fill",
"ftui l3",
"ftui l4",
"ftui l5"]'
data-ptype='["lines",
"lines",
"steps",
"steps",
"steps",
"lines"]'
data-uaxis='["primary",
"secondary",
"secondary",
"primary",
"primary",
"primary"]'
data-legend='["Temperatur",
"Luftfeuchte",
"Ventilstellung",
"Soll Auto",
"Soll",
"Taupunkt"]'
data-yunit="°C"
data-ytext="Temperature"
data-minvalue="auto"
data-maxvalue="auto"
data-yunit_sec="%"
data-ytext_sec="Percentage"
data-yticks="auto"
data-minvalue_sec="0"
data-maxvalue_sec="100"
data-daysago_start="0"
data-daysago_end="-1"
data-crosshair="true"
data-cursorgroup="1"
data-scrollgroup="1"
data-showlegend="true"
data-xticks="auto">
</div>
Ronny
@Sam05
Welche Heizung hast du? Und wie kommst du an den Ölverbrauch ran?
[/quote]
@Baldure
Hi ich habe eine Ölheizung und habe mir eine Brenner-Überwachung mit einem HM-IO-Sender eingebaut. Damit kann ich die Brenner Laufzeiten mitschreiben und anhand meinem Durchsatz an der Brennerdüse den Verbrauch errechnen. Außerdem überwache ich meinen Öltank mit Ultraschall und kann so den Füllstand (etwas ungenau) mit loggen.
Habe das aber nicht selber erfunden,. Hier ein Link dazu. http://www.fhemwiki.de/wiki/%C3%96lverbrauchsanzeige_/_Betriebsstundenz%C3%A4hler
Der Aufwand für den Trigger um die Heizung im Chartfrontend sauber anzuzeigen ist aber schon etwas groß. Gibt es denn da keine andere Möglichkeit ?. Wird an dem Chart noch weiter verbessert/optimiert ?
Ich habe da ja auch noch das Thema das meine Achsenbeschriftungen nicht angezeigt werden.
Ansonsten ist das Teil ja voll super gut und es wäre Cool wenn es weiter gepflegt werden würde.
Zitat von: FhemPiUser am 04 Januar 2016, 22:03:24
Hallo Zusammen,
sorry, Anfängerfrage: bin Neuling und habe die UserDemo von Phil heruntergeladen und ins tablet-Verzeichnis kopiert. Ich habe erstmal nichts verändert und sehe die Ansicht wie im Screenshot, aber ohne Icons (stattdessen nur orange Kreise). Woran liegt das?
Du kannst als alternative zum "button", das widget "pagebutton" für Menüeinträge bzw. Links zu Unterseiten und um simple Befehle abzusetzen das widget "push verwenden. Ansonsten wenn du direkt auch den Status eines device brauchts nimm besser "switch". Ist im Wiki gut beschrieben.
@Ronny
Danke. Ich werd's mir mal ansehen, wenns nicht zu kompliziert wird.
@Sam50
Ich hab auch eine Ölheizung aber einen modulierenden Ölbrennwertkessel von Viessmann, den Vitoladens 300c. Hier kann ich nicht vom Düsendurchsatz ausgehen.
Zitat von: Risiko am 25 Mai 2015, 15:12:54
Nach der freundliche Bitte, auch von mit der aktuelle Stand (eher unspektakulär)
Risiko.
Hallo zusammen,
Ich habe mir mal dich als Beispiel genommen. Daran versuche ich zu lernen wie es geht.
Das sieht ja schon ganz gut aus, aber unten wird was beim Wetter abgeschnitten. Kannst du mir ein tipp geben woran das liegen könnte?
Die Tablet Kopf- und Fusszeile habe ich mit root Rechten schon weg.
Viele Grüße
Tim
Gesendet von meinem SM-G925F mit Tapatalk
Hier mal wieder ein zwei Bilder von meiner UI. Alt zu viel hat sich nicht getan. Sind nur jede Menge neuer Devices hinzu gekommen
Hallo!
Zitat von: CoolTux am 06 Januar 2016, 11:03:25
Hier mal wieder ein zwei Bilder von meiner UI. Alt zu viel hat sich nicht getan. Sind nur jede Menge neuer Devices hinzu gekommen
Die Demos mit Hintergrundbild und 50% Transparenz gefallen mir immer wieder gut.
Ich habe in den letzten Tagen die gleiche Technik, aber mit 100% Transparenz eingesetzt um ein Anlagenbild mit aktuellen Werten zu generieren. Mit einem Floorplan ist dies einfach, mit FTUI habe ich dies hier zum ersten Mal umgesetzt. Die Felder für die einzelnen Werte habe ich verkleinert, um mehr Zeilen und Spalten und damit mehr Freiheit bei der Positionierung zu haben. Die Breite habe ich halbiert, die Höhe gedrittelt.
VG
Sven
12 Tonnen? Das nenn ich mal einen Vorrat. Erwartest Du Winter über 3 Jahre ;D ;D
Zitat von: CoolTux am 06 Januar 2016, 13:03:20
12 Tonnen? Das nenn ich mal einen Vorrat. Erwartest Du Winter über 3 Jahre ;D ;D
Nein, das ist eine Heizungsanlage für 14 Passivhäuser und der Vorrat reicht für etwa 9 Monate. :)
Das erklärt so einiges. Sind sehr schick aus. Und vorallem Übersichtlich/Funktional.
Zitat von: CoolTux am 06 Januar 2016, 13:08:19
Das erklärt so einiges. Sind sehr schick aus. Und vorallem Übersichtlich/Funktional.
Danke :D
Zitat von: SvenJust am 06 Januar 2016, 13:00:03
Hallo!
Die Demos mit Hintergrundbild und 50% Transparenz gefallen mir immer wieder gut.
Ich habe in den letzten Tagen die gleiche Technik, aber mit 100% Transparenz eingesetzt um ein Anlagenbild mit aktuellen Werten zu generieren. Mit einem Floorplan ist dies einfach, mit FTUI habe ich dies hier zum ersten Mal umgesetzt. Die Felder für die einzelnen Werte habe ich verkleinert, um mehr Zeilen und Spalten und damit mehr Freiheit bei der Positionierung zu haben. Die Breite habe ich halbiert, die Höhe gedrittelt.
VG
Sven
Sehr cool!
Womit hast Du Dein Anlagenschema gezeichnet?
Hast Du Lust Bildvorlage und html zur Verfügung zu stellen?
Zitat von: roman1528 am 04 Januar 2016, 21:55:30
Meine Demo's:
FTUI-Tablet
http://ueberueck.com/index.php/fhem-hausautomatisierung/fhem-tablet-ui/ftui-tablet (http://ueberueck.com/index.php/fhem-hausautomatisierung/fhem-tablet-ui/ftui-tablet)
hier fehlt noch die ZIP... kommt ganz bald!
Du hast in Deinen Raumbuttons eine Batteriewarnung eingebaut - wenn ich das richtig deute.
Wie hast Du das in FHEM dargestellt um für die Räume einen "Warn-Dummy" aufzubauen?
Zitat von: Gunther am 07 Januar 2016, 00:13:06
Du hast in Deinen Raumbuttons eine Batteriewarnung eingebaut - wenn ich das richtig deute.
Wie hast Du das in FHEM dargestellt um für die Räume einen "Warn-Dummy" aufzubauen?
Hallo Gunther,
ich habe die Batteriewarnung (für HM-Device) so realisiert , über dummy und notify.
define LBatt.warn dummy
attr LBatt.warn alias Batteriestatus
attr LBatt.warn devStateIcon Batterie:battery20 OK:battery100
attr LBatt.warn eventMap on:Batterie off:OK
attr LBatt.warn fp_Obergeschoss 87,197,1,Batteriestatus,
attr LBatt.warn group Akt_Status
attr LBatt.warn icon measure_battery_100@orange
attr LBatt.warn room Favourites,Information
attr LBatt.warn webCmd OK
define LBatt.N notify .*:[Bb]attery:.* { if("%" !~ m/ok/) { if (Value("LBatt.warn") eq "OK") {fhem ("set LBatt.warn on");;} Log (3,"@: Batteriewarnung %");; } }
attr LBatt.N group Akt_Status
attr LBatt.N room Information
Gruss Klaus
Klaus, danke. Das ist zumindest schonmal für einen generellen Batteriebutton hilfreich.
Wie nutzt DU das in FTUI? Deine Lösung würde ich gerne auf der Hauptseite nutzen, wo mir mein Batterie-Menübutton generell anzeigt, dass eine oder mehrere Batterien leer sind. Kannst Du dazu etwas (html) zur Verfügung stellen?
Roman1528 hat das pro Raum. D.h.: Seine Menü-Buttons für die Räume zeigen eine Batteriewarnung an. Finde ich schick gelöst.
Hier würde mich interessieren, wie ich das pro Etage in FHEM hinbekomme (Homematic UND FS20)
Zitat von: Gunther am 07 Januar 2016, 03:00:17
Klaus, danke. Das ist zumindest schonmal für einen generellen Batteriebutton hilfreich.
Wie nutzt DU das in FTUI? Deine Lösung würde ich gerne auf der Hauptseite nutzen, wo mir mein Batterie-Menübutton generell anzeigt, dass eine oder mehrere Batterien leer sind. Kannst Du dazu etwas (html) zur Verfügung stellen?
Roman1528 hat das pro Raum. D.h.: Seine Menü-Buttons für die Räume zeigen eine Batteriewarnung an. Finde ich schick gelöst.
Hier würde mich interessieren, wie ich das pro Etage in FHEM hinbekomme (Homematic UND FS20)
Hi Gunther,
Ich hab das im FTUi noch nicht integriert, bin ja damit noch am Anfang. Die Idee ist aber dieses dummy , wie derzeit in Fhem, hier als eine Sammelmeldung dar zu stellen, also sobald eine Batterie Low ist kommt die Meldung und danach verzweigt man auf eine Detailseite um zu sehen welches Device betroffen ist.
Klaus
Zitat von: Gunther am 07 Januar 2016, 00:10:57
Sehr cool!
Womit hast Du Dein Anlagenschema gezeichnet?
Hast Du Lust Bildvorlage und html zur Verfügung zu stellen?
Hallo Gunther,
ich lege es als zip-Datei bei.
Die folgenden Einstellungen machen die Zellen in Grid kleiner.
<meta name="widget_base_width" content="48"> <!-- 10 Felder horizontal -->
<meta name="widget_base_height" content="37"> <!-- 18 Felder vertikal -->Zusätzlich ist eine css-Datei für die transparente Darstellung und das Hintergrundbild eingebunden.
body {
background:#000000 url(../images/Anlagenschema1_D8_ftui.png) 0 0 no-repeat
}
.transparent {
background: rgba(0, 0, 0, 0) !important;
}
Die transparenten Zellen bekommen die Class
transparent zugewiesen.
class="transparent"Das Anlagenbild ist mit Inkscape erweitert und als png exportiert. Die Basis stammt aus dem p4d Projekt https://github.com/horchi/linux-p4d.
Die obere Zeile ,,Alarmsystem" und die Menüzeile habe ich in diesem Beispiel entfernt.
VG
Sven
Zitat von: Gunther am 07 Januar 2016, 03:00:17
Klaus, danke. Das ist zumindest schonmal für einen generellen Batteriebutton hilfreich.
Wie nutzt DU das in FTUI? Deine Lösung würde ich gerne auf der Hauptseite nutzen, wo mir mein Batterie-Menübutton generell anzeigt, dass eine oder mehrere Batterien leer sind. Kannst Du dazu etwas (html) zur Verfügung stellen?
Roman1528 hat das pro Raum. D.h.: Seine Menü-Buttons für die Räume zeigen eine Batteriewarnung an. Finde ich schick gelöst.
Hier würde mich interessieren, wie ich das pro Etage in FHEM hinbekomme (Homematic UND FS20)
Moin.
Mit einem DOIF überwache ich alle Batterien eines Raumes und setze damit einen Dummy
Internals:
DEF ([bad_HT:battery] eq "low" or [bad_WT:battery] eq "low" or [bad_SC:battery] eq "low") (set bat_bad low) DOELSE (set bat_bad ok)
NAME doif_bat_bad
NR 42
NTFY_ORDER 50-doif_bat_bad
STATE cmd_2
TYPE DOIF
Readings:
2016-01-07 10:08:03 Device bad_HT
2015-10-28 21:19:25 cmd_event bad_WT
2015-10-28 21:19:25 cmd_nr 2
2016-01-07 10:08:03 e_bad_HT_battery ok
2016-01-07 09:37:07 e_bad_SC_battery ok
2016-01-07 10:08:03 e_bad_WT_battery ok
2015-11-18 11:31:28 error reading does not exist: [bad_HT:battery]
2015-10-28 21:19:25 state cmd_2
Condition:
0 ReadingValDoIf('bad_HT','battery','') eq "low" or ReadingValDoIf('bad_WT','battery','') eq "low" or ReadingValDoIf('bad_SC','battery','') eq "low"
Devices:
0 bad_HT bad_WT bad_SC
all bad_HT bad_WT bad_SC
Do:
0:
0 set bat_bad low
1:
0 set bat_bad ok
Helper:
globalinit 1
last_timer 0
sleeptimer -1
Internals:
Itimer:
Readings:
0 bad_HT:battery bad_WT:battery bad_SC:battery
all bad_HT:battery bad_WT:battery bad_SC:battery
State:
Trigger:
Attributes:
group Status
room BadInternals:
NAME bat_bad
NR 41
STATE ok
TYPE dummy
Readings:
2015-11-18 17:33:10 state ok
Attributes:
event-on-change-reading state
group Status
room Bad
setList ok low So kannst es natürlich auch Etagenweise statt Raumweise machen.
Wie das dann in meiner FTUI aussiehts weißt du ja 8)
Grüße^^
Zitat von: Gunther am 07 Januar 2016, 03:00:17
Klaus, danke. Das ist zumindest schonmal für einen generellen Batteriebutton hilfreich.
Wie nutzt DU das in FTUI? Deine Lösung würde ich gerne auf der Hauptseite nutzen, wo mir mein Batterie-Menübutton generell anzeigt, dass eine oder mehrere Batterien leer sind. Kannst Du dazu etwas (html) zur Verfügung stellen?
Roman1528 hat das pro Raum. D.h.: Seine Menü-Buttons für die Räume zeigen eine Batteriewarnung an. Finde ich schick gelöst.
Hier würde mich interessieren, wie ich das pro Etage in FHEM hinbekomme (Homematic UND FS20)
Moin.
Mit einem DOIF überwache ich alle Batterien eines Raumes und setze damit einen Dummy
Internals:
DEF ([bad_HT:battery] eq "low" or [bad_WT:battery] eq "low" or [bad_SC:battery] eq "low") (set bat_bad low) DOELSE (set bat_bad ok)
NAME doif_bat_bad
NR 42
NTFY_ORDER 50-doif_bat_bad
STATE cmd_2
TYPE DOIF
Readings:
2016-01-07 10:08:03 Device bad_HT
2015-10-28 21:19:25 cmd_event bad_WT
2015-10-28 21:19:25 cmd_nr 2
2016-01-07 10:08:03 e_bad_HT_battery ok
2016-01-07 09:37:07 e_bad_SC_battery ok
2016-01-07 10:08:03 e_bad_WT_battery ok
2015-11-18 11:31:28 error reading does not exist: [bad_HT:battery]
2015-10-28 21:19:25 state cmd_2
Condition:
0 ReadingValDoIf('bad_HT','battery','') eq "low" or ReadingValDoIf('bad_WT','battery','') eq "low" or ReadingValDoIf('bad_SC','battery','') eq "low"
Devices:
0 bad_HT bad_WT bad_SC
all bad_HT bad_WT bad_SC
Do:
0:
0 set bat_bad low
1:
0 set bat_bad ok
Helper:
globalinit 1
last_timer 0
sleeptimer -1
Internals:
Itimer:
Readings:
0 bad_HT:battery bad_WT:battery bad_SC:battery
all bad_HT:battery bad_WT:battery bad_SC:battery
State:
Trigger:
Attributes:
group Status
room BadInternals:
NAME bat_bad
NR 41
STATE ok
TYPE dummy
Readings:
2015-11-18 17:33:10 state ok
Attributes:
event-on-change-reading state
group Status
room Bad
setList ok low So kannst es natürlich auch Etagenweise statt Raumweise machen.
Wie das dann in meiner FTUI aussiehts weißt du ja 8)
Grüße^^
Nachdem ich drüben http://forum.fhem.de/index.php/topic,34233.msg386559.html#msg386559
schon die Bilder gepostet habe, hier die html von mir. Alles noch in Arbeit, kein Anspruch auf Vollständigkeit ;)
Gruß
Mario
Mario, sieht gut aus! Da hast Du vieeeel Arbeit reingesteckt...
Ein "paar" Fragen dazu: ::)
1.) Womit misst Du die Temperatur an Deinem Kühlschrank?
2.) Welche Kameras setzt Du ein?
3.) Was machst DU mit diesen Harmonybuttons?
4.) Was zum Teufel macht ein Pizzatimer? :)
5.) Kannst Du ein paar Worte zu Deinen Kodi-Funktionalitäten sagen?
6.) Was für milight Hardware setzt Du ein?
7.) Magst Du ein paar htmls zur Verfügung stellen (Batterien, Fensterkontakte, Kodi, Enigma)
P.S. zum whirlen lade ich mich bei Dir nicht ein... ;)
Moin Gunther,
na dann möchte ich mal deine Fragen beantworten.
1) Mit einem TFA Ersatzsensor 30.3155 (http://www.idealo.de/preisvergleich/OffersOfProduct/1341277_-temperatur-feuchte-sender-30-3155-wd-tfa-dostmann.html) für Temperatur und Luftfeuchte am JeeLink mit LaCrosse
2) Outdoor: FOSCAM FI9805W, FI9805E, Trendnet TV-IP311PI (http://www.trendnet.com/support/supportdetail.asp?prod=210_TV-IP311PI) (noch nicht im FTUI implementiert) | Indoor: FOSCAM FI9805W/E, FI9821W V2, 7Links RoboCam II *g*
3) Ich steuere damit meinen Multimediabereich im Wohnzimmer: TV ein/aus, AVR ein/aus, RPi2 mit Hyperion light ein/aus, Musik hören ...
Also wenn ich z.B. auf den TV Button drücke, dann geht der TV an, der AVR mit korrektem Kanal an, der Sat-Receiver an und der RaspberyPi wird ausgeschaltet.
TV: TV,SAT,AVR ein, RPi2 aus
Kodi: TV,AVR,Rpi2 ein, SAT aus
Musik: TV,Rpi2,SAT aus, AVR ein mit Internetradio
Globe: AVR ein, TV ein und SmartHub öffnen, RPi2 und SAT aus
Vol -: Denon AVR-X4000 leiser
Vol x: Denon AVR-X4000 mute
Vol +: Denon AVR-X4000 lauter
PowerOff: Alles ausschalten
4) Den hatte ich aus einer Vorlage hier und noch nicht entfernt, aber ich denke mir der erinnert dich daran das etwas im Ofen steckt und das du es entfernen solltest damit es nicht schwarz wird ;)
5) Die Kodi Funktionalitäten ergeben sich ja aus dem Plugin und dem Webinterface (http://forum.kodi.tv/showthread.php?tid=183451) welches man vorher im Kodi installieren muss
6) MiLight Bridge V4, RGB|RGB/W Zonencontroller und E27 Lampen in 6/9W
7) Hatte ich vorhin in User-Demos hinterlegt (angehängte zip-Datei)
Gruß
Mario
PS: Vor einer Woche war der noch wärmer ;)
@Mario/waschbaerbauch:
Prima Setup! Sieht sehr schön aus. Ich brauch noch Kameras ... das ist ja quasi ein Control-Center!
Du hast original mein Harmony Layout geklaut 8) ... nur das Kodi-Logo fehlt mir noch :)
Wobei ich schon überlege, ob ich nicht noch die eine oder andere Funktion der Harmony zusätzlich abbilde und dann die Harmony-Apps kpl. verbanne.
Eigentlich könnte ich die IR Commands auch über die Diode selbst verschicken und verteilen - der Rest hängt eh im LAN. Würde die Response evtl.
etwas verbessern bzw. könnte man ggf. auch direkt die Befehle aus der Tablet UI an den Hub senden, dann würde lauter/leiser etwas zügiger funktionieren.
Du jagst die Lautstärke und Mute direkt auf den Denon - werden wohl auch auf den X3200 umsteigen, dann bleibt nicht mehr viel, wozu ich den Hub benötige.
Wie ist das Ansprechverhalten für die Lautstärkeregelung - ich habe gesehen Du nutzt quasi die App-Urls dafür?
@Gunther:
Wenn Du den Batteriewarner für die FS20 fertig und integriert hast, würde ich gerne abstauben :)
Cheers,
h3ll
Danke ist aber noch lange nicht fertig!
Das Control-Center musste sein, da es hier in der Nachbarschaft zu unerwünschten Besuchen inkl. Sachbeschädigungen auf den Grundstücken gekommen ist. Seitdem ist hier und in der unmittelbaren Nachbarschaft Ruhe. Für den Moment sag ich mal: Ziel erreicht!
Woher genau das Harmony Layout ist - keine Ahnung - alles in meinem FTUI ist eine Sammlung von User-Demos, Links aus dem Internet und z.T. aufgeräumten bzw. etwas erweitertem HTML. Das KODI Logo hab ich vom nesges geborgt.
Das Ansprechverhalten vom Denon ist eigentlich recht zügig. Die App URLs hab ich mir aus dem Internet (http://blue-pc.net/2013/12/28/denon-av-reciever-ueber-http-steuern/) gefischt. Die Dokumentation zu den direkten Befehlen kann man sich dann noch bei Denon offiziell laden. In erster Linie waren für mich die direkten Befehle für den Subwoofer wichtig -> WAF wenn die Damen oben schlafen und der Herr im Haus noch vorm TV sitzt :D
Apro pro Control Center ;D
Hier mal eines von meiner Roberta (Staubsaugerroboter)
Grüße
Leon
PS: Im Flur ist Licht aus und sie steht unter der Sitzbank. Daher das Bild etwas dunkel.
Nett!
Sitzt die Kamera vor der Ladestation oder ist es gar eine RaspberryPi Cam die per WLAN mitreisen darf?
Man könnte damit ja noch die Daten über die zurückgelegten Strecken erfassen.. ;D
Zitat von: Baldure am 04 Januar 2016, 23:47:54
@JoeALLb
Danke, das Workaround funktioniert sehr gut. Ich habe auch eine mysql auf einem Raspberry. Der TRIGGER löst mal gleich mehrere Probleme mit den charts. Bei mir sieht der nun so aus:
Schön, dass es funktioniert. Bezüglich Datentypen und Einheiten wird gerade über eine neue Technik der Implementierung diskutiert. Wenn das nix wird, müssen wir doch das logdb - Modul aktualisieren. Aber ich denke, bis dahin reicht der Workaround mit dem Trigger! Weiterhin viel spaß!
@waschbaerbauch
Besser, es ist die Cam des Bot's. Diese wird normalerweise zur Orientierung verwendet. Die neueren Modelle haben davon sogar zwei.
Grüße
Wieder ein Stück schlauer ^^
Ich fürchte hier würde sich der Sauger an den Türschwellen zwischen den Räumen die Zähne ausbeißen und wenn die mal weg sind, dann würde vermutlich die Katze damit kämpfen oder drauf rumfahren :D
Wie hoch sind denn Deine Schwellen. Ich glaube mich erinnern zu können das 2-3 Zentimeter kein Thema sind.
Ich müsste genau messen was der alte Dielenboden von 1950 so hergibt, aber 2cm sind es gefühlt mindestens. Ist ja auch noch eine Leiste von ~15mm davor, damit man nicht gegen eine 'Wand' läuft :D
Wenn Du wirklich Interesse an so einem Teil hast kann ich ja mal einen Testlauf starten wo er hängen bleibt und wo er hoch kommt. Aber meine Roberta besteigt da doch Recht viel und hohe Hindernisse.
Interesse ja, aber im Moment leider kein Budget. Wenn ich vorm geplanten Keller Um- und Ausbau noch so viel Kohle in einen Sauger stecke, dann darf ich bestimmt im Spielhaus der Tochter nächtigen ;D ;D
Haha, auch nicht schlecht. Meiner hat 200 gekostet, natürlich gebraucht. War es mir aber wert.
Hallo,
ich habe mir mal für's Tablet die UI von "roman1528" geladen.
Auf der Wohnzimmerseite im data Device mein 1-Wire Temperatursensor eingetragen.
Jetzt wird aber die Temperatur Zeitweise mit einer Stelle wechselnd mit vier Stellen nach dem Komma angezeigt!
Kann man das auf eine Stelle nach dem Komma einstellen?
Gruß mario
<li class="halbTransparent" data-row="1" data-col="2" data-sizex="2" data-sizey="1">
<header class="headerTransparent">TEMPERATUR / LUFTFEUCHTE</header>
<div class="top-space">
<div data-type="label"
data-device="DS18B20_32CC32010000"
data-get="temperature"
data-unit="%B0C%0A"
data-limits='[-70,20,25]'
data-colors='["#6699FF","green","firebrick"]'
class="bigger inline right-space">
</div>
<div data-type="label"
data-device=""
data-get=""
data-unit="%"
data-limits='[-70,20,25]'
data-colors='["#6699FF","green","firebrick"]'
class="bigger inline left-space">XX%
</div>
<hr width="85%" class="top-space">
<div data-type="label"
class="bigger narrow orange">Wohnzimmer
</div>
</div>
</li>
data-fix="1"
Hallo Zusammen,
anbei mein Tablet UI Dashboard, falls jemand Interesse hat (jetzt auch mit angehängtem Code).
Ist responsive Webdesign, also auch Smartphone-tauglich.
Zitat von: FhemPiUser am 17 Januar 2016, 20:08:07
Hallo Zusammen,
anbei mein Tablet UI Dashboard, falls jemand Interesse hat
Würdest du den Code hier ev. anhängen ?
Danke
ja, hängt jetzt am Post oben.
Hallo,
kleines Update von meiner Seite. Meine Übersicht der Thermostate (siehe hier http://forum.fhem.de/index.php/topic,37378.msg382514.html#msg382514 (http://forum.fhem.de/index.php/topic,37378.msg382514.html#msg382514) habe ich auf das FTUISVR-Modul von Johannes (sieh hier http://forum.fhem.de/index.php/topic,43110.msg350991.html#msg350991 (http://forum.fhem.de/index.php/topic,43110.msg350991.html#msg350991)) umgebaut.
Vorher:
- ca 22 Dateien mit den Thermostatdefinitionen
- mit der Template-Funktion von FTUI war ein Seitenaufbau nicht erfolgreich
Nachher:
- 3 Template-Dateien (nur Fussboden, nur Heizkörper, beides kombiniert
- schnelles und fehlerfreier Aufbau der Seiten
ciao walter
Zitat von: wkarl am 18 Januar 2016, 10:20:42
Hallo,
kleines Update von meiner Seite. Meine Übersicht der Thermostate (siehe hier http://forum.fhem.de/index.php/topic,37378.msg382514.html#msg382514 (http://forum.fhem.de/index.php/topic,37378.msg382514.html#msg382514) habe ich auf das FTUISVR-Modul von Johannes (sieh hier http://forum.fhem.de/index.php/topic,43110.msg350991.html#msg350991 (http://forum.fhem.de/index.php/topic,43110.msg350991.html#msg350991)) umgebaut.
Vorher:
- ca 22 Dateien mit den Thermostatdefinitionen
- mit der Template-Funktion von FTUI war ein Seitenaufbau nicht erfolgreich
Nachher:
- 3 Template-Dateien (nur Fussboden, nur Heizkörper, beides kombiniert
- schnelles und fehlerfreier Aufbau der Seiten
ciao walter
Hallo Walter,
das klingt ja sehr gut, Danke!
Gruss,
Johannes
Hallo Johannes,
Ehre wem Ehre gebührt - Deine Lösung ist echt gut.
Ich lehne mich mal etwas aus dem Fenster - mein Verständnis aus etlichen Jahren IT-Security aus den Randdiskussionen besteht die Architektur eines Software-Services aus Daten-, Applikations- und Präsentationsschicht. Die Forderungen aus den Projekten ist grundsätzlich, die Präsentationsschicht bereitet die anforderte Seite auf und sendet sie komplett zum Client. Dies entspricht genau Deiner Lösung.
Ich will die Template-Lösung aus dem FTUI-Projekt nicht madig machen - sie hat ihre Berechtigung - aber bei aufwendigen und komplexen Seiten stößt sie auf ihre Grenzen. Daher bin ich auch dafür, dass Dein Modul ins repository kommt. Jeder kann dann für sich entscheiden welchen Weg er geht.
ciao walter
Zitat von: wkarl am 18 Januar 2016, 10:20:42
Nachher:
- 3 Template-Dateien (nur Fussboden, nur Heizkörper, beides kombiniert
- schnelles und fehlerfreier Aufbau der Seiten
Kannst du mal ein Beispiel posten? Ich versuche mich auch gerade daran. Nur mein Fhem schmiert komplett ab.
Datei "heizung_eg.ftui.html":
<!DOCTYPE html>
<html>
<head>
<title>HEIZUNG ERGESCHOSS</title>
</head>
<body>
<div class="gridster">
<ul>
<li class="halbTransparent" data-row="1" data-col="1" data-sizex="1" data-sizey="1" data-template="inc_home_button.html"></li>
<li class="halbTransparent" data-row="1" data-col="8" data-sizex="2" data-sizey="1" data-template="inc_uhr.html"></li>
<li class="halbTransparent" data-row="2" data-col="1" data-sizex="1" data-sizey="4" data-template="menu_links.html"></li>
<li data-row="2" data-col="2" data-sizex="2" data-sizey="2">
<header>Esszimmer</header>
<?ftui-inc="thermostat.part" device="1_01_EZ_Heizungsthermostat" climachannel="1_01_EZ_Heizungsthermostat_Clima" ?>
</li>
</ul>
</div>
</body>
</html>
Datei "thermostat.part":
<?ftui-header="Thermostat" device climachannel?>
<div class="container">
<div class="container row big top-space">
<div class="col-1-2 left">
<div data-type="label"
data-device="<?ftui-key=climachannel ?>" data-get="measured-temp" data-unit="%B0C%0A" data-fix="1"
data-limits='[-20,20,24]' data-colors='["skyblue","darkorange","orangered"]'>
</div>
</div>
</div>
<div class="container row">
<div class="top-space" data-type="label">Heizkörper</div>
<div class="container top-space">
<div class="col-2-3 left">
<div data-type="thermostat"
data-device="<?ftui-key=climachannel ?>" data-get="desired-temp" data-set="desired-temp" data-temp="measured-temp" data-valve="ValvePosition"
data-min="0" data-max="30" data-step="0.5"
data-mode="controlMode"
data-off="controlManu off"
data-boost="controlMode boost"
data-fgColor="darkorange"
data-height="96px"
data-width="96px">
</div>
</div>
<div class="col-1-3 top-space right">
<font size="-2">
<div data-type="multistatebutton"
data-device="<?ftui-key=climachannel ?>" data-get="controlMode" data-get-on='["auto","manual"]'
data-set='["controlMode manual","controlMode auto"]' data-icons='["oa-sani_heating_automatic","oa-sani_heating_manual"]' data-colors='["darkgreen","darkblue"]'
data-background-icon="fa-square" data-background-colors='["dimgrey","dimgrey"]'
>
</div>
<br>
<div data-type="multistatebutton"
data-device="<?ftui-key=device ?>" data-get="R-btnLock" data-get-on='["on","off"]'
data-set='["regSet btnLock off","regSet btnLock on"]' data-icons='["oa-secur_locked","oa-secur_open"]' data-colors='["darkred","darkblue"]'
data-background-icon="fa-square" data-background-colors='["dimgrey","dimgrey"]'
>
</div>
</font>
</div>
</div>
</div>
</div>
Log:
016.01.21 14:59:34.202 4: WEB_192.168.178.91_60000 GET /fhem/ftui/heizung_eg.ftui.html; BUFLEN:0
2016.01.21 14:59:34.211 4: FTUISRV: Request to FTUISRV :/ftui/heizung_eg.ftui.html:
2016.01.21 14:59:34.212 5: ftui: Request to :/ftui/heizung_eg.ftui.html:
2016.01.21 14:59:34.213 5: ftui: handletemplatefile :./www/tablet/heizung_eg.ftui.html:
2016.01.21 14:59:34.215 4: ftui: is real template :./www/tablet/heizung_eg.ftui.html:
Undefined subroutine &main::fileparse called at ./FHEM/02_FTUISRV.pm line 330.
Mache ich das ".ftui" im Dateinamen weg und ersetze alle "<?ftui..." durch die entsprechenden Werte dann wird alles korrekt angezeigt.
Jemand eine Idee?
Vielen Dank und Gruß Daniel
Hallo Daniel,
Kurz von unterwegs. Meine part-Datei enthält auch .ftui.
Und bei <?ftui-header ... Habe ich am Ende ein Leerzeichen vor ?>
Ciao Walter
Zitat von: wkarl am 21 Januar 2016, 16:15:08
Kurz von unterwegs. Meine part-Datei enthält auch .ftui.
Und bei <?ftui-header ... Habe ich am Ende ein Leerzeichen vor ?>
Das war leider nicht das Problem.
Selber Fehler.
Kaum ist der Urlaub vorbei wird es enger mit der Zeit..
Die Fortschritte liegen im Moment eher in Details:
- Umsortieren und überdenken ob das wirklich die Struktur sein soll ::)
- Versuch HTML zu verstehen und Codebereinigung :D
- Ideen fürs Platz sparen finden (MiLight, MAX!Regler, Info/Status Button - 1x1 mit Popup)
- Müllkalender adaptiert
- TV Remote
Hallo.
Ich sage mal: Gefällt mir!
Interessant finde ich den Abfallkalender. Wo habe ich den da was überlesen bezüglich der Icons mit den verbleibende Tagen.
Hallo @waschbaerbauch,
könntest du evtl. die hmtl-Datei der gateway-Seite zur Verfügung stellen? Wie hast du den TP-Switch eingebaut? Woher bekommst du die Daten?
Danke und Gruß
Zitat von: waschbaerbauch am 22 Januar 2016, 00:25:28
Kaum ist der Urlaub vorbei wird es enger mit der Zeit..
Die Fortschritte liegen im Moment eher in Details:
- Umsortieren und überdenken ob das wirklich die Struktur sein soll ::)
- Versuch HTML zu verstehen und Codebereinigung :D
- Ideen fürs Platz sparen finden (MiLight, MAX!Regler, Info/Status Button - 1x1 mit Popup)
- Müllkalender adaptiert
- TV Remote
Zitat von: skuggy am 22 Januar 2016, 07:11:00
Hallo @waschbaerbauch,
könntest du evtl. die hmtl-Datei der gateway-Seite zur Verfügung stellen? Wie hast du den TP-Switch eingebaut? Woher bekommst du die Daten?
Danke und Gruß
Das würde mich auch interessieren!
Hallo Daniel,
hast Du das schon mal mit den Entwicklertools untersucht? Bei Chrome findest Du diese unter Anzeigen/Entwickler.
Zitat von: dancatt am 21 Januar 2016, 16:59:40
Das war leider nicht das Problem.
Selber Fehler.
Anbei findest Du die Ansicht des Kellers und folgend die Dateien.
h-kg-r.ftui.html:<!DOCTYPE html>
<html>
<head>
<title>KG Heizung</title>
</head>
<body>
<div class="gridster">
<ul>
<!-- Menu -->
<div class="container">
<li data-row="1" data-col="1" data-sizex="3" data-sizey="16" data-template="menu-main.html"></li>
<li data-row="21" data-col="1" data-sizex="3" data-sizey="3" data-template="menu-datetime.html"></li>
</div>
<!-- Content -->
<li data-row="1" data-col="4" data-sizex="6" data-sizey="7">
<header>Hobbyraum</header>
<?ftui-inc="../tablet_Templates/h-hz-template-HK.ftui.part" room="Hobbyraum" ?>
</li>
<li data-row="1" data-col="10" data-sizex="6" data-sizey="7">
<header>Partyraum</header>
<?ftui-inc="../tablet_Templates/h-hz-template-HK.ftui.part" room="Partyraum" ?>
</li>
<li data-row="1" data-col="16" data-sizex="6" data-sizey="7">
<header>Werkstatt</header>
<?ftui-inc="../tablet_Templates/h-hz-template-HK.ftui.part" room="Werkstatt" ?>
</li>
<li data-row="1" data-col="22" data-sizex="6" data-sizey="7">
<header>Waschraum</header>
<?ftui-inc="../tablet_Templates/h-hz-template-HK.ftui.part" room="Waschraum" ?>
</li>
<li data-row="6" data-col="6" data-sizex="6" data-sizey="7">
<header>Lagerraum</header>
<?ftui-inc="../tablet_Templates/h-hz-template-HK.ftui.part" room="Lagerraum" ?>
</li>
</ul>
</div>
</body>
</html>
h.hz-template.HK.ftui.part:
<?ftui-header="HK" room ?>
<div class="container">
<div class="container row big top-space">
<div class="centered">
<div data-type="label"
data-device="<?ftui-key=room ?>_HK_Clima" data-get="measured-temp" data-unit="%B0C%0A" data-fix="1"
data-limits='[-20,20,24]' data-colors='["skyblue","darkorange","orangered"]'>
</div>
</div>
</div>
<div class="container row">
<div class="top-space" data-type="label">Heizkörper</div>
<div class="container top-space">
<div class="col-2-3 left">
<div data-type="thermostat"
data-device="<?ftui-key=room ?>_HK_Clima" data-get="desired-temp" data-set="desired-temp" data-temp="measured-temp" data-valve="ValvePosition"
data-min="0" data-max="30" data-step="0.5"
data-mode="controlMode"
data-off="controlManu off" data-boost="controlMode boost"
data-fgColor="darkorange"
data-height="96px"
data-width="96px">
</div>
</div>
<div class="col-1-3 top-space right"><font size="-2">
<div data-type="multistatebutton"
data-device="<?ftui-key=room ?>_HK_Clima" data-get="controlMode" data-get-on='["auto","manual"]'
data-set='["controlMode manual","controlMode auto"]' data-icons='["oa-sani_heating_automatic","oa-sani_heating_manual"]' data-colors='["darkgreen","darkblue"]'
data-background-icon="fa-square" data-background-colors='["dimgrey","dimgrey"]'
>
</div><br>
<div data-type="multistatebutton"
data-device="<?ftui-key=room ?>_HK" data-get="R-btnLock" data-get-on='["on","off"]'
data-set='["regSet btnLock off","regSet btnLock on"]' data-icons='["oa-secur_locked","oa-secur_open"]' data-colors='["darkred","darkblue"]'
data-background-icon="fa-square" data-background-colors='["dimgrey","dimgrey"]'
>
</div>
</font>
</div>
</div>
</div>
</div>
ciao walter
Hi waschbaerbauch,
das mit der Zeit kommt mir bekannt vor ;)
Ich hätte auch Interesse am Abfallkalender und der schicken Uhr !
danke schom mal vorab !
Zitat von: skuggy am 22 Januar 2016, 07:11:00
Hallo @waschbaerbauch,
könntest du evtl. die hmtl-Datei der gateway-Seite zur Verfügung stellen? Wie hast du den TP-Switch eingebaut? Woher bekommst du die Daten?
Danke und Gruß
Klar doch, hängen jetzt oben dran ;)
Die Switche hab ich via PRESENCE Status (lan ping) eingebunden. Das funktioniert natürlich nur wenn sie eine eigene IP besitzen. Für die nicht zu managen Etagenverteiler geht das natürlich nicht. Zumindest hab ich dafür noch keine Idee außer etwas als 'anwesend' zu pingen was dran hängt.
Zitat von: majorshark am 22 Januar 2016, 07:08:40
Hallo.
Ich sage mal: Gefällt mir!
Interessant finde ich den Abfallkalender. Wo habe ich den da was überlesen bezüglich der Icons mit den verbleibende Tagen.
Das tut mir leid! ;D
Im Ernst: Was genau bzgl. der Icons meinst du - verbleibende Tage, Farbe, die Icons Tonne/Sack selbst?
Die HTMLs habe ich jetzt mal beigefügt. Das Meiste hab ich mir ja aus den Vorlagen und Codeschnipseln zusammen gepuzzelt.
Dafür noch mal mein Dank an alle die hier etwas beisteuern. Ohne euch wäre mein FTUI nicht da wo es grad ist!
Zitat von: waschbaerbauch am 22 Januar 2016, 08:16:51
Klar doch, hängen jetzt oben dran ;)
Die Switche hab ich via PRESENCE Status (lan ping) eingebunden. Das funktioniert natürlich nur wenn sie eine eigene IP besitzen. Für die nicht zu managen Etagenverteiler geht das natürlich nicht. Zumindest hab ich dafür noch keine Idee außer etwas als 'anwesend' zu pingen was dran hängt.
Danke ;)
Mit PRESENCE kämpf ich schon länger, aber irgendwie hat es nie richtig funktioniert. :'(
Ich meinte die verbleibenden Tage. Habe es aber gerade gefunden und eingebaut. Funzt!
Danke
Da gibt es zwei Varianten. Die Erste hab ich vom CoolTux gemopst ;D
Irgendwo hier oder nebenan hatte setstate (meine ich) da auch eine zweite/vereinfachte Variante als Codeschnipsel hinterlassen.
Du Mopser Du ;D
Grüße
Zitat von: skuggy am 22 Januar 2016, 08:28:13
Danke ;)
Mit PRESENCE kämpf ich schon länger, aber irgendwie hat es nie richtig funktioniert. :'(
PRESENCE hat bei mir auch erst ein wenig gezickt. Bisher hat es geholfen ein Device mit PRESENCE anzulegen und dann noch mal die Definition zu öffnen und den Modify Button zu drücken. Danach lief zumindest der lan Ping bei mir - bisher zuverlässig.
PS: Aktuell läuft der PRESENCE Test mit 54 Geräten :D
Zitat von: kvo1 am 22 Januar 2016, 08:10:55
Hi waschbaerbauch,
das mit der Zeit kommt mir bekannt vor ;)
Ja ein Teufelskreis :D
Ich hab grad in deiner Signatur gesehen das du mit einer Viessmann arbeitest. Das ist ein Thema welches hier noch komplett unbeachtet geblieben ist. In meinem Keller schwirrt auch eine Viessmann Vitodens 200 rum. Bringt deine Heizung den Zugang 'von Haus aus' mit oder gehst du auch Umwege wie z.B. hier http://openv.wikispaces.com/Bauanleitung+LAN-Ethernet ?
Das wäre wohl, wenn ich das bisher so im Augenwinkel richtig gesehen habe, der Einzige Weg für mich mit meinem Modell irgendwie an Daten zu kommen..
Zitat von: CoolTux am 22 Januar 2016, 09:14:16
Du Mopser Du ;D
Grüße
Und Verwechsler kann auch noch sein - kA ob das von dir oder roman gemopst wurde ;)
Zitat von: waschbaerbauch am 22 Januar 2016, 09:57:43
Und Verwechsler kann auch noch sein - kA ob das von dir oder roman gemopst wurde ;)
Wie auch immer, bleibts dennoch ein Mopser, hihi. Aber wenn ich mal überlege wo ich so überall gemopst habe. Naja von allen das beste eben. Lach.
Das mit dem Popups muß ich mir auch noch anschauen. Da will ich auch noch so einiges realisieren.
Genau, wir wollen ja alle das Rad nicht neu erfinden ;)
Ich hatte schon mal angefangen die Remotes in ein Popup zu packen, allerdings hat man (meine ich) da ja kein Grid zur Verfügung und so wurde es sehr schnell unübersichtlich. Vermutlich müsste man im Popup dann mit Tabellen arbeiten um vernünftig zu positionieren. Den Teil vom selfhtml muss ich mir demnächst dann noch einmal zu Gemüte führen..
Zitat von: waschbaerbauch am 22 Januar 2016, 09:40:05
Ja ein Teufelskreis :D
Ich hab grad in deiner Signatur gesehen das du mit einer Viessmann arbeitest. Das ist ein Thema welches hier noch komplett unbeachtet geblieben ist. In meinem Keller schwirrt auch eine Viessmann Vitodens 200 rum. Bringt deine Heizung den Zugang 'von Haus aus' mit oder gehst du auch Umwege wie z.B. hier http://openv.wikispaces.com/Bauanleitung+LAN-Ethernet ?
Das wäre wohl, wenn ich das bisher so im Augenwinkel richtig gesehen habe, der Einzige Weg für mich mit meinem Modell irgendwie an Daten zu kommen..
Moin
Nö , von Hause aus war da nix, hätte man aber "für teuer Geld" nachrüsten können.
Habe mich dann für den Optolink entschieden und fertig gekauft!
http://openv.wikispaces.com/Bauanleitung+USB (http://openv.wikispaces.com/Bauanleitung+USB)
Der hängt an einem anderen RPI und soll mal noch weitere Dinge erfassen die´s da so im Keller gibt ;)
Läuft völlig problemlos ..... muss das nur noch im FTUI visualisieren .... (über F2F)
kennst Du diesen Thread ?
http://forum.fhem.de/index.php?topic=20280.0 (http://forum.fhem.de/index.php?topic=20280.0)
Hallo Walter,
Zitat von: wkarl am 22 Januar 2016, 07:46:41
Anbei findest Du die Ansicht des Kellers und folgend die Dateien.
Wie ist denn bei dir die Ordnerstruktur aufgebaut?
Wo liegen die html- und wo die part-Dateien?
Vielen Dank.
Gruß Daniel
Zitat von: kvo1 am 22 Januar 2016, 11:16:52
Moin
Nö , von Hause aus war da nix, hätte man aber "für teuer Geld" nachrüsten können.
Habe mich dann für den Optolink entschieden und fertig gekauft!
http://openv.wikispaces.com/Bauanleitung+USB (http://openv.wikispaces.com/Bauanleitung+USB)
Der hängt an einem anderen RPI und soll mal noch weitere Dinge erfassen die´s da so im Keller gibt ;)
Läuft völlig problemlos ..... muss das nur noch im FTUI visualisieren .... (über F2F)
kennst Du diesen Thread ?
http://forum.fhem.de/index.php?topic=20280.0 (http://forum.fhem.de/index.php?topic=20280.0)
Noch nicht, aber 62 Seiten klingt wieder wie eine Fleissaufgabe fürs Wochenende ;)
Dieses V hab ich zumindest bei mir gesehen, ob da aber auch 'was hinter' steckt muss ich mal genauer nachsehen!
Zitat von: RoBra81 am 20 Dezember 2015, 21:21:04
Hallo,
mit der angehängten Version funktioniert's nach Anpassung der Funktion show auch beim Modus "animate" ;D
Ronny
Ist die Version eigentlich schon eingecheckt? Bei mir bleibt Popup, in dem eigentlich ein (stand alone funktionierendes) Chart auf DBLog-Basis erscheinen müsste, nämlich auch leer.
EDIT: Die modifizierte Version ist wohl nicht eingecheckt. Nach manuellem Download läuft es wie es soll (Chart erscheint im Popup).
Hallo zusammen,
nein, die Version ist noch nicht eingechecht. Demnächst gibt es eine neue Version von chart_widget, dann werde ich setstate auch bitten das popup_widget in der angepassten Version einzuchecken.
Hallo,
ich bin gerade dabei, unsere Kalender in FTUI zu visualisieren.
Irgendwie bin ich mit meiner Lösung (siehe Anhang) überhaupt nicht zufrieden, aber mir kommen auch keine besseren Ideen.
Wie habt ihr eure Kalender-Anzeige gelöst?
Könnt ihr Beispiele posten?
Vielen Dank für eure Anregungen...!
Grüße
Jens
Hi,
mein Kalender sieht aktuell so aus - ist noch in Arbeit. Ich habe dazu aber ein bisschen umgebaut und nutze im Hintergrund Baikal als Kalender. Da Baikal in der 1er Version noch kein JSON Export hat, und ich die 2er auf dem Raspberry nicht ans laufen bekommen habe, habe ich denk Baikal Kalender in FHEM eingebunden. Für die Darstellung nutze ich fullcalendar.io (Website). Dem habe ich in meinem Tempalate einen DIV gegönnt und ihn dann eingebaut. Damit das funktioniert, habe die das Kalender-Modul von FHEM um eine rudimentäre JSON Ausgabefunktion ergänzt - damit wird dann der Kalender gefüttert.
Wer z.B. Google Calendar benutzt, kann natürlich direkt mit dem fullcalendar darauf zugreifen.
Ich finde die Kalenderdarstellung irgendwie besser als eine Liste. Ich habe auch noch CalDavZAP installiert und per iframe eingebunden, war mir dann aber für die "einfache" Darstellung etwas überdimensioniert.
Das Buttonlayout und die Darstellung werde ich noch etwas anhübschen - und dann auch hier noch den Abfallkalender, etc. einbauen,
wenn ich Zeit finde.
Ist ja nur 'ne Anregung ...
Cheers,
h3ll
Sieht gut aus! Mir gefällt auch deine Farbgestalltung sehr gut.
Kann man das als ftui_widget bauen, also dein Kalender innerhalb eines Widgets laden, initialisieren und updaten? Oder hast du das gar schon so gebaut?
Zitat von: sam50 am 05 Januar 2016, 15:59:53
@Sam05
Welche Heizung hast du? Und wie kommst du an den Ölverbrauch ran?
@Baldure
Hi ich habe eine Ölheizung und habe mir eine Brenner-Überwachung mit einem HM-IO-Sender eingebaut. Damit kann ich die Brenner Laufzeiten mitschreiben und anhand meinem Durchsatz an der Brennerdüse den Verbrauch errechnen. Außerdem überwache ich meinen Öltank mit Ultraschall und kann so den Füllstand (etwas ungenau) mit loggen.
Habe das aber nicht selber erfunden,. Hier ein Link dazu. http://www.fhemwiki.de/wiki/%C3%96lverbrauchsanzeige_/_Betriebsstundenz%C3%A4hler
Der Aufwand für den Trigger um die Heizung im Chartfrontend sauber anzuzeigen ist aber schon etwas groß. Gibt es denn da keine andere Möglichkeit ?. Wird an dem Chart noch weiter verbessert/optimiert ?
Ich habe da ja auch noch das Thema das meine Achsenbeschriftungen nicht angezeigt werden.
Ansonsten ist das Teil ja voll super gut und es wäre Cool wenn es weiter gepflegt werden würde.
Hallo @Sam50 ,
was für eine HM- Komponete hast du dafür genommen und wie hast du es an den Brenner angeschlossen?
Zitat von: josburg am 24 Januar 2016, 12:03:04
Hallo,
ich bin gerade dabei, unsere Kalender in FTUI zu visualisieren.
Irgendwie bin ich mit meiner Lösung (siehe Anhang) überhaupt nicht zufrieden, aber mir kommen auch keine besseren Ideen.
Wie habt ihr eure Kalender-Anzeige gelöst?
Könnt ihr Beispiele posten?
Vielen Dank für eure Anregungen...!
Grüße
Jens
ich habe 3 Kalender (Kal1 / Kal2 / Kal 3) mit CALVIEW zusammen gefaßt und rauf setzt diese FTUI auf......
<li data-row="1" data-col="2" data-sizex="6" data-sizey="7" class="semitransparent">
<header style="color:red">T E R M I N L I S T E - B E I S P I E L 2</header>
<div class="cell left-align" style="color:#AA6900">
<div style="font-weight: bold; text-decoration: underline;" class="darker">Erstellt:
<div data-type="clock" data-format="j. F" interval="60000" style="font-weight: bold; text-decoration: underline;" class="inline darker"></div>
</div>
<table border="0px" width="100%">
<tr>
<td><div data-type="label" data-device="vocalview2" data-get="t_001_bdate" style="color:white" class="left"></div> </td>
<td><div data-type="label" data-device="vocalview2" data-get="t_001_btime" style="color:white" class="left"></div> </td>
<td><div data-type="label" data-device="vocalview2" data-get="t_001_edate" style="color:white" class="left"></div> </td>
<td><div data-type="label" data-device="vocalview2" data-get="t_001_etime" style="color:white" class="left"></div> </td>
<td><div data-type="label" data-device="vocalview2" data-get="t_001_summary" style="color:white" class="left"></div> </td>
<td><div data-type="symbol" data-device="vocalview2"
data-get="t_001_source"
data-icons='["fa-female","fa-male","fa-users"]'
data-get-on='["Kal1","Kal2","Kal3"]'
data-on-colors='["red","blue","green"]' class="left"></div> </td>
</tr>
<tr>
<td><div data-type="label" data-device="vocalview2" data-get="t_002_bdate" style="color:white" class="left"></div> </td>
<td><div data-type="label" data-device="vocalview2" data-get="t_002_btime" style="color:white" class="left"></div> </td>
<td><div data-type="label" data-device="vocalview2" data-get="t_002_edate" style="color:white" class="left"></div> </td>
<td><div data-type="label" data-device="vocalview2" data-get="t_002_etime" style="color:white" class="left"></div> </td>
<td><div data-type="label" data-device="vocalview2" data-get="t_002_summary" style="color:white" class="left"></div> </td>
<td><div data-type="symbol" data-device="vocalview2"
data-get="t_002_source"
data-icons='["fa-female","fa-male","fa-users"]'
data-get-on='["Kal1","Kal2","Kal3"]'
data-on-colors='["red","blue","green"]' class="left"></div> </td>
</tr>
<tr>
<td><div data-type="label" data-device="vocalview2" data-get="t_003_bdate" style="color:white" class="left"></div> </td>
<td><div data-type="label" data-device="vocalview2" data-get="t_003_btime" style="color:white" class="left"></div> </td>
<td><div data-type="label" data-device="vocalview2" data-get="t_003_edate" style="color:white" class="left"></div> </td>
<td><div data-type="label" data-device="vocalview2" data-get="t_003_etime" style="color:white" class="left"></div> </td>
<td><div data-type="label" data-device="vocalview2" data-get="t_003_summary" style="color:white" class="left"></div> </td>
<td><div data-type="symbol" data-device="vocalview2"
data-get="t_003_source"
data-icons='["fa-female","fa-male","fa-users"]'
data-get-on='["Kal1","Kal2","Kal3"]'
data-on-colors='["red","blue","green"]' class="left"></div> </td>
</tr>
<tr>
<td><div data-type="label" data-device="vocalview2" data-get="t_004_bdate" style="color:white" class="left"></div> </td>
<td><div data-type="label" data-device="vocalview2" data-get="t_004_btime" style="color:white" class="left"></div> </td>
<td><div data-type="label" data-device="vocalview2" data-get="t_004_edate" style="color:white" class="left"></div> </td>
<td><div data-type="label" data-device="vocalview2" data-get="t_004_etime" style="color:white" class="left"></div> </td>
<td><div data-type="label" data-device="vocalview2" data-get="t_004_summary" style="color:white" class="left"></div> </td>
<td><div data-type="symbol" data-device="vocalview2"
data-get="t_004_source"
data-icons='["fa-female","fa-male","fa-users"]'
data-get-on='["Kal1","Kal2","Kal3"]'
data-on-colors='["red","blue","green"]' class="left"></div> </td>
</tr>
</table>
</div>
</li>
Zitat von: h3llsp4wn am 24 Januar 2016, 12:58:47
Hi,
mein Kalender sieht aktuell so aus - ist noch in Arbeit. Ich habe dazu aber ein bisschen umgebaut und nutze im Hintergrund Baikal als Kalender. Da Baikal in der 1er Version noch kein JSON Export hat, und ich die 2er auf dem Raspberry nicht ans laufen bekommen habe, habe ich denk Baikal Kalender in FHEM eingebunden. Für die Darstellung nutze ich fullcalendar.io (Website). Dem habe ich in meinem Tempalate einen DIV gegönnt und ihn dann eingebaut. Damit das funktioniert, habe die das Kalender-Modul von FHEM um eine rudimentäre JSON Ausgabefunktion ergänzt - damit wird dann der Kalender gefüttert.
Wer z.B. Google Calendar benutzt, kann natürlich direkt mit dem fullcalendar darauf zugreifen.
Ich finde die Kalenderdarstellung irgendwie besser als eine Liste. Ich habe auch noch CalDavZAP installiert und per iframe eingebunden, war mir dann aber für die "einfache" Darstellung etwas überdimensioniert.
Das Buttonlayout und die Darstellung werde ich noch etwas anhübschen - und dann auch hier noch den Abfallkalender, etc. einbauen,
wenn ich Zeit finde.
Ist ja nur 'ne Anregung ...
Cheers,
h3ll
Hallo,
Wie hast Du Deine Ecken vom Gridster so schön rund bekommen?
Grüße
Zitat von: kvo1 am 24 Januar 2016, 22:25:34
ich habe 3 Kalender (Kal1 / Kal2 / Kal 3) mit CALVIEW zusammen gefaßt und rauf setzt diese FTUI auf......
Hast Du davon zufällig ein Screenshot?
Viele Grüße
Jens
Zitat von: josburg am 24 Januar 2016, 22:54:31
Hast Du davon zufällig ein Screenshot?
Viele Grüße
Jens
bitte sehr ..
Zitat von: CoolTux am 24 Januar 2016, 22:41:39
Hallo,
Wie hast Du Deine Ecken vom Gridster so schön rund bekommen?
Grüße
@CoolTux: Habe dem gridster einen Radius verpasst ;)
.gridster ul li {
...
border-radius:8px;
...
}
Zitat von: setstate am 24 Januar 2016, 13:16:43
Sieht gut aus! Mir gefällt auch deine Farbgestalltung sehr gut.
Kann man das als ftui_widget bauen, also dein Kalender innerhalb eines Widgets laden, initialisieren und updaten? Oder hast du das gar schon so gebaut?
Danke :D - Ich habe das auch überlegt, dann aber aus Zeitgründen verworfen - auch wollte ich da nicht was reinfummeln, was Du ggf. ganz anders gelöst hättest
oder hättest haben wollen - zumal ich schon lange nicht mehr in den tiefen des JS unterwegs gewesen bin. Wie ich verstanden habe, müsste die widget_widget Klasse
um ein eigenes Kalender-Widget erweitert werden und mindestens mit init und update Methoden versehen werden, richtig? Fraglich wäre dann auch, was alles von der
Parametrierung aus dem fullcalender über das Widget realisiert werden soll (das ist 'ne ganze Menge, wenn man einfach alles durchreicht).
Dann wäre auch noch zu prüfen/klären, ob die Schnittstelle nach außen einfach eine URL ist (die JSON liefert) - das würde dann aktuell wohl nicht für FHEM Kalender ausreichen.
Man könnten natürlich auch per JS aus dem FHEM Result ein JSON für den fullcalender bauen. Ich bin da aber eher ein Freud davon die Daten direkt bei der Entstehung richtig zu
schicken. Letztlich aber auch machbar.
Wenn Du mir zu einem guten "Widget"-Beispiel raten kannst, würde ich mich evtl. durchbeißen und schauen was geht. Will aber nicht zu viel versprechen, ggf. scheitert es an meinen Fähigkeiten
und/oder auch an der Zeit. Schick' wäre es schon, hab ja auch damit angefangen, weil ich nichts Schönes hatte :) ... aber wenn da ggf. dann auch noch Pflege von Terminen über die Oberfläche
dazu kommen sollte, dann müsste man sich ggf. noch was einfallen lassen oder einen anderen Weg gehen.
Cheers,
h3ll
Cool. Danke
Hallo zusammen
lese schon eine Zeitlang mit und bin mich am einarbeiten.
Kann mir jemand den Tip geben, welches Widget ich nehmen kann wenn ich aus einem modbusRegister meiner Solaranlage die momentane Produktion auf einer Analoganzeige (Uhr) darstellen möchte?
Grüsse
Conti
Zitat von: h3llsp4wn am 24 Januar 2016, 12:58:47
Hi,
mein Kalender sieht aktuell so aus - ist noch in Arbeit. Ich habe dazu aber ein bisschen umgebaut und nutze im Hintergrund Baikal als Kalender. Da Baikal in der 1er Version noch kein JSON Export hat, und ich die 2er auf dem Raspberry nicht ans laufen bekommen habe, habe ich denk Baikal Kalender in FHEM eingebunden. Für die Darstellung nutze ich fullcalendar.io (Website). Dem habe ich in meinem Tempalate einen DIV gegönnt und ihn dann eingebaut. Damit das funktioniert, habe die das Kalender-Modul von FHEM um eine rudimentäre JSON Ausgabefunktion ergänzt - damit wird dann der Kalender gefüttert.
Wer z.B. Google Calendar benutzt, kann natürlich direkt mit dem fullcalendar darauf zugreifen.
Ich finde die Kalenderdarstellung irgendwie besser als eine Liste. Ich habe auch noch CalDavZAP installiert und per iframe eingebunden, war mir dann aber für die "einfache" Darstellung etwas überdimensioniert.
Das Buttonlayout und die Darstellung werde ich noch etwas anhübschen - und dann auch hier noch den Abfallkalender, etc. einbauen,
wenn ich Zeit finde.
Ist ja nur 'ne Anregung ...
Cheers,
h3ll
Boa, wie geil. Würdest du deine HTML zur verfügung stellen. Deine Aufteilung, Farbgestalltung usw. sind ja total geil...
Zitat von: RettungsTim am 26 Januar 2016, 07:01:08
Boa, wie geil. Würdest du deine HTML zur verfügung stellen. Deine Aufteilung, Farbgestalltung usw. sind ja total geil...
Ich räume noch ein bisschen auf und hänge die Tage ein Zip hier rein.
Zitat von: setstate am 24 Januar 2016, 13:16:43
Sieht gut aus! Mir gefällt auch deine Farbgestalltung sehr gut.
Kann man das als ftui_widget bauen, also dein Kalender innerhalb eines Widgets laden, initialisieren und updaten? Oder hast du das gar schon so gebaut?
@setstate:
Nachtrag - habe mich da heute mal dran gemacht, also:
Laden/Init geht - werde hier noch die Parametrierung für den Kalender aus der Definition durchreichen und mit Defaultwerten belegen (zumindest die wichtigsten Funktionen), dies kann dann ggf. nach und nach erweitert/ergänzt werden.
Update geht auch - ist allerdings noch nicht sauber - da muss ich wohl noch am/im Umgang mit dem Device was anpassen. Damit wäre dann aber auch klar, dass das Device ein FHEM-Kalender sein soll, womit dann auch noch das Formatproblem geklärt werden müsste. Aktuell wird bei jedem Aufruf der Update Routine ein Update durchgeführt - ist das TabletUI Standard - die Debug-Ausgabe am Ende gibt ja immer nur ein Device aus, aber der Kalender wird immer mit aktualisiert (in der tablet ui
Update Routine beim Durchlauf der Devices).
Die sonstigen JS/CSS Dateien für den Kalender werden nur geladen, wenn er benutzt wird.
Falls ich nerve - einfach Bescheid geben, dann bastel ich erst mal im Kämmerlein weiter.
Cheers,
h3ll
Zitat von: h3llsp4wn am 27 Januar 2016, 16:39:49
Falls ich nerve - einfach Bescheid geben, dann bastel ich erst mal im Kämmerlein weiter.
Ich kann mir nicht vorstellen das du jemanden damit nervst!! Sinnvoll dafür wäre aber ein eigenes Thema, damit sowas wichtiges nicht unter geht ;D
Wenn ich eine lauffähige Version hab', die ich würdig erachte, mach ich zum Kalender einen neuen Thread auf (für Testing/Feedback) ;)
Zitat von: h3llsp4wn am 28 Januar 2016, 11:25:29
Wenn ich eine lauffähige Version hab', die ich würdig erachte, mach ich zum Kalender einen neuen Thread auf (für Testing/Feedback) ;)
Die HTML nicht vergessen beim Programmieren. ;) Will gerade an meinem nicht weiter machen, weil ich glaube mit deinem Code nochmal komplett umzubauen
Zitat von: h3llsp4wn am 27 Januar 2016, 16:39:49
Ich räume noch ein bisschen auf und hänge die Tage ein Zip hier rein.
Ruf ich das doch nochmal ins Gedächtnis!
8)
Kuckst du.: http://forum.fhem.de/index.php/topic,48562.0.html (http://forum.fhem.de/index.php/topic,48562.0.html)
Duck: sorry. Is ja nur das widget
Grüße
Michael
Zitat von: StG (DD) am 24 Mai 2015, 22:07:32
So, hier nun meine User-Demo, noch im Anfangsstadium und Ausbaufähig.
Grüße, kannst Du mir mal bitte den Code Teil für den Batteriestatus zeigen? Ich bastel hier schon einige Zeit und bin am verzweifeln. Danke Dir
Zitat von: StG (DD) am 24 Mai 2015, 22:07:32
So, hier nun meine User-Demo, noch im Anfangsstadium und Ausbaufähig.
Grüße, kannst Du mir mal bitte den Code Teil für den Batteriestatus zeigen? Ich bastel hier schon einige Zeit und bin am verzweifeln. Danke Dir
Hallo zusammen,
anbei meine Demo. Heizung und Licht baue ich gerade um - da wird es dann spannend. Hat eigentlich jemand schon eine Steuerung für die km200 von Buderus über das TabletUI
realisiert?
@RettungsTim - ich denke Du bist jetzt schon fertig mit Deiner eigenen Lösung - sorry.
Ansonsten gibt es glaube ich wesentlich spektakulärere Lösungen ;)
Auf der ToDo-Liste stehen noch:
- Kodi
- Heizungssteuerung (s.o.)
- Stauvorhersage für den Weg zur Arbeit und die Entscheidung, ob fahren überhaupt lohnt ... 8)
- WeekDayTimer Steuerung
Die Lösung nutzt das hier scheinbar nicht so gemochte pagetab. Das funktionierte bei mir aber nach Umbau des Webservers schon sehr gut.
Bin gerade auf den Raspberry 2 umgestiegen und jetzt fliegt es sogar ;D
Bilder und Sourcen sind im Anhang.
... und bevor jemand meckert - auch ich habe natürlich hier und da Anregungen mitgenommen - also danke an alle, die
Ihre Tipps, Tricks und Lösungen präsentieren und teilen!
Cheers,
h3ll
Zitat von: Icinger am 25 November 2015, 20:50:36
Hi,
bin auch grad dabei, meine TabletUI zusammenzubasteln.
Habe mir dabei ein wenig von Harry66's Layout abgesehen, scheitere jetzt aber an einem Problem mit dem Rotor-Widget:
Wenn ich nur EIN Weather-Icon (zB fc0_weatherDay) anzeigen lasse, ist das mit dem Text zusammen schön mittig zentriert.
Binde ich das aber in ein Rotor-Widget ein, um morgens, tagsüber, abends und nacht anzeigen zu lassen, ist das Icon und der Text nach unten verschoben.
Ich komm leider nicht drauf, warum. Hat jemand ne Idee dazu?
Hier erstmal der Code des ganzen Gridster-Objekts (Rotor aktiv, einzelnes weatherDay auskommentiert)
<li data-row="1" data-col="2" data-sizex="6" data-sizey="4" class="semitransparent">
<header> Wetter in Göllersdorf </header>
<table border="0px" width="100%">
<tr>
<td class="A2"><div data-type="label"
data-device="ProPlanta"
data-get="fc0_date"></div></td>
<td class="B2"><center><div data-type="label" class="inline small"><big>↑</big><small> Sonne:</small><br></div>
<div data-type="label"
data-device="myTwilight"
data-get="sr_civil"></div></center></td>
<td class="C2"><center><div data-type="label" class="inline small"><big>↓</big><small> Sonne:</small><br></div>
<div data-type="label"
data-device="myTwilight"
data-get="ss_civil"></div></center></td>
<td class="D2"><center><div data-type="label" class="inline small"><small>Sichtweite:</small><br></div>
<div data-type="label"
data-device="ProPlanta"
data-get="visibility"
data-unit=" km"></center></td>
</tr>
<tr>
<td class="tg-031e"><div data-type="label"><small>Temp<br></small></div>
<center><div data-type="label"
data-device="Temp_Aussen"
data-get="temperature"
data-limits="[-50,0,10,25,30,40]"
data-colors='["#9999ff","#ffbdff","#aa6900","#ff6900","#ff3333","#ff0000"]'
data-unit="%B0C%0A"
class="inline cell big"></div></center></td>
<td class="tg-031e" colspan="2" rowspan="2">
<!-- <div data-type="weather"
data-device="ProPlanta"
data-get="fc0_weatherDay"
data-imageset="kleinklima"
style="font-size:250%">
</div>
Tagsüber: 
<div data-type="label"
data-device="ProPlanta"
data-get="fc0_weatherDay"
class="inline">
</div>
-->
<div data-type="rotor" class="fade semitransparent">
<ul>
<li>
<div data-type="weather"
data-device="ProPlanta"
data-get="fc0_weatherMorning"
data-imageset="kleinklima"
style="font-size:250%">
</div>
Morgens: 
<div data-type="label"
data-device="ProPlanta"
data-get="fc0_weatherMorning"
class="inline">
</div>
</li>
<li>
<div data-type="weather"
data-device="ProPlanta"
data-get="fc0_weatherDay"
data-imageset="kleinklima"
style="font-size:250%">
</div>
Tagsüber: 
<div data-type="label"
data-device="ProPlanta"
data-get="fc0_weatherDay"
class="inline">
</div>
</li></ul>
</div>
</td>
<td><center>
<div data-type="wind_direction"
data-device="Anemometer"
data-direction="wind_dir"
data-speed="wind_speed"
data-calm="-"
data-size="80"
data-tickstep="10"
data-angleoffset="0">
</div>
</center></td>
</tr>
<tr>
<td class="tg-031e"><div data-type="label"><small>Feuchte<br></small></div>
<center><div data-type="label"
data-device="Temp_Aussen"
data-get="humidity"
data-limits="[0,40,60]"
data-colors='["#9999ff","#aa6900","#ff6900"]'
data-unit=" %"
class="inline cell big">
</div></center></td>
<td class="tg-031e">
<center><div data-type="label"><small>Wind</small><br></div>
<div data-type="label"
data-device="Anemometer"
data-get="kmh"
data-limits="[0, 19, 28, 38, 49, 74, 102, 117]"
data-colors='["#ffffff","#dddddd","#aa6900","#aa6900","#ff9999","#ff6666","#ff3333","#ff0000"]'
style="display:inline"
class="inline">
</div>
</center>
</td>
</tr>
<tr>
<td class="A5"><center><div data-type="label" class="inline"><small>UV-Index</small></div><br>
<div data-type="label"
data-device="ProPlanta"
data-get="fc0_uv"
data-limits="[0,2,10]"
data-colors='["grey","orange","red"]'
style="display:inline">
</div>
</center>
</td>
<td class="B5"><center><div data-type="label" class="inline"><small>Regenrisiko</small></div><br>
<div data-type="label"
data-device="ProPlanta"
data-get="fc0_chOfRainDay"
data-unit=" %"
data-limits="[0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100]"
data-colors='["#32AD4F","#3AAB2C","green","green","green","#F6AA1D","green","green","green","green","#F6451D"]'
style="display:inline">
</div></center></td>
<td class="C5"><center><div data-type="label" class="inline"><small>Taupunkt</small></div><br>
<div data-type="label"
data-device="Temp_Aussen"
data-get="dewpoint"
data-unit="%B0C%0A"></div>
</center></td>
<td class="D5"><center><div data-type="label" class="inline"><small>Luftdruck</small></div><br>
<div data-type="label"
data-device="Temp_Badezimmer"
data-get="pressure"
data-unit=" hPa"
data-limits="[0,950,1000]"
data-colors='["#ff9999","#aa6900","#9999ff"]'></div>
<div data-type="klimatrend" data-device="Temp_Badezimmer" data-get="statPressureTendency"></div>
</center>
</td>
</tr>
</table>
</li>
Bin für jeden Tip dankbar,
schönen Abend noch,
Stefan
Hallo Stefan,
wahrscheinlich hast du es inzwischen gelöst. Falls nicht, dann musst du folgendes ändern:
vorher
<td class="tg-031e" colspan="2" rowspan="2">nachher
<td class="tg-031e" colspan="2" rowspan="2" valign="top">VG
Marc
Zitat von: h3llsp4wn am 23 Februar 2016, 20:33:56
@RettungsTim - ich denke Du bist jetzt schon fertig mit Deiner eigenen Lösung - sorry.
Kann man jemals fertig werden?? Für mich ist das ein Hobby, dem ich nachgehe wenn meine Kinder es zulassen. Einen Beruf und eine Berufung habe ich auch noch ;D Somit bin ich gaaaaanz Langsam...
Vielen dank für deine Beispiele werde Sie mir anschauen und Teile davon bei mir übernehmen!!
*edit*
Was ist das eigenlich als Hintergrund? Heidelberg?
Nee ... fertig wird man wohl nie - wäre dann auch irgendwie schade. Es gibt ja noch so viele Ideen ... da bastelt man so vor sich hin und stellt fest, dass schon wieder ein Monat rum ist. Zu wenig Zeit hat man ja immer.
Im Hintergrund ist der Vesuv ... aber ich baue jetzt nicht noch Erdbebensensoren ein ;D
Zitat von: h3llsp4wn am 23 Februar 2016, 20:33:56
Hallo zusammen,
anbei meine Demo. Heizung und Licht baue ich gerade um - da wird es dann spannend. Hat eigentlich jemand schon eine Steuerung für die km200 von Buderus über das TabletUI
realisiert?
sieht echt super aus. Blöde Frage, wo werden die Farben eingestellt? Und wie hast Du das mit den Rändern um die Buttons gemacht?
Das mit dem Kalender, das finde ich richtig gut. Ich würde so gern den iCloud Kalender, den ich als Familienkalender habe so anzeigen lassen.... Bloss hab ich da mal wieder nicht den richtigen Ansatz. Als erstes muß ich denke ich mal den Kalender Freigeben, dann den Link im Calendar Modul verfügbar machen. Und dann? Wie bekommt man das dann so schön hin?
Gruß
Jens
Hi,
einen Großteil der Umgebungsfarben kannst Du in der fhem-tablet-ui.css setzen. Ich würde da dann aber ein eigenes .css draus machen und dies dazu laden oder
nur die laden. Sonst musst Du bei Updates immer die Änderungen/Anpassunge zusammenführen. Ich hatte auch überlegt Pseudoklassen für die Farbgebung in
meinen Templates einzusetzen, so dass ich dies dann nur noch im CSS an einer Stelle ändern muss. Dies habe ich aber noch nicht umgesetzt - sind halt viele Baustellen
und ggf. macht es aktuell keinen so großen Sinn mehr - ggf. wenn ich noch mal an die Farben ran gehe. Ich fürchte ich werde noch benutzerabhängige Styles einbauen müssen ...
Für die Ränder um die Buttons, habe ich das background-icon gesetzt. Ich denke wenn Du mit den Farben spielst, wird schnell klar wie es funktioniert.
<div data-type="pagetab"
data-url="PT_index_licht.html"
data-on-color="#E6FF57"
data-off-color="#808080"
data-on-background-color="#E6FF57"
data-off-background-color="#A6BF17"
data-icon="fa-lightbulb-o"
data-background-icon="fa-circle-thin"
class="cell small top-space" >
</div>
Den iCloud Kalender solltest Du in FHEM bekommen (http://forum.fhem.de/index.php/topic,14694.15.html (http://forum.fhem.de/index.php/topic,14694.15.html)). Dann müsstest Du mit "meiner" Lösung die Anzeige Deines FHEM Kalenders
in FTUI hinbekommen. Beispiel habe ich mit hochgeladen.
Cheers,
h3ll
Ich muss sagen TabletUI fasziniert mich echt.
Wollte eigentlich für iOS eine private App für mein Setup erstellen, aber TabletUI ist so flexibel vom Design mit CSS, dass ich mir das glaub erspare.
Evtl. eine kleine Wrapper-App mit eigenem Icon, Fullscreen-Ansicht und Landscape-Only auf dem iPad, Portrait-Only auf dem iPhone, aber das wars dann auch.
Mein Smart-Home ist noch im entstehen, da wir erst Ende des Jahres ins neue Zuhause ziehen, daher sind erstmal ein testweise ein paar Geräte in der Wohnung verteilt.
Aber es ist faszinierend wie schnell man eine kleine UI mit TabletUI zusammenklicken kann. :)
An Feinheiten kann an sich dann später sicher immer noch aufhängen.
Ist noch nichts Tolles was ich bisher vorzuweisen habe, daher auch noch keine HTML/CSS Dateien im Anhang.
Will im Lauf der Zeit aber Fortschritte und dann auch sicher Quelldateien vorzeigen. ;)
Nachdem ich ja jetzt nichts groß programmieren muss, werde ich mich wohl hauptsächlich aufs designen eigener Icons konzentrieren,
da mir Font-Awesome nicht schlank genug ist.
Dank der Anleitung im Wiki hat auch das Erstellen einer eigenen Schriftart mit meinen Icons problemlos funktioniert. :)
Wenn die Sammlung etwas größer ist, kann ich den Font auch gern in einem eigenen Thread zur Verfügung stellen...
(https://www.dropbox.com/s/m5k9dvcwmzis408/TabletUI3.PNG?dl=1)
Hallo Thyraz, Vielen Dank ...
Dein Icon Font finde ich auch sehr ansprechend. Mit dem Slim-Design ist eine sehr gute Idee.
Kommst du aus der Branche?
Wenn dein Font soweit ist, können wir ihn auch gerne mit ins Projekt einhängen, damit die Einbindung ins eigene UI einfacher wird. Mit einer Auswahlseite mit den Namen (z.B. auf der FTUI Demo Seite), könnte man sich dann alle vorher ansehen.
Eine schöne Woche ...
Bin ursprünglich mehr aus der Softwareentwicklung in der Industrieautomatisierung.
Aber habe ein Nebengewerbe mit iOS Entwicklung und UI Design.
Gerade gemerkt, dass die Icons noch nicht ganz Perfekt vom Pixelraster sind.
Ein paar Linien sind dadurch teilweise unterbrochen oder nicht sichtbar.
Hab im CSS jetzt gesehen, dass die Font-Size 26px ist. Mal sehen ob ich das noch etwas optimieren kann, wenn ich das Raster im Vektor-Template entsprechend so lege.
Möchte auch mal meine ersten Gehversuche mit dem FTUI zeigen und natürlich gleichzeitig einen riesen Dank an Setstate (aber auch den Rest der Community) loswerden.
Nach unzähligen Versuchen und Spielereien mit Formen, Farben und was weiß ich nicht, habe ich mich nun glaub ich auf ein "Design" eingeschossen. Ich habe mir natürlich viele der Demos hier im Forum angeschaut und neigte beim Experimentieren immer wieder dazu, möglichst viele Widgets auf den Seiten unterzubringen. Ich war auch schon kurz davor zu sagen: "Das ist es!" Habe dann aber doch alles wieder über den Haufen geworfen. Denn ich glaube ein Problem eint uns alle: Frau muss das Ding auch toll finden! ;D
Daher habe ich nun folgenden Plan. Zwei UI's für jeweils 7" Tablets (Galaxy Tabs) in Wohnzimmer und Flur, relativ simpel und nur mit den wichtigsten Funktionen und Ausgaben versehen. Dazu ein UI für mein 10" Tablet, welches dann etwas umfangreicher ist. Das UI für das Smartphone soll ebenfalls relativ simpel aufgebaut, aber über entsprechende Menü's mehr Funktionen bieten, als die einfachen 7" UI's.
So sieht aktuell der "Homescreen" für die 7-Zoller aus (siehe Anhang), natürlich in Szene gesetzt. Bei den Temps sind mehrere Räume via Swiper hinterlegt. Das jeweilige Statusicon lässt sich anklicken, dahinter verbergen sich Popups mit der Statusauswahl. Dazu noch ein Switch um zwischen meinem Auto- und Eco-Modus schnell zu wechseln. Ganz unten findet sich dann noch ein kleines Menü, wohinter sich noch weitere Räume befinden. Die sind aber noch nicht ganz fertig (gibt es dann bald per Edit nachgeliefert).
Ist sicherlich jetzt nix "dolles", aber aller Anfang ist schwer und bis vor ein paar Tagen habe ich mich mit html noch überhaupt nicht beschäftigt. Raubt mir teilweise echt den letzten Nerv, wenn mal wieder was nicht klappt. 8)
Gruß
Dennis
Wow sieht super aus! Poste bei Gelegenheit mal mehr Bilder!
Das hast du doch nicht wirklich mit FHEM-Tablet-UI gebaut? Und noch nicht mit HTML beschäftigt? Bist du ein Design und Layout Genie?
Mal ehrlich, wo findet man das Bild im Original bei Google? ;)
HTML Code her, sonst glaubt dir das keiner!
Ich bin baff! :o :P
Uff, da bin ich jetzt auch baff.
Kaum schaut man ein paar Tage nicht in's Forum, haun da 2 Leute solche Design-Sahneschnitten raus...
Ich kann's kaum erwarten die Icon-Font von Thyraz und den HTML-Code von rhrawr zu sehen.
Zitat von: rhrawr am 03 März 2016, 00:42:38
Möchte auch mal meine ersten Gehversuche mit dem FTUI zeigen und natürlich gleichzeitig einen riesen Dank an Setstate (aber auch den Rest der Community) loswerden.
Nach unzähligen Versuchen und Spielereien mit Formen, Farben und was weiß ich nicht, habe ich mich nun glaub ich auf ein "Design" eingeschossen. Ich habe mir natürlich viele der Demos hier im Forum angeschaut und neigte beim Experimentieren immer wieder dazu, möglichst viele Widgets auf den Seiten unterzubringen. Ich war auch schon kurz davor zu sagen: "Das ist es!" Habe dann aber doch alles wieder über den Haufen geworfen. Denn ich glaube ein Problem eint uns alle: Frau muss das Ding auch toll finden! ;D
Daher habe ich nun folgenden Plan. Zwei UI's für jeweils 7" Tablets (Galaxy Tabs) in Wohnzimmer und Flur, relativ simpel und nur mit den wichtigsten Funktionen und Ausgaben versehen. Dazu ein UI für mein 10" Tablet, welches dann etwas umfangreicher ist. Das UI für das Smartphone soll ebenfalls relativ simpel aufgebaut, aber über entsprechende Menü's mehr Funktionen bieten, als die einfachen 7" UI's.
So sieht aktuell der "Homescreen" für die 7-Zoller aus (siehe Anhang), natürlich in Szene gesetzt. Bei den Temps sind mehrere Räume via Swiper hinterlegt. Das jeweilige Statusicon lässt sich anklicken, dahinter verbergen sich Popups mit der Statusauswahl. Dazu noch ein Switch um zwischen meinem Auto- und Eco-Modus schnell zu wechseln. Ganz unten findet sich dann noch ein kleines Menü, wohinter sich noch weitere Räume befinden. Die sind aber noch nicht ganz fertig (gibt es dann bald per Edit nachgeliefert).
Ist sicherlich jetzt nix "dolles", aber aller Anfang ist schwer und bis vor ein paar Tagen habe ich mich mit html noch überhaupt nicht beschäftigt. Raubt mir teilweise echt den letzten nerv, wenn man wieder was nicht klappt. 8)
Gruß
Dennis
da würde mich die Farbe interessieren. Welches grün ist das ?
Code Schnipsel könnte ich auch gebrauchen.
Gesendet von meinem iPhone mit Tapatalk
Sieht sehr cool aus rhawr :)
Hast du dann komplett auf Gridster verzichtet?
An sich eine gute Idee, versuche mich glaub auch mal noch an einem etwas freieren Layout.
Erst einmal freut mich, dass es euch gefällt und danke für die netten Worte. Den Code hau ich die Tage mal raus, wenn ich mit dem kompletten UI fertig bin. Dann gibt es auch noch mehr Bilder dazu. Erwartet aber nicht zu viel. Es ist mehr Schein als Sein. Bin wie gesagt, html-Neuling und wenn ihr den Code seht, packt ihr euch wahrscheinlich an den Kopf. Mein Glück ist nur, dass ich ein ganz gutes Auge für Farben und eine halbwegs kreative Ader habe.
@coolice
Das Bild im Anhang sollte deine Frage nach dem Grün beantworten.
@Thyraz
Ich habe nicht auf Gridster verzichtet, dafür reichen meine html-Kenntnisse bei weitem nicht aus. Aber danke, dass du mir das zugetraut hast. ;D
Gruß
Dennis
rhrawr, sehr cool und steigert der WAF enorm ;)
Zitat von: h3llsp4wn am 23 Februar 2016, 20:33:56
Hallo zusammen,
anbei meine Demo. Heizung und Licht baue ich gerade um - da wird es dann spannend. Hat eigentlich jemand schon eine Steuerung für die km200 von Buderus über das TabletUI
realisiert?
@RettungsTim - ich denke Du bist jetzt schon fertig mit Deiner eigenen Lösung - sorry.
Ich versuche mich gerade deine Version Teilweise bei mir umzusetzen. Leider bekomme ich das mit dem Yahoowetter nicht hin.
Oben gehts es. Aber auf der Wetterseite geht nichts. Hattest du das schon mal und kann mir helfen?
*edit*
habe den fehler gefunden. Irgenwie hat er obwohl ich die datein geändert habe immer den selben fehler drin. Irgendie im cache auch nach Leerung...
Hallo zusammen
ich habe die Probleme mit Chat Widget - versuche mal die Werte von Homematic Thermostat und FS20 Messsteckdose zu zeigen. leider kriege ich kein Ergebnis im IE oder Chrome.... so sieht das Code aus:
<header>CHART</header>
<div class="normal"
data-type="chart"
data-device="CUL_EM_6"
data-logdevice='["FileLog_CUL_EM_6","FileLog_CUL_EM_6","FileLog_CUL_EM_6"]'
data-columnspec='["8:5MIN:","10:TOP:","6:CUM:"]'
data-style='["ftui l0fill","ftui l0dot","ftui l2dash"]'
data-ptype='["lines","lines","lines"]'
data-uaxis='["primary","primary","secondary"]'
data-legend='["Measured", "Desired", "Valve"]'
data-yunit="°C"
data-ytext="Temperature"
data-minvalue="auto"
data-maxvalue="auto"
data-yunit_sec="%"
data-ytext_sec="Percentage"
data-yticks="auto"
data-minvalue_sec="0"
data-maxvalue_sec="100"
data-daysago_start="0"
data-daysago_end="-1"
data-crosshair="true"
data-cursorgroup="1"
data-scrollgroup="1"
data-showlegend="true"
data-xticks="auto">
</div>
FS20: und hier der Inhalt der Datei CUL_EM_5-2016.log:
2016-01-24_23:10:47 CUL_EM_6 CNT: 119 CUM: 2.475 5MIN: 0.070 TOP: 0.100
2016-01-24_23:15:45 CUL_EM_6 CNT: 120 CUM: 2.482 5MIN: 0.080 TOP: 0.100
2016-01-24_23:20:45 CUL_EM_6 CNT: 121 CUM: 2.489 5MIN: 0.080 TOP: 0.090
Super Design-Vorschläge hier - einfach klasse!! Ich bin auch ein totaler Fan von Tablet UI geworden..
@rhrawr: Schaut super aus - gerade die Fußzeile mit den Icons würde mich interessieren - bei mir ist das (standardmäßig) links. Deine Anordnung gefällt mir viel besser..
Meine aktuelle Optik, siehe Anhang.
@rhrawr: Bitte melden, wenn ich das aus copyright-Gründen löschen soll ;)
viele Grüße
stoxx
Blöde Frage: wieso ist das bei beiden Fotos das gleiche Tablet/Phone, der gleiche Tisch und der gleiche Winkel? Gibt es dafür ein App, die diesen Rahmen erzeugt? So wie bei den Fakes, wo man persönlich auf Plakatwänden erscheint?
Das ist Photoshop...
Ich muss mal kurz ein fettes Danke an die Entwickler und die Design-Vorschläge geben. Tablet-Ui macht richtig Bock :) ... und in Verbindung mit webViewControl ein kompletter App-Ersatz.
ich bin jetzt nur noch am Suchen, wie ich auf einen externen Tastendruck (zB Klingel) eine bestimmte Seite angezeigt bekomme (zB den Video-Feed einer Überwachungskamera). Die newUrl-Option von webViewControl scheint nicht weiterentwickelt worden zu sein und fehlt wieder.
Hallo,
@oggy: soetwas habe ich bei uns mit einem Popup gelöst. Dieses Fenster wird durch das Setzen eines dummy-Devices (VisitorAtFrontDoor) geöffnet.
Dazu habe ich eine Hilfsroutine in meine 99_myUtils.pm eingefügt:
sub UpdateUpCam1()
{
fhem("get UpCam1 image"); # IPCAM
fhem("set InfoPanel screen on"); # AMAD
fhem("set VisitorAtFrontDoor 1");
fhem("defmod CloseVisitorAtFrontDoorPopupAt at +00:01:00 set VisitorAtFrontDoor 0");
Log3 "UpdateUpCam1", 1, "Taking snapshots.";
return;
}
Ein at setzt den dummy wieder zurück. Das Fenster schßießt sich dadurch nach 1 min oder nach click / touch. Die PERL-Routine löst ebenfalls das Erstellen des Fotos (über IPCAM) aus.
Das Popup habe ich zusammen mit anderen (Telefonanruf, Alarm, ..) in ein eigenes Template ausgelagert. Es kann damit auf jeder Seite erscheinen.
<!-- CAMERA-POPUP -->
<div class="top-space">
<div data-type="popup" data-device="VisitorAtFrontDoor" data-get-on="[1]\d*" data-get-off="[0]\d*" data-height="600px" data-width="1000px">
<div></div>
<div class="dialog">
<header>Besucher an der Haustür</header>
<div data-type="image"
data-size="95%"
data-url="./snapshots/UpCam1/UpCam1_snapshot.jpg"
class="nocache"
data-refresh="1"
onclick="$('.dialog-close').trigger('click');">
</div>
</div>
</div>
</div>
Nun noch der Button zum direkten Aufruf der Routine. Das soll natürlich auch die Klingelanlage triggern.
<!-- IPCAM -->
<li data-row="2" data-col="3" data-sizex="1" data-sizey="1">
<header>CAMERA</header>
<div data-type="push"
data-icon="oa-it_camera"
onclick="setFhemStatus('{UpdateUpCam1()}')"
class="cell">
</div>
</li>
Anbei noch ein Ausschnitt meiner unfertigen UI.
Gruß,
Mario
coole Sache. Ich wollte ja mal vor langer Zeit eine abgespeckt Version fürs iPhone erstellen, womit man schnell ein paar Lampen einschalten kann und die Heimkinoanlage. Jetzt wo ich die Bilder sehe (zwar SAM ...UNG) sollte ich mal wieder aufs Pferd aufspringen :D
Zitat von: stoxx am 03 März 2016, 18:33:38
Super Design-Vorschläge hier - einfach klasse!! Ich bin auch ein totaler Fan von Tablet UI geworden..
@rhrawr: Schaut super aus - gerade die Fußzeile mit den Icons würde mich interessieren - bei mir ist das (standardmäßig) links. Deine Anordnung gefällt mir viel besser..
Meine aktuelle Optik, siehe Anhang.
@rhrawr: Bitte melden, wenn ich das aus copyright-Gründen löschen soll ;)
viele Grüße
stoxx
Alles gut und danke für die Blumen. Dein Screen gefällt mir aber auch. Trotz der vielen Infos wirkt es sehr aufgeräumt. Weiter so.
Habe bis gerade an der UI für mein Smartphone gebastelt. Das Design soll sich natürlich größtenteils wiederfinden, dennoch habe ich ein paar Kleinigkeiten angepasst. Zur besseren Verständlichkeit, was welche Funktionen aufweißt, habe ich Erklärungen im zweiten Bild hinzugefügt. Auch das ist erstmal der Rohentwurf. Wird sich bestimmt noch ein wenig ändern und die weiteren Pages müssen noch fertiggestellt werden, befinden sich noch im absoluten Rohbau.
Gruß
Dennis
@Mario67
dank dir ... Problem bei einem Popup, es fließen schon Daten. Ich habe deswegen auf dem Screen, der ständig angezeigt wird, auch nur ein Bild der Kamera, das alle 10s aktualisiert wird. Im Popup hatte ich ein MJPEG-Stream der Kamera gepackt. Beim Testen hatte ich mich gewundert, dass 1GB meines Datenvolumens in sehr kurzer Zweit verschwunden waren (war per VPN zu Hause eingeloggt). Ich habe dann mal den Netzwerkmonitor des Laptops angeschmissen und gesehen, dass da Daten fließen. Ich habe dann die Kamera auf eine eigene "Pagesite" verbannt und stehe jetzt auf dem Schlauch, wie ich dort automatisch hinkomme. Ich habe es auch schon mit Shortcuts auf dem Homescreen probiert, aber "Tasker" (mit "AutoShortcut") will die Shortcuts nicht ansteuern. Mit Tasker kann ich zwar URLs ansteuern, aber die werden dann im Browser mit Suchleiste aufgerufen. Bei den Shortcuts auf dem Homescreen werden die Seiten, wie bei "webViewControl" angezeigt.
zum Thema: Ich bin noch in der Findungsphase und meine Wohnzimmer-Pageseite sieht momentan so aus.
Hast du schon mal das Pagebutton-Widget zum Wechseln zu einer anderen Seite probiert?
<div data-type="pagebutton" data-url="cam.html" data-icon="fa-video-camera"></div>
@rhrawr: erfolgt der Aufruf in einem Browser?
@all: weiß jemd. ob man eine Website auf dem iPHONE auf im Vollbildmodus starte kann? Ich meine nicht! Gibt es Umgehungszenrion?
Einfach im Browser auf senden an klicken und dann zu home Bildschirm
Hallo @rhrawer und @stoxx,
freue mich schon mehr Demoseiten von eurer UI. Sehen beide super aus. Wollte auch mein Design überarbeiten, jetzt warte ich erstmal auf eueren Code ;)
Danke an alle die hier so fleißig ihre Seiten posten und weiterentwickeln.
Zitat von: setstate am 04 März 2016, 07:19:59
<div data-type="pagebutton" data-url="cam.html" data-icon="fa-video-camera"></div>
das manuelle Wechseln ist nicht das Problem. Hmmm, vielleicht lass ich nur ein Popup erscheinen, das nur ein 10s-Snapshot anzeigt und per Button wechsel ich dann aufs Livebild.
Danke an euch :)
Zitat von: bjoernbo am 04 März 2016, 07:57:42
@rhrawr: erfolgt der Aufruf in einem Browser?
@all: weiß jemd. ob man eine Website auf dem iPHONE auf im Vollbildmodus starte kann? Ich meine nicht! Gibt es Umgehungszenrion?
Was setstate (net böse sein, hast recht aber wenn ichs net wüsste hätte mir dein post nix gesagt ;) )meinte ist:
Die gewünschte Seite im Safari Browser öffnen.
Dann in der unteren Menuzeile das senden an Symbol (Viereck mit Pfeil nach oben) drücken.
In den erscheinenden Menus die untere Zeile solange bewegen bis "Zum Home-Bildschirm" auftaucht.
damit die Seite auf dem iPhone Bildschirm speichern, Name der Seite eingeben.
Safari beenden, die Seite öffnen und tataaaa Fullscreen ohne Menu.
Danke für die Übersetzung. Genau das meinte ich ;D
Aber mit einer Hand, in der Kälte und die andere schiebt den Kinderwagen, war leider nicht mehr drin. Sorry, ich hätte es nochmal überarbeiten sollen :)
Zitat
freue mich schon mehr Demoseiten von eurer UI. Sehen beide super aus. Wollte auch mein Design überarbeiten, jetzt warte ich erstmal auf eueren Code ;)
Mei, klar mache ich das.. Das Ganze besteht halt wirklich fast nur aus Standard- Switch und Pagebutton- Widgets, also nichts Besonderes..
Ich poste hier mal die Hauptseite plus Menü, wenn ihr noch spezielle Bereiche wollt, müsst ihr es schreiben.
vg stoxx
Zitat von: rhrawr am 03 März 2016, 00:42:38
Möchte auch mal meine ersten Gehversuche mit dem FTUI zeigen und natürlich gleichzeitig einen riesen Dank an Setstate (aber auch den Rest der Community) loswerden.
Nach unzähligen Versuchen und Spielereien mit Formen, Farben und was weiß ich nicht, habe ich mich nun glaub ich auf ein "Design" eingeschossen. Ich habe mir natürlich viele der Demos hier im Forum angeschaut und neigte beim Experimentieren immer wieder dazu, möglichst viele Widgets auf den Seiten unterzubringen. Ich war auch schon kurz davor zu sagen: "Das ist es!" Habe dann aber doch alles wieder über den Haufen geworfen. Denn ich glaube ein Problem eint uns alle: Frau muss das Ding auch toll finden! ;D
Daher habe ich nun folgenden Plan. Zwei UI's für jeweils 7" Tablets (Galaxy Tabs) in Wohnzimmer und Flur, relativ simpel und nur mit den wichtigsten Funktionen und Ausgaben versehen. Dazu ein UI für mein 10" Tablet, welches dann etwas umfangreicher ist. Das UI für das Smartphone soll ebenfalls relativ simpel aufgebaut, aber über entsprechende Menü's mehr Funktionen bieten, als die einfachen 7" UI's.
So sieht aktuell der "Homescreen" für die 7-Zoller aus (siehe Anhang), natürlich in Szene gesetzt. Bei den Temps sind mehrere Räume via Swiper hinterlegt. Das jeweilige Statusicon lässt sich anklicken, dahinter verbergen sich Popups mit der Statusauswahl. Dazu noch ein Switch um zwischen meinem Auto- und Eco-Modus schnell zu wechseln. Ganz unten findet sich dann noch ein kleines Menü, wohinter sich noch weitere Räume befinden. Die sind aber noch nicht ganz fertig (gibt es dann bald per Edit nachgeliefert).
Ist sicherlich jetzt nix "dolles", aber aller Anfang ist schwer und bis vor ein paar Tagen habe ich mich mit html noch überhaupt nicht beschäftigt. Raubt mir teilweise echt den letzten Nerv, wenn mal wieder was nicht klappt. 8)
Gruß
Dennis
Dein Design erinnert mich doch stark an HEIMA:
https://www.behance.net/gallery/9080423/HEIMA-Smart-Home-Automation-UI (https://www.behance.net/gallery/9080423/HEIMA-Smart-Home-Automation-UI)
Das in voll funktionsfähig würde mich auch interessieren. Besonders mit den Android-like Benachrichtigungen.
schöne Grüße
Jo
Echt starkes Design. Das von heima hatte ich schon vor längerem gesehen. Jetzt weiss ich auch sieder wo.
kann man pagetab eigentlich horizontal ausrichten?
Du meinst die Buttons horizontal platzieren? Feel free! Müsste gehen.
danke zap.
Nachdem ich die Bretter vor meinem Kopf entfernt habe weiss ich sogar vieleicht wie 8)
Hallo zusammen,
ich bin ein riesen Fan des Highchart widgets. Sieht einfach besser aus und hat mehr Funktionen. Allerdings fehlt mir einen Funktion, um alle Chart widgets durch Highchart ersetzen zu können und zwar ist das Funktion über Pfeiltasten in die Vergangenheit sehen zu können. Bzw allgemein die x-Achse anpassen zu können. Hat hierzu bereits jemand eine Lösung gefunden?
Grüße
Carsten
@ stoxx
Servus habe mir gerade deine sub1 angesehen.
Auf dem Foto sieht man bei Küchenlicht ein Icon (Glühbirne) in der Index ist aber kein Icon beschrieben.
Ist da beim Kopieren was verloren gegangen oder verstehe ich etwas nicht
Danke und Gruß
PS - sieht toll aus
Helmut
Hallo Helmi55,
beim Switch-Widget ist der Default das Glühbirnen-Symbol, daher habe ich mir hier das "data-icon" gespart..
vg stoxx
Hallo zusammen, bastel mir gerade mein Ui zurecht. Kann mir jemand sagen wie ich das Label unter das Symbol vom Homestatus und der Beleuchtung bekomme? Vielleicht ach nicht in Fett Schrift?
<li data-row="1" data-col="5" data-sizex="3" data-sizey="1">
<header>Homestatus</header>
<div class="cell center">
<div data-type="symbol" data-device="rr_Andrea"
data-icon="fa-home"
data-get-on='["home","absent"]'
data-on-colors='["green","orange"]'>
</div>
<div data-type="label" class="">Andrea</div>
<div class="cell center">
<div data-type="symbol" data-device="rr_Mirco"
data-icon="fa-home"
data-get-on='["home","absent"]'
data-on-colors='["green","orange"]'>
</div>
<div data-type="label" class="">Mirco</div>
<div class="cell center">
<div data-type="symbol" data-device="rr_Marvin"
data-icon="fa-home"
data-get-on='["home","absent"]'
data-on-colors='["green","orange"]'>
</div>
<div data-type="label" class="">Marvin</div>
</li>
da fehlen ein paar abschließende DIVs :) ... Du hast vergessen die DIVs <div class="cell center"> abzuschließen
Ah danke. Dann packt er mir die Symbole aber wieder untereinander.
Probier es mal mit
class="inline"
Zitat von: gloob am 07 März 2016, 15:07:46
Probier es mal mit
class="inline"
Leider auch nicht. Hatte ich schon probiert. Danke trotzdem.
so wie unten hattest du das ausprobiert? falls Symbol und Name nicht untereinander stehen, kann man noch mit einem
<div class="row"></div> einen Zeilenumbruch erzwingen
Zitat
<li data-row="1" data-col="5" data-sizex="3" data-sizey="1">
<header>Homestatus</header>
<div class="inline">
<div data-type="symbol" data-device="rr_Andrea"
data-icon="fa-home"
data-get-on='["home","absent"]'
data-on-colors='["green","orange"]'>
</div>
<div data-type="label" class="">Andrea</div>
</div>
<div class="inline">
<div data-type="symbol" data-device="rr_Mirco"
data-icon="fa-home"
data-get-on='["home","absent"]'
data-on-colors='["green","orange"]'>
</div>
<div data-type="label" class="">Mirco</div>
</div>
<div class="inline">
<div data-type="symbol" data-device="rr_Marvin"
data-icon="fa-home"
data-get-on='["home","absent"]'
data-on-colors='["green","orange"]'>
</div>
<div data-type="label" class="">Marvin</div>
</div>
</li>
damit es on-Topic bleibt: so schaut es momentan bei mir aus
Zitat von: oggy am 08 März 2016, 06:43:08
so wie unten hattest du das ausprobiert? falls Symbol und Name nicht untereinander stehen, kann man noch mit einem <div class="row"></div> einen Zeilenumbruch erzwingen
damit es on-Topic bleibt: so schaut es momentan bei mir aus
Hmm keine Ahnung warum, aber nachdem ich die Zeilen gelöscht und nochmal neu geschrieben habe stimmt es nun. Kannst Du mir sagen wie ich dem Label die Fettschrift entziehen kann?
lösche datatype="label" einfach
Zur Erklärung: data-type="label" braucht man nur bei dynamischen Labels, die ihre Werte von Fhem holen. Bei festen Beschriftungen sollte man das aus Performancegründen weglassen und bekommt damit auch nicht die default Formatierung des Label Widgets ab.
Hallo,
irgendwo habe ich mal gelesen (finde es aber leider nicht mehr), dass man bei Verwendung von pagetabs einstellen kann, dass eine Unterseite nach einer bestimmten Zeit wieder auf die Hauptseite springt. Kann mir jemand helfen?
Danke und Grüße
stoxx
Zitat von: stoxx am 08 März 2016, 18:13:30
Hallo,
irgendwo habe ich mal gelesen (finde es aber leider nicht mehr), dass man bei Verwendung von pagetabs einstellen kann, dass eine Unterseite nach einer bestimmten Zeit wieder auf die Hauptseite springt. Kann mir jemand helfen?
Danke und Grüße
stoxx
Readme des Github-Repo's... Da war das...
Stichwort: data-return-time
https://github.com/knowthelist/fhem-tablet-ui#pagetab-widgets (https://github.com/knowthelist/fhem-tablet-ui#pagetab-widgets)
Readme des Github-Repo's... Da war das...
@roman1528: TOP! Vielen Dank... Mei, was wär ich nur ohne dieses Forum ;)
Schade, hilft mir trotzdem nicht weiter.. Hätte das eigentlich für das Pagebutton-Widget gebraucht, aber da gibt es sowas leider nicht (laut Github)..
Zitat von: roman1528 am 08 März 2016, 18:18:24
Stichwort: data-return-time
Ach, da erinner ich mich doch glatt daran, dass ich nochmal nachfragen wollte, ob es das "override" des returns für bestimmte Seiten schon auf die Roadmap des FTUI geschafft hat? Weiß es jemand? Vielleicht jemand aus dem Dresdener Raum?
In meinem ersten Wurf (mit vielen Ideen aus dem Forum - danke!) habe ich versucht möglichst viel Information auf eine Seite zu packen. Nach dem Beitrag von rhrawr https://forum.fhem.de/index.php/topic,37378.msg418985.html#msg418985 (https://forum.fhem.de/index.php/topic,37378.msg418985.html#msg418985) habe ich diesen Ansatz erstmal über den Haufen geworfen und mich daran orientiert. Das Layout der Vorhersageelemente ist aus dem Swiper-Demo, in die weiße Fläche soll entweder noch der Homestatus (wie im Original) oder es wird auch noch für andere Elemente genutzt werden.
Das Ganze läuft auf einem 10" Archos-Tablet im "Fully Fullscreen Browser".
Grüße,
Thomas.
Schöne Umsetzung, aber 10"? Noch dazu 16:10. Ist das nicht ein bissl "fizzelig"?
Mag aber auch sein, dass mich mein Augenlicht - altergemäß - etwas trügt...
@tomster
Dafür gestochen scharf :)
Aber im Ernst, dafür bin ich ja vom vollgepackten Screen zum lockeren Screen mit den großen Zahlen.
Grüße,
Thomas.
Jetzt hab auch ich Dein Posting verstanden ;-)
Hallo,
ich schlage mich seit Stunden mit einer Darstellung meines Stromberbrauches rum.
Mein device und reading ergibt sich aus dem Modul USBEHZ und dem statistics Modul
Daher erhalte ich im logfile:
2016-03-22_06:27:11 zaehler statZählerstand-Tarif1-Bezug: Hour: 0.1427 Day: 1.5024 Month: 177.2107 Year: 773.1524
wie setze ich das nun in einer Darstellung um ?
<div data-type="label" class="left cell darker">Heute</div>
<div data-type="label" data-device="zaehler" [b]data-get="statZählerstand-Tarif1-Bezug Day:[/b]" data-fix="1" data-unit=" kWh%0A" class="right cell big"></div>
Das data-get klappt nicht. Habe schon unzählige Kombinationen ausprobiert . Leider ohne Erfolg.
Danke für die Hilfe.
Jörg
<div data-type="label" data-device="zaehler" [b]data-get="statZählerstand-Tarif1-Bezug Day:[/b]" data-fix="1" data-unit=" kWh%0A" class="right cell big"></div>
Also hier stimmt doch was nicht? Wenn dann müssen die Anführungszeichen doch vor dem [/b] sein?
Das [b] ist Forumsformatierung kein HTML.
Man kann im Codeblock nicht fett formatieren hier im Forum.
Zitat von: setstate am 22 März 2016, 07:45:57
Das ist Forumsformatierung kein HTML.
Man kann im Codeblock nicht fett formatieren hier im Forum.
Ja natürlich... Ich war irgendwie komplett falsch. Also das "Zeug" muß ganz weg. :-)
Zitat von: Jens_B am 22 März 2016, 09:12:45
Ja natürlich...
::) Im Codebock kann man nicht Formatieren nur im Zitat. (sorry für OT)
Hallo,
sorry wegen der fettschrift im code.
daher nochmals:
Mein device und reading ergibt sich aus dem Modul USBEHZ und dem statistics Modul
Daher erhalte ich im logfile:
2016-03-22_06:27:11 zaehler statZählerstand-Tarif1-Bezug: Hour: 0.1427 Day: 1.5024 Month: 177.2107 Year: 773.1524
Eben mit Hour, Day Month und Year in EINER Zeile
wie setze ich das nun in einer Darstellung um ?
Code: [Auswählen]
<div data-type="label" class="left cell darker">Heute</div>
<div data-type="label" data-device="zaehler" data-get="statZählerstand-Tarif1-Bezug Day:" data-fix="1" data-unit=" kWh%0A" class="right cell big"></div>
Das data-get klappt nicht. Habe schon unzählige Kombinationen ausprobiert . Leider immer noch ohne Erfolg.
Wie bekomme ich eine Anzeige/Werte nur für Stunde/Hour oder Tag/Day????
Danke für die Hilfe.
Jörg
Mit dem Label Widget kann man kein Logfile auslesen.
Welche Readings bietet das Device "zaehler"?
Was sagt FHEM zu folgenden Command?
list zaehler
Es gibt bestimmt zaehler:Hour und zaehler:Day usw.
Hallo zusammen,
könnte mir mal jemand nen Schubs in die Richtung geben wie @rhrawr sein Design mit Gridster aber ohne die Zwischenräume zwischen den Widgets hin bekommt?
Ich blicke das nicht... :-[
Gruß namor
Versuchs mal mit
<meta name="widget_margin" content="0">
im html head ;)
schöne Grüße
Jo
Mhm...
habe es in einer Unterseite zum Test mal eingetragen, ändert sich nix.
Das ist die Seite:
<!DOCTYPE html>
<html>
<head>
<!--
/* FHEM tablet ui */
/*
* Just another dashboard for FHEM
*
* Version: 1.4.4
* Requires: jQuery v1.7+, font-awesome, jquery.gridster, jquery.toast
* URL: https://github.com/knowthelist/fhem-tablet-ui
*
* Copyright (c) 2015 Mario Stephan <mstephan@shared-files.de>
* Under MIT License (http://www.opensource.org/licenses/mit-license.php)
*
* - create a new folder named 'tablet' in /<fhem-path>/www
* - copy all files incl. sub folders into /<fhem-path>/www/tablet
* - add 'define tablet_ui HTTPSRV tablet ./www/tablet Tablet Frontend' in fhem.cfg
* - Tadaaa! A new fhem ui in http://<fhem-url>:8083/fhem/tablet/
*/
-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="widget_base_width" content="116">
<meta name="widget_base_height" content="131">
<meta name="widget_margin" content="0">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="longpoll" content="1"> <!-- 1=longpoll;0=shortpoll every 30sec -->
<meta name="debug" content="0"> <!-- 1=output to console;0=no output -->
<link rel="stylesheet" href="/fhem/tablet/lib/jquery.gridster.min.css" />
<link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/font-awesome.min.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/jquery.toast.min.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/openautomation.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/fhemSVG.css" />
<!-- define your personal style here, it wont be overwritten -->
<!-- link rel="stylesheet" href="/fhem/tablet/css/fhem-green-ui.css" / -->
<link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui-user.css" />
<script src="/fhem/pgm2/jquery.min.js" defer></script>
<script src="/fhem/tablet/lib/jquery.toast.min.js" defer></script>
<script src="/fhem/tablet/lib/jquery.gridster.min.js" defer></script>
<script src="/fhem/tablet/js/fhem-tablet-ui.min.js" defer></script>
<!-- Remove this line to enable for usage with WebViewControl
<script defer>var wvcDevices = {'12345': 'Tablet'}; var wvcUserCssFile="webviewcontrol.css"</script>
<script src="/fhem/pgm2/cordova-2.3.0.js" defer></script>
<script src="/fhem/pgm2/webviewcontrol.js" defer></script>
<!-- End for WebViewControl -->
<title>FHEM-Tablet-UI</title>
</head>
<body>
<div class="gridster">
<ul>
hat einer´n Tipp? :-\
Cache gelöscht?
Zitat von: setstate am 23 März 2016, 11:18:08
Mit dem Label Widget kann man kein Logfile auslesen.
Welche Readings bietet das Device "zaehler"?
Was sagt FHEM zu folgenden Command?
list zaehler
Es gibt bestimmt zaehler:Hour und zaehler:Day usw.
Hallo,
das resultat mit list zaehler lautet:
2016-03-24 05:28:43 Z_avg_day 22481.2
2016-03-24 05:28:43 Z_avg_month 22383.5
2016-03-24 05:28:43 Z_cum_day 443397007.7753
2016-03-24 05:28:43 Z_cum_month 46855934292.6508
2016-03-24 05:28:43 Z_max_day 22481.9
2016-03-24 05:28:43 Z_max_month 22481.9
2016-03-24 00:07:14 Z_min_day 22480.5
2016-03-01 00:00:05 Z_min_month 22286.4
2016-03-24 05:28:43 Zählerstand-Tarif1-Bezug 22481.9307
2016-03-24 05:28:43 statZählerstand-Tarif1-Bezug Hour: 0.1376 Day: 1.5228 Month: 195.5604 Year: 791.5021
2016-03-24 04:59:55 statZählerstand-Tarif1-BezugLast Hour: 0.2682 Day: 8.7421 Month: 263.5083 Year: 439.8501 (since: 2015-11-16 Dabei basiert Z_xxx auf den Zählerstand und eben mit dem modul statistics mache ich die Berechnung Stunde/Tag/Monat/Jahr.
Mehr Werte bekomme ich halt nicht über den IR-Sensor meines Stromzählers.
Danke für Hilfe
Jörg
Zitat von: namor am 23 März 2016, 21:08:42
Mhm...
habe es in einer Unterseite zum Test mal eingetragen, ändert sich nix.
Das ist die Seite:
hat einer´n Tipp? :-\
Du sagtest "Unterseite " , hast du in jeder sub page die Definitionen hinterlegt?
Die Definitionen sind ja eigentlich alle nur in der index.html.
Dort muss die besagte Zeile auch nur in den head eingefügt werden, es wird ja dann für alle anderen übernommen.
Aufbau ist ja:
Einmal index mit def und menu Aufruf.
Menu mit dem pagetabmenu
Sub 1 - xx mit dem Inhalt der einzelnen Seiten.
Ok, werde ich heute Abend mal Testen.
Vielen Dank
@Jojo11
@schnitzelbrain
Vielen Dank für den Denkanstoß.
Jetzt passt alles ::)
Guten Abend zusammen,
Ich hab gesehen, dass einige von euch den Google Kalender direkt in die Tablet Ui eingebunden haben. Ich hab das auch folgender Maßen gemacht
<!DOCTYPE html>
<html>
<body>
<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="1" data-sizey="6" data-template="menu.html"></li>
<li data-row="2" data-col="1" data-sizex="9" data-sizey="6">
<iframe src="https://calendar.google.com/calendar/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
style="border: 0" width="800" height="600" frameborder="0" scrolling="no"></iframe>
</li>
</ul>
</div>
</body>
</html>
Nur leider wird der Kalender nicht angezeigt.Über das Tablet sehe ich gar nichts, und wenn ich über den Pc gucke, kommt halt die Fehlermeldung
Dieser Inhalt kann nicht in einem Frame angezeigt werden.
An dieser Stelle sollten Sie eigentlich Inhalte sehen, aber der Herausgeber lässt die Anzeige in einem Frame nicht zu. Dadurch wird die Sicherheit der Informationen gewährleistet, die Sie ggf. auf dieser Website eingeben.
Probieren Sie Folgendes
•Inhalt in einem neuen Fenster öffnen
Irgendwas muss ich doch übersehen haben.
Gibt es dafür nicht ein iframe-widget? Probier das mal.
https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/iframe (https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/iframe)
Schöne Grüße
Jo
Hallo,
ich versuche mich immer noch an der Umsetzung von Charts mit logProxy und komme einfach nicht weiter.
Wie würde man nachfolgenden gplot code bitte in TabletUI Form umsetzen ?
set ylabel "vapor / radiation"
set y2label "sun (rel) %"
set yrange [0:10]
set y2range [0:110]
#logProxy Func:logProxy_proplanta2Plot("Wettervorhersage_Proplanta","rad",$from,$to,12)
#logProxy Func:logProxy_proplanta2Plot("Wettervorhersage_Proplanta","rad",$from,$to,12)
#logProxy Func:logProxy_proplanta2Plot("Wettervorhersage_Proplanta","sun",$from,$to,12)
#logProxy Func:logProxy_proplanta2Plot("Wettervorhersage_Proplanta","evapor",$from,$to,0,"day")
#logProxy ConstY:110
plot "<IN>" using 1:2 axes x1y1 notitle ls l3 lw 2 with points,\
"<IN>" using 1:2 axes x1y1 title 'fc_rad' ls l5 lw 2 with quadraticSmooth,\
"<IN>" using 1:2 axes x1y2 title 'fc_sun' ls l4fill lw 1 with bars,\
"<IN>" using 1:2 axes x1y1 title 'fc_vapor' ls l2fill lw 1 with steps,\
"<IN>" using 1:2 axes x1y2 notitle ls l6fill lw 1 with lines
ODER HAT JEMAND mal ein Beispiel, wie man eben logProxy aus gplot in TabletUi umsetzt.
Danke für die Hilfe
Jörg
Zitat von: Esjaycc am 01 April 2016, 21:47:24
Ich hab gesehen, dass einige von euch den Google Kalender direkt in die Tablet Ui eingebunden haben. Ich hab das auch folgender Maßen gemacht
Nur leider wird der Kalender nicht angezeigt.Über das Tablet sehe ich gar nichts, und wenn ich über den Pc gucke, kommt halt die Fehlermeldung
Dieser Inhalt kann nicht in einem Frame angezeigt werden.
An dieser Stelle sollten Sie eigentlich Inhalte sehen, aber der Herausgeber lässt die Anzeige in einem Frame nicht zu. Dadurch wird die Sicherheit der Informationen gewährleistet, die Sie ggf. auf dieser Website eingeben.
Probieren Sie Folgendes
•Inhalt in einem neuen Fenster öffnen
Irgendwas muss ich doch übersehen haben.
Hier ist meine Einbetttung allerdings mit gekürztem URL:
</li>
<li data-row="1" data-col="2" data-sizex="10" data-sizey="4">
<div class="container cell">
<iframe style=" border:solid 1px #777 " width="800" height="500" frameborder="0" scrolling="no"
src="https://www.google.com/calendar/embed?title=.............">
</iframe>
</div>
</li>
</ul>
Ich denke den URL kann man auch irgendwo in Google abrufen und es gibt relativ viele Parameter für die Einbettung (Timezone, Breite, etc) die ich angepasst habe.
Zitat von: viegener am 02 April 2016, 20:49:33
Hier ist meine Einbetttung allerdings mit gekürztem URL:
</li>
<li data-row="1" data-col="2" data-sizex="10" data-sizey="4">
<div class="container cell">
<iframe style=" border:solid 1px #777 " width="800" height="500" frameborder="0" scrolling="no"
src="https://www.google.com/calendar/embed?title=.............">
</iframe>
</div>
</li>
</ul>
Ich denke den URL kann man auch irgendwo in Google abrufen und es gibt relativ viele Parameter für die Einbettung (Timezone, Breite, etc) die ich angepasst habe.
Ich musste in den Einstellungen des Kalenders die Option "Diesen Kalender öffentlich machen" aktivieren. Anschließend konnte er angezeigt werden.
Zitat von: Esjaycc am 04 April 2016, 12:31:21
Ich musste in den Einstellungen des Kalenders die Option "Diesen Kalender öffentlich machen" aktivieren. Anschließend konnte er angezeigt werden.
Öffentlich machen ist nicht notwendig und ist jetzt eigentlich auch keine Option die ich wählen würde !
In den Google-Kalender-Einstellungen (Calendar Details) findet sich ein Feld "embed this calendar" --> Dort findet sich auch ein URL, allerdings muss der Browser der den Kalendar anzeigen soll auch unter diesem Googleaccount laufen (oder einem Benutzer der diesen Kalender nutzen kann). Öffentlich machen aber wie gesagt ist nicht nötig.
Zitat von: h3llsp4wn am 23 Februar 2016, 20:33:56
Hallo zusammen,
anbei meine Demo. Heizung und Licht baue ich gerade um - da wird es dann spannend. Hat eigentlich jemand schon eine Steuerung für die km200 von Buderus über das TabletUI
realisiert?
@RettungsTim - ich denke Du bist jetzt schon fertig mit Deiner eigenen Lösung - sorry.
Ansonsten gibt es glaube ich wesentlich spektakulärere Lösungen ;)
Auf der ToDo-Liste stehen noch:
- Kodi
- Heizungssteuerung (s.o.)
- Stauvorhersage für den Weg zur Arbeit und die Entscheidung, ob fahren überhaupt lohnt ... 8)
- WeekDayTimer Steuerung
Die Lösung nutzt das hier scheinbar nicht so gemochte pagetab. Das funktionierte bei mir aber nach Umbau des Webservers schon sehr gut.
Bin gerade auf den Raspberry 2 umgestiegen und jetzt fliegt es sogar ;D
Bilder und Sourcen sind im Anhang.
... und bevor jemand meckert - auch ich habe natürlich hier und da Anregungen mitgenommen - also danke an alle, die
Ihre Tipps, Tricks und Lösungen präsentieren und teilen!
Cheers,
h3ll
Sehr inspirierend für mich, deine Realisierung.
Vor allem aufgeräumt in den einzelnen HTML Seiten, sodass ich auch verstehen kann, was für was ist.. :-)
Ich bin gerade dabei, das auf deinem aufzubauen, nachdem ich 3 erfolglose Versuche mit anderen Interpretationen habe.
Allerdings verstehe ich nicht alle devices. Vielleicht kannst du mal den Rest noch hochladen?
Als Beispiel die Anwesenheit :-)
Danke dir!
@morph:
Danke - freut mich :)
In meiner Demo war eigentlich alles drin - oder meinst Du die Device-Konfiguration in FHEM dazu?
Dann kram ich das raus.
h3ll
Nachtrag:
Hat schon jemand eine WeekDayTimer Heizungssteuerungsoberfläche für Buderus/km200 o.ä. gebaut - ich meine für die TabletUI?
Oder hat dies ggf. noch vor? Vielleicht könnte man sich da zusammen tun ... würde allerdings dann direkt auf der 2.2 aufsetzen.
ja, damit ich deine devices verstehe :-)
aktuell gibts jetzt die Aufgabe: wie bekomme ich die Auflösung auf den jeweiligen ports anders hin, das es auf pc / pad / handy korrekt angezeigt wird.?
Wollte hier auch mal kurz mein Layout zeigen. Ich bin noch im Aufbau von vielen Sachen aber man kann ja schon erkennen wo es hingeht.
Das sieht ja schon sehr schön aus. ;D
Hallo wildea,
könntest du einige Infos zu deiner Wetter-Seite posten?
Wäre interessiert am FTUI-Code und den angelegten Devices in FHEM.
Zitat von: n4rrOx am 09 Juni 2016, 12:32:56
Hallo wildea,
könntest du einige Infos zu deiner Wetter-Seite posten?
Wäre interessiert am FTUI-Code und den angelegten Devices in FHEM.
ja klar gerne..
für die Wetterspalten oben habe ich folgendes in fhem eingestellt
define Wetterext PROPLANTA Burgdorf+%28Kreis+Hannover%29hier musst du natürlich deine Stadt eintragen. Die html findest du unten.
Für das Chart benutze ich Meteo
https://github.com/knowthelist/fhem-tablet-ui/tree/master/examples/charts
@wildea
super, vielen Dank!
Sieht schick aus! =)
Zitat von: wildea am 09 Juni 2016, 12:25:31
Wollte hier auch mal kurz mein Layout zeigen. Ich bin noch im Aufbau von vielen Sachen aber man kann ja schon erkennen wo es hingeht.
Das sieht super aus. Würdest Du die FTUI Codes deiner Seiten zur Verfügung stellen?
Gruß Mirco
Ja mache ich in den nächsten Tagen mal.
Gesendet von iPhone mit Tapatalk
Zitat von: coolice am 10 Juni 2016, 06:51:50
Das sieht super aus. Würdest Du die FTUI Codes deiner Seiten zur Verfügung stellen?
Dem schließ' ich mir an ;)
Hallo wildea
kannst du mir das mit den Charts erklären oder gibt es irgendwo das zum nachlesen. Ich beschäftige mich seit ein paar Wochen mit FHEM und finde die Charts sehr interresant.
Hallo zusammen,
hier gab es mal ein Screenshot eines UI, welches optisch sehr stark an das "HEIMA UI" angelehnt ist. Hat das jemand real laufen oder sind das alles nur "renderings"?
Falls ja, würdet Ihr Eure .html Dateien dazu zur Verfügung stellen, da ich mir das sehr gerne mal näher anschauen möchte.
Vielen Dank und beste Grüße,
Roman
Zitat von: Pi_Newbie am 17 Juni 2016, 20:00:02
hier gab es mal ein Screenshot eines UI, welches optisch sehr stark an das "HEIMA UI" angelehnt ist. Hat das jemand real laufen oder sind das alles nur "renderings"?
Ich habe folgendes am laufen (noch nicht komplett fertig), ist zwei Seiten vorher zu sehen - meinst Du das?
- Hauptseite: siehe Screenshot, die 3-Tage-Wettervorschau kann man mittels Swiper auf die Tage 4-6 umschalten; gibt aktuell noch ein Problem wenn die Wetterinfo recht lang ist
- 2. Seite: Stundenplan Kind, statisch, muss alle 1/2 Jahre geändert werden ;-)
- 3. Seite: Verkehrsinfo, Öffentlicher Nahverkehr (Halltestellenauskunft) und Google Maps
Hallo KT83,
ja genau, dein UI meinte ich. Ist es möglich deine bisherigen html's zur Verfügung zu stellen? Das wäre super!
Ich sitze da auch gerade dran aber leider will es noch nicht ganz so wie ich es will! :)
Vielen Dank und beste Grüße
Hallo
ja so ähnlich hab ich mein neues design auch gestaltet, hier mal ein paar Bilder.
Ist noch nicht fertig, wird es aber bestimmt auch nie ;)
Die Dateien und css jetzt im Anhang (für Eval 2.2).
Gruß Rolf
Zitat von: Pi_Newbie am 17 Juni 2016, 21:36:38
ja genau, dein UI meinte ich. Ist es möglich deine bisherigen html's zur Verfügung zu stellen? Das wäre super!
musste erst noch ein bisschen aufräumen ...
Die Dateien sind für die 2.2er-Eval-Version.
Als Wetterprovider wird AgroWeather verwendet:
define AgroWeather PROPLANTA <Deine PLZ>Grüße,
Thomas.
Zitat von: wildea am 10 Juni 2016, 08:51:01
Ja mache ich in den nächsten Tagen mal.
Gesendet von iPhone mit Tapatalk
Hallo wildea,
Ist schon absehbar, wenn Du was bereitstellen kannst, gefällt mir ansatzweise sehr gut !
kvo1
Hallo
nachdem mir hier sehr viel geholfen wurde und ich natürlich auch viel von anderen Usern abgeschaut habe, möchte ich mein einfaches "Kunstwerk"
hier vorstellen
Hier der htmlCode - sicher werden Kritiker sehr viel Verbesserungspotential erkennen, aber für mich tut es das was es soll.
Gerne sehe ich mir evtl. Verbesserungsvorschläge an.....
<!DOCTYPE html>
<html>
<head>
<!--
/* FHEM tablet ui */
/*
* UI builder framework for FHEM
*
* Version: 2.2.*
* URL: https://github.com/knowthelist/fhem-tablet-ui
*
* Copyright (c) 2015-2016 Mario Stephan <mstephan@shared-files.de>
* Under MIT License (http://www.opensource.org/licenses/mit-license.php)
*
* !!!! Evaluation version - run only in a staging enviroment !!!!
*
* - create a new folder named 'tablet_eval' in /<fhem-path>/www
* - copy all files incl. sub folders into /<fhem-path>/www/tablet_eval
* - add 'define TABLETUIEVAL HTTPSRV ftui_eval ./www/tablet_eval Tablet-EVAL' in fhem.cfg
* - Tadaaa! A new fhem ui in http://<fhem-url>:8083/fhem/tablet_eval/
*/
-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="widget_base_width" content="118">
<meta name="widget_base_height" content="130">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="gridster_disable" content="1">
<meta name="longpoll" content="1"> <!-- 1=longpoll;0=shortpoll every 30sec -->
<meta name="debug" content="2"> <!-- verbose level 1-6 = output to console;0 = not output -->
<meta http-equiv="Cache-Control" content="no-store" />
<link rel="stylesheet" href="lib/jquery.gridster.min.css" />
<link rel="stylesheet" href="css/fhem-tablet-ui.css" />
<link rel="stylesheet" href="lib/font-awesome.min.css" />
<link rel="stylesheet" href="lib/jquery.toast.min.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/openautomation.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/fhemSVG.css" />
<!-- define your personal style here, it wont be overwritten -->
<!-- link rel="stylesheet" href="css/fhem-green-ui.css" / -->
<!-- link rel="stylesheet" href="css/fhem-tablet-ui-user.css" / -->
<script src="../pgm2/jquery.min.js"></script>
<script src="lib/jquery.toast.min.js"></script>
<script src="lib/jquery.gridster.min.js"></script>
<script src="js/fhem-tablet-ui.js" defer></script>
<title>Poolsteuerung</title>
</head>
<body>
<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
<header class="cell" >Platzhalter</header>
<div data-type="switch"
data-device=""
data-set-on="off"
data-set-off="on"
data-get-on='["off","on"]'
data-icon=""
data-background-colors='["red","green"]'
class="bigger" >
</div>
<div data-type="label" class="bold"></div>
</li>
<li data-row="2" data-col="1" data-sizex="1" data-sizey="1">
<header class="cell" >Platzhalter</header>
<div data-type="switch"
data-device=""
data-set-on="off"
data-set-off="on"
data-get-on='["off","on"]'
data-icon=""
data-background-colors='["red","green"]'
class="bigger" >
</div>
<div data-type="label" class="bold"></div>
</li>
<li data-row="1" data-col="2" data-sizex="1" data-sizey="1">
<header class="cell" > </header>
<div data-type="switch"
data-device="PoolMaster"
data-set-on="off"
data-set-off="on"
data-get-on='["off","on"]'
data-icon="fa-power-off"
data-background-colors='["red","green"]'
class="bigger" >
</div>
<div data-type="label" class="bold">Pool Master</div>
</li>
<li data-row="1" data-col="3" data-sizex="1" data-sizey="1">
<header class="cell" > </header>
<div data-type="switch"
data-device="PoolPumpe"
data-set-on="off"
data-set-off="on"
data-get-on='["off","on"]'
data-icon="fa-power-off"
data-background-colors='["red","green"]'
class="bigger" >
</div>
<div data-type="label" class="bold">Pool Pumpe</div>
</li>
<li data-row="1" data-col="4" data-sizex="1" data-sizey="1">
<header class="cell" > </header>
<div data-type="switch"
data-device="SolarPumpe"
data-set-on="off"
data-set-off="on"
data-get-on='["off","on"]'
data-icon="fa-power-off"
data-background-colors='["red","green"]'
class="bigger" >
</div>
<div data-type="label" class="bold">Solar Pumpe</div>
</li>
<li data-row="1" data-col="5" data-sizex="1" data-sizey="1">
<header class="cell" > </header>
<div data-type="switch"
data-device="Abend"
data-set-on="off"
data-set-off="on"
data-get-on='["off","on"]'
data-icon="fa-power-off"
data-background-colors='["red","green"]'
class="bigger" >
</div>
<div data-type="label" class="bold">Abend</div>
</li>
<li data-row="1" data-col="6" data-sizex="1" data-sizey="1">
<header class="cell" > </header>
<div data-type="switch"
data-device="Chlor_Schalter"
data-set-on="off"
data-set-off="on"
data-get-on='["off","on"]'
data-icon="fa-power-off"
data-background-colors='["red","green"]'
class="bigger" >
</div>
<div data-type="label" class="bold">Chlor Schalter</div>
</li>
<li data-row="1" data-col="7" data-sizex="1" data-sizey="1">
<header>Roboter</header>
<div class="row top-space">
<div class="col-1-4">
<div data-type="switch"
data-device="Roboter"
data-set-on="on"
data-set-off="off"
data-get-on="on"
data-get-off="off"
data-icon="fa-power-off"
data-on-background-color="green"
data-off-background-color="red"
class="small">
</div>
<div data-type="label"
class=""> Auto
</div>
</div>
<div class="col-2-4">
</div>
</div>
<div class="row">
<div class="col-2-4">
</div>
<div class="col-1-4">
<div data-type="symbol"
data-device="Roboter_sw4"
data-get-on="on"
data-get-off="off"
data-icon="fa-gear"
data-on-color="green"
data-off-color="red"
class="small">
</div>
<div data-type="label"
class="">Status
</div>
</div>
</div>
</li>
<li data-row="1" data-col="8" data-sizex="1" data-sizey="1">
<header>Garagentor</header>
<div data-type="symbol" data-device="GaragenTor"
data-get-on='["Offen","Zu"]'
data-icons='["oa-fts_garage_door_10","oa-fts_garage_door_100"]'
data-on-colors='["red","green"]'
class="bigger" >
</div>
<div data-type="label" data-device="Tuer"
</li>
<li data-row="2" data-col="2" data-sizex="1" data-sizey="1">
<header>Batteriestatus %</header>
<div data-type="label"
data-device="TabletGarage"
data-get="powerLevel"
data-fix="1"
class="big">
</div>
<br/>
<header>Ladestatus "on=1"</header>
<div data-type="label"
data-device="TabletGarage"
data-get="powerPlugged"
class="big" data-unit="">
</div>
</li>
</li>
<li data-row="2" data-col="3" data-sizex="1" data-sizey="1">
<header>Pool °C</header>
<div data-type="thermostat"
data-device="PoolSensor"
data-get="temperature" data-temp=""
data-min="-10" data-max="60" data-step=".1" data-unit=""
class="readonly top-space">
</div>
</li>
<li data-row="2" data-col="4" data-sizex="1" data-sizey="1">
<header>Solar °C</header>
<div data-type="thermostat"
data-device="SolarSensor"
data-get="temperature" data-temp=""
data-min="-10" data-max="60" data-step=".1" data-unit=""
class="readonly top-space">
</div>
</li>
<li data-row="2" data-col="5" data-sizex="1" data-sizey="1">
<header>Luft °C</header>
<div data-type="thermostat"
data-device="LuftTemp_Telefonmast"
data-get="temperature" data-temp=""
data-min="-10" data-max="60" data-step=".1" data-unit=""
class="readonly top-space">
</div>
</li>
<li data-row="2" data-col="6" data-sizex="1" data-sizey="1">
<header>SolarDiff</header>
<div data-type="label"
data-device="SolarDiff"
data-get="STATE"
data-fix="1"
data-unit="%B0C%0A"
class="big">
</div>
<br/>
<header>Hysterese</header>
<div data-type="label"
data-device="Hysterese"
data-get="STATE"
data-unit="%B0C%0A"
class="big">
</div>
</li>
<li data-row="2" data-col="7" data-sizex="1" data-sizey="1">
<header class="cell" > </header>
<div data-type="switch"
data-device="Roboter_sw4"
data-set-on="off"
data-set-off="on"
data-get-on='["off","on"]'
data-icon="fa-power-off"
data-background-colors='["red","green"]'
class="bigger" >
</div>
<div data-type="label" class="bold">Roboter</div>
</li>
<li data-row="2" data-col="8" data-sizex="1" data-sizey="1">
<header>Garage °C</header>
<div data-type="thermostat"
data-device="Garage"
data-get="temperature" data-temp=""
data-min="-10" data-max="60" data-step=".1" data-unit=""
class="readonly top-space">
</div>
</li>
<li data-row="3" data-col="1" data-sizex="1" data-sizey="3">
<div data-type="label" class="cell darker top-space">Heute</div>
<div data-type="weather" data-device="Wetter" data-get="fc1_condition" class="cell big"></div>
<div data-type="label" data-device="Wetter" data-get="fc1_condition" class="cell narrow"></div>
<div data-type="label" data-device="Wetter" data-get="fc1_high_c" data-unit="%B0C%0A" class="cell large"></div>
<div data-type="label" data-device="Wetter" data-get="fc1_low_c" data-unit="%B0C%0A" class="cell large"></div>
<div data-type="label" class="cell darker top-space">Morgen</div>
<div data-type="weather" data-device="Wetter" data-get="fc2_condition" class="cell big"></div>
<div data-type="label" data-device="Wetter" data-get="fc2_condition" class="cell narrow"></div>
<div data-type="label" data-device="Wetter" data-get="fc2_high_c" data-unit="%B0C%0A" class="cell large"></div>
<div data-type="label" data-device="Wetter" data-get="fc2_low_c" data-unit="%B0C%0A" class="cell large">
</div>
</li>
<li data-row="3" data-col="2" data-sizex="1" data-sizey="1">
<header class="cell" ></header>
<div data-type="switch"
data-device="GartenLicht"
data-states='["off","on","on-for-timer.*"]'
data-set-states='["on","off","off"]'
data-icons='["fa-power-off","fa-power-off","fa-power-off"]'
data-background-colors='["red","green","green"]'
class="bigger" >
</div>
<div data-type="label" class="bold">Gartenlicht</div>
</li>
<li data-row="3" data-col="4" data-sizex="2" data-sizey="1">
<header>St. Andrä-Wördern</header>
<div class="cell center">
<h2><a style="text-decoration:none;" href="http://www.zeitverschiebung.net/de/city/2761369"></h2><iframe src="http://www.zeitverschiebung.net/clock-widget-iframe?language=de&timezone=Europe%2FVienna" width="100%" height="130" frameborder="0" seamless></iframe></a>
</div>
</li>
<li data-row="3" data-col="6" data-sizex="1" data-sizey="1">
<header class="cell">pH - Wert</header>
<br/>
<div data-type="label"
data-device="pHSonde"
data-get="pH"
data-limits='[5,6.9,7.3]'
data-colors='["orange","green","red"]'
data-fix="1"
class="bigger">
</div>
</li>
<li data-row="3" data-col="7" data-sizex="1" data-sizey="1">
<header class="cell" ></header>
<div data-type="switch"
data-device="PoolLicht"
data-set-on="off"
data-set-off="on"
data-get-on='["off","on"]'
data-icon="fa-power-off"
data-background-colors='["red","green"]'
class="bigger" >
</div>
<div data-type="label" class="bold">Poollicht</div>
</li>
<li data-row="3" data-col="8" data-sizex="1" data-sizey="1">
<header>TechnikPool °C</header>
<div data-type="thermostat"
data-device="Technik_Pool"
data-get="temperature" data-temp=""
data-min="-10" data-max="60" data-step=".1" data-unit=""
class="readonly top-space">
</div>
</li>
<li data-row="4" data-col="8" data-sizex="1" data-sizey="1">
<header>Abstellraum °C</header>
<div data-type="thermostat"
data-device="Abstellraum"
data-get="temperature" data-temp=""
data-min="-10" data-max="60" data-step=".1" data-unit=""
class="readonly top-space">
</div>
</li>
<li data-row="5" data-col="8" data-sizex="1" data-sizey="1">
<header>Brunnen °C</header>
<div data-type="thermostat"
data-device="Brunnen"
data-get="temperature" data-temp=""
data-min="-10" data-max="60" data-step=".1" data-unit=""
class="readonly top-space">
</div>
</li>
<li data-row="4" data-col="2" data-sizex="6" data-sizey="2">
<header>Pooltemperatur</header>
<div data-type="chart"
data-device="PoolSensor"
data-logdevice='["FileLog_PoolSensor","FileLog_SolarSensor","FileLog_LuftTemp_Telefonmast"]'
data-columnspec='["4:temperature","4:temperature","4:temperature"]'
data-style='["ftui l1fill","ftui l2","ftui l5"]'
data-ptype='["lines","lines","lines"]'
data-uaxis='["CURRENT","CURRENT","CURRENT"]'
data-legend='["Pool","Solar","Luft"]'
data-yunit="˚C"
data-ytext="Temperatur"
data-minvalue="auto"
data-maxvalue="auto"
data-daysago_start="0"
data-daysago_end="-1"
data-crosshair="true"
data-cursorgroup="1"
data-scrollgroup="1"
data-showlegend="true"
data-xticks="auto">
</div>
</li>
</ul>
</div>
</body>
</html>
Liebe Grüße
Helmut
Zitat von: Helmi55 am 01 Juli 2016, 16:12:32
Hallo
nachdem mir hier sehr viel geholfen wurde und ich natürlich auch viel von anderen Usern abgeschaut habe, möchte ich mein einfaches "Kunstwerk"
hier vorstellen
Hier der htmlCode - sicher werden Kritiker sehr viel Verbesserungspotential erkennen, aber für mich tut es das was es soll.
Gerne sehe ich mir evtl. Verbesserungsvorschläge an.....
Liebe Grüße
Helmut
Hast du vielleicht auch ein Bild für uns von der Oberfläche?
Schon dabei - sorry
Hallo gloob
hab ich angehängt - nice weekend
Helmut
Zitat von: setstate am 08 November 2015, 10:58:12
Die Highcharts-Widgets sind nun eingechecket und per Update verfügbar.
Dank an blackbluegl: https://github.com/knowthelist/fhem-tablet-ui/pull/122 (https://github.com/knowthelist/fhem-tablet-ui/pull/122)
Beispiele sind im examples Ordner verfügbar.
Wo finde ich den neine komplette API Beschreibung? Die Beispiele zeigen ja bestimmt nur einen kleinen Teil der Funktionen.
Zb.
- wie kann ich die Farben der Charts vorgeben?
- Wie kann ich das Zeitfenster für die Daten vorgeben? Aktuell werden ur die heutigen Daten angezeigt
- Der Chart soll immer den vollen Tag anzeigen und nicht nur bis zu jetzigen Stunde
Hallo,
anbei mal meine Mobil-UI um unterwegs schnell die wichtigsten Einstellungen parat zu haben. UI ist an smartvisu angelehnt.
Aktuell arbeite ich noch an den 2 fehlenden Unterseiten und danach das ganze für das Wandtablet in der Wohnung.
Zitat von: devil77 am 27 Juli 2016, 15:18:22
Hallo,
anbei mal meine Mobil-UI um unterwegs schnell die wichtigsten Einstellungen parat zu haben. UI ist an smartvisu angelehnt.
Aktuell arbeite ich noch an den 2 fehlenden Unterseiten und danach das ganze für das Wandtablet in der Wohnung.
Finde ich sehr gelungen Deine Umsetzung. Hast Du Dir die CSS angepasst oder gibt es da was, was ich bisher übersehen habe an Bordmitteln.
Grüße aus der selben Stadt.
Css ist zum Teil Standard und zum größten Teil eigene CSS Klassen.
CSS ist sogar nicht meins. Würdest Du Deine CSS zur Verfügung stellen?
WOW sieht super aus. An den CSS Dateien wäre ich auch interessiert. Könntest Du sogar deine Unterseiten als ZIP zur Verfügung stellen?
Kann ich gerne machen, bin zur Zeit aber noch am "basteln" und bearbeiten der CSS Dateien.
Dementsprechend sehen die noch etwas chaotisch aus.
Aber hier ein paar Screenshots von meiner UI-Baustelle Tablet.
WOW. Like
Darf ich fragen, mit was du deine Plots erstellst?
Zitat von: gloob am 28 Juli 2016, 13:14:48
Darf ich fragen, mit was du deine Plots erstellst?
Mit dem hier https://forum.fhem.de/index.php/topic,55007.0.html
Zitat von: bjoernbo am 28 Juli 2016, 08:29:42
WOW sieht super aus. An den CSS Dateien wäre ich auch interessiert. Könntest Du sogar deine Unterseiten als ZIP zur Verfügung stellen?
Da kann ich mich nur anschließen, an den Dateien wäre ich auch interessiert.
Dito - die eine oder andere Anregung würde ich gerne "kopieren" 8)
Hallo zusammen,
ich bin auch fleißig dabei,meine Tablet Oberfläche einzurichten.Hab mal nen Zwischenstand angehängt.
Ich hätte allerdings eine Frage zu dem Thermostat.
Und zwar würde ich das ganze gerne so wie von devil77 gezeigt aufbauen.
Wie zu sehen,konnte ich das Thermostat schon in den Swiper einbauen,jedoch wüsste ich nun gerne,wie ich das Thermostat erstens größer bekomme,und zweitens mittig behalte,wenn ich die Fläche kleiner mache. Ich denke auf den Bildern kann man das schon ganz gut erkennen was ich meine.
Mein bisheriger Code sieht folgendermaßen aus.
<body>
<div class="page" id="swiper">
<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="5" data-sizey="3">
<div data-type="swiper" data-height="220px" data-width="440px" class="">
<ul>
<li><header>Heizung ZimmerB</header>
<div data-type="thermostat" data-device="HZ_Tuer"
data-valve="valveposition"
data-get="desiredTemperature"
data-temp="temperature"
data-set="desiredTemperature"
class="cell">
</div>
</li>
<li><header>Heizung ZimmerA</header>
<div data-type="thermostat" data-device="HZ_Tuer"
data-valve="valveposition"
data-get="desiredTemperature"
data-temp="temperature"
data-set="desiredTemperature"
class="cell">
</div>
</li>
<li><div class="">Test1</div></li>
<li><div class="">Test2</div></li>
<li><div class="">Test3</div></li>
</ul>
</div>
</ul>
</li>
</div>
</div>
</body>
Vielen Dank!
Gruß
Die zu vertikal zentrierenden Items musst du in class="center" DIVs mit Höhe 100% verpacken. In deinem Fall 85% Höhe.
<div style="height: 85%;" class="center">
<div data-type="thermostat" data-device="HZ_Tuer"
data-valve="valveposition"
data-get="desiredTemperature"
data-temp="temperature"
data-set="desiredTemperature"
class="">
</div>
</div>
Dank dir....Mal wieder :)
Gruß
Lange ist es her seit dem letzten Update..
Sehr schön.
Frage dazu... wie/womit realisierst Du die Verbrauchsmessungen der ganzen Geräte?
Moin Hollo,
da leisten 30 ELV PCA301 ihre Arbeit ;)
Vermutlich habe ich gerade einfach nur nicht die richtigen Seiten gefunden, oder einen schlechten Zeitpunkt erwischt...
Wollte heute mit dem Tablet-UI anfangen, finde aber keine passende Basis auf der ich da starten kann. Alte Version 1.5 ist ja jetzt depricated, und zur neuen Version keine hübsche Demo.
Hat da jemand eine Demo die auf eval basiert?
Hallo,
Ich möchte auch gerne mal meine Oberfläche zeigen.
Ich habe ein Tablet im Flur hängen, das zum größten Teil nur der Information dient, aber auch Grundeinstellungen bedienen kann. Alle aufwendigeren Einstellungen nehme ich am Computer vor. Im Wohnzimmer habe ich ein Kleines Display für Wetterdaten, aber auch noch ein paar anzeigen für Radio, Steckdosen und Aufnahmestatus der Dreambox. Diese werden aber nur bei Bedarf angezeigt (Da fast meine gesamte Medientechnik im Schrank untergebracht ist).
Dies ist bei weitem nicht so Aufwendig wie die anderen Beispiele, aber da der WAF-Faktor wichtig war habe ich mich auf wesentliches beschränkt.
Gruß Rolf
Servus,
da es aktuell nicht so viele Mobil-Versionen (Smartphone) von Tablet-UI gibt, möchte ich meine Oberfläche mal zeigen.
Man kann einerseits zwischen den Etagen wechseln, aber anderseits sich auch eine Liste von einen bestimmten Status (Temperatur/Luftfeuchtigkeit/Fenster und Türkontakt/Batteriestatus ...) anzeigen lassen.
Die Steuerung der Raumtemperatur und Rollladen ist als Popup hinter den entsprechenden Status versteckt.
Schaut es euch einfach selber an:
Bei Fragen oder Anregungen schreibt einfach.
Gruß Toni
Hallo rvideobaer und l-j-silver
Würdet ihr eure Codes auch zur Verfügung stellen?
Beide gefallen mir sehr, sehr gut
Lg Helmut
ich wäre auch an dem Code der Mobile Seite interessiert!
Ich bin da gerade selber am basteln und durchsteigen und über Inspiration sehr dankbar;-)
Gruß Michael
@rvideobaer - Herzlichen Dank
Hallo l-j-silver,
deine Mobile Seite gefällt mir auch sehr gut. Wäre dir sehr dankbar wenn du den Code dazu auch mir bereitstellen würdest.
Gruß Thomas
meine Mobile-Version habe ich an die Interessenten verschickt.
kleiner Nachtrag: die mobile Version wurde mit Hilfe von der Tablet-UI Evaluierungsversion 2.2 verwirklicht.
Gruß Toni
Hallo Toni ... hätte auch Interesse. Danke!
Ich hätte da auch Interesse dran Toni.
Hauptsächlich in der Hoffnung, mein Verständnisproblem von hier (https://forum.fhem.de/index.php/topic,57569.msg491961.html#msg491961) vielleicht selbst zu lösen.
Vielen Dank schon mal!
Vielleicht sollte man es einfach an den Post hängen, dann werden die Threads nicht von Anfragen überfrachtet ...
Zitat von: waschbaerbauch am 19 September 2016, 12:30:46
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 (https://forum.fhem.de/index.php/topic,37378.msg491341.html#msg491341)
Bei Fragen, oder Verbesserungsvorschlägen schreibt einfach.
Gruß Toni
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..^^
Hallo Andy,
schöne Oberfläche.
Was mich interessieren würde ist, wie schaut deine CheckUpdatesAvailable Routine aus? 8)
Und wie rebootest du das Raspberry? Ist dein user fhem in der sudoers Gruppe oder hast du es anderweitig gelöst?
Grüße
Klaus
Sehr geil vielen dank schau ich mir gleich mal an - kann ich da auch nen dimmer integrieren und easy steuern ?
Zitat von: klausw am 23 September 2016, 14:39:57
Hallo Andy,
schöne Oberfläche.
Was mich interessieren würde ist, wie schaut deine CheckUpdatesAvailable Routine aus? 8)
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:
([UpdatesAvailable]) ({ updates() })
DOELSEIF ([08:00]) (set at_CheckUpdatesAvailable active)at:
+*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:
#######################################################################################
# #
# 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 ;D
für den Rasoberry restart habe ich ein dummy, notify und auf dem rPi eine Shell
notify:
rPi_Reboot:on {system ("sudo -u root /opt/fhem/FHEM/reboot.sh &")}Shell:
#!/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:
fhem ALL=(ALL) NOPASSWD:/opt/fhem/FHEM/reboot.shSomit hat fhem nur für diese Shell den Zugriff. Aber ehrlich gesagt kenn ich mich nicht soooooo gut mit Linux aus :-X :o
Zitat von: xsasx am 23 September 2016, 14:51:12
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:
fhem ALL=(ALL) NOPASSWD:/sbin/reboot
Hallo l-j-Silver, könntest du mir bitte auch deinen Code zur Verfügung stellen?
Hallo
Hat er doch schon. Im Post #452 hat er in verlinkt
Gruß Helmu
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.
<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.
<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)
<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
@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?
Zitat von: bjoernbo am 29 September 2016, 11:29:09
@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...
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 :D
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
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
Zitat von: TWART016 am 29 September 2016, 18:21:38
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
ne an der m_myStyle.css liegt das nicht. Aber woran das liegt weiß ich auch nicht. Evtl Caching Probleme? Ich häng mal die m_myStyle.css und meine index-dark.html an^^ vielleicht hilft das ja
Hilft leider auch nicht. Mich interessiert vor allem der Code mit dem Menü auf der linken Seite. Welcher Teil ist das in deinem Code?
Hast Du den Eintrag
Zitatlib/font-awesome.min.css" />
bei
Zitat<link rel="stylesheet" href="
eingetragen?
Zitat<link rel="stylesheet" href="/fhem/www/tablet/lib/font-awesome.min.css" />
!! Bei mir weichen die Pfade vom Standard ab!! Musst Du auf deiner Einrichtung entspr. anpassen oder schau mal in die Index_mobile.html von Andy89
guter Hinweis von Björn. Alle meine Pfade sind anders! Ich hab die Seiten auf meinem Server liegen und fhem ist auf einem anderem System. Du müsstest dir also die Verlinkungen in einer Standard-index von setstate mal anschauen ;)
Das meiste habe ich soweit hinbekommen. Ich benutze die fhem-mobil-ui-dark.css
Aktuell gibt es drei Probleme:
1) Das Icon wird dunkelgrau angezeigt, genau wie der Hintergrund. Das Icon hätte ich gerne in bg-lightgray.
2) Bei Küche werden die Umlaute nicht korrekt angezeigt.
3) Bei zwei Seiten werden die Texte aus der Navigation im unteren Textfeld angezeigt.
Edit: Welches Iconset verwendest du?
Zitat von: TWART016 am 01 Oktober 2016, 00:04:12
Aktuell gibt es drei Probleme:
1) Das Icon wird dunkelgrau angezeigt, genau wie der Hintergrund. Das Icon hätte ich gerne in bg-lightgray.
2) Bei Küche werden die Umlaute nicht korrekt angezeigt.
3) Bei zwei Seiten werden die Texte aus der Navigation im unteren Textfeld angezeigt.
Edit: Welches Iconset verwendest du?
1.) das kannst du selbst einstellen an dieser Stelle:
<header id="header-nav" class="bg-darkgray fixed row">
<div data-type="slideout" data-icon-color="#fff"
class="col-1-8 big center-align notouch"></div>hierzu einfach das data-icon-color anpassen
2.) das liegt daran, dass wahrscheinlich oben in der index was fehlt:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />3.) dazu fällt mir auf anhieb nichts ein...
edit-frage:
<link rel="stylesheet" href="/ftui/lib/font-awesome.min.css" />
<link rel="stylesheet" href="/ftui/lib/openautomation.css">
Zitat von: Andy89 am 01 Oktober 2016, 00:14:39
1.) das kannst du selbst einstellen an dieser Stelle: <header id="header-nav" class="bg-darkgray fixed row">
<div data-type="slideout" data-icon-color="#fff"
class="col-1-8 big center-align notouch"></div>
hierzu einfach das data-icon-color anpassen
Danke das wars ;)
Zitat von: Andy89 am 01 Oktober 2016, 00:14:39
2.) das liegt daran, dass wahrscheinlich oben in der index was fehlt:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
Habe ich eingetragen, trotzdem über noch das Fragezeichen-Symbol. In der Aufgerufenen html-Datei ist es jedoch richtig, nur in der Leiste links und oben nicht.
Zitat von: Andy89 am 01 Oktober 2016, 00:14:39
3.) dazu fällt mir auf anhieb nichts ein...
Keine Ahnung warum, aber mittlerweile ist es weg und nun richtig.
Zitat von: Andy89 am 01 Oktober 2016, 00:14:39
edit-frage:
<link rel="stylesheet" href="/ftui/lib/font-awesome.min.css" />
<link rel="stylesheet" href="/ftui/lib/openautomation.css">
Danke ;)
Zitat von: TWART016 am 01 Oktober 2016, 13:08:52
Habe ich eingetragen, trotzdem über noch das Fragezeichen-Symbol. In der Aufgerufenen html-Datei ist es jedoch richtig, nur in der Leiste links und oben nicht.
hmm.. ich würde vermuten, dass es noch am Cache liegt und so noch die Alt-Daten genutzt werden. ich habe noch folgende Zeilen oben in der index:
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta http-equiv="Cache-Control" content="no-store" />Und auf dem Laptop nutz ich meist den Web-Entwickler Modus im Firefox, da ich dort eingestellt habe, dass kein Cache genutzt werden soll.
Zitat von: Andy89 am 01 Oktober 2016, 15:42:40
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta http-equiv="Cache-Control" content="no-store" />
Die Zeilen hatte ich genauso drinnen. Auch no-store habe ich.
Fehlen ggf. Pakete für das Betriebssystem bzw. Webserver?
Ich hätte da auch mal ein Anliegen. Irgendwie will ich das mit den "col" nicht ganz verstehen. Vielleicht liegt auch hier dann mein Problem ;D
Ich hätte gerne unterhalb der Temperaturanzeige meine Tendency-Werte. Bekomme das aber nicht hin :-/
Zitat<header id="header-nav" class="bg-lightgray fixed row">
<div data-type="slideout" class="col-1-8 big center-align notouch"></div>
<div id="linkname" class="col-1-2 large bold center-align middle"></div>
<div data-type="symbol" data-device="AnzahlOffenerFenster"
data-get='Zaehler' data-off-color="grey"
data-get-on='["^[0]$","^[1-9][0-9]|[1-9]$"]'
data-icons='["ftui-window","ftui-window warn"]'
data-on-colors='["grey","blue"]' class="col-1-8 big center-align"></div>
<div data-type="label"
data-device="netatmo_M02:00:00:00:24:a2"
data-get="temperature"
data-limits="[-20,-15,-10,-5,0,5,10,15,20,25,30,35]"
data-colors='["#483D8B","#1874CD","#9AC0CD","#CAE1FF","#F5FFFA","#98FB98","#9ACD32","#FFA500","#FF4500","#FF3030","#EE2C2C","#8B1A1A"]'
data-unit="°C"
class="col-1-8"></div>
<!--
<div data-type="klimatrend"
data-device="netatmo_M02:00:00:00:24:a2"
data-get="statTemperatureTendency"
data-refperiod="6"
data-stagnating-color="rgb(80,80,80)"
data-icon="fa-angle"
data-rising-color="rgb(180,80,80)"
data-falling-color="rgb(80,80,180)"
data-highmark="1"
data-highmark-icon="fa-angle-double"
data-highmark-rising-color="rgb(255,80,80)"
data-highmark-falling-color="rgb(80,80,255)"
class="small inline"></div>
<div data-type="klimatrend"
data-device="netatmo_M02:00:00:00:24:a2"
data-get="statTemperatureTendency"
data-refperiod="3"
data-stagnating-color="rgb(80,80,80)"
data-icon="fa-angle"
data-rising-color="rgb(180,80,80)"
data-falling-color="rgb(80,80,180)"
data-highmark="1"
data-highmark-icon="fa-angle-double"
data-highmark-rising-color="rgb(255,80,80)"
data-highmark-falling-color="rgb(80,80,255)"
class="small inline"></div>
<div data-type="klimatrend"
data-device="netatmo_M02:00:00:00:24:a2"
data-get="statTemperatureTendency"
data-refperiod="2"
data-stagnating-color="rgb(80,80,80)"
data-icon="fa-angle"
data-rising-color="rgb(180,80,80)"
data-falling-color="rgb(80,80,180)"
data-highmark="1"
data-highmark-icon="fa-angle-double"
data-highmark-rising-color="rgb(255,80,80)"
data-highmark-falling-color="rgb(80,80,255)"
class="small inline"></div>
<div data-type="klimatrend"
data-device="netatmo_M02:00:00:00:24:a2"
data-get="statTemperatureTendency"
data-refperiod="1"
data-stagnating-color="rgb(80,80,80)"
data-icon="fa-angle"
data-rising-color="rgb(180,80,80)"
data-falling-color="rgb(80,80,180)"
data-highmark="1"
data-highmark-icon="fa-angle-double"
data-highmark-rising-color="rgb(255,80,80)"
data-highmark-falling-color="rgb(80,80,255)"
class="small inline"></div>-->
<div data-type="loading" data-icon="fa-spinner" data-color="blue"
data-effect="fa-blink" data-shade="true"
class="col-1-8 center-align big black"></div>
</header>
Die Tendency-Werte sind momentan auskommentiert. Kann mir jemand weiterhelfen ?
anbei ein erster Einblick/Ausblick auf meine Mobie-FTUI. Die gesamte Umsetzung inkl. Code folgt zum Wochenende.
Danke an dieser Stelle an Andy89 für die anfängliche Inspiration!
@bjoernbo
How did you configure the dark gray items, in the header?? with larn, co2 etc
regards richard
Zitat von: bjoernbo am 04 Oktober 2016, 19:47:10
Ich hätte da auch mal ein Anliegen. Irgendwie will ich das mit den "col" nicht ganz verstehen. Vielleicht liegt auch hier dann mein Problem ;D
Ich hätte gerne unterhalb der Temperaturanzeige meine Tendency-Werte. Bekomme das aber nicht hin :-/
Die Tendency-Werte sind momentan auskommentiert. Kann mir jemand weiterhelfen ?
Ich habe dir mal eine PN gesendet. Wenn es so passt, dann kannst du ja gerne den Code zur Verfügung stellen.
@kroonen
<html>
<head></head>
<body>
<div class="page" id="m_wohnzimmer">
<section style="background-color:#A4A4A4;">
<div class="small col-1 left-align">Lärm</div>
<div data-type="label"
data-device="NetatmoInnenSensor"
data-get="noise"
data-fix="0"
data-unit=" dB"
class="small col-2 left-align"></div>
<div class="small col-2 left-align">| Luftfeuchte</div>
<div data-type="label"
data-device="Wohnzimmer.Wandthermostat"
data-get="humidity"
data-fix="0"
data-unit="%"
class="small col-2 left-align"></div>
<div class="small col-3 left-align">| CO² Belastung</div>
<div data-type="label"
data-device="NetatmoInnenSensor"
data-get="co2"
data-fix="0"
data-unit=" ppm"
data-limits="[0, 600, 1000, 1180, 1800, 2250]"
data-colors='["green","yellowgreen","greenyellow","yellow","orange","red"]'
class="small col-3 left-align"></div>
<div class="small col-4 left-align">| Temperatur</div>
<div data-type="label"
data-device="Wohnzimmer.Wandthermostat"
data-get="measured-temp"
data-unit="°C"
class="small col-4 right-align"></div>
</section>
@bjoernbo: danke für die Idee und den Code. Hab ich direkt auch mal bei mir eingesetzt =)
Anbei ein weitere Ergänzung. Der Code ist unten beigefügt.
!DOCTYPE html>
<html>
<head></head>
<body>
<div class="page" id="m_wohnzimmer">
<section style="background-color:#A4A4A4;">
<div class="small col-1 left-align">Lärm</div>
<div data-type="label"
data-device="NetatmoInnenSensor"
data-get="noise"
data-fix="0"
data-unit=" dB"
class="small col-2 left-align"></div>
<div class="small col-2 left-align">| Luftfeuchte</div>
<div data-type="label"
data-device="Wohnzimmer.Wandthermostat"
data-get="humidity"
data-fix="0"
data-unit="%"
class="small col-2 left-align"></div>
<div class="small col-3 left-align">| CO² Belastung</div>
<div data-type="label"
data-device="NetatmoInnenSensor"
data-get="co2"
data-fix="0"
data-unit=" ppm"
data-limits="[0, 600, 1000, 1180, 1800, 2250]"
data-colors='["green","yellowgreen","greenyellow","yellow","orange","red"]'
class="small col-3 left-align"></div>
<div class="small col-4 left-align">| Temperatur</div>
<div data-type="label"
data-device="Wohnzimmer.Wandthermostat"
data-get="measured-temp"
data-unit="°C"
class="small col-4 right-align"></div>
</section>
<section>
<div class="large col-1-2 left-align">Terassentür</div>
<div class="big thin col-1-4 right-align"></div>
<div data-type="symbol"
data-device="Fensterkontakt.Wohnzimmer"
data-get-on='["geöffnet","geschlossen"]'
data-icons='["ftui-window warn","ftui-window"]'
data-on-colors='["#aa6900","#555"]'
class="big thin col-1-4 right-align"></div>
</section>
<section>
<div class="large col-1-2 left-align">Dimmer</div>
<div class="big thin col-1-4 right-align"></div>
<div data-type="switch" data-device="WZ_Dimmer" class="big thin col-1-4 right-align"></div>
<div class="large col-1-2 left-align">Stehlampe</div>
<div class="big thin col-1-4 right-align"></div>
<div data-type="switch" data-device="Stehlampe" class="big thin col-1-4 right-align"></div>
</section>
<section>
<div data-type="symbol" id="EPG"
data-icon="fa-indent"
data-background-icon="fa-circle-thin"
class="big thin col-1-4 right-align"></div>
<div data-type="popup" data-height="600px" data-width="350px"
data-mode="animate" data-starter="#EPG" class="col-1-6">
<div class="dialog">
<header>EPG</header>
<table border="0px">
<tr><th>Sender</th><th>Zeit</th><th>Titel</th><th>Next</th><th>Titel</th></tr>
<tr valign="top" bgcolor="#A4A4A4;">
<td rowspan="2" width="20%" align="top"><div data-type="image" class="cell" data-url="img/senderlogos/Das-Erste-HD.png" class="cell"></div></td>
<td rowspan="2" align="left" width="20%"><div data-type="label" data-device="mod_TV_Programme" data-get="ARD_time"></div></td>
<td rowspan="2" align="center"><div data-type="label" data-device="mod_TV_Programme" data-get="ARD"></div></td>
<td rowspan="2" align="left" width="20%"><div data-type="label" data-device="mod_TV_Programme" data-get="ARD_next_time"></div></td>
<td rowspan="2" align="center" width="50%"><div data-type="label" data-device="mod_TV_Programme" data-get="ARD_next"></div></td>
</tr>
<tr>
<td></td>
</tr>
<tr valign="top">
<td rowspan="2" width="20%" align="top"><div data-type="image" class="cell" data-url="img/senderlogos/ZDF-HD.png" class="cell"></div></td>
<td rowspan="2" align="left"><div data-type="label" data-device="mod_TV_Programme" data-get="ZDF_time"></div></td>
<td rowspan="2" align="center"><div data-type="label" data-device="mod_TV_Programme" data-get="ZDF"></div></td>
<td rowspan="2" align="left"><div data-type="label" data-device="mod_TV_Programme" data-get="ZDF_next_time"></div></td>
<td rowspan="2" align="center"><div data-type="label" data-device="mod_TV_Programme" data-get="ZDF_next"></div></td>
</tr>
<tr>
<td></td>
</tr>
<tr valign="top" bgcolor="#A4A4A4;">
<td rowspan="2" width="20%" align="top"><div data-type="image" class="cell" data-url="img/senderlogos/WDR-HD.png" class="cell"></div></td>
<td rowspan="2" align="left"><div data-type="label" data-device="mod_TV_Programme" data-get="WDR_time"></div></td>
<td rowspan="2" align="center"><div data-type="label" data-device="mod_TV_Programme" data-get="WDR"></div></td>
<td rowspan="2" align="left"><div data-type="label" data-device="mod_TV_Programme" data-get="WDR_next_time"></div></td>
<td rowspan="2" align="center"><div data-type="label" data-device="mod_TV_Programme" data-get="WDR_next"></div></td>
</tr>
<tr>
<td></td>
</tr>
<tr valign="top">
<td rowspan="2" width="20%" align="top"><div data-type="image" class="cell" data-url="img/senderlogos/RTL-HD.png" class="cell"></div></td>
<td rowspan="2" align="left"><div data-type="label" data-device="mod_TV_Programme" data-get="RTL_time"></div></td>
<td rowspan="2" align="center"><div data-type="label" data-device="mod_TV_Programme" data-get="RTL"></div></td>
<td rowspan="2" align="left"><div data-type="label" data-device="mod_TV_Programme" data-get="RTL_next_time"></div></td>
<td rowspan="2" align="center"><div data-type="label" data-device="mod_TV_Programme" data-get="RTL_next"></div></td>
</tr>
<tr>
<td></td>
</tr>
<tr valign="top" bgcolor="#A4A4A4;">
<td rowspan="2" width="20%" align="top"><div data-type="image" class="cell" data-url="img/senderlogos/Sat.1-HD.png" class="cell"></div></td>
<td rowspan="2" align="left"><div data-type="label" data-device="mod_TV_Programme" data-get="Sat1_time"></div></td>
<td rowspan="2" align="center"><div data-type="label" data-device="mod_TV_Programme" data-get="Sat1"></div></td>
<td rowspan="2" align="left"><div data-type="label" data-device="mod_TV_Programme" data-get="Sat1_next_time"></div></td>
<td rowspan="2" align="center"><div data-type="label" data-device="mod_TV_Programme" data-get="Sat1_next"></div></td>
</tr>
<tr>
<td></td>
</tr>
<tr valign="top">
<td rowspan="2" width="20%" align="top"><div data-type="image" class="cell" data-url="img/senderlogos/Pro7-HD.png" class="cell"></div></td>
<td rowspan="2" align="left"><div data-type="label" data-device="mod_TV_Programme" data-get="Pro7_time"></div></td>
<td rowspan="2" align="center"><div data-type="label" data-device="mod_TV_Programme" data-get="Pro7"></div></td>
<td rowspan="2" align="left"><div data-type="label" data-device="mod_TV_Programme" data-get="Pro7_next_time"></div></td>
<td rowspan="2" align="center"><div data-type="label" data-device="mod_TV_Programme" data-get="Pro7_next"></div></td>
</tr>
<tr>
<td></td>
</tr>
<tr valign="top" bgcolor="#A4A4A4;">
<td rowspan="2" width="20%" align="top"><div data-type="image" class="cell" data-url="img/senderlogos/VOX-HD.png" class="cell"></div></td>
<td rowspan="2" align="left"><div data-type="label" data-device="mod_TV_Programme" data-get="VOX_time"></div></td>
<td rowspan="2" align="center"><div data-type="label" data-device="mod_TV_Programme" data-get="VOX"></div></td>
<td rowspan="2" align="left"><div data-type="label" data-device="mod_TV_Programme" data-get="VOX_next_time"></div></td>
<td rowspan="2" align="center"><div data-type="label" data-device="mod_TV_Programme" data-get="VOX_next"></div></td>
</tr>
<tr>
<td></td>
</tr>
</table>
</div></div>
<div data-type="switch"
data-device="TV_Modus"
data-icon="fa-tv"
class="big thin col-2 right-align"></div>
<div data-type="switch"
data-device="AppleTV_Modus"
data-icon="fa-apple"
class="big thin col-3 right-align"></div>
<div data-type="switch"
data-device="XBMC_Modus"
data-icon="font1-kodi" class="big thin col-4 right-align"></div>
</section>
<section>
<div class="large col-1-4 left-align">Heizung</div>
<div data-type="label" data-device="Wohnzimmer.Wandthermostat"
data-get="measured-temp" data-limits='[-73,19,23]'
data-colors='["#6699FF","#aa6900","#ad3333"]' data-unit="°C"
class="col-1-4 right-align"></div>
<div class="col-1-2 center-align ">
<div data-type="spinner" data-device="Wohnzimmer.Wandthermostat"
data-get="desired-temp" data-set="desired-temp" data-unit="°C"
data-icon-left-color="blue" data-icon-right-color="red"
data-step="0.5"
data-min="4"
data-max="30"
data-off="off"
data-background-color="none"
class="valueonly center-align"></div>
</div>
</section>
<selection>
<div data-type="swiper" data-height="250px" auto-width="400px" class="top-space-1x" style="background-color:#838181;">
<ul>
<li> <div data-type="label" class="small">Favoriten</div>
<div class="container">
<table border="0px" align="center">
<tr>
<td><img src="img/senderlogos/Das-Erste-HD.png" height="60" wight="60" class="top-center" onclick="setFhemStatus('set hub command 24775848 Number8; set hub command 24775848 Number4')"></img>
</td>
<td><img src="img/senderlogos/ZDF-HD.png" height="60" wight="60" class="top-center" onclick="setFhemStatus('set hub command 24775848 Number8; set hub command 24775848 Number5')"></img></td>
<td><img src="img/senderlogos/WDR-HD.png" height="60" wight="60" class="top-center" onclick="setFhemStatus('set hub command 24775848 Number8; set hub command 24775848 Number6')"></img></td>
<td><img src="img/senderlogos/RTL-HD.png" height="60" wight="60" class="top-center" onclick="setFhemStatus('set hub command 24775848 Number8; set hub command 24775848 Number8')"></img></td>
<td><img src="img/senderlogos/Sat.1-HD.png" height="60" wight="60" class="top-center" onclick="setFhemStatus('set hub command 24775848 Number8; set hub command 24775848 Number9')"></img></td>
</tr>
<tr>
<td><img src="img/senderlogos/VOX-HD.png" height="60" wight="60" class="top-center" onclick="setFhemStatus('set hub command 24775848 Number8; set hub command 24775848 Number7')"></img></td>
<td><img src="img/senderlogos/Pro7-HD.png" height="60" wight="60" class="top-center" onclick="setFhemStatus('set hub command 24775848 Number9; set hub command 24775848 Number2')"></img></td>
<td><img src="img/senderlogos/kabel-eins-HD.png" height="60" wight="60" class="top-center" onclick="setFhemStatus('set hub command 24775848 Number9; set hub command 24775848 Number1')"></img></td>
<td><img src="img/senderlogos/RTL2-HD.png" height="60" wight="60" class="top-center" onclick="setFhemStatus('set hub command 24775848 Number90')"></img></td>
<td><img src="img/senderlogos/N24-HD.png" height="60" wight="60" class="top-center" onclick="setFhemStatus('set hub command 24775848 Number9; set hub command 24775848 Number4')"></img></td>
</tr>
</table>
</div>
</li>
<li>
<div data-type="label" class="small">Navigation</div>
<div class="container">
<table border="0px" align="center">
<tr>
<td><div id="" data-type="button" data-fhem-cmd="set hub command 24775848 Play" data-icon="fa-play" data-on-background-color="lightgray"class="cell small"></div></td>
<td><div id="" data-type="button" data-fhem-cmd="set hub command 24775848 VolumeUp" data-icon="fa-volume-up" data-on-background-color="lightgray"class="cell small"></div></td>
<td><div id="" data-type="button" data-fhem-cmd="set hub command 24775848 DirectionUp" data-icon="fa-angle-up" data-on-background-color="lightgray"class="cell small"></div></td>
<td><div id="" data-type="button" data-fhem-cmd="set hub command 24775848 ChannelUp" data-icon="fa-angle-double-up" data-on-background-color="lightgray" class="cell small"></div></td>
<td><div id="" data-type="button" data-fhem-cmd="set hub command 24775848 Pause" data-icon="fa-pause" data-on-background-color="lightgray"class="cell small"></div></td>
</tr>
<tr>
<td><div id="" data-type="button" data-fhem-cmd="set hub command 24775848 FastBackward" data-icon="fa-fast-backward" data-on-background-color="lightgray"class="cell small"></div></td>
<td><div id="" data-type="button" data-fhem-cmd="set hub command 24775848 DirectionLeft" data-icon="fa-angle-left" data-on-background-color="lightgray" class="cell small"></div></td>
<td><div id="" data-type="button" data-fhem-cmd="set hub command 24775848 Select" data-icon="fa-check" data-on-background-color="lightgray" class="cell small"></div></td>
<td><div id="" data-type="button" data-fhem-cmd="set hub command 24775848 DirectionRight" data-icon="fa-angle-right" data-on-background-color="lightgray" class="cell small"></div></td>
<td><div id="" data-type="button" data-fhem-cmd="set hub command 24775848 FastForward" data-icon="fa-fast-forward" data-on-background-color="lightgray"class="cell small"></div></td>
</tr>
<tr>
<td></td>
<td><div id="" data-type="button" data-fhem-cmd="set hub command 24775848 VolumeDown" data-icon="fa-volume-down" data-on-background-color="lightgray" class="cell small"></div></td>
<td><div id="" data-type="button" data-fhem-cmd="set hub command 24775848 DirectionDown" data-icon="fa-angle-down" data-on-background-color="lightgray" class="cell small"></div></td>
<td><div id="" data-type="button" data-fhem-cmd="set hub command 24775848 ChannelDown" data-icon="fa-angle-double-down" data-on-background-color="lightgray" class="cell small"></div></td>
<td></td>
</tr>
</table>
</div>
</li>
<li> <div data-type="label" class="small">SKY Bundesliga</div>
<div class="container">
<table border="0px" align="center">
<tr>
<td><img src="img/senderlogos/sky-bundesliga1HD.png" height="40" wight="40" class="top-center" onclick="setFhemStatus('set hub command 24775848 Number1; set hub command 24775848 Number7; set hub command 24775848 Number9')"></img>
</td>
<td><img src="img/senderlogos/sky-bundesliga2HD.png" height="40" wight="40" class="top-center" onclick="setFhemStatus('set hub command 24775848 Number1; set hub command 24775848 Number8; set hub command 24775848 Number0')"></img></td>
<td><img src="img/senderlogos/sky-bundesliga3HD.png" height="40" wight="40" class="top-center" onclick="setFhemStatus('set hub command 24775848 Number1; set hub command 24775848 Number8; set hub command 24775848 Number1')"></img></td>
<td><img src="img/senderlogos/sky-bundesliga4HD.png" height="40" wight="40" class="top-center" onclick="setFhemStatus('set hub command 24775848 Number1; set hub command 24775848 Number8; set hub command 24775848 Number2')"></img></td>
<td><img src="img/senderlogos/sky-bundesliga5HD.png" height="40" wight="40" class="top-center" onclick="setFhemStatus('set hub command 24775848 Number1; set hub command 24775848 Number8; set hub command 24775848 Number3')"></img></td>
</tr>
<tr>
<td><img src="img/senderlogos/sky-bundesliga6HD.png" height="40" wight="40" class="top-center" onclick="setFhemStatus('set hub command 24775848 Number1; set hub command 24775848 Number8; set hub command 24775848 Number4')"></img></td>
<td><img src="img/senderlogos/sky-bundesliga7HD.png" height="40" wight="40" class="top-center" onclick="setFhemStatus('set hub command 24775848 Number1; set hub command 24775848 Number8; set hub command 24775848 Number5')"></img></td>
<td><img src="img/senderlogos/sky-bundesliga8HD.png" height="40" wight="40" class="top-center" onclick="setFhemStatus('set hub command 24775848 Number1; set hub command 24775848 Number8; set hub command 24775848 Number6')"></img></td>
<td><img src="img/senderlogos/sky-bundesliga9HD.png" height="40" wight="40" class="top-center" onclick="setFhemStatus('set hub command 24775848 Number1'; set hub command 24775848 Number8; set hub command 24775848 Number7')"></img></td>
<td><img src="img/senderlogos/sky-bundesliga10HD.png" height="40" wight="40" class="top-center" onclick="setFhemStatus('set hub command 24775848 Number1; set hub command 24775848 Number8; set hub command 24775848 Number8')"></img></td>
</tr>
</table>
</div>
</li>
<li> <div data-type="label" class="small">SKY SPORT</div>
<div class="container">
<table border="0px" align="center">
<tr>
<td><img src="img/senderlogos/skysportNewsHD.png" height="40" wight="40" class="top-center" onclick="setFhemStatus('set hub command 24775848 Number1; set hub command 24775848 Number7; set hub command 24775848 Number8')"></img>
</td>
<td><img src="img/senderlogos/skysport1HD.png" height="40" wight="40" class="top-center" onclick="setFhemStatus('set hub command 24775848 Number1; set hub command 24775848 Number8; set hub command 24775848 Number9')"></img></td>
<td><img src="img/senderlogos/skysport2HD.png" height="40" wight="40" class="top-center" onclick="setFhemStatus('set hub command 24775848 Number1; set hub command 24775848 Number9; set hub command 24775848 Number0')"></img></td>
<td><img src="img/senderlogos/skysport3HD.png" height="40" wight="40" class="top-center" onclick="setFhemStatus('set hub command 24775848 Number1; set hub command 24775848 Number9; set hub command 24775848 Number1')"></img></td>
<td><img src="img/senderlogos/skysport4HD.png" height="40" wight="40" class="top-center" onclick="setFhemStatus('set hub command 24775848 Number1; set hub command 24775848 Number9; set hub command 24775848 Number2')"></img></td>
</tr>
<tr>
<td><img src="img/senderlogos/skysport5HD.png" height="40" wight="40" class="top-center" onclick="setFhemStatus('set hub command 24775848 Number1; set hub command 24775848 Number9; set hub command 24775848 Number3')"></img></td>
<td><img src="img/senderlogos/skysport6HD.png" height="40" wight="40" class="top-center" onclick="setFhemStatus('set hub command 24775848 Number1; set hub command 24775848 Number9; set hub command 24775848 Number4')"></img></td>
<td><img src="img/senderlogos/skysport7HD.png" height="40" wight="40" class="top-center" onclick="setFhemStatus('set hub command 24775848 Number1; set hub command 24775848 Number9; set hub command 24775848 Number5')"></img></td>
<td><img src="img/senderlogos/skysport8HD.png" height="40" wight="40" class="top-center" onclick="setFhemStatus('set hub command 24775848 Number1'; set hub command 24775848 Number9; set hub command 24775848 Number6')"></img></td>
<td><img src="img/senderlogos/skysport9HD.png" height="40" wight="40" class="top-center" onclick="setFhemStatus('set hub command 24775848 Number1; set hub command 24775848 Number9; set hub command 24775848 Number7')"></img></td>
</tr>
<tr>
<td><img src="img/senderlogos/skysport10HD.png" height="40" wight="40" class="top-center" onclick="setFhemStatus('set hub command 24775848 Number1; set hub command 24775848 Number9; set hub command 24775848 Number8')"></img></td>
<td><img src="img/senderlogos/skysport8HD.png" height="40" wight="40" class="top-center" onclick="setFhemStatus('set hub command 24775848 Number90')"></img></td>
<td><img src="img/senderlogos/skysport11HD.png" height="40" wight="40" class="top-center" onclick="setFhemStatus('set hub command 24775848 Number1; set hub command 24775848 Number9; set hub command 24775848 Number9')"></img></td>
</tr>
</table>
</div>
</li>
</ul>
</div>
</selection>
</div>
</body>
</html>
Hallo Gemeinde,
meine Frage ist folgende.
Im ersten Beitrag in diesem Tread wird auf die Userdemo im Github verwiesen.
Sind diese Demos z.b. von bjoernbo noch aktuell und kann man diese Vorlagen mit der neuen Tablet-UI verwenden ???
Ich frage deshalb weil diese Vorlagen im Githup schon älter als ein Jahr sind.
Gruß Werner
Hey Intruda,
wow, der erste Post ist ja schon etwas älter, aber JA. Ich habe seitdem nur Kleinigkeiten ergänzt oder ausgetauscht und es läuft noch alles wie am ersten Tag. Im Quellcode musste ich allerdings die ein oder andere Anpassung vornehmen. Zu beginn musst nicht alles mit data-.... versehen werden. Heute sieht es natürlich in den Widgets anders aus. Überall wird nun mit data-[blablub] "gearbeitet".
Gruß ER(6)na ;-)
Hallo Zusammen,
ich würde gerne bei dem ftui-mobil das Menü bei einem Tablet immer offen lassen und bei Iphone soll es automatisch sich einklappen.
Weiß jemand an welcher Stelle ich drehen muss?
Gruß
lewej
Genau das kann dieses Demo
https://github.com/knowthelist/fhem-tablet-ui/blob/master/examples/flexbox/index_flex_demo_menu.html
Auf einem Tablet: mit Menu immer ausgeklappt
Auf dem Telefon: Menü eingeklappt und ausfahrbar
Green Schema: <link rel="stylesheet" href="css/ftui-bright-mint-ui.css" />
Blue Schema: <link rel="stylesheet" href="css/fhem-mobil-ui.css" />
Zitat von: setstate am 20 Oktober 2016, 21:10:00
Genau das kann dieses Demo
https://github.com/knowthelist/fhem-tablet-ui/blob/master/examples/flexbox/index_flex_demo_menu.html
Auf einem Tablet: mit Menu immer ausgeklappt
Auf dem Telefon: Menü eingeklappt und ausfahrbar
Green Schema: <link rel="stylesheet" href="css/ftui-bright-mint-ui.css" />
Blue Schema: <link rel="stylesheet" href="css/fhem-mobil-ui.css" />
Hi,
danke habs gefunden und auf dem Tablet in Vertikal sieht es Super aus. Mit einem Iphone 5S und Ipad AIR in Hochkant klappt sich das Menü weg, aber es dann auch keins mehr zum aufrufen da.
Jemand eine Idee?
Gruss
lewej
Immer noch work in progress, ich spiele grade als Laie noch etwas mit den Material Design Guidlines rum. Ausserdem will ich die Graphen von Grafana mehr nutzen, hab davon bereits eine Seite vorbereitet um die Infrastruktur Graphen darzustellen.
Zitat von: lewej am 20 Oktober 2016, 22:07:03
Hi,
danke habs gefunden und auf dem Tablet in Vertikal sieht es Super aus. Mit einem Iphone 5S und Ipad AIR in Hochkant klappt sich das Menü weg, aber es dann auch keins mehr zum aufrufen da.
Jemand eine Idee?
Gruss
lewej
In der CSS fehlt noch ein !important;
Das hatte ich vorhin noch schnell gefixed.
Also, noch ein Update holen, dann klappt es.
Zitat von: hillbicks am 21 Oktober 2016, 00:05:39
Immer noch work in progress, ich spiele grade als Laie noch etwas mit den Material Design Guidlines rum. Ausserdem will ich die Graphen von Grafana mehr nutzen, hab davon bereits eine Seite vorbereitet um die Infrastruktur Graphen darzustellen.
Hi,
Die ui sieht super aus, könntest du deine config anhängen?
Gruss
Lewej
wie hast Du Grafana eingebunden?
Zitat von: hillbicks am 21 Oktober 2016, 00:05:39
Immer noch work in progress, ich spiele grade als Laie noch etwas mit den Material Design Guidlines rum. Ausserdem will ich die Graphen von Grafana mehr nutzen, hab davon bereits eine Seite vorbereitet um die Infrastruktur Graphen darzustellen.
Hallo,
kannst du für deinen jetzigen Stand schon mal das coding bereitstellen.
Das wäre bestimmt für viele hier sehr interessant.
Danke
Jörg
Inspiriert von der Community in diesem Sub-Forum und als begeisterter FAN von der FHEM/Tablet-UI Kombination habe ich dieses Frontend-Framework schon seit vielen Monaten zur vollsten Zufriedenheit im Einsatz. Stellte mich anfangs die klassischen Farbkombinationsansätze der bestehenden, bereitgestellten User-Demos (schwarz/orange) noch zufrieden, habe ich mich irgendwann mal daran satt gesehen. Was Neues musste her.
Völlig begeistert hat mich der HEIMA-Ansatz welcher stark meine Vorstellung eines Visualierungs-Designs entsprochen hat, nur wie umsetzen mit zwei linken HTML/CSS Händen.
So habe ich mich dran gemacht, mit der Umsetzung zu beginnen (glücklicherweise verfolgten einige Foren-Mitglieder einen ähnlichen Ansatz, so konnte ich mich da auch am Code bedienen, danke hierfür). Ziel war es, etwas HEIMA ähnliches aufzubauen, was einen hohen WAF-Faktor haben muss und in die Stilrichtung "Apple" geht.
Das Ergebnis möchte ich Euch heute präsentieren (bitte zerreisst es nicht in der Luft, wie gesagt, ich habe meine Stärken in anderen Bereichen der IT, HTML/CSS gehört nicht dazu).
Kurz zu meinem Setup:
- MacMini mit esxI und einer virtualisierten Debian Instanz auf der FHEM läuft
- auf der gleichen Instanz läuft noch Zoneminder zur Anbindung meiner Kameras (aufgrund der Vielzahl von Endgeräten musste ich diese Zwischeninstanz einbinden, da die Direktzugriffe auf die Kameras zur Visualisierung negativen Einfluss hatten, so habe ich nur ZM für den Zugriff auf die Kameras, und die iPads bedienen sich dann bei ZM)
- Sonos 1 in allen relevanten Zimmern
- HomeMatic-Heizkörperthermostate
- HomeMatic-Fenstersensoren
- HomeMatic-LAN-Adapter
- Temperatur/Luffeuchte Sensoren über Jeelink
- PCA301 Strommesser und Schalter über Jeelink
- FritzBox angebunden
- 6 iPads (ältere Generation (3/4) über eBay geschossen) in den Zimmern an der Wand oder auf den Nachttischen verteilt
Noch offene Punkte die ich angehen möchte:
- Info-Fenster im oberen Teil für Statusnachrichten (Anruf, sonstige Warnmeldungen, Fenster offen, etc.)
- Einstellungen Seite
- Einbindung von personifizierten Seiten für die Kinder (Stundenplan der Schule, Vertretungsplan der Schule, Kalender vom OSX-Server, etc.)
Wenn Interesse besteht kann ich gerne den bisherigen Code posten, wer an der Weiterentwicklung mitarbeiten möchte, ich würde mich riesig freuen.
Viele Grüße,
Alex
Zitat von: arosswog am 21 Oktober 2016, 13:30:47
Wenn Interesse besteht kann ich gerne den bisherigen Code posten, wer an der Weiterentwicklung mitarbeiten möchte, ich würde mich riesig freuen.
Erst mal "Respekt" sieht gut aus!
Mich würde die Kalenderimplementierung interessieren.
Grafana ist direkt per iframe eingebunden, das laedt aber noch nicht immer zuverlaessig, warum weiss ich noch nicht.
<iframe src="http://172.16.39.10/grafana/dashboard-solo/db/schocklel-net?theme=light&panelId=1" width="450" height="200" frameborder="0"></iframe>
Im Anhang findet ihr die momentane Config, wie gesagt, noch Kraut und Rueben teilweise, einiges funktioniert noch nicht, bzw. falsch. Aber da ihr danach gefragt habt, sollt ihr es auch haben :)
Zitat von: arosswog am 21 Oktober 2016, 13:30:47
Wenn Interesse besteht kann ich gerne den bisherigen Code posten, wer an der Weiterentwicklung mitarbeiten möchte, ich würde mich riesig freuen.
Hallo Alex,
das sieht richtig gut aus, ich hätte Interesse am Code...
VG Sven
Danke schön; Code-Paket hängt an meinem initialen Post; bei Fragen hierzu bitte einfach kurz melden.
Zitat von: setstate am 21 Oktober 2016, 03:22:10
In der CSS fehlt noch ein !important;
Das hatte ich vorhin noch schnell gefixed.
Also, noch ein Update holen, dann klappt es.
Hi,
das Menü klappt sich jetzt ein, nur es zerreist das Menü etwas. Auf dem Ipad Air in Hoch klappt es nicht.
Zitat von: arosswog am 21 Oktober 2016, 13:30:47
Inspiriert von der Community in diesem Sub-Forum und als begeisterter FAN von der FHEM/Tablet-UI Kombination habe ich dieses Frontend-Framework schon seit vielen Monaten zur vollsten Zufriedenheit im Einsatz. Stellte mich anfangs die klassischen Farbkombinationsansätze der bestehenden, bereitgestellten User-Demos (schwarz/orange) noch zufrieden, habe ich mich irgendwann mal daran satt gesehen. Was Neues musste her.
Völlig begeistert hat mich der HEIMA-Ansatz welcher stark meine Vorstellung eines Visualierungs-Designs entsprochen hat, nur wie umsetzen mit zwei linken HTML/CSS Händen.
So habe ich mich dran gemacht, mit der Umsetzung zu beginnen (glücklicherweise verfolgten einige Foren-Mitglieder einen ähnlichen Ansatz, so konnte ich mich da auch am Code bedienen, danke hierfür). Ziel war es, etwas HEIMA ähnliches aufzubauen, was einen hohen WAF-Faktor haben muss und in die Stilrichtung "Apple" geht.
Das Ergebnis möchte ich Euch heute präsentieren (bitte zerreisst es nicht in der Luft, wie gesagt, ich habe meine Stärken in anderen Bereichen der IT, HTML/CSS gehört nicht dazu).
Kurz zu meinem Setup:
- MacMini mit esxI und einer virtualisierten Debian Instanz auf der FHEM läuft
- auf der gleichen Instanz läuft noch Zoneminder zur Anbindung meiner Kameras (aufgrund der Vielzahl von Endgeräten musste ich diese Zwischeninstanz einbinden, da die Direktzugriffe auf die Kameras zur Visualisierung negativen Einfluss hatten, so habe ich nur ZM für den Zugriff auf die Kameras, und die iPads bedienen sich dann bei ZM)
- Sonos 1 in allen relevanten Zimmern
- HomeMatic-Heizkörperthermostate
- HomeMatic-Fenstersensoren
- HomeMatic-LAN-Adapter
- Temperatur/Luffeuchte Sensoren über Jeelink
- PCA301 Strommesser und Schalter über Jeelink
- FritzBox angebunden
- 6 iPads (ältere Generation (3/4) über eBay geschossen) in den Zimmern an der Wand oder auf den Nachttischen verteilt
Noch offene Punkte die ich angehen möchte:
- Info-Fenster im oberen Teil für Statusnachrichten (Anruf, sonstige Warnmeldungen, Fenster offen, etc.)
- Einstellungen Seite
- Einbindung von personifizierten Seiten für die Kinder (Stundenplan der Schule, Vertretungsplan der Schule, Kalender vom OSX-Server, etc.)
Wenn Interesse besteht kann ich gerne den bisherigen Code posten, wer an der Weiterentwicklung mitarbeiten möchte, ich würde mich riesig freuen.
Viele Grüße,
Alex
Hallo Alex,
könntest du noch deine CSS anhängen?
Grüße
lewej
Hallo,
ab einer bestimmten Pixelbreite werden die Icons weiter rechts angezeigt. Wie kann dies deaktivert werden bzw. vereinheitlicht?
Wie kann die Formatierung besser wie mit <div class="left"> durchgeführt werden?
<header id="header-nav" class="bg-darkgray fixed row">
<div class="left">
<div data-type="slideout" class="col-1-2 big notouch" data-icon-color="white"></div>
<div id="linkname" class="col-1-2 big bold middle"></div>
</div>
</header>
<main id="panel" class="">
<div class="page" id="m_Dashboard"></div>
<div class="page" id="m_Wohnzimmer"></div>
<div class="page" id="m_Schlafzimmer"></div>
<div class="page" id="m_Hobbyzimmer"></div>
<div class="page" id="m_Kueche"></div>
<div class="page" id="m_Wetter"></div>
<div class="page" id="m_Einstellungen"></div>
</main>Gruß
TWART016
Zitat von: hillbicks am 21 Oktober 2016, 00:05:39
Immer noch work in progress, ich spiele grade als Laie noch etwas mit den Material Design Guidlines rum. Ausserdem will ich die Graphen von Grafana mehr nutzen, hab davon bereits eine Seite vorbereitet um die Infrastruktur Graphen darzustellen.
Wie bindest du die Graphana Grafiken ein? Einfach per Frame oder als Bild oder wie?
Zitat von: afloria am 28 Oktober 2016, 00:02:47
Wie bindest du die Graphana Grafiken ein? Einfach per Frame oder als Bild oder wie?
Habe sie als Iframe eingebunden, da ich allerdings nachwievor Probleme mit dem iframe widget habe (No 'Access-Control-Allow-Origin' header is present) habe ich es "direkt" per iframe gemacht.
Das hat allerdings den Nachteil das ich die grafana Unterseite direkt laden muss also indexz.html#wz_grafana.html, ansonsten sind die Graphen leer. Hab es jetzt im Moment so geloest und scheint zu funktionieren.
<li data-row="2" data-col="1" data-sizex="8" data-sizey="2">
<br>
<div class"top-space" data-refresh="60">
<iframe src="http://172.16.39.10/grafana/dashboard-solo/db/schocklel-net?editorTab=General&panelId=17&theme=light" width="450" height="200" frameborder="0"></iframe>
<iframe src="http://172.16.39.10/grafana/dashboard-solo/db/schocklel-net?theme=light&panelId=2&editorTab=General" width="450" height="200" frameborder="0"></iframe>
</div>
</li>
Servus,
heute hab ich mal viel Zeit investiert und meine mobile Seite noch einmal angepasst und die Idee von Björn(https://forum.fhem.de/index.php/topic,37378.msg499559.html#msg499559 (https://forum.fhem.de/index.php/topic,37378.msg499559.html#msg499559)) eingebaut. Habe nun statt drei verschiedenen Seiten(Fenster, Temperatur, Heizung) eine einzige Seite. Das Menü habe ich auch minimal angepasst, um für 4 Symbole die Warn-Zahlen zu sehen.
im Anhang hab ich die Arbeit mal angehängt =)
Beste Grüße und schönes Weekend
Andy
Zitat von: hillbicks am 28 Oktober 2016, 09:06:52
Habe sie als Iframe eingebunden, da ich allerdings nachwievor Probleme mit dem iframe widget habe (No 'Access-Control-Allow-Origin' header is present) habe ich es "direkt" per iframe gemacht.
Das hat allerdings den Nachteil das ich die grafana Unterseite direkt laden muss also indexz.html#wz_grafana.html, ansonsten sind die Graphen leer. Hab es jetzt im Moment so geloest und scheint zu funktionieren.
<li data-row="2" data-col="1" data-sizex="8" data-sizey="2">
<br>
<div class"top-space" data-refresh="60">
<iframe src="http://172.16.39.10/grafana/dashboard-solo/db/schocklel-net?editorTab=General&panelId=17&theme=light" width="450" height="200" frameborder="0"></iframe>
<iframe src="http://172.16.39.10/grafana/dashboard-solo/db/schocklel-net?theme=light&panelId=2&editorTab=General" width="450" height="200" frameborder="0"></iframe>
</div>
</li>
Warum keine Datenbank wie pgSQL und dann das Grafik Widget?
Hier mal mein aktueller stand.
Da ist noch was zu tun...
Zitat von: Masterfunk am 13 November 2016, 22:43:13
Hier mal mein aktueller stand.
Da ist noch was zu tun...
Respekt !!!!!!!
Gesendet von meinem SM-T800 mit Tapatalk
@Masterfunk: könntest du die Dateien zu deiner Sonos/Media-Seite zur Verfügung stellen - die ist das Beste, das ich dazu je gesehen habe!
Gerne.
Sind aber einige Dinge auf fhem Seite nötig.
Werde mal alles zusammen suchen und es dann posten.
Hier schon mal die html Seite.
Gruß Detlef
Hier noch ein List vom Device (Kueche).
Internals:
DEF RINCON_000E58F171D401400_MR
NAME Sonos_Kueche
NR 385
NTFY_ORDER 50-Sonos_Kueche
STATE appeared
TYPE SONOSPLAYER
UDN RINCON_000E58F171D401400_MR
Readings:
2016-11-13 18:01:38 AlarmList {}
2016-11-13 18:01:38 AlarmListIDs
2016-11-13 18:01:38 AlarmListVersion RINCON_000E58A9E70A01400:32
2016-10-24 21:26:52 AlarmRunning 0
2016-10-24 21:26:52 AlarmRunningID
2016-10-24 21:26:49 Balance 0
2016-10-24 21:26:55 Bass 0
2016-10-24 21:26:52 CrossfadeMode 0
2016-10-24 21:26:55 DailyIndexRefreshTime 02:00:00
2016-11-05 17:10:39 FavTabletUI A Night In Monte-Carlo:Afrodeezia:Avishai Cohen - At Home:Between The Sheets:Blackmagic:Dein Mix der Woche:Dein Mix der Woche Andrea:Everything Must Go:Funk This:Ganz Schön:Lazy Afternoon:M2 [Limited Edition]:Renaissance:The Best Of:The Best Of Fourplay:The Song Remains The Same:Then And Now:Unlimited:Wojtek Pilichowski - Wojtek Pilichowski:Yesterday I Had The Blues - The Music Of Billie Holiday
2016-11-05 17:10:24 Favourites {'FV:2/122' => {'Title' => 'Yesterday I Had The Blues - The Music Of Billie Holiday','Cover' => '/fhem/sonos/proxy/aa?url=https%3A%2F%2Fd3rt1990lpmkn.cloudfront.net%2Foriginal%2Ffe28573e73d5afd5f50e03a850e1d3e6fc169ab8'},'FV:2/128' => {'Title' => 'Ganz Schön','Cover' => '/fhem/sonos/proxy/aa?url=https%3A%2F%2Fd3rt1990lpmkn.cloudfront.net%2F300%2Fec1d6c956767eb9515583963865beb314f6bdf8639ec2393b4d778d978e3e617af06c89e3e6b09f512a0b4ac00f7920fbe598437efa4d0d656b53eb521eadd1da43020f484d6aea61321999b64ca0fc8'},'FV:2/142' => {'Title' => 'A Night In Monte-Carlo','Cover' => '/fhem/sonos/proxy/aa?url=http%3A%2F%2F192.168.10.150%3A1400%2Fgetaa%3Fu%3Dx-file-cifs%253a%252f%252fDS%252fMusik%252fMusik%252fMarcus%2520Miller%252fA%2520Night%2520In%2520Monte-Carlo%252f01%2520-%2520Marcus%2520Miller%2520-%2520Blast%21.mp3%26amp%3Bv%3D141'},'FV:2/131' => {'Title' => 'Dein Mix der Woche','Cover' => '/fhem/sonos/proxy/aa?url=https%3A%2F%2Fd3rt1990lpmkn.cloudfront.net%2F300%2Fd2c8bb1d43df19d7e36fe344783221a81ebee789'},'FV:2/121' => {'Title' => 'Afrodeezia','Cover' => '/fhem/sonos/proxy/aa?url=http%3A%2F%2F192.168.10.150%3A1400%2Fgetaa%3Fu%3Dx-file-cifs%253a%252f%252fDS%252fMusik%252fMusik%252fMarcus%2520Miller%252fAfrodeezia%252f01.%2520Hylife.mp3%26amp%3Bv%3D141'},'FV:2/114' => {'Title' => 'Between The Sheets','Cover' => '/fhem/sonos/proxy/aa?url=https%3A%2F%2Fd3rt1990lpmkn.cloudfront.net%2Foriginal%2F0b9380d48cbc52ef5fcac9f6b3274ad1fc5cfa72'},'FV:2/110' => {'Title' => 'Unlimited','Cover' => '/fhem/sonos/proxy/aa?url=https%3A%2F%2Fd3rt1990lpmkn.cloudfront.net%2Foriginal%2F8f8526d7460565e067b0a7fb0dad2b794224910b'},'FV:2/112' => {'Title' => 'Then And Now','Cover' => '/fhem/sonos/proxy/aa?url=https%3A%2F%2Fd3rt1990lpmkn.cloudfront.net%2Foriginal%2F7a9c87b82e3ab6aae2b783b5472d9f2c9665d10a'},'FV:2/120' => {'Title' => 'Renaissance','Cover' => '/fhem/sonos/proxy/aa?url=http%3A%2F%2F192.168.10.150%3A1400%2Fgetaa%3Fu%3Dx-file-cifs%253a%252f%252fDS%252fMusik%252fMusik%252fMarcus%2520Miller%252fRenaissance%252f01%2520-%2520Marcus%2520Miller%2520-%2520Detroit.mp3%26amp%3Bv%3D141'},'FV:2/132' => {'Title' => 'The Best Of Fourplay','Cover' => '/fhem/sonos/proxy/aa?url=https%3A%2F%2Fd3rt1990lpmkn.cloudfront.net%2Foriginal%2F29381a54fdce0d7f2a83c705493e60353ff579af'},'FV:2/108' => {'Title' => 'Lazy Afternoon','Cover' => '/fhem/sonos/proxy/aa?url=https%3A%2F%2Fd3rt1990lpmkn.cloudfront.net%2Foriginal%2Fdee3a10f03c00f24e77acf281e49a42658e3ca34'},'FV:2/123' => {'Title' => 'Blackmagic','Cover' => '/fhem/sonos/proxy/aa?url=https%3A%2F%2Fd3rt1990lpmkn.cloudfront.net%2Foriginal%2Fd5a214304532b4b62ec53cc321e4a4d23f58a811'},'FV:2/137' => {'Title' => 'Dein Mix der Woche Andrea','Cover' => '/fhem/sonos/proxy/aa?url=https%3A%2F%2Fd3rt1990lpmkn.cloudfront.net%2F300%2Fb41a8e1e39dd31e2ee43d04b609dddd90691b954'},'FV:2/138' => {'Title' => 'Everything Must Go','Cover' => '/fhem/sonos/proxy/aa?url=https%3A%2F%2Fd3rt1990lpmkn.cloudfront.net%2Foriginal%2F3b460a9ebda358229acf6f67b23040313a606dcb'},'FV:2/107' => {'Title' => 'M2 [Limited Edition]','Cover' => '/fhem/sonos/proxy/aa?url=http%3A%2F%2F192.168.10.150%3A1400%2Fgetaa%3Fu%3Dx-file-cifs%253a%252f%252fDS%252fMusik%252fMusik%252fMarcus%2520Miller%252fM%25c2%25b2%2520%255bLimited%2520Edition%255d%252fMarcus%2520Miller%2520-%2520Power.mp3%26amp%3Bv%3D141'},'FV:2/143' => {'Title' => 'Avishai Cohen - At Home','Cover' => '/fhem/sonos/proxy/aa?url=http%3A%2F%2F192.168.10.150%3A1400%2Fgetaa%3Fu%3Dx-file-cifs%253a%252f%252fDS%252fMusik%252fMusik%252fAvishai%2520Cohen%252fAt%2520Home%252f01%2520Feediop.mp3%26amp%3Bv%3D141'},'FV:2/109' => {'Title' => 'Funk This','Cover' => '/fhem/sonos/proxy/aa?url=https%3A%2F%2Fd3rt1990lpmkn.cloudfront.net%2Foriginal%2F892e329f0877a9536935c81f70206d8a77a8c6f4'},'FV:2/113' => {'Title' => 'The Best Of','Cover' => '/fhem/sonos/proxy/aa?url=https%3A%2F%2Fd3rt1990lpmkn.cloudfront.net%2Foriginal%2Fe37453904ae1a7e3e92f7222e0a9fdd285052db9'},'FV:2/115' => {'Title' => 'The Song Remains The Same','Cover' => '/fhem/sonos/proxy/aa?url=https%3A%2F%2Fd3rt1990lpmkn.cloudfront.net%2Foriginal%2F5cbc901e77a03044834c96c81711a1c83a656a8a'},'FV:2/130' => {'Title' => 'Wojtek Pilichowski - Wojtek Pilichowski','Cover' => '/fhem/sonos/proxy/aa?url=https%3A%2F%2Fd3rt1990lpmkn.cloudfront.net%2F300%2F7b4a97c436e55771195c139d69d0e1a7653985b6'}}
2016-11-05 17:09:59 FavouritesVersion RINCON_000E58F171D401400,269
2016-11-13 22:58:38 GroupMute 0
2016-11-13 22:58:16 GroupVolume 17
2016-10-24 21:26:52 HeadphoneConnected 0
2016-10-24 21:26:49 IsMaster 1
2016-11-13 22:58:38 LastActionResult SetGroupMute: off
2016-10-24 21:26:55 Loudness 1
2016-10-24 21:26:49 MasterPlayer Sonos_Kueche
2016-11-13 22:58:38 Mute 0
2016-10-24 21:26:55 OutputFixed 0
2016-11-05 17:10:40 PlayTabletUI Amy:Benson:Best ever:Bluey:Chaka:Chic def. Groove:Feliz:Fourplay:Funky Jazz:George Duke:Grace Jones:Hdw:Jazz Instruments:KU_TMP:Light of the World:Liquid Spirit:Lizzy:MDW_KW1_2016:Maiden:Mark Ronson:Mdw5:My Favorite:Nicole Henry:Night:Omar:Paul Hardcastle:Pilichowski:Prince:Propellorheads:Rag Doll:Save_BZ:Save_KU:Save_SZ:Save_WZ:Shakatak:Smooth:Snarky Puppy2:Snarky puppy:Starred:Sunday:The Who
2016-11-05 17:10:39 Playlists {'SQ:57' => {'Title' => 'My Favorite','Cover' => '/fhem/sonos/proxy/aa?url=https%3A%2F%2Fi.scdn.co%2Fimage%2F65e2d740808d52eafe188e38a31897e696e27b9d'},'SQ:53' => {'Title' => 'Chic def. Groove','Cover' => '/fhem/sonos/proxy/aa?url=https%3A%2F%2Fi.scdn.co%2Fimage%2F9847a36d46e0bd2a458603c5a52eb13784494ee8'},'SQ:58' => {'Title' => 'Funky Jazz','Cover' => '/fhem/sonos/proxy/aa?url=https%3A%2F%2Fi.scdn.co%2Fimage%2Fbdad34f6dcb494b787b62847b09ee8e99c610b32'},'SQ:5' => {'Title' => 'Smooth','Cover' => '/fhem/sonos/proxy/aa?url=http%3A%2F%2F192.168.10.150%3A1400%2Fgetaa%3Fu%3Dx-file-cifs%253a%252f%252fDS%252fMusik%252fMusik%252fThe%2520Rebirth%252fThe%2520Rebirth%2520-%2520This%2520Journey%2520in.mp3%26amp%3Bv%3D141'},'SQ:24' => {'Title' => 'The Who','Cover' => '/fhem/sonos/proxy/aa?url=https%3A%2F%2Fi.scdn.co%2Fimage%2Fbf871cbcd36c843b8423344d7c3494851700c553'},'SQ:47' => {'Title' => 'Fourplay','Cover' => '/fhem/sonos/proxy/aa?url=https%3A%2F%2Fi.scdn.co%2Fimage%2Fe4b5fc033b2d0489902a583d95956d86163c0df0'},'SQ:11' => {'Title' => 'George Duke','Cover' => '/fhem/sonos/proxy/aa?url=https%3A%2F%2Fi.scdn.co%2Fimage%2Fcebcb5a362039c2815c64efb84fe4489f75907d7'},'SQ:9' => {'Title' => 'Best ever','Cover' => '/fhem/sonos/proxy/aa?url=https%3A%2F%2Fi.scdn.co%2Fimage%2F4601f6f1e000040b2d357a4581a34484e6e2ced7'},'SQ:126' => {'Title' => 'Save_WZ','Cover' => '/fhem/sonos/proxy/aa?url=https%3A%2F%2Fi.scdn.co%2Fimage%2Ffcf49eb21c0f90e6c48456f5b659f1f71356942f'},'SQ:12' => {'Title' => 'Sunday','Cover' => '/fhem/sonos/proxy/aa?url=https%3A%2F%2Fi.scdn.co%2Fimage%2F690e804668b65fe0e6a6ad77fc7aa0c5042aec87'},'SQ:43' => {'Title' => 'Liquid Spirit','Cover' => '/fhem/sonos/proxy/aa?url=https%3A%2F%2Fi.scdn.co%2Fimage%2F232c3d48bec320e7d6850b4c34462eba39e3f494'},'SQ:128' => {'Title' => 'Jazz Instruments','Cover' => '/fhem/sonos/proxy/aa?url=http%3A%2F%2F192.168.10.150%3A1400%2Fgetaa%3Fu%3Dx-file-cifs%253a%252f%252fDS%252fMusik%252fMusik%252fVarious%2520Artists%252fJazz%2520Instruments%2520%255bDisc%25201%255d%252f1-01%2520Royal%2520Garden%2520Blues.mp3%26amp%3Bv%3D141'},'SQ:74' => {'Title' => 'Mdw5','Cover' => '/fhem/sonos/proxy/aa?url=https%3A%2F%2Fi.scdn.co%2Fimage%2F606e9024988661e33632d8d8a06f5a1ac9f49c28'},'SQ:127' => {'Title' => 'Save_BZ','Cover' => '/fhem/sonos/proxy/aa?url=http%3A%2F%2F192.168.10.150%3A1400%2Fgetaa%3Fu%3Dx-file-cifs%253a%252f%252fDS%252fMusik%252fMusik%252fMarcus%2520Miller%252fA%2520Night%2520In%2520Monte-Carlo%252f01%2520-%2520Marcus%2520Miller%2520-%2520Blast%21.mp3%26amp%3Bv%3D141'},'SQ:50' => {'Title' => 'Benson','Cover' => '/fhem/sonos/proxy/aa?url=https%3A%2F%2Fi.scdn.co%2Fimage%2Ff1e1f17542a0789a84e374d5db5fc25ca161916f'},'SQ:64' => {'Title' => 'Light of the World','Cover' => '/fhem/sonos/proxy/aa?url=http%3A%2F%2F192.168.10.150%3A1400%2Fgetaa%3Fu%3Dx-file-cifs%253a%252f%252fDS%252fMusik%252fMusik%252fLight%2520Of%2520The%2520World%252fAnthology%2520Addicted%2520to%2520Funk%2520-%2520CD1%252f01.%2520Swingin%26apos%3B.mp3%26amp%3Bv%3D141'},'SQ:125' => {'Title' => 'Save_SZ','Cover' => '/fhem/sonos/proxy/aa?url=https%3A%2F%2Fi.scdn.co%2Fimage%2Fec1d6c956767eb9515583963865beb314f6bdf86'},'SQ:45' => {'Title' => 'Omar','Cover' => '/fhem/sonos/proxy/aa?url=https%3A%2F%2Fi.scdn.co%2Fimage%2F5792f7705f9ed18e819fed3ff632c92800ddb752'},'SQ:21' => {'Title' => 'Mark Ronson','Cover' => '/fhem/sonos/proxy/aa?url=https%3A%2F%2Fi.scdn.co%2Fimage%2F77469465db1f618941285359fc3596601859566b'},'SQ:72' => {'Title' => 'Snarky Puppy2','Cover' => '/fhem/sonos/proxy/aa?url=https%3A%2F%2Fi.scdn.co%2Fimage%2Ffe002691f028aab0f1971d97e74000a079e15690'},'SQ:71' => {'Title' => 'Shakatak','Cover' => '/fhem/sonos/proxy/aa?url=https%3A%2F%2Fi.scdn.co%2Fimage%2F715119e4cdcc70f23e670743423096d4823a91ff'},'SQ:77' => {'Title' => 'MDW_KW1_2016','Cover' => '/fhem/sonos/proxy/aa?url=https%3A%2F%2Fi.scdn.co%2Fimage%2Ffeaaed5bb7772570e708dd0967a8980b02158548'},'SQ:60' => {'Title' => 'Propellorheads','Cover' => '/fhem/sonos/proxy/aa?url=https%3A%2F%2Fi.scdn.co%2Fimage%2F119051266c1638d9b39928eaf8bdf90d3813838d'},'SQ:63' => {'Title' => 'Amy','Cover' => '/fhem/sonos/proxy/aa?url=http%3A%2F%2F192.168.10.150%3A1400%2Fgetaa%3Fu%3Dx-file-cifs%253a%252f%252fDS%252fMusik%252fMusik%252fAmy%2520Winehouse%252fFrank%2520%28Deluxe%2520Edition%29%2520CD1%252f01%2520-%2520Amy%2520Winehouse%2520-%2520%2520Stronger%2520Than%2520Me.mp3%26amp%3Bv%3D141'},'SQ:51' => {'Title' => 'Lizzy','Cover' => '/fhem/sonos/proxy/aa?url=https%3A%2F%2Fi.scdn.co%2Fimage%2F39ec2393b4d778d978e3e617af06c89e3e6b09f5'},'SQ:70' => {'Title' => 'Feliz','Cover' => '/fhem/sonos/proxy/aa?url=https%3A%2F%2Fi.scdn.co%2Fimage%2F1419729e219d5bef52a58bcdc25f5dd0fd1e37c8'},'SQ:67' => {'Title' => 'Grace Jones','Cover' => '/fhem/sonos/proxy/aa?url=https%3A%2F%2Fi.scdn.co%2Fimage%2Fa2fdd5d442a486859b8d219027da971fa56a4509'},'SQ:76' => {'Title' => 'Hdw','Cover' => '/fhem/sonos/proxy/aa?url=https%3A%2F%2Fi.scdn.co%2Fimage%2Fe8442f6268bdb389622606a7dd0f3fddefde2deb'},'SQ:25' => {'Title' => 'Nicole Henry','Cover' => '/fhem/sonos/proxy/aa?url=https%3A%2F%2Fi.scdn.co%2Fimage%2Febde492ff6fa41ffd66dc8ee48141593266f6a0d'},'SQ:124' => {'Title' => 'Save_KU','Cover' => '/fhem/sonos/proxy/aa?url=http%3A%2F%2F192.168.10.150%3A1400%2Fgetaa%3Fu%3Dx-file-cifs%253a%252f%252fDS%252fMusik%252fMusik%252fAvishai%2520Cohen%252fAt%2520Home%252f01%2520Feediop.mp3%26amp%3Bv%3D141'},'SQ:13' => {'Title' => 'Starred','Cover' => '/fhem/sonos/proxy/aa?url=https%3A%2F%2Fi.scdn.co%2Fimage%2F6c31a57b729a9431cc90c245d6bcd893ef409c0e'},'SQ:54' => {'Title' => 'Prince','Cover' => '/fhem/sonos/proxy/aa?url=https%3A%2F%2Fi.scdn.co%2Fimage%2F3cb28ba4cf8296dc690a7c559ac2c92b4ca692a6'},'SQ:59' => {'Title' => 'Paul Hardcastle','Cover' => '/fhem/sonos/proxy/aa?url=https%3A%2F%2Fi.scdn.co%2Fimage%2F8be608bf4e6511134d2947f0b4bd40390afa0411'},'SQ:87' => {'Title' => 'KU_TMP','Cover' => '/fhem/sonos/proxy/aa?url=https%3A%2F%2Fi.scdn.co%2Fimage%2F9847a36d46e0bd2a458603c5a52eb13784494ee8'},'SQ:56' => {'Title' => 'Rag Doll','Cover' => '/fhem/sonos/proxy/aa?url=https%3A%2F%2Fi.scdn.co%2Fimage%2F7defc4bb807ef42fb8e8048ad2c3c9ec19e1d149'},'SQ:69' => {'Title' => 'Snarky puppy','Cover' => '/fhem/sonos/proxy/aa?url=https%3A%2F%2Fi.scdn.co%2Fimage%2Fc71cd70828cfc639ee0d4575d2a1c925558a9388'},'SQ:62' => {'Title' => 'Pilichowski','Cover' => '/fhem/sonos/proxy/aa?url=https%3A%2F%2Fi.scdn.co%2Fimage%2F7b4a97c436e55771195c139d69d0e1a7653985b6'},'SQ:55' => {'Title' => 'Maiden','Cover' => '/fhem/sonos/proxy/aa?url=https%3A%2F%2Fi.scdn.co%2Fimage%2Fc6f77c4c1f2ba8f6927adf628ffcc9b1de7f3e96'},'SQ:79' => {'Title' => 'Bluey','Cover' => '/fhem/sonos/proxy/aa?url=https%3A%2F%2Fi.scdn.co%2Fimage%2F6043b86f1b94876b113a6a050e0c7120d9673217'},'SQ:6' => {'Title' => 'Chaka','Cover' => '/fhem/sonos/proxy/aa?url=https%3A%2F%2Fi.scdn.co%2Fimage%2F917c983d7cd86ee0aef8d4bbc3c297b091b55a40'},'SQ:68' => {'Title' => 'Night','Cover' => '/fhem/sonos/proxy/aa?url=https%3A%2F%2Fi.scdn.co%2Fimage%2F21eadd1da43020f484d6aea61321999b64ca0fc8'}}
2016-11-13 19:09:48 PlaylistsVersion RINCON_000E58A9E70A01400,4197
2016-11-13 21:17:10 QueueHash e0cbb92d0b8aecc42ad83e13d0066719
2016-11-13 21:17:10 QueueVersion 2
2016-11-05 17:10:42 RadTabletUI 1.FM - Chill Out Lounge:1LIVE - Das junge Radio des WDR.:Amsterdam Funk Channel:Deluxe Lounge Radio:FFH Digital - Lounge:FFH Digital - Lovesongs:Funk 365 Radio:HouseDestination.FM:Lounge FM Deutschland:Lounge Radio:RFPRADIO.COM | Sexy Smooth Jazz:Radio Just 70s:SWR3 DanceNight:Smooth Jazz 24'7 on JAZZRADIO.com:Soulshow Radio:WDR2 Aachen und Region
2016-11-05 17:10:39 Radios {'R:0/0/78' => {'Title' => 'HouseDestination.FM','Cover' => '/fhem/sonos/proxy/aa?url=http%3A%2F%2F192.168.10.150%3A1400%2Fgetaa%3Fs%3D1%26u%3Dx-sonosapi-stream%253As141692%253Fsid%253D254%2526amp%253Bflags%253D32'},'R:0/0/80' => {'Title' => '1LIVE - Das junge Radio des WDR.','Cover' => '/fhem/sonos/proxy/aa?url=http%3A%2F%2F192.168.10.150%3A1400%2Fgetaa%3Fs%3D1%26u%3Dx-sonosapi-stream%253As100205%253Fsid%253D254%2526amp%253Bflags%253D32'},'R:0/0/39' => {'Title' => 'Smooth Jazz 24'7 on JAZZRADIO.com','Cover' => '/fhem/sonos/proxy/aa?url=http%3A%2F%2F192.168.10.150%3A1400%2Fgetaa%3Fs%3D1%26u%3Dx-sonosapi-stream%253As139778%253Fsid%253D254%2526amp%253Bflags%253D32'},'R:0/0/79' => {'Title' => 'WDR2 Aachen und Region','Cover' => '/fhem/sonos/proxy/aa?url=http%3A%2F%2F192.168.10.150%3A1400%2Fgetaa%3Fs%3D1%26u%3Dx-sonosapi-stream%253As99176%253Fsid%253D254%2526amp%253Bflags%253D32'},'R:0/0/11' => {'Title' => 'Radio Just 70s','Cover' => '/fhem/sonos/proxy/aa?url=http%3A%2F%2F192.168.10.150%3A1400%2Fgetaa%3Fs%3D1%26u%3Dx-sonosapi-stream%253As101673%253Fsid%253D254%2526amp%253Bflags%253D32'},'R:0/0/38' => {'Title' => 'Lounge FM Deutschland','Cover' => '/fhem/sonos/proxy/aa?url=http%3A%2F%2F192.168.10.150%3A1400%2Fgetaa%3Fs%3D1%26u%3Dx-sonosapi-stream%253As177755%253Fsid%253D254%2526amp%253Bflags%253D32'},'R:0/0/56' => {'Title' => 'Funk 365 Radio','Cover' => '/fhem/sonos/proxy/aa?url=http%3A%2F%2F192.168.10.150%3A1400%2Fgetaa%3Fs%3D1%26u%3Dx-sonosapi-stream%253As98695%253Fsid%253D254%2526amp%253Bflags%253D32'},'R:0/0/58' => {'Title' => 'Deluxe Lounge Radio','Cover' => '/fhem/sonos/proxy/aa?url=http%3A%2F%2F192.168.10.150%3A1400%2Fgetaa%3Fs%3D1%26u%3Dx-sonosapi-stream%253As125250%253Fsid%253D254%2526amp%253Bflags%253D32'},'R:0/0/8' => {'Title' => '1.FM - Chill Out Lounge','Cover' => '/fhem/sonos/proxy/aa?url=http%3A%2F%2F192.168.10.150%3A1400%2Fgetaa%3Fs%3D1%26u%3Dx-sonosapi-stream%253As47718%253Fsid%253D254%2526amp%253Bflags%253D32'},'R:0/0/1' => {'Title' => 'SWR3 DanceNight','Cover' => '/fhem/sonos/proxy/aa?url=http%3A%2F%2F192.168.10.150%3A1400%2Fgetaa%3Fs%3D1%26u%3Dx-sonosapi-stream%253As96981%253Fsid%253D254%2526amp%253Bflags%253D32'},'R:0/0/141' => {'Title' => 'RFPRADIO.COM | Sexy Smooth Jazz','Cover' => '/fhem/sonos/proxy/aa?url=http%3A%2F%2F192.168.10.150%3A1400%2Fgetaa%3Fs%3D1%26u%3Dx-sonosapi-stream%253As186858%253Fsid%253D254%2526amp%253Bflags%253D8224%2526amp%253Bsn%253D0'},'R:0/0/6' => {'Title' => 'Lounge Radio','Cover' => '/fhem/sonos/proxy/aa?url=http%3A%2F%2F192.168.10.150%3A1400%2Fgetaa%3Fs%3D1%26u%3Dx-sonosapi-stream%253As17364%253Fsid%253D254%2526amp%253Bflags%253D32'},'R:0/0/126' => {'Title' => 'Soulshow Radio','Cover' => '/fhem/sonos/proxy/aa?url=http%3A%2F%2F192.168.10.150%3A1400%2Fgetaa%3Fs%3D1%26u%3Dx-sonosapi-stream%253As246826%253Fsid%253D254%2526amp%253Bflags%253D8224%2526amp%253Bsn%253D0'},'R:0/0/16' => {'Title' => 'FFH Digital - Lovesongs','Cover' => '/fhem/sonos/proxy/aa?url=http%3A%2F%2F192.168.10.150%3A1400%2Fgetaa%3Fs%3D1%26u%3Dx-sonosapi-stream%253As84484%253Fsid%253D254%2526amp%253Bflags%253D32'},'R:0/0/76' => {'Title' => 'Amsterdam Funk Channel','Cover' => '/fhem/sonos/proxy/aa?url=http%3A%2F%2F192.168.10.150%3A1400%2Fgetaa%3Fs%3D1%26u%3Dx-sonosapi-stream%253As133330%253Fsid%253D254%2526amp%253Bflags%253D32'},'R:0/0/10' => {'Title' => 'FFH Digital - Lounge','Cover' => '/fhem/sonos/proxy/aa?url=http%3A%2F%2F192.168.10.150%3A1400%2Fgetaa%3Fs%3D1%26u%3Dx-sonosapi-stream%253As84483%253Fsid%253D254%2526amp%253Bflags%253D32'}}
2016-11-05 17:09:59 RadiosVersion RINCON_000E58F171D401400,269
2016-10-30 00:10:21 Repeat 0
2016-10-24 21:26:52 RepeatOne 0
2016-10-24 21:26:52 Shuffle 0
2016-11-13 21:17:39 SlavePlayer ['Sonos_Bad','Sonos_Schlafzimmer','Sonos_Schlafzimmer_RF','Sonos_Wohnzimmer']
2016-10-24 21:26:52 SleepTimer off
2016-10-24 21:26:51 SleepTimerVersion
2016-10-24 21:26:55 SubEnable 1
2016-10-24 21:26:55 SubGain 0
2016-10-24 21:26:55 SubPolarity 0
2016-10-24 21:26:55 Treble 0
2016-10-24 21:26:55 TruePlay 1
2016-11-13 22:58:16 Volume 20
2016-10-24 21:26:55 ZoneGroupID RINCON_000E58F171D401400:__
2016-11-13 21:17:39 ZoneGroupName Kueche + 3
2016-11-13 21:17:39 ZonePlayerUUIDsInGroup RINCON_000E58F171D401400,RINCON_000E58C27EF401400,RINCON_5CAAFD7CE98401400,RINCON_000E58A9E70A01400
2016-11-13 23:28:33 currentAlbum After Hours
2016-11-13 22:58:17 currentAlbumArtURI ./www/images/default/SONOSPLAYER/Sonos_Kueche_AlbumArt.jpg
2016-11-13 23:28:33 currentAlbumArtURL /fhem/sonos/proxy/aa?url=https%3A%2F%2Fi.scdn.co%2Fimage%2Fa132a00125388827726677bb070946a1e368883e
2016-11-13 22:58:18 currentAlbumArtist Gregg Karukas
2016-11-13 23:28:33 currentArtist Rahsaan Patterson
2016-11-13 12:42:36 currentNormalAudio 1
2016-11-06 12:12:18 currentOriginalTrackNumber
2016-11-03 07:54:20 currentSender
2016-11-03 07:54:20 currentSenderCurrent
2016-11-03 07:54:20 currentSenderInfo
2016-11-13 21:34:43 currentStreamAudio 0
2016-11-13 23:28:33 currentTitle So Hot
2016-11-13 23:28:33 currentTrack 1
2016-11-13 23:28:33 currentTrackDuration 0:05:19
2016-11-13 23:01:40 currentTrackPosition 0:00:00
2016-11-13 22:58:18 currentTrackProvider Spotify
2016-11-13 23:28:33 currentTrackURI x-sonos-spotify:spotify:track:38IQ4wB3cdaQpkHODiBtKt?sid=9&flags=8224&sn=9
2016-10-24 21:26:49 fieldType
2016-11-13 23:28:33 infoSummarize1 (Rahsaan Patterson) 'So Hot' vom Album 'After Hours'
2016-11-13 23:28:33 infoSummarize2 STOPPED => (Rahsaan Patterson) 'So Hot' vom Album 'After Hours'
2016-11-13 22:58:18 infoSummarize3 Lautstärke: 20 ~ Ton An ~ Balance: Mitte ~ Kein Kopfhörer
2016-11-13 23:28:33 infoSummarize4 Rahsaan Patterson - So Hot
2016-11-13 17:10:04 lastPlayedFav Dein Mix der Woche Andrea
2016-11-05 18:01:23 lastPlayedPlay Jazz Instruments
2016-10-30 20:53:47 lastPlayedRad Amsterdam Funk Channel
2016-10-24 21:26:49 location http://192.168.10.150:1400/xml/device_description.xml
2016-11-13 23:28:33 nextAlbum Acoustic Soul
2016-11-13 23:28:33 nextAlbumArtURI ./www/images/default/SONOSPLAYER/Sonos_Kueche_NextAlbumArt.jpg
2016-11-13 23:28:33 nextAlbumArtURL /fhem/sonos/proxy/aa?url=https%3A%2F%2Fi.scdn.co%2Fimage%2Ffb109c2b1ebfbebf01b9aab4b04ba4dd1e64e1e8
2016-11-06 12:12:18 nextAlbumArtist
2016-11-13 23:28:33 nextArtist India.Arie
2016-11-06 12:12:18 nextOriginalTrackNumber
2016-11-13 23:28:33 nextTitle In My Head
2016-11-13 23:28:33 nextTrackDuration 0:04:40
2016-11-13 23:28:33 nextTrackProvider Spotify
2016-11-13 23:28:33 nextTrackURI x-sonos-spotify:spotify:track:5Qul1lWPc5XPzVM8RweeZc?sid=9&flags=8224&sn=9
2016-11-13 22:58:18 numberOfTracks 30
2016-10-24 21:26:49 playerType S3
2016-11-13 21:16:55 presence appeared
2016-10-24 21:26:55 roomIcon kitchen
2016-10-24 21:26:49 roomName Kueche
2016-10-24 21:26:49 roomNameAlias Kueche
2016-10-24 21:26:49 saveRoomName Kueche
2016-10-24 21:26:49 serialNum 00-0E-58-F1-71-D4:8
2016-11-02 20:15:32 softwareRevision 7.0
2016-11-13 21:16:56 state appeared
2016-11-13 23:28:33 transportState STOPPED
Attributes:
alias Sonos Kueche
generateInfoSummarize1 <NormalAudio><Artist prefix="(" suffix=")"/><Title prefix=" '" suffix="'" ifempty="[Keine Musikdatei]"/><Album prefix=" vom Album '" suffix="'"/></NormalAudio> <StreamAudio><Sender suffix=":"/><SenderCurrent prefix=" '" suffix="' -"/><SenderInfo prefix=" "/></StreamAudio>
generateInfoSummarize2 <TransportState/><InfoSummarize1 prefix=" => "/>
generateInfoSummarize3 <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"/>
generateInfoSummarize4 <NormalAudio><Artist suffix=" - "/><Title ifempty="[Keine Musikdatei]"/></NormalAudio> <StreamAudio><Sender suffix=" - "/><SenderInfo/></StreamAudio>
generateVolumeEvent 1
genericDeviceType speaker
getAlarms 1
group Sonos Player
icon icoSONOSPLAYER_icon-S3.png
minVolume 0
model Sonos_S3
room Homekit,Media
sortby 1
stateVariable Presence
userReadings Favourites:LastActionResult.*?GetFavouritesWithCovers.* { if (ReadingsVal("Sonos_Kueche", "LastActionResult", "") =~ m/.*?: (.*)/) { return $1; } },
Radios:LastActionResult.*?GetRadiosWithCovers.* { if (ReadingsVal("Sonos_Kueche", "LastActionResult", "") =~ m/.*?: (.*)/) { return $1; } },
Playlists:LastActionResult.*?GetPlaylistsWithCovers.* { if (ReadingsVal("Sonos_Kueche", "LastActionResult", "") =~ m/.*?: (.*)/) { return $1; } },
currentTrackPosition:LastActionResult.*?GetCurrentTrackPosition.* { if (ReadingsVal("Sonos_Kueche", "LastActionResult", "") =~ m/.*?: (.*)/) { return $1; } },
FavTabletUI:LastActionResult.*?GetFavourites:.* {if (ReadingsVal("Sonos_Kueche", "LastActionResult", "") =~ m/.*?: (.*)/) { my $returnvalue = $1; $returnvalue =~ s/,/:/g; $returnvalue =~ s/"//g; return $returnvalue; } },
PlayTabletUI:LastActionResult.*?GetPlaylists:.* {if (ReadingsVal("Sonos_Kueche", "LastActionResult", "") =~ m/.*?: (.*)/) { my $returnvalue = $1; $returnvalue =~ s/,/:/g; $returnvalue =~ s/"//g; return $returnvalue; } },
RadTabletUI:LastActionResult.*?GetRadios:.* {if (ReadingsVal("Sonos_Kueche", "LastActionResult", "") =~ m/.*?: (.*)/) { my $returnvalue = $1; $returnvalue =~ s/,/:/g; $returnvalue =~ s/"//g; return $returnvalue; } },
userattr lightSceneParamsToSave lightSceneRestoreOnlyIfChanged:1,0
verbose 0
Hallo Detlef,
Schick gemacht. Wie machst Du das mit den APPs auf der rechten Seite?
Gruß Marcel
@Masterfunk:
Sehr schön! :)
Zitat von: ramirez am 14 November 2016, 06:44:35
Hallo Detlef,
Schick gemacht. Wie machst Du das mit den APPs auf der rechten Seite?
Gruß Marcel
Ist ein ganz einfacher "open App" Aufruf an das AMAD Device.
Gruß Detlef
Zitat von: 50watt am 13 November 2016, 23:26:18
@Masterfunk: könntest du die Dateien zu deiner Sonos/Media-Seite zur Verfügung stellen - die ist das Beste, das ich dazu je gesehen habe!
Das einfachste ist, Du sagst mir einfach, was Du noch brauchst.
Bin halt faul. ;-)
Gruß Detlef
@Masterfunk,
Auf was stellt du deine Oberflächen da, benutzt du ein Tablet , wenn ja mit welcher Auflösung) oder nur auf einem PC. Wenn ich richtig rechne hast du eine Fläche von 14 mal 12 Felder . Ist das richtig?
Gruß Peter
@Masterfunk,
Auf was stellt du deine Oberflächen da, benutzt du ein Tablet , wenn ja mit welcher Auflösung) oder nur auf einem PC. Wenn ich richtig rechne hast du eine Fläche von 14 mal 12 Felder . Ist das richtig?
Gruß Peter
Wollte nur einmal fragen, irgendwie hat mein Tablet daraus ein Doppeltposting gemacht.
Zitat von: Octopus180 am 14 November 2016, 19:05:09
@Masterfunk,
Auf was stellt du deine Oberflächen da, benutzt du ein Tablet , wenn ja mit welcher Auflösung) oder nur auf einem PC. Wenn ich richtig rechne hast du eine Fläche von 14 mal 12 Felder . Ist das richtig?
Gruß Peter
Hallo Peter,
Es sind 14*9.
Das ganze wird auf meinem Wandtablet in der Küche angezeigt.
Es ist ein HP Slate21 mit 21" Diagonale bei Full HD Auflösung.
Hab mal ein Bild angehangen.
Gruß Detlef
Hallo @bjoernbo, könntest du mir vielleicht den kompletten Code von der UI zur Verfügung stellen? Danke
besten Dank auch von mir @Masterfunk.
kleiner Hinweis noch für alle die die Sonosgeschichte nachbauene wollen.
Bitte diesen Post beachten und den dummy und das notify anlegen ;-)
https://forum.fhem.de/index.php/topic,49186.msg437869.html#msg437869 (https://forum.fhem.de/index.php/topic,49186.msg437869.html#msg437869)
Gruß Michael
@Masterfunk
Gratulation sieht wirklich gut aus.
Gruß
Helmut
für die Sonos Einbindung braucht du normalerweise kein Dummy bzw. Notify wie in dem Post:
https://forum.fhem.de/index.php/topic,49186.msg437869.html#msg437869
angegeben ist. Ich habe is wie folgt gelöst:
Grundsätzlich genügt es zwei Userredings bereitzustellen:
FavTabletUI:LastActionResult.*?GetFavourites:.* { if (ReadingsVal("Sonos_Wohnzimmer", "LastActionResult", "") =~ m/.*?: (.*)/) {
my $returnvalue = $1;
$returnvalue =~ s/","/:/g;
$returnvalue =~ s/\"//g;
$returnvalue =~ s/" "/./g;
return $returnvalue }},
FavAliasTabletUI:LastActionResult.*?GetFavourites:.* {
if (ReadingsVal("Sonos_Wohnzimmer", "LastActionResult", "") =~ m/.*?: (.*)/) {
my $returnvalue = uri_escape($1);
$returnvalue =~ s/%22//g;
$returnvalue =~ s/%2C/:/g;
return $returnvalue;
}},
Für die Liste wird "FavTabletUI" und als Alias "FavAliasTabletUI" genutzt bzw. für Startfavorit benutzt.
Da die Favoritenliste in Sonos für alle Player gleiche ist, genügt es das userReading an einem SonosPlayer einzufügen.
Im Tablet UI kannst Du dies dann wie folgt benutzen:
<div data-type="select"
data-device="Sonos_Bad"
data-list="Sonos_Wohnzimmer:FavAliasTabletUI"
data-alias="Sonos_Wohnzimmer:FavTabletUI"
data-get="Sonos_Wohnzimmer:FavTabletUI"
data-set="startFavourite"
class="cell small"></div></div>
Für diese Funktionalität braucht es kein Dummy, kein notify in dem sinne speziell um den player zu starten.
Grüsse
Eric
@Avatar: ist richtig. Ich hatte den Hinweis nur für alle die gegeben, die die media.hmtl von Masterfunk übernehmen und sich dann wundern, dass es nicht funktioniert.
Wie du es vorhast geht es natürlich auch
Gruß Michael
Hier mal das, was ich bisher so gebastelt hab.
Da geht auf jeden Fall noch was ;D
@sw85: sieht ja schon sehr schön aus, aber ...
Gib mir mal bitte den Code-Teil (<li ...) für "Musik" von der 1-Übersicht. Ich will mal versuchen, die Positionen der Elemente etwas zu optimieren.
@setstate
Hast recht, die Anordnung ist zum Teil noch nicht so, wie ich es gerne hätte. Stehe mit CSS und den unterschiedlich divs bzw. class irgendwie auf Kriegsfuß :-[
Ich binde den Block wie folgt ein:
<li data-row="5" data-col="7" data-sizex="4" data-sizey="2" data-template="mpd.html"></li>
Und die mpd.html:
<body>
<header>Musik</header>
<div class="col-1-3 left-align">Radio</div>
<div data-type="switch" data-device="myMPD" data-icon="fa-music" class="col-1-3" data-get-on="play" data-get-off="stop"></div>
<div data-type="select" data-device="myMPD" data-items='["1Live","SWR3"]' data-get="playlist" data-set="playlist" class="col-1-3" ></div>
<div class="col-1-3 left-align">Volume</div>
<div data-type="slider" data-device='myMPD' data-get='volume' data-set='volume' data-max="80" data-width="150" class="col-2-3 horizontal value" ></div>
</body>
</html>
Zitat von: sw85 am 19 November 2016, 09:53:15
Hier mal das, was ich bisher so gebastelt hab.
Da geht auf jeden Fall noch was ;D
Hallo,
sieht doch schon ganz gut aus !!!
Kannst du mal bitte für deine Bad und Wohnzimmer Details (code <li...) posten. Das sind doch keine normalen svg sondern highcharts ???
Auf jeden Fall sind die schön eingebettet.
Würde mich interessieren.
Danke
Jörg
ja genau sind highcharts. Die normalen svg sind nicht wirklich schön ;D
Hier mal der Code vom Wohnzimmer:
<li data-row="3" data-col="2" data-sizex="7" data-sizey="6">
<header>Klima</header>
<div data-type="highchart"
data-height="150"
data-device="DHT22_WZ"
data-logdevice="myDbLog"
data-columnspec="DHT22_WZ:Temperature DHT22_WZ:Humidity"
data-linenames="Temperatur,Feuchte"
data-linetypes="line,line"
data-yaxis="0,1"
data-yunit="Temperatur °C,Feuchte %"
data-yopposites="false,true"
data-daysago="2"
data-tooltip="{series.name} <b>{point.y:,.0f}</b>"
style="width: 550px; height: 200px;"
>
</div>
<div data-type="highchart"
data-height="150"
data-device="HM_Thermostat_WZ_Clima"
data-logdevice="myDbLog"
data-columnspec="HM_Thermostat_WZ_Clima:ValvePosition HM_Thermostat_WZ_Clima:desired-temp"
data-linenames="Ventielöffnung, SOLL"
data-linetypes="line,line"
data-yaxis="0,1"
data-yunit="Ventielöffnung %, SOLL °C"
data-yopposites="false"
data-daysago="2"
data-minvalue="0"
data-maxvalue="40"
data-tooltip="{series.name} <b>{point.y:,.0f}</b>"
style="width: 550px; height: 200px;"
>
</div>
</li>
Der erste Div ist der DHT. Der Andere sind die Daten vom HM Thermostat. Bad ist im Prinzip genauso, nur das es da eben das andere Gerät ist.
Zitat von: setstate am 19 November 2016, 11:07:30
@sw85: sieht ja schon sehr schön aus, aber ...
Gib mir mal bitte den Code-Teil (<li ...) für "Musik" von der 1-Übersicht. Ich will mal versuchen, die Positionen der Elemente etwas zu optimieren.
War nicht so einfach ...
Zwei Varianten habe ich aber. Einmal mit col-x-y und einmal mit Flexbox, je nach Geschmack.
<li data-row="1" data-col="1" data-sizex="4" data-sizey="2">
<header>Musik1</header>
<div class="row row-1-2 center">
<div class="col-1-4">Radio</div>
<div class="col-1-4" data-type="switch" data-device="myMPD" data-icon="fa-music" class="col-1-3" data-get-on="play" data-get-off="stop"></div>
<div class="col-2-4 right-space" data-type="select" data-device="myMPD" data-items='["1Live","SWR3"]' data-get="playlist" data-set="playlist" ></div>
</div>
<div class="row row-1-3 center">
<div class="col-1-4">Volume</div>
<div class="col-3-4 left-space-2x horizontal value" data-type="slider" data-device='myMPD' data-get='volume' data-set='volume' data-max="80" data-width="175"></div>
</div>
</li>
<li data-row="1" data-col="5" data-sizex="4" data-sizey="2">
<header>Musik2</header>
<div class="vbox">
<div class="hbox full-height center">
<div class="grow-1">Radio</div>
<div class="grow-1" data-type="switch" data-device="myMPD" data-icon="fa-music" class="col-1-3" data-get-on="play" data-get-off="stop"></div>
<div class="grow-2 right-space" data-type="select" data-device="myMPD" data-items='["1Live","SWR3"]' data-get="playlist" data-set="playlist" ></div>
</div>
<div class="hbox full-height center">
<div class="grow-1">Volume</div>
<div class="grow-2 left-space-2x horizontal value" data-type="slider" data-device='myMPD' data-get='volume' data-set='volume' data-max="80" data-width="180"></div>
</div>
</div>
</li>
Zitat von: setstate am 19 November 2016, 23:12:00
Zwei Varianten habe ich aber. Einmal mit col-x-y und einmal mit Flexbox, je nach Geschmack.
Gibt es eine Doku zu den Formatierungen z.b. wie funktioniert col oder wie kann horizontal zentriert werden?
@Masterfunk großer Respekt!!!
Könntest du vielleicht deinen kompletten Code zur Verfügung stellen? Interessiere mich für sehr viele Widgets wie Systemstatus, iframes, charts, ...
@setstate
Vielen Dank, jetzt sieht es so aus wie ich es auch eigentlich haben wollte.
Dürfte ich dich vielleicht noch mal um Hilfe bei einem anderen Element bitten, an welchem ich schon verzweifelt bin?
Ich verwende im Wohnzimmer folgenden Code um ein Popup zu öffnen:
<li data-row="1" data-col="9" data-sizex="2" data-sizey="1">
<div data-type="popup" data-height="400px" data-width="800px">
<div data-type="link"
data-icon="fa-television"
class="round"
data-color="grey"
data-border-color="grey">TV Programm</div>
<div class="dialog bg-lightgray">
<header>TV Programm</header>
<div data-template="tv_prog.html" class="bg-lightgray"></div>
</div>
</div>
</li>
Wie das aussieht habe ich noch mal angehangen.
Ich hätte aber gern, dass der komplette Button vertikal im li zentriert ist und dass der Text ebenfalls vertikal zum Icon zentriert ist.
Hab mal die Icons für die Apps angepasst.
Bin jetzt ein Meister im "freistellen". ;D
Gruß Detlef
Es geht immer weiter 8)
Nachdem ich am WE meine 3 GTags von Siemens für die Anwesenheitserkennung eingebunden habe, gibt es hierzu natürlich nun auch eine entsprechende Anzeige in der MobilenFTUI Version bei mir die mir anzeigt wieviele Bewohner gerade zuhause sind.
Anbei der Code für die Zählung, wen es interessiert ;-)
Zitatdefine AnzahlAnwesende dummy
attr AnzahlAnwesende readingList Zaehler
attr AnzahlAnwesende room Anwesenheit
attr AnzahlAnwesende setList state Zaehler
attr AnzahlAnwesende userReadings Zaehler
define nt_AnzahlAnwesende notify (GtaG.*):.* {
my $bisherigeAnwesende = ReadingsVal("AnzahlAnwesende",$NAME,0);
my $Wert=ReadingsVal("AnzahlAnwesende","Zaehler",0);
if($EVENT eq "present" && $bisherigeAnwesende ne "present")
{$Wert = $Wert+1;
fhem("setreading AnzahlAnwesende Zaehler $Wert");
fhem("setreading AnzahlAnwesende $NAME present");
fhem("set AnzahlAnwesende $Wert");
}
elsif($EVENT eq "absent" && $bisherigeAnwesende ne "absent")
{$Wert = $Wert-1;
fhem("setreading AnzahlAnwesende Zaehler $Wert");
fhem("set AnzahlAnwesende $Wert");
fhem("setreading AnzahlAnwesende $NAME absent");
}
}
Zitat
<div data-type="symbol" data-device="AnzahlAnwesende"
data-get='Zaehler' data-off-color="grey"
data-get-on='["^[0]$","^[1-9][0-9]|[1-9]$"]'
data-icons='["fa-home","fa-home warn"]'
data-on-colors='["grey","green"]' class="col-1-5 big center-align"></div>
Hallo,
dann packe ich mein gebastel auch mal dazu ;)
Der letzte screenshot ist die Mobil Version.
Gruß
Eisix
sieht alles sehr super aus.
@eisix würdest du deinen Code posten?
Besonders das Wetter würde mich interessieren
Gruß
Helmut
Das meiste sind leicht modifizierte Sachen die hier im Thread schon mal aufgetaucht sind.
Gruß
Eisix
Das macht doch nichts, dafür ist das Forum doch da!? ;)
Kannst auch gerne komplett posten, sobald ich mal Zeit habe steht hier ggf. ein Redesign an und die eine oder andere Idee würde ich dann auch gerne abkupfern :D
Zitat von: Eisix am 21 November 2016, 11:35:51
Hallo,
dann packe ich mein gebastel auch mal dazu ;)
Der letzte screenshot ist die Mobil Version.
Gruß
Eisix
Verrätst du mir wie du beim Servermonitor die Prozentanzeige so hinbekommen hast?
Der Servermonitor ist gerade in arbeit.
Soll noch uptime, update und restart dazu.
data-unit="%"
ist das was du suchst denke ich
<div class="inline">
<div data-type="knob"
data-device="sysmon"
data-get="fs_Daten"
data-anglearc="360"
data-angleoffset="0"
data-part=".*,\s(\d{1,3})\s%.*"
data-min="0"
data-max="100"
data-bgcolor="green"
data-fgcolor="#FA2828"
class="mini readonly"
data-unit="%"
></div>
<div data-type="label">/Daten</div>
</div>
Interessant...
Würde mich für das ganze dahinter interessieren. Ich habe einen kleinen NAS laufen und das wäre sehr cool den so angezeigt zu bekommen. Aktuell überwache ich nur die IP auf Up- oder Down. Da ich kein schimmer hab wie das funktioniert ;D ;D
Basiert auf dem Sysmon Modul.
define <name> SYSMON [MODE[:[USER@]HOST][:PORT]] [<M1>[ <M2>[ <M3>[ <M4>]]]]
siehe Command Ref
Meine Anzeige ist aber wie gesagt noch im Anfangsstadium.
Ja cool, hätte nie dran gedacht das sysmon auch externe Geräte auslesen kann... Das muss ich jetzt zusammen klemptnern :-)
Zitat von: Eisix am 21 November 2016, 11:55:26
Das meiste sind leicht modifizierte Sachen die hier im Thread schon mal aufgetaucht sind.
Gruß
Eisix
Wäre Super wenn du deine Mobile Seite anhängen könntest.
Gruss
Lewej
@Lewej
das ganze ist eine Zusammenstellung verschiedener Templates die auch teilweise in anderen Ansichten verwendet werden
welche davon brauchst du?
<ul>
<li data-row="1" data-col="1" data-sizex="1" data-sizey="2" data-template="/fhem/tablet_mob/templates/tmp_LichtTerrasse.htm"></li>
<li data-row="1" data-col="2" data-sizex="1" data-sizey="2" data-template="/fhem/tablet_mob/templates/tmp_LichtVR_mob.htm"></li>
<li data-row="1" data-col="3" data-sizex="1" data-sizey="2" data-template="/fhem/tablet_mob/templates/tmp_Tueren.htm"></li>
<li data-row="1" data-col="4" data-sizex="2" data-sizey="2" data-template="/fhem/tablet_mob/templates/tmp_Garagen.htm"></li>
<li data-row="3" data-col="1" data-sizex="5" data-sizey="2" data-template="/fhem/tablet_mob/templates/tmp_Rolladen_mob.htm"></li>
<li data-row="6" data-col="1" data-sizex="5" data-sizey="2" data-template="/fhem/tablet_mob/templates/tmp_Abfall_mob.htm"></li>
<li data-row="8" data-col="1" data-sizex="5" data-sizey="2" data-template="/fhem/tablet_mob/templates/tmp_Bose.htm"></li>
<li data-row="10" data-col="1" data-sizex="5" data-sizey="2" data-template="/fhem/tablet_mob/templates/tmp_Multimedia.htm"></li>
<!--
<li data-row="10" data-col="1" data-sizex="5" data-sizey="2" data-template="/fhem/tablet_mob/templates/tmp_Kamera_mob.htm"></li>
-->
<li data-row="12" data-col="1" data-sizex="5" data-sizey="2" data-template="/fhem/tablet_mob/templates/tmp_Homestatus_mob.htm"></li>
</ul>
@Masterfunk
deinen System Teil könnte ich brauchen. Speziell Update, Datenbank und Backup würden mich interessieren.
Gruß
Eisix
Zitat von: Eisix am 21 November 2016, 15:26:57
@Lewej
das ganze ist eine Zusammenstellung verschiedener Templates die auch teilweise in anderen Ansichten verwendet werden
welche davon brauchst du?
<ul>
<li data-row="1" data-col="1" data-sizex="1" data-sizey="2" data-template="/fhem/tablet_mob/templates/tmp_LichtTerrasse.htm"></li>
<li data-row="1" data-col="2" data-sizex="1" data-sizey="2" data-template="/fhem/tablet_mob/templates/tmp_LichtVR_mob.htm"></li>
<li data-row="1" data-col="3" data-sizex="1" data-sizey="2" data-template="/fhem/tablet_mob/templates/tmp_Tueren.htm"></li>
<li data-row="1" data-col="4" data-sizex="2" data-sizey="2" data-template="/fhem/tablet_mob/templates/tmp_Garagen.htm"></li>
<li data-row="3" data-col="1" data-sizex="5" data-sizey="2" data-template="/fhem/tablet_mob/templates/tmp_Rolladen_mob.htm"></li>
<li data-row="6" data-col="1" data-sizex="5" data-sizey="2" data-template="/fhem/tablet_mob/templates/tmp_Abfall_mob.htm"></li>
<li data-row="8" data-col="1" data-sizex="5" data-sizey="2" data-template="/fhem/tablet_mob/templates/tmp_Bose.htm"></li>
<li data-row="10" data-col="1" data-sizex="5" data-sizey="2" data-template="/fhem/tablet_mob/templates/tmp_Multimedia.htm"></li>
<!--
<li data-row="10" data-col="1" data-sizex="5" data-sizey="2" data-template="/fhem/tablet_mob/templates/tmp_Kamera_mob.htm"></li>
-->
<li data-row="12" data-col="1" data-sizex="5" data-sizey="2" data-template="/fhem/tablet_mob/templates/tmp_Homestatus_mob.htm"></li>
</ul>
Hi,
könntest du alle anhängen, dann könnte ich mir das eine oder andere raussuchen, was am besten auf meine Geräte darzustellen ist.
Gruß und Danke dir.
lewej
Die anderen sind einfache Symbol.
Auf Wunsch, hier meine Config:
Gruß Detlef
Zitat von: sw85 am 20 November 2016, 07:48:25
@setstate
Vielen Dank, jetzt sieht es so aus wie ich es auch eigentlich haben wollte.
Dürfte ich dich vielleicht noch mal um Hilfe bei einem anderen Element bitten, an welchem ich schon verzweifelt bin?
Ich verwende im Wohnzimmer folgenden Code um ein Popup zu öffnen:
<li data-row="1" data-col="9" data-sizex="2" data-sizey="1">
<div data-type="popup" data-height="400px" data-width="800px">
<div data-type="link"
data-icon="fa-television"
class="round"
data-color="grey"
data-border-color="grey">TV Programm</div>
<div class="dialog bg-lightgray">
<header>TV Programm</header>
<div data-template="tv_prog.html" class="bg-lightgray"></div>
</div>
</div>
</li>
Wie das aussieht habe ich noch mal angehangen.
Ich hätte aber gern, dass der komplette Button vertikal im li zentriert ist und dass der Text ebenfalls vertikal zum Icon zentriert ist.
nach einem Update sollte es jetzt besser aussehen ...
Zitat von: setstate am 21 November 2016, 22:10:25
nach einem Update sollte es jetzt besser aussehen ...
@setstate:
Ja, nun steht der Text genau dort, wo er hin sollte. Vielen Dank!
Habe den "Home" Bereich nochmal etwas überarbeitet.
Die Icons zeigen jetzt die Farbe der Miligts an und öffnen ein Popup zum einstellen der Farbe und Helligkeit.
Dazu muss beim Wifilight Device ein zusätzliches Userrreading angelegt werden:
dim {ReadingsVal($name,"brightness",0) ;;},
color {my $s = '#'.ReadingsVal($name,'RGB','')}
Hier die Bilder und der Code:
Hallo Masterfunk,
wie hast Du dieses tolle Farbwidget für die Küchen LED gemacht? Ist das eine Spezialversion des Knob-Widgets?
Gruß
Michael
Edit: Hab schon gesehen ;-), sorrry
@Masterfunk
Mal blöd gefragt: Wie kommst du denn an die Datenbankgröße?
Würde ich bei mir auch gern einbinden.
Zitat von: sw85 am 27 November 2016, 10:22:25
@Masterfunk
Mal blöd gefragt: Wie kommst du denn an die Datenbankgröße?
Würde ich bei mir auch gern einbinden.
Installiere Dir das fhem Modul "DbRep".
Dann kannst Du mit "get <Name> tableinfo" die Infos abrufen.
Läuft bei mir über ein "at", was alle 60 Min. die Daten aktualisiert.
Gruß Detlef
Zitat von: Masterfunk am 13 November 2016, 22:43:13
Hier mal mein aktueller stand.
Da ist noch was zu tun...
Könntest du die Dateien mal zur Verfügung stellen?
Würd mir gern so n paar Sachen abschauen :-)
Danke
Zitat von: morph am 27 November 2016, 22:38:48
Könntest du die Dateien mal zur Verfügung stellen?
Würd mir gern so n paar Sachen abschauen :-)
Danke
Steht etwas weiter oben:
Zitat von: Masterfunk am 21 November 2016, 20:48:40
Auf Wunsch, hier meine Config:
Gruß Detlef
ich depp.... hab zwar gestern Abend noch geschaut... naja...
Zitat von: morph am 28 November 2016, 07:56:39
ich depp.... hab zwar gestern Abend noch geschaut... naja...
;D
Einige Widgets setzen gewisse Anpassungen in fhem vorraus. Falls Du über etwas "stolperst", frag nach, dann poste ich die entsprechenden Dinge aus fhem selber.
Gruß Detlef
Zitat von: Eisix am 21 November 2016, 12:15:17
Der Servermonitor ist gerade in arbeit.
Soll noch uptime, update und restart dazu.
<div class="inline">
<div data-type="knob"
data-device="sysmon"
data-get="fs_Daten"
data-anglearc="360"
data-angleoffset="0"
data-part=".*,\s(\d{1,3})\s%.*"
data-min="0"
data-max="100"
data-bgcolor="green"
data-fgcolor="#FA2828"
class="mini readonly"
data-unit="%"
></div>
<div data-type="label">/Daten</div>
</div>
Kannst du bitte deinen "aktuellen" code des servermonitors posten.
Ich versuche die xx% aus :
fs_boot Total: 56 MB, Used: 20 MB, 36 %, Available: 37 MB at /boot
fs_rootTotal: 14831 MB, Used: 3378 MB, 24 %, Available: 10803 MB at /
ram Total: 973.38 MB, Used: 119.80 MB, 12.31 %, Free: 853.57 MB
stat_cpu0_text user: 35.59 %, nice: 0.00 %, sys: 1.78 %, idle: 54.75 %, io: 0.02 %, irq: 0.00 %, sirq: 7.86 %
auszulesen
data-part=".*,\s(\d{1,3})\s%.*" klappt bei mir nicht.
Danke Jörg
versuch mal
data-part="8"
Zitat von: bjoernbo am 21 November 2016, 09:34:21
Es geht immer weiter 8)
Hi bjoernbo,
deine Smartphone FTUI sieht spitze aus.
Kannst du bitte noch mal alle deine aktuellen .html`s anhängen.
Ich habe hier zig Seiten zurück geblättert aber leider immer nur Stücken deiner Config gefunden.
Vielen Dank im voraus.
Gruß Thomas
@jnewton957
hab nochmal nachgeschaut geht bei mir
data-part=".*,\s(\d{1,3})\s%.*"
Habe aber auch Probleme bei swap, da krieg ich auch keine Werte.
Vom Interface her sieht es jetzt bei mir so aus:
@Eisix
Wo bekommst Du den Wert für die Fhem Updates her?
Würde mich auch interessieren..
Gruß Detlef
Momentan aus einem Dummy mit den entsprechende Readings
Aber das wolltest du sicher nicht hören ;D
Geplant ist über update check die Anzahl der einzelnen updates in die readings zu schreiben und das dann mit einem AT Job täglich zu aktualisieren.
Hast du das nicht auch bei dir irgendwo? Meinte ich hätte es gesehen.
Für den Server reboot, wie habt ihr das gelöst? Ich hätte da eigentlich gerne eine Pin Eingabe oder sowas vorne dran. Zur Zeit frage ich mit einem popup nochmal nach.
Das ist mir aber eigentlich zu wenig.
Gruß
Eisix
Zitat von: Eisix am 29 November 2016, 22:03:38
Momentan aus einem Dummy mit den entsprechende Readings
Aber das wolltest du sicher nicht hören ;D
Geplant ist über update check die Anzahl der einzelnen updates in die readings zu schreiben und das dann mit einem AT Job täglich zu aktualisieren.
Hast du das nicht auch bei dir irgendwo? Meinte ich hätte es gesehen.
Für den Server reboot, wie habt ihr das gelöst? Ich hätte da eigentlich gerne eine Pin Eingabe oder sowas vorne dran. Zur Zeit frage ich mit einem popup nochmal nach.
Das ist mir aber eigentlich zu wenig.
Gruß
Eisix
Und wie befüllst Du denDummy?
Server Reset wird bei mir direkt mit dem Button ausgelöst.
Gruß Detlef
Zitat von: Eisix am 29 November 2016, 18:28:29
@jnewton957
hab nochmal nachgeschaut geht bei mir
data-part=".*,\s(\d{1,3})\s%.*"
Habe aber auch Probleme bei swap, da krieg ich auch keine Werte.
Vom Interface her sieht es jetzt bei mir so aus:
Hallo Eisix,
kannst du bitte mal dein ganzes coding für diese Seite bereit stellen.
Das würde uns sicher allen helfen.
Danke für die tolle Idee deines Servermonitor.
Bei mir sieht es aktuell so aus (und habe eben deine Charts angefügt - klappt aber eben nicht)
Grüße
Jörg
@jnewton957 sieht gut aus! Immer wieder inspirierend die Ideen von anderen zu sehen. Hoffe wir kriegen noch ein paar andere dazu Ihre Kreationen zu zeigen.
Code habe ich angehängt. Wie schon gesagt habe ich mit dem data-part auch Probleme, irgendwie verhält sich das nicht wie erwartet.
@Masterfunk
wenn ich heute Zeit hab schaue im mir die Dummy Befüllung mal an.
bzgl. Server ich meine damit das OS. Für Fhem "shutdown restart". Oder hast du eine Lösung fürs OS?
Zitat von: Eisix am 30 November 2016, 10:17:49
@jnewton957 Code habe ich angehängt.
Hallo Eisix, der Code scheint irgendwie auf der Strecke geblieben zu sein :-(
Ups :o
Weiss auch nicht wo der abgeblieben ist. Dafür gibts noch etwas um die Updates zu checken :).
list UPDATE
Internals:
NAME UPDATE
NR 315
STATE OK
TYPE CustomReadings
Helper:
Dblog:
All:
Logdb:
TIME 1480669530.76498
VALUE 60
Fhem:
Logdb:
TIME 1480669530.76498
VALUE 6
Ftui:
Logdb:
TIME 1480669530.76498
VALUE 54
Readings:
2016-12-02 10:05:29 ALL 60
2016-12-02 10:05:29 FHEM 6
2016-12-02 10:05:29 FTUI 54
2016-12-02 10:05:29 state OK
Attributes:
event-on-update-reading FHEM,FTUI,ALL
interval 21600
readingDefinitions FHEM:qx(wget -qO - http://fhem.de/fhemupdate/controls_fhem.txt| diff - /opt/fhem/FHEM/controls_fhem.txt |grep ">"|grep "UPD"|wc -l),FTUI:qx(wget -qO - https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt| diff - /opt/fhem/FHEM/controls_fhemtabletui.txt |grep ">" |grep "UPD"|wc -l),ALL:{ReadingsNum($name, "FHEM", 0) + ReadingsNum($name, "FTUI", 0)}
@Eisix: Dein Servermonitor gefällt mir sehr gut! Könntest Du freundlicherweise deine config hierzu zur Verfügung stellen?
Vielen DANK
Hängt direkt über deinen Posting ;)
Oder meinst du was anderes?
;D ich meinte die den Auszug aus der fhem.config
define UPDATE CustomReadings
attr UPDATE event-on-update-reading FHEM,FTUI,ALL
attr UPDATE interval 21600
attr UPDATE readingDefinitions FHEM:qx(wget -qO - http://fhem.de/fhemupdate/controls_fhem.txt| diff - /opt/fhem/FHEM/controls_fhem.txt |grep ">"|grep "UPD"|wc -l),FTUI:qx(wget -qO - https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt| diff - /opt/fhem/FHEM/controls_fhemtabletui.txt |grep ">" |grep "UPD"|wc -l),ALL:{ReadingsNum($name, "FHEM", 0) + ReadingsNum($name, "FTUI", 0)}
Weiß jemand / kann mir jemand verraten, warum ich eine Fehlermeldung bekomme?
File not found: ./www/tablet/index.html
Wie sieht deine cfg Zeile für HTTPSVR aus?
Wenn die vorgeschlagene Version ist, findest du die Seiten unter http://<fhem-server>:8083/fhem/ftui/
Im Fhem Web gibt es bei richtiger cfg auch einen Link links oben zum FTUI.
Danke Dir für deine Antwort
Zitat von: setstate am 03 Dezember 2016, 13:02:13
Wie sieht deine cfg Zeile für HTTPSVR aus?
define TABLETUI HTTPSRV ftui/ ./www/tablet Tablet-UI
ZitatWenn die vorgeschlagene Version ist, findest du die Seiten unter http://<fhem-server>:8083/fhem/ftui/
Im Fhem Web gibt es bei richtiger cfg auch einen Link links oben zum FTUI.
Dann kommt genau diese Fehlermeldung: File not found: ./www/tablet/index.html
Ich habe gerade gelesen, dass man die index.html erst erzeugen muss? D.h. über telnet?
Nun habe ich die Antwort gefunden. Die index-example.html ist zu ändern in index.html
dafür benötigt man superuserrechte
anstatt
mv index-example.html index.html
ist
sudo mv index-example.html index.html
einzugeben.
Ein gutes Tutorial ist unter
http://voizchat.de/fhem-tutorial-serie-teil-5-tablet-ui-installieren-und-konfigurieren/
zu finden.
Zitat von: Eisix am 29 November 2016, 18:28:29
@jnewton957
hab nochmal nachgeschaut geht bei mir
data-part=".*,\s(\d{1,3})\s%.*"
Habe aber auch Probleme bei swap, da krieg ich auch keine Werte.
Vom Interface her sieht es jetzt bei mir so aus:
Ich hab´ ´ne Krise.
ram Total: 973.38 MB, Used: 119.80 MB, 12.31 %, Free: 853.57 MB
<div data-type="knob"
data-device="sysmon"
data-get="ram"
data-anglearc="360"
data-angleoffset="0"
data-part=".*,\s(\d{1,3}.\d\d)\s%.*"
data-min="0"
data-max="100"
data-bgcolor="green"
data-fgcolor="#FA2828"
class="mini readonly"
data-unit="%"
></div>
<div data-type="label">ram</div> data-part=".*,\s(\d{1,3}.\d\d)\s%.*" klappt nicht.
Frage ich mal anders herum:Was macht das coding in data-get genau ? Wo kann ich die Systematik nachlesen?
Ich möchte jeweils die Daten aus:
fs_boot Total: 56 MB, Used: 20 MB, 36 %, Available: 37 MB at /boot
fs_rootTotal: 14831 MB, Used: 3378 MB, 24 %, Available: 10803 MB at /
ram Total: 973.38 MB, Used: 119.80 MB, 12.31 %, Free: 853.57 MB
stat_cpu0_text user: 35.59 %, nice: 0.00 %, sys: 1.78 %, idle: 54.75 %, io: 0.02 %, irq: 0.00 %, sirq: 7.86 %
Wie komme ich da mit den RegEx Statements jeweils hin ?
Grüße
Jörg
Hier hat setstate das ganze mal erklärt.
https://forum.fhem.de/index.php/topic,49745.0.html
Habe jetzt meine Lösung fürs Update und Restarts fertig.
Hier der Code:
fhem:
define Update.Counter CustomReadings
attr Update.Counter event-on-update-reading FHEM,FTUI,ALL
attr Update.Counter interval 3600
attr Update.Counter readingDefinitions FHEM:qx(wget -qO - http://fhem.de/fhemupdate/controls_fhem.txt| diff - /opt/fhem/FHEM/controls_fhem.txt |grep ">"|grep "UPD"|wc -l),FTUI:qx(wget -qO - https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt| diff - /opt/fhem/FHEM/controls_fhemtabletui.txt |grep ">" |grep "UPD"|wc -l),ALL:{ReadingsNum($name, "FHEM", 0) + ReadingsNum($name, "FTUI", 0)}
attr Update.Counter stateFormat ALL
define Update.Dummy dummy
define UpdateFinished notify global.UPDATE.* set Update.Dummy done
attr UpdateFinished room System
define Update.New DOIF ([Update.Counter] ne "0")(set Update.Dummy update)\
DOELSEIF ([Update.Counter] eq "0")(set Update.Dummy idle)
attr Update.New do always
define Update.Start notify Update.Dummy.start set Update.Dummy run;; {fhem ("update")}
define System.Reboot.Dummy dummy
define System.reboot notify System.Reboot.Dummy:on {system ("sudo reboot")}
Tablet UI:
<li data-row="4" data-col="2" data-sizex="4" data-sizey="1" class="">
<header>Updates</header>
<div class="inline">
<div data-type="button"
data-device="Update.Counter"
data-warn="FHEM"
data-fhem-cmd=""
data-background-icon="fs-system_fhem"
data-on-background-color="#505050"
data-off-background-color="#505050"
data-icon="fa-refresh warn"
class="readonly warn bigger"></div>
<div data-type="label" class="top-narrow">FHEM</div>
</div>
<div class="inline">
<div data-type="button"
data-device="Update.Counter"
data-warn="FTUI"
data-fhem-cmd=""
data-background-icon="fs-system_fhem"
data-on-background-color="#505050"
data-off-background-color="#505050"
data-icon="fa-refresh warn"
class="readonly warn bigger"></div>
<div data-type="label" class="top-narrow">FTUI</div>
</div>
<div class="inline">
<div data-type="switch" data-device="Update.Dummy"
data-states='["idle","update","run","done"]'
data-set-states='["idle","start","idle","idle"]'
data-icons='["fa-refresh","fa-refresh","fa-refresh fa-spin","fa-refresh fa-blink"]'
data-background-icons='["-","-","-","-"]'
data-on-colors='["#505050","#aa6900","#aa6900","red"]'
data-background-colors='["#505050","#aa6900","#aa6900","red"]'
class="bigger top-narrow"></div>
<div data-type="label">Status / Start</div>
</div>
<div class="inline">
<div data-type="popup" data-draggable="true" data-height="100px" data-width="100px" class="white">
<div data-type="button" data-icon="fs-system_fhem" background-icon="-" class="cell top-narrow"></div>
<div data-type="label" class="">Restart</div>
<div class="dialog dialogTransparent">
<div data-type="button" data-fhem-cmd="shutdown restart" data-icon="fa-check" background-icon="fa-circle" class="cell"></div>
<div data-type="label" class="">Sicher?</div>
</div>
</div>
</div>
<div class="inline">
<div data-type="popup" data-draggable="true" data-height="100px" data-width="100px" class="white">
<div data-type="button" data-icon="fa-linux" background-icon="-" class="cell top-narrow"></div>
<div data-type="label" class="">Restart</div>
<div class="dialog dialogTransparent">
<div data-type="button" data-fhem-cmd="set System.Reboot.Dummy on" data-icon="fa-check" background-icon="fa-circle" class="cell"></div>
<div data-type="label" class="">Sicher?</div>
</div>
</div>
</div>
</li>
Und so siehts aus:
@Masterfunkt
Wie hast du das umgesetzt?
- Netzübersicht mit IP Listen
- ESXi (Graphen)
Zitat von: Masterfunk am 04 Dezember 2016, 13:08:20
Habe jetzt meine Lösung fürs Update und Restarts fertig.
Hier der Code:
fhem:
define Update.Counter CustomReadings
attr Update.Counter event-on-update-reading FHEM,FTUI,ALL
attr Update.Counter interval 3600
attr Update.Counter readingDefinitions FHEM:qx(wget -qO - http://fhem.de/fhemupdate/controls_fhem.txt| diff - /opt/fhem/FHEM/controls_fhem.txt |grep ">"|grep "UPD"|wc -l),FTUI:qx(wget -qO - https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt| diff - /opt/fhem/FHEM/controls_fhemtabletui.txt |grep ">" |grep "UPD"|wc -l),ALL:{ReadingsNum($name, "FHEM", 0) + ReadingsNum($name, "FTUI", 0)}
attr Update.Counter stateFormat ALL
define Update.Dummy dummy
define UpdateFinished notify global.UPDATE.* set Update.Dummy done
attr UpdateFinished room System
define Update.New DOIF ([Update.Counter] ne "0")(set Update.Dummy update)\
DOELSEIF ([Update.Counter] eq "0")(set Update.Dummy idle)
attr Update.New do always
define Update.Start notify Update.Dummy.start set Update.Dummy run;; {fhem ("update")}
define System.Reboot.Dummy dummy
define System.reboot notify System.Reboot.Dummy:on {system ("sudo reboot")}
Tablet UI:
<li data-row="4" data-col="2" data-sizex="4" data-sizey="1" class="">
<header>Updates</header>
<div class="inline">
<div data-type="button"
data-device="Update.Counter"
data-warn="FHEM"
data-fhem-cmd=""
data-background-icon="fs-system_fhem"
data-on-background-color="#505050"
data-off-background-color="#505050"
data-icon="fa-refresh warn"
class="readonly warn bigger"></div>
<div data-type="label" class="top-narrow">FHEM</div>
</div>
<div class="inline">
<div data-type="button"
data-device="Update.Counter"
data-warn="FTUI"
data-fhem-cmd=""
data-background-icon="fs-system_fhem"
data-on-background-color="#505050"
data-off-background-color="#505050"
data-icon="fa-refresh warn"
class="readonly warn bigger"></div>
<div data-type="label" class="top-narrow">FTUI</div>
</div>
<div class="inline">
<div data-type="switch" data-device="Update.Dummy"
data-states='["idle","update","run","done"]'
data-set-states='["idle","start","idle","idle"]'
data-icons='["fa-refresh","fa-refresh","fa-refresh fa-spin","fa-refresh fa-blink"]'
data-background-icons='["-","-","-","-"]'
data-on-colors='["#505050","#aa6900","#aa6900","red"]'
data-background-colors='["#505050","#aa6900","#aa6900","red"]'
class="bigger top-narrow"></div>
<div data-type="label">Status / Start</div>
</div>
<div class="inline">
<div data-type="popup" data-draggable="true" data-height="100px" data-width="100px" class="white">
<div data-type="button" data-icon="fs-system_fhem" background-icon="-" class="cell top-narrow"></div>
<div data-type="label" class="">Restart</div>
<div class="dialog dialogTransparent">
<div data-type="button" data-fhem-cmd="shutdown restart" data-icon="fa-check" background-icon="fa-circle" class="cell"></div>
<div data-type="label" class="">Sicher?</div>
</div>
</div>
</div>
<div class="inline">
<div data-type="popup" data-draggable="true" data-height="100px" data-width="100px" class="white">
<div data-type="button" data-icon="fa-linux" background-icon="-" class="cell top-narrow"></div>
<div data-type="label" class="">Restart</div>
<div class="dialog dialogTransparent">
<div data-type="button" data-fhem-cmd="set System.Reboot.Dummy on" data-icon="fa-check" background-icon="fa-circle" class="cell"></div>
<div data-type="label" class="">Sicher?</div>
</div>
</div>
</div>
</li>
Und so siehts aus:
Beim Update Button, wird ja das fhem Update angestoßen, könnte man noch das um das Update für die ftui erweitern?
In der Konsole, muss man ja dafür diesen Befehl ausführen:
update all https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt
Gruß
Zitat von: TWART016 am 05 Dezember 2016, 16:17:02
@Masterfunkt
Wie hast du das umgesetzt?
- Netzübersicht mit IP Listen
- ESXi (Graphen)
Das ist eine Readingsgroup des Nmap Moduls.
Und die ESXI Graphen kommen vom SYSSTAT Modul.
Der ESXi wird via snmp überwacht.
Gruß Detlef
Zitat von: lewej am 05 Dezember 2016, 21:19:43
Beim Update Button, wird ja das fhem Update angestoßen, könnte man noch das um das Update für die ftui erweitern?
In der Konsole, muss man ja dafür diesen Befehl ausführen:
update all https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt
Gruß
Ist bei mir automatisch eingebunden:
update add https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt
Gruß Detlef
Mal noch eine kurze Frage: Wie komme ich den an das Symbol "fs-system_fhem"? Scheinbar fehlen in meinem FTUI Pfad noch ein paar Dateien bzw welche muß ich noch einbinden?
Zitat von: majorshark am 06 Dezember 2016, 12:05:24
Mal noch eine kurze Frage: Wie komme ich den an das Symbol "fs-system_fhem"? Scheinbar fehlen in meinem FTUI Pfad noch ein paar Dateien bzw welche muß ich noch einbinden?
Schau mal hier
http://www.fhemwiki.de/wiki/FHEM_Tablet_UI#Icon-Konfiguration
Grüße
Alles klar, jetzt gehts! Danke.
Hey Setstate, nach langer suche doch wieder gefunden! Du hast in deiner Mobilenansicht von deinen "Homies" die Bilder eingebunden! Damit diese rund dargestellt werden, denke ich mal hast Du dir CSS zur Hilfe genommen. Könntest Du mir für deine Homies deinen Code zur Verfügung stellen? Momentan habe ich nur Pictogramme.
DANKE
class="round" macht runde Bilder
Aus dem Flexbox Demo3
<div class="round grow-1" data-type="image" data-device="ftuitest" data-state-get="homie1" data-states='["anwesend","abwesend"]' data-classes='["","faded"]' data-width="60" data-height="60" data-url="http://lorempixel.com/150/150/people/1"></div>
Super ! DANKE SETSTATE
Hallo Björn,
dein Design sieht ja echt Klasse aus, auch am Smartphone - echt tolle Arbeit.
Irgendwie hat man sich an diesem Dunlen Design satt gesehen, und Dein helles Design ist da wie ein frische Brise!
Würdest Du deine HTML Dateien teilen? Wäre Dir sehr dankbar!
Danke
Gruß Eddie
Hallo,
klar, keine Problem. Da ich aber noch nicht fertig bin zunächst mal nur die "Startseite'" - ÜBERBLICK sowie die index.html mit der Menüstruktur.
index:
<!DOCTYPE html>
<html>
<head>
<meta name="fhemweb_url" content="http:///192.168.178.51:8083/fhem/tablet/www/">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="widget_base_width" content="118"><!-- 109 -->
<meta name="widget_base_height" content="124">
<meta name="gridster_disable" content="0">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="longpoll" content="1">
<meta name="debug" content="0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="apple-touch-icon" href="/fhem/www/tablet/custom_icon.png">
<link rel="stylesheet" href="/fhem/www/tablet/lib/jquery.gridster.min.css" />
<link rel="stylesheet" href="/fhem/www/tablet/css/fhem-tablet-ui.css" />
<link rel="stylesheet" href="/fhem/www/tablet/css/fhem-mobil-ui.css" />
<link rel="stylesheet" href="/fhem/www/tablet/lib/font-awesome.min.css" />
<link rel="stylesheet" href="/fhem/www/tablet/lib/jquery.toast.min.css" />
<link rel="stylesheet" href="/fhem/www/tablet/lib/jquery.toast.min.css" />
<link rel="stylesheet" href="/fhem/www/tablet/lib/openautomation.css" />
<link rel="stylesheet" href="/fhem/www/tablet/customfonts/font1/style.css">
<link rel="stylesheet" href="/fhem/www/tablet/lib/fhemSVG.css" />
<script type="text/javascript" src="/fhem/pgm2/jquery.min.js"></script>
<script type="text/javascript" src="/fhem/www/tablet/lib/jquery.gridster.min.js" defer></script>
<script type="text/javascript" src="/fhem/www/tablet/lib/jquery.toast.min.js"></script>
<script type="text/javascript" src="/fhem/www/tablet/js/fhem-tablet-ui.js"></script>
<title>FHEM-Tablet-UI</title>
</head>
<body>
<nav id="menu">
<div data-type="link" class="default large top-space-2x left-space-3x"
data-width="150" data-icon-left="fa-dashboard" data-color="white"
data-text-align="left" data-load="div#v3_ueberblick"
data-url="#v3_ueberblick.html" data-active-color="blue"
data-active-pattern="(.*index_mobil.html|.*#v3_ueberblick.html)">Überblick</div>
<div data-type="link" class="large top-space-2x left-space-3x"
data-width="150" data-icon-left="fa-street-view"
data-color="white" data-text-align="left"
data-load="div#v3_wohnzimmer" data-url="#v3_wohnzimmer.html"
data-active-color="blue" data-active-pattern=".*#v3_wohnzimmer.html">Wohnzimmer</div>
<div data-type="link" class="large top-space-2x left-space-3x"
data-width="150" data-icon-left="fa-bed" data-color="white"
data-text-align="left" data-load="div#v3_schlafzimmer"
data-url="#v3_schlafzimmer.html" data-active-color="blue"
data-active-pattern=".*#v3_schlafzimmer.html">Schlafzimmer</div>
<div data-type="link" class="large top-space-2x left-space-3x"
data-width="150" data-icon-left="fa-cutlery"
data-color="white" data-text-align="left"
data-load="div#v3_kueche" data-url="#v3_kueche.html"
data-active-color="blue" data-active-pattern=".*#v3_kueche.html">Küche</div>
<div data-type="link" class="large top-space-2x left-space-3x"
data-width="150" data-icon-left="fa-child" data-color="white"
data-text-align="left" data-load="div#v3_ben"
data-url="#v3_ben.html" data-active-color="blue"
data-active-pattern=".*#v3_ben.html">Ben</div>
<div data-type="link" class="large top-space-2x left-space-3x"
data-width="150" data-icon-left="fa-female" data-color="white"
data-text-align="left" data-load="div#v3_julia"
data-url="#v3_julia.html" data-active-color="blue"
data-active-pattern=".*#v3_julia.html">Julia</div>
<div data-type="link" class="large top-space-2x left-space-3x"
data-width="150" data-icon-left="fa-bath" data-color="white"
data-text-align="left" data-load="div#v3_badezimmer"
data-url="#v3_badezimmer.html" data-active-color="blue"
data-active-pattern=".*#v3_badezimmer.html">Badezimmer</div>
<div data-type="link" class="large top-space-2x left-space-3x"
data-width="150" data-icon-left="oa-sani_heating" data-color="white"
data-text-align="left" data-load="div#v3_heizung"
data-url="#v3_heizung.html" data-active-color="blue"
data-active-pattern=".*#v3_heizung.html">Heizung</div>
<div data-type="link" class="large top-space-2x left-space-3x"
data-width="150" data-icon-left="fa-cogs" data-color="white"
data-text-align="left" data-load="div#v3_einstellungen"
data-url="#v3_einstellungen.html" data-active-color="blue"
data-active-pattern=".*#v3_einstellungen.html">Einstellungen</div>
<div data-type="link" class="large top-space-2x left-space-3x"
data-width="150" data-icon-left="fa-wrench" data-color="white"
data-text-align="left" data-load="div#v3_system"
data-url="#v3_system.html" data-active-color="blue"
data-active-pattern=".*#v3_system.html">System</div>
<div data-type="link" class="large top-space-2x left-space-3x"
data-width="150" data-icon-left="fa-phone" data-color="white"
data-text-align="left" data-load="div#v3_anrufe"
data-url="#v3_anrufe.html" data-active-color="blue"
data-active-pattern=".*#v3_anrufe.html">Anrufe</div>
<div data-type="link" class="large top-space-2x left-space-3x"
data-width="150" data-icon-left="fa-cloud" data-color="white"
data-text-align="left" data-load="div#v3_wetter"
data-url="#v3_wetter.html" data-active-color="blue"
data-active-pattern=".*#v3_wetter.html">Wetter</div>
<div data-type="link" class="large top-space-2x left-space-3x"
data-width="150" data-icon-left="fa-hourglass-half" data-color="white"
data-text-align="left" data-load="div#v3_verbrauch"
data-url="#v3_verbrauch.html" data-active-color="blue"
data-active-pattern=".*#v3_verbrauch.html">Verbräuche</div>
<div data-type="link" class="large top-space-2x left-space-3x"
data-width="150" data-icon-left="fa-line-chart" data-color="white"
data-text-align="left" data-load="div#v3_graphen"
data-url="#v3_graphen.html" data-active-color="blue"
data-active-pattern=".*#v3_graphen.html">Auswertungen</div>
<div data-type="link" class="large top-space-2x left-space-3x"
data-width="150" data-icon-left="fa-flask" data-color="white"
data-text-align="left" data-load="div#v3_labor"
data-url="#v3_labor.html" data-active-color="blue"
data-active-pattern=".*#v3_labor.html">Labor</div>
<!-- leerer Eintrag -->
<div data-type="link" class="large top-space-2x left-space-3x"
data-width="150"
data-text-align="left"></div>
</nav>
<header id="header-nav" class="bg-lightgray fixed row">
<div data-type="slideout" class="col-1-6 big center-align notouch"></div>
<div id="linkname" class="col-1-4 large bold center-align middle"></div>
<div data-type="button" data-background-icon="none" data-device="Abfall" data-get="USBAbfuhrGrau-Restmuell_tage" data-off-color="#606060" data-get-on='["off","^[01]$","^[1-9][0-9]|[2-9]$"]' data-icons='["fa-trash-o warn","fa-trash-o warn blink","fa-trash-o warn"]' data-on-colors='["#505050","#505050","#505050"]' class="col-1-9 big center-align"></div>
<div data-type="button" data-background-icon="none" data-device="Abfall" data-get="USBAbfuhrBlau-Altpapier_tage" data-off-color="cornflowerblue" data-get-on='["off","^[01]$","^[1-9][0-9]|[2-9]$"]' data-icons='["fa-trash-o warn","fa-trash-o warn blink","fa-trash-o warn"]' data-on-colors='["cornflowerblue","cornflowerblue","cornflowerblue"]' class="col-1-9 big center-align"></div>
<div data-type="button" data-background-icon="none" data-device="Abfall" data-get="USBAbfuhrGelb-kombinierteWertstofftonne_tage" data-off-color="#D7DF01" data-get-on='["off","^[01]$","^[1-9][0-9]|[2-9]$"]' data-icons='["fs-bag warn","fs-bag warn blink","fs-bag warn"]' data-on-colors='["#D7DF01","#D7DF01","#D7DF01"]' class="col-1-9 big center-align"></div>
<div data-type="symbol"
data-device="HR.WaschmaschineBetrieb"
data-get-on='["standby","on","off"]'
data-icons='["oa-scene_dishwasher","oa-scene_dishwasher","oa-scene_dishwasher"]'
data-on-colors='["green","red","gray"]'
class="col-1-9 big center-align"></div>
<div data-type="symbol" data-device="AnzahlAnwesende"
data-get='Zaehler' data-off-color="grey"
data-get-on='["^[0]$","^[1-9][0-9]|[1-9]$"]'
data-icons='["oa-scene_keyboard","oa-scene_keyboard warn"]'
data-on-colors='["grey","green"]' class="col-1-9 big center-align"></div>
<div data-type="symbol" data-device="AnzahlOffenerFenster"
data-get='Zaehler' data-off-color="gray"
data-get-on='["^[0]$","^[1-9][0-9]|[1-9]$"]'
data-icons='["ftui-window","ftui-window warn"]'
data-on-colors='["grey","blue"]' class="col-1-9 big center-align"></div>
<div data-type="label"
data-device="NetatmoInnenSensor"
data-get="co2"
data-fix="0"
data-unit=" ppm"
data-limits="[0, 600, 1000, 1180, 1800, 2250]"
data-off-color="gray"
data-colors='["green","yellowgreen","greenyellow","#D7DF01","orange","red"]'
class="col-1-9 big center-align"></div>
<div class="right top space-2x">Außen</br>
<div data-type="label"
data-device="netatmo_M02_00_00_00_24_a2"
data-get="temperature"
data-limits="[-20,-15,-10,-5,0,5,10,15,20,25,30,35]"
data-colors='["#483D8B","#1874CD","#9AC0CD","#5B65F9","#0459E2","#0097D8","#41CD31","#C9E801","#E8C501","#E89B01","#E86101","#E80101"]'
data-unit="°C"
class="center-align"></div>
<div data-type="klimatrend"
data-device="netatmo_M02_00_00_00_24_a2"
data-get="statTemperatureTendency"
data-refperiod="6"
data-stagnating-color="rgb(80,80,80)"
data-icon="fa-angle"
data-rising-color="rgb(180,80,80)"
data-falling-color="rgb(80,80,180)"
data-highmark="1"
data-highmark-icon="fa-angle-double"
data-highmark-rising-color="rgb(255,80,80)"
data-highmark-falling-color="rgb(80,80,255)"
class="small inline"></div>
<div data-type="klimatrend"
data-device="netatmo_M02_00_00_00_24_a2"
data-get="statTemperatureTendency"
data-refperiod="3"
data-stagnating-color="rgb(80,80,80)"
data-icon="fa-angle"
data-rising-color="rgb(180,80,80)"
data-falling-color="rgb(80,80,180)"
data-highmark="1"
data-highmark-icon="fa-angle-double"
data-highmark-rising-color="rgb(255,80,80)"
data-highmark-falling-color="rgb(80,80,255)"
class="small inline"></div>
<div data-type="klimatrend"
data-device="netatmo_M02_00_00_00_24_a2"
data-get="statTemperatureTendency"
data-refperiod="2"
data-stagnating-color="rgb(80,80,80)"
data-icon="fa-angle"
data-rising-color="rgb(180,80,80)"
data-falling-color="rgb(80,80,180)"
data-highmark="1"
data-highmark-icon="fa-angle-double"
data-highmark-rising-color="rgb(255,80,80)"
data-highmark-falling-color="rgb(80,80,255)"
class="small inline"></div>
<div data-type="klimatrend"
data-device="netatmo_M02_00_00_00_24_a2"
data-get="statTemperatureTendency"
data-refperiod="1"
data-stagnating-color="rgb(80,80,80)"
data-icon="fa-angle"
data-rising-color="rgb(180,80,80)"
data-falling-color="rgb(80,80,180)"
data-highmark="1"
data-highmark-icon="fa-angle-double"
data-highmark-rising-color="rgb(255,80,80)"
data-highmark-falling-color="rgb(80,80,255)"
class="small inline"></div>
<div data-type="loading" data-icon="fa-spinner" data-color="blue"
data-effect="fa-blink" data-shade="true"
class="col-1-5 center-align big"></div>
</header>
<main id="panel" class="">
<div class="page" id="v3_ueberblick"></div>
<div class="page" id="v3_wohnzimmer"></div>
<div class="page" id="v3_schlafzimmer"></div>
<div class="page" id="v3_kueche"></div>
<div class="page" id="v3_ben"></div>
<div class="page" id="v3_julia"></div>
<div class="page" id="v3_badezimmer"></div>
<div class="page" id="v3_heizung"></div>
<div class="page" id="v3_einstellungen"></div>
<div class="page" id="v3_system"></div>
<div class="page" id="v3_anrufe"></div>
<div class="page" id="v3_wetter"></div>
<div class="page" id="v3_verbrauch"></div>
<div class="page" id="v3_graphen"></div>
<div class="page" id="v3_labor"></div>
</main>
</body>
</html>
überblick.html
[code]!DOCTYPE html>
<html>
<head></head>
<body>
<div class="page" id="v3_ueberblick">
<div class="gridster">
<ul>
<!-- WOHNZIMMER -->
<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
<header>Wohnzimmer</header><div class="cell centered">
<div data-type="symbol"
data-off-color="#AC58FA"
data-icon="fa-street-view"
class="bigger"></div></div>
</li>
<li data-row="1" data-col="2" data-sizex="1" data-sizey="1">
<header>Terassentür</header><div class="cell centered">
<div data-type="symbol" data-device="Fensterkontakt.Wohnzimmer"
data-get-on='["geöffnet","geschlossen"]'
data-icons='["ftui-window warn","ftui-window"]'
data-on-backgoundcolor="blue" data-off-backgroundcolor="gray"
data-on-colors='["blue","gray"]'
class="bigger"></div></div>
</li>
<li data-row="1" data-col="3" data-sizex="1" data-sizey="1">
<header>Dimmer</header><div class="cell centered">
<div data-type="switch" data-device="WZ_Dimmer" class="bigger"></div>
</div>
</li>
<li data-row="1" data-col="4" data-sizex="1" data-sizey="1">
<header>Stehlampe</header>
<div class="cell centered">
<div data-type="switch"
data-device="Stehlampe"
data-on-backgoundcolor="blue"
data-off-backgroundcolor="gray"
class="bigger"></div>
</div>
</li>
<li data-row="1" data-col="5" data-sizex="1" data-sizey="1">
<header>SAT-TV</header>
<div class="cell centered">
<div data-type="switch"
data-device="TV_Modus"
data-icon="fa-tv"
class="bigger"></div>
</div>
</li>
<li data-row="1" data-col="6" data-sizex="1" data-sizey="1">
<header>Apple TV</header>
<div class="cell centered">
<div data-type="switch"
data-device="AppleTV_Modus"
data-icon="fa-apple"
class="bigger"></div>
</div>
</li>
<li data-row="1" data-col="7" data-sizex="1" data-sizey="1">
<header>KODI</header>
<div class="cell centered">
<div data-type="switch"
data-device="XBMC_Modus"
data-icon="font1-kodi" class="bigger">
</div>
</div>
</li>
<li data-row="1" data-col="8" data-sizex="2" data-sizey="1">
<header>HEIZUNG Wz.</header>
<div class="container">
<div class="left">
<div data-type="thermostat"
data-device="Wohnzimmer.Wandthermostat"
data-get="desired-temp"
data-temp="measured-temp"
data-min="4"
data-off="off"
data-max="31"
data-boost="boostclass"
class="cell center">
<div data-type="label"
data-device="Wohnzimmer.Wandthermostat"
data-get="humidity"
data-unit=" %"
class="cell small"></div>
</div>
</div>
<div class="container">
<div class="label" class="cell"> </div>
<div data-type="label"
data-device="CUL_HM_HM_TC_IT_WM_W_EU_303215"
data-get="batteryLevel"
data-unit="V"
class="darker narrow"></div>
<div class="label" class="cell"> </div>
<div data-type="label"
data-device="Wohnzimmer.Wandthermostat"
data-get="controlMode"
class="darker narrow"></div>
<div class="label" class="cell"> </div>
<div data-type="label"
data-device="Wohnzimmer.Wandthermostat"
data-get="boostTime"
class="darker narrow"></div>
<div class="label" class="cell"> </div>
<div data-type="label"
data-device="Wohnzimmer.Wandthermostat"
data-get="battery"
data-limits='["low","ok"]'
data-colors='["red","green"]'
class="darker narrow"></div>
<div class="label" class="cell"> </div>
<div data-type="label"
data-device="Wohnzimmer.Wandthermostat"
data-get="measured-temp"
data-unit=" °C"
class="darker narrow"></div>
<div class="label" class="cell"> </div>
</div>
</div>
</li>
<li data-row="1" data-col="10" data-sizex="1" data-sizey="3">
<header>Stromverbrauch</header>
<div data-type="label" class="cell normal">akt. Verbr.</div>
<div data-type="label"
data-device="ESAx000WZ_5242"
data-get="actual"
data-unit=" kWh"
data-fix="1"
class="cell large">
</div>
<div data-type="label" class="cell normal">Tagesverbr.</div>
<div data-type="label"
data-device="ESAx000WZ_5242"
data-get="day"
data-unit=" kWh"
data-fix="1"
class="cell large">
</div>
<div data-type="label" class="cell normal">Gestern</div>
<div data-type="label"
data-device="ESAx000WZ_5242"
data-get="day_last"
data-unit=" kWh"
data-fix="0"
class="cell large">
</div>
<div data-type="label" class="cell normal">Monatsverbr.</div>
<div data-type="label"
data-device="ESAx000WZ_5242"
data-get="month"
data-unit=" kWh"
data-fix="0"
class="cell large">
</div>
<div data-type="label" class="cell normal">Vormonat</div>
<div data-type="label"
data-device="ESAx000WZ_5242"
data-get="month_last"
data-unit=" kWh"
data-fix="0"
class="cell large">
</div>
<div data-type="label" class="cell normal">Jahresverbr.</div>
<div data-type="label"
data-device="ESAx000WZ_5242"
data-get="year"
data-unit=" kWh"
data-fix="0"
class="cell large">
</div>
</li>
<!-- SCHLAFZIMMER -->
<li data-row="2" data-col="1" data-sizex="1" data-sizey="1">
<header>Schlafzimmer</header>
<div data-type="symbol"
data-icon="fa-bed"
data-off-color="#FA5882"
class="bigger"></div>
</li>
<li data-row="2" data-col="2" data-sizex="1" data-sizey="1">
<header>Fenster</header>
<div data-type="symbol" data-device="Fensterkontakt.Schlafzimmer"
data-get-on='["geöffnet","geschlossen"]'
data-icons='["ftui-window warn","ftui-window"]'
data-on-backgoundcolor="blue" data-off-backgroundcolor="gray"
data-on-colors='["blue","gray"]'
class="bigger"></div>
</li>
<li data-row="2" data-col="3" data-sizex="1" data-sizey="1">
<header>Deckenlicht</header><div class="cell centered">
<div data-type="switch" data-device="#" class="bigger"></div>
</div>
</li>
<li data-row="2" data-col="4" data-sizex="1" data-sizey="1">
<header>Oberlicht</header><div class="cell centered">
<div data-type="switch" data-device="Schrankbeleuchtung" class="bigger"></div>
</div>
</li>
<li data-row="2" data-col="5" data-sizex="1" data-sizey="1">
<header>Nachtlich Bj.</header><div class="cell centered">
<div data-type="switch" data-device="#" class="bigger"></div>
</div>
</li>
<li data-row="2" data-col="6" data-sizex="1" data-sizey="1">
<header>Nachtlicht Ag.</header><div class="cell centered">
<div data-type="switch" data-device="#" class="bigger"></div>
</div>
</li>
<li data-row="2" data-col="8" data-sizex="2" data-sizey="1">
<header>HEIZUNG Sch.</header>
<div class="container">
<div class="left">
<div data-type="thermostat"
data-device="Schlafzimmer.Wandthermostat"
data-get="desired-temp"
data-temp="measured-temp"
data-min="4"
data-off="off"
data-max="31"
data-boost="boostclass"
class="cell center">
<div data-type="label"
data-device="Schlafzimmer.Wandthermostat"
data-get="humidity"
data-unit=" %"
class="cell small"></div>
</div>
</div>
<div class="container">
<div class="label" class="cell"> </div>
<div data-type="label"
data-device="#"
data-get="batteryLevel"
data-unit="V"
class="darker narrow"></div>
<div class="label" class="cell"> </div>
<div data-type="label"
data-device="Schlafzimmer.Wandthermostat"
data-get="controlMode"
class="darker narrow"></div>
<div class="label" class="cell"> </div>
<div data-type="label"
data-device="Schlafzimmer.Wandthermostat"
data-get="boostTime"
class="darker narrow"></div>
<div class="label" class="cell"> </div>
<div data-type="label"
data-device="Schlafzimmer.Wandthermostat"
data-get="battery"
data-limits='["low","ok"]'
data-colors='["red","green"]'
class="darker narrow"></div>
<div class="label" class="cell"> </div>
<div data-type="label"
data-device="Schlafzimmer.Wandthermostat"
data-get="measured-temp"
data-unit=" °C"
class="darker narrow"></div>
<div class="label" class="cell"> </div>
</div>
</div>
</li>
<li data-row="2" data-col="7" data-sizex="1" data-sizey="1">
</li>
<li data-row="4" data-col="1" data-sizex="1" data-sizey="1">
<header>Ben</header>
<div data-type="symbol"
data-icon="fa-child"
data-off-color="#0000cd"
class="bigger"></div>
</li>
<li data-row="4" data-col="2" data-sizex="1" data-sizey="1">
<header>Fenster</header>
<div data-type="symbol" data-device="Fensterkontakt.Ben"
data-get-on='["geöffnet","geschlossen"]'
data-icons='["ftui-window warn","ftui-window"]'
data-on-backgoundcolor="blue" data-off-backgroundcolor="gray"
data-on-colors='["blue","gray"]'
class="bigger"></div>
</li>
<li data-row="4" data-col="3" data-sizex="1" data-sizey="1">
<header>Deckenlicht</header><div class="cell centered">
<div data-type="switch" data-device="#" class="bigger"></div>
</div>
</li>
<li data-row="4" data-col="4" data-sizex="2" data-sizey="1">
<header>HEIZUNG B.</header>
<div class="container">
<div class="left">
<div data-type="thermostat"
data-device="Ben.Wandthermostat"
data-get="desired-temp"
data-temp="measured-temp"
data-min="4"
data-off="off"
data-max="31"
data-boost="boostclass"
class="cell center">
<div data-type="label"
data-device="Ben.Wandthermostat"
data-get="humidity"
data-unit=" %"
class="cell small"></div>
</div>
</div>
<div class="container">
<div class="label" class="cell"> </div>
<div data-type="label"
data-device="#"
data-get="batteryLevel"
data-unit="V"
class="darker narrow"></div>
<div class="label" class="cell"> </div>
<div data-type="label"
data-device="Ben.Wandthermostat"
data-get="controlMode"
class="darker narrow"></div>
<div class="label" class="cell"> </div>
<div data-type="label"
data-device="Ben.Wandthermostat"
data-get="boostTime"
class="darker narrow"></div>
<div class="label" class="cell"> </div>
<div data-type="label"
data-device="Ben.Wandthermostat"
data-get="battery"
data-limits='["low","ok"]'
data-colors='["red","green"]'
class="darker narrow"></div>
<div class="label" class="cell"> </div>
<div data-type="label"
data-device="Ben.Wandthermostat"
data-get="measured-temp"
data-unit=" °C"
class="darker narrow"></div>
<div class="label" class="cell"> </div>
</div>
</div>
</li>
<li data-row="4" data-col="10" data-sizex="1" data-sizey="1">
<header>Rauchmelder</header><div class="cell centered">
<div data-type="switch"
data-device="FL.Rauchmelder"
data-on-color="FF4040"
data-get-on="ON"
data-off-color="green"
data-get-off="OFF"
data-icon="font1-fire"
class="bigger"></div></div>
</li>
<li data-row="5" data-col="1" data-sizex="1" data-sizey="1">
<header>Julia</header>
<div data-type="symbol"
data-icon="fa-female"
data-off-color="#ff1493"
class="bigger"></div>
</li>
<li data-row="5" data-col="2" data-sizex="1" data-sizey="1">
<header>Fenster</header>
<div data-type="symbol" data-device="Fensterkontakt.Julia"
data-get-on='["geöffnet","geschlossen"]'
data-icons='["ftui-window warn","ftui-window"]'
data-on-backgoundcolor="blue" data-off-backgroundcolor="gray"
data-on-colors='["blue","gray"]'
class="bigger"></div>
</li>
<li data-row="5" data-col="3" data-sizex="1" data-sizey="1">
<header>Deckenlicht</header><div class="cell centered">
<div data-type="switch" data-device="#" class="bigger"></div>
</div>
</li>
<li data-row="5" data-col="4" data-sizex="2" data-sizey="1">
<header>HEIZUNG J</header>
<div class="container">
<div class="left">
<div data-type="thermostat"
data-device="Julia.Wandthermostat"
data-get="desired-temp"
data-temp="measured-temp"
data-min="4"
data-off="off"
data-max="31"
data-boost="boostclass"
class="cell center">
<div data-type="label"
data-device="Julia.Wandthermostat"
data-get="humidity"
data-unit=" %"
class="cell small"></div>
</div>
</div>
<div class="container">
<div class="label" class="cell"> </div>
<div data-type="label"
data-device="#"
data-get="batteryLevel"
data-unit="V"
class="darker narrow"></div>
<div class="label" class="cell"> </div>
<div data-type="label"
data-device="Julia.Wandthermostat"
data-get="controlMode"
class="darker narrow"></div>
<div class="label" class="cell"> </div>
<div data-type="label"
data-device="Julia.Wandthermostat"
data-get="boostTime"
class="darker narrow"></div>
<div class="label" class="cell"> </div>
<div data-type="label"
data-device="Julia.Wandthermostat"
data-get="battery"
data-limits='["low","ok"]'
data-colors='["red","green"]'
class="darker narrow"></div>
<div class="label" class="cell"> </div>
<div data-type="label"
data-device="Julia.Wandthermostat"
data-get="measured-temp"
data-unit=" °C"
class="darker narrow"></div>
<div class="label" class="cell"> </div>
</div>
</div>
</li>
<li data-row="5" data-col="6" data-sizex="1" data-sizey="1"></li>
<li data-row="5" data-col="7" data-sizex="1" data-sizey="1"></li>
<li data-row="5" data-col="8" data-sizex="1" data-sizey="1">
<div class="container top-center"><header>Agnes</header><br>
<div class="round grow-1" data-type="image"
data-device="GtAG.Agnes"
data-state-get="state"
data-states='["present","absent"]'
data-classes='["","faded"]' data-width="80" data-height="80" data-url="userfoto/agnes.jpg"
class="bigger"></div></div>
</li>
<li data-row="5" data-col="9" data-sizex="1" data-sizey="1">
<div class="container top-center"><header>Björn</header><br>
<div class="round grow-1" data-type="image"
data-device="GtAG.Bjoern"
data-state-get="state"
data-states='["present","absent"]'
data-classes='["","faded"]' data-width="80" data-height="80" data-url="userfoto/bjoern.jpg"
class="bigger"></div></div>
</li>
<li data-row="5" data-col="10" data-sizex="1" data-sizey="1">
<div class="container top-center"><header>Opa</header><br>
<div class="round grow-1" data-type="image"
data-device="GtAG.Opa"
data-state-get="state"
data-states='["present","absent"]'
data-classes='["","faded"]' data-width="80" data-height="80" data-url="userfoto/adalbert.jpg"
class="bigger"></div></div>
</li>
<li data-row="3" data-col="1" data-sizex="1" data-sizey="1">
<header>Küche</header>
nun auch das Menü
kurz zur Seite Überblick: Ich denke es macht Sinn auch mal kurz zu beschreiben was man sieht.
Was sieht man in der obersten Zeile. Eigentlich selbsterklärend. Hierbei handelt es sich um die Müllabfuhr die mir anzeigt in wievielten Tagen der Müll abgeholt wird. Daneben wird mir angezeigt, dass die Waschmaschine derzeit aus ist. Wenn diese eingeschaltet ist, ändert sich die Farbe in rot. Ist die Waschmaschine fertig kann man in den Keller gehen, da das Symbol dann grün ist.
Daneben sehen wir zivile Personen derzeit anwesend sind. Diese Information spiegelt sich unten recht nochmal wieder! Wenn keine Person anwensend ist, wird geprüft ob alle Lichter etc. ausgeschaltet sind, wenn dies nicht der Fall ist werden diese entspr. ausgeschaltet.
Das Fenstersymbol oben zeigt mit due Anzahl der offenen Fenster an, sofern eins geöffnet ist.
Dann folgt noch die Luftqualität sowie die Außentemperatur inklusive Tendenz.
Hallo Björn,
vielen vielen dank fürs Teilen deiner Arbeit!
Ich glaube Du hast einen Teil des Codes von der überblick.html ausgelassen. Du hast den Code mit dem Code-Tag eingeleitet aber die abschließenden HTML Tags fehlen und der abschließende BB-Code Tag fehlt auch.
Könntest Du Deinen Beitrag nochmal editieren. Danke sehr
Danke für den Hinweis: Hier nochmal der Code "Überblick"
!DOCTYPE html>
<html>
<head></head>
<body>
<div class="page" id="v3_ueberblick">
<div class="gridster">
<ul>
<!-- WOHNZIMMER -->
<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
<header>Wohnzimmer</header><div class="cell centered">
<div data-type="symbol"
data-off-color="#AC58FA"
data-icon="fa-street-view"
class="bigger"></div></div>
</li>
<li data-row="1" data-col="2" data-sizex="1" data-sizey="1">
<header>Terassentür</header><div class="cell centered">
<div data-type="symbol" data-device="Fensterkontakt.Wohnzimmer"
data-get-on='["geöffnet","geschlossen"]'
data-icons='["ftui-window warn","ftui-window"]'
data-on-backgoundcolor="blue" data-off-backgroundcolor="gray"
data-on-colors='["blue","gray"]'
class="bigger"></div></div>
</li>
<li data-row="1" data-col="3" data-sizex="1" data-sizey="1">
<header>Dimmer</header><div class="cell centered">
<div data-type="switch" data-device="WZ_Dimmer" class="bigger"></div>
</div>
</li>
<li data-row="1" data-col="4" data-sizex="1" data-sizey="1">
<header>Stehlampe</header>
<div class="cell centered">
<div data-type="switch"
data-device="Stehlampe"
data-on-backgoundcolor="blue"
data-off-backgroundcolor="gray"
class="bigger"></div>
</div>
</li>
<li data-row="1" data-col="5" data-sizex="1" data-sizey="1">
<header>SAT-TV</header>
<div class="cell centered">
<div data-type="switch"
data-device="TV_Modus"
data-icon="fa-tv"
class="bigger"></div>
</div>
</li>
<li data-row="1" data-col="6" data-sizex="1" data-sizey="1">
<header>Apple TV</header>
<div class="cell centered">
<div data-type="switch"
data-device="AppleTV_Modus"
data-icon="fa-apple"
class="bigger"></div>
</div>
</li>
<li data-row="1" data-col="7" data-sizex="1" data-sizey="1">
<header>KODI</header>
<div class="cell centered">
<div data-type="switch"
data-device="XBMC_Modus"
data-icon="font1-kodi" class="bigger">
</div>
</div>
</li>
<li data-row="1" data-col="8" data-sizex="2" data-sizey="1">
<header>HEIZUNG Wz.</header>
<div class="container">
<div class="left">
<div data-type="thermostat"
data-device="Wohnzimmer.Wandthermostat"
data-get="desired-temp"
data-temp="measured-temp"
data-min="4"
data-off="off"
data-max="31"
data-boost="boostclass"
class="cell center">
<div data-type="label"
data-device="Wohnzimmer.Wandthermostat"
data-get="humidity"
data-unit=" %"
class="cell small"></div>
</div>
</div>
<div class="container">
<div class="label" class="cell"> </div>
<div data-type="label"
data-device="CUL_HM_HM_TC_IT_WM_W_EU_303215"
data-get="batteryLevel"
data-unit="V"
class="darker narrow"></div>
<div class="label" class="cell"> </div>
<div data-type="label"
data-device="Wohnzimmer.Wandthermostat"
data-get="controlMode"
class="darker narrow"></div>
<div class="label" class="cell"> </div>
<div data-type="label"
data-device="Wohnzimmer.Wandthermostat"
data-get="boostTime"
class="darker narrow"></div>
<div class="label" class="cell"> </div>
<div data-type="label"
data-device="Wohnzimmer.Wandthermostat"
data-get="battery"
data-limits='["low","ok"]'
data-colors='["red","green"]'
class="darker narrow"></div>
<div class="label" class="cell"> </div>
<div data-type="label"
data-device="Wohnzimmer.Wandthermostat"
data-get="measured-temp"
data-unit=" °C"
class="darker narrow"></div>
<div class="label" class="cell"> </div>
</div>
</div>
</li>
<li data-row="1" data-col="10" data-sizex="1" data-sizey="3">
<header>Stromverbrauch</header>
<div data-type="label" class="cell normal">akt. Verbr.</div>
<div data-type="label"
data-device="ESAx000WZ_5242"
data-get="actual"
data-unit=" kWh"
data-fix="1"
class="cell large">
</div>
<div data-type="label" class="cell normal">Tagesverbr.</div>
<div data-type="label"
data-device="ESAx000WZ_5242"
data-get="day"
data-unit=" kWh"
data-fix="1"
class="cell large">
</div>
<div data-type="label" class="cell normal">Gestern</div>
<div data-type="label"
data-device="ESAx000WZ_5242"
data-get="day_last"
data-unit=" kWh"
data-fix="0"
class="cell large">
</div>
<div data-type="label" class="cell normal">Monatsverbr.</div>
<div data-type="label"
data-device="ESAx000WZ_5242"
data-get="month"
data-unit=" kWh"
data-fix="0"
class="cell large">
</div>
<div data-type="label" class="cell normal">Vormonat</div>
<div data-type="label"
data-device="ESAx000WZ_5242"
data-get="month_last"
data-unit=" kWh"
data-fix="0"
class="cell large">
</div>
<div data-type="label" class="cell normal">Jahresverbr.</div>
<div data-type="label"
data-device="ESAx000WZ_5242"
data-get="year"
data-unit=" kWh"
data-fix="0"
class="cell large">
</div>
</li>
<!-- SCHLAFZIMMER -->
<li data-row="2" data-col="1" data-sizex="1" data-sizey="1">
<header>Schlafzimmer</header>
<div data-type="symbol"
data-icon="fa-bed"
data-off-color="#FA5882"
class="bigger"></div>
</li>
<li data-row="2" data-col="2" data-sizex="1" data-sizey="1">
<header>Fenster</header>
<div data-type="symbol" data-device="Fensterkontakt.Schlafzimmer"
data-get-on='["geöffnet","geschlossen"]'
data-icons='["ftui-window warn","ftui-window"]'
data-on-backgoundcolor="blue" data-off-backgroundcolor="gray"
data-on-colors='["blue","gray"]'
class="bigger"></div>
</li>
<li data-row="2" data-col="3" data-sizex="1" data-sizey="1">
<header>Deckenlicht</header><div class="cell centered">
<div data-type="switch" data-device="#" class="bigger"></div>
</div>
</li>
<li data-row="2" data-col="4" data-sizex="1" data-sizey="1">
<header>Oberlicht</header><div class="cell centered">
<div data-type="switch" data-device="Schrankbeleuchtung" class="bigger"></div>
</div>
</li>
<li data-row="2" data-col="5" data-sizex="1" data-sizey="1">
<header>Nachtlich Bj.</header><div class="cell centered">
<div data-type="switch" data-device="#" class="bigger"></div>
</div>
</li>
<li data-row="2" data-col="6" data-sizex="1" data-sizey="1">
<header>Nachtlicht Ag.</header><div class="cell centered">
<div data-type="switch" data-device="#" class="bigger"></div>
</div>
</li>
<li data-row="2" data-col="8" data-sizex="2" data-sizey="1">
<header>HEIZUNG Sch.</header>
<div class="container">
<div class="left">
<div data-type="thermostat"
data-device="Schlafzimmer.Wandthermostat"
data-get="desired-temp"
data-temp="measured-temp"
data-min="4"
data-off="off"
data-max="31"
data-boost="boostclass"
class="cell center">
<div data-type="label"
data-device="Schlafzimmer.Wandthermostat"
data-get="humidity"
data-unit=" %"
class="cell small"></div>
</div>
</div>
<div class="container">
<div class="label" class="cell"> </div>
<div data-type="label"
data-device="#"
data-get="batteryLevel"
data-unit="V"
class="darker narrow"></div>
<div class="label" class="cell"> </div>
<div data-type="label"
data-device="Schlafzimmer.Wandthermostat"
data-get="controlMode"
class="darker narrow"></div>
<div class="label" class="cell"> </div>
<div data-type="label"
data-device="Schlafzimmer.Wandthermostat"
data-get="boostTime"
class="darker narrow"></div>
<div class="label" class="cell"> </div>
<div data-type="label"
data-device="Schlafzimmer.Wandthermostat"
data-get="battery"
data-limits='["low","ok"]'
data-colors='["red","green"]'
class="darker narrow"></div>
<div class="label" class="cell"> </div>
<div data-type="label"
data-device="Schlafzimmer.Wandthermostat"
data-get="measured-temp"
data-unit=" °C"
class="darker narrow"></div>
<div class="label" class="cell"> </div>
</div>
</div>
</li>
<li data-row="2" data-col="7" data-sizex="1" data-sizey="1">
</li>
<li data-row="4" data-col="1" data-sizex="1" data-sizey="1">
<header>Ben</header>
<div data-type="symbol"
data-icon="fa-child"
data-off-color="#0000cd"
class="bigger"></div>
</li>
<li data-row="4" data-col="2" data-sizex="1" data-sizey="1">
<header>Fenster</header>
<div data-type="symbol" data-device="Fensterkontakt.Ben"
data-get-on='["geöffnet","geschlossen"]'
data-icons='["ftui-window warn","ftui-window"]'
data-on-backgoundcolor="blue" data-off-backgroundcolor="gray"
data-on-colors='["blue","gray"]'
class="bigger"></div>
</li>
<li data-row="4" data-col="3" data-sizex="1" data-sizey="1">
<header>Deckenlicht</header><div class="cell centered">
<div data-type="switch" data-device="#" class="bigger"></div>
</div>
</li>
<li data-row="4" data-col="4" data-sizex="2" data-sizey="1">
<header>HEIZUNG B.</header>
<div class="container">
<div class="left">
<div data-type="thermostat"
data-device="Ben.Wandthermostat"
data-get="desired-temp"
data-temp="measured-temp"
data-min="4"
data-off="off"
data-max="31"
data-boost="boostclass"
class="cell center">
<div data-type="label"
data-device="Ben.Wandthermostat"
data-get="humidity"
data-unit=" %"
class="cell small"></div>
</div>
</div>
<div class="container">
<div class="label" class="cell"> </div>
<div data-type="label"
data-device="#"
data-get="batteryLevel"
data-unit="V"
class="darker narrow"></div>
<div class="label" class="cell"> </div>
<div data-type="label"
data-device="Ben.Wandthermostat"
data-get="controlMode"
class="darker narrow"></div>
<div class="label" class="cell"> </div>
<div data-type="label"
data-device="Ben.Wandthermostat"
data-get="boostTime"
class="darker narrow"></div>
<div class="label" class="cell"> </div>
<div data-type="label"
data-device="Ben.Wandthermostat"
data-get="battery"
data-limits='["low","ok"]'
data-colors='["red","green"]'
class="darker narrow"></div>
<div class="label" class="cell"> </div>
<div data-type="label"
data-device="Ben.Wandthermostat"
data-get="measured-temp"
data-unit=" °C"
class="darker narrow"></div>
<div class="label" class="cell"> </div>
</div>
</div>
</li>
<li data-row="4" data-col="10" data-sizex="1" data-sizey="1">
<header>Rauchmelder</header><div class="cell centered">
<div data-type="switch"
data-device="FL.Rauchmelder"
data-on-color="FF4040"
data-get-on="ON"
data-off-color="green"
data-get-off="OFF"
data-icon="font1-fire"
class="bigger"></div></div>
</li>
<li data-row="5" data-col="1" data-sizex="1" data-sizey="1">
<header>Julia</header>
<div data-type="symbol"
data-icon="fa-female"
data-off-color="#ff1493"
class="bigger"></div>
</li>
<li data-row="5" data-col="2" data-sizex="1" data-sizey="1">
<header>Fenster</header>
<div data-type="symbol" data-device="Fensterkontakt.Julia"
data-get-on='["geöffnet","geschlossen"]'
data-icons='["ftui-window warn","ftui-window"]'
data-on-backgoundcolor="blue" data-off-backgroundcolor="gray"
data-on-colors='["blue","gray"]'
class="bigger"></div>
</li>
<li data-row="5" data-col="3" data-sizex="1" data-sizey="1">
<header>Deckenlicht</header><div class="cell centered">
<div data-type="switch" data-device="#" class="bigger"></div>
</div>
</li>
<li data-row="5" data-col="4" data-sizex="2" data-sizey="1">
<header>HEIZUNG J</header>
<div class="container">
<div class="left">
<div data-type="thermostat"
data-device="Julia.Wandthermostat"
data-get="desired-temp"
data-temp="measured-temp"
data-min="4"
data-off="off"
data-max="31"
data-boost="boostclass"
class="cell center">
<div data-type="label"
data-device="Julia.Wandthermostat"
data-get="humidity"
data-unit=" %"
class="cell small"></div>
</div>
</div>
<div class="container">
<div class="label" class="cell"> </div>
<div data-type="label"
data-device="#"
data-get="batteryLevel"
data-unit="V"
class="darker narrow"></div>
<div class="label" class="cell"> </div>
<div data-type="label"
data-device="Julia.Wandthermostat"
data-get="controlMode"
class="darker narrow"></div>
<div class="label" class="cell"> </div>
<div data-type="label"
data-device="Julia.Wandthermostat"
data-get="boostTime"
class="darker narrow"></div>
<div class="label" class="cell"> </div>
<div data-type="label"
data-device="Julia.Wandthermostat"
data-get="battery"
data-limits='["low","ok"]'
data-colors='["red","green"]'
class="darker narrow"></div>
<div class="label" class="cell"> </div>
<div data-type="label"
data-device="Julia.Wandthermostat"
data-get="measured-temp"
data-unit=" °C"
class="darker narrow"></div>
<div class="label" class="cell"> </div>
</div>
</div>
</li>
<li data-row="5" data-col="6" data-sizex="1" data-sizey="1"></li>
<li data-row="5" data-col="7" data-sizex="1" data-sizey="1"></li>
<li data-row="5" data-col="8" data-sizex="1" data-sizey="1">
<div class="container top-center"><header>Agnes</header><br>
<div class="round grow-1" data-type="image"
data-device="GtAG.Agnes"
data-state-get="state"
data-states='["present","absent"]'
data-classes='["","faded"]' data-width="80" data-height="80" data-url="userfoto/agnes.jpg"
class="bigger"></div></div>
</li>
<li data-row="5" data-col="9" data-sizex="1" data-sizey="1">
<div class="container top-center"><header>Björn</header><br>
<div class="round grow-1" data-type="image"
data-device="GtAG.Bjoern"
data-state-get="state"
data-states='["present","absent"]'
data-classes='["","faded"]' data-width="80" data-height="80" data-url="userfoto/bjoern.jpg"
class="bigger"></div></div>
</li>
<li data-row="5" data-col="10" data-sizex="1" data-sizey="1">
<div class="container top-center"><header>Opa</header><br>
<div class="round grow-1" data-type="image"
data-device="GtAG.Opa"
data-state-get="state"
data-states='["present","absent"]'
data-classes='["","faded"]' data-width="80" data-height="80" data-url="userfoto/adalbert.jpg"
class="bigger"></div></div>
</li>
<li data-row="3" data-col="1" data-sizex="1" data-sizey="1">
<header>Küche</header>
<div data-type="symbol"
data-icon="fa-cutlery"
data-off-color="#00FF40"
class="bigger"></div>
</li>
<li data-row="3" data-col="2" data-sizex="1" data-sizey="1">
<header>Fenster</header>
<div data-type="symbol" data-device="Fensterkontakt.Kueche"
data-get-on='["geöffnet","geschlossen"]'
data-icons='["ftui-window warn","ftui-window"]'
data-on-backgoundcolor="blue" data-off-backgroundcolor="gray"
data-on-colors='["blue","gray"]'
class="bigger"></div>
</li>
<li data-row="3" data-col="3" data-sizex="1" data-sizey="1">
<header>Deckenlicht</header>
<div class="cell centered">
<div data-type="switch"
data-device="LIGHTIFY7D0BDA0000261884"
data-on-backgoundcolor="blue"
data-off-backgroundcolor="gray"
class="bigger"></div>
</div>
</li>
<li data-row="3" data-col="4" data-sizex="1" data-sizey="1">
<header>Stehlampe</header>
<div class="cell centered">
<div data-type="switch"
data-device="StehLaKueche"
data-on-backgoundcolor="blue"
data-off-backgroundcolor="gray"
class="bigger"></div>
</div>
</li>
<li data-row="3" data-col="5" data-sizex="1" data-sizey="1">
<header>Schranklicht</header>
<div class="cell centered">
<div data-type="switch"
data-device='KuecheLED'
data-on-backgoundcolor="blue"
data-off-backgroundcolor="gray"
class="bigger"></div>
</div>
</li>
<li data-row="3" data-col="6" data-sizex="1" data-sizey="1">
<header>Fensterdeko</header>
<div class="cell centered">
<div data-type="switch"
data-device="Lampe_Kueche"
data-icon="fa-snowflake-o"
data-on-backgoundcolor="blue"
data-off-backgroundcolor="gray"
class="bigger"></div>
</div>
</li>
<li data-row="3" data-col="7" data-sizex="1" data-sizey="1">
<header>Radio</header>
<div class="cell centered">
<div data-type="switch"
data-device="Radio"
data-get"power"
data-icon="oa-it_radio"
class="bigger"></div>
</div>
</li>
<li data-row="3" data-col="8" data-sizex="1" data-sizey="1"></li>
<li data-row="3" data-col="9" data-sizex="1" data-sizey="1">
<header>Weihnachtsbaum</header><div class="cell centered">
<div data-type="switch" data-device="steckdose01" data-icon="fa-tree" class="bigger"></div>
</div>
</li>
<li data-row="4" data-col="6" data-sizex="1" data-sizey="1">
<header>Badezimmer</header>
<div data-type="symbol"
data-icon="fa-bath"
data-off-color="#00FFFF"
class="bigger"></div>
</li>
<li data-row="4" data-col="7" data-sizex="1" data-sizey="1">
<header>Fenster</header>
<div data-type="symbol" data-device="Fensterkontakt.Badezimmer"
data-get-on='["geöffnet","geschlossen"]'
data-icons='["ftui-window warn","ftui-window"]'
data-on-backgoundcolor="blue" data-off-backgroundcolor="gray"
data-on-colors='["blue","gray"]'
class="bigger"></div>
</li>
<li data-row="4" data-col="8" data-sizex="2" data-sizey="1">
<header>HEIZUNG Bad</header>
<div class="container">
<div class="left">
<div data-type="thermostat"
data-device="HM_3CDC88_Clima"
data-get="desired-temp"
data-temp="measured-temp"
data-min="4"
data-off="off"
data-max="31"
data-boost="boostclass"
class="cell center">
<div data-type="label"
data-device="HM_3CDC88_Clima"
data-get="humidity"
data-unit=" %"
class="cell small"></div>
</div>
</div>
<div class="container">
<div class="label" class="cell"> </div>
<div data-type="label"
data-device="HeizungsThermostatBad"
data-get="batteryLevel"
data-unit="V"
class="darker narrow"></div>
<div class="label" class="cell"> </div>
<div data-type="label"
data-device="HM_3CDC88_Clima"
data-get="controlMode"
class="darker narrow"></div>
<div class="label" class="cell"> </div>
<div data-type="label"
data-device="HM_3CDC88_Clima"
data-get="boostTime"
class="darker narrow"></div>
<div class="label" class="cell"> </div>
<div data-type="label"
data-device="HeizungsThermostatBad"
data-get="battery"
data-limits='["low","ok"]'
data-colors='["red","green"]'
class="darker narrow"></div>
<div class="label" class="cell"> </div>
<div data-type="label"
data-device="HM_3CDC88_Clima"
data-get="measured-temp"
data-unit=" °C"
class="darker narrow"></div>
<div class="label" class="cell"> </div>
</div>
</li>
</ul>
</div>
</div>
</body>
</html>
Mein aktueller Stand des Servermonitors als Kombination einiger Tips.
Danke@Eisix und Danke@Masterfunk
Grüße
Jörg
Hallo Björn,
darf ich Dir noch eine Frage stellen - wie stellst Du die Anzahl der Anwesenden fest?
Danke
Gruß Eddie
Klar, dafür ist ein Forum da. :-D
Ich habe 3 SiemensGTags im Einsatz. Anleitungen zum Einbinden gibt es hier im Forum zu genüge:
Zitatdefine GtAG.Bjoern PRESENCE lan-bluetooth 7C:XX:XX:XX:90:FC 192.168.178.51:5333 60
attr GtAG.Bjoern room Anwesenheit
define GtAG.Agnes PRESENCE lan-bluetooth 7C:xx:xx:xx:91:A3 192.168.178.51:5333 60
attr GtAG.Agnes room Anwesenheit
define GtAG.Opa PRESENCE lan-bluetooth 7C:xx:xx:xx:xx:00 192.168.178.51:5333 60
attr GtAG.Opa room Anwesenheit
define AnzahlAnwesende dummy
attr AnzahlAnwesende readingList Zaehler
attr AnzahlAnwesende room Anwesenheit,System
attr AnzahlAnwesende setList state Zaehler
attr AnzahlAnwesende userReadings Zaehler
define nt_AnzahlAnwesende notify (GtAG.*):.* {\
my $bisherigeAnwesende = ReadingsVal("AnzahlAnwesende",$NAME,0);;\
my $Wert=ReadingsVal("AnzahlAnwesende","Zaehler",0);;\
if($EVENT eq "present" && $bisherigeAnwesende ne "present")\
{$Wert = $Wert+1;;\
fhem("setreading AnzahlAnwesende Zaehler $Wert");;\
fhem("setreading AnzahlAnwesende $NAME present");;\
fhem("set AnzahlAnwesende $Wert");;\
} \
elsif($EVENT eq "absent" && $bisherigeAnwesende ne "absent") \
{$Wert = $Wert-1;;\
fhem("setreading AnzahlAnwesende Zaehler $Wert");;\
fhem("set AnzahlAnwesende $Wert");;\
fhem("setreading AnzahlAnwesende $NAME absent");;\
}\
}
attr nt_AnzahlAnwesende room Anwesenheit,System
Schau mal ob das reicht.
Nachdem mir dieses Forum schon unglaublich geholfen hat, möchte ich gerne meinen aktuellen Stand meines Heim-Projektes teilen... Vielen Dank an die vielen Vorlagen hier im Thread... Ohne Euch hätte ich es definitiv nicht geschafft, ein Layout zu finden, was meinen Geschmack voll trifft.
Aktuell habe ich zwar noch viel Arbeit vor mir, aber der Anfang ist für mein Empfinden schon sehr erfolgreich. Immerhin beschäftige ich mich erst seit ca. 4 Wochen mit FHEM. Bin echt begeistert!!
Hey Mr.Fish!
Kannst Du mir deinen Code für "es läuft" zur Verfügung stellen?
Wie hast Du die Empfangsqualität abgefragt? Welchen SAT Receiver verwendest du?
Danke.
Zitat von: bjoernbo am 08 Dezember 2016, 06:23:43
Hey Mr.Fish!
Kannst Du mir deinen Code für "es läuft" zur Verfügung stellen?
Wie hast Du die Empfangsqualität abgefragt? Welchen SAT Receiver verwendest du?
Danke.
Ja klar. Ich verwende einen Yamaha-AV-Reciever. Der bietet die Information in den Readings.
Der Code dazu:
Zitat
<section>
<header class="large">Es läuft</header>
<div class="col-1-1">
<div data-type="label"
data-device="EGWohnAVReciever_Zone2"
data-get="currentStation"
class="large bottom inline thin">
</div>
</div>
<div class="newline"></div>
<div class="col-1-1">
<div data-type="label"
data-device="EGWohnAVReciever_Zone2"
data-get="currentTitle"
class="bottom inline thin">
</div>
</div>
</section>
Ähnlich ist es mit der Empfangsqualität. Ich habe eine GigaBlue Quad Plus. Dort bekomme ich über
die Readings und das Plugin "Satfinder" in der GigaBlue die aktuelle Empfangsstärke des aktuell laufenden Senders.
Zitat
<section>
<!-- Aufnahmen -->
<div class="col-1-4">
<div data-type="popup" data-height="250px" data-width="300px" class="bottom inline" data-mode="fade">
<div data-type="symbol"
data-icon="oa-time_calendar"
class="bottom inline">
</div>
<div data-type="label" class="bottom thin">Aufnahmen</div>
<div class="dialog">
<div class="centered">
<div class="big center top-space">Aufnahme-Info</div><br>
<div class="center">
<div data-type="label" class="cell">
<div data-type="label" class="inline cell">Nächste Aufnahme:
<div class="newline"></div>
<div data-type="label"
data-device="GigaBlue"
data-get="recordings_next_name"
class="large inline cell">
</div>
</div>
</div>
</div>
</div>
<div class="col-1-1">
<div data-type="label"
data-device="GigaBlue"
data-get="recordings_next_servicename"
class="bottom inline">
</div>
<div data-type="label"
data-device="GigaBlue"
data-get="recordings_next_hr"
class="bottom inline">
</div>
</div>
</div>
</div>
</div>
<!-- Empfang-Infos -->
<div class="col-1-4">
<div data-type="popup" data-height="200px" data-width="280px" class="bottom inline" data-mode="fade">
<div data-type="symbol"
data-icon="oa-it_satellite_dish"
class="bottom inline">
</div>
<div data-type="label" class="bottom thin">Empfang</div>
<div class="dialog">
<div class="centered">
<div class="big center top-space">Empfang-Info</div><br>
<div class="center">
<div data-type="label" class="cell">
<div data-type="label" class="inline cell">Empangsstärke:
<div data-type="label"
data-device="GigaBlue"
data-get="snr"
data-unit=" %"
class="big">
</div>
</div>
</div>
</div>
</div>
<div class="col-1-1">
<div data-type="label"
data-device="GigaBlue"
data-get="servicename"
class="bottom inline">
</div>
<div data-type="label"
data-device="GigaBlue"
data-get="snrdb"
data-unit=" dB"
class="bottom inline">
</div>
</div>
</div>
</div>
</div>
</section>
Hallo Björn,
ich nurze das Modul Presence nicht, sonder das Roommate Modul und habe den Code wie folgt für mich angepasst:
define AnzahlAnwesende dummy
attr AnzahlAnwesende readingList Zaehler
attr AnzahlAnwesende setList state Zaehler
attr AnzahlAnwesende userReadings Zaehler
define nt_AnzahlAnwesende notify (rr_Mate1|rr_Mate2|rr_Mate3|rr_Mate4) {\ my $bisherigeAnwesende = ReadingsVal("AnzahlAnwesende",$NAME,0);;\ my $Wert=ReadingsVal("AnzahlAnwesende","Zaehler",0);;\ if($EVENT eq "home" && $bisherigeAnwesende ne "home")\ {$Wert = $Wert+1;;\ fhem("setreading AnzahlAnwesende Zaehler $Wert");;\ fhem("setreading AnzahlAnwesende $NAME home");;\ fhem("set AnzahlAnwesende $Wert");;\ } \ elsif($EVENT eq "absent" && $bisherigeAnwesende ne "absent") \ {$Wert = $Wert-1;;\ fhem("setreading AnzahlAnwesende Zaehler $Wert");;\ fhem("set AnzahlAnwesende $Wert");;\ fhem("setreading AnzahlAnwesende $NAME absent");;\ }\ }
Leider wird der Zähler nicht erhört. Ich habe aber, damit ich diesen Thread nicht zu sehr Off Topic belaste, einen eigenen Thread unter Anfängerfragen index.php/topic,62160.0.html (http://index.php/topic,62160.0.html) aufgemacht
Vielen dank für das Teilen.
Gruß Eddie
Zitat von: Garbsen am 08 Dezember 2016, 09:36:35
Wie geht das?
Ohne zu wissen, wie Du Deine Seiten genau angelegt hast, ist das schwer zu erraten ;)
Bei mir jedenfalls öffnen alle Seiten in der WebApp auch in selbiger, niemals in Safari. Allerdings nutze ich PageTab, nicht PageButton.
Grüße
Martin
Ich hätte da mal eine Frage zum widget "checkbox":
Ich habe für eine Gerät eine Zeitschaltung hinterlegt.
Diese kennt den Status"inactive" sowie "Next: 16:30:00". Wie muss das array aussehen, sodass ich nicht "Next: 16:30:00" fest hinterlegen muss?
Mit '["!inactive","inactive"]' hat es leider nicht geklappt auch mit * funktioniert es leider nicht.
Zitat<div data-type="checkbox"
data-device="abends_Stern_an"
data-get="state"
data-background-color-off="grey"
data-background-color-on="grey"
data-states='["*","inactive"]'
data-get-on="active"
data-get-off="inactive"
data-on-color="green"
data-off-color="red"
class="small"></div>
ich habe es so gelöst:
<div data-type="checkbox" data-device='BeforeGettingUp'
data-get-on="!off" data-get-off="inactive"
data-set-on="active" data-set-off="inactive"
class="col-1-6"></div>
SUPER DANKE! Das war's, setstate !
Zitat<div data-type="checkbox"
data-device="abends_Stern_an"
data-background-color-off="grey"
data-background-color-on="grey"
data-on-color="green"
data-off-color="red"
data-get-on="!off" data-get-off="inactive"
data-set-on="active" data-set-off="inactive"
class="small"></div>
Hi Mr Fisch,
könntest du uns alle deine Html Files zu Verfügung stellen, die APP sieht super aus.
gruss
Zitat von: lewej am 08 Dezember 2016, 19:23:07
Hi Mr Fisch,
könntest du uns alle deine Html Files zu Verfügung stellen, die APP sieht super aus.
gruss
dito, mich würde code der menueleiste interessieren
Zitat von: chris1284 am 08 Dezember 2016, 22:29:54
dito, mich würde code der menueleiste interessieren
Ich werde am Wochenende meine Codes hochladen. Bin gerade beruflich noch unterwegs! Momentan verbringe ich noch sehr viel Arbeit in den Codes.
Ich werde in nächster Zeit öfters updates (wenn gewünscht) der codes bereitstellen.
Man müsste mal überlegen ob und wie man eine art Galerie erstellen könnten. Darin sollte jeder sein FTUI mit entsprechenden Hardcopys und dazugehörigem Code ablegen.
Denn, es ist schwierig auf über 40 Seiten den Überblick zu behalten. Die einen mögen den die ICE-Style die anderen den White oder Black Style. und manch einer hat sogar noch was ganz anderes kreiert.
Hallo Björn,
hast Du deine CSS Files angepasst? Bei mir werden die Container mit den Thermostat, sehr verzehrt, die passen von der Höhe nicht rein und daher wird die ganze Zelle höher als der Rest.
Danke Gruß Eddie
Zitat von: bjoernbo am 09 Dezember 2016, 18:46:37
Man müsste mal überlegen ob und wie man eine art Galerie erstellen könnten. Darin sollte jeder sein FTUI mit entsprechenden Hardcopys und dazugehörigem Code ablegen.
Denn, es ist schwierig auf über 40 Seiten den Überblick zu behalten. Die einen mögen den die ICE-Style die anderen den White oder Black Style. und manch einer hat sogar noch was ganz anderes kreiert.
Super Vorschlag! Wenn sich das umsetzen lässt, wäre es eine super Übersicht für alle die sich ihr FTUI aus den einzelnen Vorlagen zusammbasteln. Hätte mir den Einstieg mit Sicherheit auch erleichtert 😌
Hey meddie, ja habe ich!
meine gridster-Einstellungen habe ich angepasst in der index.html. Dort findest Du folgenden Eintrag:
Zitat<meta name="widget_base_width" content="118">
<meta name="widget_base_height" content="124">
Spiele mal mit diesen Werten rum, dann sollte es bald passen ;-)
Zitat von: bjoernbo am 09 Dezember 2016, 18:46:37
Man müsste mal überlegen ob und wie man eine art Galerie erstellen könnten. Darin sollte jeder sein FTUI mit entsprechenden Hardcopys und dazugehörigem Code ablegen.
Dazu gibt es doch ein Projekt auf GitHub.: https://github.com/ovibox/fhem-ftui-user-demos (https://github.com/ovibox/fhem-ftui-user-demos)
So wie ich das sehe hat sich da nur seit Jahren nichts mehr getan.
Laufende Bilder sagen oft mehr...
Ich habe mal ein Video meiner aktuellen Installation gemacht:
https://youtu.be/E4nZGjGl0lo (https://youtu.be/E4nZGjGl0lo)
Gruß Detlef
Super ! Ich denke da werde ich mir noch das ein oder andere "abkupfern" ;)
Zitat von: Masterfunk am 10 Dezember 2016, 16:32:41
Laufende Bilder sagen oft mehr...
Ich habe mal ein Video meiner aktuellen Installation gemacht:
https://youtu.be/E4nZGjGl0lo (https://youtu.be/E4nZGjGl0lo)
Gruß Detlef
Hallo Detlef,
danke für die Mühe.
Schon Klasse, wenn man 21" Platz auf dem tablet hat :-)
Grüße
Jörg
Zitat von: jnewton957 am 10 Dezember 2016, 20:26:53
Schon Klasse, wenn man 21" Platz auf dem tablet hat :-)
verleitet aber schnell viel zu viel anzuzeigen (fhem in der ui, update, backup, systemfunktionen allgemein )... ich finds aber schön mal die uis der anderen live zu sehen und es sind echt nette lösungen für einige sachen dabei detlef
Hallo zusammen.
ich habe in der Wetterseite die Abbildung der Mondpahse integriert.
<li class="halbTransparent" data-row="5" data-col="7" data-sizex="1" data-sizey="1">
<header>MOND</header>
<div data-type="image" data-device="mondphasen" data-get="ftui"
data-size="100px" class=""></div>
</li>
Das ist mit sizex="1" und sizey="1" recht klein.
Nun möchte ich entweder in einem zweiten Seite (link auf mond.html) oder noch besser mit Klick auf den Mond als z.B. popup das größere Bild haben.
Reading ftui ist /fhem/images/phasenbilder/95.png
FYI: 100 Bilder sind jeweils die aktuelle Mondphase.
Wie kann man das bewerkstelligen ?
Danke
Grüße
Jörg
aus welchem modul ziehst du die daten zur mondphase?
Zitat von: chris1284 am 11 Dezember 2016, 09:44:38
aus welchem modul ziehst du die daten zur mondphase?
59_Moon.pm
https://forum.fhem.de/index.php/topic,37467.msg431487.html#msg431487 (https://forum.fhem.de/index.php/topic,37467.msg431487.html#msg431487)
Aber darauf achten, dass man vorher die Zusatmodule mit cpan eingebunden hat. Steht aber alles im thread.
Grüße
Jörg
Hallo Jörg,
das sieht großartig aus. Könntest du bitte den Code teilen?
Danke schön.
Viele Grüsse
Marcus
Zitat von: jnewton957 am 07 Dezember 2016, 21:14:05
Mein aktueller Stand des Servermonitors als Kombination einiger Tips.
(https://forum.fhem.de/index.php?action=dlattach;topic=37378.0;attach=63689)
Danke@Eisix und Danke@Masterfunk
Grüße
Jörg
Zitat von: jnewton957 am 11 Dezember 2016, 08:52:51
Hallo zusammen.
ich habe in der Wetterseite die Abbildung der Mondpahse integriert.
<li class="halbTransparent" data-row="5" data-col="7" data-sizex="1" data-sizey="1">
<header>MOND</header>
<div data-type="image" data-device="mondphasen" data-get="ftui"
data-size="100px" class=""></div>
</li>
Das ist mit sizex="1" und sizey="1" recht klein.
Nun möchte ich entweder in einem zweiten Seite (link auf mond.html) oder noch besser mit Klick auf den Mond als z.B. popup das größere Bild haben.
Reading ftui ist /fhem/images/phasenbilder/95.png
FYI: 100 Bilder sind jeweils die aktuelle Mondphase.
Wie kann man das bewerkstelligen ?
Basis Layout eines Popup sieht so aus.
<div data-type="popup" data-height="150px" data-width="250px">
<div><!-- click object to open the popup --></div>
<div class="dialog">
<header>DIALOG</header>
<div><!-- widget(s) inside the popup dialog --></div>
</div>
</div>
Außen macht man einen kleines Vorschau Bild zum Klicken. Innen ein großes.
Zitat von: setstate am 11 Dezember 2016, 10:33:51
Basis Layout eines Popup sieht so aus.
Außen macht man einen kleines Vorschau Bild zum Klicken. Innen ein großes.
Danke @setstate
<li class="halbTransparent" data-row="5" data-col="7" data-sizex="1" data-sizey="1">
<header><div data-type="label" data-device="mondphasen" data-get="STATE" class=""></div></header>
<div data-type="popup" data-height="650px" data-width="650px">
<div><div data-type="image"
data-device="mondphasen"
data-get="ftui"
data-size="100px">
</div></div>
<div class="dialog">
<header><div data-type="label" data-device="mondphasen" data-get="STATE" class=""></div></header>
<div><div data-type="image"
data-device="mondphasen"
data-get="ftui"
data-size="600px">
</div></div>
</div>
</div>
</li>Funktioniert einwandfrei.
==> Steigerung.
Wenn ich im popup nun auf den Mond klicke, verlinkt er auf mond.html
Wie mache ich das ?
Grüße
Jörg
Hallo,
habe gleich noch eine Frage. Wenn ich das in FHEM einfüge, bekomme ich eine sehr große Anzahl an Updates angezeigt (ca. 1800), wenn ich allerdings manuell in der Fhem Befehlszeile "Update" eingebe, steht dort "Nothing to Do", d.h. es gibt keine Updates. In opt/fhem/FHEM sind beide Textdateien vorhanden. Ist das irgendwie erklärbar?
Grüsse
Marcus
Zitat von: Eisix am 03 Dezember 2016, 10:15:35
define UPDATE CustomReadings
attr UPDATE event-on-update-reading FHEM,FTUI,ALL
attr UPDATE interval 21600
attr UPDATE readingDefinitions FHEM:qx(wget -qO - http://fhem.de/fhemupdate/controls_fhem.txt| diff - /opt/fhem/FHEM/controls_fhem.txt |grep ">"|grep "UPD"|wc -l),FTUI:qx(wget -qO - https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt| diff - /opt/fhem/FHEM/controls_fhemtabletui.txt |grep ">" |grep "UPD"|wc -l),ALL:{ReadingsNum($name, "FHEM", 0) + ReadingsNum($name, "FTUI", 0)}
Zitat von: Aeroschmelz am 11 Dezember 2016, 12:08:57
Hallo,
habe gleich noch eine Frage. Wenn ich das in FHEM einfüge, bekomme ich eine sehr große Anzahl an Updates angezeigt (ca. 1800), wenn ich allerdings manuell in der Fhem Befehlszeile "Update" eingebe, steht dort "Do Nothing", d.h. es gibt keine Updates. In opt/fhem/FHEM sind beide Textdateien vorhanden. Ist das irgendwie erklärbar?
Grüsse
Marcus
Hallo Marcus,
habe es mir auch gerade angesehen. Gleiches Ergebnis: FHEM 1834 Updates und FTUI 0
Jörg
Hallo,
das online controllfile ist nicht mehr mit wget abzurufen.
wget http://fhem.de/fhemupdate/controls_fhem.txt
--2016-12-11 14:20:34-- http://fhem.de/fhemupdate/controls_fhem.txt
Resolving fhem.de (fhem.de)... 88.99.31.202, 2a01:4f8:10a:806::2
Connecting to fhem.de (fhem.de)|88.99.31.202|:80... connected.
HTTP request sent, awaiting response... 403 Forbidden
2016-12-11 14:20:34 ERROR 403: Forbidden.
Dadurch werden alle Zeilen des lokalen files beim diff gezählt.
Mal sehen ob das temporär oder dauerhaft ist. ansonsten muss das custom reading auf den Perlcode vom update umgestellt werden.
Gruß
Eisix
Hallo zusammen,
ich habe eine Frage, ich passe gerade mein FTUI an, mir hat die Lösung vom Björn recht gut gefallen, und er hat ja hier seinen Code geteilt, er hat ja oben bei der Überschrift: Übersicht rechts daneben die Icons für die Müllabfuhr sowie Anwesenheit,Fenster usw. Außerdem vrwendet der Björn ja Bilder in den Widgets für Personen die Anwesend sind, ich würde gerne auch Bilder bei mir rein tun aber nicht als Widget sondern oben in diese Leiste.
siehe Bild (ich bin gerade unterwegs und kann kein Bild von mir reinstellen, daher verwende ich zur Verdeutlichung das Bild vom Björn)
https://forum.fhem.de/index.php?action=dlattach;topic=37378.0;attach=63646 (https://forum.fhem.de/index.php?action=dlattach;topic=37378.0;attach=63646)
Ich habe dazu diesen Coder verwendet
<div data-type="image"
data-width="25" data-height="25"
data-url="pics/rr1.jpg"
</div>
Leider wird mir das Bild oben in der Leiste zwar angezeigt aber ist ist in der Zeile nicht mittig ausgerichtet sondern ist direkt oben in der Zeile die nachfolgenden Icons sind aber mittig.
Wenn ich ein top-space einsetze dann hat zwar mein Bild etwas Abstand von Oben aber dafür sind dann die restlichen Icons auch etwas versetzt.
Habt Ihr ein Tipp für mich wie ich das Bild und die Icons sauber in die Zeile bekomme
Danke
Gruß Eddie
bau mal ein ....
Zitat
<div class="cell centered>
<div data-type="image"
data-width="25" data-height="25"
data-url="pics/rr1.jpg"
</div>
</div>
ggf. nach dem
Zitat<div class="cell centered>
noch ein oder zwei
Zitat</br>
ein.
Im Grunde geht das so am besten.
<header id="header-nav" class="bg-lightgray fixed row">
<div class="center">
<div data-type="slideout" class="col-1-6 big center-align notouch"></div>
<div id="linkname" class="col-1-4 large bold center-align middle"></div>
<div class="round" data-type="image" data-device="ftuitest" data-state-get="homie1" data-states='["anwesend","abwesend"]' data-classes='["","faded"]' data-width="30" data-height="30" data-url="http://lorempixel.com/150/150/people/1"></div>
</div>
</header>
Ich weiß aber nicht, was du von Björn mit in die Header-Leiste reingenommen hast. Da sind noch kleine Ungereimtheiten drin, die das wieder durcheinander bringen könnten. z.B.
"<div class="right top space-2x">Außen</br>"
und col-1-x mit inline vermischt und col-1-9 gibt es nicht in der Standard-CSS ...
Wenn es nicht klappt, musst du mal deinen Code-Teil posten
hey setstate, dass mit dem "col" ... hatte ich leider nicht verstanden und war froh, dass es so halbwegs funktioniert, obwohl ich weiß das der Code nicht sauber ist !
Zitat von: bjoernbo am 11 Dezember 2016, 15:34:41
hey setstate, dass mit dem "col" ... hatte ich leider nicht verstanden und war froh, dass es so halbwegs funktioniert, obwohl ich weiß das der Code nicht sauber ist !
kurz erklärt: Damit wird die relative Weite festgelegt.
Aber: Alle col-* innerhalb einer "row" müssen 1 ergeben. -> 1/2 + 1/4 +1/4 = 1/1 (50% + 25% +25% = 100%)
Wenn nicht-col Elemente hinzukommen, geht die Rechnung nicht mehr auf und man bekommt etwas Unvorhergesehenes
ZitatHallo,
das online controllfile ist nicht mehr mit wget abzurufen.
Code: [Auswählen]
wget http://fhem.de/fhemupdate/controls_fhem.txt
--2016-12-11 14:20:34-- http://fhem.de/fhemupdate/controls_fhem.txt
Resolving fhem.de (fhem.de)... 88.99.31.202, 2a01:4f8:10a:806::2
Connecting to fhem.de (fhem.de)|88.99.31.202|:80... connected.
HTTP request sent, awaiting response... 403 Forbidden
2016-12-11 14:20:34 ERROR 403: Forbidden.
Dadurch werden alle Zeilen des lokalen files beim diff gezählt.
Mal sehen ob das temporär oder dauerhaft ist. ansonsten muss das custom reading auf den Perlcode vom update umgestellt werden.
Gruß
Eisix
Hängt doch sicherlich hiermit zusammen, oder ? https://forum.fhem.de/index.php/topic,62352.0.html (https://forum.fhem.de/index.php/topic,62352.0.html)
Zitat von: Eisix am 11 Dezember 2016, 14:25:07
Hallo,
das online controllfile ist nicht mehr mit wget abzurufen.
wget http://fhem.de/fhemupdate/controls_fhem.txt
--2016-12-11 14:20:34-- http://fhem.de/fhemupdate/controls_fhem.txt
Resolving fhem.de (fhem.de)... 88.99.31.202, 2a01:4f8:10a:806::2
Connecting to fhem.de (fhem.de)|88.99.31.202|:80... connected.
HTTP request sent, awaiting response... 403 Forbidden
2016-12-11 14:20:34 ERROR 403: Forbidden.
Dadurch werden alle Zeilen des lokalen files beim diff gezählt.
Mal sehen ob das temporär oder dauerhaft ist. ansonsten muss das custom reading auf den Perlcode vom update umgestellt werden.
Gruß
Eisix
Mit curl gehts noch.
hier der "Workaround":
FHEM:qx(curl http://fhem.de/fhemupdate/controls_fhem.txt| diff - /opt/fhem/FHEM/controls_fhem.txt |grep ">"|grep "UPD"|wc -l)Gruß Detlef
Hi,
hier mal meine Lösung für Sonos und Videorecorder:
Gruß Andreas
Zitat von: Sturi2011 am 11 Dezember 2016, 18:14:10
Hi,
hier mal meine Lösung für Sonos und Videorecorder:
Gruß Andreas
könntest du die HTML vom Videorecoder hochladen? sieht cool aus =) und falls da abgesehen vom Recorder noch etwas in fhem nötig ist(EPG?) wäre das auch sau genial :) :) :) :)
Beste Grüße
Andy
Hallo Andreas,
die Video/EPG Geschichte ist mittels iframe direkt das webif des Video/Sat-Gerätes, oder?
Hi,
es handelt sich um einen IFrame. Der Videorecorder ist ein ArgusTV, der direkt auf meinem FHEM Server läuft.
Als Fhem Server läuft bei mir ein Windows Server 2012R2. Fhem läuft sehr stabil in einer Cygwin Umgebung.
Die Hauptarbeit war das Interface des ArgusTV so anzupassen, dass es sich vernünftig in das Tablet UI
integrieren lässt. Das AurgusTV zum größten Teil Clossed Source ist, würde ich die gepatchten Files hier ungern
veröffentlichen. Wenn jedoch jemand Bedarf hat, kann ich sie ihm gerne per PM zukommen lassen ;)
Gruß Andreas
Ich habe die letzten Tage etwas mehr an den mobile-Seiten gebaut.
Grundidee ist hier aber nicht grundsätzlich die Steuerung des FHEM, sondern tatsächlich nur die Dinge darzustellen, die ich auch mobil (also von außerorts) brauche oder haben möchte.
Den Servermonitor (@Eisix) habe ich entsprechend in einen Fhemstatus und RPistatus geteilt. Bei RPi stimmt aber der Wert für den angeschlossenen USB STic nicht. Muss ich noch das coding suchen/probieren.
Den Status der gateways habe ich auch nicht nicht korrekt angepasst, da ich die nicht alle kenne. Bin ja froh, dass die aktuell alle laufen.
fhemstatus
<li class="halbTransparent border-left border-right" data-row="2" data-col="1" data-sizex="4" data-sizey="1">
<header>Gateways</header>
<div class="inline cell left-space">
<div data-device="nano433" data-type="symbol"
data-get-on='["Initialized","init|disconnected"]'
data-icons='["fs-cul","fs-cul fa-blink"]'
data-on-colors='["#aa6900","red"]' class="larger">
</div>
<div data-type="label" class="narrow">433</div>
</div>
<div class="inline cell left-space">
<div data-device="HM868" data-type="symbol"
data-get-on='["Initialized","init|disconnected"]'
data-icons='["fs-cul_868","fs-cul_868 fa-blink"]'
data-on-colors='["#aa6900","red"]' class="larger">
</div>
<div data-type="label" class="narrow">HM</div>
</div>
<div class="inline cell left-space">
<div data-device="JeeLinkClone" data-type="symbol"
data-get-on='["initialized","init|disconnected"]'
data-icons='["fs-cul_usb","fs-cul_usb fa-blink"]'
data-on-colors='["#aa6900","red"]' class="larger">
</div>
<div data-type="label" class="narrow">PCA</div>
</div>
<div class="inline cell left-space">
<div data-device="CUL868" data-type="symbol"
data-get-on='["Initialized","init|disconnected"]'
data-icons='["fs-cul_usb","fs-cul_usb fa-blink"]'
data-on-colors='["#aa6900","red"]' class="larger">
</div>
<div data-type="label" class="narrow">ESA</div>
</div>
</li>
<li class="halbTransparent border-left" data-row="3" data-col="1" data-sizex="4" data-sizey="1">
<header>Gateways</header>
<div class="inline cell left-space">
<div data-device="MySensorGateway" data-type="symbol"
data-get-on='["startup complete","disconnected","ERROR-Overload","Warning-HighLoad"]'
data-icons='["fs-hm_lan","fs-hm_lan fa-blink","fs-hm_lan fa-blink","fs-hm_lan"]'
data-on-colors='["#aa6900","red","yellow","yellow"]' class="larger">
</div>
<div data-type="label" class="narrow">MySensor</div>
</div>
<div class="inline cell left-space">
<div data-device="FIRMATA" data-type="symbol"
data-get-on='["Initialized","init|disconnected"]'
data-icons='["oa-message_socket","oa-message_socket fa-blink"]'
data-on-colors='["#aa6900","red"]' class="larger">
</div>
<div data-type="label" class="narrow">S0-Zaehler</div>
</div>
<div class="inline cell left-space">
<div data-device="DASH_Button" data-type="symbol"
data-get-on='["Initialized","absent"]'
data-icons='["fs-cul_usb","fs-cul_usb fa-blink"]'
data-on-colors='["#aa6900","red"]' class="larger">
</div>
<div data-type="label" class="narrow">DASH</div>
</div>
</li>
<li class="halbTransparent border-left" data-row="4" data-col="1" data-sizex="4" data-sizey="1">
<header>Backup / FHEM Version</header>
<div data-type="label" data-device="SYS_BackupRun"
data-get="STATE"
class="large">Status / last</div>
<div class="inline left-space-2x">
<div data-type="label" data-device="global" data-get="version" class="large top-space"></div></div>
</li>
<li class="halbTransparent border-left border-right" data-row="5" data-col="1" data-sizex="4" data-sizey="2">
<table style="border:1px solid grey; width:100%">
<tr>
<td style="border:2px solid grey;" class="A1"><center><div data-type="label" class="inline"><big>FHEM uptime<br></big></div>
</br>
<div data-type="label" data-device="sysmon" data-get="fhemuptime_text" class="small"></div>
</td>
<td style="border:2px solid grey;" class="B1"><center>
<div class="inline">
<div data-type="popup" data-draggable="true" data-height="100px" data-width="100px" class="white">
<div data-type="button" data-icon="fs-system_fhem" background-icon="-" class="cell mini"></div>
<div class="dialog dialogTransparent">
<div data-type="button" data-fhem-cmd="shutdown restart" data-icon="fa-check" background-icon="fa-circle" class="cell"></div>
<div data-type="label" class="">Sicher?</div>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td style="border:2px solid grey;" class="A2"><center>
<div class="inline">
<div data-type="button"
data-device="Update.Counter"
data-get="FHEM"
data-fhem-cmd=""
data-background-icon="fs-system_fhem"
data-on-background-color="#505050"
data-off-background-color="#505050"
data-icon="fa-refresh warn"
class="readonly mini warn"></div>
<div data-type="label" class="">FHEM</div>
</div>
<div class="inline">
<div data-type="button"
data-device="Update.Counter"
data-warn="FTUI"
data-fhem-cmd=""
data-background-icon="fs-system_fhem"
data-on-background-color="#505050"
data-off-background-color="#505050"
data-icon="fa-refresh warn"
class="readonly mini warn"></div>
<div data-type="label" class="">FTUI</div>
</div>
</td>
<td style="border:2px solid grey;" class="B2"><center>
<div data-type="popup" data-width="260px" data-height="120px">
<div data-type="symbol" data-device="UPDATE" data-get="ALL" data-background-icon="fa-circle" data-on-background-color="orange" data-off-background-color="orange" data-get-warn="(\d+)" data-icon="fa-refresh warn" class="inline warn"></div>
<div class="dialog">
<header>Update</header>
</br>
<div class="inline">
<div data-type="button"
data-device="UPDATE"
data-get="FHEM"
data-fhem-cmd="update fhem"
data-background-icon="fa-circle"
data-on-background-color="orange"
data-off-background-color="orange"
data-get-warn="(\d+)"
data-icon="fa-refresh warn"
class="warn"
></div>
<div data-type="label"><small>FHEM</small></div>
</div>
<div class="inline">
<div data-type="button"
data-device="UPDATE"
data-get="FTUI"
data-fhem-cmd="update fhemtabletui"
data-background-icon="fa-circle"
data-on-background-color="orange"
data-off-background-color="orange"
data-get-warn="(\d+)"
data-icon="fa-refresh warn"
class="warn"
></div>
<div data-type="label"><small>FTUI</small></div>
</div>
<div class="inline">
<div data-type="button"
data-device="UPDATE"
data-get="ALL"
data-fhem-cmd="update all"
data-background-icon="fa-circle"
data-on-background-color="orange"
data-off-background-color="orange"
data-get-warn="(\d+)"
data-icon="fa-refresh warn"
class="warn"
></div>
<div data-type="label"><small>All</small></div>
</div>
</div>
</div>
</td>
</tr>
</table>
</li>
RPiStauts:
<li class="halbTransparent border-left" data-row="2" data-col="1" data-sizex="2" data-sizey="1">
<header class="headerTransparent">TEMP Aktuell</header>
<div class="">
<div data-type="thermostat"
data-device="sysmon"
data-step="0.5"
data-min="0"
data-off="off"
data-max="100"
data-minColor="#4477FF"
data-maxColor="#FF0000"
data-bgColor="#bbbbbb"
data-boost="boost"
data-get="cpu_temp"
class="small readonly"></div>
</div>
</li>
<li class="halbTransparent border-left border-right" data-row="2" data-col="3" data-sizex="2" data-sizey="1">
<header class="headerTransparent">Durchschnitt</header>
<div class="">
<div data-type="thermostat"
data-device="sysmon"
data-step="0.5"
data-min="0"
data-off="off"
data-max="100"
data-minColor="#4477FF"
data-maxColor="#FF0000"
data-bgColor="#bbbbbb"
data-boost="boostclass"
data-get="cpu_temp_avg"
class="small readonly"></div>
</div>
</li>
<li class="halbTransparent border-left border-right" data-row="3" data-col="1" data-sizex="4" data-sizey="1">
<div class="inline">
<div data-type="knob"
data-device="SYSMON2"
data-get="CPU"
data-anglearc="360"
data-angleoffset="0"
data-min="0"
data-max="100"
data-fgcolor="#FA2828"
data-bgcolor="green"
class="mini readonly"
data-unit="%"
></div>
<div data-type="label">CPU</div>
</div>
<div class="inline">
<div data-type="knob"
data-device="SYSMON2"
data-get="Mem"
data-anglearc="360"
data-angleoffset="0"
data-min="0"
data-max="100"
data-bgcolor="green"
data-fgcolor="#FA2828"
class="mini readonly"
data-unit="%"
></div>
<div data-type="label">RAM</div>
</div>
<div class="inline">
<div class="top-space">
<div data-type="knob"
data-device="SYSMON2"
data-get="fs_root"
data-anglearc="360"
data-angleoffset="0"
data-min="0"
data-max="100"
data-bgcolor="green"
data-fgcolor="#FA2828"
class="mini readonly"
data-unit="%"
></div>
<div data-type="label">/root</div>
</div>
</div>
<div class="inline">
<div data-type="knob"
data-device="SYSMON2"
data-get="fs_mnt"
data-anglearc="360"
data-angleoffset="0"
data-min="0"
data-max="100"
data-bgcolor="green"
data-fgcolor="#FA2828"
class="mini readonly"
data-unit="%"
></div>
<div data-type="label">/USB</div>
</div>
<div class="inline">
<div data-type="knob"
data-device="SYSMON2"
data-get="fs_Daten"
data-anglearc="360"
data-angleoffset="0"
data-min="0"
data-max="100"
data-bgcolor="green"
data-fgcolor="#FA2828"
class="mini readonly"
data-unit="%"
></div>
<div data-type="label">/Daten</div>
</div>
</li>
<li class="halbTransparent border-left" data-row="4" data-col="1" data-sizex="2" data-sizey="1">
<header class="headerTransparent">NETZWERK</header>
<div class="">
<div class="cell">Upload:
</div>
<div data-type="label"
data-device="sysmon"
data-get="eth0"
data-part="2"
data-fix="0"
data-unit=" MB"
class="cell big"
style="color:#aa6900;">
</div>
</div>
</li>
<li class="halbTransparent border-left border-right" data-row="4" data-col="3" data-sizex="2" data-sizey="1">
<header class="headerTransparent">NETZWERK</header>
<div class="">
<div class="cell">Download:
</div>
<div data-type="label"
data-device="sysmon"
data-get="eth0"
data-part="5"
data-unit=" MB"
data-fix="0"
class="cell big orange">
</div>
</div>
</li>
<li class="halbTransparent border-left border-right" data-row="5" data-col="1" data-sizex="4" data-sizey="1">
<div class="top-space">
<div class="inline cell left-space-2x">
<div data-type="switch" data-device="FritzBox_7490"
data-get="box_wlan_2.4GHz"
data-warn="box_wlanCount"
data-set="wlan"
data-icon="-"
data-background-icon="fa-wifi"
class="warn big"></div>
<div data-type="label" >Wlan2.4</div>
</div>
<div class="inline cell left-space-2x">
<div data-type="switch" data-device="FritzBox_7490"
data-get="box_wlan_5GHz"
data-warn="box_wlanCount"
data-set="wlan"
data-icon="-"
data-background-icon="fa-wifi"
class="warn big"></div>
<div data-type="label" >Wlan5</div>
</div>
<div class="inline cell left-space-2x">
<div data-type="switch" data-device="FritzBox_7490"
data-get="box_guestWlan"
data-warn="box_guestWlanCount"
data-set="guestWlan"
data-icon="-"
data-background-icon="fa-wifi"
class="warn big"></div>
<div data-type="label" >Gäste-Wlan</div>
</div>
</div>
</li>
<li class="halbTransparent border-left border-right" data-row="6" data-col="1" data-sizex="4" data-sizey="1">
<table style="border:1px solid grey; width:100%">
<tr>
<td style="border:2px solid grey;" class="C1"><center><div data-type="label" class="inline"><big>Server uptime<br></big></div>
</br>
<div data-type="label" data-device="sysmon" data-get="uptime_text" class="small"></div>
</td>
<td style="border:2px solid grey;" class="C1"><center>
<div class="inline">
<div data-type="popup" data-draggable="true" data-height="100px" data-width="100px" class="white">
<div data-type="button" data-icon="fa-linux" background-icon="-" class="cell mini"></div>
<div class="dialog dialogTransparent">
<div data-type="button" data-fhem-cmd="set System.Reboot.Dummy on" data-icon="fa-check" background-icon="fa-circle" class="cell"></div>
<div data-type="label" class="">Sicher?</div>
</div>
</div>
</div>
</td>
</table>
</li>
TV: (Idee von bjoernbo auf gridster umgebaut und ohne popup und sections
<li class="halbTransparent border-left border-right" data-row="2" data-col="1" data-sizex="4" data-sizey="7">
<header class="headerTransparent">TV</header>
<table border="0px">
<tr><th>Sender</th><th>Aktuell</th><th>Next</th><th>Titel</th></tr>
<tr valign="top" bgcolor="#A4A4A4;">
<td rowspan="2" width="20%" align="top"><div data-type="image" class="cell" data-url="/images/default/tvmovie/tvlogo_das-erste_s.png" class="cell"></div></td>
<td rowspan="2" align="center"><div data-type="label" data-device="TV_Programme" data-get="ARD"></div></td>
<td rowspan="2" align="left" width="15%"><div data-type="label" data-device="TV_Programme" data-get="ARD_Nexttime"></div></td>
<td rowspan="2" align="center" width="40%"><div data-type="label" data-device="TV_Programme" data-get="ARD_Next"></div></td>
</tr>
<tr>
<td></td>
</tr>
<tr valign="top">
<td rowspan="2" width="20%" align="top"><div data-type="image" class="cell" data-url="/images/default/tvmovie/zdf.png" class="cell"></div></td>
<td rowspan="2" align="center"><div data-type="label" data-device="TV_Programme" data-get="ZDF"></div></td>
<td rowspan="2" align="left"><div data-type="label" data-device="TV_Programme" data-get="ZDF_Nexttime"></div></td>
<td rowspan="2" align="center"><div data-type="label" data-device="TV_Programme" data-get="ZDF_Next"></div></td>
</tr>
<tr>
<td></td>
</tr>
<tr valign="top" bgcolor="#A4A4A4;">
<td rowspan="2" width="20%" align="top"><div data-type="image" class="cell" data-url="/images/default/tvmovie/wdr.png" class="cell"></div></td>
<td rowspan="2" align="center"><div data-type="label" data-device="TV_Programme" data-get="WDR"></div></td>
<td rowspan="2" align="left"><div data-type="label" data-device="TV_Programme" data-get="WDR_Nexttime"></div></td>
<td rowspan="2" align="center"><div data-type="label" data-device="TV_Programme" data-get="WDR_Next"></div></td>
</tr>
<tr>
<td></td>
</tr>
<tr valign="top">
<td rowspan="2" width="20%" align="top"><div data-type="image" class="cell" data-url="/images/default/tvmovie/rtl.png" class="cell"></div></td>
<td rowspan="2" align="center"><div data-type="label" data-device="TV_Programme" data-get="RTL"></div></td>
<td rowspan="2" align="left"><div data-type="label" data-device="TV_Programme" data-get="RTL_Nexttime"></div></td>
<td rowspan="2" align="center"><div data-type="label" data-device="TV_Programme" data-get="RTL_Next"></div></td>
</tr>
<tr>
<td></td>
</tr>
<tr valign="top" bgcolor="#A4A4A4;">
<td rowspan="2" width="20%" align="top"><div data-type="image" class="cell" data-url="/images/default/tvmovie/sat1.png" class="cell"></div></td>
<td rowspan="2" align="center"><div data-type="label" data-device="TV_Programme" data-get="Sat1"></div></td>
<td rowspan="2" align="left"><div data-type="label" data-device="TV_Programme" data-get="Sat1_Nexttime"></div></td>
<td rowspan="2" align="center"><div data-type="label" data-device="TV_Programme" data-get="Sat1_Next"></div></td>
</tr>
<tr>
<td></td>
</tr>
<tr valign="top">
<td rowspan="2" width="20%" align="top"><div data-type="image" class="cell" data-url="/images/default/tvmovie/pro7.png" class="cell"></div></td>
<td rowspan="2" align="center"><div data-type="label" data-device="TV_Programme" data-get="Pro7"></div></td>
<td rowspan="2" align="left"><div data-type="label" data-device="TV_Programme" data-get="Pro7_Nexttime"></div></td>
<td rowspan="2" align="center"><div data-type="label" data-device="TV_Programme" data-get="Pro7_Next"></div></td>
</tr>
<tr>
<td></td>
</tr>
<tr valign="top" bgcolor="#A4A4A4;">
<td rowspan="2" width="20%" align="top"><div data-type="image" class="cell" data-url="/images/default/tvmovie/vox.png" class="cell"></div></td>
<td rowspan="2" align="center"><div data-type="label" data-device="TV_Programme" data-get="VOX"></div></td>
<td rowspan="2" align="left"><div data-type="label" data-device="TV_Programme" data-get="VOX_Nexttime"></div></td>
<td rowspan="2" align="center"><div data-type="label" data-device="TV_Programme" data-get="VOX_Next"></div></td>
</tr>
<tr>
<td></td>
</tr>
<tr valign="top">
<td rowspan="2" width="20%" align="top"><div data-type="image" class="cell" data-url="/images/default/tvmovie/rtl2.png" class="cell"></div></td>
<td rowspan="2" align="center"><div data-type="label" data-device="TV_Programme" data-get="RTL2"></div></td>
<td rowspan="2" align="left"><div data-type="label" data-device="TV_Programme" data-get="RTL2_Nexttime"></div></td>
<td rowspan="2" align="center"><div data-type="label" data-device="TV_Programme" data-get="RTL2_Next"></div></td>
</tr>
<tr>
<td></td>
</tr>
<tr valign="top" bgcolor="#A4A4A4;">
<td rowspan="2" width="20%" align="top"><div data-type="image" class="cell" data-url="/images/default/tvmovie/n-tv.png" class="cell"></div></td>
<td rowspan="2" align="center"><div data-type="label" data-device="TV_Programme" data-get="NTV"></div></td>
<td rowspan="2" align="left"><div data-type="label" data-device="TV_Programme" data-get="NTV_Nexttime"></div></td>
<td rowspan="2" align="center"><div data-type="label" data-device="TV_Programme" data-get="NTV_Next"></div></td>
</tr>
<tr>
<td></td>
</tr>
<tr valign="top">
<td rowspan="2" width="20%" align="top"><div data-type="image" class="cell" data-url="/images/default/tvmovie/n24.png" class="cell"></div></td>
<td rowspan="2" align="center"><div data-type="label" data-device="TV_Programme" data-get="N24"></div></td>
<td rowspan="2" align="left"><div data-type="label" data-device="TV_Programme" data-get="N24_Nexttime"></div></td>
<td rowspan="2" align="center"><div data-type="label" data-device="TV_Programme" data-get="N24_Next"></div></td>
</tr>
<tr>
<td></td>
</tr>
</table>
</li>
Viel Spass damit
Jörg
Zitat
Mit curl gehts noch.
hier der "Workaround":
FHEM:qx(curl http://fhem.de/fhemupdate/controls_fhem.txt| diff - /opt/fhem/FHEM/controls_fhem.txt |grep ">"|grep "UPD"|wc -l)
Gruß Detlef
Hallo,
mit Curl funktioniert es bei mir auch wieder. Ich hatte noch das Problem, das curl mir das log folgendermaßen zugespannt hat:
% Total % Received % Xferd Average Speed Time Time Time Current
Dload Upload Total Spent Left Speed
0 0 0 0 0 0 0 0 --:--:-- --:--:-- --:--:-- 0
100 116k 100 116k 0 0 843k 0 --:--:-- --:--:-- --:--:-- 846k
Der Parameter -sS unterdrückt - bis auf Fehler - diese Einträge.
qx(curl -sS http://fhem.de/fhemupdate/controls_fhem.txt| diff - /opt/fhem/FHEM/controls_fhem.txt |grep ">"|grep "UPD"|wc -l)
Viele Grüße
Thorsten
Kann man das überprüfen auf Updates irgendwie manuell anstoßen?
Zitat von: gloob am 12 Dezember 2016, 10:35:34
Kann man das überprüfen auf Updates irgendwie manuell anstoßen?
Ich wüsste nicht wie.
Aber über das Interval kannst Du ja sagen wie oft er das aktualisierst.
Bei mir stehts auf 1 Stunde, ist aber sicher noch zu oft.
So oft kommen ja keine Updates.
Gruß Detlef
Zitat von: dh9ts am 12 Dezember 2016, 09:48:34
Der Parameter -sS unterdrückt - bis auf Fehler - diese Einträge.
qx(curl -sS http://fhem.de/fhemupdate/controls_fhem.txt| diff - /opt/fhem/FHEM/controls_fhem.txt |grep ">"|grep "UPD"|wc -l)
Viele Grüße
Thorsten
Danke für den Hinweis!
Gruß Detlef
Hallo Zusammen,
wie versprochen, möchte ich Euch gerne meinen Zwischenstand zeigen.
Viel Spaß beim Testen!
@gloob: neustart von Fhem fragt die customreadings ab
@jnewton957: Mit welchem Modul liest du die beiden Kanäle der FritzBox aus?
Hallo Björn,
ich vermute dass das kein Kanal ist sondern die Anzahl der aktiven Geräte/Clients. Denn im 5 GHz Netz gibt es keinen Kanal 5.
Gruß Eddie
PS kurz eine andere Frage ist bei Dir oben die Leiste (dort wo die Mülltone, Schlüssel, Fenster usw. stehen) nun auch grau geworden, bei mir war sie anfangs weiß, aber nach dem gestrigen Update ist sie grau?
Hallo Zusammen,
eine Frage hat sich bei der Zuordnung eines Icons zu einem Button etwas geändert?
Ich frage aus folgenden Grund.
Ich habe die User-Demo Phil__ getestet.
Das Problem ist, dass keine der Icons angezeigt werden.
Es kommen lediglich Errormeldungen.
Wenn ich aber z.B in der Datei inc_homebutton.html den data-type="button" in data-type="pagetab" ändere, so wird das Icon angezeigt.
Daher meine Frage, hat sich am Syntax etwas geändert?
Bzw. kann ich einfach Button gegen Pagetab ersetzen?
Zitat von: bjoernbo am 13 Dezember 2016, 09:02:09
@jnewton957: Mit welchem Modul liest du die beiden Kanäle der FritzBox aus?
Hallo Björn
Modul Fritzbox
Reading box_wlanCount, box_guestWlanCount
Gibt die Anzahl der angemeldeten Geräte wieder.
Grüße
Jörg
Hallo
ich habe mal für das Modul VIERA eine Panasonic Fernbedienung gebastelt.
Es gibt sie einmal in Blau und einmal in Orange.
Die TV Logos sind von hier:
https://www.vuplus-support.org/wbb4/index.php?thread/64098-mirror-glass-3d-huminator-design-by-stefanbenno6/
Da der Code wohl zu groß ist, ist der im Anhang als html.
Gruß Paul
Hallo,
Ich wäre auch wie bjoernbo schrieb für eine Galerie + ftui und fhem.cfg codes.
Die auf git ist ja leider eingeschlafen.
Hallo,
ich hoffe, jemand kann mir helfen.
Ich baue gerade meine Seite für die DWD (UWZ) Warnungen neu auf.
Idee ist, dass ich links neben dem Warnicon das Startdatum und rechts neben dem Warnicon das Enddatum anzeigen lasse.
1. Frage: Wie bekomme ich etwas Abstand vom Datum zum icon ?
Dann möchte ich den Text in der jeweiligen Warnfarbe angezeigt bekommen.
Ich biete als reading im Modul uwz: Warn_0_uwzLevel 3 ==> entspricht orange (2 entspricht gelb)
2. Frage: Wie muss ich das im nachfolgenden coding einfügen.
<li class="halbTransparent border-left border-right" data-row="2" data-col="1" data-sizex="4" data-sizey="5" style="overflow:auto;">
<header class="headerTransparent">WETTERWARNUNGEN</header>
<div class="container">
<div class="center">
<div data-type="label" data-device="uwz"
data-get="Warn_0_Start_Date"
style="color:#aa6900;"
class="medium">
</div>
<div data-type="image" data-device="uwz"
data-get="Warn_0_IconURL"
data-size="50px">
</div>
<div data-type="label" data-device="uwz"
data-get="Warn_0_End_Date"
style="color:#aa6900;"
class="medium">
</div>
</div>
</div>
<div data-type="label"
data-device="uwz"
data-get="Warn_0_ShortText"
style="color:#aa6900;"
class="medium centered">
</div>
<div data-type="label"
data-device="uwz"
data-get="Warn_0_LongText"
style="color:#aa6900;"
class="medium centered">
</div>
<div class="container">
<div class="center">
<div data-type="label" data-device="uwz"
data-get="Warn_1_Start_Date"
style="color:#aa6900;"
class="medium">
</div>
<div data-type="image" data-device="uwz"
data-get="Warn_1_IconURL"
data-size="50px"
class="top-space">
</div>
<div data-type="label" data-device="uwz"
data-get="Warn_0_End_Date"
style="color:#aa6900;"
class="medium">
</div>
</div>
</div>
<div data-type="label"
data-device="uwz"
data-get="Warn_1_ShortText"
style="color:#aa6900;"
class="medium centered">
</div>
</li>
3. Frage: Wie mache ich einen einfachen Strich zwischen Warnung 0 und Warnung 1 ?
4. Frage: Wenn es keine Warnungen mehr gibt - wie sorge ich dafür, dass auch kein Text mehr angezeigt wird. Bisher bleibt jeweils der letzte Text stehen.
Grüße
Jörg
Hallo Jörg
Zitat1. Frage: Wie bekomme ich etwas Abstand vom Datum zum icon ?
probiere mal
<div data-type="label" data-device="Unwetterzentrale"
data-get="Warn_0_Start_Date"
style="color:#aa6900;"
class="medium
wider">
</div>
Zitat4. Frage: Wenn es keine Warnungen mehr gibt - wie sorge ich dafür, dass auch kein Text mehr angezeigt wird. Bisher bleibt jeweils der letzte Text stehen.
Das muss ein Bug sein, ich hatte ein Neues Thema dazu eröffnet aber keine Antwort bis jetzt bekommen.
https://forum.fhem.de/index.php/topic,62569.0.html
Gruß Paul
da gds aktuell nicht mehr zu gebrauchen ist habe ich das widget aktuell für umz umgebaut und im einsatz. sobald ich mehrere warnungen inkl farbe getestet habe werd ich es bereitstellen (nur als evtl. alternative)
Zitat von: paul79 am 17 Dezember 2016, 17:28:31
Hallo Jörg
probiere mal
<div data-type="label" data-device="Unwetterzentrale"
data-get="Warn_0_Start_Date"
style="color:#aa6900;"
class="medium wider">
</div>
Das muss ein Bug sein, ich hatte ein Neues Thema dazu eröffnet aber keine Antwort bis jetzt bekommen.
https://forum.fhem.de/index.php/topic,62569.0.html
Gruß Paul
Hallo Paul,
ich habe zu einem anderen Thema gerade einen Beitrag gefunden, das das Problem löst:
class="autohide" einfach in jedes <div></div> einfügen.
Dann erfolgt bei fehlendem reading keine Anzeige.
Grüße
Jörg
Hallo Jörg,
danke für den Tipp, so geht es erst einmal obwohl "autoclear" vielleicht besser wäre, denn man sieht ganz kurz die Einträge.
Gruß Paul
Hallo,
ja funktioniert nur bedingt, da das Reading trotzdem einen alten Wert behält den es unter umständen anzeigt.
Ich hatte ja schon das Problem das Label widget mit leeren Readings die es aber dauerhaft gibt weiterhin den alten Inhalt anzeigt, das konnte zum Glück gelöst werden.
Gruß Rolf
Zitat von: Eisix am 21 November 2016, 11:55:26
Das meiste sind leicht modifizierte Sachen die hier im Thread schon mal aufgetaucht sind.
Gruß
Eisix
Frage zum Wetter, auf welchen Wetteranbieter basiert das mit den Regen % denn das gibt es nicht bei Yahoo
Zitat von: jnewton957 am 11 Dezember 2016, 08:52:51
Hallo zusammen.
ich habe in der Wetterseite die Abbildung der Mondpahse integriert.
<li class="halbTransparent" data-row="5" data-col="7" data-sizex="1" data-sizey="1">
<header>MOND</header>
<div data-type="image" data-device="mondphasen" data-get="ftui"
data-size="100px" class=""></div>
</li>
Das ist mit sizex="1" und sizey="1" recht klein.
Nun möchte ich entweder in einem zweiten Seite (link auf mond.html) oder noch besser mit Klick auf den Mond als z.B. popup das größere Bild haben.
Reading ftui ist /fhem/images/phasenbilder/95.png
FYI: 100 Bilder sind jeweils die aktuelle Mondphase.
Wie kann man das bewerkstelligen ?
Danke
Grüße
Jörg
Guten Morgen
Darf man fragen ob Du Dein Hintergrundbild zur Verfügung stellst?
Zitat von: jnewton957 am 11 Dezember 2016, 08:52:51
Hallo zusammen.
ich habe in der Wetterseite die Abbildung der Mondpahse integriert.
<li class="halbTransparent" data-row="5" data-col="7" data-sizex="1" data-sizey="1">
<header>MOND</header>
<div data-type="image" data-device="mondphasen" data-get="ftui"
data-size="100px" class=""></div>
</li>
Das ist mit sizex="1" und sizey="1" recht klein.
Nun möchte ich entweder in einem zweiten Seite (link auf mond.html) oder noch besser mit Klick auf den Mond als z.B. popup das größere Bild haben.
Reading ftui ist /fhem/images/phasenbilder/95.png
FYI: 100 Bilder sind jeweils die aktuelle Mondphase.
Wie kann man das bewerkstelligen ?
Danke
Grüße
Jörg
Guten Morgen
Darf man fragen ob Du Dein Hintergrundbild zur Verfügung stellst?
Zitat von: jnewton957 am 11 Dezember 2016, 08:52:51
Hallo zusammen.
ich habe in der Wetterseite die Abbildung der Mondpahse integriert.
<li class="halbTransparent" data-row="5" data-col="7" data-sizex="1" data-sizey="1">
<header>MOND</header>
<div data-type="image" data-device="mondphasen" data-get="ftui"
data-size="100px" class=""></div>
</li>
Das ist mit sizex="1" und sizey="1" recht klein.
Nun möchte ich entweder in einem zweiten Seite (link auf mond.html) oder noch besser mit Klick auf den Mond als z.B. popup das größere Bild haben.
Reading ftui ist /fhem/images/phasenbilder/95.png
FYI: 100 Bilder sind jeweils die aktuelle Mondphase.
Wie kann man das bewerkstelligen ?
Danke
Grüße
Jörg
uten Morgen
Darf man fragen ob Du Dein Hintergrundbild zur Verfügung stellst?
Hallo zusammen,
möchte auch mal ein paar Screens liegen lassen.
Dank der tollen Hilfe aus diesem Forum hier und eigentlich 0 Kenntnissen funktioniert doch mittlerweile ziemlich viel.
Das ganze läuft auf einem PULS-Tablet welches an der Wand angebracht ist und per Fritz-Steckdose geladen wird, allerdings nur wenn unter 15 % und laden wird ab 95 % wieder augestellt. Anzeige läuft über Fully und ein Bewegungsmelder neben dem Tablet, der bei Bewegung 5 min - Anzeige offen lässt. Danke an alle für die tolle Hilfe bisher.
Screens anbei allerdings nur vom Laptop mit "Zuschnitt"
Hallo Andre,
wärst du so nett deine Daten auch noch zu Verfügung zustellen.
Hallo Andre,
wärst du so nett deine Daten auch noch zu Verfügung zustellen.
Wollte nur einmal fragen.
Sobald ich den mal einigermaßen ordentlich formatiert habe gerne, bin da nämlich ein wenig unordentlich. Mach mich aber die Tage mal dran. Bis dahin wenn jemand was brauch gerne, aber hab da ja kein Hexenwerk wie so manch anderer hier :D
Zitat von: Andre0909 am 28 Dezember 2016, 17:11:35
Sobald ich den mal einigermaßen ordentlich formatiert habe gerne, bin da nämlich ein wenig unordentlich. Mach mich aber die Tage mal dran. Bis dahin wenn jemand was brauch gerne, aber hab da ja kein Hexenwerk wie so manch anderer hier :D
Hi,
was hast du im Bad für Boxen ?
Jörg Sieht nicht nal Sonos aus.
Gesendet von meinem SM-T800 mit Tapatalk
Moin,
habe von BuschJäger die UP-Inet-Radios (die ich btw sehr empfehlen kann).
Gruß
Zitat von: Andre0909 am 29 Dezember 2016, 10:19:01
Moin,
habe von BuschJäger die UP-Inet-Radios (die ich btw sehr empfehlen kann).
Gruß
Moin,
sehr interessant. Wir haben im gesamten Haus BJ verbaut als Schalterprogramm.
Wie hast du die UP Radios in FHEM eingebunden? Da ist doch dann kein Platz mehr für einen Funkschalter ?
Hast du zufälligerweise auch die Jalousiecontrol verbaut und diese in Fhem eingebunden bekommen ?
Grüße
Jörg
Gesendet von meinem SM-T800 mit Tapatalk
Zitat von: Andre0909 am 29 Dezember 2016, 10:19:01
Moin,
habe von BuschJäger die UP-Inet-Radios (die ich btw sehr empfehlen kann).
Gruß
Moin,
mich würde hier auch der genau Typ und die Einbindung in Fhem interessieren ! Danke ;)
kvo1
Mahlzeit,
ich schließe mich an meine Vorredner an. Da ich komplett Busch&Jäger im Haus habe, bekunde auch ich mein Interesse an Jalousie und Radio-UP.
Gruß Dieter 8)
OT:
ZitatDas mit Busch Jäger ist Wunschdenken Leute, das lässt sich nicht einbinden, dass geht lediglich mit Homematic Schalter/Steckdose.
Oder hat hier jemand die Protokolle von Busch Jäger (Funk), meine JalousieControl von B&J sind außerdem Infrarot gesteuert.
Was ich lediglich bisher mache ist an den Nebenstellen Eingängen eines JalousieControl einen Homematic Jalousieschalter angeschlossen der fährt dann die Rollläden in die entsprechende Funktion.
Nun mal eine Frage zu FTUI:
Ich habe hier bisher noch keine Rollladensteuerung gesehen mit AUF/AB getrennt und z.B Schalter für Prozentschritte z.B. 25%, 50%, 75%
Ich habe schon gesucht aber noch kein Beispiel gefunden, wenn jemand etwas dazu hat würde ich es gerne mal anschauen... stecke da noch in den Anfängen....! :-\
ZitatNun mal eine Frage zu FTUI:
Ich habe hier bisher noch keine Rollladensteuerung gesehen mit AUF/AB getrennt und z.B Schalter für Prozentschritte z.B. 25%, 50%, 75%
Ich habe schon gesucht aber noch kein Beispiel gefunden, wenn jemand etwas dazu hat würde ich es gerne mal anschauen... stecke da noch in den Anfängen....! :-\
Die Pfeile für einfache Steuerung (meine Frau) Bild 1 und das Circle Menü Bild 2 mit % schritten, Bild 3 ist der weekdaytimer kann sowohl für licht als auch Rolladen verwendet werden.
zwei tolle Varianten
- Bild 1 - sind aber keine Button für bestimmte Prozente, könnte man sicher einbauen, muss ich mal anschauen
- Bild 2 - Circle Menü ist auch super
Kannst du beide html mal veröffentlichen, dann kann ich mir das mal anschauen.
Du kannst die Button vom Circlemenü auch direkt auf der Oberfläche darstellen.
hier das Circlemenü:
<div data-type="circlemenu"
data-item-width="52"
data-item-hight="52"
class="cell"
data-device="<?ftui-key=dev ?>"
data-direction="right-half"
data-circle-radius="90">
<ul>
<li class="circleborder">
<div data-type="label" data-device="<?ftui-key=dev ?>"></div>
</li>
<li><div data-type="push" data-cmd="set" data-device="<?ftui-key=dev ?>" data-set-on="on" data-icon="">⇧</div></li>
<li><div data-type="push" data-cmd="set" data-device="<?ftui-key=dev ?>" data-set-on="80" data-icon="">75</div></li>
<li><div data-type="push" data-cmd="set" data-device="<?ftui-key=dev ?>" data-set-on="60>" data-icon="">50</div></li>
<li><div data-type="push" data-cmd="set" data-device="<?ftui-key=dev ?>" data-set-on="40" data-icon="">25</div></li>
<li><div data-type="push" data-cmd="set" data-device="<?ftui-key=dev ?>" data-set-on="20" data-icon="">⩸</div></li>
<li><div data-type="push" data-cmd="set" data-device="<?ftui-key=dev ?>" data-set-on="off" data-icon="">⇩</div></li>
</ul>
</div>
und hier die Pfeile:
<div data-type="push" data-device="<?ftui-key=dev ?>" data-icon="fa-chevron-up" data-background-icon="fa-square-o" data-set-on="on" class=""> </div>
<div data-type="label" class=""></div>
<div data-type="push" data-device="<?ftui-key=dev ?>" data-icon="fa-minus" data-background-icon="fa-square-o" data-set-on="stop" class=""> </div>
<div data-type="label" class=""></div>
<div data-type="push" data-device="<?ftui-key=dev ?>" data-icon="fa-chevron-down" data-background-icon="fa-square-o" data-set-on="off" class=""> </div>
<div data-type="label" class=""></div>
@SamNitro: Woher hast Du das / die Icon der "ZZzzzSmiley" ? wie hast du die Eingebunden?
Hallo,
auch mit circlemenue.
Gruß
Eisix
Zitat@SamNitro: Woher hast Du das / die Icon der "ZZzzzSmiley" ? wie hast du die Eingebunden?
Der Smiley ist einfach nur ein Bild (bei google gesucht ;) ) wobei ich mit Bildbearbeitung den Hintergrund weg gemacht habe damit es transparent wird.
<div data-type="image"
data-size="70px"
data-url="./images/sleep.jpg"
onclick="ftui.setFhemStatus('set sz_lampe on; set rollo_sz pct 25')"
class="cell narrow" >
sobald ich drauf klicke fahren die Rollos auf "25%" und es geht das licht an.
Hallo Leute,
ich bin neu hier und habe mich mal ein wenig am zusammenstellen eines Templates ausprobiert. Jetzt komme ich aber irgendwie nicht weiter und hoffe ihr könnt mir helfen.
Ich bekomme meine Unterseiten einfach nicht angezeigt, owohl ich diese im Ordner habe...
wie sehen denn die rechte auf die datei aus?
Hallo Chris1284,
super vielen Dank für den Tipp!
Hatte ganz vergessen die Rechte hochzusetzen...
Jetzt klappt auch der Zugriff :)
Zitat von: SamNitro am 29 Dezember 2016, 14:44:49
Die Pfeile für einfache Steuerung (meine Frau) Bild 1 und das Circle Menü Bild 2 mit % schritten, Bild 3 ist der weekdaytimer kann sowohl für licht als auch Rolladen verwendet werden.
Hallo,
kannst du für Bild 3 (weekdaytimer) auch mal das coding bitte veröffentlichen.
Danke
Jörg
Zitat von: jnewton957 am 29 Dezember 2016, 10:31:29
Moin,
sehr interessant. Wir haben im gesamten Haus BJ verbaut als Schalterprogramm.
Wie hast du die UP Radios in FHEM eingebunden? Da ist doch dann kein Platz mehr für einen Funkschalter ?
Hast du zufälligerweise auch die Jalousiecontrol verbaut und diese in Fhem eingebunden bekommen ?
Grüße
Jörg
Gesendet von meinem SM-T800 mit Tapatalk
Moin,
die Radios sind nur über ein HTTP Befehl eingebunden. Ich kann also die Radio-Seite "fernbedienen" indem ich die gleichen Radiosender bei Fhem mit einem HTTP Befehl starten lasse, so lässt sich auch die Lautstärke ändern. Auscchalten geht leider nur über einen kleinen Umweg. Es wird ein Sleeptimer von 60 Sec eingeschaltet. Klappt soweit aber Problemlos wenn auch alles über Umweg.
Bei den Jalousien haben wir normale Somfy Funk-Jalousien auf 433 Mhz-Basis die über einen entsprechenen CUL im Raspberry angesprochen werden.
Gruß
Zitat von: jnewton957 am 30 Dezember 2016, 10:01:09
Hallo,
kannst du für Bild 3 (weekdaytimer) auch mal das coding bitte veröffentlichen.
Danke
Jörg
Ja kann ich:
Für Rollos:
<div style=""
data-type="wdtimer"
data-device="<?ftui-key=dev ?>"
data-style="round"
data-theme="dark"
data-title="<?ftui-key=titel ?>"
data-timesteps="30"
data-savecfg="true"
data-cmdlist='{"Auf":"100","Zu":"0","10%":"10","20%":"20","30%":"30","40%":"40","50%":"50","60%":"60","70%":"70","80%":"80","90%":"90"}'>
<div data-type="button" class="cell small readonly" data-icon="oa-edit_settings" data-background-icon="fa-square-o"
data-on-color="#505050" data-on-background-color="#505050">
</div>
</div>
Für Steckdosen:
data-cmdlist='{"An":"on","Aus":"off"}'>
Hallo,
ich habe mir eine Tablet UI Seite mit Pagebutton gebastelt und einem gewissen 3D Effekt.
Aber seht selbst.
Die Schatteneffekte sind in der user.css (liegt bei) und es sind 42 html Seiten.
3 Widgets habe ich anpassen müssen um den gewünschten Effekt zu erhalten.
widget_calview -> Jahreszahl entfernt
widget_homestatus -> Hintergrundfarbe geändert
widget_pagebutton -> roten Schatten eingefügt
Alles auf eigene Gefahr!
Die Senderlogos sind von https://www.vuplus-support.org/wbb4/index.php?thread/64098-mirror-glass-3d-huminator-design-by-stefanbenno6/
Gruß Paul
PS: Ich habe noch mein UWZ Widget beigefügt!
Hallo Paul,
sieht echt klasse aus und ist mal "was anderes",
Mich würden da Details interessieren, wie du die jeweiligen Kästchen/Abschnitt gemacht hat.
Die css wäre toll und die index.html für den Grundaufbau auch.
Danke
Jörg
Ganz oben in der .zip
Hallo Paul79,
lässt du die Seiten auf eine Tablet anzeigen, und wenn ja welche Größe hat es.
Und sehe ich es richtig das du mit 14 mal 10 Kästchen den Aufbau hast.
Gruß und einen guten Rutsch ins neue Jahr euch allen.
Zitat von: Octopus180 am 31 Dezember 2016, 17:08:07
Hallo Paul79,
lässt du die Seiten auf eine Tablet anzeigen, und wenn ja welche Größe hat es.
Und sehe ich es richtig das du mit 14 mal 10 Kästchen den Aufbau hast.
Gruß und einen guten Rutsch ins neue Jahr euch allen.
Gesundes Neues.
ist für 8 Zoll Tablet gedacht wobei es auch gezoomt auf 10.5 Zoll gut aussieht.
Ich habe extra kleinere Kästchen benutzt damit man auch 1/2 Kästchen hat, für den Rand zum Beispiel.
Gruß Paul
Frohes und gesundes Neues... ;)
wie hast du das gemacht mit den Kästchen, in der css Datei..?
Ich finde es dort nämlich nicht..?
Zitat von: moonsorrox am 01 Januar 2017, 14:00:56
wie hast du das gemacht mit den Kästchen, in der css Datei..?
Hallo, nein, in der index.html fast ganz oben.
<meta name="widget_base_width" content="60">
<meta name="widget_base_height" content="52">Es gibt einen Thema im Forum (finde es aber nicht mehr) wo einen Formel drin steht für die Gitterberechnung, daraus habe ich mir ein Excel Sheet gebaut und komme dann auf diese Werte.
Gruß Paul
Super steht alles drin, bin aber dann auch schon zu dem Ergebnis gekommen mit 83/72 durch ausprobieren ;)
Es gibt viel Arbeit... ;)
Für Silverster habe ich mir eine "kleine" Uhr gebastelt.
<li data-row="4" data-col="11" data-sizex="2" data-sizey="1" class="halbTransparent">
<header>Uhrzeit</header>
<div class="vbox bottom-space">
<div data-type="popup" data-height="870px" data-width="1820px">
<div data-type="clock" data-format="H:i:s" class="bigger"></div>
<div class="dialog transparent8">
<div class="vbox">
<div data-type="clock" data-format="H:i:s" style="font-size:440px"></div>
<div data-type="clock" data-format="Y" style="font-size:100px"></div>
</div>
</div>
</div>
<div data-type="clock" data-format="l d-m-Y" class="cell thin narrow"></div>
</div>
</li>
Hallo Andy,
hab gerade versucht deine Lösung der Updates umzusetzen, allerdings komme ich nicht klar, wo ich das DOIF und at eintragen muss.
Könntest du einem absoluten Änfanger hier auf die Sprünge helfen ?
Herzlichen Dank vorab für deine Hilfe.
gruß
Thomas
Zitat von: Andy89 am 23 September 2016, 22:46:52
Servus Klaus,
für die updates hab ich ein DOIF, ein at und eine Routine in meinen Utils
DOIF:
([UpdatesAvailable]) ({ updates() })
DOELSEIF ([08:00]) (set at_CheckUpdatesAvailable active)
at:
+*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:
#######################################################################################
# #
# 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 ;D
für den Rasoberry restart habe ich ein dummy, notify und auf dem rPi eine Shell
notify:
rPi_Reboot:on {system ("sudo -u root /opt/fhem/FHEM/reboot.sh &")}
Shell:
#!/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:
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 :-X :o
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:
fhem ALL=(ALL) NOPASSWD:/sbin/reboot
Hallo zusammen,
auch wenn ich bisher stets versucht habe so viele Lösungen wie möglich aus den hier geposteten, sehr tollen FTUI-Implementierung abzuleiten, muss ich euch nun doch belästigen.
Hintergrund meiner Frage ist der Wunsch innerhalb eines Widgets eine Grafik in Abhängigkeit eines Readings zu setzen.
Sprich reading = 1 => Bild1; reading = 2 => Bild 2 usw.
Basierend auf den Veröffentlichungen von eisix und ich glaube Björn zum Thema "Anwesende Homies" habe ich hierzu versucht ein Widget vom Typ Image zu nutzen. Leider unterstützt dieses - soweit ich das sehe - nur genau eine Adresse im Parameter data-url.
Sprich ein data-url='["custom_images/1.png","custom_images/2.png"]' klappt nicht.
Möglich wäre natürlich ein Symbol-Widget mit data-states- und data-icons-Arrays, aber dann kann ich wieder nur Icons aus Fonts benutzen und keine Grafiken.
Habt ihr hier vielleicht eine Anregung für mich, die ich bisher einfach übersehen habe?
Bereits im Voraus vielen Dank für eure Hilfe!
Beste Grüße
Michael
Dem image Widget kannst du ja per data-device + data-get auch die url aus einem Reading mitgeben.
Hallo sinus61,
danke für die schnelle Antwort - auf deine tolle Idee bin ich zuvor leider nicht gekommen.
<div data-type="image"
data-device="dummy1"
data-get="Wert"
data-path="custom_images/"
data-width="80"
data-height="80"
class="nocache">
</div>
Funktioniert prima (das Dummy-Device ist hier nur natürlich als Testdatenquelle zu sehen).
Beste Grüße
Michael
Zitat von: eazy_isi am 03 Januar 2017, 20:26:13
Hallo Andy,
hab gerade versucht deine Lösung der Updates umzusetzen, allerdings komme ich nicht klar, wo ich das DOIF und at eintragen muss.
Könntest du einem absoluten Änfanger hier auf die Sprünge helfen ?
Herzlichen Dank vorab für deine Hilfe.
gruß
Thomas
Servus Thomas,
du musst beides in der FHEM- Eingabezeile eintippen.
für at z.B.:
define at_Every15Minutes at +*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";
}fürs doif natürlich ähnlich
define doif_getUpdates DOIF ([UpdatesAvailable]) ({ updates() })
DOELSEIF ([08:00]) (set at_CheckUpdatesAvailable active)Beste Grüße
Andy
Hilfe Hilfe
Ich bin anfänger.
Ich hab schon einiges ganz gut verstanden und begriffen. Aber ich bekomme es einfach nicht hin so wie ich es gerne hätte.
http://ueberueck.com/index.php/fhem-hausautomatisierung/fhem-tablet-ui/ftui-tablet
habe mir hier datensätze rauskopiert was ich gerne habe würden. nur mein Problem ist nun. das ich einfach nicht das Wetter angezeigt bekomme. Ich holle mir wetter mit dem Wettermodul von Wunderground. Wetter kommt in fhem an. Wo muss ich den nun etwas ändern so das ich auch wetter erhalte.
ich habe weiterhin ein problem mit der anordung. bei mir sind alle blöcke unter ftui untereinander und lass sich nicht so anordnen wie ich es gerne hätte.
ein update habe ich schon gemacht.
kann mir wer bitte helfen??
danke
@Wasserwerk33
hier ein Denkanstoß (Link) bzgl. Anordnung ,,Blöcke unter FTUI"
https://maker-tutorials.com/ftui-anpassen-1-grundgeruest-widgets/
Zitat von: Wasserwerk33 am 05 Januar 2017, 10:11:57
Hilfe Hilfe
Ich bin anfänger.
Ich hab schon einiges ganz gut verstanden und begriffen. Aber ich bekomme es einfach nicht hin so wie ich es gerne hätte.
http://ueberueck.com/index.php/fhem-hausautomatisierung/fhem-tablet-ui/ftui-tablet
habe mir hier datensätze rauskopiert was ich gerne habe würden. nur mein Problem ist nun. das ich einfach nicht das Wetter angezeigt bekomme. Ich holle mir wetter mit dem Wettermodul von Wunderground. Wetter kommt in fhem an. Wo muss ich den nun etwas ändern so das ich auch wetter erhalte.
ich habe weiterhin ein problem mit der anordung. bei mir sind alle blöcke unter ftui untereinander und lass sich nicht so anordnen wie ich es gerne hätte.
ein update habe ich schon gemacht.
kann mir wer bitte helfen??
danke
jepp wahrscheinlich fehlt dir der Teil
<div class="gridster">
<ul>Den Fehler hatte ich auch am Anfang. ;)
Für die allerersten Schritte fand ich diesen Blogbeitrag ebenfalls sehr hilfreich: https://waschto.eu/tabletui-tablet-als-schaltzentrale (https://waschto.eu/tabletui-tablet-als-schaltzentrale).
Viel Erfolg!
Zitat von: delight am 06 Januar 2017, 08:15:01
Für die allerersten Schritte fand ich diesen Blogbeitrag ebenfalls sehr hilfreich: https://waschto.eu/tabletui-tablet-als-schaltzentrale (https://waschto.eu/tabletui-tablet-als-schaltzentrale).
Viel Erfolg!
Wobei bitte aufpassen.
Das sind entweder Alte Sachen drin oder Fehler.
Das hat zumindest bei mir nicht geklappt: https://waschto.eu/anrufliste-der-fritzbox sondern ich musste es so lösen: https://forum.fhem.de/index.php/topic,64071.msg553618.html#msg553618
Zitat von: delight am 06 Januar 2017, 08:15:01
Für die allerersten Schritte fand ich diesen Blogbeitrag ebenfalls sehr hilfreich: https://waschto.eu/tabletui-tablet-als-schaltzentrale (https://waschto.eu/tabletui-tablet-als-schaltzentrale).
Viel Erfolg!
Hallo ich finde dieses nicht schlecht.
https://www.youtube.com/playlist?list=PLjTJoWywixuKxSYCisDSQ4mt_1NrVVhzo
Gruß Paul
Warum gibt es eigentlich noch kein Drag and Drop, Add, Delete etc. so weit wie das ganze ist, fehlen da ja nur noch ein paar Button und eine Datenbank im Hintergrund, die diese dann speichert. Oder gibt es nennenswerte Gründe dass jeder sich mit HTML beglücken muss?
Weil solch ein WYSIWYG Designer ganz viel Arbeit macht, für etwas, was man nur einmal macht, eine UI designen. Also zählt das unter 'Nice to have'. Wen jemand viel Zeit und Lust dafür hat, nur her damit. Wie ich aber schon vor vielen Monaten geschrieben habe, konzentriere ich mich auf die Kernkomponenten.
Hallo zusammen,
nachedem wir ja jetzt sogar hier in Köln mal Schnee (Schneeflocken, Puderzucker) haben, habe ich mir das mal in meine mobile Seite eingebaut.
<div data-type="label" class="inline"><medium> Regen/Schnee <br></medium></div><br>☔
<div data-type="label" data-device="WUweather" data-get="fc0_rain_day" data-limits="[-20,-15,-10,-5,0,5,10,15,20,25,30,35]" data-colors='["#483D8B","#1874CD","#9AC0CD","#CAE1FF","#F5FFFA","#98FB98","#9ACD32","#FFA500","#FF4500","#FF3030","#EE2C2C","#8B1A1A"]' data-unit=" mm" class="inline"></div>❄
<div data-type="label" data-device="WUweather" data-get="fc0_snow_day" data-limits="[-20,-15,-10,-5,0,5,10,15,20,25,30,35]" data-colors='["#483D8B","#1874CD","#9AC0CD","#CAE1FF","#F5FFFA","#98FB98","#9ACD32","#FFA500","#FF4500","#FF3030","#EE2C2C","#8B1A1A"]' data-unit=" mm" class="inline"></div>
Umsetzung basiert auf Idee Waschbaer
Grüße
Jörg
Hi Jörg,
sieht gut aus ;)
kvo1
Hab da Mal eine Speciale Frage. Und zwar wie oder wo muss ich etwas anlegen damit ich eine Tablet ui Seite für mein Handy erhalte. Für mein Tablet habe ich eine.
Danke für die Hilfe
Zitat von: Wasserwerk33 am 14 Januar 2017, 19:22:07
Hab da Mal eine Speciale Frage. Und zwar wie oder wo muss ich etwas anlegen damit ich eine Tablet ui Seite für mein Handy erhalte. Für mein Tablet habe ich eine.
Danke für die Hilfe
Unter /fhem/www/ ein Unterverzeichnis "mobile" anlegen. URL ist dann http://192.168.2.xx:8083/fhem/mobile/index.html
Dann kopierst du dir alle deine Dateien von TabletUi (inkl. Unterverzeichnisse) nach /mobile.
Index.html auf deine Größe des Handy anpassen. (Bei mir:
<meta name="widget_base_width" content="90">
<meta name="widget_base_height" content="104">Dann musst du dir die html Seiten "umbauen". Du hast ja jetzt "nur" ca. 6 Zeilen und 4 Spalten.
Also alles umgestalten und vom Konzept etwas umdenken.
Oder:
Ein guter Start ist die webseite von http://ueberueck.com/index.php/fhem-hausautomatisierung/fhem-tablet-ui/ftui-mobile (http://ueberueck.com/index.php/fhem-hausautomatisierung/fhem-tablet-ui/ftui-mobile).
Da würdest du gleich mit der zip Datei ein Unterverzeichnis mobile mit vielen Inhalten bekommen, die du dann auf deine devices anpassen kannst.
Grüße
Jörg
Danke schön für die gute Anleitung. Werde ich mich doch Mal direkt dran machen
@newton 957
Ich habe gesehen Du benutzt auch Wundergrund wetter. Könntest du mir sagen welche Daten du nimmst um die trennst als Pfeile zu erhalten?
Zitat von: Wasserwerk33 am 15 Januar 2017, 10:51:52
@newton 957
Ich habe gesehen Du benutzt auch Wundergrund wetter. Könntest du mir sagen welche Daten du nimmst um die trennst als Pfeile zu erhalten?
Hallo,
gute Frage !
Hier nehme ich das Modul Proplanta (device Wetter_Pro) und dann statTemperatureTendency
<center>
<div data-type="klimatrend" data-device="Wetter_Pro" data-get="statTemperatureTendency" data-refperiod="6" data-stagnating-color="rgb(80,80,80)" data-icon="fa-angle" data-rising-color="rgb(180,80,80)" data-falling-color="rgb(80,80,180)" data-highmark="1" data-highmark-icon="fa-angle-double" data-highmark-rising-color="rgb(255,80,80)" data-highmark-falling-color="rgb(80,80,255)" class="inline"></div>
<div data-type="klimatrend" data-device="Wetter_Pro" data-get="statTemperatureTendency" data-refperiod="3" data-stagnating-color="rgb(80,80,80)" data-icon="fa-angle" data-rising-color="rgb(180,80,80)" data-falling-color="rgb(80,80,180)" data-highmark="1" data-highmark-icon="fa-angle-double" data-highmark-rising-color="rgb(255,80,80)" data-highmark-falling-color="rgb(80,80,255)" class="inline"></div>
<div data-type="klimatrend" data-device="Wetter_Pro" data-get="statTemperatureTendency" data-refperiod="2" data-stagnating-color="rgb(80,80,80)" data-icon="fa-angle" data-rising-color="rgb(180,80,80)" data-falling-color="rgb(80,80,180)" data-highmark="1" data-highmark-icon="fa-angle-double" data-highmark-rising-color="rgb(255,80,80)" data-highmark-falling-color="rgb(80,80,255)" class="inline"></div>
<div data-type="klimatrend" data-device="Wetter_Pro" data-get="statTemperatureTendency" data-refperiod="1" data-stagnating-color="rgb(80,80,80)" data-icon="fa-angle" data-rising-color="rgb(180,80,80)" data-falling-color="rgb(80,80,180)" data-highmark="1" data-highmark-icon="fa-angle-double" data-highmark-rising-color="rgb(255,80,80)" data-highmark-falling-color="rgb(80,80,255)" class="inline"></div>
</center>Grüße
Jörg
Guten Abend in die Runde,
da ich aktuell noch keine eigene Demo präsentieren kann, möchte ich gerne auf meiner Seite (https://demaya.de) die oft angesprochene bzw. angefragte Galerie für Demo-Installationen hosten. So möchte ich gerne etwas zurückgeben, da mir die FHEM-Community täglich neue Ideen und Problemlösungen zu meinem wachsenden Smarthome bietet.
Wäre das aus Eurer Sicht eine Bereicherung? Ich würde für jede Installation einen Blogeintrag anlegen und Screenshots, Sources sowie eine kleine Zusammenfassung schreiben.
So lerne ich was und andere Neuanfänger können sich einfach durch die Galerie klicken.
Gruß
demaya
Habe ein Problem seit dem letztem Update gestern und zwar bekomme ich bei wunderground keine Wetter Icon mehr. Habe nur ein jpg Emblem. Was habe ich verkehrt gemacht und wie bekomme ich diese wieder?
Zitat von: demaya am 16 Januar 2017, 22:11:49
da ich aktuell noch keine eigene Demo präsentieren kann, möchte ich gerne auf meiner Seite (https://demaya.de) die oft angesprochene bzw. angefragte Galerie für Demo-Installationen hosten. So möchte ich gerne etwas zurückgeben, da mir die FHEM-Community täglich neue Ideen und Problemlösungen zu meinem wachsenden Smarthome bietet.
das kannst du gerne tun, ich denke hier hat niemand etwas dagegen... ;)
jetzt kommt das ABER... wenn ich bei dir sehe das du Geld für Downloads haben möchtest, dann wird das hier nicht so gut ankommen...
Das hat immer eine kleinen Beigeschmack...! :-\ keine Kritik nur ne Anmerkung
Zitat von: moonsorrox am 17 Januar 2017, 13:45:11
das kannst du gerne tun, ich denke hier hat niemand etwas dagegen... ;)
jetzt kommt das ABER... wenn ich bei dir sehe das du Geld für Downloads haben möchtest, dann wird das hier nicht so gut ankommen...
Das hat immer eine kleinen Beigeschmack...! :-\
Danke für dein Feedback moonsorrox. Die Downloads sind für die "Ausbildung der Ausbilder"-Prüfung. Die Userdemos inkl. Screenshots / Sourcecodes / Konfigurationen würde ich jederzeit kostenlos bereitstellen und zum Download anbieten. Das geistige Eigentum liegt ja beim eigentlichen Author. Meine Arbeit liegt ja in der Aufbereitung / Zusammenfassung / Bereitstellung und den rechtlichen Risiken bzgl. Urheberrecht usw.
Gruß
OK, mach das ist auf jeden Fall eine Bereicherung und evtl. für einen Einstieg eine gute Sache
Gibt es noch andere Meinungen?
Wessen Layout dürfte ich denn als Pilot übertragen?
Gruß
Zitat von: Wasserwerk33 am 17 Januar 2017, 09:34:17
Habe ein Problem seit dem letztem Update gestern und zwar bekomme ich bei wunderground keine Wetter Icon mehr. Habe nur ein jpg Emblem. Was habe ich verkehrt gemacht und wie bekomme ich diese wieder?
Keine eine Idee wie ich das wieder hin bekomme?
...ein paar Beipiele aus meinem FTUI 8)
Zitat von: jnewton957 am 14 Januar 2017, 18:15:09
Umsetzung basiert auf Idee Waschbaer
Grüße
Jörg
Also meine Idee war das nicht, ich hab das auch nur von jemandem abgekupfert und etwas umgestellt. Meine Umsetzung ist ja bestimmt auch zu 80-90% auch ein Sammelsurium von dem was schon mal da war ;)
@bjoernbo: Wohnst ja quasi um die Ecke ...
Was ist das grüne da für ein "Warner" - Eis?
Ganz links auf der google karte sieht man das Centro..... da bin ich ganz nah.... wir sollten mal überlegen ob nicht ein Treffen / Stammtisch machbar wäre.....
lg Michael
Zitat von: h3llsp4wn am 18 Januar 2017, 21:00:08
Was ist das grüne da für ein "Warner" - Eis?
gibt es irgendwo ein Beispiel wie man solch ein WarnIcon erstellt z.B. für einen Kalender mit den Events, ich habe hier noch nichts gefunden,
Ich habe das nur für die Unwetterzentrale, kann das aber nicht 1 zu 1 umsetzen
Die Warner ganz oben, also das "GRÜNE" ist die Anzahl der Anwesendenpersonen im Hause.
Das macht natürlich wenig Sinn, aber so muss ich die Leute nicht zählen ;D
hehe ... und bei mehr als 5 in der Bude wird die Tür abgeschlossen :D
Ist zwar wirklich OT - aber ein TabletUI-User-Stammtisch wäre wirklich mal was tolles - da könnte man sich gegenseitig Anregungen und Tipps geben.
Hi,
mich würde interessieren ob jemand von euch Tui nutzt um Kodi zu steuern ?
Wenn ja - wäre es total klasse wenn das hier vorgestellt werden könnte.
Ich bin gerade in der Umsetzung und Lernphase und wäre über Ideen dankbar
Gruß
was soll das denn sein? gebe ich das bei google ein....kommt der Reiseanbeiter bzw. die Supermarktkette ;D
huch das sollte Tablet UI heissen :P
Zitat von: jnewton957 am 14 Januar 2017, 18:15:09
Hallo zusammen,
nachedem wir ja jetzt sogar hier in Köln mal Schnee (Schneeflocken, Puderzucker) haben, habe ich mir das mal in meine mobile Seite eingebaut.
<div data-type="label" class="inline"><medium> Regen/Schnee <br></medium></div><br>☔
<div data-type="label" data-device="WUweather" data-get="fc0_rain_day" data-limits="[-20,-15,-10,-5,0,5,10,15,20,25,30,35]" data-colors='["#483D8B","#1874CD","#9AC0CD","#CAE1FF","#F5FFFA","#98FB98","#9ACD32","#FFA500","#FF4500","#FF3030","#EE2C2C","#8B1A1A"]' data-unit=" mm" class="inline"></div>❄
<div data-type="label" data-device="WUweather" data-get="fc0_snow_day" data-limits="[-20,-15,-10,-5,0,5,10,15,20,25,30,35]" data-colors='["#483D8B","#1874CD","#9AC0CD","#CAE1FF","#F5FFFA","#98FB98","#9ACD32","#FFA500","#FF4500","#FF3030","#EE2C2C","#8B1A1A"]' data-unit=" mm" class="inline"></div>
Umsetzung basiert auf Idee Waschbaer
Grüße
Jörg
sehr schön, Jörg. Gibst du uns auch den Html-Code preis? Ich weiss, dass du dies irgendwo mal gemacht hast, finde aber die aktuelle Version nicht.. wäre super..
Lg c
ich hatte folgendes anliegen schonmal hier irgendwo gesehen. Allerdings habe ich die Übersicht auf den knapp 90 Seiten verloren.
Ich hätte gerne im FTUI die Möglichkeit ein "update check" durchzuführen mit der Anzeige der Dateien die ein update erhalten. Weiter einen Befehl "update all". Wenn das update durch ist noch ein "shutdown restart". Wie gesagt alles über FTUI!
Danke
Zitat von: bjoernbo am 20 Januar 2017, 07:48:09
ich hatte folgendes anliegen schonmal hier irgendwo gesehen. Allerdings habe ich die Übersicht auf den knapp 90 Seiten verloren.
Ich hätte gerne im FTUI die Möglichkeit ein "update check" durchzuführen mit der Anzeige der Dateien die ein update erhalten. Weiter einen Befehl "update all". Wenn das update durch ist noch ein "shutdown restart". Wie gesagt alles über FTUI!
Danke
Zitat von: Masterfunk am 04 Dezember 2016, 13:08:20
Habe jetzt meine Lösung fürs Update und Restarts fertig.
Hier der Code:
fhem:
define Update.Counter CustomReadings
attr Update.Counter event-on-update-reading FHEM,FTUI,ALL
attr Update.Counter interval 3600
attr Update.Counter readingDefinitions FHEM:qx(wget -qO - http://fhem.de/fhemupdate/controls_fhem.txt| diff - /opt/fhem/FHEM/controls_fhem.txt |grep ">"|grep "UPD"|wc -l),FTUI:qx(wget -qO - https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt| diff - /opt/fhem/FHEM/controls_fhemtabletui.txt |grep ">" |grep "UPD"|wc -l),ALL:{ReadingsNum($name, "FHEM", 0) + ReadingsNum($name, "FTUI", 0)}
attr Update.Counter stateFormat ALL
define Update.Dummy dummy
define UpdateFinished notify global.UPDATE.* set Update.Dummy done
attr UpdateFinished room System
define Update.New DOIF ([Update.Counter] ne "0")(set Update.Dummy update)\
DOELSEIF ([Update.Counter] eq "0")(set Update.Dummy idle)
attr Update.New do always
define Update.Start notify Update.Dummy.start set Update.Dummy run;; {fhem ("update")}
define System.Reboot.Dummy dummy
define System.reboot notify System.Reboot.Dummy:on {system ("sudo reboot")}
Tablet UI:
<li data-row="4" data-col="2" data-sizex="4" data-sizey="1" class="">
<header>Updates</header>
<div class="inline">
<div data-type="button"
data-device="Update.Counter"
data-warn="FHEM"
data-fhem-cmd=""
data-background-icon="fs-system_fhem"
data-on-background-color="#505050"
data-off-background-color="#505050"
data-icon="fa-refresh warn"
class="readonly warn bigger"></div>
<div data-type="label" class="top-narrow">FHEM</div>
</div>
<div class="inline">
<div data-type="button"
data-device="Update.Counter"
data-warn="FTUI"
data-fhem-cmd=""
data-background-icon="fs-system_fhem"
data-on-background-color="#505050"
data-off-background-color="#505050"
data-icon="fa-refresh warn"
class="readonly warn bigger"></div>
<div data-type="label" class="top-narrow">FTUI</div>
</div>
<div class="inline">
<div data-type="switch" data-device="Update.Dummy"
data-states='["idle","update","run","done"]'
data-set-states='["idle","start","idle","idle"]'
data-icons='["fa-refresh","fa-refresh","fa-refresh fa-spin","fa-refresh fa-blink"]'
data-background-icons='["-","-","-","-"]'
data-on-colors='["#505050","#aa6900","#aa6900","red"]'
data-background-colors='["#505050","#aa6900","#aa6900","red"]'
class="bigger top-narrow"></div>
<div data-type="label">Status / Start</div>
</div>
<div class="inline">
<div data-type="popup" data-draggable="true" data-height="100px" data-width="100px" class="white">
<div data-type="button" data-icon="fs-system_fhem" background-icon="-" class="cell top-narrow"></div>
<div data-type="label" class="">Restart</div>
<div class="dialog dialogTransparent">
<div data-type="button" data-fhem-cmd="shutdown restart" data-icon="fa-check" background-icon="fa-circle" class="cell"></div>
<div data-type="label" class="">Sicher?</div>
</div>
</div>
</div>
<div class="inline">
<div data-type="popup" data-draggable="true" data-height="100px" data-width="100px" class="white">
<div data-type="button" data-icon="fa-linux" background-icon="-" class="cell top-narrow"></div>
<div data-type="label" class="">Restart</div>
<div class="dialog dialogTransparent">
<div data-type="button" data-fhem-cmd="set System.Reboot.Dummy on" data-icon="fa-check" background-icon="fa-circle" class="cell"></div>
<div data-type="label" class="">Sicher?</div>
</div>
</div>
</div>
</li>
Und so siehts aus:
War es das, was du gesucht hast?
Grüße
Ich wollte gerade meine Update-Lösung posten - aber diese ist ja noch viel besser >:(
:) - Danke! Da kann ich noch was dazulernen ;)
Zitat von: Esjay am 20 Januar 2017, 08:27:52
War es das, was du gesucht hast?
Grüße
Funktioniert das bei jemanden mit dem List der Updates? Ich bekomme aktuell 1863 Updates angezeigt und über "Update check" sind es nur 3.
Internals:
NAME UPDATE_TEST
NR 548
STATE OK
TYPE CustomReadings
Readings:
2017-01-20 14:25:03 ALL 1863
2017-01-20 14:25:03 FHEM 1863
2017-01-20 14:25:03 FTUI 0
2017-01-20 14:25:03 state OK
Attributes:
event-on-update-reading FHEM,FTUI,ALL
interval 21600
readingDefinitions FHEM:qx(wget -qO - http://fhem.de/fhemupdate/controls_fhem.txt| diff - /opt/fhem/FHEM/controls_fhem.txt |grep ">"|grep "UPD"|wc -l),FTUI:qx(wget -qO - https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt| diff - /opt/fhem/FHEM/controls_fhemtabletui.txt |grep ">" |grep "UPD"|wc -l),ALL:{ReadingsNum($name, "FHEM", 0) + ReadingsNum($name, "FTUI", 0)}
Hallo,
Zitat von: gloob am 20 Januar 2017, 14:25:53
Funktioniert das bei jemanden mit dem List der Updates? Ich bekomme aktuell 1863 Updates angezeigt und über "Update check" sind es nur 3.
Ich kann das grad nicht bei mir testen, hatte aber mit wget auch ein Problem. Ich nutze nun curl:
https://forum.fhem.de/index.php/topic,37378.msg538110.html#msg538110
Viele Grüße
Thorsten
Hab's grad Mal eingebaut, und ja, auch ich bekomme 1863 updates von FHEM angezeigt.
Das wurde schon weiter oben behandelt. Mit wget funktioniert es nicht korrekt. War bei mir auch so.
FHEM:qx(curl -sS http://fhem.de/fhemupdate/controls_fhem.txt| diff - /opt/fhem/FHEM/controls_fhem.txt |grep ">"|grep "UPD"|wc -l),
FTUI:qx(curl -sS https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt| diff - /opt/fhem/FHEM/controls_fhemtabletui.txt |grep ">" |grep "UPD"|wc -l),
ALL:{ReadingsNum($name, "FHEM", 0) + ReadingsNum($name, "FTUI", 0)}
Zitat von: jnewton957 am 29 Dezember 2016, 10:31:29
Moin,
sehr interessant. Wir haben im gesamten Haus BJ verbaut als Schalterprogramm.
Wie hast du die UP Radios in FHEM eingebunden? Da ist doch dann kein Platz mehr für einen Funkschalter ?
Hast du zufälligerweise auch die Jalousiecontrol verbaut und diese in Fhem eingebunden bekommen ?
Grüße
Jörg
Gesendet von meinem SM-T800 mit Tapatalk
Hallo und sorry für die späte Antwort. Es sind ja Inernettradios. Es gibt die Einstellung dass man trotz ausschalten diese im Idle-Modus lassen kann. Somit kann ich Sie über Ihre IP-Adresse im Browser jederzeit ansprechen. Das ganze kann ich dann auch über Fhem lösen:
# WLAN-RADIO Steuerung für Tablet UI ##
define BJuntenSteuerung HTTPMOD none 0
attr BJuntenSteuerung userattr set01Name set01URL set02Name set02URL set03Name set03URL set04Name set04URL set05Name set05URL set06Name set06URL set07Name set07URL set08Name set08URL
attr BJuntenSteuerung set01Name 1LiveDiggi
attr BJuntenSteuerung set01URL http://192.168.178.23/de/index.cgi?n1=1Live+diggi&p1=+Abspielen+
attr BJuntenSteuerung set02Name WDR2
attr BJuntenSteuerung set02URL http://192.168.178.23/de/index.cgi?n1=WDR2&p2=+Abspielen+
attr BJuntenSteuerung set03Name AntenneSteiermark
attr BJuntenSteuerung set03URL http://192.168.178.23/de/index.cgi?n1=Antenne+Steiermark&p3=+Abspielen+
attr BJuntenSteuerung set04Name 1Live
attr BJuntenSteuerung set04URL http://192.168.178.23/de/index.cgi?n1=1LIVE&p4=+Abspielen+
attr BJuntenSteuerung set05Name DeluxeLounge
attr BJuntenSteuerung set05URL http://192.168.178.23/de/index.cgi?n1=Deluxe+Lounge&p5=+Abspielen+
attr BJuntenSteuerung set06Name DeluxeEasy
attr BJuntenSteuerung set06URL http://192.168.178.23/de/index.cgi?n1=Deluxe+Easy&p6=+Abspielen+
attr BJuntenSteuerung set07Name Volume
attr BJuntenSteuerung set07URL http://192.168.178.23/de/index.cgi?vo=$val
attr BJuntenSteuerung set08Name Ausschalten
attr BJuntenSteuerung set08URL http://192.168.178.23/de/general.cgi?es=1&ss=01
define BJobenSteuerung HTTPMOD none 0
attr BJobenSteuerung userattr set01Name set01URL set02Name set02URL set03Name set03URL set04Name set04URL set05Name set05URL set06Name set06URL set07Name set07URL set08Name set08URL
attr BJobenSteuerung set01Name 1LiveDiggi
attr BJobenSteuerung set01URL http://192.168.178.6/de/index.cgi?n1=1Live+diggi&p1=+Abspielen+
attr BJobenSteuerung set02Name WDR2
attr BJobenSteuerung set02URL http://192.168.178.6/de/index.cgi?n1=WDR2&p2=+Abspielen+
attr BJobenSteuerung set03Name AntenneSteiermark
attr BJobenSteuerung set03URL http://192.168.178.6/de/index.cgi?n1=Antenne+Steiermark&p3=+Abspielen+
attr BJobenSteuerung set04Name 1Live
attr BJobenSteuerung set04URL http://192.168.178.6/de/index.cgi?n1=1LIVE&p4=+Abspielen+
attr BJobenSteuerung set05Name DeluxeLounge
attr BJobenSteuerung set05URL http://192.168.178.6/de/index.cgi?n1=Deluxe+Lounge&p5=+Abspielen+
attr BJobenSteuerung set06Name DeluxeEasy
attr BJobenSteuerung set06URL http://192.168.178.23/de/index.cgi?n1=Deluxe+Easy&p6=+Abspielen+
attr BJobenSteuerung set07Name Volume
attr BJobenSteuerung set07URL http://192.168.178.6/de/index.cgi?vo=$val
attr BJobenSteuerung set08Name Ausschalten
attr BJobenSteuerung set08URL http://192.168.178.6/de/general.cgi?es=1&ss=01
# set BJuntenSteuerung 1LiveDiggi 1 zum Starten und Spielen
# set BJuntenSteuerung Volume 1 Lautstärke 1 (bis 31)
# set BJuntenSteuerung Ausschhalten 1 (Timer schaltet nach 1 min radio aus)Im TabletUI sieht es dann z.B so aus:
<div class="inline">
<div data-type="image"
data-size="50"
data-url="./images/antennesteiermark.png"
class="">
</div>
<div data-type="push"
data-device="BJobenSteuerung"
data-icon="fa-play"
data-set-on="AntenneSteiermark 1"
class="">
</div>
</div>
</li>
<li class="halbTransparent" data-row="2" data-col="6" data-sizex="1" data-sizey="1">
<header class="headerTransparent">Controls</header>
<div class="inline">
<div data-type="volume"
data-device="BJobenSteuerung"
data-icon="fa-power-off"
data-min="0"
data-max="31"
data-set="Volume"
class="mini">
</div>
<div data-type="push"
data-device="BJobenSteuerung"
data-icon="fa-power-off"
data-set-on="Ausschalten 1"
class="">
</div>
</div>
</li>
Hi
ich habe ein problem und zwar mit meiner Logo 8. Ich kann meinen Jalousien schalten. Sehe dieses auf meinem Ausgang in fhem auch aber bekomme sie nicht in Tablet Ui angezeigt. Also den Status über eine Batterie. Kann mir da vielleicht einer helfen??
Ich hoffe das ich in diesem Forum damit richtig bin.
<li class="halbTransparent border-left border-right" data-row="5" data-col="1" data-sizex="4" data-sizey="2" style="overflow:auto;">
<header class="headerTransparent">Kontrolle</header>
<div class="top-space">
<div class="inline">
<div data-type="symbol"
data-get="Urlaub_Kontrolle"
data-states='["on","off"]'
data-icons='["fa-battery-4","fa-battery-1 fa-blink"]'
data-colors='["green","firebrick"]'
class="big">
</div>
<div class="">Urlaub
</div>
</div>
<div class="inline">
<div data-type="symbol"
data-device="Party_Kontrolle"
data-get="battery"
data-states='["on","off"]'
data-icons='["fa-battery-4","fa-battery-1 fa-blink"]'
data-colors='["green","firebrick"]'
class="big">
</div>
<div class="">Party
</div>
</div>
<div class="inline">
<div data-type="symbol"
data-device="Sonnenschutz_Kontrolle_OG"
data-get="battery"
data-states='["ok","low"]'
data-icons='["fa-battery-4","fa-battery-1 fa-blink"]'
data-colors='["green","firebrick"]'
class="big">
</div>
<div class="">Sonnenschutz OG
</div>
</div>
<div class="inline">
<div data-type="symbol"
data-device="Sonnenschutz_Kontrolle_UG"
data-get="battery"
data-states='["ok","low"]'
data-icons='["fa-battery-4","fa-battery-1 fa-blink"]'
data-colors='["green","firebrick"]'
class="big">
</div>
<div class="">Sonnenschutz UG
</div>
</div>
</div>
</li>
danke schon mal im vorraus
Zitat von: Wasserwerk33 am 17 Januar 2017, 21:34:39
Keine eine Idee wie ich das wieder hin bekomme?
Wie bindest du die Icons denn ein? Versuche das auch gerade.
Zitat von: Masterfunk am 10 Dezember 2016, 16:32:41
Laufende Bilder sagen oft mehr...
Ich habe mal ein Video meiner aktuellen Installation gemacht:
https://youtu.be/E4nZGjGl0lo (https://youtu.be/E4nZGjGl0lo)
Gruß Detlef
Hallo Detlef,
echt mega! Kannst du dieses Ergebnis uns mal zur Verfügung stellen?
Dort waren ein paar Dinge dich ich sehr interessant fand.
Gruß
Steffen
Hallo Paul,
kurze Frage, aus welchen Modulen holst du dir die Werte für:
OZON, die Kurzbeschreibung des Wetters, sowie die Werte für Regen (Proplanta ?) und vor allem Schnee ?
Ich hab mal einen Screenshot angehängt zum Verständnis.
Gruß
Thomas
Zitat von: paul79 am 30 Dezember 2016, 22:58:50
Hallo,
ich habe mir eine Tablet UI Seite mit Pagebutton gebastelt und einem gewissen 3D Effekt.
Aber seht selbst.
Die Schatteneffekte sind in der user.css (liegt bei) und es sind 42 html Seiten.
3 Widgets habe ich anpassen müssen um den gewünschten Effekt zu erhalten.
widget_calview -> Jahreszahl entfernt
widget_homestatus -> Hintergrundfarbe geändert
widget_pagebutton -> roten Schatten eingefügt
Alles auf eigene Gefahr!
Die Senderlogos sind von https://www.vuplus-support.org/wbb4/index.php?thread/64098-mirror-glass-3d-huminator-design-by-stefanbenno6/
Gruß Paul
PS: Ich habe noch mein UWZ Widget beigefügt!
Zitat von: steffen83 am 31 Januar 2017, 12:17:57
Hallo Detlef,
echt mega! Kannst du dieses Ergebnis uns mal zur Verfügung stellen?
Dort waren ein paar Dinge dich ich sehr interessant fand.
Gruß
Steffen
das hat er hier schon dargestellt, mußt mal ein wenig suchen irgendwo sind die ganzen Dateien von ihm ;)
Hatte schon geschaut und nur das Video gesehen :-) Aber dann schau ich noch mal.
Vielleicht ist er aber auch schon 20 Schritte weiter ;)
Wer's findet bitte hier nochmal posten. War jetzt zürückgegangen bis auf Seite 42
https://forum.fhem.de/index.php?action=profile;u=8943;area=showposts;sa=attach;sort=posted;start=0 (https://forum.fhem.de/index.php?action=profile;u=8943;area=showposts;sa=attach;sort=posted;start=0)
da findet ihr die Home und Media HTML Datei ;)
und die Tabletui.rar ist auch dabei.
Kannte diese Dateisuche gar nicht
In dem Video sind tatsächlich ein paar Dinge mehr zu sehen als in den damals veröffentlichten Dateien enthalten ist. Sehr interessant fand ich z.B. bei dem Bereich für FHEM- und FTUI-Update die Möglichkeit mit Klick auf die Symbole auch die Übersicht die möglichen Updates (also quasi "update check") anzuzeigen. Daran hätte ich durchaus Interesse.
Das habe ich in dem Code auch gesucht, allerdings nicht gefunden! Mir hat es gefallen das es via POPUP angezeigt wird. Da kann man dann entscheiden ob man das Update anstößt oder noch wartet
Zitat von: eazy_isi am 31 Januar 2017, 12:30:18
Hallo Paul,
kurze Frage, aus welchen Modulen holst du dir die Werte für:
OZON, die Kurzbeschreibung des Wetters, sowie die Werte für Regen (Proplanta ?) und vor allem Schnee ?
Ich hab mal einen Screenshot angehängt zum Verständnis.
Gruß
Thomas
Hallo Thomas,
das Wetter ist das Modul Wunderground und OZON dieses hier (da musst du DEXXXXX&Ort=YYYYYYYYY deins eintragen)
define UVOZON HTTPMOD http://www.donnerwetter.de/biowetter/uvregion.hts?lid=DEXXXXX&Ort=YYYYYYYYY&Hauttyp=1&B1=anzeigen&UVind=true&UVZeit=12 7200
attr UVOZON userattr reading01Name reading01Regex reading02Name reading02Regex reading03Name reading03OExpr reading03Regex reading04Name reading04OExpr reading04Regex timeout
attr UVOZON event-on-change-reading Ozon,UV,OzonDesc,UVDesc
attr UVOZON reading01Name Ozon
attr UVOZON reading01Regex (?s)<strong>Ozon<\/strong>.*?<em><strong>([0-9]+)<\/strong><\/em>
attr UVOZON reading02Name UV
attr UVOZON reading02Regex (?s)<strong>UV<\/strong>.*?<em><strong>([0-9]+)<\/strong><\/em>
attr UVOZON reading03Name OzonDesc
attr UVOZON reading03OExpr $val=~s/\s+/ /sg;;$val=~s/Ozon-/<br>/;;$val=~s/zwischen/zwischen<br>/;;$val
attr UVOZON reading03Regex (?s)(prognostiziertes.+?Ozon.+?Uhr)
attr UVOZON reading04Name UVDesc
attr UVOZON reading04OExpr $val=~s/\s+/ /sg;;$val=~s/in der Zeit/<br>in der Zeit<br>/;;$val
attr UVOZON reading04Regex (?s)Eigenschutzzeit.+?der.+?Haut.+?(bei.+?Hauttyp.+?[0-9].+?in.+?der.+?Zeit.+?Uhr)
attr UVOZON requestHeader.* User-Agent: Mozilla/5.0 (Windows NT 6.0)
attr UVOZON room Wettervorhersage
attr UVOZON stateFormat ozon:Ozon uv:UV
attr UVOZON timeout 10Gruß Paul
Hallo,
denke Ihr meint das?
Gruß
Eisix
Hallo Eisix,
darfst auch gerne noch mal deine aktuellen Dateien uns zur Verfügung stellen :-)
Gruß Steffen
@Eisix: Nein!
Im Video von Detlef ist zu sehe, dass innerhalb des PopUps die Module angezeigt werden, welche für ein update bereist sind. quasi das Ergebnis von "update check"
Herzlichen Dank,
Ozon funktioniert perfekt.
Das du Wunderground nutzt hatte ich fast befürchtet, da ist bei mir auf dem Land keine vernünftige Station in
der Nähe die ich nutzen könnte. :-\
Trotzdem Danke für die Info.
Kommt der Vorhersagetext für Tagsüber und Nachts auch aus Wunderground ?
Zitat von: paul79 am 31 Januar 2017, 19:22:06
Hallo Thomas,
das Wetter ist das Modul Wunderground und OZON dieses hier (da musst du DEXXXXX&Ort=YYYYYYYYY deins eintragen)
define UVOZON HTTPMOD http://www.donnerwetter.de/biowetter/uvregion.hts?lid=DEXXXXX&Ort=YYYYYYYYY&Hauttyp=1&B1=anzeigen&UVind=true&UVZeit=12 7200
attr UVOZON userattr reading01Name reading01Regex reading02Name reading02Regex reading03Name reading03OExpr reading03Regex reading04Name reading04OExpr reading04Regex timeout
attr UVOZON event-on-change-reading Ozon,UV,OzonDesc,UVDesc
attr UVOZON reading01Name Ozon
attr UVOZON reading01Regex (?s)<strong>Ozon<\/strong>.*?<em><strong>([0-9]+)<\/strong><\/em>
attr UVOZON reading02Name UV
attr UVOZON reading02Regex (?s)<strong>UV<\/strong>.*?<em><strong>([0-9]+)<\/strong><\/em>
attr UVOZON reading03Name OzonDesc
attr UVOZON reading03OExpr $val=~s/\s+/ /sg;;$val=~s/Ozon-/<br>/;;$val=~s/zwischen/zwischen<br>/;;$val
attr UVOZON reading03Regex (?s)(prognostiziertes.+?Ozon.+?Uhr)
attr UVOZON reading04Name UVDesc
attr UVOZON reading04OExpr $val=~s/\s+/ /sg;;$val=~s/in der Zeit/<br>in der Zeit<br>/;;$val
attr UVOZON reading04Regex (?s)Eigenschutzzeit.+?der.+?Haut.+?(bei.+?Hauttyp.+?[0-9].+?in.+?der.+?Zeit.+?Uhr)
attr UVOZON requestHeader.* User-Agent: Mozilla/5.0 (Windows NT 6.0)
attr UVOZON room Wettervorhersage
attr UVOZON stateFormat ozon:Ozon uv:UV
attr UVOZON timeout 10
Gruß Paul
Hallo,
@bjoernbo
Hab mir das Video nochmal angeschaut
Der output von dem curl Aufruf wird dort angezeigt (Fhem)
curl -sS http://fhem.de/fhemupdate/controls_fhem.txt| diff - /opt/fhem/FHEM/controls_fhem.txt |grep ">"|grep "UPD"|grep "FHEM"|cut -d" " -f5
Dafür ist bei vielen Updates mein Tablet zu klein, da hat Detlef eindeutig mehr Platz ;)
@steffen83
Das meiste habe ich hier schon mal geposted und ist aktuell noch etwas unformatiert durch das 2.5 upgrade. Wenn du einen bestimmten Teil haben willst kann ich dir den aber nochmal rausholen.
Gruß
Eisix
Servus
Mit welchem Tool erstellt ihr eure Seiten?
Ich nutze WinSCP mit Notepad++ und den Chrome Browser
Gruss
Zitat von: SirMarco am 02 Februar 2017, 15:27:23
Servus
Mit welchem Tool erstellt ihr eure Seiten?
Ich nutze WinSCP mit Notepad++ und den Chrome Browser
Gruss
Es gibt für Notepad++ ein Ftp Plugin..Dann musst du nicht immer über WinScp gehen..Nutze ich so!
ich arbeite mit Notepad++ und Filezilla, mach ich schon immer so...
Zitat von: Esjay am 02 Februar 2017, 15:34:40
Es gibt für Notepad++ ein Ftp Plugin..Dann musst du nicht immer über WinScp gehen..Nutze ich so!
Genau, mache ich auch so.
Und wen's interessiert, hier ist das Plugin (https://sourceforge.net/projects/nppftp/)
Hallo,
Da ich mit einem Mac arbeite TextWrangler, der kann auch direkt FTP. Mein Sohn versucht mich immer zu Bracket zu überreden wo es wohl auch ein FTP Plugin gibt.
Gruß Rolf
Ich nutze auch Brackets, wobei der FHEM Folder als SAMBA Share in Netz freigeschaltet ist. Darüber kann man direkt editieren, ohne ssh oder ftp copy.
Hier mit WinScp und Proton.
Nebenbei auch noch Phase 5
LG
Ich nutze Coda, weil das ähnlich wie notepad++ Blockbearbeitung kann
Ich nutze Coda, weil das ähnlich wie notepad++ Blockbearbeitung kann
Auf dem pi immer vi.
Aktuell teste ich atom mit scp plugin. Hat auch was.
Gruß
Michael
In der Shell, in einem tmux-View mit vi
Oder in der Eclipse-Umgebung....Je nach Lust und Laune
lg, Stefan
so....nach einem kleinem krampf hat es dann doch funktioniert 8)
Synology DS-Audio im FTUI
Zunächst musste ich einen neuen Benutzer auf dem NAS anlegen: dsaudio
Dieser hat nur Zugriff auf AUDIO-DS
In der Systemsteuerung unter Anwendungsportal den Benutzerdefinierten Aliasnamen für DSAudio aktiviert
Unter Sicherheit erlauben das DSM im Frame eingebunden werden darf.
Damit man zum Schluss noch die Musik auf diverse DLN fähige Geräte streamen kann muss einem DS Audio als admin gestartet werden.
In den Einstellungen dem dsaudi Benutzer die Rechte vergeben, dass dieser DLNA-Durchsuchungen durchführen darf.
FERTIG
Ich nutze auch Brackets und greife mittels NFS auf den fhem raspi zu.
Moin,
ich habe von Masterfunk aus den Seiten das thermostat widget mit auto, manu und boost kopiert und bei mir eingefügt.
Das thermostat widget geht, aber nicht auto, manu und boost
Da kommen Lampen Icons und beim drücken ändert sich auch nichts.
Mein Code:
div class="sheet">
<div class="row">
<div class="cell" data-type="thermostat" data-device="k_Thermostat" data-valve="4.VALVE_STATE" data-get="control" data-temp="4.ACTUAL_TEMPERATURE"></div>
<div data-type="switch" data-device="k_Thermostat"
data-get="controlMode"
data-icons='["oa-sani_heating_automatic","oa-sani_heating_automatic fa-blink","oa-sani_heating_automatic"]'
data-background-icons='["-","-","-"]'
data-states='["auto","set_auto","((?!auto).)*"]'
data-colors='["#aa6900","#aa6900","#505050"]'
data-set-states='["controlMode auto","controlMode auto","controlMode auto"]'
class="narrow big"></div>
<div data-type="switch" data-device="k_Thermostat"
data-get="controlMode"
data-icons='["oa-sani_heating_manual","oa-sani_heating_manual fa-blink","oa-sani_heating_manual"]'
data-background-icons='["-","-","-"]'
data-states='["manual","set_manual","((?!manual).)*"]'
data-colors='["#aa6900","#aa6900","#505050"]'
data-set-states='["controlMode manual","controlMode manual","controlMode manual"]'
class="narrow big"></div>
<div data-type="switch" data-device="k_Thermostat"
data-get="controlMode"
data-icons='["oa-sani_heating_temp","oa-sani_heating_temp fa-blink","oa-sani_heating_temp"]'
data-background-icons='["-","-","-"]'
data-states='["boost","set_boost","((?!boost).)*"]'
data-colors='["#aa6900","#aa6900","#505050"]'
data-set-states='["controlMode boost","controlMode boost","controlMode boost"]'
class="narrow"></div>
unten das Bild wie es auschaut ...
Zitat von: Eisix am 03 Dezember 2016, 10:15:35
define UPDATE CustomReadings
attr UPDATE event-on-update-reading FHEM,FTUI,ALL
attr UPDATE interval 21600
attr UPDATE readingDefinitions FHEM:qx(wget -qO - http://fhem.de/fhemupdate/controls_fhem.txt| diff - /opt/fhem/FHEM/controls_fhem.txt |grep ">"|grep "UPD"|wc -l),FTUI:qx(wget -qO - https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt| diff - /opt/fhem/FHEM/controls_fhemtabletui.txt |grep ">" |grep "UPD"|wc -l),ALL:{ReadingsNum($name, "FHEM", 0) + ReadingsNum($name, "FTUI", 0)}
Ich bekomme bei der Abfrage das Ergebnis 1868 für FHEM , obwohl ich gerade ein Update gemacht habe und keine Updates mehr anstehen. Bei FTUI funktioniert es. Hat jemand eine Idee woran das liegen kann ? Sieht für mich so aus als ob er alle Zeilen zählt und nicht den Unterschied. Ich habe die Sytax schon mehrmals kontrolliert und kann keinen Fehler finden :-\
Zitat von: bm7777 am 03 Februar 2017, 22:23:54
Ich bekomme bei der Abfrage das Ergebnis 1868 für FHEM , obwohl ich gerade ein Update gemacht habe und keine Updates mehr anstehen. Bei FTUI funktioniert es. Hat jemand eine Idee woran das liegen kann ? Sieht für mich so aus als ob er alle Zeilen zählt und nicht den Unterschied. Ich habe die Sytax schon mehrmals kontrolliert und kann keinen Fehler finden :-\
Anstatt wget curl nutzen.Schau mal ein paar seiten zurück,da steht es genau.
Gruß
Dankeschön.
Jetzt funktionierts.
Zitat von: Esjay am 03 Februar 2017, 22:28:19
Anstatt wget curl nutzen.Schau mal ein paar seiten zurück,da steht es genau.
Gruß
bei mir scheint das auch nicht zuverlässig zu funktionieren, wenn ich heute in Fhem schaue habe ich grad zur Zeit 5 Updates, mein Anzeige im Tablet UI zeigt aber nur ein Ausrufezeichen...!
Kann hier mal jemand einen funktionierenden Code einstellen...? Evtl. habe ich das falsche..!
Meiner sieht so aus:
FHEM:qx(wget -qO - http://fhem.de/fhemupdate/controls_fhem.txt| diff - /opt/fhem/FHEM/controls_fhem.txt |grep ">"|grep "UPD"|wc -l),FTUI:qx(wget -qO - https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt| diff - /opt/fhem/FHEM/controls_fhemtabletui.txt |grep ">" |grep "UPD"|wc -l),ALL:{ReadingsNum($name, "FHEM", 0) + ReadingsNum($name, "FTUI", 0)}
Hier mal mein UI.
Bin noch nicht ganz fertig, aber für den einen oder anderen ist sicher etwas dabei.
Die Größe ist optimiert fürs Samsung Galaxy Tablet 9.7
mfg
Zitat von: Eisix am 31 Januar 2017, 22:23:51
Hallo,
denke Ihr meint das?
Gruß
Eisix
Hallo Eisix,
mich würde die Konfiguration (inkl. cfg) aus dem Plot des Netzwerkmonitors unten rechts interssieren.
Kannst du mal bitte posten, wie du das gemacht hast.
Danke
Jörg
Zitat von: Eisix am 31 Januar 2017, 22:23:51
Hallo,
denke Ihr meint das?
Gruß
Eisix
Hallo Eisix
ich finde diese Seite super cool. Würdest Du uns deinen Code zur Verfügung stellen?
Zitat von: bjoernbo am 02 Februar 2017, 21:42:22
so....nach einem kleinem krampf hat es dann doch funktioniert 8)
Synology DS-Audio im FTUI
Zunächst musste ich einen neuen Benutzer auf dem NAS anlegen: dsaudio
Dieser hat nur Zugriff auf AUDIO-DS
In der Systemsteuerung unter Anwendungsportal den Benutzerdefinierten Aliasnamen für DSAudio aktiviert
Unter Sicherheit erlauben das DSM im Frame eingebunden werden darf.
Damit man zum Schluss noch die Musik auf diverse DLN fähige Geräte streamen kann muss einem DS Audio als admin gestartet werden.
In den Einstellungen dem dsaudi Benutzer die Rechte vergeben, dass dieser DLNA-Durchsuchungen durchführen darf.
FERTIG
Hi,
also irgendwie schein ich einen Fehler zu machen, ich bekomme es zum Verrecken nicht hin.
Ich habe alles so eingestellt, wie du geschrieben hast. Ich kann auch den link im Firefox direktnutzen, bei mir 192.168.178.9/audio/.
Wenn ich den per iframe einbinde bleibe immer ein schwarzer bildschirm, ich bekomme nie inhalte.
Ich habe auch kein Harken bei "Nicht in Iframe einbinden".... Kannst du mit deinen iframe-Code mal schicken? Vielleicht läuft da was falsch...
Dann hast Du den Schritt mit der Sicherheit noch nicht korrekt geklärt. Ich habe dort nur die IP meines FTUI Gerätes eingegeben.
Noch was vergessen: Ich habe das DS Audio nicht über den iFrame der FTUI eingebunden sondern ganz normal über html iFrame. Mit FTUI iFrame habe ich es nicht zu laufen bekommen.
Zitat von: majorshark am 05 Februar 2017, 10:59:33
Dann hast Du den Schritt mit der Sicherheit noch nicht korrekt geklärt. Ich habe dort nur die IP meines FTUI Gerätes eingegeben.
Noch was vergessen: Ich habe das DS Audio nicht über den iFrame der FTUI eingebunden sondern ganz normal über html iFrame. Mit FTUI iFrame habe ich es nicht zu laufen bekommen.
Was meinst du mit "Sicherheit noch nich geklärt. Ich habe dort nur die IP meines FTUI Gerätes eingegeben" ?#
Direkter Iframe probiere ich auch nochmal ... geht auch nicht
ZitatUnter Sicherheit erlauben das DSM im Frame eingebunden werden darf.
In der Systemsteuerung der DSM Unter Sicherheit Haken bei "Nicht zulassen, daß DSM in iFrame eingebettet wird" und die IP bei "Zulässige Websites" eintragen.
Bei mit ist der Link übrigens http://[IP]:5000/dsaudio. Fehlt Dir einfach nur der Port?
Zitat von: majorshark am 05 Februar 2017, 13:52:19
In der Systemsteuerung der DSM Unter Sicherheit Haken bei "Nicht zulassen, daß DSM in iFrame eingebettet wird" und die IP bei "Zulässige Websites" eintragen.
Bei mit ist der Link übrigens http://[IP]:5000/dsaudio. Fehlt Dir einfach nur der Port?
ich habe den Harken gar nicht gesetzt, also sind ja ALLE Seiten berechtigt DSAudio per Iframe einzubinden. Mein link ist "http://192.168.178.9:5000/audio/" der geht auch im browser. Meine Einbindung ist:
<li class="halbTransparent border-left" data-row="1" data-col="1" data-sizex="4" data-sizey="6">
<iframe src="http://192.168.178.9:5000/audio/"></iframe>
</li>schwarz...
<li data-row="1" data-col="2" data-sizex="6" data-sizey="4" class="">
<iframe style="border:solid 1px #777; zoom: 0.81; -moz-transform: scale(0.81);
-moz-transform-origin: 0 0; -o-transform: scale(0.81);
-o-transform-origin: 0 0; -webkit-transform: scale(0.81);
-webkit-transform-origin: 0 0;"
width="1289px" height="845" frameborder="0" scrolling="no"
src="http://192.168.3.3:5000/dsaudio">
</iframe>
</li>
Sieht bei mir genauso aus. Daran sollte es also nicht liegen. Jetzt gehen mir aber auch die Ideen aus.
Hallo,
Da mehrere gefragt haben nochmal der Code meines Servermonitors und des Netzwerkmonitors.
Gruß
Eisix
Zitat von: Eisix am 05 Februar 2017, 14:54:30
Hallo,
Da mehrere gefragt haben nochmal der Code meines Servermonitors und des Netzwerkmonitors.
Gruß
Eisix
@Eisix ---Danke schon mal.
Ich mache mich mal dran und baue das für mich um.
Danke
Grüße
Jörg
Zitat von: jnewton957 am 05 Februar 2017, 19:43:26
@Eisix ---Danke schon mal.
Ich mache mich mal dran und baue das für mich um.
Danke
Grüße
Jörg
Hallo Eisix
Besten Dank! Könntest Du auch den FHEM Monitor sowie die Batterieanzeige noch posten?
Merci
Zitat von: paul79 am 31 Januar 2017, 19:22:06
Hallo Thomas,
das Wetter ist das Modul Wunderground und OZON dieses hier (da musst du DEXXXXX&Ort=YYYYYYYYY deins eintragen)
define UVOZON HTTPMOD http://www.donnerwetter.de/biowetter/uvregion.hts?lid=DEXXXXX&Ort=YYYYYYYYY&Hauttyp=1&B1=anzeigen&UVind=true&UVZeit=12 7200
attr UVOZON userattr reading01Name reading01Regex reading02Name reading02Regex reading03Name reading03OExpr reading03Regex reading04Name reading04OExpr reading04Regex timeout
attr UVOZON event-on-change-reading Ozon,UV,OzonDesc,UVDesc
attr UVOZON reading01Name Ozon
attr UVOZON reading01Regex (?s)<strong>Ozon<\/strong>.*?<em><strong>([0-9]+)<\/strong><\/em>
attr UVOZON reading02Name UV
attr UVOZON reading02Regex (?s)<strong>UV<\/strong>.*?<em><strong>([0-9]+)<\/strong><\/em>
attr UVOZON reading03Name OzonDesc
attr UVOZON reading03OExpr $val=~s/\s+/ /sg;;$val=~s/Ozon-/<br>/;;$val=~s/zwischen/zwischen<br>/;;$val
attr UVOZON reading03Regex (?s)(prognostiziertes.+?Ozon.+?Uhr)
attr UVOZON reading04Name UVDesc
attr UVOZON reading04OExpr $val=~s/\s+/ /sg;;$val=~s/in der Zeit/<br>in der Zeit<br>/;;$val
attr UVOZON reading04Regex (?s)Eigenschutzzeit.+?der.+?Haut.+?(bei.+?Hauttyp.+?[0-9].+?in.+?der.+?Zeit.+?Uhr)
attr UVOZON requestHeader.* User-Agent: Mozilla/5.0 (Windows NT 6.0)
attr UVOZON room Wettervorhersage
attr UVOZON stateFormat ozon:Ozon uv:UV
attr UVOZON timeout 10
Gruß Paul
Hallo Paul,
beim Aufruf von www.donnerwetter.de kann man anstatt "lid=DEXXXXX&Ort=YYYYYYYYY" auch "plz=XXXXX" verwenden.
Gruß
Stefan
Zitat von: Eisix am 05 Februar 2017, 14:54:30
Hallo,
Da mehrere gefragt haben nochmal der Code meines Servermonitors und des Netzwerkmonitors.
Gruß
Eisix
Hallo Eisix,
nimmst du als device für FileLog_InternetSpeed den speedtest aus dem Wiki?
Mich wundert, wie stark deine Schwankungen im plot sind.
Ich überlege gerade noch, ob ich aus meinen Daten der Fritzbox die "box_rateUp" und "box_rateDown" nehme.
Muss mir aber die Aussagekraft (Informationsgehalt) dazu noch überlegen und nachsehen, was da genau gemessen wird. Denn hier habe ich Schwankungen.
Grüße
Jörg
Hallo,
die zwei code Teile hängen dran.
@jnewton957
Ja die Internetspeed wird duch Speedtest geprüft. Und Ja die Werte meiner Internetverbindung sind übel >:(
So ist das auf dem Land und meine ist da noch schnell.
Zu den Hauptzeiten ist der upload höher als der download. Gibt aber eine schöne Kurve, immerhin ;D
Noch 1 Monat dann kann ich endlich auf eine Glaßfaserverbindung wechseln dann sollten da nur waagerechte Linien sein.
Die anderen Werte (LAN,WAN,VLAN,VPN) kommen vom sysmon modul. Allerdings musst du die knob min/max Werte für deine Verbindungen anpassen. z.B. LAN ist bei mir 1GB WAN nur 100MBit. Bei den WLAN's habe ich selbst noch keine Werte.
Gruß
Eisix
Zitat von: Masterfunk am 04 Dezember 2016, 13:08:20
Habe jetzt meine Lösung fürs Update und Restarts fertig.
Hier der Code:
fhem:
define Update.Counter CustomReadings
attr Update.Counter event-on-update-reading FHEM,FTUI,ALL
attr Update.Counter interval 3600
attr Update.Counter readingDefinitions FHEM:qx(wget -qO - http://fhem.de/fhemupdate/controls_fhem.txt| diff - /opt/fhem/FHEM/controls_fhem.txt |grep ">"|grep "UPD"|wc -l),FTUI:qx(wget -qO - https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt| diff - /opt/fhem/FHEM/controls_fhemtabletui.txt |grep ">" |grep "UPD"|wc -l),ALL:{ReadingsNum($name, "FHEM", 0) + ReadingsNum($name, "FTUI", 0)}
attr Update.Counter stateFormat ALL
........
Und so siehts aus:
@Masterfunk,
Habe versucht deine Lösung für den Counter zu übernehmen, aber leider wird das Update nicht angestoßen .... Anbei mein UpdateCounter:
Internals:
CFGFN
NAME UpdateCounter
NR 3249
STATE 3
TYPE CustomReadings
Readings:
2017-02-06 17:07:54 ALL 3
2017-02-06 17:07:28 FHEM 1
2017-02-06 17:07:38 FTUI 1
2017-02-06 16:41:03 state OK
Attributes:
event-on-update-reading FHEM,FTUI,ALL
interval 60
readingDefinitions FHEM:qx(wget -qO - http://fhem.de/fhemupdate/controls_fhem.txt| diff - /opt/fhem/FHEM/controls_fhem.txt |grep ">"|grep "UPD"|wc -l),FTUI:qx(wget -qO - https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt| diff - /opt/fhem/FHEM/controls_fhemtabletui.txt |grep ">" |grep "UPD"|wc -l),ALL:{ReadingsNum($name, "FHEM", 0) + ReadingsNum($name, "FTUI", 0)}
room System
stateFormat ALL
userReadings FHEM,FTUI,ALL
Hast du evtl. einen Tipp was noch fehlt bzw. falsch ist?
Gruß
Mathias
//EDIT:
Komisch .... hat sich nach einer halben Stunde von selbst aktualisiert .... also es funktioniert .... irgendwie :D
Internals:
CFGFN
NAME UpdateCounter
NR 3249
STATE 1867
TYPE CustomReadings
Readings:
2017-02-06 17:41:03 ALL 1867
2017-02-06 17:41:03 FHEM 1867
2017-02-06 17:41:03 FTUI 0
2017-02-06 17:41:03 state OK
Attributes:
event-on-update-reading FHEM,FTUI,ALL
interval 3600
readingDefinitions FHEM:qx(wget -qO - http://fhem.de/fhemupdate/controls_fhem.txt| diff - /opt/fhem/FHEM/controls_fhem.txt |grep ">"|grep "UPD"|wc -l),FTUI:qx(wget -qO - https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt| diff - /opt/fhem/FHEM/controls_fhemtabletui.txt |grep ">" |grep "UPD"|wc -l),ALL:{ReadingsNum($name, "FHEM", 0) + ReadingsNum($name, "FTUI", 0)}
room System
stateFormat ALL
userReadings FHEM,FTUI,ALL
Mir ist nur die Zahl 1867 etwas zu hoch???
Ein manueller UpdateCheck bringt mir folgendes:
fhem
List of new / modified files since last update:
UPD ./CHANGED
UPD ./fhem.pl
UPD FHEM/00_HMUARTLGW.pm
UPD FHEM/00_KM271.pm
UPD FHEM/00_MQTT.pm
UPD FHEM/01_FHEMWEB.pm
UPD FHEM/10_CUL_HM.pm
UPD FHEM/10_EnOcean.pm
UPD FHEM/10_MQTT_BRIDGE.pm
UPD FHEM/10_MQTT_DEVICE.pm
UPD FHEM/24_TPLinkHS110.pm
UPD FHEM/36_LaCrosse.pm
UPD FHEM/37_harmony.pm
UPD FHEM/39_alexa.pm
UPD FHEM/57_CALVIEW.pm
UPD FHEM/57_Calendar.pm
UPD FHEM/59_Wunderground.pm
UPD FHEM/70_BRAVIA.pm
UPD FHEM/70_KODI.pm
UPD FHEM/72_FB_CALLLIST.pm
UPD FHEM/74_XiaomiFlowerSens.pm
UPD FHEM/88_HMCCU.pm
UPD FHEM/88_HMCCUCHN.pm
UPD FHEM/88_HMCCUDEV.pm
UPD FHEM/93_DbRep.pm
UPD FHEM/98_DOIFtools.pm
UPD FHEM/98_GEOFANCY.pm
UPD FHEM/98_Hyperion.pm
UPD FHEM/98_JsonList2.pm
UPD FHEM/98_SVG.pm
UPD FHEM/98_logProxy.pm
UPD FHEM/98_powerMap.pm
UPD FHEM/98_telnet.pm
UPD FHEM/HMCCUConf.pm
UPD FHEM/msgSchema.pm
UPD www/pgm2/fhemweb.js
UPD www/pgm2/svg.js
New entries in the CHANGED file:
- bugfix: 74_XiaomiFlowerSens: 0.6.4 rewrite Errorhandling
- bugfix: 70_BRAVIA: utf-8 character handling
use WOL only if device is absent (exception 2013 model)
respect channel uri for tv input selection
- changed: 93_DbRep: V4.10.3, rename reading "diff-overrun_limit-"
to "diff_overrun_limit_"
- changed: 57_Calendar: avoid some warnings
- bufix: 00_MQTT: fixed delete MQTT_DEVICE
- update: 98_DOIFtools: suppress lookup windows in DOIF or DOIFtools
by attribute DOIFtoolsNoLookUp and DOIFtoolsNoLookUpInDOIF
- bugfix: 88_HMCCU: Bug fixes
- update: 98_DOIFtools: improved lookup window handling for for huge content
add attributes section and Ok button
- update: 98_DOIFtools: add lookup window for probably assiciated devices
(internals and readings) in DOIF and DOIFtools detail view
- bugfix: FB_CALLIST: cleanup readings on set command clear
- update: 88_HMCCU.pm: version 3.9.001 with minor changes
- update: 98_DOIFtools: add attribute to move event monitor directly above
readings section in detail view of DOIF
- update: 93_DbLog: update to version 2.11.1, solves some issues since
version 2.10.4, command set ... reopen extended
- update: 98_DOIFtools.pm: add some hints, improved logfile handling
- bugfix: 74_XiaomiFlowerSens: 0.6.3 fix blockingDone Routine
- feature: 75_MSG: support for ReplaceSetMagic; msg command may now be used
with texts containing [device:reading] to replace with
found readings
... rest of lines skipped.
fhemtabletui
nothing to do...
Ist die Anzahl der Updates richtig?
@n4rrOx
das hatte ich auch schon mal irgendwo gefragt, das "wget" ist nicht richtig, aber seinerzeit hatte nie einer mal ein richtigen Code eingesetzt.
ich meine es war so
FHEM:qx(curl -sS http://fhem.de/fhemupdate/controls_fhem.txt| diff - /opt/fhem/FHEM/controls_fhem.txt |grep ">"|grep "UPD"|grep "FHEM"|cut -d" " -f5),FTUI:qx(wget -qO - https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt| diff - /opt/fhem/FHEM/controls_fhemtabletui.txt |grep ">" |grep "UPD"|wc -l),ALL:{ReadingsNum($name, "FHEM", 0) + ReadingsNum($name, "FTUI", 0)}Zitat von: Eisix am 05 Februar 2017, 14:54:30
Hallo,
Da mehrere gefragt haben nochmal der Code meines Servermonitors und des Netzwerkmonitors.
Gruß
Eisix
dazu mal meine Frage, da ich dein Update Teil mal genutzt habe, zeigt er immer ein Ausrufezeichen oder sollte dort die Anzahl der Updates bei Fhem, FTUI stehen.
Ich habe bei allen nur Ausrufezeichen drin...! ich bin aber der Meinung es gesehen zu haben das dort Zahlen stehen sollten, dass kommt bei mir gar nicht mehr
@n4rrOx
Die Abfrage habe ich mal verbrochen. wget hat bis zum Umzug der Server funktioniert danach ging nur noch curl zuverlässig.
@moonsorrox
Normalerweise steht da die Anzahl der updates für den jeweiligen Typ.
Muss ich mal nachschauen. Ist eh noch einiges etwas durcheinander gewirbelt von 2.5
Gruß
Eisix
OK..
denn ich teste jetzt schon die zweite Variante und ich habe immer nur Ausrufezeichen, irgendwann waren da bei mir Zahlen (extrem hohe Anzahl - 1868)
Wenn ich bei dir im PopUp auf das jeweilige Icon drücke bleiben es bei mir Ausrufezeichen..! genauso in meinem anderen Servermonitor.
Ich glaube das entsprechende dummy oder Update.counter muss da noch angepasst werden
hier mal das list vom Update.counter
Internals:
CFGFN ./FHEM/System.cfg
NAME Update.Counter
NR 3179
STATE 1868
TYPE CustomReadings
Readings:
2017-02-06 17:46:27 ALL 1868
2017-02-06 17:46:27 FHEM 1868
2017-02-06 17:46:27 FTUI 0
2017-02-06 17:46:27 state OK
Attributes:
event-on-update-reading FHEM,FTUI,ALL
group Update FTUI
interval 3600
readingDefinitions FHEM:qx(wget -qO - http://fhem.de/fhemupdate/controls_fhem.txt| diff - /opt/fhem/FHEM/controls_fhem.txt |grep ">"|grep "UPD"|wc -l),FTUI:qx(wget -qO - https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt| diff - /opt/fhem/FHEM/controls_fhemtabletui.txt |grep ">" |grep "UPD"|wc -l),ALL:{ReadingsNum($name, "FHEM", 0) + ReadingsNum($name, "FTUI", 0)}
room HWR
stateFormat ALL
Hi
wie vorhin gesagt verwende als def anstelle von wget curl - hier der code:
attr Update.Counter readingDefinitions
FHEM:qx(curl -sS http://fhem.de/fhemupdate/controls_fhem.txt| diff - /opt/fhem/FHEM/controls_fhem.txt |grep ">"|grep "UPD"|wc -l),FTUI:qx(curl -sS https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt| diff - /opt/fhem/FHEM/controls_fhemtabletui.txt |grep ">" |grep "UPD"|wc -l),ALL:{ReadingsNum($name, "FHEM", 0) + ReadingsNum($name, "FTUI", 0)}
Weiters schau ob curl installiert ist - ansonsten mit:
sudo add-apt-repository "deb http://mirrors.kernel.org/ubuntu wily main"
sudo apt-get update
sudo apt-get install curl
installieren.
lg
AL
ja genau das war mein letzter Stand.. ;)
@al15
Machst du über FTUI auch ein Linux bzw Paket Update von Ubuntu..? Falls ja würde mich das interessieren wie..!
Hallo,
nein mach ich 'noch' nicht :)
lg
AL
Zitat von: rvideobaer am 02 Februar 2017, 17:47:43
Hallo,
Da ich mit einem Mac arbeite TextWrangler, der kann auch direkt FTP. Mein Sohn versucht mich immer zu Bracket zu überreden wo es wohl auch ein FTP Plugin gibt.
Gruß Rolf
Ich arbeite auch am Mac, auch mit TextWrangler (aber ich wusste garnicht, dass der FTP kann) habe immer Captain FTP benutzt. Dank Deines Tips brauche ich den Captain nun nicht mehr :) Danke
Am Mac mit SublimeText o.ä.. Habe Brackets mal ausprobiert. Mir war nicht bekannt, dass es ein PlugIn für FTP gibt. Muss ich mal ausprobieren.
Da ich am Mac für FTP Übertragungen sowieso Transmit verwende hab ich mir das bei Brackets auch noch nicht angeschaut.
ich wähle immer Öffnen in --> Brackets aus Transmit.
Das erstellt dann deine temporäre Datei auf dem Rechner und sobald man in Brackets die Datei speichert überträgt Transmit die Änderungen sofort auf den FTP Server.
So hat man auch einen einfachen Workflow ohne immer die Datei manuell übertragen zu müssen.
Ich bearbeite meine Dateien aufm Mac bisher mit Eclipse. Die Daten liegen lokal in einem Dropbox-Ordner und werden per CloudSync von meiner Synology runtergeladen. Dadurch, dass html so klein sind geht das mit dem Hoch- und Runterladen sehr schnell^^
Zusätzlich nutze ich SVN, um bei größeren Änderungen leicht zurückkommen zu können.
Brackets werde ich mir mal anschauen. Das wird sicher auch ein SVN Plugin haben :)
Beste Grüße
Andy
@moonsorrox
So sieht das custom reading bei mir aus
Internals:
NAME UPDATE
NR 264
STATE OK
TYPE CustomReadings
Readings:
2017-02-07 10:47:24 ALL 4
2017-02-07 10:47:24 FHEM 4
2017-02-07 10:47:24 FTUI 0
2017-02-07 10:47:24 state OK
Attributes:
event-on-update-reading FHEM,FTUI,ALL
interval 10800
readingDefinitions FHEM:qx(curl -sS http://fhem.de/fhemupdate/controls_fhem.txt| diff - /opt/fhem/FHEM/controls_fhem.txt |grep ">"|grep "UPD"|wc -l),FTUI:qx(wget -qO - https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt| diff - /opt/fhem/FHEM/controls_fhemtabletui.txt |grep ">" |grep "UPD"|wc -l),ALL:{ReadingsNum($name, "FHEM", 0) + ReadingsNum($name, "FTUI", 0)}
In FTUI ist das Problem hier
data-warn='["UPDATE:FHEM:(\d+)]'
es wird nicht der Inhalt des Readings zurückgegeben. Ich brauche einen Experten ;D
<div data-type="popup" data-width="260px" data-height="120px">
<div data-type="symbol" data-device="UPDATE" data-get="ALL" data-background-icon="fa-circle" data-on-background-color="orange" data-off-background-color="orange" data-get-warn="(\d+)" data-icon="fs-system_fhem_update warn" class="inline warn"></div>
<div class="dialog">
<header>Update</header>
</br>
<div class="inline">
<div data-type="button"
data-device="UPDATE.status"
data-get="UPDATE.FHEM"
data-warn='["UPDATE:FHEM:(\d+)]'
data-fhem-cmd="setreading UPDATE.status UPDATE.FHEM run"
data-states='["idle","update","run","done"]'
data-icons='["fa-refresh","fa-refresh fa-blink","fa-refresh fa-spin","fa-refresh"]'
data-on-colors='["darkgrey","red","white","green"]'
data-background-icon="fa-circle"
data-on-background-color="orange"
data-off-background-color="orange"
data-icon="fa-refresh warn"
class="warn"
></div>
<div data-type="label"><small>FHEM</small></div>
</div>
Hat jemand eine funktionierende Version?
Gruß
Eisix
@Eisix
vielen Dank für deine Information, ja das sieht bei mir genauso aus. Ich habe mir extra ein neues CustomReading "UPDATE.status" gebaut um die Unterschiede festzustellen.
Mein CustomReading
Internals:
CFGFN ./FHEM/System.cfg
NAME UPDATE.status
NR 3201
STATE 1
TYPE CustomReadings
Readings:
2017-02-07 11:51:19 ALL 1
2017-02-07 11:51:19 FHEM FHEM/01_FHEMWEB.pm
2017-02-07 11:51:19 FTUI 0
2017-02-07 11:51:19 state OK
Attributes:
event-on-update-reading FHEM,FTUI,ALL
interval 3600
readingDefinitions FHEM:qx(curl -sS http://fhem.de/fhemupdate/controls_fhem.txt| diff - /opt/fhem/FHEM/controls_fhem.txt |grep ">"|grep "UPD"|grep "FHEM"|cut -d" " -f5),FTUI:qx(wget -qO - https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt| diff - /opt/fhem/FHEM/controls_fhemtabletui.txt |grep ">" |grep "UPD"|wc -l),ALL:{ReadingsNum($name, "FHEM", 0) + ReadingsNum($name, "FTUI", 0)}
room HWR
stateFormat ALL
nach einer funktionierenden Version habe ich auch schon gefragt, es kommt momentan nichts ;) was hilft...!
Nach dem ich mich hier durch alle (!) 53 Seiten gearbeitet habe, einige Anregungen gleich mal getestet,
eingebaut oder verworfen habe, hier ein erster Einblick in mein UI.
Ich habe erst mal das Wichtigste fertig gestellt. Dies war die Steuerung der Jalousien und der Überblick
über Fenster und Türen. Für einen Anfänger war es nicht so einfach alles zu verstehen, aber es wurde immer besser.
Besonders durch die Hilfe hier im Forum kommt man mal einen (oder mehrere) Schritte weiter. Der Rest ist dann
nach der alten Try and Error Funktion gewachsen. Zur Zeit versuche ich mich an der optischen Aufbereitung. Die Icons
sind noch nicht nach meinem Geschmack, aber ich bin dran so es die Zeit erlaubt. Einige Felder sind noch als Platzhalter
konzipiert.
Na schaut mal und dann erhoffe ich viel konstruktive Kritik.
Erst mal meine Startseite und dann die erwähnte Fensterseite ...
Zitat von: Ban-ya am 07 Februar 2017, 12:20:22
Na schaut mal und dann erhoffe ich viel konstruktive Kritik.
der Hund ist gut :D ;) :D
Zitat von: moonsorrox am 07 Februar 2017, 12:22:23
der Hund ist gut :D ;) :D
:) den Vorgänger siehst Du im Profilfoto ;)
Zitat von: moonsorrox am 06 Februar 2017, 17:49:21
@n4rrOx
das hatte ich auch schon mal irgendwo gefragt, das "wget" ist nicht richtig, aber seinerzeit hatte nie einer mal ein richtigen Code eingesetzt.
ich meine es war so
FHEM:qx(curl -sS http://fhem.de/fhemupdate/controls_fhem.txt| diff - /opt/fhem/FHEM/controls_fhem.txt |grep ">"|grep "UPD"|grep "FHEM"|cut -d" " -f5),FTUI:qx(wget -qO - https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt| diff - /opt/fhem/FHEM/controls_fhemtabletui.txt |grep ">" |grep "UPD"|wc -l),ALL:{ReadingsNum($name, "FHEM", 0) + ReadingsNum($name, "FTUI", 0)}
dazu mal meine Frage, da ich dein Update Teil mal genutzt habe, zeigt er immer ein Ausrufezeichen oder sollte dort die Anzahl der Updates bei Fhem, FTUI stehen.
Ich habe bei allen nur Ausrufezeichen drin...! ich bin aber der Meinung es gesehen zu haben das dort Zahlen stehen sollten, dass kommt bei mir gar nicht mehr
Danke, hat funktioniert! =)
@moonsorrox
Bezüglich Anzahl der Updates (Warn)
so data-warn="UPDATE:ALL" funktioniert es.
<div data-type="button"
data-device="UPDATE.status"
data-get="UPDATE.ALL"
data-warn="UPDATE:ALL"
data-fhem-cmd="setreading UPDATE.status UPDATE.ALL run"
data-states='["idle","update","run","done"]'
data-icons='["fa-refresh","fa-refresh fa-blink","fa-refresh fa-spin","fa-refresh"]'
data-on-colors='["darkgrey","red","white","green"]'
data-background-icon="fa-circle"
data-on-background-color="orange"
data-off-background-color="orange"
data-icon="fa-refresh warn"
class="warn"
></div>
Gruß
Eisix
Hallo zusammen,
hier ist meine Umsetzung.
Viele Grüße
Zage
Hallo Zage,
sieht gut aus. Ich hätte Interesse and der Umsetzung des TV-Programm (FTUI+Fhem).
Gruß
Eisix
Hi Eisix,
das ganze habe ich irgendwo im Forum gesehen.....
hier mein Define:
defmod mod_TV_Programme HTTPMOD http://www.klack.de/fernsehprogramm/was-laeuft-gerade/0/0/all.html 3600
attr mod_TV_Programme userattr reading01Name reading01Regex reading02Name reading02Regex reading03Name reading03Regex reading04Name reading04Regex reading05Name reading05Regex reading06Name reading06Regex reading07Name reading07Regex reading08Name reading08Regex reading09Name reading09Regex reading100Name reading100Regex reading101Name reading101Regex reading102Name reading102Regex reading103Name reading103Regex reading104Name reading104Regex reading105Name reading105Regex reading106Name reading106Regex reading107Name reading107Regex reading108Name reading108Regex reading109Name reading109Regex reading10Name reading10Regex reading110Name reading110Regex reading111Name reading111Regex reading112Name reading112Regex reading113Name reading113Regex reading114Name reading114Regex reading115Name reading115Regex reading116Name reading116Regex reading117Name reading117Regex reading118Name reading118Regex reading119Name reading119Regex reading11Name reading11Regex reading120Name reading120Regex reading121Name reading121Regex reading122Name reading122Regex reading123Name reading123Regex reading124Name reading124Regex reading125Name reading125Regex reading126Name reading126Regex reading127Name reading127Regex reading128Name reading128Regex reading129Name reading129Regex reading12Name reading12Regex reading130Name reading130Regex reading131Name reading131Regex reading132Name reading132Regex reading133Name reading133Regex reading134Name reading134Regex reading135Name reading135Regex reading136Name reading136Regex reading13Name reading13Regex reading14Name reading14Regex reading15Name reading15Regex reading16Name reading16Regex reading17Name reading17Regex reading18Name reading18Regex reading19Name reading19Regex reading20Name reading20Regex reading21Name reading21Regex reading22Name reading22Regex reading23Name reading23Regex reading24Name reading24Regex reading25Name reading25Regex reading26Name reading26Regex reading27Name reading27Regex reading28Name reading28Regex reading29Name reading29Regex reading30Name reading30Regex reading31Name reading31Regex reading32Name reading32Regex reading33Name reading33Regex reading34Name reading34Regex reading35Name reading35Regex reading36Name reading36Regex reading37Name reading37Regex reading38Name reading38Regex reading39Name reading39Regex reading40Name reading40Regex reading41Name reading41Regex reading42Name reading42Regex reading43Name reading43Regex reading44Name reading44Regex reading45Name reading45Regex reading46Name reading46Regex reading47Name reading47Regex reading48Name reading48Regex reading49Name reading49Regex reading50Name reading50Regex reading51Name reading51Regex reading52Name reading52Regex reading53Name reading53Regex reading54Name reading54Regex reading55Name reading55Regex reading56Name reading56Regex reading57Name reading57Regex reading58Name reading58Regex reading59Name reading59Regex reading60Name reading60Regex reading61Name reading61Regex reading62Name reading62Regex reading63Name reading63Regex reading64Name reading64Regex reading65Name reading65Regex reading66Name reading66Regex reading67Name reading67Regex reading68Name reading68Regex reading69Name reading69Regex reading70Name reading70Regex reading71Name reading71Regex reading72Name reading72Regex reading73Name reading73Regex reading74Name reading74Regex reading75Name reading75Regex reading76Name reading76Regex reading77Name reading77Regex reading78Name reading78Regex reading79Name reading79Regex reading80Name reading80Regex reading81Name reading81Regex reading82Name reading82Regex reading83Name reading83Regex reading84Name reading84Regex reading85Name reading85Regex reading86Name reading86Regex reading87Name reading87Regex reading88Name reading88Regex reading89Name reading89Regex reading90Name reading90Regex reading91Name reading91Regex reading92Name reading92Regex reading93Name reading93Regex reading94Name reading94Regex reading95Name reading95Regex reading96Name reading96Regex reading97Name reading97Regex reading98Name reading98Regex reading99Name reading99Regex stateFormat timeout verbose
attr mod_TV_Programme reading01Name ARD
attr mod_TV_Programme reading01Regex title="ARD"[\w\W]*?<div class="content">\s*<a[\w\W]*?>\s*(.*?)\s*</a>
attr mod_TV_Programme reading02Name ARD_time
attr mod_TV_Programme reading02Regex title="ARD"[\w\W]*?<td class="time">\s*(.*?)\s*<
attr mod_TV_Programme reading03Name ARD_next
attr mod_TV_Programme reading03Regex title="ARD"[\w\W]*?<td class="time[\w\W]*?Row">[\w\W]*?<div[\w\W]*?<div class="content">\s*<a[\w\W]*?>\s*(.*?)\s*</a>
attr mod_TV_Programme reading04Name ARD_next_time
attr mod_TV_Programme reading04Regex title="ARD"[\w\W]*?<td class="time[\w\W]*?Row">\s*(.*?)\s*<div
attr mod_TV_Programme reading05Name ZDF
attr mod_TV_Programme reading05Regex title="ZDF"[\w\W]*?<div class="content">\s*<a[\w\W]*?>\s*(.*?)\s*</a>
attr mod_TV_Programme reading06Name ZDF_time
attr mod_TV_Programme reading06Regex title="ZDF"[\w\W]*?<td class="time">\s*(.*?)\s*<
attr mod_TV_Programme reading07Name ZDF_next
attr mod_TV_Programme reading07Regex title="ZDF"[\w\W]*?<td class="time[\w\W]*?Row">[\w\W]*?<div[\w\W]*?<div class="content">\s*<a[\w\W]*?>\s*(.*?)\s*</a>
attr mod_TV_Programme reading08Name ZDF_next_time
attr mod_TV_Programme reading08Regex title="ZDF"[\w\W]*?<td class="time[\w\W]*?Row">\s*(.*?)\s*<div
attr mod_TV_Programme reading09Name RTL
attr mod_TV_Programme reading09Regex title="RTL"[\w\W]*?<div class="content">\s*<a[\w\W]*?>\s*(.*?)\s*</a>
attr mod_TV_Programme reading100Name SkyAction_next_time
attr mod_TV_Programme reading100Regex title="Sky Action"[\w\W]*?<td class="time[\w\W]*?Row">\s*(.*?)\s*<div
attr mod_TV_Programme reading101Name SkyComedy
attr mod_TV_Programme reading101Regex title="Sky Comedy"[\w\W]*?<div class="content">\s*<a[\w\W]*?>\s*(.*?)\s*</a>
attr mod_TV_Programme reading102Name SkyComedy_time
attr mod_TV_Programme reading102Regex title="Sky Comedy"[\w\W]*?<td class="time">\s*(.*?)\s*<
attr mod_TV_Programme reading103Name SkyComedy_next
attr mod_TV_Programme reading103Regex title="Sky Comedy"[\w\W]*?<td class="time[\w\W]*?Row">[\w\W]*?<div[\w\W]*?<div class="content">\s*<a[\w\W]*?>\s*(.*?)\s*</a>
attr mod_TV_Programme reading104Name SkyComedy_next_time
attr mod_TV_Programme reading104Regex title="Sky Comedy"[\w\W]*?<td class="time[\w\W]*?Row">\s*(.*?)\s*<div
attr mod_TV_Programme reading105Name SkyEmotion
attr mod_TV_Programme reading105Regex title="Sky Emotion"[\w\W]*?<div class="content">\s*<a[\w\W]*?>\s*(.*?)\s*</a>
attr mod_TV_Programme reading106Name SkyEmotion_time
attr mod_TV_Programme reading106Regex title="Sky Emotion"[\w\W]*?<td class="time">\s*(.*?)\s*<
attr mod_TV_Programme reading107Name SkyEmotion_next
attr mod_TV_Programme reading107Regex title="Sky Emotion"[\w\W]*?<td class="time[\w\W]*?Row">[\w\W]*?<div[\w\W]*?<div class="content">\s*<a[\w\W]*?>\s*(.*?)\s*</a>
attr mod_TV_Programme reading108Name SkyEmotion_next_time
attr mod_TV_Programme reading108Regex title="Sky Emotion"[\w\W]*?<td class="time[\w\W]*?Row">\s*(.*?)\s*<div
attr mod_TV_Programme reading109Name SkyNostalgie
attr mod_TV_Programme reading109Regex title="Sky Nostalgie"[\w\W]*?<div class="content">\s*<a[\w\W]*?>\s*(.*?)\s*</a>
attr mod_TV_Programme reading10Name RTL_time
attr mod_TV_Programme reading10Regex title="RTL"[\w\W]*?<td class="time">\s*(.*?)\s*<
attr mod_TV_Programme reading110Name SkyNostalgie_time
attr mod_TV_Programme reading110Regex title="Sky Nostalgie"[\w\W]*?<td class="time">\s*(.*?)\s*<
attr mod_TV_Programme reading111Name SkyNostalgie_next
attr mod_TV_Programme reading111Regex title="Sky Nostalgie"[\w\W]*?<td class="time[\w\W]*?Row">[\w\W]*?<div[\w\W]*?<div class="content">\s*<a[\w\W]*?>\s*(.*?)\s*</a>
attr mod_TV_Programme reading112Name SkyNostalgie_next_time
attr mod_TV_Programme reading112Regex title="Sky Nostalgie"[\w\W]*?<td class="time[\w\W]*?Row">\s*(.*?)\s*<div
attr mod_TV_Programme reading113Name SkyKrimi
attr mod_TV_Programme reading113Regex title="Sky Krimi"[\w\W]*?<div class="content">\s*<a[\w\W]*?>\s*(.*?)\s*</a>
attr mod_TV_Programme reading114Name SkyKrimi_time
attr mod_TV_Programme reading114Regex title="Sky Krimi"[\w\W]*?<td class="time">\s*(.*?)\s*<
attr mod_TV_Programme reading115Name SkyKrimi_next
attr mod_TV_Programme reading115Regex title="Sky Krimi"[\w\W]*?<td class="time[\w\W]*?Row">[\w\W]*?<div[\w\W]*?<div class="content">\s*<a[\w\W]*?>\s*(.*?)\s*</a>
attr mod_TV_Programme reading116Name SkyKrimi_next_time
attr mod_TV_Programme reading116Regex title="Sky Krimi"[\w\W]*?<td class="time[\w\W]*?Row">\s*(.*?)\s*<div
attr mod_TV_Programme reading117Name SkySport1
attr mod_TV_Programme reading117Regex title="Sky Sport 1"[\w\W]*?<div class="content">\s*<a[\w\W]*?>\s*(.*?)\s*</a>
attr mod_TV_Programme reading118Name SkySport1_time
attr mod_TV_Programme reading118Regex title="Sky Sport 1"[\w\W]*?<td class="time">\s*(.*?)\s*<
attr mod_TV_Programme reading119Name SkySport1_next
attr mod_TV_Programme reading119Regex title="Sky Sport 1"[\w\W]*?<td class="time[\w\W]*?Row">[\w\W]*?<div[\w\W]*?<div class="content">\s*<a[\w\W]*?>\s*(.*?)\s*</a>
attr mod_TV_Programme reading11Name RTL_next
attr mod_TV_Programme reading11Regex title="RTL"[\w\W]*?<td class="time[\w\W]*?Row">[\w\W]*?<div[\w\W]*?<div class="content">\s*<a[\w\W]*?>\s*(.*?)\s*</a>
attr mod_TV_Programme reading120Name SkySport1_next_time
attr mod_TV_Programme reading120Regex title="Sky Sport 1"[\w\W]*?<td class="time[\w\W]*?Row">\s*(.*?)\s*<div
attr mod_TV_Programme reading121Name SkySport2
attr mod_TV_Programme reading121Regex title="Sky Sport 2"[\w\W]*?<div class="content">\s*<a[\w\W]*?>\s*(.*?)\s*</a>
attr mod_TV_Programme reading122Name SkySport2_time
attr mod_TV_Programme reading122Regex title="Sky Sport 2"[\w\W]*?<td class="time">\s*(.*?)\s*<
attr mod_TV_Programme reading123Name SkySport2_next
attr mod_TV_Programme reading123Regex title="Sky Sport 2"[\w\W]*?<td class="time[\w\W]*?Row">[\w\W]*?<div[\w\W]*?<div class="content">\s*<a[\w\W]*?>\s*(.*?)\s*</a>
attr mod_TV_Programme reading124Name SkySport2_next_time
attr mod_TV_Programme reading124Regex title="Sky Sport 2"[\w\W]*?<td class="time[\w\W]*?Row">\s*(.*?)\s*<div
attr mod_TV_Programme reading125Name Sky3D
attr mod_TV_Programme reading125Regex title="Sky 3D"[\w\W]*?<div class="content">\s*<a[\w\W]*?>\s*(.*?)\s*</a>
attr mod_TV_Programme reading126Name Sky3D_time
attr mod_TV_Programme reading126Regex title="Sky 3D"[\w\W]*?<td class="time">\s*(.*?)\s*<
attr mod_TV_Programme reading127Name Sky3D_next
attr mod_TV_Programme reading127Regex title="Sky 3D"[\w\W]*?<td class="time[\w\W]*?Row">[\w\W]*?<div[\w\W]*?<div class="content">\s*<a[\w\W]*?>\s*(.*?)\s*</a>
attr mod_TV_Programme reading128Name Sky3D_next_time
attr mod_TV_Programme reading128Regex title="Sky 3D"[\w\W]*?<td class="time[\w\W]*?Row">\s*(.*?)\s*<div
attr mod_TV_Programme reading129Name Sport1USHD
attr mod_TV_Programme reading129Regex title="Sky Sport1\+ US HD"[\w\W]*?<div class="content">\s*<a[\w\W]*?>\s*(.*?)\s*</a>
attr mod_TV_Programme reading12Name RTL_next_time
attr mod_TV_Programme reading12Regex title="RTL"[\w\W]*?<td class="time[\w\W]*?Row">\s*(.*?)\s*<div
attr mod_TV_Programme reading130Name Sport1USHD_time
attr mod_TV_Programme reading130Regex title="Sky Sport1\+ US HD"[\w\W]*?<td class="time">\s*(.*?)\s*<
attr mod_TV_Programme reading131Name Sport1USHD_next
attr mod_TV_Programme reading131Regex title="Sky Sport1\+ US HD"[\w\W]*?<td class="time[\w\W]*?Row">[\w\W]*?<div[\w\W]*?<div class="content">\s*<a[\w\W]*?>\s*(.*?)\s*</a>
attr mod_TV_Programme reading132Name Sport1USHD_next_time
attr mod_TV_Programme reading132Regex title="Sky Sport1\+ US HD"[\w\W]*?<td class="time[\w\W]*?Row">\s*(.*?)\s*<div
attr mod_TV_Programme reading133Name SkyKrimi
attr mod_TV_Programme reading133Regex title="Sky Krimi"[\w\W]*?<div class="content">\s*<a[\w\W]*?>\s*(.*?)\s*</a>
attr mod_TV_Programme reading134Name SkyKrimi_time
attr mod_TV_Programme reading134Regex title="Sky Krimi"[\w\W]*?<td class="time">\s*(.*?)\s*<
attr mod_TV_Programme reading135Name SkyKrimi_next
attr mod_TV_Programme reading135Regex title="Sky Krimi"[\w\W]*?<td class="time[\w\W]*?Row">[\w\W]*?<div[\w\W]*?<div class="content">\s*<a[\w\W]*?>\s*(.*?)\s*</a>
attr mod_TV_Programme reading136Name SkyKrimi_next_time
attr mod_TV_Programme reading136Regex title="Sky Krimi"[\w\W]*?<td class="time[\w\W]*?Row">\s*(.*?)\s*<div
attr mod_TV_Programme reading13Name Sat1
attr mod_TV_Programme reading13Regex title="SAT.1"[\w\W]*?<div class="content">\s*<a[\w\W]*?>\s*(.*?)\s*</a>
attr mod_TV_Programme reading14Name Sat1_time
attr mod_TV_Programme reading14Regex title="SAT.1"[\w\W]*?<td class="time">\s*(.*?)\s*<
attr mod_TV_Programme reading15Name Sat1_next
attr mod_TV_Programme reading15Regex title="SAT.1"[\w\W]*?<td class="time[\w\W]*?Row">[\w\W]*?<div[\w\W]*?<div class="content">\s*<a[\w\W]*?>\s*(.*?)\s*</a>
attr mod_TV_Programme reading16Name Sat1_next_time
attr mod_TV_Programme reading16Regex title="SAT.1"[\w\W]*?<td class="time[\w\W]*?Row">\s*(.*?)\s*<div
attr mod_TV_Programme reading17Name Pro7
attr mod_TV_Programme reading17Regex title="Pro7"[\w\W]*?<div class="content">\s*<a[\w\W]*?>\s*(.*?)\s*</a>
attr mod_TV_Programme reading18Name Pro7_time
attr mod_TV_Programme reading18Regex title="Pro7"[\w\W]*?<td class="time">\s*(.*?)\s*<
attr mod_TV_Programme reading19Name Pro7_next
attr mod_TV_Programme reading19Regex title="Pro7"[\w\W]*?<td class="time[\w\W]*?Row">[\w\W]*?<div[\w\W]*?<div class="content">\s*<a[\w\W]*?>\s*(.*?)\s*</a>
attr mod_TV_Programme reading20Name Pro7_next_time
attr mod_TV_Programme reading20Regex title="Pro7"[\w\W]*?<td class="time[\w\W]*?Row">\s*(.*?)\s*<div
attr mod_TV_Programme reading21Name RTL2
attr mod_TV_Programme reading21Regex title="RTL 2"[\w\W]*?<div class="content">\s*<a[\w\W]*?>\s*(.*?)\s*</a>
attr mod_TV_Programme reading22Name RTL2_time
attr mod_TV_Programme reading22Regex title="RTL 2"[\w\W]*?<td class="time">\s*(.*?)\s*<
attr mod_TV_Programme reading23Name RTL2_next
attr mod_TV_Programme reading23Regex title="RTL 2"[\w\W]*?<td class="time[\w\W]*?Row">[\w\W]*?<div[\w\W]*?<div class="content">\s*<a[\w\W]*?>\s*(.*?)\s*</a>
attr mod_TV_Programme reading24Name RTL2_next_time
attr mod_TV_Programme reading24Regex title="RTL 2"[\w\W]*?<td class="time[\w\W]*?Row">\s*(.*?)\s*<div
attr mod_TV_Programme reading25Name VOX
attr mod_TV_Programme reading25Regex title="VOX"[\w\W]*?<div class="content">\s*<a[\w\W]*?>\s*(.*?)\s*</a>
attr mod_TV_Programme reading26Name VOX_time
attr mod_TV_Programme reading26Regex title="VOX"[\w\W]*?<td class="time">\s*(.*?)\s*<
attr mod_TV_Programme reading27Name VOX_next
attr mod_TV_Programme reading27Regex title="VOX"[\w\W]*?<td class="time[\w\W]*?Row">[\w\W]*?<div[\w\W]*?<div class="content">\s*<a[\w\W]*?>\s*(.*?)\s*</a>
attr mod_TV_Programme reading28Name VOX_next_time
attr mod_TV_Programme reading28Regex title="VOX"[\w\W]*?<td class="time[\w\W]*?Row">\s*(.*?)\s*<div
attr mod_TV_Programme reading29Name KiKa
attr mod_TV_Programme reading29Regex title="KiKa"[\w\W]*?<div class="content">\s*<a[\w\W]*?>\s*(.*?)\s*</a>
attr mod_TV_Programme reading30Name KiKa_time
attr mod_TV_Programme reading30Regex title="KiKa"[\w\W]*?<td class="time">\s*(.*?)\s*<
attr mod_TV_Programme reading31Name KiKa_next
attr mod_TV_Programme reading31Regex title="KiKa"[\w\W]*?<td class="time[\w\W]*?Row">[\w\W]*?<div[\w\W]*?<div class="content">\s*<a[\w\W]*?>\s*(.*?)\s*</a>
attr mod_TV_Programme reading32Name KiKa_next_time
attr mod_TV_Programme reading32Regex title="KiKa"[\w\W]*?<td class="time[\w\W]*?Row">\s*(.*?)\s*<div
attr mod_TV_Programme reading33Name SuperRTL
attr mod_TV_Programme reading33Regex title="Super RTL"[\w\W]*?<div class="content">\s*<a[\w\W]*?>\s*(.*?)\s*</a>
attr mod_TV_Programme reading34Name SuperRTL_time
attr mod_TV_Programme reading34Regex title="Super RTL"[\w\W]*?<td class="time">\s*(.*?)\s*<
attr mod_TV_Programme reading35Name SuperRTL_next
attr mod_TV_Programme reading35Regex title="Super RTL"[\w\W]*?<td class="time[\w\W]*?Row">[\w\W]*?<div[\w\W]*?<div class="content">\s*<a[\w\W]*?>\s*(.*?)\s*</a>
attr mod_TV_Programme reading36Name SuperRTL_next_time
attr mod_TV_Programme reading36Regex title="Super RTL"[\w\W]*?<td class="time[\w\W]*?Row">\s*(.*?)\s*<div
attr mod_TV_Programme reading37Name Sixx
attr mod_TV_Programme reading37Regex title="sixx"[\w\W]*?<div class="content">\s*<a[\w\W]*?>\s*(.*?)\s*</a>
attr mod_TV_Programme reading38Name Sixx_time
attr mod_TV_Programme reading38Regex title="sixx"[\w\W]*?<td class="time">\s*(.*?)\s*<
attr mod_TV_Programme reading39Name Sixx_next
attr mod_TV_Programme reading39Regex title="sixx"[\w\W]*?<td class="time[\w\W]*?Row">[\w\W]*?<div[\w\W]*?<div class="content">\s*<a[\w\W]*?>\s*(.*?)\s*</a>
attr mod_TV_Programme reading40Name Sixx_next_time
attr mod_TV_Programme reading40Regex title="sixx"[\w\W]*?<td class="time[\w\W]*?Row">\s*(.*?)\s*<div
attr mod_TV_Programme reading41Name ServusTV
attr mod_TV_Programme reading41Regex title="Servus TV"[\w\W]*?<div class="content">\s*<a[\w\W]*?>\s*(.*?)\s*</a>
attr mod_TV_Programme reading42Name ServusTV_time
attr mod_TV_Programme reading42Regex title="Servus TV"[\w\W]*?<td class="time">\s*(.*?)\s*<
attr mod_TV_Programme reading43Name ServusTV_next
attr mod_TV_Programme reading43Regex title="Servus TV"[\w\W]*?<td class="time[\w\W]*?Row">[\w\W]*?<div[\w\W]*?<div class="content">\s*<a[\w\W]*?>\s*(.*?)\s*</a>
attr mod_TV_Programme reading44Name ServusTV_next_time
attr mod_TV_Programme reading44Regex title="Servus TV"[\w\W]*?<td class="time[\w\W]*?Row">\s*(.*?)\s*<div
attr mod_TV_Programme reading45Name N24
attr mod_TV_Programme reading45Regex title="N24"[\w\W]*?<div class="content">\s*<a[\w\W]*?>\s*(.*?)\s*</a>
attr mod_TV_Programme reading46Name N24_time
attr mod_TV_Programme reading46Regex title="N24"[\w\W]*?<td class="time">\s*(.*?)\s*<
attr mod_TV_Programme reading47Name N24_next
attr mod_TV_Programme reading47Regex title="N24"[\w\W]*?<td class="time[\w\W]*?Row">[\w\W]*?<div[\w\W]*?<div class="content">\s*<a[\w\W]*?>\s*(.*?)\s*</a>
attr mod_TV_Programme reading48Name N24_next_time
attr mod_TV_Programme reading48Regex title="N24"[\w\W]*?<td class="time[\w\W]*?Row">\s*(.*?)\s*<div
attr mod_TV_Programme reading49Name NTV
attr mod_TV_Programme reading49Regex title="N-TV"[\w\W]*?<div class="content">\s*<a[\w\W]*?>\s*(.*?)\s*</a>
attr mod_TV_Programme reading50Name NTV_time
attr mod_TV_Programme reading50Regex title="N-TV"[\w\W]*?<td class="time">\s*(.*?)\s*<
attr mod_TV_Programme reading51Name NTV_next
attr mod_TV_Programme reading51Regex title="N-TV"[\w\W]*?<td class="time[\w\W]*?Row">[\w\W]*?<div[\w\W]*?<div class="content">\s*<a[\w\W]*?>\s*(.*?)\s*</a>
attr mod_TV_Programme reading52Name NTV_next_time
attr mod_TV_Programme reading52Regex title="N-TV"[\w\W]*?<td class="time[\w\W]*?Row">\s*(.*?)\s*<div
attr mod_TV_Programme reading53Name Phoenix
attr mod_TV_Programme reading53Regex title="Phoenix"[\w\W]*?<div class="content">\s*<a[\w\W]*?>\s*(.*?)\s*</a>
attr mod_TV_Programme reading54Name Phoenix_time
attr mod_TV_Programme reading54Regex title="Phoenix"[\w\W]*?<td class="time">\s*(.*?)\s*<
attr mod_TV_Programme reading55Name Phoenix_next
attr mod_TV_Programme reading55Regex title="Phoenix"[\w\W]*?<td class="time[\w\W]*?Row">[\w\W]*?<div[\w\W]*?<div class="content">\s*<a[\w\W]*?>\s*(.*?)\s*</a>
attr mod_TV_Programme reading56Name Phoenix_next_time
attr mod_TV_Programme reading56Regex title="Phoenix"[\w\W]*?<td class="time[\w\W]*?Row">\s*(.*?)\s*<div
attr mod_TV_Programme reading57Name NationalGeographic
attr mod_TV_Programme reading57Regex title="National Geographic "[\w\W]*?<div class="content">\s*<a[\w\W]*?>\s*(.*?)\s*</a>
attr mod_TV_Programme reading58Name NationalGeographic_time
attr mod_TV_Programme reading58Regex title="National Geographic "[\w\W]*?<td class="time">\s*(.*?)\s*<
attr mod_TV_Programme reading59Name NationalGeographic_next
attr mod_TV_Programme reading59Regex title="National Geographic "[\w\W]*?<td class="time[\w\W]*?Row">[\w\W]*?<div[\w\W]*?<div class="content">\s*<a[\w\W]*?>\s*(.*?)\s*</a>
attr mod_TV_Programme reading60Name NationalGeographic_next_time
attr mod_TV_Programme reading60Regex title="National Geographic"[\w\W]*?<td class="time[\w\W]*?Row">\s*(.*?)\s*<div
attr mod_TV_Programme reading61Name Syfy
attr mod_TV_Programme reading61Regex title="Syfy"[\w\W]*?<div class="content">\s*<a[\w\W]*?>\s*(.*?)\s*</a>
attr mod_TV_Programme reading62Name Syfy_time
attr mod_TV_Programme reading62Regex title="Syfy"[\w\W]*?<td class="time">\s*(.*?)\s*<
attr mod_TV_Programme reading63Name Syfy_next
attr mod_TV_Programme reading63Regex title="Syfy"[\w\W]*?<td class="time[\w\W]*?Row">[\w\W]*?<div[\w\W]*?<div class="content">\s*<a[\w\W]*?>\s*(.*?)\s*</a>
attr mod_TV_Programme reading64Name Syfy_next_time
attr mod_TV_Programme reading64Regex title="Syfy"[\w\W]*?<td class="time[\w\W]*?Row">\s*(.*?)\s*<div
attr mod_TV_Programme reading65Name 13thStreet
attr mod_TV_Programme reading65Regex title="13th Street"[\w\W]*?<div class="content">\s*<a[\w\W]*?>\s*(.*?)\s*</a>
attr mod_TV_Programme reading66Name 13thStreet_time
attr mod_TV_Programme reading66Regex title="13th Street"[\w\W]*?<td class="time">\s*(.*?)\s*<
attr mod_TV_Programme reading67Name 13thStreet_next
attr mod_TV_Programme reading67Regex title="13th Street"[\w\W]*?<td class="time[\w\W]*?Row">[\w\W]*?<div[\w\W]*?<div class="content">\s*<a[\w\W]*?>\s*(.*?)\s*</a>
attr mod_TV_Programme reading68Name 13thStreet_next_time
attr mod_TV_Programme reading68Regex title="13th Street"[\w\W]*?<td class="time[\w\W]*?Row">\s*(.*?)\s*<div
attr mod_TV_Programme reading69Name AXN
attr mod_TV_Programme reading69Regex title="AXN"[\w\W]*?<div class="content">\s*<a[\w\W]*?>\s*(.*?)\s*</a>
attr mod_TV_Programme reading70Name AXN_time
attr mod_TV_Programme reading70Regex title="AXN"[\w\W]*?<td class="time">\s*(.*?)\s*<
attr mod_TV_Programme reading71Name AXN_next
attr mod_TV_Programme reading71Regex title="AXN"[\w\W]*?<td class="time[\w\W]*?Row">[\w\W]*?<div[\w\W]*?<div class="content">\s*<a[\w\W]*?>\s*(.*?)\s*</a>
attr mod_TV_Programme reading72Name AXN_next_time
attr mod_TV_Programme reading72Regex title="AXN"[\w\W]*?<td class="time[\w\W]*?Row">\s*(.*?)\s*<div
attr mod_TV_Programme reading73Name RTLCrime
attr mod_TV_Programme reading73Regex title="RTL Crime"[\w\W]*?<div class="content">\s*<a[\w\W]*?>\s*(.*?)\s*</a>
attr mod_TV_Programme reading74Name RTLCrime_time
attr mod_TV_Programme reading74Regex title="RTL Crime"[\w\W]*?<td class="time">\s*(.*?)\s*<
attr mod_TV_Programme reading75Name RTLCrime_next
attr mod_TV_Programme reading75Regex title="RTL Crime"[\w\W]*?<td class="time[\w\W]*?Row">[\w\W]*?<div[\w\W]*?<div class="content">\s*<a[\w\W]*?>\s*(.*?)\s*</a>
attr mod_TV_Programme reading76Name RTLCrime_next_time
attr mod_TV_Programme reading76Regex title="RTL Crime"[\w\W]*?<td class="time[\w\W]*?Row">\s*(.*?)\s*<div
attr mod_TV_Programme reading77Name SkyAtlantic
attr mod_TV_Programme reading77Regex title="Sky Atlantic HD"[\w\W]*?<div class="content">\s*<a[\w\W]*?>\s*(.*?)\s*</a>
attr mod_TV_Programme reading78Name SkyAtlantic_time
attr mod_TV_Programme reading78Regex title="Sky Atlantic HD"[\w\W]*?<td class="time">\s*(.*?)\s*<
attr mod_TV_Programme reading79Name SkyAtlantic_next
attr mod_TV_Programme reading79Regex title="Sky Atlantic HD"[\w\W]*?<td class="time[\w\W]*?Row">[\w\W]*?<div[\w\W]*?<div class="content">\s*<a[\w\W]*?>\s*(.*?)\s*</a>
attr mod_TV_Programme reading80Name SkyAtlantic_next_time
attr mod_TV_Programme reading80Regex title="Sky Atlantic HD"[\w\W]*?<td class="time[\w\W]*?Row">\s*(.*?)\s*<div
attr mod_TV_Programme reading81Name SkyCinema
attr mod_TV_Programme reading81Regex title="Sky Cinema"[\w\W]*?<div class="content">\s*<a[\w\W]*?>\s*(.*?)\s*</a>
attr mod_TV_Programme reading82Name SkyCinema_time
attr mod_TV_Programme reading82Regex title="Sky Cinema"[\w\W]*?<td class="time">\s*(.*?)\s*<
attr mod_TV_Programme reading83Name SkyCinema_next
attr mod_TV_Programme reading83Regex title="Sky Cinema"[\w\W]*?<td class="time[\w\W]*?Row">[\w\W]*?<div[\w\W]*?<div class="content">\s*<a[\w\W]*?>\s*(.*?)\s*</a>
attr mod_TV_Programme reading84Name SkyCinema_next_time
attr mod_TV_Programme reading84Regex title="Sky Cinema"[\w\W]*?<td class="time[\w\W]*?Row">\s*(.*?)\s*<div
attr mod_TV_Programme reading85Name SkyCinemap1
attr mod_TV_Programme reading85Regex title="Sky Cinema \+1"[\w\W]*?<div class="content">\s*<a[\w\W]*?>\s*(.*?)\s*</a>
attr mod_TV_Programme reading86Name SkyCinemap1_time
attr mod_TV_Programme reading86Regex title="Sky Cinema \+1"[\w\W]*?<td class="time">\s*(.*?)\s*<
attr mod_TV_Programme reading87Name SkyCinemap1_next
attr mod_TV_Programme reading87Regex title="Sky Cinema \+1"[\w\W]*?<td class="time[\w\W]*?Row">[\w\W]*?<div[\w\W]*?<div class="content">\s*<a[\w\W]*?>\s*(.*?)\s*</a>
attr mod_TV_Programme reading88Name SkyCinemap1_next_time
attr mod_TV_Programme reading88Regex title="Sky Cinema \+1"[\w\W]*?<td class="time[\w\W]*?Row">\s*(.*?)\s*<div
attr mod_TV_Programme reading89Name SkyCinemap24
attr mod_TV_Programme reading89Regex title="Sky Cinema \+24"[\w\W]*?<div class="content">\s*<a[\w\W]*?>\s*(.*?)\s*</a>
attr mod_TV_Programme reading90Name SkyCinemap24_time
attr mod_TV_Programme reading90Regex title="Sky Cinema \+24"[\w\W]*?<td class="time">\s*(.*?)\s*<
attr mod_TV_Programme reading91Name SkyCinemap24_next
attr mod_TV_Programme reading91Regex title="Sky Cinema \+24"[\w\W]*?<td class="time[\w\W]*?Row">[\w\W]*?<div[\w\W]*?<div class="content">\s*<a[\w\W]*?>\s*(.*?)\s*</a>
attr mod_TV_Programme reading92Name SkyCinemap24_next_time
attr mod_TV_Programme reading92Regex title="RTL"[\w\W]*?<td class="time[\w\W]*?Row">\s*(.*?)\s*<div
attr mod_TV_Programme reading93Name SkyCinemaHits
attr mod_TV_Programme reading93Regex title="Sky Cinema Hits"[\w\W]*?<div class="content">\s*<a[\w\W]*?>\s*(.*?)\s*</a>
attr mod_TV_Programme reading94Name SkyCinemaHits_time
attr mod_TV_Programme reading94Regex title="Sky Cinema Hits"[\w\W]*?<td class="time">\s*(.*?)\s*<
attr mod_TV_Programme reading95Name SkyCinemaHits_next
attr mod_TV_Programme reading95Regex title="Sky Cinema Hits"[\w\W]*?<td class="time[\w\W]*?Row">[\w\W]*?<div[\w\W]*?<div class="content">\s*<a[\w\W]*?>\s*(.*?)\s*</a>
attr mod_TV_Programme reading96Name SkyCinemaHits_next_time
attr mod_TV_Programme reading96Regex title="Sky Cinema Hits"[\w\W]*?<td class="time[\w\W]*?Row">\s*(.*?)\s*<div
attr mod_TV_Programme reading97Name SkyAction
attr mod_TV_Programme reading97Regex title="Sky Action"[\w\W]*?<div class="content">\s*<a[\w\W]*?>\s*(.*?)\s*</a>
attr mod_TV_Programme reading98Name SkyAction_time
attr mod_TV_Programme reading98Regex title="Sky Action"[\w\W]*?<td class="time">\s*(.*?)\s*<
attr mod_TV_Programme reading99Name SkyAction_next
attr mod_TV_Programme reading99Regex title="Sky Action"[\w\W]*?<td class="time[\w\W]*?Row">[\w\W]*?<div[\w\W]*?<div class="content">\s*<a[\w\W]*?>\s*(.*?)\s*</a>
@Zage
Kannst du auch noch den HTML code dazu packen dann habe ich schon mal eine Basis mit der ich anfangen kann.
Gruß
Eisix
Zitat von: Eisix am 08 Februar 2017, 10:43:28
@moonsorrox
Bezüglich Anzahl der Updates (Warn)
so data-warn="UPDATE:ALL" funktioniert es.
das habe ich so drin..!
Folgendes Problem bei mir, wenn ich in Fhem nach Updates schaue, sehe ich grad diese..!
List of new / modified files since last update:
UPD ./CHANGED
UPD ./configDB.pm
UPD FHEM/52_I2C_PCA9685.pm
UPD FHEM/55_InfoPanel.pm
UPD FHEM/98_RandomTimer.pm
UPD FHEM/98_Text2Speech.pm
UPD FHEM/98_configdb.pm Wenn ich jetzt im FTUI schaue, zeigt mir das Icon "0", wenn ich drauf klicke "rödeln/drehen" die 3 Updatezeichen im PopUp dazu zeigt mir das Icon mit FHEM ein Ausrufezeichen, FTUI zeigt noch nicht einmal ein Warnkringel und ALL zeigt wieder ein Ausrufezeichen, irgend etwas ist da noch faul, ich weiß nur grad nicht wonach ich suchen soll..!
In Fhem zeigt mir mein Custom reading UPDATE.status im STATE folgende Zahl - 5229685.55 :-\ :-\
Hallo,
UPDATE.status ist bei meinem htmlcode nicht relevant für die Warn Anzeige. Geht alles über den CustomReading.
Habe die Readings manuell gesetzt (siehe screenshot) was mir aufgefallen ist, wenn der Wert 0 ist zeigt das Popup keinen Warnkreis an, auf der Hauptseite schon (zweiter screenshot)
Internals:
NAME UPDATE
NR 264
STATE OK
TYPE CustomReadings
Helper:
Dblog:
All:
Logdb:
TIME 1486558220.58875
VALUE 10
Fhem:
Logdb:
TIME 1486558269.2569
VALUE 10
Ftui:
Logdb:
TIME 1486558312.73494
VALUE 3
Readings:
2017-02-08 13:50:20 ALL 10
2017-02-08 13:51:09 FHEM 10
2017-02-08 13:51:52 FTUI 3
2017-02-08 12:01:22 state OK
Attributes:
event-on-update-reading FHEM,FTUI,ALL
interval 10800
readingDefinitions FHEM:qx(curl -sS http://fhem.de/fhemupdate/controls_fhem.txt| diff - /opt/fhem/FHEM/controls_fhem.txt |grep ">"|grep "UPD"|wc -l),FTUI:qx(wget -qO - https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt| diff - /opt/fhem/FHEM/controls_fhemtabletui.txt |grep ">" |grep "UPD"|wc -l),ALL:{ReadingsNum($name, "FHEM", 0) + ReadingsNum($name, "FTUI", 0)}
Hier der HTML-Part zur Tv-Liste:
<div class="pagetab" id="content4">
<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="8" data-sizey="4" class="whitebox">
<header>TV Programm</header>
<table border="0" width="100%">
<colgroup>
<col width="50">
<col width="20">
<col width="400">
<col width="20">
<col width="400">
</colgroup>
<tr>
<th><div data-type="label">Sender</th>
<th><div data-type="label">Anfang</th>
<th><div data-type="label">Sendung</th>
<th><div data-type="label">Nächstes</th>
<th><div data-type="label">Sendung</th>
</tr>
<tr>
<th><div data-type="image" data-url="..\images\default\tvmovie\ard.png" data-size="60%"</div></th>
<th><div data-type="label" data-device="mod_TV_Programme" data-get="ARD_time"></div></th>
<th><div data-type="label" data-device="mod_TV_Programme" data-get="ARD"></div></th>
<th><div data-type="label" data-device="mod_TV_Programme" data-get="ARD_next_time"></div></th>
<th><div data-type="label" data-device="mod_TV_Programme" data-get="ARD_next"></div></th>
</tr>
<tr>
<th><div data-type="image" data-url="..\images\default\tvmovie\zdf.png" data-size="60%"</div></th>
<th><div data-type="label" data-device="mod_TV_Programme" data-get="ZDF_time"></div></th>
<th><div data-type="label" data-device="mod_TV_Programme" data-get="ZDF"></div></th>
<th><div data-type="label" data-device="mod_TV_Programme" data-get="ZDF_next_time"></div></th>
<th><div data-type="label" data-device="mod_TV_Programme" data-get="ZDF_next"></div></th>
</tr>
<tr>
<th><div data-type="image" data-url="..\images\default\tvmovie\pro7.png" data-size="60%"</div></th>
<th><div data-type="label" data-device="mod_TV_Programme" data-get="Pro7_time"></div></th>
<th><div data-type="label" data-device="mod_TV_Programme" data-get="Pro7"></div></th>
<th><div data-type="label" data-device="mod_TV_Programme" data-get="Pro7_next_time"></div></th>
<th><div data-type="label" data-device="mod_TV_Programme" data-get="Pro7_next"></div></th>
</tr>
<tr>
<th><div data-type="image" data-url="..\images\default\tvmovie\rtl.png" data-size="60%"</div></th>
<th><div data-type="label" data-device="mod_TV_Programme" data-get="RTL_time"></div></th>
<th><div data-type="label" data-device="mod_TV_Programme" data-get="RTL"></div></th>
<th><div data-type="label" data-device="mod_TV_Programme" data-get="RTL_next_time"></div></th>
<th><div data-type="label" data-device="mod_TV_Programme" data-get="RTL_next"></div></th>
</tr>
<tr>
<th><div data-type="image" data-url="..\images\default\tvmovie\rtl2.png" data-size="60%"</div></th>
<th><div data-type="label" data-device="mod_TV_Programme" data-get="RTL2_time"></div></th>
<th><div data-type="label" data-device="mod_TV_Programme" data-get="RTL2"></div></th>
<th><div data-type="label" data-device="mod_TV_Programme" data-get="RTL2_next_time"></div></th>
<th><div data-type="label" data-device="mod_TV_Programme" data-get="RTL2_next"></div></th>
</tr>
<tr>
<th><div data-type="image" data-url="..\images\default\tvmovie\sat1.png" data-size="60%"</div></th>
<th><div data-type="label" data-device="mod_TV_Programme" data-get="Sat1_time"></div></th>
<th><div data-type="label" data-device="mod_TV_Programme" data-get="Sat1"></div></th>
<th><div data-type="label" data-device="mod_TV_Programme" data-get="Sat1_next_time"></div></th>
<th><div data-type="label" data-device="mod_TV_Programme" data-get="Sat1_next"></div></th>
</tr>
<tr>
<th><div data-type="image" data-url="..\images\default\tvmovie\vox.png" data-size="60%"</div></th>
<th><div data-type="label" data-device="mod_TV_Programme" data-get="VOX_time"></div></th>
<th><div data-type="label" data-device="mod_TV_Programme" data-get="VOX"></div></th>
<th><div data-type="label" data-device="mod_TV_Programme" data-get="VOX_next_time"></div></th>
<th><div data-type="label" data-device="mod_TV_Programme" data-get="VOX_next"></div></th>
</tr>
<tr>
<th><div data-type="image" data-url="..\images\default\tvmovie\super-rtl.png" data-size="60%"</div></th>
<th><div data-type="label" data-device="mod_TV_Programme" data-get="SuperRTL_time"></div></th>
<th><div data-type="label" data-device="mod_TV_Programme" data-get="SuperRTL"></div></th>
<th><div data-type="label" data-device="mod_TV_Programme" data-get="SuperRTL_next_time"></div></th>
<th><div data-type="label" data-device="mod_TV_Programme" data-get="SuperRTL_next"></div></th>
</tr>
<tr>
<th><div data-type="image" data-url="..\images\default\tvmovie\sky-cinema.png" data-size="60%"</div></th>
<th><div data-type="label" data-device="mod_TV_Programme" data-get="SkyCinema_time"></div></th>
<th><div data-type="label" data-device="mod_TV_Programme" data-get="SkyCinema"></div></th>
<th><div data-type="label" data-device="mod_TV_Programme" data-get="SkyCinema_next_time"></div></th>
<th><div data-type="label" data-device="mod_TV_Programme" data-get="SkyCinema_next"></div></th>
</tr>
<tr>
<th><div data-type="image" data-url="..\images\default\tvmovie\sky-cinema-1.png" data-size="60%"</div></th>
<th><div data-type="label" data-device="mod_TV_Programme" data-get="SkyCinemap1_time"></div></th>
<th><div data-type="label" data-device="mod_TV_Programme" data-get="SkyCinemap1"></div></th>
<th><div data-type="label" data-device="mod_TV_Programme" data-get="SkyCinemap1_next_time"></div></th>
<th><div data-type="label" data-device="mod_TV_Programme" data-get="SkyCinemap1_next"></div></th>
</tr>
<tr>
<th><div data-type="image" data-url="..\images\default\tvmovie\sky-cinema-24.png" data-size="60%"</div></th>
<th><div data-type="label" data-device="mod_TV_Programme" data-get="SkyCinemap24_time"></div></th>
<th><div data-type="label" data-device="mod_TV_Programme" data-get="SkyCinemap24"></div></th>
<th><div data-type="label" data-device="mod_TV_Programme" data-get="SkyCinemap24_next_time"></div></th>
<th><div data-type="label" data-device="mod_TV_Programme" data-get="SkyCinemap24_next"></div></th>
</tr>
<tr>
<th><div data-type="image" data-url="..\images\default\tvmovie\sky_atlantic.png" data-size="60%"</div></th>
<th><div data-type="label" data-device="mod_TV_Programme" data-get="SkyAtlantic_time"></div></th>
<th><div data-type="label" data-device="mod_TV_Programme" data-get="SkyAtlantic"></div></th>
<th><div data-type="label" data-device="mod_TV_Programme" data-get="SkyAtlantic_next_time"></div></th>
<th><div data-type="label" data-device="mod_TV_Programme" data-get="SkyAtlantic_next"></div></th>
</tr>
</table>
</li>
</ul>
</div>
</div>
VG
Zage
Zitat von: Eisix am 08 Februar 2017, 14:03:30
UPDATE.status ist bei meinem htmlcode nicht relevant für die Warn Anzeige.
aus deinem Teil deines FHEM Monitors habe ich aber diese Update Prozedur entnommen und hier steht in der Tabelle alles mit UPDATE.status drin, jetzt bin ich etwas verwirrt...!! :-\
<table align="center" style="border:1px solid grey; width:80%">
<tr>
<td style="border:2px solid grey;" class="A1"><center><div data-type="label" class="inline"><big>FHEM uptime<br></big></div>
</br>
<div data-type="label" data-device="sysmon" data-get="fhemuptime_text" class="small"></div>
</td>
<td style="border:2px solid grey;" class="B1"><center>
<div data-type="popup" data-width="120px" data-height="105px">
<div data-type="button" data-icon="fs-system_fhem_reboot" data-on-background-color="orange" data-off-background-color="orange" class=""></div>
<div class="dialog">
<header>Neustart FHEM</header>
<div data-type="button" data-fhem-cmd="shutdown restart" data-icon="fs-system_fhem"></div>
<div data-type="label" class="top">sicher?</div>
</div>
</div>
</td>
</tr>
<tr>
<td style="border:2px solid grey;" class="A2"><center><div data-type="label" class="inline"><big>FHEM updates<br></big></div>
</td>
<td style="border:2px solid grey;" class="B2"><center>
<div data-type="popup" data-width="260px" data-height="120px">
<div data-type="symbol" data-device="UPDATE" data-get="ALL" data-background-icon="fa-circle" data-on-background-color="orange" data-off-background-color="orange" data-get-warn="(\d+)" data-icon="fs-system_fhem_update warn" class="inline warn"></div>
<div class="dialog">
<header>Update</header>
</br>
<div class="inline">
<div data-type="button"
data-device="UPDATE.status"
data-get="UPDATE.FHEM"
data-warn="UPDATE:FHEM"
data-fhem-cmd="setreading UPDATE.status UPDATE.FHEM run"
data-states='["idle","update","run","done"]'
data-icons='["fa-refresh","fa-refresh fa-blink","fa-refresh fa-spin","fa-refresh"]'
data-on-colors='["darkgrey","red","white","green"]'
data-background-icon="fa-circle"
data-on-background-color="orange"
data-off-background-color="orange"
data-icon="fa-refresh warn"
class="warn"
></div>
<div data-type="label"><small>FHEM</small></div>
</div>
<div class="inline">
<div data-type="button"
data-device="UPDATE.status"
data-get="UPDATE.FTUI"
data-warn="UPDATE:FTUI"
data-fhem-cmd="setreading UPDATE.status UPDATE.FTUI run"
data-states='["idle","update","run","done"]'
data-icons='["fa-refresh","fa-refresh fa-blink","fa-refresh fa-spin","fa-refresh"]'
data-on-colors='["darkgrey","red","white","green"]'
data-background-icon="fa-circle"
data-on-background-color="orange"
data-off-background-color="orange"
data-icon="fa-refresh warn"
class="warn"
></div>
<div data-type="label"><small>FTUI</small></div>
</div>
<div class="inline">
<div data-type="button"
data-device="UPDATE.status"
data-get="UPDATE.ALL"
data-warn="UPDATE:ALL"
data-fhem-cmd="setreading UPDATE.status UPDATE.ALL run"
data-states='["idle","update","run","done"]'
data-icons='["fa-refresh","fa-refresh fa-blink","fa-refresh fa-spin","fa-refresh"]'
data-on-colors='["darkgrey","red","white","green"]'
data-background-icon="fa-circle"
data-on-background-color="orange"
data-off-background-color="orange"
data-icon="fa-refresh warn"
class="warn"
></div>
<div data-type="label"><small>All</small></div>
</div>
</div>
</div>
</td>
</tr>
</table>
Ok, denke jetzt habe ich verstanden wo das Problem ist.
Es gibt einmal das CustomReading mit der curl Abfrage und der Anzahl der Updates und es gibt ein Dummy das den Status des Update-Verlaufs abbildet.
NAME UPDATE.status
NR 267
STATE pending
TYPE dummy
Helper:
Dblog:
Update.all:
Logdb:
TIME 1486573286.21692
VALUE idle
Update.fhem:
Logdb:
TIME 1486573286.23327
VALUE idle
Update.ftui:
Logdb:
TIME 1486573286.24805
VALUE idle
State:
Logdb:
TIME 1486558748.52494
VALUE pending
Readings:
2017-02-08 18:01:26 UPDATE.ALL idle
2017-02-08 18:01:26 UPDATE.FHEM idle
2017-02-08 18:01:26 UPDATE.FTUI idle
2017-02-08 13:59:08 state pending
Attributes:
setList done pending
Das Warn kommt aus dem CustomReading(UPDATE) die Farben und verschiedenen Icons kommen aus dem dummy (UPDATE.status). Deshalb meinte ich UPDATE.status ist für die Warn-message nicht relevant.
Hoffe ich habe mich verständlich ausgedrückt ???
Gruß
Eisix
Hier im Thread verlinkt, falls es jemand interessiert: Eine meiner Meinung nach elegante Methode, FTUI auf verschiedenen Displaygrößen ohne doppelte Seitendefinition anzuzeigen.
https://forum.fhem.de/index.php/topic,66246.0.html (https://forum.fhem.de/index.php/topic,66246.0.html)
Zitat von: Eisix am 08 Februar 2017, 18:33:21
Ok, denke jetzt habe ich verstanden wo das Problem ist.
OK, also das habe ich jetzt auch so eingebaut, nun zeigt er mir auch die Update Zahlen..! ;)
Was mich aber irritiert, warum drehen die Teile im PopUp immer..? hast du das auch.. ist jetzt im screenshot nicht so zu sehen..!
Ich dachte das oder die Update werden damit auch angesprochen.
Der jeweilige Button zeigt den Update Verlauf an.
data-states='["idle","update","run","done"]'
Ich habe es so gemacht das ich FTUI, FHEM oder ALL per klick im popup updaten kann.
Jeweils ein DOIF das den Status setzt und mit einem readingsproxy hole ich mir den Log Eintrag "shutdown restart" der das ganze dann auf done setzt. Denke noch über einen automatischen Neustart nach dem patchen nach.
Gruß
Eisix
Zitat von: Eisix am 09 Februar 2017, 16:48:30
data-states='["idle","update","run","done"]'
Ich habe es so gemacht das ich FTUI, FHEM oder ALL per klick im popup updaten kann.
das habe ich ja auch 1 zu 1 von dir übernommen, aber das da noch mehr dran hängt wusste ich nicht, deshalb funktioniert das bei mir auch nicht richtig... OK das wird dann wohl noch eine Baustelle mehr und ich habe so einige in FTUI
Mache morgen noch einen finalen Test. Dann kann ich dir die DOIFS schicken. Wenn die devices gleich sind sollte es dann direkt funktionieren.
Gruß
Eisix
OK super..!
Meine Teile drehen im übrigen immer noch ;) :D ;)
So sieht dieser Teil aus, ohne deine Datenbank, habe noch ein paar Farbvarianten (Rahmen, 1. Updatespinner) drin, aber nur erst einmal zum probieren
<table align="center" style="border:1px solid royalblue; width:80%">
<tr>
<td style="border:2px solid royalblue;" class="A1"><center><div data-type="label" class="inline"><big>FHEM uptime<br></big></div>
</br>
<div data-type="label" data-device="sysmon" data-get="fhemuptime_text" class="small"></div>
</td>
<td style="border:2px solid royalblue;" class="B1"><center>
<div data-type="popup" data-width="120px" data-height="105px">
<div class=""
data-type="button"
data-icon="fs-system_fhem_reboot"
data-background-icon="fa-circle-thin"
data-off-background-color="#DC143C"
data-off-color="#DC143C"
data-on-background-color="#E6FF57"
data-on-color="#A6BF17">
</div>
<div class="dialog">
<header>Neustart</header>
<div data-type="button" data-fhem-cmd="shutdown restart" data-icon="fs-system_fhem"></div>
<div data-type="label" class="top">sicher?</div>
</div>
</div>
</td>
</tr>
<tr>
<td style="border:2px solid royalblue;" class="A1"><center><div data-type="label" class="inline"><big>Ubuntu Pakete<br></big></div>
</br>
<div data-type="label" data-device="sysmon" data-get="sys_updates" class="small"></div>
</td>
<td style="border:2px solid royalblue;" class="B1"><center>
<div data-type="popup" data-width="120px" data-height="105px">
<div data-type="button"
data-icon="fa-linux"
data-background-icon="fa-circle-thin"
data-off-background-color="#DC143C"
data-off-color="#DC143C"
data-on-background-color="#E6FF57"
data-on-color="#A6BF17" class="">
</div>
<div class="dialog">
<header>???</header>
<div data-type="button" data-fhem-cmd="shutdown restart" data-icon="fs-system_fhem"></div>
<div data-type="label" class="top">sicher?</div>
</div>
</div>
</td>
</tr>
<tr>
<td style="border:2px solid royalblue;" class="A2"><center><div data-type="label" class="inline"><big>FHEM updates<br></big></div>
</td>
<td style="border:2px solid royalblue;" class="B2"><center>
<div data-type="popup" data-width="260px" data-height="120px">
<div data-type="symbol"
data-device="UPDATE"
data-get="ALL"
data-get-warn="(\d+)"
data-background-icon="fa-circle-thin"
data-off-background-color="#E6FF57"
data-off-color="#A6BF17"
data-on-background-color="#DC143C"
data-on-color="#A6BF17"
data-icon="fs-system_fhem_update warn"
class="inline warn">
</div>
<div class="dialog">
<header>Update</header>
</br>
<div class="inline">
<div class="warn"
data-type="button"
data-device="UPDATE.status"
data-get="UPDATE.FHEM"
data-warn="UPDATE:FHEM"
data-fhem-cmd="setreading UPDATE.status UPDATE.FHEM run"
data-states='["idle","update","run","done"]'
data-icons='["fa-refresh","fa-refresh fa-blink","fa-refresh fa-spin","fa-refresh"]'
data-on-colors='["darkgrey","red","white","green"]'
data-background-icon="fa-circle-thin"
data-off-background-color="#DC143C"
data-off-color="#DC143C"
data-on-background-color="#E6FF57"
data-on-color="#A6BF17"
data-icon="fa-refresh warn">
</div>
<div data-type="label"><small>FHEM</small></div>
</div>
<div class="inline">
<div class="warn"
data-type="button"
data-device="UPDATE.status"
data-get="UPDATE.FTUI"
data-warn="UPDATE:FTUI"
data-fhem-cmd="setreading UPDATE.status UPDATE.FTUI run"
data-states='["idle","update","run","done"]'
data-icons='["fa-refresh","fa-refresh fa-blink","fa-refresh fa-spin","fa-refresh"]'
data-on-colors='["darkgrey","red","white","green"]'
data-background-icon="fa-circle"
data-on-background-color="orange"
data-off-background-color="orange"
data-icon="fa-refresh warn">
</div>
<div data-type="label"><small>FTUI</small></div>
</div>
<div class="inline">
<div class="warn"
data-type="button"
data-device="UPDATE.status"
data-get="UPDATE.ALL"
data-warn="UPDATE:ALL"
data-fhem-cmd="setreading UPDATE.status UPDATE.ALL run"
data-states='["idle","update","run","done"]'
data-icons='["fa-refresh","fa-refresh fa-blink","fa-refresh fa-spin","fa-refresh"]'
data-on-colors='["darkgrey","red","white","green"]'
data-background-icon="fa-circle"
data-on-background-color="orange"
data-off-background-color="orange"
data-icon="fa-refresh warn">
</div>
<div data-type="label"><small>All</small></div>
</div>
</div>
</div>
</td>
</tr>
</table>
Stelle hier auch mal meine noch etwas unfertige Konfiguration vor.
Ich hab in letzter Zeit versucht mich aus dem typischen TabletUI-Beispiel-Korsett zu lösen und mir erst ein Layout auszudenken das mir gefallen würde,
danach dann zu schauen wie ich es mit den bestehenden Widgets umsetzen kann und was man dazu alles per User CSS File verbiegen muss. :P
Grund für die Geschichte war, dass ich eine typisch (völlig) überladene Seite mit unendlich vielen Infos hatte.
Besucher denen man das zeigte, waren von der Informationsflut total erschlagen anstatt das Ding intuitiv bedienen zu können. ;)
Also fliegt jetzt alles raus was ich eh nie verwendet habe:
- Kalender + Müllkalender hab ich in iCal mit Erinnerungen auf dem Handy und sehe das somit Morgens schon beim Aufstehen lang bevor ich FTUI verwende
Fantastical an iPhone/iPad/Mac schlägt ein Webwidget in Sachen Übersichtlichkeit / Bedienung sowieso um Längen.
- TV Programm lässt sich über eine native App oder dem Plugin auf meiner VU Box viel angenehmer lesen / bedienen
- Viele Infos müssen nicht dauerhaft angezeigt werden. Fensteranzeige interessiert nur wenn wirklich was offen ist.
Ob (und wie lang) Waschmaschine oder Trockner laufen muss auch nicht angezeigt werden wenn sie aus sind.
Das wird jetzt alles über data-hide geregelt
- usw usf...
Dafür mehr Einstellmöglichkeiten für die Familie wie z.B. Lichtautomatiken (Bewegungsmelder) ein-/ausschalten zu können,
oder die Dauer bis zum automatischen Abschalten zu konfigurieren.
Außerdem wird das "Mehr" an Platz auf größeren Geräten nicht mehr verwendet um mehr Infos darzustellen nur weil mans kann / der Platz da ist.
Stattdessen eben ein Responsive Design, dass auf allen Geräten läuft und sich an die Bildschirmgröße anpasst.
Look and Feel kommen dadurch einer nativen App IMO sehr nahe.
Beim Aufbau des Codes versuch ich möglichst viel wiederverwendbar zu machen.
Vieles ist in parametrierbaren Templates ausgelagert, Besutzerdefinierte Farben sind als CSS Variablen festgelegt usw.
Ein wenig mehr als bisher drin ist, ist aber schon noch geplant. ;)
Buttons für die Lichtszenen fehlen noch, Rolladensteuerug, etc...
Icons welche das Aussehen der jeweiligen Lampen wiederspiegeln will ich auch noch zeichnen.
Sensoren mit niedrigem Batteriestand sollen ähnlich den offenen Fenstern nur dargestellt werden wenn es welche gibt.
Charts (per Default ausgeblendet aber in den Raumanzeigen dann ausklappbar) will ich auch wieder integrieren.
Aber das Chart Widget in den Stil der restlichen Elemente zu bringen dürfte noch einige CSS-Hacks benötigen. :P
Das gefällt mir mal richtig gut.
Da hast Du aber viel verbiegen müssen. Gut gemacht :)
Ich werde mein altbackenes Design sowieso verwerfen.
Aber Frau hats gefallen und ich habe viel gelernt.
Zitat von: Thyraz am 10 Februar 2017, 08:53:16
Stelle hier auch mal meine noch etwas unfertige Konfiguration vor.
Ich hab in letzter Zeit versucht mich aus dem typischen TabletUI-Beispiel-Korsett zu lösen und mir erst ein Layout auszudenken das mir gefallen würde,
danach dann zu schauen wie ich es mit den bestehenden Widgets umsetzen kann und was man dazu alles per User CSS File verbiegen muss. :P
Grund für die Geschichte war, dass ich eine typisch (völlig) überladene Seite mit unendlich vielen Infos hatte.
Besucher denen man das zeigte, waren von der Informationsflut total erschlagen anstatt das Ding intuitiv bedienen zu können. ;)
Also fliegt jetzt alles raus was ich eh nie verwendet habe:
- Kalender + Müllkalender hab ich in iCal mit Erinnerungen auf dem Handy und sehe das somit Morgens schon beim Aufstehen lang bevor ich FTUI verwende
Fantastical an iPhone/iPad/Mac schlägt ein Webwidget in Sachen Übersichtlichkeit / Bedienung sowieso um Längen.
- TV Programm lässt sich über eine native App oder dem Plugin auf meiner VU Box viel angenehmer lesen / bedienen
- Viele Infos müssen nicht dauerhaft angezeigt werden. Fensteranzeige interessiert nur wenn wirklich was offen ist.
Ob (und wie lang) Waschmaschine oder Trockner laufen muss auch nicht angezeigt werden wenn sie aus sind.
Das wird jetzt alles über data-hide geregelt
- usw usf...
Dafür mehr Einstellmöglichkeiten für die Familie wie z.B. Lichtautomatiken (Bewegungsmelder) ein-/ausschalten zu können,
oder die Dauer bis zum automatischen Abschalten zu konfigurieren.
Außerdem wird das "Mehr" an Platz auf größeren Geräten nicht mehr verwendet um mehr Infos darzustellen nur weil mans kann / der Platz da ist.
Stattdessen eben ein Responsive Design, dass auf allen Geräten läuft und sich an die Bildschirmgröße anpasst.
Look and Feel kommen dadurch einer nativen App IMO sehr nahe.
Beim Aufbau des Codes versuch ich möglichst viel wiederverwendbar zu machen.
Vieles ist in parametrierbaren Templates ausgelagert, Besutzerdefinierte Farben sind als CSS Variablen festgelegt usw.
Ein wenig mehr als bisher drin ist, ist aber schon noch geplant. ;)
Buttons für die Lichtszenen fehlen noch, Rolladensteuerug, etc...
Icons welche das Aussehen der jeweiligen Lampen wiederspiegeln will ich auch noch zeichnen.
Sensoren mit niedrigem Batteriestand sollen ähnlich den offenen Fenstern nur dargestellt werden wenn es welche gibt.
Charts (per Default ausgeblendet aber in den Raumanzeigen dann ausklappbar) will ich auch wieder integrieren.
Aber das Chart Widget in den Stil der restlichen Elemente zu bringen dürfte noch einige CSS-Hacks benötigen. :P
Gefällt mir sehr gut. Wie hast du die Schriftart geändert?
Langt das so?
index.html
<!--FONTS-->
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500" rel="stylesheet">
und in der fhem-tablet-ui-user.css
body {
background-color: white;
font-family: Roboto, Arial;
font-weight: 500;
font-size: 16px;
}
Ich denke das sollte reichen.
Zumindest für normalen Text.
Einzelne Widgets könnten natürlich immer noch intern andere Fonts wählen,
da müsste man sich in Chrome mit Entwicklertools dann mal durchklicken.
@Thyraz
das was du uns hier zeigst ist absolut Top, du sprichst mir aus der Seele. 3 Daumen hoch dafür... :D ;) :D
Ich habe ja parallel in einem anderen Thread gefragt wie ich Readings/Geräte verstecken kann weil mir das immer mehr immer voller System absolut gegen Strich geht, ich wußte es bisher nicht das man das verstecken kann...
...und genau was du sagst kommt jemand und guckt auf mein Tablet schlägt er die Hände über den Kopf zusammen und sagt das ist mir zuviel. Das braucht kein Mensch :-\ ;)
Also nochmals das "einfache" hast du richtig gut hinbekommen, sicher ist das alles Geschmackssache und das Design kann sich ja jeder selber anpassen... :D
Ich habe noch nicht in dein zip geschaut aber hast du extrem an den css class geschraubt oder hält sich das in Grenzen, ich würde die css gerne mal sehen, denn ein wenig kenne ich mich vom Homepage basteln aus, aber ich bin kein Freak... deshlab ist es gut mal zu schauen. Hast du mit bootstrap gearbeitet, dieses ermöglicht ja ein genaues positionieren..?
Zitat von: SirMarco am 10 Februar 2017, 12:51:13
Gefällt mir sehr gut. Wie hast du die Schriftart geändert?
schreib das doch in eine user-ui.css dann brauchst du die Angabe nur einmal in der index.html machen, indem du die dort rein schreibst
Ja, als Responsive-Grid hab ich Bootstrap verwendet.
Nach der neusten Version von setstate wäre es evtl. auch eine Idee gewesen mit Flexbox zu arbeiten.
Hatte aber schon mit dem Design begonnen und hab mir Flexbox auch noch nicht angeschaut.
Die CSS Datei hält sich ehrlich gesagt in Grenzen.
Minimale Verschiebungen (hier mal ein margin-top, da mal ein padding-right) von Elementen hab ich teilweise in den Template Files auch direkt als Inline-Style gesetzt, wodurch das CSS File etwas sauberer ist.
Ist zwar nicht ganz korrekt vom Gedanken der Trennung UI/Content, aber dafür beinhalten die Templates eben alles was dazugehört.
Das ist das User CSS File:
/* Custom Colors */
:root {
--lighter-gray: #f5f5f5;
--light-gray: #c2c2c2;
--mid-gray: #92969b;
--darker-gray: #494e54;
--subtle-blue: #5486e5;
--subtle-yellow: #ffc807;
--subtle-green: #42be62;
--subtle-red: #db4444;
--subtle-petrol: #09be91;
--subtle-purple: #aa49dd;
--slider-fill: #dbdbdb;
--slider-bg: #f3f3f3;
--navbar-bg:#181b24;
--switch-green: #3acd67;
--navbar-inactive:#dbdbdb;
--navbar-active:#419aff;
}
body {
background-color: white;
font-family: Roboto, Arial;
font-weight: 500;
font-size: 16px;
color: var(--light-gray);
}
.dark-font {
color: var(--darker-gray);
}
.mid-font {
color: var(--mid-gray);
}
.white-font {
color: white;
}
/* Icons */
.big-icon #fg.fa {
font-size: 1.25em !important;
}
.small-icon {
margin: -14px !important;
}
.small-icon #fg.fa {
font-size: 0.75em !important;
}
/* Room Header */
.room-temp {
font-family: roboto, sans-serif;
font-size: 300%;
font-weight: 300;
}
.room-humidity {
font-family: roboto, sans-serif;
font-size: 200%;
font-weight: 300;
padding-left: 40px;
}
.room-header {
margin-bottom: -5px;
}
/* Slider Widget */
.range-handle {
background-color: var(--light-gray) !important;
-webkit-box-shadow: 0px 0px 0px 2px rgba(255,255,255,1) !important;
box-shadow: 0px 0px 0px 2px rgba(255,255,255,1) !important;
}
.range-bar {
background-color: var(--slider-bg) !important;
}
.range-quantity {
background-color: var(--slider-fill) !important;
}
/* Level Widget */
[data-type="level"] {
width: inherit !important;
}
/* Select Widget */
select, input.textinput {
border-radius: 3px !important;
border: 0px solid var(--lighter-gray) !important;
background: var(--lighter-gray) !important;
padding: 2px 10px 2px 10px !important;
font-size: 15px !important;
color: var(--mid-gray) !important;
}
.select_wrapper:after {
bottom: -9px !important;
top: inherit !important;
padding: 5px !important;
color: var(--mid-gray) !important;
}
[class*='col-'] > .select {
margin-top: -3px;
width: 85px !important;
float: right !important;
}
/* Collapse Button */
.collapse-button {
font-size: 14px;
margin-top: -13px !important;
padding: 0px 4px !important;
outline: none !important;
background: var(--light-gray);
}
/* Jumbotron */
.jumbotron {
padding-top: 10px !important;
padding-bottom: 10px !important;
margin-bottom: 0px !important;
color: inherit;
background-color: #f8f8f8;
}
/* Footer: Sticky footer, psuhing up content, scrollbar positioning and iOS scroll fix */
html {
height: 100%;
}
html body {
height: 100%;
overflow: hidden !important;
}
.container-wrapper {
position: absolute;
top: 0px;
bottom: 60px;
right: 0;
left: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
padding-top: 20px;
background-color: var(--navbar-bg);
text-align: left;
}
/* Tables */
th, td {
text-align: center !important;
font-weight: 500 !important;
border-color: var(--lighter-gray) !important;
}
.left-align {
text-align: left !important;
}
OK, ich habe sie jetzt schon gefunden, da ich mal rein geschaut habe.
Gut das sieht ehrlich sehr übersichtlich aus, aber doch verstehe ich nicht alle zusammenhänge, da fehlen mir doch spezielle css Kenntnisse.
Ich habe das ganze Teil unverändert mal eingebaut (abgesehen von den Icons, die ich ja nicht habe) aber ich bekomme noch nicht einmal den footer zusehen, nur den Hintergrund dort aber kein einzig positioniertes Icon, die du ja mit deinem Namen versehen hast.
Jetzt dachte ich tausche ich die mal aus gegen vorhandene, aber auch die sehe ich nicht :-\ ;)
Habe ich einen Denkfehler..?
Hallo moonsorroox,
hast nur die zugehörigen Dateien vom Tablet mit dazu genommen? Habe ich gemacht und damit sieht man auch die Icons mit footer.
Durch mein testen habe ich es gefunden, vielleicht hilft es. Da ich nicht zu den wissenden gehöre, aber ein lernender bin, probiere ich
um so zu lernen.
Gruß Dieter 8)
ich habe zwar ein paar Beiträge mehr ;), aber was FTUI betrifft bin ich genauso am Anfang wie du und lernender :D
JA ich habe nur die Dateien von Thyraz dazu gepackt, alles andere war vorher schon drin...! Das meintest du wohl..?
Ich habe das ganze Tablet FTUI nochmals installiert und jetzt kommt auch die Ansicht.
Da werde ich mich jetzt mal ran machen und es für mich anpassen... ;)
Genau das habe ich gemeint. Bei mir klappt es. Habe auch versucht es an meine Konfiguration an zu passen, da entstehen aber gleich wieder größere Baustellen.
Da muss ich noch vie.....l lernen. Aber meistens kommt mit der Zeit auch der Erfolg, außerdem habe ich noch nie so kompetente Lehrer wie in diesem Forum erlebt.
An erster Stelle der unermüdliche und fast immer wissende Setstate und die nun vorbildlich schreibenden Lehrbuch Autoren (WIKI TabletUI), allen voran Standarduser und drhirn nur mal kurz zu erwähnen.
Ich bin einer der eifrigsten Leser und Tester, nur leider ab einem gewissen Alterslevel (58) kann man es nicht mehr so leicht implementieren. Aber lernen hält jung.
In diesem Sinne Danke und weiter so Jung`s.
der lernende
Gruß Dieter ;)
Zitat von: Shadow3561 am 04 Februar 2017, 11:49:30
Hier mal mein UI.
Bin noch nicht ganz fertig, aber für den einen oder anderen ist sicher etwas dabei.
Die Größe ist optimiert fürs Samsung Galaxy Tablet 9.7
mfg
Magst Du noch die css-Dateien hier posten. Würde mich gerne an Deiner Struktur orientieren.
Zitat von: Hanneck am 11 Februar 2017, 00:37:19
Genau das habe ich gemeint. Bei mir klappt es. Habe auch versucht es an meine Konfiguration an zu passen, da entstehen aber
selbst... wenn du dich ein wenig mit css auskennst wird dieses Art von Thyraz dich vor Probleme stellen..! Ich arbeite schon den ganzen Abend daran und muss feststellen das dies alles sehr speziell gemacht ist, besonders wenn du die einzelnen Geräte positionieren willst.
Was ich damit meine, wenn du mit dem Layout klar kommst und nur ähnliche Geräte hinzufügen möchtest kannst du das ganz easy machen.
Wenn du aber etwas anderes einbauen möchtest (ich sage mal ein Label/Icon mit einer Combobox wird das schon schwieriger, dann ist diese Art der css Gestaltung nichts für ungeübte)
Das ansprechen der data-device und data-get ist hier nicht selbsterklärend...! :-\
Deshalb wird es grad richtig schwierig, weil die ganzen css class muss man sich erst einmal anschauen was die machen.
Ist nur meine Meinung, dass dieses Layout super aussieht ist gar keine Frage....
also ich kämpfe mich da mal durch mal schauen ob das was wird :D
Deshalb wird es grad richtig schwierig, weil die ganzen css class muss man sich erst einmal anschauen was die machen.
Ist nur meine Meinung, dass dieses Layout super aussieht ist gar keine Frage....
also ich kämpfe mich da mal durch mal schauen ob das was wird
Deswegen warte ich ein wenig und widme mich meinen anderen Baustellen. Ich lass mich dann von deiner Arbeit inspirieren, wenn du fertig bist.
Ich mach lieber erst mal Sachen die ich auch ein wenig verstehen und nach stellen kann.
Gruß Dieter ;)
Zitat von: bjoernbo am 01 Februar 2017, 06:23:12
@Eisix: Nein!
Im Video von Detlef ist zu sehe, dass innerhalb des PopUps die Module angezeigt werden, welche für ein update bereist sind. quasi das Ergebnis von "update check"
Bin noch bei den Anpassungen wegen der Umstellung auf 2.5
Genau an der Stelle habe ich aktuell Probleme, da die data-substitution nicht mehr geht.
Sobald ich alles wieder richtig am laufen habe, werde ich noch mal alle Dateien zur Verfügung stellen.
Gruß Detlef
Hi
ich habe ein Problem mit meinem Tabletten ui. Und zwar ist es nicht mittig der hintergrund passt nicht zur Steuer Seite. Kann mir einer sagen wo mein Fehler ist? Habe mal ein Screenshots von meiner Seite gemacht(https://uploads.tapatalk-cdn.com/20170213/38352d308a025da84a2875f4479d9306.jpg)
Gesendet von meinem ALE-L21 mit Tapatalk
hast du dies in der index.html stehen
<meta name="widget_margin" content="4">
Hi
ne hatte es nicht drin. Habe es nachgepflegt, nun ist es aber noch schlimmer geworden. :(
Hallo zusammen, könnte mir jemand sagen an welcher Stelle ich die Schriftfarbe und die Farbe der Icons ändern kann.
Im bereich class="large red"
Das. class bezieht sich aber immer auf einen speziellen Bereich.
Zitat von: Wasserwerk33 am 13 Februar 2017, 17:41:36
Hi
ne hatte es nicht drin. Habe es nachgepflegt, nun ist es aber noch schlimmer geworden. :(
Schau dir mal background-position (https://developer.mozilla.org/de/docs/Web/CSS/background-position) und background-size (https://developer.mozilla.org/de/docs/Web/CSS/background-size) an.
@all
Wäre es nicht sinnvoller für Probleme einen neuen Threat zu eröffnen?
Dieser verschwindet dann relativ schnell im Forum, wenn das Problem gelöst wurde ...
In diesem Threat sollten doch nur Vorstellungen der eigenen Oberfläche sowie die Informationen / Lösungen dazu verteilt werden?
Zitat von: Shadow3561 am 04 Februar 2017, 11:49:30
Hier mal mein UI.
Bin noch nicht ganz fertig, aber für den einen oder anderen ist sicher etwas dabei.
Die Größe ist optimiert fürs Samsung Galaxy Tablet 9.7
mfg
Mich interessiert die Umsetzung Deiner Rolladen. Magst Du das HTML mal anhängen und etwas zu Deiner "Beschattung" und der Umsetzung in FHEM sagen?
ZitatZitat von: Shadow3561 am 04 Februar 2017, 11:49:30
Hier mal mein UI.
Bin noch nicht ganz fertig, aber für den einen oder anderen ist sicher etwas dabei.
Die Größe ist optimiert fürs Samsung Galaxy Tablet 9.7
mfg
Mich interessiert die Umsetzung Deiner Rolladen. Magst Du das HTML mal anhängen und etwas zu Deiner "Beschattung" und der Umsetzung in FHEM sagen?
Hallo,
Hier der HTML Code von meiner Rollo Seite
<li data-row="1" data-col="1" data-sizex="6" data-sizey="4">
<header><div data-type="label" class="medium orange">Wohnzimmer</div></header>
<div class="inline">
<div data-type="slider" data-device='EIB_Rolladen_Garten' data-get="STATE" data-set="value" data-min="0" data-max="100" data-on='100' data-off='0' data-value=true class="mini negated" > </div>
<div class="top-space"></div>
<div data-type="label" >Garten</div>
<div class="top-space"></div>
<div data-type="select" data-device="EIB_Rolladen_Garten" data-items='["0","5","10","15","20","25","30","35","40","45","50","55","60","65","70","75","80","85","90","95","100"]' data-alias='["Auf","5","10","15","20","25","30","35","40","45","50","55","60","65","70","75","80","85","90","95","Zu"]' data-get="STATE" data-set="value" class="cell w2x" ></div>
<div class="top-space-2x"></div>
<div data-type="label"> Beschattung</div>
<div data-type="select" data-device="Beschattung_Sonne_Rollo_Garten" data-cmd="set" data-set="" data-get="STATE" data-items='["aktiv","passiv"]' class="small wider"></div>
</div>
<div class="inline">
<div data-type="slider" data-device='EIB_Rolladen_Terrasse' data-get="STATE" data-set="value" data-min="0" data-max="100" data-on='100' data-off='0' data-value=true class="mini negated" > </div>
<div class="top-space"></div>
<div data-type="label">Terrasentür</div>
<div class="top-space"></div>
<div data-type="select" data-device="EIB_Rolladen_Terrasse" data-items='["0","25","50","75","100"]' data-alias='["Auf","25","50","75","Zu"]' data-get="STATE" data-set="value" class="cell w2x" ></div>
<div class="top-space-2x"></div>
<div data-type="label"> Beschattung</div>
<div data-type="select" data-device="Beschattung_Sonne_Rollo_Terrasse" data-on-background-color="#aa6900" data-off-background-color="#555" data-set="" data-cmd="set" data-items='["aktiv","passiv"]' class="small wider"></div>
</div>
<div class="inline">
<div data-type="slider" data-device='EIB_Rolladen_Sofa' data-get="STATE" data-set="value" data-min="0" data-max="100" data-on='100' data-off='0' data-value="true" class="mini negated" > </div>
<div class="top-space"></div>
<div data-type="label" >Sofa</div>
<div class="top-space"></div>
<div data-type="select" data-device="EIB_Rolladen_Sofa" data-items='["0","5","10","15","20","25","30","35","40","45","50","55","60","65","70","75","80","85","90","95","100"]' data-alias='["Auf","5","10","15","20","25","30","35","40","45","50","55","60","65","70","75","80","85","90","95","Zu"]' data-get="STATE" data-set="value" class="cell w2x" ></div>
<div class="top-space-2x"></div>
<div data-type="label">Beschattung</div>
<div data-type="select" data-device="Beschattung_Sonne_Rollo_Sofa" data-on-background-color="#aa6900" data-off-background-color="#555" data-set="" data-cmd="set" data-items='["aktiv","passiv"]' class="small wider"></div>
</div>
</li>
<li data-row="1" data-col="2" data-sizex="6" data-sizey="4">
<header><div data-type="label" class="medium orange">Küche</div></header>
<div class="inline">
<div data-type="slider" data-device='EIB_Rolladen_Kueche' data-get="STATE" data-set="value" data-min="0" data-max="100" data-on='100' data-off='0' data-value=true class="mini negated" > </div>
<div class="top-space"></div>
<div data-type="label" >Küche</div>
<div class="top-space"></div>
<div data-type="select" data-device="EIB_Rolladen_Kueche" data-items='["0","5","10","15","20","25","30","35","40","45","50","55","60","65","70","75","80","85","90","95","100"]' data-alias='["Auf","5","10","15","20","25","30","35","40","45","50","55","60","65","70","75","80","85","90","95","Zu"]' data-get="STATE" data-set="value" class="cell w2x" ></div>
<div class="top-space-2x"></div>
<div data-type="label">Beschattung</div>
<div data-type="select" data-device="Beschattung_Sonne_Rollo_Kueche" data-on-background-color="#aa6900" data-off-background-color="#555" data-set="" data-cmd="set" data-items='["aktiv","passiv"]' class="small wider"></div>
</div >
<div class="inline">
<div data-type="slider" data-device='EIB_Rolladen_Esstisch' data-get="STATE" data-set="value" data-min="0" data-max="100" data-on='100' data-off='0' data-value=true class="mini negated" > </div>
<div class="top-space></div>
<div data-type="label" >Esszimmer</div>
<div class="top-space"></div>
<div data-type="select" data-device="EIB_Rolladen_Esstisch" data-items='["0","5","10","15","20","25","30","35","40","45","50","55","60","65","70","75","80","85","90","95","100"]' data-alias='["Auf","5","10","15","20","25","30","35","40","45","50","55","60","65","70","75","80","85","90","95","Zu"]' data-get="STATE" data-set="value" class="cell w2x" ></div>
<div class="top-space-2x"></div>
<div data-type="label">Beschattung</div>
<div data-type="select" data-device="Beschattung_Sonne_Rollo_Sofa" data-on-background-color="#aa6900" data-off-background-color="#555" data-set="" data-cmd="set" data-items='["aktiv","passiv"]' class="small wider"></div>
</div>
Habe meine zu meinen Rolläden(KNX) noch eine Beschattungsautomatik gebastelt und in die myUtils ausgelagert.
Hier ein Beispiel
sub
Wetterregelung_Sonne_Terrasse($){
if (Value("Beschattung_Sonne_Rollo_Terrasse") eq "aktiv"){
my $Temp= ReadingsVal("Weather_Underground","fc0_high_c","999");
my $Sonne= ReadingsVal("Weather_Underground","fc0_condition","kein Wert");
my $RolladenTerrasse= ReadingsNum("EIB_Rolladen_Terrasse","state","99");
my $now = time();
my ($sec,$min,$hour,$mday,$mon,$year,$wday,$yday,$isdst)=localtime($now);
if (($Temp >= 20) && (($Sonne eq "sonnig") || ($Sonne eq "teilweise wolkig") || ($Sonne eq "leicht bewölkt") || ($Sonne eq "klar") || ($Sonne eq "heiter") || ($Sonne eq "überwiegend wolkig")) && ($RolladenTerrasse <= "35") && ($RolladenTerrasse >= "0") && ($hour >= 13) && ($hour < 20)){
fhem("set EIB_Rolladen_Terrasse value 40");
Log 1, "Beschattungsposition Rolladen Terrassentür wird angefahren.";
} elsif (($RolladenTerrasse == "40") && ($hour >=20) && ($hour <21)){
fhem ("set EIB_Rolladen_Terrasse value 1");
Log 1,"Rolladen Terrassentür wird geöffnet Beschattung nicht mehr nötig.";
} elsif (($Temp==999) || ($Sonne eq "kein Wert")) {
Log 1, "Wetter nicht erreichbar oder kein Wert geliefert, Rolladen Terrasse $Temp, $Sonne,";
}
}
}Für die Beschattungssteuerung gibt es genug Beispiele hier im Forum.
zB.
https://forum.fhem.de/index.php/topic,26216.msg192231.html#msg192231
Einfach mal ein wenig suchen, lese ich hier des Öfteren mal.
MfG
Hallo,
ich habe meine Tablet UI Seite mit Pagebutton und einem gewissen 3D Effekt auf die FTUI 2.6 angepasst.
Der alte Beitrag war hier https://forum.fhem.de/index.php/topic,37378.msg549640.html#msg549640
Dieser Version ist für 8 Zoll und 10,5 Zoll erstellt, beim Start der Webseite ist ein Script in der index.html was die Breite des Tabletts ausliest und wenn diese 1280px beträgt wird zusätzlich die css Datei fhem-tablet-ui-user-1280.css geladen, damit werden die richtigen Größen für 10.5 Zoll geladen. Wozu das Ganze, damit man beide Tabletts im native Modus laufen und nicht gezoomt werden.
Die css Datein für die Einstellungen:
fhem-grayblue-user-ui.css -> hauptsächlich für Farben
fhem-tablet-ui-user.css -> Schatteneffekte und Größen
fhem-tablet-ui-user-1280.css -> spezielle Größen für Auflösung 1280x800px
4 Widgets habe ich anpassen müssen um den gewünschten Effekt zu erhalten.
widget_calview -> Jahreszahl entfernt
widget_homestatust -> ist die Größen angepasst für Auflösung 1280x800px
widget_pagebutton -> roten Schatten eingefügt
widget_weather.js -> angepasst damit für PROPLANTA auch das heute Icon im kleinklima iconset angezeigt wird
2 Widgets sind von mir widget_uwz_paul79.js und widget_verkehrsinfo.js.
Alles auf eigene Gefahr!
Gruß Paul
Paul ,
Wie immer sehr schöne Arbeit
hier sind noch die restlichen Screenshots.
Gruß Paul
PS: Die Senderlogos sind von https://www.vuplus-support.org/wbb4/index.php?thread/64098-mirror-glass-3d-huminator-design-by-stefanbenno6/
Hallo,
ich habe noch eine Seite gebaut wo fast alles von Proplanta drin ist, der Mittelteil rotiert mit dem widget_rotor.js
Gruß Paul
Hallo paul79
gefällt mir sehr, sehr gut - würdest du mir(uns) deine config für server und system zeigen
Danke
Gruß
Helmut
Zitat von: Helmi55 am 26 Februar 2017, 11:51:54
Hallo paul79
gefällt mir sehr, sehr gut - würdest du mir(uns) deine config für server und system zeigen
Danke
Gruß
Helmut
Hallo, hier bitteschön, es ist aber einiges mit ?????? versehen da müsst ihr eure Daten nehmen.
Gruß Paul
Merci vielmals - herzlichen Dank
Da gibts einiges zu tun in nächster Zeit (kann wieder viel dazu lernen - hoffentlich!)
Schönen Sonntag
Helmut
Hallo ...
... ich wollte meine table ui Oberfläche auf-hübschen ...
In der Antwort 307 und 684 habe ich auch schon Ansätze gelesen , komme aber damit nicht klar ...
ich habe schon gelesen das man diese Änderungen in der fhem-table-ui.css Datei machen muss , da sie in meiner table ui eingetragen ist.
es geht um Runde Ecken ( border-radius 7px ) und um Hintergrundfarben , Widges-Farben und Titel-Farben ... an welcher Stelle muss ich was ändern oder einfügen ...
die Farbe einzelner Widges in der table ui ist ja nicht möglich ? Das muss alles über die .css geändert werden ?
Würde mich über Antwort freuen ...
pierre
... ich habe auch schon versucht ein Bild als Hintergrund einzufügen und es hat nicht funktioniert .
deshalb wäre ich erstmal mit der Farbgestaltung zufrieden ...
Zitat von: paul79 am 26 Februar 2017, 12:00:42
Hallo, hier bitteschön, es ist aber einiges mit ?????? versehen da müsst ihr eure Daten nehmen.
Gruß Paul
Hallo Paul,
ich suche mir seit gestern ´nen Wolf einen funktionierende /opt/fhem/FHEM/backup.sh zu finden bzw. zu bauen.
Irgendwie laufe ich da immer auf Fehler im coding.
Kannst du die bitte posten bzw. pm.
Danke
Jörg
Zitat von: jnewton957 am 26 Februar 2017, 19:23:29
Hallo Paul,
ich suche mir seit gestern ´nen Wolf einen funktionierende /opt/fhem/FHEM/backup.sh zu finden bzw. zu bauen.
Irgendwie laufe ich da immer auf Fehler im coding.
Kannst du die bitte posten bzw. pm.
Danke
Jörg
Hallo Jörg,
die backup.sh ist hier aus dem Forum aber ich hänge sie mit dran und die 99_myUtils.pm auch noch.
Alles mit ????????? müsst ihr ersetzten.
Gruß Paul
Zitat von: spider am 26 Februar 2017, 16:43:00
Hallo ...
... ich wollte meine table ui Oberfläche auf-hübschen ...
In der Antwort 307 und 684 habe ich auch schon Ansätze gelesen , komme aber damit nicht klar ...
ich habe schon gelesen das man diese Änderungen in der fhem-table-ui.css Datei machen muss , da sie in meiner table ui eingetragen ist.
es geht um Runde Ecken ( border-radius 7px ) und um Hintergrundfarben , Widges-Farben und Titel-Farben ... an welcher Stelle muss ich was ändern oder einfügen ...
die Farbe einzelner Widges in der table ui ist ja nicht möglich ? Das muss alles über die .css geändert werden ?
Würde mich über Antwort freuen ...
pierre
... ich habe auch schon versucht ein Bild als Hintergrund einzufügen und es hat nicht funktioniert .
deshalb wäre ich erstmal mit der Farbgestaltung zufrieden ...
Hallo Pierre,
die fhem-table-ui.css solltest du nicht ändern, diese wir meist beim Update wieder überschrieben, lese dir mal den Abschnitt CSS-Styles im Wiki durch
https://wiki.fhem.de/wiki/FHEM_Tablet_UI
Für den Hintergrund z.B. das hier in deine neue fhem-tablet-ui-user.css eintragen.
.gridster > ul > li, .card, section {
background-color:#223343;
}Gruß Paul
moin ...
Danke für die schnelle Antwort und für den Tip ...
ich hab eine fhem-tablet-ui-user.css erstellt ... den Inhalt der fhem-tablet-ui.css mit "alles markieren""einfügen" übertragen ... in der table ui den Eintrag <link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui.css" /> in <link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui-user.css" /> abgeändert ... jetzt habe ich beim Aufruf meiner Oberfläche nur einen unformatierten Buchstaben und icon-Salat ...
ich hab alles kopiert aber die neue Datei ist 1500 Bit größer - wo kommen die her ?
gruß pierre
Zitat von: spider am 26 Februar 2017, 21:29:29
moin ...
Danke für die schnelle Antwort und für den Tip ...
ich hab eine fhem-tablet-ui-user.css erstellt ... den Inhalt der fhem-tablet-ui.css mit "alles markieren""einfügen" übertragen ... in der table ui den Eintrag <link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui.css" /> in <link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui-user.css" /> abgeändert ... jetzt habe ich beim Aufruf meiner Oberfläche nur einen unformatierten Buchstaben und icon-Salat ...
ich hab alles kopiert aber die neue Datei ist 1500 Bit größer - wo kommen die her ?
gruß pierre
Hallo, nein so nicht, du musst die fhem-tablet-ui.css so lassen wie sie ist und den Eintrag auch <link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui.css" />
In die fhem-tablet-ui-user.css kommen nur die Änderungen rein und die wird nach er fhem-tablet-ui.css geladen.
Gruß Paul
PS: das ist hier auch der falsche Platz denke ich, da es hier nur um User-Demos geht.
Hallo Paul79
habe versucht deine Vorlage an meine Geräte anzupassen, habe aber das Problem das die Dinge nicht angezeigt werden bzw. nicht aktualisiert werden.
In einer "Demo" Vorlage von Tabelt-UI funktioniert es.
Auch finde ich es seltsam das die angepasste Seite auf dem PC nach dem gefühlten 100.mal Aktualisieren manchmal was angezeigt wird, auf dem Tablet aber nicht.
Hier der Code aus der Demo-Vorlage wo alles funktioniert (PC und Tablet Port 8083 bzw 8085)
<li data-row="2" data-col="4" data-sizey="2" data-sizex="4">
<header>WOHNZIMMER</header>
<div class="sheet">
<div class="row">
<div class="cell"
data-type="thermostat"
data-device="Wohn_Wandthermostat"
data-valve="valveposition"
data-get="desiredTemperature">
</div>
<div class="cell">
<div
data-type="label"
data-device="Wohn_Wandthermostat"
data-get="temperature"
data-limits='[-73,19,23]'
data-colors='["#6699FF","#aa6900","#bb6242"]'
data-unit="%B0C%0A"
class="bigger thin"></div>
<div>Temperatur</div>
</div>
<div class="cell">
<div class="big"
data-type="symbol"
data-device="Wohn_Fensterkontakt"
data-states='["opened","closed"]'
data-icons='["ftui-window warn","ftui-window"]'
data-colors='["#999","#555"]'></div>
<div class="top-narrow darker small">Fenster</div>
</div>
Hier der von deiner Vorlage
<li class="" data-row="1" data-col="1" data-sizex="2" data-sizey="6">
<header class="semitransparentheaderround">
</header>
<div data-type="thermostat"
data-device="Wohn_Wandthermostat"
data-valve="valveposition"
data-get="desiredTemperature"
data-bgColor="#273D5C"
class="top-space normal"></div>
<tr>
<div class="narrow">
<div
data-type="label"
data-device="Wohn_Wandthermostat"
data-get="temperature"
data-limits='[-73,19,25]'
data-colors='["#6699FF","#1dad10","#FF0000"]'
data-unit="%B0C%0A"
class="narrow inline big"></div>
<p>
<div data-type="label" class="narrow small ">Temperatur</div>
</p>
</div>
</tr>
<tr> </tr>
<div class="narrow">
<div
data-type="symbol"
data-device="Wohn_Fensterkontakt"
data-states='["closed","opened"]'
data-on-colors='["SeaGreen","Red"]'
data-icons='["oa-fts_window_2w","oa-fts_window_2w_open_lr"]'
class="readonly normal"></div>
<div data-type="label" class="narrow small ">Wohnzimmerfenster</div>
</div>
Bild 1 am PC mit Port 8083
Bild 2 vom Tablet mit Port 8085
Bild 3 PC und Tablet gleich
Hallo Chris,
wenn es auf dem Port 8083 geht und auf 8085 nicht, stimmt bestimmt etwas nicht im
<head>
.
.
.
</head> oder HTTPSRV.
Gruß Paul
Habe mich ungenau ausgedrückt, das Problem ist ja das auch auf Port 8083 es nicht richtig funktioniert, die Werte werden nicht aktualisiert, bzw. erst wenn ich 100.mal die Seite neulade. Habe es jetzt geschafft das auf dem Tablet im Chrome Browser es richtig anzeigt wird, aber im fully Kiosk Browser nicht. Es werden die Daten die vom Fhem kommen nicht aktualisiert.
Hier noch der Head Code aus der Demo
<head>
<!--
/* FHEM tablet ui */
/*
* UI builder framework for FHEM
*
* Version: 2.5.*
* URL: https://github.com/knowthelist/fhem-tablet-ui
*
* Copyright (c) 2015-2017 Mario Stephan <mstephan@shared-files.de>
* Under MIT License (http://www.opensource.org/licenses/mit-license.php)
*
* - create a new folder named 'tablet' in /<fhem-path>/www
* - copy all files incl. sub folders into /<fhem-path>/www/tablet
* - add 'define TABLETUI HTTPSRV ftui ./www/tablet Tablet' in fhem.cfg
* - Tadaaa! A new fhem ui in http://<fhem-url>:8083/fhem/tablet/
*/
-->
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<!-- define your personal style here, it wont be overwritten -->
<!-- link rel="stylesheet" href="css/fhem-green-ui.css" / -->
<!-- link rel="stylesheet" href="css/fhem-tablet-ui-user.css" / -->
<script src="js/fhem-tablet-ui.js" defer></script>
<!-- Remove this line to enable for usage with WebViewControl
<script defer>var wvcDevices = {'12345': 'Tablet'}; var wvcUserCssFile="webviewcontrol.css"</script>
<script src="../pgm2/cordova-2.3.0.js" defer></script>
<script src="../pgm2/webviewcontrol.js" defer></script>
<!-- End for WebViewControl -->
<title>FHEM-Tablet-UI</title>
</head>
Und hier der von dir
<head>
<!--
/* FHEM tablet ui */
/*
* UI builder framework for FHEM
*
* Version: 2.6.x
* URL: https://github.com/knowthelist/fhem-tablet-ui
*
* Copyright (c) 2015-2016 Mario Stephan <mstephan@shared-files.de>
* Under MIT License (http://www.opensource.org/licenses/mit-license.php)
*
* !!!! Evaluation version - run only in a staging enviroment !!!!
*
* - create a new folder named 'tablet_eval' in /<fhem-path>/www
* - copy all files incl. sub folders into /<fhem-path>/www/tablet_eval
* - add 'define TABLETUIEVAL HTTPSRV ftui_eval ./www/tablet_eval Tablet-EVAL' in fhem.cfg
* - Tadaaa! A new fhem ui in http://<fhem-url>:8083/fhem/tablet_eval/
*/
<meta name="widget_min_cols" content="13"> -->
<script type="text/javascript">
function getWidth()
{
xWidth = null;
if(window.screen != null)
xWidth = window.screen.availWidth;
if(window.innerWidth != null)
xWidth = window.innerWidth;
if(document.body != null)
xWidth = document.body.clientWidth;
return xWidth;
}
</script>
<title>FHEM-Tablet-UI</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script type="text/javascript">
if (getWidth() == "1280" ) {
document.write('<meta name="widget_base_width" content="83">');
document.write('<meta name="widget_base_height" content="72">');
}
else {
document.write('<meta name="widget_base_width" content="60">');
document.write('<meta name="widget_base_height" content="52">');
};
</script>
<!--meta name="viewport" content="maximum-scale=3.0, user-scalable=yes"-->
<!--meta name="widget_base_width" content="60"-->
<!--meta name="widget_base_height" content="52"-->
<!--meta name="gridster_cols" content="14"-->
<!--meta name="gridster_rows" content="10"-->
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="gridster_disable" content="1">
<meta name="widget_margin" content="4">
<meta name="longpoll_type" content="websocket"> <!-- 1=longpoll;0=shortpoll every 30sec; "ajax" -> HTTP AJAX; websocket-->
<meta name="debug" content="0"> <!-- 1=output to console;0=not output -->
<meta name="toast" content="0"> <!-- 1=Toast messages deaktivieren ;0=not output -->
<meta name="lang" content="de">
<link rel="stylesheet" type="text/css" href="css/fhem-tablet-ui.css" />
<link rel="stylesheet" type="text/css" href="css/fhem-grayblue-user-ui.css" />
<link rel="stylesheet" type="text/css" href="css/fhem-tablet-ui-user.css" />
<link rel="stylesheet" type="text/css" href="css/fhem-tablet-ui-weekprofile.css" />
<script type="text/javascript">
if (getWidth() == "1280" ) {
document.write('<link rel="stylesheet" type="text/css" href="css/fhem-tablet-ui-user-1280.css" />');
};
</script>
<script type="text/javascript" src="../pgm2/jquery.min.js"></script>
<script src="js/fhem-tablet-ui.js" defer></script>
<!-- Remove this line to enable for usage with WebViewControl
<script defer>
var wvcDevices = {
'12345': 'Tablet'
};
var wvcUserCssFile = "webviewcontrol.css"
</script>
<script src="../pgm2/cordova-2.3.0.js" defer></script>
<script src="../pgm2/webviewcontrol.js" defer></script>-->
<!-- End for WebViewControl -->
<title>FHEM-Tablet-UI-PageUI</title>
</head>
Fhem und Tablet UI sind aktuell, heute morgen noch ein Update von beiden gemacht und mehrmals neugestartet......
Hallo Chris,
welche Version von Tablet UI hast du und die 2 Seiten sind im gleichen Ordner?
In meiner Demo ist websocket eingeschaltet.
<meta name="longpoll_type" content="websocket">
Gruß Paul
Das ist die Version von Fhem
Release : 5.7 FeatureLevel: 5.8
OS : linux
Arch : arm-linux-gnueabihf-thread-multi-64int
Perl : v5.20.2
und von Tablet UI habe ich heute auch ein Update gemacht mit
update all https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt
Die Dateien liegen im gleichen Ordner. Habe auch alle Dateien von dir (Paul79_v4.zip) im gleichen Verzeichniss kopiert bzw. die vorhanden ersetzt. Websocket ist auf beiden Ports eingeschaltet
wie rufst du die Seite auf?
hast du mal die Cache gelöscht und die tost Meldungen eingeschaltet und im debug geschaut?
<meta name="debug" content="3"> <!-- 1=output to console;0=not output -->
<meta name="toast" content="1"> <!-- 1=Toast messages deaktivieren ;0=not output -->
Zitat von: paul79 am 26 Februar 2017, 20:30:36
Hallo Jörg,
die backup.sh ist hier aus dem Forum aber ich hänge sie mit dran und die 99_myUtils.pm auch noch.
Alles mit ????????? müsst ihr ersetzten.
Gruß Paul
Hallo Paul,
ich hatte gehofft, du hast eine andere backup.sh.
Ich bekomme bei sudo bash /opt/fhem/FHEM/backup.sh
/opt/fhem/FHEM/backup99.sh: Zeile 105: Syntax Fehler: Unerwartetes Dateiende.Ich habe chmod auf 755 und chown mit fhem:root
[gelöst] notepad++ EOL Konvertierung stand auf Windows. Nach Umstellung auf Linux hat es geklappt
Grüße
Jörg
Hallo Jörg,
das ganze kommt hier aus dem Forum und ich weiß nicht ob ich alles noch weiß. aber soviel.
1. es läuft bei mir auf eine Pi3 da gibt es den admin "pi"
2. gesichert wird auf einem NAS wo ich den user "pi" mit dem selben Passwort angelegt haben und eine Freigabe FHEM wo "pi" alles kann.
3. das ganze seht in der etc/fstab
//IPnas/FHEM /Q/backup cifs username=pi,password=?????????,iocharset=utf8,sec=ntlm 0 0
4. in der backup.sh ganz oben
mountIp="IPna"
mountDir="FHEM"
mountUser="pi"
mountPass="?????????"
mountSubDir=""
localMountPoint="/Q/backup"
#optional
backupsMax="10"
localBackupDir="/mnt/backup"
5. "/mnt/backup" und "/Q/backup" erstellen und rechte vergeben.
6. backup.sh ist owner der user fhem
Gruß Paul
Zitat von: paul79 am 27 Februar 2017, 12:00:00
Hallo Jörg,
das ganze kommt hier aus dem Forum und ich weiß nicht ob ich alles noch weiß. aber soviel.
Gruß Paul
Ich komme weiter.
Zumindest läuft das backup.sh. Es erstellt das Backup und kopiert die Dateinen auch brav auf den NAS. Auch das Löschen klappt.
ABER:
Keine readings in FHEM.Backup (setreading FHEM.Backup backupMB $fileSizeMB)
Damit auch kein FHEM.Backup off (set FHEM.Backup off)
Auch wenn ich: perl /opt/fhem/fhem.pl 7072 "setreading FHEM.Backup info backup done" direkt eingebe, passiert nicht.
FHEM.Backup ist als dummy definiert. Brauche ich noch userreadings (info, backupMB, ...). ?
Aber auch perl /opt/fhem/fhem.pl 7072 "setreading FHEM.Backup state off" geht nicht.
Also nur nach weiteren x-Stunden ein Teilerfolg.
Verzweifelung !!!
Grüße
Jörg
hallo,
hast du Telnet an port 7072 und das in deine fhem.cfg
attr global backupdir /mnt/backup/FHEM
#dummy FHEM.Backup
define FHEM.Backup dummy
attr FHEM.Backup event-on-change-reading state
attr FHEM.Backup room FHEM
attr FHEM.Backup webCmd on:off
define FHEMBackupOn notify FHEM.Backup:on {system (" sudo -u root /opt/fhem/FHEM/backup.sh &")}
attr FHEMBackupOn room FHEM
#Automatisches Backup um 06:00 Uhr starten
define FHEMBackup at *06:00:00 set FHEM.Backup on
attr FHEMBackup room FHEM
Wenn ich es manuell starten will dann über den at FHEMBackup.
Gruß Paul
Hi Paul
Zitat von: paul79 am 26 Februar 2017, 23:19:40
wie rufst du die Seite auf?
hast du mal die Cache gelöscht und die tost Meldungen eingeschaltet und im debug geschaut?
<meta name="debug" content="3"> <!-- 1=output to console;0=not output -->
<meta name="toast" content="1"> <!-- 1=Toast messages deaktivieren ;0=not output -->
Rufe die Seite über den Button Tablet-UI in Fhem auf bzw. direkt die index.html.
Momentan wird nichts aktualisiert. Ein Schalter den ich eben eingebaut habe um ne Lampe ein/aus schalten funktioniert.
Bekomme folgende Meldung im Log:
2017.02.27 17:28:21 1: devspec2array WEB,Handy,Yamaha_zone2,Yamaha,Fritzboxanrufeliste,Kueche_Tuerkontakt,Kueche_Fensterkontakt1,Wohn_Fensterkontakt,Abfall_CalView,?????_CalView,Geburtstage_CalView,TrafficMaps,Pushover_an_aus,VI_Hessen,UWZ,Wetter,Sonnenauf,Sonnenunter: Sequence (???...) not recognized in regex; marked by <-- HERE in m/^(??? <-- HERE ??_CalView)$/ at fhem.pl line 1186.
2017.02.27 17:28:26 1: devspec2array WEB,Handy,Yamaha_zone2,Yamaha,Fritzboxanrufeliste,Kueche_Tuerkontakt,Kueche_Fensterkontakt1,Wohn_Fensterkontakt,Abfall_CalView,?????_CalView,Geburtstage_CalView,TrafficMaps,Pushover_an_aus,VI_Hessen,UWZ,Wetter,Sonnenauf,Sonnenunter: Sequence (???...) not recognized in regex; marked by <-- HERE in m/^(??? <-- HERE ??_CalView)$/ at fhem.pl line 1186.
2017.02.27 17:28:27 1: devspec2array WEB,HM_CC_boost,HM_CC_auto_an_aus,HM_CC_eco,Handy,Yamaha_zone2,Yamaha,Fritzboxanrufeliste,Kueche_Tuerkontakt,Kueche_Fensterkontakt1,Wohn_Fensterkontakt,Abfall_CalView,?????_CalView,Geburtstage_CalView,TrafficMaps,Pushover_an_aus,VI_Hessen,UWZ,Wetter,Sonnenauf,Sonnenunter: Sequence (???...) not recognized in regex; marked by <-- HERE in m/^(??? <-- HERE ??_CalView)$/ at fhem.pl line 1186.
2017.02.27 17:28:47 1: devspec2array WEB,Wohn_Wandthermostat,Wohn_Fensterkontakt,Kueche_Fensterkontakt1,Kueche_Tuerkontakt,Kueche_Wandthermostat,Bad_Wandthermostat,HM_CC_boost,HM_CC_auto_an_aus,HM_CC_eco,Handy,Yamaha_zone2,Yamaha,Fritzboxanrufeliste,Abfall_CalView,?????_CalView,Geburtstage_CalView,TrafficMaps,Pushover_an_aus,VI_Hessen,UWZ,Wetter,Sonnenauf,Sonnenunter: Sequence (???...) not recognized in regex; marked by <-- HERE in m/^(??? <-- HERE ??_CalView)$/ at fhem.pl line 1186.
Hallo Chris ,
ich weiß nicht was bei dir schiefläuft.
Gruß Paul
moin ...
Danke Paul ... das wird mich entscheidend weiterbringen - aber jetzt muss ich komplett umdenken ...
Gruß...
pierre
Zitat von: Zage am 08 Februar 2017, 11:23:46
Hallo zusammen,
hier ist meine Umsetzung.
Viele Grüße
Zage
Das sieht echt super aus!!
Könntest Du deine Css und die html posten?
Danke
Ok Paul,
werde jetzt erstmal eine einfache Version machen und mich dann später nochmal damit rumschlagen.
Aber Danke für die Vorlage
Christian
Zitat von: chris76e am 27 Februar 2017, 21:21:43
Ok Paul,
werde jetzt erstmal eine einfache Version machen und mich dann später nochmal damit rumschlagen.
Aber Danke für die Vorlage
Christian
du kann ja oben in der index.html Seite diese eintragen dann hast du schon mal das aussehen und dann Stück für Stück ausbauen.
<link rel="stylesheet" type="text/css" href="css/fhem-grayblue-user-ui.css" />
<link rel="stylesheet" type="text/css" href="css/fhem-tablet-ui-user.css" /> Gruß Paul
Super, so funktioniert schonmal der Anfang.
Vielen Dank
:)
Hallo,
ich habe noch ein update von meinen 2 Widgets widget_uwz_paul79.js und widget_verkehrsinfo.js.
Gruß Paul
Zitat von: jnewton957 am 27 Februar 2017, 14:46:57
Ich komme weiter.
Zumindest läuft das backup.sh. Es erstellt das Backup und kopiert die Dateinen auch brav auf den NAS. Auch das Löschen klappt.
ABER:
Keine readings in FHEM.Backup (setreading FHEM.Backup backupMB $fileSizeMB)
Damit auch kein FHEM.Backup off (set FHEM.Backup off)
Du hast bestimmt ein telnet Passwort vergeben oder?
in der backup.sh
mytelnetPW="password" definieren und dann die Befehle so aufrufen
perl /opt/fhem/fhem.pl 7072 $mytelnetPW "setreading FHEM.Backup state off"
Dann sollte es funktionieren das "off" richtig gesetzt wird
LG
Zitat von: paul79 am 22 Februar 2017, 21:39:39
Dieser Version ist für 8 Zoll und 10,5 Zoll erstellt, beim Start der Webseite ist ein Script in der index.html was die Breite des Tabletts ausliest und wenn diese 1280px beträgt wird zusätzlich die css Datei fhem-tablet-ui-user-1280.css geladen, damit werden die richtigen Größen für 10.5 Zoll geladen. Wozu das Ganze, damit man beide Tabletts im native Modus laufen und nicht gezoomt werden.
Die css Datein für die Einstellungen:
fhem-grayblue-user-ui.css -> hauptsächlich für Farben
fhem-tablet-ui-user.css -> Schatteneffekte und Größen
fhem-tablet-ui-user-1280.css -> spezielle Größen für Auflösung 1280x800px
Wie bekommt man die Auflösung der Geräte am leichtesten heraus? Ich habe unterschiedliche Geräte: PC, Android Tablet, iOS. Ist das sogar per Label in FTUI möglich?
Ich möchte damit gerne für Mobilbrowser und Tablet unterschiedliche Icongrößen verwenden, ohne mehrere Versionen für PC, Tablet und mobil zu erstellen.
Zitat von: TWART016 am 06 März 2017, 17:48:16
Wie bekommt man die Auflösung der Geräte am leichtesten heraus? Ich habe unterschiedliche Geräte: PC, Android Tablet, iOS. Ist das sogar per Label in FTUI möglich?
Ich möchte damit gerne für Mobilbrowser und Tablet unterschiedliche Icongrößen verwenden, ohne mehrere Versionen für PC, Tablet und mobil zu erstellen.
Hallo,
probiere mal diese Seite size.html
Gruß Paul
Danke, sieht gut aus.
Ich finde es nur seltsam, dass beim iPhone eine Auflösung von 980*1691 angezeigt wird.
Erstens hat mein iPhone (Safari) gar nicht so viel Pixel. Zweitens wird auf dem Tablet (Fully) eine geringere Auflösung angezeigt.
Die Auflösung beim iPhone in FTUI ist zudem gefühlt deutlich kleiner (sicherlich die hälfte).
Das habe ich beim mobil index gesetzt.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
Hi,
genau erklären kann ich es nicht, für mich war nur wichtig wie ich unterscheide wo es aufgerufen wird. Es gibt auch einen Unterschied ob es im Head oder Body abgefragt wird.
schau mal hier: https://forum.fhem.de/index.php/topic,46897.msg395218.html#msg395218 das ist auch ein Link zu http://www.canbike.org/CSSpixels/ drin.
Ein Excel Sheet zur Berechnung der Gridgröße aus den Beitrag oben ist hier:
https://forum.fhem.de/index.php/topic,57366.msg557268.html#msg557268
Gruß Paul
Zitat von: paul79 am 06 März 2017, 20:03:22
schau mal hier: https://forum.fhem.de/index.php/topic,46897.msg395218.html#msg395218 das ist auch ein Link zu http://www.canbike.org/CSSpixels/ drin.
Das mit dem Device Width kann hinhauen. Wie kann man das selber herausfinden? Meine Tablets tauchen dort nicht auf.
Kann man anstatt der fixen Breite auch eine eigene Pixelanzahl angeben?
content="width=device-width"Unabhängig von der Größe kann ich jetzt zumindest ein anderes css mit unterschiedlichen Größen nehmen.
EDIT: Wie das Skript auf eine breite von 980 kommt ist mir immer noch ein Rätsel. Pixelbreite ist nur 750.
Hi,
zu Apple kann ich nix sagen aber vielleicht hilft die dieses weiter:
https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
Gruß Paul
Zitat von: bjoernbo am 18 Januar 2017, 14:02:41
...ein paar Beipiele aus meinem FTUI 8)
Sieht sehr schön aus.
Würdest Du deine Datein und css bereit stellen?
Hallo LEute
habe mir mir aus dem Internet dieses Umgebung besorgt. Nur leider kann ich sie nicht so anpassen wie ich es gerne möchte. Es war mit Sectionen versehen. Diese sind in machen bereichen auch super. Nur bei meiner Unwetterseite ist dieses irgendwie nicht so pralle. Kann mir vielleicht jemand sagen wie ich dieses hinbekommen das ich dieses ohne sectionen einstelllen kann. Habe mal meinen Code beigefügt und ein Foto wie es aussieht.
<!DOCTYPE html>
<html>
<head></head>
<body>
<div class="label" id="content_dwd"
<div class="gridster">
<ul>
<li class="halbTransparent border-left border-right" data-row="3" data-col="2" data-sizex="3" data-
sizey="4">
<header>Unwetter</header>
<div class="col-60">
<div data-type="uwz"
data-device="Unwetterzentrale"
data-detail='["uwzLevel","IconURL","ShortText","WarnTime"]'
data-lngtxtstyle="small"
data-imgsize="50"
data-max="5"
data-textdivider="</br>"
data-swiperstyle="yes"
class=""></div>
</li>
<li class="halbTransparent border-left border-right" data-row="3" data-col="5" data-sizex="4" data-sizey="4">
<header>Karte</header>
<div data-type="image"
data-refresh="300"
data-width="500 "
data-height="480"
data-url="http://www.unwetterzentrale.de/images/map/nrw_index.png"
class="right-space">
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</body>
</html>
Zitat von: chris76e am 27 Februar 2017, 17:56:54
Hi Paul
Rufe die Seite über den Button Tablet-UI in Fhem auf bzw. direkt die index.html.
Momentan wird nichts aktualisiert. Ein Schalter den ich eben eingebaut habe um ne Lampe ein/aus schalten funktioniert.
Bekomme folgende Meldung im Log:
2017.02.27 17:28:21 1: devspec2array WEB,Handy,Yamaha_zone2,Yamaha,Fritzboxanrufeliste,Kueche_Tuerkontakt,Kueche_Fensterkontakt1,Wohn_Fensterkontakt,Abfall_CalView,?????_CalView,Geburtstage_CalView,TrafficMaps,Pushover_an_aus,VI_Hessen,UWZ,Wetter,Sonnenauf,Sonnenunter: Sequence (???...) not recognized in regex; marked by <-- HERE in m/^(??? <-- HERE ??_CalView)$/ at fhem.pl line 1186.
2017.02.27 17:28:26 1: devspec2array WEB,Handy,Yamaha_zone2,Yamaha,Fritzboxanrufeliste,Kueche_Tuerkontakt,Kueche_Fensterkontakt1,Wohn_Fensterkontakt,Abfall_CalView,?????_CalView,Geburtstage_CalView,TrafficMaps,Pushover_an_aus,VI_Hessen,UWZ,Wetter,Sonnenauf,Sonnenunter: Sequence (???...) not recognized in regex; marked by <-- HERE in m/^(??? <-- HERE ??_CalView)$/ at fhem.pl line 1186.
2017.02.27 17:28:27 1: devspec2array WEB,HM_CC_boost,HM_CC_auto_an_aus,HM_CC_eco,Handy,Yamaha_zone2,Yamaha,Fritzboxanrufeliste,Kueche_Tuerkontakt,Kueche_Fensterkontakt1,Wohn_Fensterkontakt,Abfall_CalView,?????_CalView,Geburtstage_CalView,TrafficMaps,Pushover_an_aus,VI_Hessen,UWZ,Wetter,Sonnenauf,Sonnenunter: Sequence (???...) not recognized in regex; marked by <-- HERE in m/^(??? <-- HERE ??_CalView)$/ at fhem.pl line 1186.
2017.02.27 17:28:47 1: devspec2array WEB,Wohn_Wandthermostat,Wohn_Fensterkontakt,Kueche_Fensterkontakt1,Kueche_Tuerkontakt,Kueche_Wandthermostat,Bad_Wandthermostat,HM_CC_boost,HM_CC_auto_an_aus,HM_CC_eco,Handy,Yamaha_zone2,Yamaha,Fritzboxanrufeliste,Abfall_CalView,?????_CalView,Geburtstage_CalView,TrafficMaps,Pushover_an_aus,VI_Hessen,UWZ,Wetter,Sonnenauf,Sonnenunter: Sequence (???...) not recognized in regex; marked by <-- HERE in m/^(??? <-- HERE ??_CalView)$/ at fhem.pl line 1186.
Hey Chris,
das Problem liegt an den ??_CalView-Einträgen, die Paul mit den Fragezeichen maskiert hat. Wenn du die alle aus den Vorlagen schmeißt, dann geht es wunderbar.
Vielen Dank nochmal an Paul für das Teilen.
Grüße
Zitat von: Wasserwerk33 am 23 März 2017, 19:38:52
habe mir mir aus dem Internet dieses Umgebung besorgt.
das ist das FTUI von Roman1528, baut aber noch auf die 2.4er Version auf frage ihn doch dazu mal speziell
Danke werde ich machen
Gesendet von meinem ALE-L21 mit Tapatalk
Hi.
Hat jemand vielleicht eine 2.6 Tablet Ui dmoversion noch? Habe meine verbaut und es klappt leider nicht so wie ich es möchte. Und ist in 2.6 nicht auch gidrester möglich?
Hallo zusammen,
ich habe mal eine Anfängerfrage zwischendurch. Ich verwende für meine UI auch die sensationelle Vorlage von Paul - dafür auch von meiner Seite nochmals vielen Dank - das Bereitstellen ist besonders für Anfänger echt Klasse :D Vom Super-Design mal abgesehen...
Ich bin leider nur zu blöd, um die Darstellung der WI-Icons hinzubekommen. Kann mir jemand einen Tipp geben, was ich tun muss, damit dies dargestellt werden?
Viele Grüße
Markus
Zitat von: Macblock am 29 März 2017, 13:45:20
Hallo zusammen,
ich habe mal eine Anfängerfrage zwischendurch. Ich verwende für meine UI auch die sensationelle Vorlage von Paul - dafür auch von meiner Seite nochmals vielen Dank - das Bereitstellen ist besonders für Anfänger echt Klasse :D Vom Super-Design mal abgesehen...
Ich bin leider nur zu blöd, um die Darstellung der WI-Icons hinzubekommen. Kann mir jemand einen Tipp geben, was ich tun muss, damit dies dargestellt werden?
Viele Grüße
Markus
Hallo Markus
Danke und meist du das hier?
data-icon="wi wi-time-6" Gruß Paul
Hallo Paul,
ja, genau die meine ich. Deine js Dateien habe ich eingebunden.
Viele Grüße
Markus
Abbildung Raumklima
Hallo,
ich habe mich mal wieder ein ein komplexes logproxy mit Daten aus x,y-Koordinatenpaaren gewagt.
Nach einem entscheidenden Tip in der Verwendung von ftui l4sym anstelle von I4dot sieht es nun auch ansprechend aus.
<header class="headerTransparent">Raumklima</header>
<div class="big"
data-type="chart"
data-logdevice='["logProxy","logProxy","logProxy"]'
data-logfile="CURRENT"
data-columnspec='["Func:logProxy_xy2Plot([[19,39],[24.2,34],[22.2,67],[17.7,73],[19,39]])","Func:logProxy_xy2Plot([[19.4,20],[25.5,17.5],[26.7,32],[24.5,60],[20.7,82],[17.2,86],[16,76],[17.2,38],[19.4,20]])","Func:logProxy_xy2Plot([[ReadingsVal(\\x22CUL_TX_8\\x22,\\x22temperature\\x22,0),ReadingsVal(\\x22CUL_TX_8\\x22,\\x22humidity\\x22,0)]])","Func:logProxy_xy2Plot([[ReadingsVal(\\x22CUL_TX_10\\x22,\\x22temperature\\x22,0),ReadingsVal(\\x22CUL_TX_10\\x22,\\x22humidity\\x22,0)]])","Func:logProxy_xy2Plot([[ReadingsVal(\\x22CUL_TX_5\\x22,\\x22temperature\\x22,0),ReadingsVal(\\x22CUL_TX_5\\x22,\\x22humidity\\x22,0)]])","Func:logProxy_xy2Plot([[ReadingsVal(\\x22CUL_TX_110\\x22,\\x22temperature\\x22,0),ReadingsVal(\\x22CUL_TX_110\\x22,\\x22humidity\\x22,0)]])","Func:logProxy_xy2Plot([[ReadingsVal(\\x22CUL_TX_9\\x22,\\x22temperature\\x22,0),ReadingsVal(\\x22CUL_TX_9\\x22,\\x22humidity\\x22,0)]])","Func:logProxy_xy2Plot([[ReadingsVal(\\x22netatmo_D70_ee_50_27_ad_02\\x22,\\x22temperature\\x22,0),ReadingsVal(\\x22netatmo_D70_ee_50_27_ad_02\\x22,\\x22humidity\\x22,0)]])"]'
data-style='["ftui l1fill","ftui l5","ftui l5sym","ftui l2sym","ftui l4sym","ftui l6sym","ftui l0sym","ftui l1sym"]'
data-ptype='["lines","lines","points","points","points","points","points","points"]'
data-uaxis='["primary","primary","primary","primary","primary","primary","primary","primary"]'
data-legend='["Behaglich","Noch Behaglich","Bad","Büro","HWR Oben","Herrenzimmer","Schlafzimmer","Wohnzimmer"]'
data-width="670px"
data-height="590px"
data-minvalue="15"
data-maxvalue="28"
data-minvalue_sec="15"
data-maxvalue_sec="90"
data-yticks="auto"
data-showlegend="true"
data-crosshair="false"
data-cursorgroup="1"
data-scrollgroup="1"
data-xticks="auto">
</div>
Ich nehme aber gerne Verbesserungsvorschläge an, da ich eine deratige Darstellung des Raumklimas bisher noch nicht gesehen habe.
Grüße
Jörg
Hallo,
Airquality
ich habe mir auch eine tabletUI Umsetzung für das neue Modul airquality.pm gebaut.
<header class="headerTransparent">Aktuelle Luftqualität</header>
<table class="top-space">
<tr>
<td>Feinstaub (PM10) (Tagesmittelwert):
</td>
<td>
<div data-type="label"
data-device="airquality2"
data-get="PM10"
data-unit=" μg/m3"
data-limits="[0,20,40,60,80,100,120,140,160,180,200]"
data-colors='["#0000FF","#3232ff","#6666ff","#9999ff","#ccccff","#ffffb2","#ffff32","#ffbf7f","#ffa64c","#f4530d","#ff0000"]'
class="right big" >
</div>
</td>
<td>
<div data-type="label"
data-device="airquality2"
data-get="lastUpdatePM10"
class="right small" >
</div>
</td>
</tr>
<tr>
<td>CO (8h median):
</td>
<td>
<div data-type="label"
data-device="airquality2"
data-get="CO"
data-unit=" μg/m3"
data-limits="[0,1000,2000,3000,4000,5000,6000,7000,8000,9000,10000]"
data-colors='["#0000FF","#3232ff","#6666ff","#9999ff","#ccccff","#ffffb2","#ffff32","#ffbf7f","#ffa64c","#f4530d","#ff0000"]'
style="display:inline"
class="right big" >
</div>
</td>
<td>
<div data-type="label"
data-device="airquality2"
data-get="lastUpdateCO"
style="display:inline"
class="right small" >
</div>
</td>
</tr>
<tr>
<td>Stickstoffdioxid (Ein-Stunden-Mittelwert):
</td>
<td>
<div data-type="label"
data-device="airquality2"
data-get="NO2"
data-unit=" μg/m3"
data-limits="[0,20,40,60,80,100,120,140,160,180,200]"
data-colors='["#0000FF","#3232ff","#6666ff","#9999ff","#ccccff","#ffffb2","#ffff32","#ffbf7f","#ffa64c","#f4530d","#ff0000"]'
class="right big" >
</div>
</td>
<td>
<div data-type="label"
data-device="airquality2"
data-get="lastUpdateNO2"
class="right small" >
</div>
</td>
</tr>
</table>
Kann mir da bitte jemand mit einer hoffentlich Kleinigkeit helfen.
Ich möchte unterhalb des header "Aktuelle Luftqualität" EINE Zeile haben, in der die Schwellwerte (wie im Bild airquality3.png dargestellt) mit den farbigen Symbolen angezeigt werden. Ob als farbiger Kreis oder besser als Rechteck ist egal.
Die farbcodes sollen identisch zu data-colors sein.
Wie bekomme ich das hin ?
Danke
Jörg
Zitat von: jnewton957 am 31 März 2017, 18:28:06
Hallo,
Airquality
ich habe mir auch eine tabletUI Umsetzung für das neue Modul airquality.pm gebaut.
<header class="headerTransparent">Aktuelle Luftqualität</header>
<table class="top-space">
<tr>
<td>Feinstaub (PM10) (Tagesmittelwert):
</td>
<td>
<div data-type="label"
data-device="airquality2"
data-get="PM10"
data-unit=" μg/m3"
data-limits="[0,20,40,60,80,100,120,140,160,180,200]"
data-colors='["#0000FF","#3232ff","#6666ff","#9999ff","#ccccff","#ffffb2","#ffff32","#ffbf7f","#ffa64c","#f4530d","#ff0000"]'
class="right big" >
</div>
</td>
<td>
<div data-type="label"
data-device="airquality2"
data-get="lastUpdatePM10"
class="right small" >
</div>
</td>
</tr>
<tr>
<td>CO (8h median):
</td>
<td>
<div data-type="label"
data-device="airquality2"
data-get="CO"
data-unit=" μg/m3"
data-limits="[0,1000,2000,3000,4000,5000,6000,7000,8000,9000,10000]"
data-colors='["#0000FF","#3232ff","#6666ff","#9999ff","#ccccff","#ffffb2","#ffff32","#ffbf7f","#ffa64c","#f4530d","#ff0000"]'
style="display:inline"
class="right big" >
</div>
</td>
<td>
<div data-type="label"
data-device="airquality2"
data-get="lastUpdateCO"
style="display:inline"
class="right small" >
</div>
</td>
</tr>
<tr>
<td>Stickstoffdioxid (Ein-Stunden-Mittelwert):
</td>
<td>
<div data-type="label"
data-device="airquality2"
data-get="NO2"
data-unit=" μg/m3"
data-limits="[0,20,40,60,80,100,120,140,160,180,200]"
data-colors='["#0000FF","#3232ff","#6666ff","#9999ff","#ccccff","#ffffb2","#ffff32","#ffbf7f","#ffa64c","#f4530d","#ff0000"]'
class="right big" >
</div>
</td>
<td>
<div data-type="label"
data-device="airquality2"
data-get="lastUpdateNO2"
class="right small" >
</div>
</td>
</tr>
</table>
Kann mir da bitte jemand mit einer hoffentlich Kleinigkeit helfen.
Ich möchte unterhalb des header "Aktuelle Luftqualität" EINE Zeile haben, in der die Schwellwerte (wie im Bild airquality3.png dargestellt) mit den farbigen Symbolen angezeigt werden. Ob als farbiger Kreis oder besser als Rechteck ist egal.
Die farbcodes sollen identisch zu data-colors sein.
Wie bekomme ich das hin ?
Danke
Jörg
Hallo Jörg,
meinst du es so?
<div data-type="symbol"
data-device="airquality1"
data-get="SO2"
data-icon="fa-stop"
data-states="[0,13,25,38,50,63,75,88,100,113,125]"
data-colors='["#0000ff","#3232ff","#6666ff","#9999ff","#ccccff","#ffffb2","#ffff32","#ffbf7f","#ffa64c","#f4530d","#ff0000"]'
class="right big" >
</div>
Gruß Paul
Zitat von: paul79 am 31 März 2017, 20:59:47
Hallo Jörg,
meinst du es so?
<div data-type="symbol"
data-device="airquality1"
data-get="SO2"
data-icon="fa-stop"
data-states="[0,13,25,38,50,63,75,88,100,113,125]"
data-colors='["#0000ff","#3232ff","#6666ff","#9999ff","#ccccff","#ffffb2","#ffff32","#ffbf7f","#ffa64c","#f4530d","#ff0000"]'
class="right big" >
</div>
Gruß Paul
Hallo Paul,
nein das meinte ich nicht.
Die Werte sind aus meiner Sicht nicht aussagekräftig. Was sagt mir 1 μg/m3 oder 300 μg/m3?
Bei den Luftdaten steckt die Information in der Farbe (Schwellwert). Ist 1 blau oder gelb oder rot?
Dafür gibt es eine Farblegende. So sehe ich anhand der 11 Werte, ob bzw. wie weit es (anhand der Farbe) von gelb bzw. rot "entfernt" ist. Ich habe ja den Messwert eben farbig (datengetrieben) eingefärbt.
Ich habe das mal gemalt. Die Lgenede entweder mit Schwellwerten oder eben nur mit den Farbrechtecken. Also nicht Datengetrieben pro Messwert.
Einfach eine Zeile mit 11 unterschiedlich farbigen Kästchen direkt unter dem header. Also z.B. 11 x fa-stop in unterschiedlichen Farben nebeneinander.
Grüße
Jörg
P.S: vielleicht zu einfache Frage ? Bin halt kein html5 programmieren
Gibt es eine Vorlage für die verschiedenen Auflösungen (z.B. Tablet 7 oder 10 Zoll) ?
Zitat von: en-trust am 02 April 2017, 21:30:17
Gibt es eine Vorlage für die verschiedenen Auflösungen (z.B. Tablet 7 oder 10 Zoll) ?
jo https://forum.fhem.de/index.php/topic,37378.msg591642.html#msg591642 (https://forum.fhem.de/index.php/topic,37378.msg591642.html#msg591642)
Gruß Paul
Hallo,
ich bin seit September 2016 auch dabei und möchte mein Design für mein Wandtablet einmal zeigen.
Verglichen mit dem, was vorherige Poster aufgebaut haben noch wirklich überschaubar.
Ich habe aktuell allerdings noch das Problem, dass die ganze Oberfläche noch nicht mittig ist.
Geht das überhaupt. Ich finde das sieht sonst ein wenig wonky aus, wenn da soviel platz rechts und unten ist.
Grüße
Lennart
Hallo Lennart,
wärst du so nett und würdest deine .html zu Verfügung stellen. Ich finde aus jedem Aufbau kann man Ideen herrausfilten und in seine eigenen Ideen verwenden.
Gruß Peter
Leider zeigt mir die Tablet Version von Paul nur eine merkwürdige Oberfläche an...
Es fehlen die css Dateien in der zip.
<link rel="stylesheet" type="text/css" href="css/fhem-tablet-ui.css" />
<link rel="stylesheet" type="text/css" href="css/fhem-grayblue-user-ui.css" />
<link rel="stylesheet" type="text/css" href="css/fhem-tablet-ui-user.css" />
<link rel="stylesheet" type="text/css" href="css/fhem-tablet-ui-weekprofile.css" />
Zitat von: en-trust am 07 April 2017, 11:32:44
Leider zeigt mir die Tablet Version von Paul nur eine merkwürdige Oberfläche an...
Es fehlen die css Dateien in der zip.
<link rel="stylesheet" type="text/css" href="css/fhem-tablet-ui.css" />
<link rel="stylesheet" type="text/css" href="css/fhem-grayblue-user-ui.css" />
<link rel="stylesheet" type="text/css" href="css/fhem-tablet-ui-user.css" />
<link rel="stylesheet" type="text/css" href="css/fhem-tablet-ui-weekprofile.css" />
Hallo,
kann ich nicht nachvollziehen, wenn ich die zip Datei runterlade ist alles da.
Sieht aber so aus als ob du die ganzen Tablet UI js v.2.6 gar nicht hast. Hast du auch FTUI installiert?
Gruß Paul
Ich habe das Tablet Verzeichnis von Deiner zip einfach ausgetauscht, sprich die alte vorher gelöscht/umbenannt.
Zitat von: en-trust am 07 April 2017, 13:33:43
Ich habe das Tablet Verzeichnis von Deiner zip einfach ausgetauscht.
dann fehlen dir die restlichen css Dateien, die 3 von Paul reichen nicht...! Du mußt ein komplettes tablet Verzeichnis welches du installiert hast, haben... Dann erst die von Paul rein und alles wird schick
Ich habe nochmal eine FTUI Installation durchgeführt und die Paul Dateien rüberkopiert. Die 2 Außennavigationen sind zwar nach oben leicht verschoben, es sieht aber jetzt besser aus. Jetzt kann ich damit erstmal experimentieren.
Was muss man denn tun um das Ganze auch auf einem 7 Zoll Display vernünftig anzuzeigen ?
Zitat von: en-trust am 07 April 2017, 13:59:41
Ich habe nochmal eine FTUI Installation durchgeführt und die Paul Dateien rüberkopiert. Die 2 Außennavigationen sind zwar nach oben leicht verschoben, es sieht aber jetzt besser aus. Jetzt kann ich damit erstmal experimentieren.
Was muss man denn tun um das Ganze auch auf einem 7 Zoll Display vernünftig anzuzeigen ?
Hallo, welche Auflösung hat das Teil denn?
Gruß Paul
1024 x 600 glaube ich (wobei auf meinem tablet ich nur die Links als Texte bekomme) Auf dem POC sieht es besser aus.
Zwischenfrage noch... Du hast auch einen yamaha und dort netradio. Wie lautet die Programmierung um direkt einen Netradiosender oder normalen Sender per Button aufzurufen (sprich Yamaha einschalten und Sender auswählen) ?
Danke.
Hallo,
bei 1024x600 solltest du in der index.html ändern
}
else {
document.write('<meta name="widget_base_width" content="60">');
document.write('<meta name="widget_base_height" content="52">');
};
</script>
in
}
else {
document.write('<meta name="widget_base_width" content="65">');
document.write('<meta name="widget_base_height" content="52">');
};
</script>
Im Anhang ist ein Excelsheet zum ausrechen der Größen.
Bei dem Yamaha schalte ich nur auf den Input Netradio, mit der Senderwahl habe ich nicht, weiß auch gar nicht ob es geht.
Gruß Paul
Zitat von: Octopus180 am 04 April 2017, 17:22:17
Hallo Lennart,
wärst du so nett und würdest deine .html zu Verfügung stellen. Ich finde aus jedem Aufbau kann man Ideen herrausfilten und in seine eigenen Ideen verwenden.
Gruß Peter
Es ist zwar ungefähr 6 Jahre her, dass du gefragt hast. Aber hier:
siehe Dateianhang.
Grüße
Lennart
Danke
Hallo Paul,
auf meinem Tablett sieht der Homestatus merkwürdig aus,obwohl die size.html 1280 anzeigt.
Kannst Du mir ein Tipp geben woran das liegt ?
Gruß
Zitat von: achim60 am 12 April 2017, 21:48:12
Hallo Paul,
auf meinem Tablett sieht der Homestatus merkwürdig aus,obwohl die size.html 1280 anzeigt.
Kannst Du mir ein Tipp geben woran das liegt ?
Gruß
Hallo Achim,
der Screenshot hat aber eine Auflösung von 640x400 dafür ist die geänderte widget_homestatus
t.js natürlich zu groß.
Gruß Paul
Guten Morgen Paul,
das Bild hatte ich verkleinert, wegen dem Hochladen.
Hier das Originale. Es hat 1280 x 800 .
Gruß
Achim
Habe es jetzt hin bekommen ;)
Beim berechnen der Auflösung lief was falsch. Habe es deaktiviert.
Was ich festgestellt habe ist, das die Anrufe nicht aktualiesiert werden.
Ich habe in der index.html schon umgestellt auf shortpoll.
<meta name="longpoll_type" content="0"> <!-- 1=longpoll;0=shortpoll every 30sec
oder muss ich da was in der content_main.html ändern, die bei mir geladen wird?
Gruß
Zitat von: achim60 am 13 April 2017, 13:23:31
Habe es jetzt hin bekommen ;)
Beim berechnen der Auflösung lief was falsch. Habe es deaktiviert.
Was ich festgestellt habe ist, das die Anrufe nicht aktualiesiert werden.
Ich habe in der index.html schon umgestellt auf shortpoll.
<meta name="longpoll_type" content="0"> <!-- 1=longpoll;0=shortpoll every 30sec
oder muss ich da was in der content_main.html ändern, die bei mir geladen wird?
Gruß
Hallo, bei Pages kommt alles in die index.html.
Schau mal im Wiki nach ob du alles richtig in FHEM hast.
https://wiki.fhem.de/wiki/FHEM_Tablet_UI
Gruß Paul
Ich hab mein Wandtablet nochmal etwas aufgebohrt, da nun auch ein Markisenmotor Einzug gehalten hat.
Das Markisen Icon musste ich mir selbst basteln.
(SVG)
Bei Interesse lad ich das auch nochmal hoch..
Zitat von: lenn1 am 13 April 2017, 21:09:48
Bei Interesse lad ich das auch nochmal hoch..
Am besten hier hochladen.
https://forum.fhem.de/index.php/topic,12605.msg75887.html#msg75887
Zitat von: paul79 am 22 Februar 2017, 21:39:39
Hallo,
ich habe meine Tablet UI Seite mit Pagebutton und einem gewissen 3D Effekt auf die FTUI 2.6 angepasst.
Der alte Beitrag war hier https://forum.fhem.de/index.php/topic,37378.msg549640.html#msg549640
Dieser Version ist für 8 Zoll und 10,5 Zoll erstellt, beim Start der Webseite ist ein Script in der index.html was die Breite des Tabletts ausliest und wenn diese 1280px beträgt wird zusätzlich die css Datei fhem-tablet-ui-user-1280.css geladen, damit werden die richtigen Größen für 10.5 Zoll geladen. Wozu das Ganze, damit man beide Tabletts im native Modus laufen und nicht gezoomt werden.
Die css Datein für die Einstellungen:
fhem-grayblue-user-ui.css -> hauptsächlich für Farben
fhem-tablet-ui-user.css -> Schatteneffekte und Größen
fhem-tablet-ui-user-1280.css -> spezielle Größen für Auflösung 1280x800px
4 Widgets habe ich anpassen müssen um den gewünschten Effekt zu erhalten.
widget_calview -> Jahreszahl entfernt
widget_homestatust -> ist die Größen angepasst für Auflösung 1280x800px
widget_pagebutton -> roten Schatten eingefügt
widget_weather.js -> angepasst damit für PROPLANTA auch das heute Icon im kleinklima iconset angezeigt wird
2 Widgets sind von mir widget_uwz_paul79.js und widget_verkehrsinfo.js.
Alles auf eigene Gefahr!
Gruß Paul
Hallo Paul ich mal wieder 8)
von wo hast Du die Yamaha icons für die DSP-Modes.
Ich suche mir einen Wolf. Habe bis jetzt nur die Paul79_v3.zip und die Paul79_v4.zip gefunden. Eine Version 2 oder 1 jedoch nicht.
Weder im Google noch hier in der SuFu.
Danke
Uli
Zitat von: hummeruli am 22 April 2017, 21:59:12
Hallo Paul ich mal wieder 8)
von wo hast Du die Yamaha icons für die DSP-Modes.
Ich suche mir einen Wolf. Habe bis jetzt nur die Paul79_v3.zip und die Paul79_v4.zip gefunden. Eine Version 2 oder 1 jedoch nicht.
Weder im Google noch hier in der SuFu.
Danke
Uli
Hallo Uli,
die sind aus dem Yamaha App gerippt.
Gruß Paul
Zitat von: Masterfunk am 21 November 2016, 20:48:40
Auf Wunsch, hier meine Config:
Gruß Detlef
Es wäre toll wenn Du auch Deine fhem.cfg posten könntest.
Danke und Gruß Gerald
Bei mir ist die linke und die rechte Navigation immernoch untershiedlich nach oben verschoben.
Trotz...
<script type="text/javascript">
if (getWidth() == "1920" ) {
document.write('<meta name="widget_base_width" content="129">');
document.write('<meta name="widget_base_height" content="100">');
}
else if (getWidth() == "1280" ) {
document.write('<meta name="widget_base_width" content="83">');
document.write('<meta name="widget_base_height" content="72">');
}
else {
document.write('<meta name="widget_base_width" content="60">');
document.write('<meta name="widget_base_height" content="52">');
};
</script>
Hallo,
ich denke da muss du etwas mit der Größe der Icons spielen oder das top-narrow raus nehmen.
Ist halt nur eine Demo anpassen muss man sie schon etwas.
Gruß Paul
top-narrow hatte zur Folge dass die Icons sich nach oben verschieben.
Gibt es für die Darstellung der einzelnen Kästchen eine Art Rastervorlage, damit man auf dem Papier die Zuordnung auch trifft ?
<li data-row="3" data-col="6" data-sizex="2" data-sizey="3"
@paul79
Habe es jetzt geschafft deine Vorlage an meinen Gegebneheiten anzupassen, bzw. verstehe jetzt einiges davon.
Jetzt möchte ich gernen einen Slider einbauen, wenn ich auf Home bin, soll er einen automatischen wechsel der verschiedenen Inhalte von den einzelen unterseiten machen.
Wie kann man das am besten machen?
Hier ein paar Bilder damit man versteht was ich meinen. Der inhalt in der roten umrandung soll sich ändern
Zitat von: chris76e am 01 Mai 2017, 18:13:35
@paul79
Habe es jetzt geschafft deine Vorlage an meinen Gegebneheiten anzupassen, bzw. verstehe jetzt einiges davon.
Jetzt möchte ich gernen einen Slider einbauen, wenn ich auf Home bin, soll er einen automatischen wechsel der verschiedenen Inhalte von den einzelen unterseiten machen.
Wie kann man das am besten machen?
Hier ein paar Bilder damit man versteht was ich meinen. Der inhalt in der roten umrandung soll sich ändern
Hi, das weiß ich nicht vielleicht mit dem widget rotor https://wiki.fhem.de/wiki/FTUI_Widget_Rotor
schau mal die Proplanta Seite hatte ich so gemacht.
https://forum.fhem.de/index.php/topic,37378.msg593884.html#msg593884
Gruß Paul
Hier mal ein Screenshot meines FTUIs. Habe mich von vielen Demos inspirieren lassen. Das Tablet mit Fully Kiosk App klebt an der Wand, geht automatisch an wenn man sich davor stellt bzw. dran vorbei geht (Motion control über Kiosk App und Camera). Als nächstes gehe ich Temperaturregelungen / Thermostate an.
Bin wirklich sehr zufrieden mit FHEM / TABLET UI.
Zitat von: googelie am 05 Mai 2017, 12:10:03
Hier mal ein Screenshot meines FTUIs. Habe mich von vielen Demos inspirieren lassen. Das Tablet mit Fully Kiosk App klebt an der Wand, geht automatisch an wenn man sich davor stellt bzw. dran vorbei geht (Motion control über Kiosk App und Camera). Als nächstes gehe ich Temperaturregelungen / Thermostate an.
Bin wirklich sehr zufrieden mit FHEM / TABLET UI.
Hi googelie,
kannst du mir eventuell das mit der Camera als Bewegunsmelder erklären. Bin bis jetzt noch nicht dahinter gestiegen. Den Fully verwende ich auch.
Danke
Uli
@googelie: Nur ein Hinweis: du darfst nw. nicht die Öffentlichkeit filmen...
Ein Orientierungsdokument: https://www.bfdi.bund.de/SharedDocs/Publikationen/Entschliessungssammlung/DuesseldorferKreis/OH_VideoueberwachungNichtOeffentlicheStellen.html
@hummeruli: Fully (version full und in Kioskmodus) bietet die Möglichkeit, die Kamera der Tablet als Bewegungsmelder zu nutzen, um das Bildschirm automatisch zu "wecken".
Gruß
Zitat von: amenomade am 08 Mai 2017, 00:16:26
@googelie: Nur ein Hinweis: du darfst nw. nicht die Öffentlichkeit filmen...
Ein Orientierungsdokument: https://www.bfdi.bund.de/SharedDocs/Publikationen/Entschliessungssammlung/DuesseldorferKreis/OH_VideoueberwachungNichtOeffentlicheStellen.html
Danke dir, ja ich habe die Kamera nun neu ausgerichtet, so sieht man nur noch den Eingang (und ganz viel Wand ;-))
Zitat von: wildea am 09 Juni 2016, 13:12:31
ja klar gerne..
für die Wetterspalten oben habe ich folgendes in fhem eingestellt
define Wetterext PROPLANTA Burgdorf+%28Kreis+Hannover%29
hier musst du natürlich deine Stadt eintragen. Die html findest du unten.
Für das Chart benutze ich Meteo
https://github.com/knowthelist/fhem-tablet-ui/tree/master/examples/charts
Hi,
kann sich einer vorstellen warum beim Meteogram nichts, noch nichtmal ein leeres Diagramm angezeigt wird? Ich habe es 1:1 kopiert übernommen.... Die Widgets sind bei mir up-to-date
Habe meine FTUI jetzt auf dem Tablet 1024x600 getestet. Aber die Darstellung lässt sich so beschreiben, dass alle Boxen am Oberen Bildschirm aufgereiht sind. Am PC und auf dem Handy wird mir das alles richtig angezeigt.
Folgendes habe ich vorab in der index stehen.
<script type="text/javascript">
if (getWidth() == "1280" ) {
document.write('<meta name="widget_base_width" content="83">');
document.write('<meta name="widget_base_height" content="72">');
}
else if (getWidth() == "1024" ) {
document.write('<meta name="widget_base_width" content="65">');
document.write('<meta name="widget_base_height" content="52">');
}
else {
document.write('<meta name="widget_base_width" content="106">');
document.write('<meta name="widget_base_height" content="82">');
};
</script>
Ansonsten sieht sie eher so aus wie bei Paul. Jemand eine Erklärung für das Phänomen ?
Hi leute
Ich bekomme es einfach nicht hin, habe bei anderen schon geschaut aber da finde ich meinen fehler nciht, habe auch schon sachen von denn kopiert aber das bringt mir auch nix. :(
Ich würde gerne das Icon oben habe und was dahintersteck drunter stehen haben: z.b WETTER icon und unten drunter wetter.
<li class="" data-row="1" data-col="1" data-sizex="11" data-sizey="2">
<header class="">Menü</header>
<div class="cell">
<div class="center-align">
<div class="hbox">
<div class="compressed normal shadow inline">
</div>
<div data-type="pagebutton"
data-url="#content_Untergeschoß.html"
data-load="#content11"
data-fade-duration="fast"
data-active-pattern=".*#content_untergeschoß.html"
data-icon="fa-desktop"
class="inline large shadow">
</div>
<div data-type="label"
class="compressed normal shadow inline darker">Untergeschoß</div>
<div data-type="pagebutton"
data-url="#content_Obergeschoß.html"
data-load="#content12"
data-fade-duration="fast"
data-active-pattern=".*#content_obergeschoß.html"
data-icon="oa-it_remote"
class="large shadow">
</div>
<div data-type="label"
class="inline small shadow darker">Obergeschoß</div>
<div data-type="pagebutton"
data-url="#content_Wetter.html"
data-load="#content3"
data-fade-duration="fast"
data-active-pattern=".*#content_wetter.html"
data-icon="oa-light_ceiling_light"
class="large shadow">
</div>
<div data-type="label"
class="inline shadow darker">Wetter</div>
mir würde es reichen wenn ihr mir sagt was ich ändern muss.
Danke
Hallo, ich würde es so machen
<li class="" data-row="1" data-col="1" data-sizex="11" data-sizey="2">
<header class="">Menü</header>
<div class="hbox">
<div class="vbox">
<div data-type="pagebutton"
data-url="#content_Untergeschoß.html"
data-load="#content11"
data-fade-duration="fast"
data-active-pattern=".*#content_untergeschoß.html"
data-icon="fa-desktop"
class="large shadow"></div>
<div data-type="label" class="compressed normal shadow darker">Untergeschoß</div>
</div>
<div class="vbox">
<div data-type="pagebutton"
data-url="#content_Obergeschoß.html"
data-load="#content12"
data-fade-duration="fast"
data-active-pattern=".*#content_obergeschoß.html"
data-icon="oa-it_remote"
class="large shadow"></div>
<div data-type="label" class="compressed normal shadow darker">Obergeschoß</div>
</div>
<div class="vbox">
<div data-type="pagebutton"
data-url="#content_Wetter.html"
data-load="#content3"
data-fade-duration="fast"
data-active-pattern=".*#content_wetter.html"
data-icon="oa-light_ceiling_light"
class="large shadow">
</div>
<div data-type="label" class="compressed normal shadow darker">Wetter</div>
</div>
</div>
</li>
Gruß Paul
hey
Danke für die Hilfe.
Also vor jedem Button einen VBox setzten
nochmals dafür den Tipp
hi
Wieso macht es den sowas??
normalerweise sollte dieses unten auf der Seite sein.
Finde meinen Fehler einfach nicht
:(
<!DOCTYPE html>
<html>
<head>
<!--
/* FHEM tablet ui */
/*
* UI builder framework for FHEM
*
* Version: 2.6.x
* URL: https://github.com/knowthelist/fhem-tablet-ui
*
* Copyright (c) 2015-2016 Mario Stephan <mstephan@shared-files.de>
* Under MIT License (http://www.opensource.org/licenses/mit-license.php)
*
* !!!! Evaluation version - run only in a staging enviroment !!!!
*
* - create a new folder named 'tablet_eval' in /<fhem-path>/www
* - copy all files incl. sub folders into /<fhem-path>/www/tablet_eval
* - add 'define TABLETUIEVAL HTTPSRV ftui_eval ./www/tablet_eval Tablet-EVAL' in fhem.cfg
* - Tadaaa! A new fhem ui in http://<fhem-url>:8083/fhem/tablet_eval/
*/
<meta name="widget_min_cols" content="13"> -->
<script type="text/javascript">
function getWidth()
{
xWidth = null;
if(window.screen != null)
xWidth = window.screen.availWidth;
if(window.innerWidth != null)
xWidth = window.innerWidth;
if(document.body != null)
xWidth = document.body.clientWidth;
return xWidth;
}
</script>
<title>FHEM-Tablet-UI</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script type="text/javascript">
if (getWidth() == "1280" ) {
document.write('<meta name="widget_base_width" content="83">');
document.write('<meta name="widget_base_height" content="72">');
}
else {
document.write('<meta name="widget_base_width" content="60">');
document.write('<meta name="widget_base_height" content="52">');
};
</script>
<!--meta name="viewport" content="maximum-scale=1.0, user-scalable=yes"-->
<!--meta name="widget_base_width" content="60"-->
<!--meta name="widget_base_height" content="52"-->
<!--meta name="gridster_cols" content="14"-->
<!--meta name="gridster_rows" content="10"-->
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="gridster_disable" content="1">
<meta name="widget_margin" content="1">
<meta name="longpoll_type" content="websocket">
<!-- 1=longpoll;0=shortpoll every 30sec; "ajax" -> HTTP AJAX; websocket-->
<meta name="debug" content="0">
<!-- 1=output to console;0=not output -->
<meta name="toast" content="0">
<!-- 1=Toast messages deaktivieren ;0=not output -->
<meta name="lang" content="de">
<link rel="stylesheet" type="text/css" href="css/fhem-tablet-ui.css" />
<link rel="stylesheet" type="text/css" href="css/fhem-grayblue-user-ui.css" />
<link rel="stylesheet" type="text/css" href="css/fhem-tablet-ui-user.css" />
<link rel="stylesheet" type="text/css" href="css/fhem-tablet-ui-weekprofile.css" />
<script type="text/javascript">
if (getWidth() == "1280" ) {
document.write('<link rel="stylesheet" type="text/css" href="css/fhem-tablet-ui-user-1280.css" />');
};
</script>
<script type="text/javascript" src="../pgm2/jquery.min.js"></script>
<script src="js/fhem-tablet-ui.js" defer></script>
<!-- Remove this line to enable for usage with WebViewControl
<script defer>
var wvcDevices = {
'12345': 'Tablet'
};
var wvcUserCssFile = "webviewcontrol.css"
</script>
<script src="../pgm2/cordova-2.3.0.js" defer></script>
<script src="../pgm2/webviewcontrol.js" defer></script>-->
<!-- End for WebViewControl -->
<title>FHEM-Tablet-UI-PageUI</title>
</head>
<body>
<div class="gridster">
<ul>
<!-- ============= Menü ================ -->
<!-- ====================================== -->
<li class="data-row="1" data-col="1" data-sizex="11" data-sizey="2">
<header class="">Menü</header>
<div class="hbox">
<div class="vbox">
<div data-type="pagebutton"
data-url="#content_main.html"
data-load="#content_main"
data-fade-duration="fast"
data-active-pattern=".*#content_main.html"
data-icon="fa-home"
class="top-narrow-2x">
</div>
<div data-type="label" class="narrow compressed normal shadow darker">Untergeschoß</div>
</div>
<div class="vbox">
<div data-type="pagebutton"
data-url="#content_Obergeschoß.html"
data-load="#content2"
data-fade-duration="fast"
data-active-pattern=".*#content_obergeschoß.html"
data-icon="fa-bed"
class="top-narrow-2x">
</div>
<div data-type="label" class="narrow compressed normal shadow darker">Obergeschoß</div>
</div>
<div class="vbox">
<div data-type="pagebutton"
data-url="#content_Wetter.html"
data-load="#content3"
data-fade-duration="fast"
data-active-pattern=".*#content_wetter.html"
data-icon="fa-cloud"
data-color="green"
class="top-narrow-2x">
</div>
<div data-type="label" class="compressed normal shadow darker">Wetter</div>
</div>
<div class="vbox">
<div data-type="pagebutton"
data-url="#content_dwd.html"
data-load="#content_dwd"
data-fade-duration="fast"
data-active-pattern=".*#content_dwd.html"
data-device="Unwetterzentrale"
data-get="WarnCount"
data-states='["0","[1-9]{1}|[0-9]{2}"]'
data-icons='["fa-bolt","fa-bolt warn"]'
data-colors='["#04B404","firebrick"]'
class="top-narrow-2x">
</div>
<div data-type="label" class="compressed normal shadow darker">Unwetter</div>
</div>
</li>
<!-- ============= Uhrzeit ================ -->
<!-- ====================================== -->
<li class="" data-row="1" data-col="12" data-sizex="4" data-sizey="2">
<header class="">Uhrzeit</header>
<div class="cell">
<div data-type="clock"
class="cell top-space-1x big yellow semitransparenttext">
</div>
<div data-type="clock"
data-format="l d.m.Y"
class="large semitransparenttext">
</div>
</div>
</li>
<li class="semitransparentoff" data-row="3" data-col="1" data-sizex="15" data-sizey="5" >
<div class="page" id="content_main"></div>
<div class="page" id="content_obergeschoß"></div>
<div class="page" id="content_wetter"></div>
<div class="page" id="content_Unwetter"></div>
<div class="page" id="content5"></div>
<div class="page" id="content6"></div>
<div class="page" id="content7"></div>
<div class="page" id="content8"></div>
<div class="page" id="content9"></div>
<div class="page" id="content10"></div>
<div class="page" id="content11"></div>
<div class="page" id="content12"></div>
<div class="page" id="content13"></div>
<div class="page" id="content14"></div>
<div class="page" id="content15"></div>
<div class="page" id="content16"></div>
<div class="page" id="content17"></div>
<div class="page" id="content18"></div>
<div class="page" id="content19"></div>
</div>
</li>
<!-- ============= Jalousien status ================ -->
<!-- ====================================== -->
<li class="data-row="9" data-col="1" data-sizex="11" data-sizey="1">
<header class="">Menü</header>
<div class="hbox">
<div class="vbox">
<div data-type="symbol"
data-device="UG_Runter_Kontrolle_"
data-get-on="on"
data-get-off="off"
data-states='["on","off"]'
data-icons='["foa-fts_shutter_100","oa-fts_window_2w"]'
data-colors='["green","#FF0000"]'
class="small top-narrow-2x">
</div>
<div data-type="label" class="narrow compressed small shadow darker">Untergeschoß</div>
</div>
<div class="vbox">
<div data-type="symbol"
data-device="OG_Runter_Kontrolle_"
data-get-on="on"
data-get-off="off"
data-states='["on","off"]'
data-icons='["foa-fts_shutter_100","oa-fts_window_2w"]'
data-colors='["green","#FF0000"]'
class="small top-narrow-2x">
</div>
<div data-type="label" class="narrow compressed small shadow darker">Obergeschoß</div>
</div>
<div class="vbox">
<div data-type="symbol"
data-device="Sonnenschutz_OG_Kontrolle"
data-get-on="on"
data-get-off="off"
data-states='["on","off"]'
data-icons='["foa-fts_shutter_50","oa-fts_window_2w"]'
data-colors='["green","#FF0000"]'
class="small top-narrow-2x">
</div>
<div data-type="label" class="compressed small shadow darker">sonnenschutz OG</div>
</div>
<div class="vbox">
<div data-device="Sonnenschutz_UG_Kontrolle"
data-get-on="on"
data-get-off="off"
data-states='["on","off"]'
data-icons='["foa-fts_shutter_50","oa-fts_window_2w"]'
data-colors='["green","#FF0000"]'
class="small top-narrow-2x">
</div>
<div data-type="label" class="compressed small shadow darker">Sonnenschutz UG</div>
</div>
<div class="vbox">
<div data-device="Party_Kontrolle"
data-states='["on","off"]'
data-icons='["fa-battery-4","fa-battery-1"]'
data-colors='["green","firebrick"]'
class="small top-narrow-2x">
</div>
<div data-type="label" class="compressed small shadow darker">Party</div>
</div>
<div class="vbox">
<div data-type="symbol"
data-device="Urlaub_Kontrolle"
data-states='["on","off"]'
data-icons='["fa-battery-4","fa-battery-1"]'
data-colors='["green","firebrick"]'
class="small top-narrow-2x">
</div>
<div data-type="label" class="compressed small shadow darker">Urlaub</div>
</div>
</li>
</ul>
</div>
</div>
</body>
</html>
@Paul79 Wie hast du in den Navigationsleisten, wenn sie angeklickt werden das ganze rot gefärbt? Wo muss ich diese Änderungen vornehmen?
Konnte dazu bezüglich nichts finden.
Danke und Gruß,
Fixel
Zitat von: Fixel2012 am 13 Juli 2017, 14:08:09
@Paul79 Wie hast du in den Navigationsleisten, wenn sie angeklickt werden das ganze rot gefärbt? Wo muss ich diese Änderungen vornehmen?
Konnte dazu bezüglich nichts finden.
Danke und Gruß,
Fixel
Hallo, wie hier geschrieben https://forum.fhem.de/index.php/topic,37378.msg591642.html#msg591642 habe ich im Widget widget_pagebutton den roten Schatten eingefügt
function changeState(elem, isOn) {
var faelem = elem.data('famultibutton');
if (isOn) {
if (faelem) {
faelem.setOn();
}
// overwrite default colors for showMultiStates
elem.data('on-colors', [elem.data('on-color')]);
elem.data('on-background-colors', [elem.data('on-background-color')]);
elem.addClass('shadowred');
elem.removeClass('shadow');
} else {
if (faelem) {
faelem.setOff();
}
// overwrite default colors for showMultiStates
elem.data('on-colors', [elem.data('off-color')]);
elem.data('on-background-colors', [elem.data('off-background-color')]);
elem.addClass('shadow');
elem.removeClass('shadowred');
}
var state = elem.getReading('get').val;
if (ftui.isValid(state)) {
var states = elem.data('states') || elem.data('limits') || elem.data('get-on');
if ($.isArray(states)) {
me.showMultiStates(elem, states, state);
}
}
} elem.addClass('shadowred');
elem.removeClass('shadow');Gruß Paul
Danke dir!!
Zitat von: Wasserwerk33 am 13 Juli 2017, 13:36:08
hi
Wieso macht es den sowas??
normalerweise sollte dieses unten auf der Seite sein.
Finde meinen Fehler einfach nicht
:(
Hallo, du nimmst keinen gescheiten Editor und so siehst du nicht deine Fehler
z.B. vergisst du </div> oder class" das 2te "
hier mal etwas gereinigt aber bitte verwende Notepad++
<!DOCTYPE html>
<html>
<head>
<!--
/* FHEM tablet ui */
/*
* UI builder framework for FHEM
*
* Version: 2.6.x
* URL: https://github.com/knowthelist/fhem-tablet-ui
*
* Copyright (c) 2015-2016 Mario Stephan <mstephan@shared-files.de>
* Under MIT License (http://www.opensource.org/licenses/mit-license.php)
*
* !!!! Evaluation version - run only in a staging enviroment !!!!
*
* - create a new folder named 'tablet_eval' in /<fhem-path>/www
* - copy all files incl. sub folders into /<fhem-path>/www/tablet_eval
* - add 'define TABLETUIEVAL HTTPSRV ftui_eval ./www/tablet_eval Tablet-EVAL' in fhem.cfg
* - Tadaaa! A new fhem ui in http://<fhem-url>:8083/fhem/tablet_eval/
*/
<meta name="widget_min_cols" content="13"> -->
<script type="text/javascript">
function getWidth()
{
xWidth = null;
if(window.screen != null)
xWidth = window.screen.availWidth;
if(window.innerWidth != null)
xWidth = window.innerWidth;
if(document.body != null)
xWidth = document.body.clientWidth;
return xWidth;
}
</script>
<title>FHEM-Tablet-UI</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script type="text/javascript">
if (getWidth() == "1280" ) {
document.write('<meta name="widget_base_width" content="83">');
document.write('<meta name="widget_base_height" content="72">');
}
else {
document.write('<meta name="widget_base_width" content="60">');
document.write('<meta name="widget_base_height" content="52">');
};
</script>
<!--meta name="viewport" content="maximum-scale=1.0, user-scalable=yes"-->
<!--meta name="widget_base_width" content="60"-->
<!--meta name="widget_base_height" content="52"-->
<!--meta name="gridster_cols" content="14"-->
<!--meta name="gridster_rows" content="10"-->
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="gridster_disable" content="1">
<meta name="widget_margin" content="1">
<meta name="longpoll_type" content="websocket">
<!-- 1=longpoll;0=shortpoll every 30sec; "ajax" -> HTTP AJAX; websocket-->
<meta name="debug" content="0">
<!-- 1=output to console;0=not output -->
<meta name="toast" content="0">
<!-- 1=Toast messages deaktivieren ;0=not output -->
<meta name="lang" content="de">
<link rel="stylesheet" type="text/css" href="css/fhem-tablet-ui.css" />
<link rel="stylesheet" type="text/css" href="css/fhem-grayblue-user-ui.css" />
<link rel="stylesheet" type="text/css" href="css/fhem-tablet-ui-user.css" />
<link rel="stylesheet" type="text/css" href="css/fhem-tablet-ui-weekprofile.css" />
<script type="text/javascript">
if (getWidth() == "1280" ) {
document.write('<link rel="stylesheet" type="text/css" href="css/fhem-tablet-ui-user-1280.css" />');
};
</script>
<script type="text/javascript" src="../pgm2/jquery.min.js"></script>
<script src="js/fhem-tablet-ui.js" defer></script>
<!-- Remove this line to enable for usage with WebViewControl
<script defer>
var wvcDevices = {
'12345': 'Tablet'
};
var wvcUserCssFile = "webviewcontrol.css"
</script>
<script src="../pgm2/cordova-2.3.0.js" defer></script>
<script src="../pgm2/webviewcontrol.js" defer></script>-->
<!-- End for WebViewControl -->
<title>FHEM-Tablet-UI-PageUI</title>
</head>
<body>
<div class="gridster">
<ul>
<!-- ============= Menü ================ -->
<!-- ====================================== -->
<li class="data-row="1" data-col="1" data-sizex="11" data-sizey="2">
<header class="">Menü</header>
<div class="hbox">
<div class="vbox">
<div data-type="pagebutton"
data-url="#content_main.html"
data-load="#content_main"
data-fade-duration="fast"
data-active-pattern=".*#content_main.html"
data-icon="fa-home"
class="top-narrow-2x">
</div>
<div data-type="label" class="narrow compressed normal shadow darker">Untergeschoß</div>
</div>
<div class="vbox">
<div data-type="pagebutton"
data-url="#content_Obergeschoß.html"
data-load="#content2"
data-fade-duration="fast"
data-active-pattern=".*#content_obergeschoß.html"
data-icon="fa-bed"
class="top-narrow-2x">
</div>
<div data-type="label" class="narrow compressed normal shadow darker">Obergeschoß</div>
</div>
<div class="vbox">
<div data-type="pagebutton"
data-url="#content_Wetter.html"
data-load="#content3"
data-fade-duration="fast"
data-active-pattern=".*#content_wetter.html"
data-icon="fa-cloud"
data-color="green"
class="top-narrow-2x">
</div>
<div data-type="label" class="compressed normal shadow darker">Wetter</div>
</div>
<div class="vbox">
<div data-type="pagebutton"
data-url="#content_dwd.html"
data-load="#content_dwd"
data-fade-duration="fast"
data-active-pattern=".*#content_dwd.html"
data-device="Unwetterzentrale"
data-get="WarnCount"
data-states='["0","[1-9]{1}|[0-9]{2}"]'
data-icons='["fa-bolt","fa-bolt warn"]'
data-colors='["#04B404","firebrick"]'
class="top-narrow-2x">
</div>
<div data-type="label" class="compressed normal shadow darker">Unwetter</div>
</div>
</div>
</li>
<!-- ============= Uhrzeit ================ -->
<!-- ====================================== -->
<li class="" data-row="1" data-col="12" data-sizex="4" data-sizey="2">
<header class="">Uhrzeit</header>
<div class="cell">
<div data-type="clock"
class="cell top-space-1x big yellow semitransparenttext">
</div>
<div data-type="clock"
data-format="l d.m.Y"
class="large semitransparenttext">
</div>
</div>
</li>
<li class="semitransparentoff" data-row="3" data-col="1" data-sizex="15" data-sizey="5" >
<div class="page" id="content_main"></div>
<div class="page" id="content_obergeschoß"></div>
<div class="page" id="content_wetter"></div>
<div class="page" id="content_Unwetter"></div>
<div class="page" id="content5"></div>
<div class="page" id="content6"></div>
<div class="page" id="content7"></div>
<div class="page" id="content8"></div>
<div class="page" id="content9"></div>
<div class="page" id="content10"></div>
<div class="page" id="content11"></div>
<div class="page" id="content12"></div>
<div class="page" id="content13"></div>
<div class="page" id="content14"></div>
<div class="page" id="content15"></div>
<div class="page" id="content16"></div>
<div class="page" id="content17"></div>
<div class="page" id="content18"></div>
<div class="page" id="content19"></div>
</li>
<!-- ============= Jalousien status ================ -->
<!-- ====================================== -->
<li class="" data-row="9" data-col="1" data-sizex="11" data-sizey="1">
<header class="">Menü</header>
<div class="hbox">
<div class="vbox">
<div data-type="symbol"
data-device="UG_Runter_Kontrolle_"
data-get-on="on"
data-get-off="off"
data-states='["on","off"]'
data-icons='["foa-fts_shutter_100","oa-fts_window_2w"]'
data-colors='["green","#FF0000"]'
class="small top-narrow-2x">
</div>
<div data-type="label" class="narrow compressed small shadow darker">Untergeschoß</div>
</div>
<div class="vbox">
<div data-type="symbol"
data-device="OG_Runter_Kontrolle_"
data-get-on="on"
data-get-off="off"
data-states='["on","off"]'
data-icons='["foa-fts_shutter_100","oa-fts_window_2w"]'
data-colors='["green","#FF0000"]'
class="small top-narrow-2x">
</div>
<div data-type="label" class="narrow compressed small shadow darker">Obergeschoß</div>
</div>
<div class="vbox">
<div data-type="symbol"
data-device="Sonnenschutz_OG_Kontrolle"
data-get-on="on"
data-get-off="off"
data-states='["on","off"]'
data-icons='["foa-fts_shutter_50","oa-fts_window_2w"]'
data-colors='["green","#FF0000"]'
class="small top-narrow-2x">
</div>
<div data-type="label" class="compressed small shadow darker">sonnenschutz OG</div>
</div>
<div class="vbox">
<div data-device="Sonnenschutz_UG_Kontrolle"
data-get-on="on"
data-get-off="off"
data-states='["on","off"]'
data-icons='["foa-fts_shutter_50","oa-fts_window_2w"]'
data-colors='["green","#FF0000"]'
class="small top-narrow-2x">
</div>
<div data-type="label" class="compressed small shadow darker">Sonnenschutz UG</div>
</div>
<div class="vbox">
<div data-device="Party_Kontrolle"
data-states='["on","off"]'
data-icons='["fa-battery-4","fa-battery-1"]'
data-colors='["green","firebrick"]'
class="small top-narrow-2x">
</div>
<div data-type="label" class="compressed small shadow darker">Party</div>
</div>
<div class="vbox">
<div data-type="symbol"
data-device="Urlaub_Kontrolle"
data-states='["on","off"]'
data-icons='["fa-battery-4","fa-battery-1"]'
data-colors='["green","firebrick"]'
class="small top-narrow-2x">
</div>
<div data-type="label" class="compressed small shadow darker">Urlaub</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</body>
</html>Gruß Paul
okay
werde mir Notepad besorgen
danke schön
Zitat von: Wasserwerk33 am 13 Juli 2017, 14:59:44
okay
werde mir Notepad besorgen
danke schön
aber Notepad plus plus
https://notepad-plus-plus.org/
Hallo Paul
Benutze nun Notepad++
Danke für den Tip man sieht es wirklich alles besser.
Habe nur ein problem da es dieses mal wirklich komplett mein eigendes ist. Hänge ich echt.
Habe Pagebutton das sind 4 stück Funktoniert auch soweit. Ausser das mit dem Wetter. Aber das ist halb so wild.
Wenn ich mein Tablet ui nun anschalte komme ich auf meine Index.html seite ist ja soweit auch richtig. Muss aber auf Untergeschoß klicken damit ich diese als erste Seite habe. Sollte eigentlich so sein das es direkt irgendwie klappt.
Und wenn ich dann auf irgendeine Seite gehe, verrutschen meine Seiten Dimensionen total. Was muss ich ändern oder noch einfügen?
Hab am Wochenende aus dem iOS UI Template hier:
http://mercury.io/blog/free-ios-9-3-iphone-ui-kit-for-illustrator-and-sketch
Die iOS Wetter Icons extrahiert und etwas angepasst.
Sind benannt für die Nutzung mit dem Wunderground Modul.
Evtl. kann es ja jemand brauchen. ;)
Ich finde deine komplette Visualisierung sieht sehr gut aus. Würdest du die oder teile davon bereitstellen?
Danke.
Zitat von: Thyraz am 15 August 2017, 12:37:34
Hab am Wochenende aus dem iOS UI Template hier:
http://mercury.io/blog/free-ios-9-3-iphone-ui-kit-for-illustrator-and-sketch
Die iOS Wetter Icons extrahiert und etwas angepasst.
Sind benannt für die Nutzung mit dem Wunderground Modul.
Evtl. kann es ja jemand brauchen. ;)
Zitat von: gloob am 15 August 2017, 12:44:48
Ich finde deine komplette Visualisierung sieht sehr gut aus. Würdest du die oder teile davon bereitstellen?
Danke.
Da würde ich fast für ein eigenes Thema plädieren. Titel "So macht man es richtig: Meine mobile Darstellung der Tablet-UI"
Sieht sehr gut aus.
Ich dachte wir sind hier extra im Thread für Beispiele:
Zitat[FHEM-Tablet-UI] User-Demos
Zitat von: gloob am 15 August 2017, 12:44:48
Ich finde deine komplette Visualisierung sieht sehr gut aus. Würdest du die oder teile davon bereitstellen?
Danke.
das kannst du ganz einfach selber finden...! klicke auf seinen Namen -> dann auf Profilinformationen/ Beiträge anzeigen -> und dann auf Dateianhänge -> somit findest du von jedem User etwas von Thyraz findest du "ftui-thyraz.zip" da sollte alles drin sein... ;)
Aber das Teil ist nichts für FTUI, HTML und CSS Anfänger ;) :D
Werde das dunkle Layout sicher auch bald mal hochladen.
Bin aber noch am Basteln.
Falls ich zuviel Langeweile habe, kann ich das Ganze auch ausdünnen und den Code etwas kommentieren.
Ist aber sicher nicht jedermanns Sache, da ich auf Bootstrap als responsive CSS Framework gesetzt habe.
Muss man sich halt auch erstmal wieder reinfuchsen.
Zitat von: Thyraz am 15 August 2017, 12:37:34
Hab am Wochenende aus dem iOS UI Template hier:
http://mercury.io/blog/free-ios-9-3-iphone-ui-kit-for-illustrator-and-sketch
Die iOS Wetter Icons extrahiert und etwas angepasst.
Sind benannt für die Nutzung mit dem Wunderground Modul.
Evtl. kann es ja jemand brauchen. ;)
Bin auch von dem template begeistert und wuerde mich freuen, wenn Du eine aktuelle Version bereitstellen koenntest.
Hallo Paul,
bin gerade dabei, Dein Seiten ein wenig für mich anzupassen.
Aber erstmal vielen Dank für Deine Arbeit und vor allem dafür, dass Du sie mit uns teilst.
Jetzt zu meinem Problem:
Die Meldungen der Unwetterzentrale werden bei mir nicht so schön, wie auf Deinem Screenshot angezeigt.
Kannst Du mir sagen, wo der Fehler liegt?
Vielen Dank und viele Grüße
Marc
Zitat von: PingPong am 26 August 2017, 00:01:57
Hallo Paul,
bin gerade dabei, Dein Seiten ein wenig für mich anzupassen.
Aber erstmal vielen Dank für Deine Arbeit und vor allem dafür, dass Du sie mit uns teilst.
Jetzt zu meinem Problem:
Die Meldungen der Unwetterzentrale werden bei mir nicht so schön, wie auf Deinem Screenshot angezeigt.
Kannst Du mir sagen, wo der Fehler liegt?
Vielen Dank und viele Grüße
Marc
Hallo, ich nehme an du sprichst das Widget von chris1284 an, ich habe aber ein eigenes widget_uwz_paul79.js
zu finden hier update_widget_paul79.zip:
https://forum.fhem.de/index.php/topic,37378.msg591642.html#msg591642 (https://forum.fhem.de/index.php/topic,37378.msg591642.html#msg591642)
Aufruf so:
<div data-type="uwz_paul79" data-device="UWZ" data-count="9" data-icon="mini" class="normal shadow"></div>Gruß Paul
Hallo,
ok, da habe ich wohl mit Informationen gegeizt. Sorry dafür.
Ich meinte schon Dein Widget. Das verlinkte hatte ich auch eingebunden.
Habe jetzt gerade aber noch einen Fehler in der Benennung gefunden. Vielleicht war es das ja schon:-)
Kann es gerade nicht sicher sagen, da es heute keine Wetterwarnung gibt.
Falls das Problem nochmal auftritt, meld ich mich nochmal.
Ansonsten Danke.
VG
Marc
Bin mit meinem Design wohl noch nicht wirklich fertig,
aber aufgrund einiger Afragen über PN lade ich einfach mal den aktuellen Stand hoch
Screenshot sieht man hier:
https://forum.fhem.de/index.php/topic,37378.msg672292.html#msg672292
Edit: Eine Info noch dazu.
Bei dem "template_dimmer.html" wird ganz am Anfang ein Bild für die aktuelle Lampe angezeigt.
Das Image Widget holt sich dafür vom Device im FHEM den Inhalt des Readings "ftuiIcon".
Bei mir hat das jede Lampe, welche in FTUI angezeigt werden soll, als Userreading.
Dieses Userreading wählt je nachdem ob die Lampe gerade an oder aus ist einen Bildernamen wie z.B. "bulb_on" oder "bulb_off".
Zu finden sind die Bilder im Zip im Unterverzeichnis "img".
Edit2: Damit man sich das besser vorstellen kann, hab ich mal noch ein Screenshot von dem Inhalt aus "template_dimmer.html" hier am Post angehängt.
Vielen dank für die Daten. Jetzt suche ich nur noch ein paar Icons von dir :)
Der Footer sieht sehr leer aus ohne: data-icon="thyraz-office" und so weiter
thyraz-ftui-font ist leider auch nur 0 KB groß.
Ups, da hat es wohl irgendwas beim Transfer zerschossen.
Das sollte eigentlich auch ein Verzeichnis und keine Datei sein. ;)
Hab es nochmal neu gezippt und am obigen Post angehängt.
Zitat von: Thyraz am 29 August 2017, 11:05:40
Edit: Eine Info noch dazu.
Bei dem "template_dimmer.html" wird ganz am Anfang ein Bild für die aktuelle Lampe angezeigt.
Das Image Widget holt sich dafür vom Device im FHEM den Inhalt des Readings "ftuiIcon".
Bei mir hat das jede Lampe, welche in FTUI angezeigt werden soll, als Userreading.
Dieses Userreading wählt je nachdem ob die Lampe gerade an oder aus ist einen Bildernamen wie z.B. "bulb_on" oder "bulb_off".
Zu finden sind die Bilder im Zip im Unterverzeichnis "img".
Edit2: Damit man sich das besser vorstellen kann, hab ich mal noch ein Screenshot von dem Inhalt aus "template_dimmer.html" hier am Post angehängt.
Hallo Thyraz, cooles Design fürs Handy :)
Kannst du bitte noch zu den Userreading und Icon ein Beispiel aus deiner fhem.cfg geben.
Gruß Paul
Klaro:
ftuiIcon:pct.* {
my $state = ReadingsVal($name,"pct",0);
if ($state == 0) {
return "bulb_off";
} else {
return "bulb_on";
}
}
Hatte das am Anfang mit dem Switch Widget gemacht,
aber so sind eben auch mehrfarbige Icons möglich.
@Thyraz
Darf man fragen, wie viel Arbeit in dem Frontend steckt (geschätzte Zeit in Stunden)? ;D
Hattest du dabei schon vorher Erfahrung mit HTML und CSS?
Ist nur rein Interesse halber, da ich für mein (immer noch nicht fertiges) UI bestimmt gute 50 Stunden gebraucht habe. Und meins lang nicht so hübsch aussieht wie deins!
ich hatte das schon einmal erwähnt dieses Design ist Super Klasse, aber nichts für HTML Anfänger.
Im Paket fehlen z.B. die ganzen "bootstrap.css" Dateien ich denke ohne diese geht gar nichts...!
Guckt euch erst einmal die index.html an da sieht man eine "lib/bootstrap.min.css" es sind aber ich glaube ca. 4 *.css Dateien und noch weitere bootstrap-*.css.map Dateien.
Kenne ich gar nicht.... also erst einmal richtig mit beschäftigen... ich habe Stunden verbracht und es aufgegeben :) :-\
die bootstrap css und Docus zu den Klassen findet man hier http://getbootstrap.com. Einfach nach lib kopieren und in den Header einbinden.
Ist sehr mächtig und sehr beliebt, aber schon bei dem Satz - ein Grid hat immer 12 Spalten, schalte ich immer ab und denke: Warum einfach, wenn es auch kompliziert geht? ;)
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="stylesheet" href="lib/bootstrap.min.css" />
<link rel="stylesheet" href="css/fhem-tablet-ui.css" />
<script src="js/fhem-tablet-ui.js" defer></script>
<title>FHEM-Tablet-UI</title>
</head>
<body>
<div class="row">
<div class="col-sm-6">
<div class="row">
<div class="col-sm-6 bg-gray">
<div data-type="switch" data-device="GalerieLicht"></div>
<div>Galerie</div>
</div>
<div class="col-sm-6 bg-green">
<div data-type="switch" data-device="GalerieLicht"></div>
<div>Galerie</div>
</div>
</div>
</div>
<div class="col-sm-6 bg-blue">
<div data-type="volume" data-device='AvReceiver' data-get='volume' data-set='volume' class="large" ></div>
<div class="top-narrow-2x">Volume</div>
</div>
</div>
</body>
</html>
Ok, hätte ich das Lib Verzeichnis wohl doch auch noch reinkopieren sollen. ;D
Sorry war gestern ein Schnellschuss, hatte die Dateien schnell per VPN gezogen und hier hochgeladen nachdem ich ein paar Anfragen hatte.
Aber ja, die Bootstrap lib wie von setstate reinkopieren sollte helfen.
Das Bootstrap Grid ist an sich hier ganz gut erklärt.
Verwende außer dem Grid auch nicht wirklich viel von Bootstrap.
https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
Hatte das aber schonmal geschrieben: Bootstrap ist für so ein Design ja kein Muss.
Mit Flexbox gibt es ja sogar eine hier öfters beschriebene Variante die ein responsive Design ermöglicht.
Als ich mit meinem ursprünglichen Design angefangen hab, war davon hier aber eben noch nicht die Rede.
Zitat von: Fixel2012 am 29 August 2017, 23:36:59
@Thyraz
Darf man fragen, wie viel Arbeit in dem Frontend steckt (geschätzte Zeit in Stunden)? ;D
Hattest du dabei schon vorher Erfahrung mit HTML und CSS?
Das ist schwer zu sagen.
Habe aber durchaus einige Erfahrung mit CSS / HTML auch wenn es nicht mein täglich Brot ist.
Die meiste Zeit ging aber definitiv für:
- Verständnis von Link Widget + Templates
- Im Netz nach Heimautomatisierungsscreenshots suchen und zu überlegen wie ich welche Elemente anordnen will
- Farbpalette erstellen
- Icons zeichnen
- Herausfinden wie man eine funktionierende Iconschriftart erstellt
drauf.
Das Umsetzen der einzelnen Seiten und der Templates war hingegen recht schnell erledigt.
Insgesamt sind für mein TabletUI im Laufe des letzten Jahres auch einige Stunden drauf gegangen. ;)
Erstmal vielen Dank für die Dateien Thyraz!
Das Layout sieht super aus!
Zitat von: Thyraz am 29 August 2017, 11:05:40
Damit man sich das besser vorstellen kann, hab ich mal noch ein Screenshot von dem Inhalt aus "template_dimmer.html" hier am Post angehängt.
Eine Frage habe ich zum Slider.
Leider kriege ich den nicht auf die volle bzw. überhaupt eine Breite hin.
Ich habe auch die bootstrap.css und .js-Dateien runtergeladen und eingebunden, aber es bleibt bei dem komisch zusammengestauchten Slider.
Ich habe den Slider auch mal außerhalb von col-xs-10 und col-xs-11 platziert, dann passt es.
Hier ein Bild zur Verdeutlichung, oben der Slider außerhalb des templates und drunter der Slider aus dem Template (den roten Rahmen habe ich reingepackt, damit ich sehe welcher Platz zur Verfügung steht).
Vielleicht hat einer ja eine spontane Idee, was mir noch fehlt. Ansonsten baue ich mir das mal komplett um.
Hallo Paul,
ich muss nochmal fragen.
Bin mit der Anpassung deiner Seiten schon ein ganzes Stück weiter.
Ich Scheiter jedoch gerade am Austausch eines Icons auf der Seite content_system.
Statt data-icons='["fs-cul_868","fs-hue_filled_bridge_v2 fa-blink"]'
würde ich gerne data-icons='["fs-hue_filled_bridge_v2","fs-hue_filled_bridge_v2 fa-blink"]' verwenden.
Mir wird aber kein Icon in ftui angezeigt.
Hast Du nen Tipp, wo mein Fehler liegt?
VG
Marc
Hallo Marc,
ich weiß nur das nicht alle Icons von dem Iconset FS angezeigt werden da sie zu alt sind und bei mir wird es auch nicht angezeigt.
Gruß Paul
Hallo Paul,
vielen Dank für Deine Antwort.
Schade, dann werde ich wohl nach einem anderen Icon suchen müssen.
VG
Marc
@ Thyraz: Herzlichen Dank für den Upload deiner aktualisierten Dateien.
Ich habe jedoch ein kleines Problem. :-) Ich bekomme keinerlei Icons angezeigt. Die WetterIcons sind okay, nachdem ich sie für mich angepasst habe. Aber zum Beispiel das Hintergrundbild des Wohnzimmers, die Icons zu den Lampen etc. werden mir alle nicht angezeigt. Eine Idee woran das liegen könnte? Ich habe auch folgende seltsame Fehlermeldung:
Failed to load resource: Es wurde kein Server mit dem angegebenen Hostnamen gefunden http://piwdmn.fritz.box:8084/fhem/ftui/img/homeoffice.jpg
Wo muss ich denn den Verweis zum lokalen Speicherort der Icons/Bilder verändern?
Vielen Dank für Deine/Eure Hilfe!
du mußt genau das was in der Fehlermeldung (piwdmn.fritz.box) steht durch deine IP oder deinen Namen ersetzen. Dann hat er den Port 8084...
Je nachdem was du nutzt in der Regel ist der WEB FHEMWEB 8083, WEBphone FHEMWEB 8084, WEBtablet FHEMWEB 8085, aber das sollte eigentlich klar sein.
Das mit den Bildern schau dir mal in der fhem-tablet-ui-user.css genau an...! ;) ;)
8) Gestern war es wohl einfach zu viel! :-) Habe da zig mal reingeschaut und wohl jedes mal überlesen! :) :)
Danke Dir!!!
Die Icons unter "content_wohnen.html" zeigt er mir aber leider trotzdem nicht an! Würde gerne die Dimmer durch einfachen "Switch" ersetzen, aber da zerhaut es mir die Seite. Da muss ich mal noch schauen woran das liegt. Ist im gesamten etwas komplizierter als meine bisherige Visu aber ich finde den Ansatz sehr interessant!
Danke nochmal "Thyraz" für den Upload deiner Dateien und das Du diese tolle Visu dem Forum zur Verfügung stellst.
Könntest Du evtl. mir einen Tipp geben wie ich das ändern kann?
Danke!!!
Zitat von: Masterfunk am 11 Februar 2017, 12:17:41
Bin noch bei den Anpassungen wegen der Umstellung auf 2.5
Genau an der Stelle habe ich aktuell Probleme, da die data-substitution nicht mehr geht.
Sobald ich alles wieder richtig am laufen habe, werde ich noch mal alle Dateien zur Verfügung stellen.
Gruß Detlef
@Masterfunk: Konntest Du die Probleme mit Deiner Update-Funktion und Tablet UI >2.5 beheben?
Ich frage mal ganz dreist: Könntest Du den Code dazu posten? Ich würde das liebend gerne übernehmen, scheitere aber gerade an den vielen Codeschnipseln..
Viele Grüße,
Tobi
Hab den Thread gerade erst entdeckt,....
Anbei seht Ihr eine Möglichkeit das UI auf das Nötigste zu reduzieren und dennoch recht viele Komponenten unterzubringen.
Die Nutzung von FTUI auf einem kleinen Tablett bzw. auf dem Smartphone kann ggf. dadurch optimiert/vereinfacht werden.
https://forum.fhem.de/index.php/topic,67141.msg590677.html#msg590677 (https://forum.fhem.de/index.php/topic,67141.msg590677.html#msg590677)
Gruß
Leeloo
Hier mal meine Vorstellung eines Interfaces. Aufgeteilt in Tablet- und mobile Ansicht.
Außerdem noch eine helles und dunkles Theme, dass sich mit klicken auf den Header "MENU" einstellen lässte.
Das Loxone-System hat mich zu dieser Farbwahl inspiriert.
Sehr schick, kannst Du uns die html- und css-Dateien zur Verfügung stellen?
Zitat von: SvenJust am 26 September 2017, 16:31:16
Sehr schick, kannst Du uns die html- und css-Dateien zur Verfügung stellen?
Klar. Muss nur vorher meine persönlichen Daten rauß nehmen. Vorab kann ich aber auf folgende Seite verlinken:
http://ueberueck.com/index.php/fhem-hausautomatisierung/fhem-tablet-ui/ftui-2-6 (http://ueberueck.com/index.php/fhem-hausautomatisierung/fhem-tablet-ui/ftui-2-6)
Hier hab ich die Code-Teile der mobilen Seite her.
Zitat von: Pitcher90 am 26 September 2017, 16:36:03
http://ueberueck.com/index.php/fhem-hausautomatisierung/fhem-tablet-ui/ftui-2-6 (http://ueberueck.com/index.php/fhem-hausautomatisierung/fhem-tablet-ui/ftui-2-6)
Hier hab ich die Code-Teile der mobilen Seite her.
das ist die Seite von Roman1528 hier aus dem Forum.. Roman arbeitet aber total ohne Gridster Elemente mit der Menüleiste ausklappbar und bei dir sieht das so als wenn du beides miteinander vermischt hast. Soll heißen die Felder auf den Screenshots 4-6 sehen so aus als wären sie mit Gridster gemacht.
Kannst du dazu etwas sagen, oder eben mal den Code zeigen dann sieht man es ja... ;) Danke
Ich spiele auch gerade mit den Farben und experimentiere mit "GRÜN" weil mir das Loxone auch sehr gut gefällt ;) :D
Zitat von: moonsorrox am 26 September 2017, 16:59:03
das ist die Seite von Roman1528 hier aus dem Forum.. Roman arbeitet aber total ohne Gridster Elemente mit der Menüleiste ausklappbar und bei dir sieht das so als wenn du beides miteinander vermischt hast. Soll heißen die Felder auf den Screenshots 4-6 sehen so aus als wären sie mit Gridster gemacht.
Kannst du dazu etwas sagen, oder eben mal den Code zeigen dann sieht man es ja... ;) Danke
Ich spiele auch gerade mit den Farben und experimentiere mit "GRÜN" weil mir das Loxone auch sehr gut gefällt ;) :D
Da hast du recht. Das ist aber auch die Desktop- bzw. Tablet-Ansicht. Die Elemente von Roman1528 sind nur in die mobile Ansicht eingeflossen. Wie gesagt, das sind zwei komplett unabhängige UIs. ;)
Heute werde ich es wahrscheinlich nicht mehr schaffen den Code zu veröffentlichen, aber wird nachgereicht ^^
Wie versprochen, hier die Dateien zu meiner Tablet-UI ^^
Viel Spaß damit ;D
Zitat von: Pitcher90 am 27 September 2017, 12:47:39
Wie versprochen, hier die Dateien zu meiner Tablet-UI ^^
Viel Spaß damit ;D
Danke!
Zitat von: Pitcher90 am 27 September 2017, 12:47:39
Wie versprochen, hier die Dateien zu meiner Tablet-UI ^^
Viel Spaß damit ;D
beide Dateien lassen sich nicht entpacken..! hat das noch jemand..?
nutze 7-Zip
Nee, funktioniert alles! Danke!
Gesendet von iPhone mit Tapatalk
ich habe sie jetzt noch einmal runter geladen und mal mit WinRar probiert geht auch nicht.. siehe Screenshot
bei mir hat's mit 7Zip problemlos geklappt
Der Mac hier bekommt es auch nicht entpackt. Vielleicht könnte es jemand nochmal bitte als Zip hochladen.
Vielen Dank.
Bitte schön, hoffe es geht.
edit: das mit dem zip habe ich überlesen, ich hoffe es geht auch mit dem neu gepacktem .rar
Die Daten 1zu1 wieder hochladen hätte ich auch gekonnt, aber trotzdem Danke. ::)
Extra die VMWare angeworfen und mit Winrar ging es dann. Wer nutzt heute eigentlich noch Rar.
Zitat von: gloob am 27 September 2017, 18:30:20
Die Daten 1zu1 wieder hochladen hätte ich auch gekonnt, aber trotzdem Danke. ::)
Extra die VMWare angeworfen und mit Winrar ging es dann. Wer nutzt heute eigentlich noch Rar.
Oops, sorry. Wusste nicht, dass es an der Dateiendung liegt.
Habe es einfach entpackt und neu gepackt.
Hallo,
also mit The Unarchiver auf meinem Mac ohne Probleme entpackt.
Gruß Rolf
Mit TotalCommander ohne Probleme entpackt.
Gruß
Leeloo
geht bei mir immer noch nicht... keine Ahnung warum nicht weder 7-Zip noch WinRAR.. :-\ :-\
dadurch das es beschädigt ist, kann ich es auch nicht in ein Zip konvertieren.. :-\
Probier mal bitte folgendes
Try this ;D
-----> Nachtrag:
??? @gloob war schneller
Super Danke klappt.... ;)
Zitat von: Thyraz am 29 August 2017, 11:05:40
Bin mit meinem Design wohl noch nicht wirklich fertig,
aber aufgrund einiger Afragen über PN lade ich einfach mal den aktuellen Stand hoch
Screenshot sieht man hier:
https://forum.fhem.de/index.php/topic,37378.msg672292.html#msg672292
Edit: Eine Info noch dazu.
Bei dem "template_dimmer.html" wird ganz am Anfang ein Bild für die aktuelle Lampe angezeigt.
Das Image Widget holt sich dafür vom Device im FHEM den Inhalt des Readings "ftuiIcon".
Bei mir hat das jede Lampe, welche in FTUI angezeigt werden soll, als Userreading.
Dieses Userreading wählt je nachdem ob die Lampe gerade an oder aus ist einen Bildernamen wie z.B. "bulb_on" oder "bulb_off".
Zu finden sind die Bilder im Zip im Unterverzeichnis "img".
Edit2: Damit man sich das besser vorstellen kann, hab ich mal noch ein Screenshot von dem Inhalt aus "template_dimmer.html" hier am Post angehängt.
Hi,
in deiner css verweist du auf Bilder die auf deiner fritzbox liegen, könntest du diese auch zur Verfügung stellen?
Gruß
lewej
Hallo lewej,
auf meiner Fritzbox hab ich noch nie Dateien abgelegt. ;)
Ich hab die CSS gerade nicht greifbar hier, aber ich denke das sind Dateien die im Paket mit drin sind.
Nicht verwirren lassen, dass der hostname auf fritz.box endet.
Im Netz der Fritzbox heißen alle Geräte name.fritz.box
Zitat von: Thyraz am 24 Oktober 2017, 21:06:13
Hallo lewej,
auf meiner Fritzbox hab ich noch nie Dateien abgelegt. ;)
Ich hab die CSS gerade nicht greifbar hier, aber ich denke das sind Dateien die im Paket mit drin sind.
Nicht verwirren lassen, dass der hostname auf fritz.box endet.
Im Netz der Fritzbox heißen alle Geräte name.fritz.box
Hi,
hab die Bilder gefunden, der Hostname hat mich in die Irre geführt. Ich finde das Design echt genial. Ich würde gerne die Seite um ein ausklappbares Menü gerne erweitern.
Kannst du mir evtl. einen Tipp geben, wo ich ansetzen müsste.
Sowas in der Art.
Gruß
lewej
Zitat von: Thyraz am 29 August 2017, 11:05:40
Bin mit meinem Design wohl noch nicht wirklich fertig,
aber aufgrund einiger Afragen über PN lade ich einfach mal den aktuellen Stand hoch
Screenshot sieht man hier:
https://forum.fhem.de/index.php/topic,37378.msg672292.html#msg672292
Edit: Eine Info noch dazu.
Bei dem "template_dimmer.html" wird ganz am Anfang ein Bild für die aktuelle Lampe angezeigt.
Das Image Widget holt sich dafür vom Device im FHEM den Inhalt des Readings "ftuiIcon".
Bei mir hat das jede Lampe, welche in FTUI angezeigt werden soll, als Userreading.
Dieses Userreading wählt je nachdem ob die Lampe gerade an oder aus ist einen Bildernamen wie z.B. "bulb_on" oder "bulb_off".
Zu finden sind die Bilder im Zip im Unterverzeichnis "img".
Edit2: Damit man sich das besser vorstellen kann, hab ich mal noch ein Screenshot von dem Inhalt aus "template_dimmer.html" hier am Post angehängt.
Hi,
wie setzt du das Reading ftuiIcon, wäre Super wenn du den code anhängen könntest.
gruß
lewej
Hi lewej,
findet sich hier:
https://forum.fhem.de/index.php/topic,37378.msg678502.html#msg678502
Ist ein Userreading, welches ich bei jedem Gerät hinzufüge welches in TabletUI angezeigt wird.
Für eine Lampe sieht man ja im im verlinkten Post die Logik.
Bei einem Rollladen wären es z.B. 3 Zustände: Icon für Zu, für Offen, und alles dazwischen Icon für Mitte.
Zitat von: Thyraz am 25 Oktober 2017, 07:17:16
Hi lewej,
findet sich hier:
https://forum.fhem.de/index.php/topic,37378.msg678502.html#msg678502
Ist ein Userreading, welches ich bei jedem Gerät hinzufüge welches in TabletUI angezeigt wird.
Für eine Lampe sieht man ja im im verlinkten Post die Logik.
Bei einem Rollladen wären es z.B. 3 Zustände: Icon für Zu, für Offen, und alles dazwischen Icon für Mitte.
Hi Thyraz,
Danke schaue ich mir an. Hast eine Idee wie ich ein Navmenu zusätzlich einfügen könnte, das sich links oder rechts aufrufen lässt?
Gruss
Lewej
Ah sorry, den Post darüber hatte ich übersehen.
nein, kann ich dir leider wenig weiterhelfen.
Hab das selbst noch nie genutzt.
Aber es gab hier im Thread schon ein paar Beispiele für sowas.
Zitat von: Thyraz am 30 August 2017, 07:34:04
Ok, hätte ich das Lib Verzeichnis wohl doch auch noch reinkopieren sollen. ;D
Sorry war gestern ein Schnellschuss, hatte die Dateien schnell per VPN gezogen und hier hochgeladen nachdem ich ein paar Anfragen hatte.
Aber ja, die Bootstrap lib wie von setstate reinkopieren sollte helfen.
Das Bootstrap Grid ist an sich hier ganz gut erklärt.
Verwende außer dem Grid auch nicht wirklich viel von Bootstrap.
https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
Hatte das aber schonmal geschrieben: Bootstrap ist für so ein Design ja kein Muss.
Mit Flexbox gibt es ja sogar eine hier öfters beschriebene Variante die ein responsive Design ermöglicht.
Als ich mit meinem ursprünglichen Design angefangen hab, war davon hier aber eben noch nicht die Rede.
Das ist schwer zu sagen.
Habe aber durchaus einige Erfahrung mit CSS / HTML auch wenn es nicht mein täglich Brot ist.
Die meiste Zeit ging aber definitiv für:
- Verständnis von Link Widget + Templates
- Im Netz nach Heimautomatisierungsscreenshots suchen und zu überlegen wie ich welche Elemente anordnen will
- Farbpalette erstellen
- Icons zeichnen
- Herausfinden wie man eine funktionierende Iconschriftart erstellt
drauf.
Das Umsetzen der einzelnen Seiten und der Templates war hingegen recht schnell erledigt.
Insgesamt sind für mein TabletUI im Laufe des letzten Jahres auch einige Stunden drauf gegangen. ;)
Hallo Thyraz,
ich versuche gerade responsible Gridster Elemente in dein Template einzubauen, klappt aber nicht wirklich. Hast eine welche col anordnung ich verwenden müsste?
Bei mir sieht das ganze etwas zerhauen aus.
hier sind Bilder von horz/vert
Ich würde gerne zwei Reihen mit jeweils 4 Elemtene anordnen(IPAD) und Iphone 8 untereinander.
grüsse
lewej
Zitat von: lewej am 29 Oktober 2017, 12:19:35
ich versuche gerade responsible Gridster Elemente in dein Template einzubauen, klappt aber nicht wirklich.
das kannste vergessen, hatte ich auch schon probiert...! meines Wissens kannst du nur eine Seite mit Gridster Elementen machen oder eben mit Bootstrap
Zitat von: moonsorrox am 29 Oktober 2017, 13:18:22
das kannste vergessen, hatte ich auch schon probiert...! meines Wissens kannst du nur eine Seite mit Gridster Elementen machen oder eben mit Bootstrap
Das müsste doch mit den bootstrap mitteln möglich sein, oder kommt da ftui css und die bootstrap sich in die quere?
Beispiel
https://zellwk.com/blog/from-html-grids-to-css-grids/ (https://zellwk.com/blog/from-html-grids-to-css-grids/)
grundsätzlich geht das (Detail-Probleme sind aber nicht auszuschließen)
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="longpoll" content="1">
<!-- 1=longpoll;0=shortpoll every 30sec -->
<meta name="debug" content="0">
<!-- 1=output to console;0=not output -->
<link rel="stylesheet" href="lib/bootstrap.min.css" />
<link rel="stylesheet" href="css/fhem-tablet-ui.css" />
<script src="js/fhem-tablet-ui.js" defer></script>
<title>FHEM-Tablet-UI</title>
</head>
<body>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-3">
<div data-type="switch" data-device="dummy1"></div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<div data-type="switch" data-device="dummy2"></div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<div data-type="switch" data-device="dummy3"></div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<div data-type="switch" data-device="ftuitest"></div>
</div>
</div>
</body>
</html>
evtl. anstatt der css/fhem-tablet-ui.css nur die css/fhem-tablet-ui-f7.css reinnehmen, die ist minimalistisch
Hallo Community,
habe mein TabletUI auf meinem Server als Livedemo aufbereitet. Nichts besonderes, aber dafür zum selber klicken 😉
--> https://waschto.eu/fhem-und-tabletui-livedemo/ (https://waschto.eu/fhem-und-tabletui-livedemo/)
Gruß Daniel
sehr cool. Das wäre super im Wiki-Einstieg!
wahnsinnig tolle und beindruckende arbeit daniel. respekt und danke für viele ideen.
Hallo zusammen,
nachdem ich vor vier Wochen mit fhem und ftui angefangen habe und bisher nur stiller Mitleser und Nutznießer von Ideen war, möchte ich nun schrittweise meinen aktuellen Entwicklungsstand vorstellen und bin über Feedback / Verbesserungsvorschläge dankbar.
Mein Haupt-Tablet ist ein Trekstor Surftab Theatre 13.3, welches mit dem im Forum beschriebenen genialen Powermanagement über AMAD und Schaltsteckdose ausgestattet ist.
Fhem steuert Intertechno-Rolloschalter (4x) über das Modul ROLLO, Intertechno Schaltsteckdosen (3x), FS20 Schaltsteckdosen (3x). Hinzu kommen 3 Geräte, die nur über Echo Plus gesteuert werden können (ein Ärgernis, dass man nicht auf die Echo Huebridge zugreifen kann).
Ich habe über ha-bridge alle von fhem verwalteten Geräte, den fhem Homestatus und Tablet an/aus über Alexa schaltbar gemacht, dann klappt auch die Steuerung aller Geräte (fhem und Echo Plus) in Gruppen wieder :D, aber nur über Alexa. ("Alexa, Tablet an", "Alexa, Licht aus", "Alexa, Schlafen an") ... Aber zurück zum Thema ...
Mein Tablet UI ist fest auf 1920x1080 Pixel verlötet. An einem Responsive UI für unsere Smartphones und sonstigen Tablets arbeite ich gerade.
Anbei ein Screenshot der Oberfläche des Master-Tablets.
Viele Grüße,
Holger
Hallo zusammen,
wie versprochen, weitere Infos zu meiner Tablet UI Implementierung.
Ich halte es nicht für sinnvoll, Code-Schnipsel ohne eine Erklärung zu posten, deshalb werde ich zunächst mal meine Vorgehensweise erklären.
Phase 1: Ausprobieren
Ich habe, wie vermutlich alle hier, zunächst einmal eine existierende Implementierung kopiert und angepasst. Diese diente vor allem dazu, die bestehenden ftui Widgets und ihre Eigenarten kennen zu lernen.
Das Ergebnis war eine funktionierende Steuerung, die aber visuell und von der Performance her akut zu wünschen übrig ließ. Wenn man ein großes Tablet hat, ist man versucht, irgendwie alles an Info auf eine Seite zu packen, dabei geht schnell die Übersicht verloren und die Nutzerakzeptanz ist schlecht (Stichwort WAF).
Immerhin hat mir diese Phase die Auslagerung wiederkehrender Steuerelemente in Templates gebracht, so dass der Aufbau eines neuen Look&Feel/Layouts eigentlich ziemlich einfach wird.
Phase 2: Professionelle Entwicklung
Da ich als Projekt- und Programmleiter für Webentwicklungen zuständig bin, kenne ich die "best practices" guter Webentwicklung. Ganz wichtig ist hierbei das Wireframing und User Testing, um mit der Zielgruppe an Hand eines Click-Model/Wireframe die Bedienung zu optimieren. Man erstellt ein Konzept und testet das so lange an den Benutzern oder deren Repräsentanten, bis die Bedienung intuitiv und einfach ist.
Meine Zielgruppe ist klein (meine Frau und ich). Also habe ich ein Basiskonzept erstellt und dieses in mehreren Iterationen an meiner Frau getestet.
Das Basiskonzept (siehe Anhang) enthält:
- Layout mit Menubar (1), Content-Bereich (2) und festem Infobereich (3). Bitte benutzt Pagebutton mit prefetch, Pagetab ist auf langsamen Tablets (wie meinem) einfach gruselig langsam.
- Standardisierte Template-Widgets (Licht, Lichtgruppe, Rollo, Rollogruppe, Status-Symbole, Reisezeiten, Trash/Müll, Telefoneintrag, Wettereintrag, HomeStatus ...)
- Bedienung der Einzelgeräte / Gerätegruppen, Gerätegruppen (a) kennen auch den Status "Mixed=Unknown" mit extra Icon. Im Hintergrund arbeitet hier LightScene.
- Einfachste und elegante Rollo-Steuerung (b) mit Circle-Menu (open, closed, half, Notstop), im Hintergrund arbeitet hier ROLLO. Feinere Rollo-Einstellungen macht Alexa ("Alexa, setze Wohnzimmerfenster 60%")
- Schönes Hintergrundbild, bei mir Denali/Alaska, dazu haben wir einen persönlichen Bezug (bester Urlaub ever) --> CSS-Thema
- Elegante Font-Darstellung (thin) --> CSS-Thema
- Konsistente Farben (Farbgebung mit einem gängigen Color-Tool abgestimmt) --> CSS-Thema
Nachdem das Click-Model "abgenommen" war, war eigentlich nicht mehr viel zu tun außer intensives Testen, da die Template-Widgets direkt im Click-Model eingebaut werden konnten.
Phase 2 hat ganze zwei Tage gedauert, allerdings sind die Pages 2,3,4,6 noch optimierungsbedürftig. Hier sind teilweise iFrames eingebunden (Google Calendar, Enigma, Google Maps, foreca) und daran muss ich definitiv noch arbeiten.
Bis demnächst,
Holger
EDIT 1: Ich hoffe, es ist OK, wenn ich meinen Code schrittweise per Edit anhänge.
A) Ein paar Templates:
Rollogruppe - funktioniert mit einem Gerät vom Typ LightScene Edit: Natürlich müssen die 14 Lichtszenen (außer unknown) auch angelegt werden, Fleißarbeit.
<div data-type="circlemenu" class="top-space">
<ul>
<li class="">
<div data-type="symbol" class="large"
data-device="par01"
data-get="state"
data-background-icons='["fa-circle", "fa-circle", "fa-circle", "fa-circle", "fa-circle", "fa-circle", "fa-circle", "fa-circle","fa-circle","fa-circle",
"fa-circle", "fa-circle", "fa-circle","fa-circle","fa-circle"]'
data-icons='["oa-fts_shutter_100", "oa-fts_shutter_50", "oa-fts_window_2w", "mi-import_export", "mi-import_export", "mi-border_clear", "mi-pause_circle_outline",
"oa-fts_shutter_10", "oa-fts_shutter_20", "oa-fts_shutter_30", "oa-fts_shutter_40", "oa-fts_shutter_60", "oa-fts_shutter_70", "oa-fts_shutter_80", "oa-fts_shutter_90"]'
data-states='["closed","half","open", "drive-up", "drive-down", "unknown", "stop", "position-10",
"position-20", "position-30", "position-40", "position-60", "position-70", "position-80", "position-90"]'
data-colors='["white","white", "white", "red", "red", "white", "red", "white", "white", "white", "white", "white", "white", "white", "white"]'
data-background-colors='["mint", "mint", "mint", "white", "white", "mint", "white", "mint", "mint", "mint", "mint", "mint", "mint", "mint", "mint"]'>
</div>
</li>
<li>
<div data-type="push" class="large"
data-device="par01"
data-set-on="scene open"
data-get="state"
data-get-on="open"
data-on-color="white"
data-off-color="gray"
data-on-background-color="mint"
data-off-background-color="white"
data-lock="locked"
data-background-icon="fa-circle"
data-icon="oa-fts_window_2w">
</div>
</li>
<li>
<div data-type="push" class="large"
data-device="par01"
data-set-on="scene half"
data-get="state"
data-get-on="half"
data-on-color="white"
data-off-color="gray"
data-on-background-color="mint"
data-off-background-color="white"
data-lock="locked"
data-background-icon="fa-circle"
data-icon="oa-fts_shutter_50">
</div>
</li>
<li>
<div data-type="push" class="large"
data-device="par01"
data-set-on="scene closed"
data-get="state"
data-get-on="closed"
data-on-color="white"
data-off-color="gray"
data-on-background-color="mint"
data-off-background-color="white"
data-lock="locked"
data-background-icon="fa-circle"
data-icon="oa-fts_shutter_100">
</div>
</li>
</ul>
</div>
<div data-type="label" class="top-space-2x left-space bold">Gruppe</div>
Rollo - funktioniert mit einem Gerät vom Typ ROLLO
<div data-type="circlemenu" class="top-space">
<ul>
<li>
<div data-type="symbol" class="large"
data-device="par01"
data-get="state"
data-background-icons='["fa-circle","fa-circle","fa-circle", "fa-circle", "fa-circle", "fa-circle","fa-circle","fa-circle", "fa-circle", "fa-circle", "fa-circle","fa-circle","fa-circle"]'
data-icons='["oa-fts_shutter_100","oa-fts_shutter_50","oa-fts_window_2w", "oa-fts_shutter_up", "oa-fts_shutter_down", "oa-fts_shutter_10", "oa-fts_shutter_20", "oa-fts_shutter_30", "oa-fts_shutter_40", "oa-fts_shutter_60", "oa-fts_shutter_70", "oa-fts_shutter_80", "oa-fts_shutter_90"]'
data-states='["closed","half","open", "drive-up", "drive-down", "position-10", "position-20", "position-30", "position-40", "position-60", "position-70", "position-80", "position-90"]'
data-colors='["white","white","white", "red", "red", "white", "white", "white", "white", "white", "white", "white", "white"]'
data-background-colors='["mint", "mint", "mint", "white","white", "mint", "mint", "mint", "mint", "mint", "mint", "mint", "mint"]'>
</div>
</li>
<li>
<div data-type="push" class="large"
data-device="par01"
data-set-on="open"
data-get="state"
data-get-on="open"
data-on-color="white"
data-off-color="gray"
data-on-background-color="mint"
data-off-background-color="white"
data-lock="locked"
data-background-icon="fa-circle"
data-icon="oa-fts_window_2w">
</div>
</li>
<li>
<div data-type="push" class="large"
data-device="par01"
data-set-on="half"
data-get="state"
data-get-on="half"
data-on-color="white"
data-off-color="gray"
data-on-background-color="mint"
data-off-background-color="white"
data-lock="locked"
data-background-icon="fa-circle"
data-icon="oa-fts_shutter_50">
</div>
</li>
<li>
<div data-type="push" class="large"
data-device="par01"
data-set-on="closed"
data-get="state"
data-get-on="closed"
data-on-color="white"
data-off-color="gray"
data-on-background-color="mint"
data-off-background-color="white"
data-lock="locked"
data-background-icon="fa-circle"
data-icon="oa-fts_shutter_100">
</div>
</li>
<li>
<div data-type="push" class="large"
data-device="par01"
data-set-on="stop"
data-get="state"
data-get-on="stop"
data-on-color="white"
data-off-color="gray"
data-on-background-color="red"
data-off-background-color="white"
data-background-icon="fa-circle"
data-icon="mi-pause_circle_outline">
</div>
</li>
</ul>
</div>
<div data-type="label" class="top-space-2x left-space thin">par02</div>
EDIT 2 - Mehr Templates
Lichtgruppe - funktioniert mit einem Gerät vom Typ LightScene
<div data-type="switch" class="large"
data-device="par01"
data-set="scene"
data-set-states='["off","on"]'
data-states='["on","off", "unknown"]'
data-colors='["white","gray", "white"]'
data-background-colors='["yellow","white", "yellow"]'
data-icons='["mi-lightbulb_outline","mi-lightbulb_outline", "mi-border_clear"]'>
</div>
<div data-type="label" class="top-space bold">Gruppe</div>
Licht - funktioniert mit einem an/aus Gerät - Schaltsteckdose, z.B. Intertechno, FS20
<div data-type="switch" class="large"
data-device="par01"
data-set-states='["off","on"]'
data-states='["on","off"]'
data-colors='["white","gray"]'
data-background-colors='["yellow","white"]'
data-icons='["mi-lightbulb_outline","mi-lightbulb_outline"]'>
</div>
<div data-type="label" class="top-space thin">par02</div>
Homestatus - funktioniert mit einem Dummy namens HomeStatus Edit: Das Dummy steuert, ggf. im Verbund mit anderen Geräten/Events (Helligkeit, Wetter, Sonnenstand, Außentemperatur, Bewölkungsgrad) Licht und Rollos, aber das würde hier zu weit führen...
<div class="cell">
<table class="top-space" width="100%">
<tr>
<td>
</td>
<td>
<div data-type="symbol" class="bigger"
data-device="HomeStatus"
data-background-icon="fa-circle"
data-states='["Zuhause","Schlafen","Abwesend", ".*"]'
data-icons='["fa-home","fa-bed","fa-automobile","fa-bug"]'
data-colors='["white","white","white","white"]'
data-background-colors='["lightblue","black","gray","gray"]'
data-icon="fa-home">
</div>
</td>
<td>
</td>
</tr>
<tr>
<td width="33%">
<div data-type="push" class="big"
data-device="HomeStatus"
data-set-on="Zuhause"
data-on-color="white"
data-off-color="white"
data-on-background-color="lightblue"
data-off-background-color="white"
data-icon="fa-home">
</div>
<div data-type="label" class="">Zuhause</div>
</td>
<td width="34%">
<div data-type="push" class="big"
data-device="HomeStatus"
data-set-on="Schlafen"
data-on-color="white"
data-off-color="white"
data-on-background-color="black"
data-off-background-color="white"
data-icon="fa-bed">
</div>
<div data-type="label" class="">Schlafen</div>
</td>
<td width="33%">
<div data-type="push" class="big"
data-device="HomeStatus"
data-set-on="Abwesend; set HomeStatus_Auto off"
data-on-color="white"
data-off-color="white"
data-on-background-color="yellow"
data-off-background-color="white"
data-icon="fa-automobile">
</div>
<div data-type="label" class="">Abwesend</div>
<td>
</tr>
</table>
</div>
Reisezeit - funktioniert mit einem Gerät vom Typ TRAFFIC Edit: Natürlich nur mit einem User-Reading "Level", das ist bei mir der Level-of-Service der Route. Die Level 1,2,3 werden in TRAFFIC durch die die aktuelle Reisezeit gesetzt, Beispiel: <=35 Minuten: Level=1 (grünes Auto), <=45 Minuten: Level=2 (gelbes Auto); >45 Minuten: Level=3 (rotes Auto)
<table width="100%">
<tr>
<td colspan="2">
<div data-type="label" class="thin">par02</div>
</td>
</tr>
<tr>
<td width="30%">
<div data-type="symbol" data-get="Level" class="big compressed"
data-device="par01"
data-states='["1","2","3"]'
data-colors='["mint","yellow", "red"]'
data-background-icon=""
data-icons='["fa-automobile","fa-automobile", "fa-automobile"]'>
</div>
</td>
<td width="70%">
<div data-type="label" data-device="par01" data-get="duration_in_traffic" class="big thin"></div>
<div data-type="label" data-device="par01" data-pre-text="(+" data-post-text=")" data-get="delay" class="thin"></div>
</td>
</tr>
</table>
Status (2 Stati, konfigurierbar über Parameter z.B. für on/off oder present/absent (PRESENCE), benutze ich für an/aus Stati für Internet/WLANs/PC/VU+
<div data-type="symbol" data-get="par02" class=""
data-device="par01"
data-get-on="par03"
data-get-off="par04"
data-on-color="white"
data-off-color="gray"
data-on-background-color="lightblue"
data-off-background-color="white"
data-background-icon="fa-circle"
data-icons='["par05","par05"]'>
</div>
<div data-type="label" class="thin">par06</div>
Wetter - kann Temperatur und Wettersymbol von verschiedenen Diensten holen, z.B. Temperatur von Wunderground und Wettersymbol von Proplanta
<ul>
<div data-type="weather" data-device="par01" data-color="par06" data-get="par04" data-imageset="kleinklima" class="cell small narrow"></div>
<div data-type="label" class="cell small par06 top-narrow-2x">par03</div>
<div data-type="label" data-device="par02" data-get="par05" data-unit="%B0C%0A" class="cell bigger thin top-narrow-3x" data-limits='[-50,0]' data-colors='["lightblue","par06"]'></div>
</ul>
Trash - arbeitet mit ABFALL, ich habe 4 Instanzen, für jede Mülltonne eine
<div data-device="par01" data-type="symbol" class="big thin warn left-narrow-2x right-narrow-2x"
data-get="par01_days"
data-get-on='["0","2"]'
data-on-colors='["par02","par02"]'
data-icons='["fa-trash-o warn fa-blink","fa-trash-o warn"]'>
</div>
Zitat von: Pitcher90 am 27 September 2017, 12:47:39
Wie versprochen, hier die Dateien zu meiner Tablet-UI ^^
Viel Spaß damit ;D
Hallo Pitcher90,
ich habe dein Mobile UI für meine Haussteuerung angepasst, war kein Problem, ich war im Prinzip in 3 Stunden mit 6 Content-Pages durch.
Super clean programmiert (HTML5 und CSS), es war eine Freude, das für mich anzupassen.
Daumen hoch.
Gruß,
Holger
Hallo Holger,
ich bin schwer beeindruckt was du in so kurzer Zeit realisiert hast.
Würdest du deinen Code bereitstellen ?
Grüße
Thomas
Hallo Holger,
das gefällt mir sehr gut!
Ich habe nur eine Frage: wird an dem Telefonhörer die Anzahl der Anrufe in Abwesenheit angezeigt? Falls ja:
-dürfte ich die HTMLs haben?
-wie bestätigst du die Anrufe, damit dort wieder eine "0" erscheint?
ich danke dir
da wird sowas wie data-warn="tam1_newMsg" (Reading mit der Anzahl der verpassten Anrufe) drinstehen.
Zitat von: Gunther am 11 Januar 2018, 14:14:25
da wird sowas wie data-warn="tam1_newMsg" (Reading mit der Anzahl der verpassten Anrufe) drinstehen.
tam1_newMsg stellt aber nur die aufgezeichneten Anrufe auf dem Anrufbeantworter da?
Wenn jemand vorher auflegt würde das nicht erfasst werden. Ich nutze zudem leider einen externen Anrufbeantworter der noch eine hübsche blinkende Led hat, falls drauf gesprochen wurde. Geht also nicht, da ich den FB AB nicht nutze ;D - Schade
Du hast Recht, das ist der AB.
Falls Du hier keine Antwort beskommst, gibt es diverse Threads dazu.
z. B. hier kannst Du mal fragen, die der Anzahl-Dummy gefüllt wird:
https://forum.fhem.de/index.php/topic,54593.msg461698.html#msg461698 (https://forum.fhem.de/index.php/topic,54593.msg461698.html#msg461698)
Zitat von: eazy_isi am 11 Januar 2018, 07:01:00
Hallo Holger,
ich bin schwer beeindruckt was du in so kurzer Zeit realisiert hast.
Würdest du deinen Code bereitstellen ?
Grüße
Thomas
Hallo Thomas,
ich war im Urlaub und schaue mal, wann ich den gesamten bereinigten Code bereitstellen kann.
Natürlich ist nichts wirklich absolut neu, hier baut wohl jeder auf Vorarbeiten von anderen auf.
Viele Grüße,
Holger
Zitat von: M.Piet am 11 Januar 2018, 12:47:41
Hallo Holger,
das gefällt mir sehr gut!
Ich habe nur eine Frage: wird an dem Telefonhörer die Anzahl der Anrufe in Abwesenheit angezeigt? Falls ja:
-dürfte ich die HTMLs haben?
-wie bestätigst du die Anrufe, damit dort wieder eine "0" erscheint?
ich danke dir
Hallo,
die verpassten Anrufe werden durch einen Dummy hochgezählt, der per AT-Job in der Nacht zurück gesetzt wird. Das habe nicht ich erfunden, sondern ich habe es irgendwoher kopiert, weiß nicht mehr woher.
Gruß,
Holger
Da ich mein Foto gerade woanders brauchte stelle ich auch mal meins rein.
Umgesetzte Felder:
Außentemp, Innentemp, Anzeige der nächsten Regenzeit, Uhrzeit mit Sonnenauf und untergang, Anzeige der Waschmaschine + Restzeit, Anzeige von 4 Türsensoren ob offen, gekippt, zu, eigene Unwetteranzeige mithilfe des UWZ Moduls (aktuell kein Unwetter daher leer), Anzeige der nächsten 3 Kalendereinträge aus Iphone Kalender + Option per Klick die nächsten 15 zu sehen, Modischalter für Hausautomatiken (Licht, Rollos,...), Bahnanzeige, Anzeige Türklingel (wenn jmd klingelt wird die Klingen rol und ein Zähler zählt hoch + Screenshot) diverse Stromschaltungen, eigen kreierter Müllkalender mit Option rausgestellte Mülltonne anzuharken, Kamera.
Alle anderen Unterseiten sind noch Spielerei im Aufbau.
Falls jmd Tipps Tricks braucht, hat oder whatever gerne nachricht :)
Daneben Schaltet Alexa über eine HA-Bridge die Geräte. Z.B. bei "Alle Geräte aus" werden alle schaltbaren Lichter, meine WLAN-Badradios ausgeschaltet.
@Andre0909: könntest Du evtl. erklären, wie die Quittierung von Mülltonnen bei dir funktioniert?
Hallo, wer gern die Tagesschau in 100 Sekunden als Popup haben möchte kann dieses mal probieren
In die fhem.cfg:
define tagesschau HTTPMOD http://www.tagesschau.de/100sekunden/index.html 300
attr tagesschau userattr reading01Name reading01Regex
attr tagesschau enableControlSet 1
attr tagesschau reading01Name video
attr tagesschau reading01Regex twitter:player" content="(https:\/\/[\w_-]+(?:(?:\.[\w_-]+)+)[\w.,@?^=%&:\/~+#-]*)
attr tagesschau room Experiment
attr tagesschau stateFormat video
define notify_tagesschau notify tagesschau:* {tagesschau()}
attr notify_tagesschau room Experiment
In die 99_myUtils.pm:
sub tagesschau(){
my $url = ReadingsVal("tagesschau","video","");
open(html1,">/opt/fhem/www/tablet/tagesschau_100sec.html") || "die tagesschau_100sec.html nicht gefunden\n";
print html1 "<!DOCTYPE html>\n<html>\n<head>\n<style type=\"text/css\">\nhtml, body { height: 100%; margin: 0; padding: 0; }\n#map { height: 100%; }\n</style>\n</head>\n<body>\n<iframe src=\"$url\" frameborder=\"0\" webkitAllowFullScreen mozallowfullscreen allowFullScreen width=\"800px\" height=\"450px\"></iframe>\n</body>\n</html>";
close(html1)
}
In Tablet UI:
<div class="left-space" data-type="popup" data-mode="fade" data-height="600px" data-width="970px">
<div class=""><div data-type="image" data-url="/fhem/tablet/images/tagesschau.png" class="shadow" data-size="95%"></div>
<div class="dialog">
<header class="large">Tagesschau in 100 Sekunden von <div data-type="label" data-device="tagesschau" data-get="zeit" class=""></div> </header>
<div data-type="iframe" data-device='tagesschau' data-src="tagesschau_100sec.html" data-height="500" data-width="830" class=""></div>
</div>
</div>
</div>
Leider kann der Link nicht direkt aufrufen werden deswegen der Umweg über die 99_myUtils.pm und notify.
Gruß Paul
Zitat von: amenomade am 29 Januar 2018, 08:16:05
@Andre0909: könntest Du evtl. erklären, wie die Quittierung von Mülltonnen bei dir funktioniert?
define AbfallkalenderGoogle Calendar ical url https://calendar.google.com/calendar/ical/************.ics 12000
attr AbfallkalenderGoogle room Kalender
define myAbfall ABFALL AbfallkalenderGoogle
attr myAbfall room Kalender
define Calendar_nachladen at *01:00:00 set AbfallkalenderGoogle reload
define GraueTonne dummy
define BrauneTonne dummy
define GelbeTonne dummy
define Resetschalter dummy
define GraueTonne_AT at *02:00:00 set GraueTonne [myAbfall:AbfallkalenderGoogle_GraueTonne_tage]
define BrauneTonne_AT at *02:00:00 set BrauneTonne [myAbfall:AbfallkalenderGoogle_BrauneTonne_tage]
define GelbeTonne_AT at *02:00:00 set GelbeTonne [myAbfall:AbfallkalenderGoogle_GelbeTonne_tage]
define Tonnen_Reset_notify notify Resetschalter:Reset set GraueTonne [myAbfall:AbfallkalenderGoogle_GraueTonne_tage];;set BrauneTonne [myAbfall:AbfallkalenderGoogle_BrauneTonne_tage];;set GelbeTonne [myAbfall:AbfallkalenderGoogle_GelbeTonne_tage]
meinst du den Code?
In FTUI hab ich halt 3 mal einen Switch, der jeweils die Graue,Braune,Gelbe Tonne anzeigt mit der oben geholten Restzeit.
Beim klick auf den jeweilgen Switch wird ein "set GraueTonne OK" abgefeuert.
In der Anzeige habe ich dann per Switch bei:
2-x die jeweiligen Mülltonnensymbole mit der Zahl,
1 eine blinkende Mülltonne
0 eine Müllabfuhr und
"OK" einen grünen harken mit grüner Kreisumrandung.
Durch den kleinen Button im Header kann ich den "Resetschalter" betätigen, dann werden alle Mülltonnenzahlen wieder beschrieben, sprich der Harken würde wieder rausfliegen da "OK" wieder mit dem Wert der Müllabholung 0-x überschrieben wird (z.B. bei Fehlbetätigung). Ansonsten passiert das um 2 Uhr nachts automatisch
Hallo zusammen,
nachdem ich in einem anderen Thread gebeten wurde den Code von meiner FTUI bereitzustellen, möchte ich das nun hier tun und nicht den anderen Thread dafür missbrauchen.
Das Ganze ist optimiert für eine Full-HD Auflösung. Da gibt es sicherlich noch Optimierungspotential und Vorschläge sind gern willkommen. :)
Ich bin auch noch nicht mit allen Seiten fertig.
Hier noch eine kleine Auswahl an Screenshots.
Nutzen tue ich folgendes Tablet: https://forum.fhem.de/index.php/topic,51191.msg771571.html#msg771571
Grüße
Olli
Hallo,
gutes Design. Wollte mein TabletUI auch mal einen neuen Anstrich verpassen. Im Ursprungs-Beitrag hattest du Bilder mit einem blau unterlegten Rand. Hier ist es jetzt schwarz. Welcher Blauton war das?
Grüße
Stephan
Danke, nee ist kein Blau.
Wurde durch die Handycam verfälscht.
achso... sah aber gut aus. Werd mir das mal mit nem Farbpicker rausholen
Hey octek0815,
das sieht gut aus.
Eine Frage: deine Wolkenanzeige gefällt mir richtig gut, besser als die von mir eingebaute.
Wie hast du die eingebaut?
Auf dem Screenshot sieht man "Windy".
Mit der Forensuche findet sich das:
https://forum.fhem.de/index.php?topic=66475.0
Genau so ist es.
Hallo,
habe eine Frage an Olli. Ich entnehme deinem FTUI, dass du auch eine Gartenbewässerung über FHEM steuerst. Das war für mich überhaupt der Grund warum ich meine bestehende Steuerung gegen FHEM getauscht habe, da ich in diesem Jahr das auch optimieren möchte. Würdest du die RAW-definitionen von FHEM dazu zeigen? Und - es gehört nicht ganz hier nach FHEM: Welche Magnetventiele nimmst du; und wie steuerst du die an. Ich wollte einfach die AC-Trans auf eine Schalt-Steckdose setzen. Danke
Grüße
Peter
Das wird auch mein Projekt für dieses Frühjahr. 8)
Geplant habe ich, Gardena 24V Ventile in eine V3 Ventilbox einzubauen. Zur Steuerung will ich 2 bzw. 4 Adern der 12 poligen Steuerleitung nutzen, die ich vom Schaltkasten zur Terrasse legen lassen habe. Die restlichen Adern sind für die Feuchte- (CQRobot Capacitive Analog Soil Moisture Sensor) und Temperatursensoren (DS18b20 Wasserdichte Temperatur Sensoren Temperaturfühler) gedacht. Den 24V-Trafo will ich direkt im Schaltverteiler einbauen und über dort noch frei Schaltaktoren schalten. Die Steuerung im FHEM dann abhängig von der Regenvorhersage, Feuchtegrad, letztem Bewässerungszeitpunkt und der Tageszeit. Das mache ich aber erst nach der Hardwareinstallation.
Vergraben will ich das 1/2" GARDENA Sprinklersystem, die Düsen und Versenkregner aber von Hunter (die Gardena sollen Schrott sein)
Auch wenn's ein bissl OT wird:
Ich hab meine Gartenbewässerung mit dem Opensprinkler Pi, einem Regensensor, einigen Hunter-Ventilen und 2 Xioami Flower Cares gelöst.
Inzwischen bin ich allerdings der Meinung, dass sich Opensprinkler genauso gut durch die Kombi FHEM und DIY 8-fach Homematicmodul/8-fach Relais vom Chinesen -> http://www.mytechnologie.de/2017/05/20/homematic-8-kanal-relaisplatine-diy/
ersetzen lässt. Kostafastgarnix...
Zitat von: Eisix am 08 Februar 2017, 14:03:30
Hallo,
UPDATE.status ist bei meinem htmlcode nicht relevant für die Warn Anzeige. Geht alles über den CustomReading.
Habe die Readings manuell gesetzt (siehe screenshot) was mir aufgefallen ist, wenn der Wert 0 ist zeigt das Popup keinen Warnkreis an, auf der Hauptseite schon (zweiter screenshot)
Hi Eisix,
sag mal bitte, ich habe in deinen FTUI Screenshots gesehen, dass du Buttons ohne Hintergrundfarbe verwendest? Kannst Du mir bitte sagen, wie ich das data-background-color Attribut füllen muss? Bei mir ist das immer grau.
Schönen Sonntag!
Ronny
Hi Ronny,
Zitat von: FHEMAN am 04 März 2018, 15:51:10
sag mal bitte, ich habe in deinen FTUI Screenshots gesehen, dass du Buttons ohne Hintergrundfarbe verwendest? Kannst Du mir bitte sagen, wie ich das data-background-color Attribut füllen muss? Bei mir ist das immer grau.
ich denke 'transparent' tut das, was Du möchtest (falls ich Dich richtig verstehe).
LG
Christian
Hallo FHEMAN,
ich weiss jetzt nicht genau welchen Button du meinst aber hier mein code für einen Button ohne background-color:
<div data-type="button"
data-device="Unifi"
data-get="-UC_wlan_state"
data-warn="-UC_wlan_users"
data-get-on='["off","ok"]'
data-colors='["blue","#21a000"]'
data-icons='["fa-wifi warn","fa-wifi warn"]'
class="readonly warn"
></div>
Wie du siehst ist für backgroundcolor nichts gesetzt. Falls es so nicht geht und der Tip von choenig mit dem transparent auch nicht geht, kannst du die backgroundcolor auf die gleiche Farbe wie deine Hintergrundfarbe aus der CSS Datei setzen.
Gruß
Eisix
oder er nimmt als Farbe "transparent"
Ah super, "transparent" funktioniert. Ich danke Euch!
Ich hab da mal ne Frage.
Wäre es möglich die Hauptfarbe bei Tag und Nacht per FHEM anzupassen?
Noch mal genauer erklärt.
Tagsüber weißer Hintergrund
Nacht schwarzer Hintergrund oder so?
Gruß Robert
Man kann per FHEM Reading ein CSS File im FTUI aktivieren/deaktivieren.
In der night-theme.css könnte dann Hintergrund usw. überschrieben werden
Finde aber das Beispiel leider gerade nicht dazu.
Hier ein Beispiel
<link rel="stylesheet" href="css/fhem-green-ui.css" data-type="theme" data-device="ftuitest" data-get="state" data-get-on="on" data-get-off="!on" />
Zitat von: setstate am 03 März 2018, 10:55:40
Das wird auch mein Projekt für dieses Frühjahr. 8)
Geplant habe ich, Gardena 24V Ventile in eine V3 Ventilbox einzubauen. Zur Steuerung will ich 2 bzw. 4 Adern der 12 poligen Steuerleitung nutzen, die ich vom Schaltkasten zur Terrasse legen lassen habe. Die restlichen Adern sind für die Feuchte- (CQRobot Capacitive Analog Soil Moisture Sensor) und Temperatursensoren (DS18b20 Wasserdichte Temperatur Sensoren Temperaturfühler) gedacht. Den 24V-Trafo will ich direkt im Schaltverteiler einbauen und über dort noch frei Schaltaktoren schalten. Die Steuerung im FHEM dann abhängig von der Regenvorhersage, Feuchtegrad, letztem Bewässerungszeitpunkt und der Tageszeit. Das mache ich aber erst nach der Hardwareinstallation.
Vergraben will ich das 1/2" GARDENA Sprinklersystem, die Düsen und Versenkregner aber von Hunter (die Gardena sollen Schrott sein)
Falls einer von euch Interesse an Beregnung hat .... habe mich da die letzten 2 Jahre durchgequält und denke eine auch von der Steuerung her annehmbare Lösung gebastelt zu haben. Hardwareseitig alles Hunter (besonders die MP Rotator Köpfe mit den passenden Versenkern funktionieren gut und bisher ohne Ausfälle) und Schaltung über HomematicWired 12/7 und 2/2 Schaltaktoren (wobei man da natürlich nehmen kann was man will). fhem.cfg und tabletUI kann ich bei Bedarf gerne nachreichen. Will mir jetzt nur nicht die Arbeit machen, wenn ihr eure eigenen Lösungen einsetzt. Ach so, was bei mir als Beregner benannt ist sind immer ganze Kreise die an verschiedenen Stellen insgesamt 3ha Felder, Beete, Bäume bewässern. Das auf Pumpenleistung und Solaranlage anzupassen hat zum Teil seltsame Blüten getrieben (siehe Startzeitpunkt nach Sonnenelevation, Zusammenfassung von verschiedenen Kreisen,usw). :D
Hi,
hatte bisher noch keine Verwendung für eine Screensaver-URL Seite in Fully. Das hat sich gestern mit diesem (https://forum.fhem.de/index.php/topic,85690.msg780809.html#msg780809) Thread geändert.
Die Umsetzung der Restzeitanzeige des Timers unter der Uhr gibt's hier. (https://forum.fhem.de/index.php/topic,82631.msg762946.html#msg762946)
Mir gefällt's nicht nur, ich find's genial, wer was mit anfangen kann, bitte:
<li data-row="1"
data-col="1"
data-sizex="1"
data-sizey="1">
<div class="vbox items-center">
<div data-type="label"
data-device="du_Wordclock"
data-get="zeit"
class="gigantic thin">
</div>
<div data-type="label"
data-device="EG_Echo_Wohnzimmer"
data-hide-on="0"
data-get="timer_remainingtime"
data-substitution="toDate().hhmmss()"
class="grande thin top-space">
</div>
</div>
</li>
Gruß
Thomas
Zitat von: holle75 am 11 März 2018, 12:37:45
Falls einer von euch Interesse an Beregnung hat .... habe mich da die letzten 2 Jahre durchgequält und denke eine auch von der Steuerung her annehmbare Lösung gebastelt zu haben. Hardwareseitig alles Hunter (besonders die MP Rotator Köpfe mit den passenden Versenkern funktionieren gut und bisher ohne Ausfälle) und Schaltung über HomematicWired 12/7 und 2/2 Schaltaktoren (wobei man da natürlich nehmen kann was man will). fhem.cfg und tabletUI kann ich bei Bedarf gerne nachreichen. Will mir jetzt nur nicht die Arbeit machen, wenn ihr eure eigenen Lösungen einsetzt. Ach so, was bei mir als Beregner benannt ist sind immer ganze Kreise die an verschiedenen Stellen insgesamt 3ha Felder, Beete, Bäume bewässern. Das auf Pumpenleistung und Solaranlage anzupassen hat zum Teil seltsame Blüten getrieben (siehe Startzeitpunkt nach Sonnenelevation, Zusammenfassung von verschiedenen Kreisen,usw). :D
Mich würde Deine Lösung sehr Interessieren, da ich das auch jetzt im Frühjahr vorhabe.
Danke
ZitatFalls einer von euch Interesse an Beregnung hat
Neue Ideen und Ansätze sind immer interessant.
LG
Hallo Jewe, mrfloppy fhem.cfg Ausschnitt und ftui Dateien anbei. in die cfg müßt ihr euch reinbeißen, recht komplex. Habe ich auch nur dank viel Hilfe (besonders von Per und Damian) im DOIF-Forum hinbekommen. in der cfg sind auch noch die Automatismen für die Pumpen mit drinnen. Falls kein Bedarf einfach eliminieren.
Gruß
H.
ps: die auskommentierten "set" Befehle muß man einmal durchlaufen lassen, damit die Variablen belegt sind. Ach so, lasse mich auch noch über LMS/SB-Player sprachlich informieren was gerade läuft. Das braucht man vielleicht auch nicht.
pps. Hoppala, wenn man dann mal wieder den Code durchgeht: Das ganze ist auch noch bezüglich Regen mit meiner Wetterstation kombiniert. Müßt ihr mal schauen, welche Info (Wettervorhersage?) bei euch dann passen könnte. Oder raus damit.
ppps: Die Definition der zusammenlaufenden Kreise, die ganzen Zeiten und Automatismen, habe ich aus Platzgründen nicht mit in ftui gepackt. Das geht dann nur im Webend. Braucht man aber auch nur 1-2 mal im Jahr zu ändern.
pppps: ftui ist bei mir responsive und der Screenshot zeigt die "PC-Variante" ... auf dem Mobile rückt sich das alles schön "nach-unten-hin" ein.
ppppps. (langsam werden die pppppp..... blöd. Egal) zur Erklärung von dem ganzen. Man kann jeden Kreis manuell schalten, ausschalten, oder in die Automatik einbeziehen. Was wie zusammen läuft kann man im Webend definieren. Ebenfalls (Pumpenleistung) welche Kreise zb ein zweites mal mit einem kleineren Kreis zusammenlaufen sollen. Das macht auch für einen Wasserhausanschluss Sinn, weil der Wasserdruck auch hier nicht reichen könnte.
Die Automatik an sich ist abhängig vom bisherigen Regen der letzten zwei Tage, dem Sonnenstand oder der Uhrzeit, etc.
Die Pumpen werden je nach Anwesenheit/Beregnung läuft an und abgeschaltet, oder wenn die Beregnung , zb im Winter nicht läuft, kann ich die Brunnenpumpe Mittags laufen lassen um nur die Zisterne zu befüllen.
Ansonsten gibts noch einigen Special-Schabernack der mit gerade nicht einfällt :D ... findet man in der cfg.
p....: bezüglich der Pumpen: Um Überlast zu verhindern schaltet die Brunnenpumpe bei einem bestimmten Strombedarf auf dem Gelände durch andere Verbraucher (Solaranlage) vorübergehend aus. Dies betrifft nicht die Zisternenpumpe. Wasservorrat reicht aber für ca. eine Stunde Beregnung und bis dahin läuft dann die Brunnenpumpe auch wieder an.
In der cfg ist somit auch eine Solar-Stromverbrauch-Optimierung mit drinnen versteckt wers brauchen kann.
Hallo,
anbei Bilder von meinem Tablet-UI. Als Tab habe ich ein Lenove Tab A2 verwendet und habe mir dann aus einem massiven Schneidebrett einen schönen Rahmen gefräst. :)
Grüße
Kalle
Guten Abend,
versuche gerade das tablet UI von
Zitatfhem-ftui-user-demos/user-demos/nesges/
einzufügen.
aber verstehe das nicht genau wie muss man die Ordner Struktur kopieren, so wie es ist ?
Verzeichnisse
html
php
der Aufruf muss dann über html/index.html
oder php/index.php
allerdings klappt es nicht, auch wenn ich die html komplett ins tablet Verzeichnis kopiere. Irgendwas mache ich falsch.
Danke
Hallo zusammen,
Nachdem ich vor einigen Monaten versprochen hatte, meinen UI Code zu veröffentlichen, tue ich das hiermit.
Allerdings habe ich inzwischen ein Redesign vorgenommen, basierend auf einem besseren Verständnis der Widgets und User Feedback (meine Frau).
Ich habe versucht, ein Tablet/App artiges Look & Feel zu verwirklichen und nur jeweils wirklich relevante Informationen anzuzeigen. Also exzessiver Gebrauch von data-hide :-)
Desweiteren habe ich die alternativen Funktionen von Pagebutton genutzt, um ZWEI Anzeigefelder zu bespielen. Hier geht der default/return Mechanismus flöten, das stört mich aber nicht groß.
Das Hintergrundbild (ja: Geschmackssache) ist so gewählt, dass weiße Schrift überall zu lesen ist, ohne klobige Hintergrund-Felder anzeigen zu müssen. Die transparenten Felder in den Bereichen 2) und 4) dienen lediglich der optischen Strukturierung.
In einigen Seiten für 2) und 4) gibt es einen weiteren Pagebutton für "Experte","Wetter Details" und "Reisezeitenhistorie". Diese sind mit Absicht nicht im Bereich 1) verfügbar.
BEREICHE:
1) Aktueller Status (Schnellanzeige) über Pagebuttons. Die Pagebuttons sind live-Anzeigen für Sammelstati und gleichzeitig echte Pagebuttons (Klick=Anzeige einer Seite in 2) oder 4))
2) Steuerungsbereich. Hier werden Seiten für Licht, Rollos und Heizung eingeblendet.
3) Zentraler Infobereich, Anzeige Homestatus (Circlemenu), Uhr und Live-Wetter. Temperatur kommt vom Außentemperaturfühler der Heizung im tiefsten Schatten, Wettericon kommt von Wunderground:condition)
4) Infobereich für Termine, Anrufe, Netzwerk z.B. NAS, FB, PC, TV Box, Sicherheit, Verkehr, Wetter
5) Notification Bereich: Hier werden relevante Infos eingeblendet. Es gibt 16 Notifications für Sicherheit, Waschmaschine/Trockner, Müll, Netzwerk. Eingeblendet wird nur, wenn a) etwas ansteht (Müll) oder b) ein Zustand Aufmerksamkeit erfordert (z.B. Tür auf, Waschmaschine läuft, PC läuft, NAS Fehler, kein Internet, etc.)
Die Antwortzeiten auf meinem Billig-13 Zoll-Trekstor haben sich seit dem Redesign auch verbessert. Auch ist für die kleinen Steuer- und Info-Seiten in 2) und 4) kein "prefetch" erforderlich, was einen kompletten Reload der Steuerung sehr beschleunigt.
Ach ja, und das webserving ist auf einen apache2 umgezogen, was das Cashing von Inhalten in Fully deutlich verbessert. Das bemerkt man besonders bei einem Reload in Fully. Hier bitte beachten, dass in der index.html die Referenz auf die FHEM-URL gesetzt werden muss, sonst kommen keine FHEM-Stati an.
<meta name="fhemweb_url" content="http(s)://192.168.x.x:8083/fhem">
AUSGEWÄHLTE FEATURES:
a) Waschmaschine / Trockner smart gemacht durch EDIPLUG. Stromverbrauch=Status
b) Batterie-/Sabotagewarnungen für Türsensoren werden dynamisch eingeblendet und durch Klick zurückgesetzt.
c) Waschmaschine/Trockner zeigen im Betrieb und bei Fertig eine laufende Zeit an.
d) Pagebuttons mit "warn"-Feature zeigen eine Zahl (Anzahl Termine heute, Anzahl verpasste Anrufe heute, Anzahl Netzwerkstörungen, Anzahl Sicherheitsvorfälle, Anzahl Wetterwarnungen)
e) Live-Status Pagebuttons wie oben beschrieben.
f) Blinken besonders kritischer Notifications (Tür auf, Waschmaschine fertig, Mülltonne heute raus, wie gehabt).
g) Sparsamer Einsatz von charts, die machen das UI langsam.
h) Kombibutton für dimmbares Licht: switch+controller verschmolzen zu einem Button.
i) Expertensteuerung für Heizung über BSB-LAN.
HTML-Code und CSS sind angehängt. Die "Traffic"-Pages habe ich mit Absicht entfernt.
Viel Spaß damit,
Holger
EDIT: Für die chart Widgets fehlt die angepasste css-Datei. Der Standard-Hintergrund passt nicht zu meinem Design. Diese css-Datei ist aber nicht "updatefest", so dass ich darauf verzichtet habe, diese beizupacken. Bekommt ihr sicher alleine hin.
Ich bitte auch um Feedback von denen, die auf dieser Code-Basis aufbauen wollen. In jeder FTUI-Implementierung gibt es "Dreckecken". Ich hatte z.B. ein Layouting-Problem mit UWZ, daher ist die Wetter-Page eine Größe kleiner in der Breite. Bei "richtiger" Größe erschien im Desktop-Browser plötzlich ein Scrollbalken, wenn das UWZ Widget vorhanden war. Möglicherweise ein (Rundungs)fehler bei der Berechnung der Elementgrößen.
EDIT2: Die Krönung des Look&Feel wären jetzt natürlich noch geschmackvolle Multicolor Icon-Fonts. Dafür müsste ich aber *vermutlich* ein schnelleres Tablet haben.
EDIT3: Eins noch: Ich habe mir die Mühe gemacht, die condition von Wunderground auf die entsprechenden wi-Icons zu mappen. Falls jemand das benutzt und feststellt, dass etwas für unsere Breiten Relevantes fehlt, bitte hier posten. Ich habe mal frech angenommen, dass bei uns keine Staub- und Sandstürme gemeldet werden, habe aber vielleicht noch was vergessen. DANKE
Hallo setstate, danke für den Daumen hoch.
Ich baue u.a. natürlich auf deiner exzellenten Arbeit auf :D
Immer cool zu sehen, was andere auf dem aufbauen, was man selbst in die Welt gesetzt hat, nicht wahr?
Zitat von: octek0815 am 25 Februar 2018, 11:53:07
Hallo zusammen,
nachdem ich in einem anderen Thread gebeten wurde den Code von meiner FTUI bereitzustellen, möchte ich das nun hier tun und nicht den anderen Thread dafür missbrauchen.
Das Ganze ist optimiert für eine Full-HD Auflösung. Da gibt es sicherlich noch Optimierungspotential und Vorschläge sind gern willkommen. :)
Ich bin auch noch nicht mit allen Seiten fertig.
Hier noch eine kleine Auswahl an Screenshots.
Nutzen tue ich folgendes Tablet: https://forum.fhem.de/index.php/topic,51191.msg771571.html#msg771571
Grüße
Olli
Ich versuche gerade das Abfallmodul in FTUI vernünftig anzeigen zu lassen... ???
Habe aber das Problem das bei 2 Abholungen an einem Tag die Zweite davon nicht angezeigt wird.Im Google Kalender habe ich zwei ganztägige Termine mit Papier und Restmüll eingetragen, der Termin von Restmüll wird aber erst angezeigt an dem Tag an dem er einzeln ist.In 55 Tagen! >:(
Jetzt habe ich auf deinem ersten Screenshot gesehen das Du auch zwei Abholungen an einem Tag hast.
Daher hier meine Frage, wie muss ich den Kalender einrichten damit ich die richtigen Readings bekomme?
Danke Thomas
Zitat von: Murph am 11 April 2018, 09:54:44
Ich versuche gerade das Abfallmodul in FTUI vernünftig anzeigen zu lassen... ???
Habe aber das Problem das bei 2 Abholungen an einem Tag die Zweite davon nicht angezeigt wird.Im Google Kalender habe ich zwei ganztägige Termine mit Papier und Restmüll eingetragen, der Termin von Restmüll wird aber erst angezeigt an dem Tag an dem er einzeln ist.In 55 Tagen! >:(
Jetzt habe ich auf deinem ersten Screenshot gesehen das Du auch zwei Abholungen an einem Tag hast.
Daher hier meine Frage, wie muss ich den Kalender einrichten damit ich die richtigen Readings bekomme?
Danke Thomas
mach am besten einen eigenen Thread auf oder frage unter dem Abfallmodul, da hier meistens nur User-Demos bereit gestellt werden, da wird dir sicher schneller geholfen
Zitat von: Murph am 11 April 2018, 09:54:44
Ich versuche gerade das Abfallmodul in FTUI vernünftig anzeigen zu lassen... ???
Habe aber das Problem das bei 2 Abholungen an einem Tag die Zweite davon nicht angezeigt wird.Im Google Kalender habe ich zwei ganztägige Termine mit Papier und Restmüll eingetragen, der Termin von Restmüll wird aber erst angezeigt an dem Tag an dem er einzeln ist.In 55 Tagen! >:(
Jetzt habe ich auf deinem ersten Screenshot gesehen das Du auch zwei Abholungen an einem Tag hast.
Daher hier meine Frage, wie muss ich den Kalender einrichten damit ich die richtigen Readings bekomme?
Danke Thomas
Ich habe das so gelöst, dass ich vier Instanzen des ABFALL Moduls definiert habe, für jede Mülltonne eine. Jede ABFALL-Instanz filtert sich nur "seine" Termine aus dem Google-Kalender heraus. Damit ist ausgeschlossen, dass mehr als ein relevanter Termin pro Tag entsteht.
Gruß,
Holger
Hallo und guten Tag
Tolle Sache, nur meine Icons sind zu groß
Gruß
Zitat von: hermann258 am 13 April 2018, 11:46:50
Tolle Sache, nur meine Icons sind zu groß
Gruß
Wenn das ein Statement sein soll, ist die Sache damit ja erledigt. Andernfalls: Falls Du Deinen (auf das Wesentliche abgespeckten) Code und ein Screenshot mitlieferst, steigt die Wahrscheinlichkeit hilfreicher Hinweise.
Hallo
Danke für deinen Beitrag Ulm32b
Gruß Hermann
Hallo,
ich bin absoluter Neuling im Bereich Fhem und TabletUi und versuche hier zu lernen. Bin immerwieder erstaunt was da so alles geht und was ihr da alles zusammenbaut. Mist, finde den "Daumenganzhoch-Icon" nicht. Bei mir scheitert es schon in den Anfängen. Und da bin ich auch schon mal bei meinem dringlichsten Problem. Beim Zusammenbau meinerTabletUi habe ich die Bereiche Wetter, Müll und Lichtschalter eingebaut. Oder besser probiere damit rum. Das Wetter hat ganz gut geklappt, aber beim Müll und Lichtschalter habe ich das Problem, daß sich die Icons untereinander und nicht nebeneinander aufreihen. Sie gehen zu schalten und zeigen auch das Richtige an. Platz ist an sich auch genügend.
Wo ist da mein Fehler? Was und wie muß ich das hier zeigen, damit mal jemand mir den Fehler zeigen kann?
Gruß Jens
Probiere mal zwischen den Symbolen ein einzufügen das sollte den Zeilenumbruch verhindern.
Vg eddie
Hallo meddie,
leider weis ich mit dem " " nicht so richtig um zugehen. Vor Allem nicht wohin damit. Bei mir sehen die einzelnen Tonnen so aus:
<div data-type="symbol" data-device="Muelltonnen" data-get="LeerungBiotonne_days" data-background-icons="fa-circle"
data-states='["0","1","2"]' data-icons='["fa-trash warn fa-spin","fa-trash warn","fa-trash warn"]'
data-background-colors='["#262626"]' data-warn-background-colors='["#262626"]' data-colors='["#2dce55"]' ></div
Funktionieren an sich auch. Nur halt untereinander und nicht wie geplant alle 4 nebeneinander. das Gleiche passiert noch in einem anderen Bereich.
Gruß Jens
Zitat von: NoPlan12 am 13 Mai 2018, 21:35:03
leider weis ich mit dem " " nicht so richtig um zugehen.
das kommt zwischen den divs rein bei zwei Mülltonen sollte es dann so aussehen:
<div data-type="symbol" data-device="Muelltonnen" data-get="LeerungBiotonne_days" data-background-icons="fa-circle"
data-states='["0","1","2"]' data-icons='["fa-trash warn fa-spin","fa-trash warn","fa-trash warn"]'
data-background-colors='["#262626"]' data-warn-background-colors='["#262626"]' data-colors='["#2dce55"]' ></div>
<div data-type="symbol" data-device="Muelltonnen" data-get="LeerungResttonne_days" data-background-icons="fa-circle"
data-states='["0","1","2"]' data-icons='["fa-trash warn fa-spin","fa-trash warn","fa-trash warn"]'
data-background-colors='["#262626"]' data-warn-background-colors='["#262626"]' data-colors='["#2dce55"]' ></div>
VG Eddie
irgendwie war es das auch nicht. Dann war leider nur noch die erste Tonne zu sehen.
Jetzt habe ich versucht den Zustand wieder herzustellen. Nun sieht es so aus.
Es wäre hilfreich dein HTML Code zu sehen.
class="inline" oder mit Tabelle / Zellen (class="cell") arbeiten
@ meddie,
die ganze Seite in eine Textdatei oder alles hier in das Textfeld?
Also das ist der Bereich "Müll".
<li data-row="9" data-col="7" data-sizex="4" data-sizey="2" >
<header>Müll</header>
<div class="sheet">
<div class="row">
<div class="cell">
<div data-type="symbol" data-device="Muelltonnen" data-get="LeerungBiotonne_days" data-background-icons="fa-circle"
data-states='["0","1","2"]' data-icons='["fa-trash warn fa-spin","fa-trash warn","fa-trash warn"]'
data-background-colors='["#262626"]' data-warn-background-colors='["#262626"]' data-colors='["#2dce55"]' ></div<
</div>
<div class="cell">
<div data-type="symbol" data-device="Muelltonnen" data-get="LeerungPapiertonne_days" data-background-icons="fa-circle"
data-states='["0","1","2"]' data-icons='["fa-trash warn fa-spin","fa-trash warn","fa-trash warn"]'
data-background-colors='["#262626"]' data-warn-background-colors="#262626" data-colors='["#4286f4"]'></div<
</div>
<div class="cell">
<div data-type="symbol" data-device="Muelltonnen" data-get="LeerungGelbeTonne_days" data-background-icons="fa-circle"
data-states='["0","1","2"]' data-icons='["fa-trash warn fa-spin","fa-trash warn","fa-trash warn"]'
data-background-colors='["#262626"]' data-warn-background-colors="#262626" data-colors='["#efef15"]' ></div<
</div>
<div class="cell">
<div data-type="symbol" data-device="Muelltonnen" data-get="LeerungHausmuelltonne_days" data-background-icons="fa-circle"
data-states='["0","1","2"]' data-icons='["fa-trash warn fa-spin","fa-trash warn","fa-trash warn"]'
data-background-colors='["#262626"]' data-warn-background-colors="#262626" data-colors='["#8c8c8c"]' ></div<
</div>
</div>
</div>
</li>
</div<??
Übrigens: dieses Thread ist für User-Demos, nicht für Problemlösung gedacht.
Boah peinlich....danke das war es.
kann passieren
Zitat von: hsepm am 28 März 2018, 20:45:38
Hallo zusammen,
Nachdem ich vor einigen Monaten versprochen hatte, meinen UI Code zu veröffentlichen, tue ich das hiermit.
Allerdings habe ich inzwischen ein Redesign vorgenommen, basierend auf einem besseren Verständnis der Widgets und User Feedback (meine Frau).
Ich habe versucht, ein Tablet/App artiges Look & Feel zu verwirklichen und nur jeweils wirklich relevante Informationen anzuzeigen. Also exzessiver Gebrauch von data-hide :-)
Desweiteren habe ich die alternativen Funktionen von Pagebutton genutzt, um ZWEI Anzeigefelder zu bespielen. Hier geht der default/return Mechanismus flöten, das stört mich aber nicht groß.
Das Hintergrundbild (ja: Geschmackssache) ist so gewählt, dass weiße Schrift überall zu lesen ist, ohne klobige Hintergrund-Felder anzeigen zu müssen. Die transparenten Felder in den Bereichen 2) und 4) dienen lediglich der optischen Strukturierung.
Hi hsepm, sehr coole Arbeit. Ich verusche gerade die UI auf meinem Raspberry Touchpanel einzurichten.
Könntest du mir eventuell einen Tipp geben, wie ich die größe/Auflösung anpassen kann, so das mir der Inhalt vernüftig auf dem 7 Zoll Display mit 800x480 px angezeigt werden kann?
Vorab schon mal Danke
Hallo,
ich wollte mein TabletUi nun mal auf einem Tablet ausprobieren um mal ein Gefühl dafür zu bekommen, wie sich das denn von einem 20 zoll Monitor auf einem 9 Zoll Tablet so darstellt. Dazu habe ich nach Anleitung die Tasker App, die securesettings App, die Fully Kisok Browser App und den Motion Detector installiert. In der Anleitung sah das wie immer easy aus, nur bei mir klappt es nicht so recht. Wenn ich die Fully App öffne bekomme ich folgende Fehlermeldung "net::ERR_CONNCTION_RESET" . Wenn ich die Website Adresse in den Chrombrowser eingebe, bekomme ich aber ein Verbindung zu meinem TabletUi. Wie kann ich das lösen? oder wie habt Ihr das umgesetzt.
Hat jemand ein Idee. Danke schon mal.
Gruß Jens
Hallo Jens,
dieser Thread hier dient dazu, dass User ihre TabletUI Variationen vorstellen können, und andere sich wiederum Ideen für Ihre Lösung sammeln können.
Wenn Du ein Problem hast, bitte ein eigenes Thema öffnen, falls Du zu deinem Problem kein anderes Thema findest. (Hier im Forum gibt es zu fast allen ein Thema und eine Lösung)
VG Eddie
Zitat von: octek0815 am 25 Februar 2018, 11:53:07
Hallo zusammen,
nachdem ich in einem anderen Thread gebeten wurde den Code von meiner FTUI bereitzustellen, möchte ich das nun hier tun und nicht den anderen Thread dafür missbrauchen.
Moin Olli,
kann Du mir bitte verraten wie du das mit den Counts (z.B. dFenster usw.) umgesetzt hast?! :)
Gruß
Dennis
Moin Dennis,
Hier am Beispiel für Fenster und Türen:
du brauchst einen Fenster Dummy...
defmod dFenster_Gesamtstatus dummy
attr dFenster_Gesamtstatus devStateIcon open:fts_window_1w@red closed:fts_window_1w
und ein Tür Dummy...
defmod dTueren_Gesamtstatus dummy
attr dTueren_Gesamtstatus devStateIcon closed:fts_door_right open:fts_door_right@red
Dann benötigst du noch etwas was auf die Events reagiert und was auslöst (DOIF oder Notify)
defmod diWindowDoorOpenCount DOIF ([".*:(open|tilted|closed)$"]) ({WindowDoorOpenCount("$DEVICE", "$EVENT")})
attr diWindowDoorOpenCount do always
attr diWindowDoorOpenCount icon helper_doif
Hier dann noch der Code für die 99_myUtils.pm
# - START - Anzahl offener Fenster und Türen Zählen
sub WindowDoorOpenCount($$) {
#Als Parameter muss der device-Name übergeben werden
my ($dev,$event)=@_;
#Der dummy der verwendet wird, um die offenen Tueren nachzuhalten
my $dummyDoor = 'dTueren_Gesamtstatus';
#Der dummy der verwendet wird, um die offenen Fenster nachzuhalten
my $dummyWindow = 'dFenster_Gesamtstatus';
#Erst mal prüfen, ob das übergebene device überhaupt existiert
if ($dev =~ /[Tt]uersensor/ && $dev ne 'Wohnzimmer_EG_Terrassentuersensor' && $defs{$dev})
{
my $model=AttrVal($dev,'model','');
if ($model eq 'HM-SEC-SCo' || $model eq 'HM-Sec-SC-2')
{
#hole die liste der Fenster, die gerade offen sind
my $openDoors = ReadingsVal($dummyDoor, 'openDoors', '');
my @parts;
@parts = split(/,/, $openDoors) if ($openDoors ne '-');
# wenn die aktuelle Tuer noch nicht in der liste ist -> hinzufuegen
if ($event eq 'open') {
# add element to array if not already there
push(@parts, $dev) unless grep{$_ eq $dev} @parts;
}
elsif ($event eq 'closed') {
# remove element from array
@parts = grep {$_ ne $dev} @parts;
}
# aktualisiere die Readings des dummies
my $openDoorsCount = scalar(@parts);
if ($openDoorsCount > 0) { $openDoors = join(',', @parts); }
else { $openDoors = '-'; }
fhem("setreading $dummyDoor openDoors $openDoors");
fhem("setreading $dummyDoor openDoorsCount $openDoorsCount");
}
} elsif ($dev =~ /[Ff]enstersensor|Terrassentuersensor/ && $defs{$dev})
{
my $model=AttrVal($dev,'model','');
if ($model eq 'HM-SEC-SCo' || $model eq 'HM-SEC-RHS')
{
#hole die liste der Fenster, die gerade offen sind
my $openWindows = ReadingsVal($dummyWindow, 'openWindows', '');
my @parts;
@parts = split(/,/, $openWindows) if ($openWindows ne '-');
# wenn das aktuelle Fenster noch nicht in der liste ist -> hinzufuegen
if ($event eq 'open' || $event eq 'tilted') {
# add element to array if not already there
push(@parts, $dev) unless grep{$_ eq $dev} @parts;
}
elsif ($event eq 'closed') {
# remove element from array
@parts = grep {$_ ne $dev} @parts;
}
# aktualisiere die Readings des dummies
my $openWindowsCount = scalar(@parts);
if ($openWindowsCount > 0) { $openWindows = join(',', @parts); }
else { $openWindows = '-'; }
fhem("setreading $dummyWindow openWindows $openWindows");
fhem("setreading $dummyWindow openWindowsCount $openWindowsCount");
}
}
}
# - STOP - Anzahl offener Fenster und Türen Zählen
Den Code für die FTUI von mir hast du ja bereits.
Grüße
Olli
Ich habe das nun so gelöst..
defmod Monitoring.DOIF.Fenster DOIF ([#".*\.Sensor\.Fenster":state:"open"] > 0)\
(\
set $SELF openWindowsCount [#".*\.Sensor\.Fenster":state:"open"],\
set $SELF openWindowsState open\
)\
DOELSE\
(\
set $SELF openWindowsCount 0,\
set $SELF openWindowsState closed\
)\
attr Monitoring.DOIF.Fenster do always
attr Monitoring.DOIF.Fenster icon helper_doif
attr Monitoring.DOIF.Fenster readingList openWindowsCount openWindowsState
attr Monitoring.DOIF.Fenster room 2.1_Sensoren,9.2_DOIF
attr Monitoring.DOIF.Fenster stateFormat openWindowsState
Zitat von: Andre0909 am 31 Januar 2018, 17:44:03
define AbfallkalenderGoogle Calendar ical url https://calendar.google.com/calendar/ical/************.ics 12000
attr AbfallkalenderGoogle room Kalender
define myAbfall ABFALL AbfallkalenderGoogle
attr myAbfall room Kalender
define Calendar_nachladen at *01:00:00 set AbfallkalenderGoogle reload
define GraueTonne dummy
define BrauneTonne dummy
define GelbeTonne dummy
define Resetschalter dummy
define GraueTonne_AT at *02:00:00 set GraueTonne [myAbfall:AbfallkalenderGoogle_GraueTonne_tage]
define BrauneTonne_AT at *02:00:00 set BrauneTonne [myAbfall:AbfallkalenderGoogle_BrauneTonne_tage]
define GelbeTonne_AT at *02:00:00 set GelbeTonne [myAbfall:AbfallkalenderGoogle_GelbeTonne_tage]
define Tonnen_Reset_notify notify Resetschalter:Reset set GraueTonne [myAbfall:AbfallkalenderGoogle_GraueTonne_tage];;set BrauneTonne [myAbfall:AbfallkalenderGoogle_BrauneTonne_tage];;set GelbeTonne [myAbfall:AbfallkalenderGoogle_GelbeTonne_tage]
meinst du den Code?
In FTUI hab ich halt 3 mal einen Switch, der jeweils die Graue,Braune,Gelbe Tonne anzeigt mit der oben geholten Restzeit.
Beim klick auf den jeweilgen Switch wird ein "set GraueTonne OK" abgefeuert.
In der Anzeige habe ich dann per Switch bei:
2-x die jeweiligen Mülltonnensymbole mit der Zahl,
1 eine blinkende Mülltonne
0 eine Müllabfuhr und
"OK" einen grünen harken mit grüner Kreisumrandung.
Durch den kleinen Button im Header kann ich den "Resetschalter" betätigen, dann werden alle Mülltonnenzahlen wieder beschrieben, sprich der Harken würde wieder rausfliegen da "OK" wieder mit dem Wert der Müllabholung 0-x überschrieben wird (z.B. bei Fehlbetätigung). Ansonsten passiert das um 2 Uhr nachts automatisch
Hi Andre0909,
sehr gelungene Umsetzung mit den Mülltonnen. Kannst du nochmal erklären, wie du auf den Switch die Restlaufzeit des Dummys bekommen hast? Am besten dein FTUI Code dafür.
Gruß,
Tim
Zitat von: octek0815 am 25 Februar 2018, 11:53:07
Hallo zusammen,
nachdem ich in einem anderen Thread gebeten wurde den Code von meiner FTUI bereitzustellen, möchte ich das nun hier tun und nicht den anderen Thread dafür missbrauchen.
Das Ganze ist optimiert für eine Full-HD Auflösung. Da gibt es sicherlich noch Optimierungspotential und Vorschläge sind gern willkommen. :)
Ich bin auch noch nicht mit allen Seiten fertig.
Hier noch eine kleine Auswahl an Screenshots.
Nutzen tue ich folgendes Tablet: https://forum.fhem.de/index.php/topic,51191.msg771571.html#msg771571
Grüße
Olli
Hallo Olli,
mich würden Deine ganzen Statusabfragen, wie z.B. "dBeschattungOnOff", interressieren wie Du die in FHEM gelöst hast. Wäre nett wenn Du den Code zu Verfügung stellen würdest.
Zudem bin ich an einer Lösung interressiert, wie man die Darstellung runterskalieren kann.
Danke und Grüße Gerald
Hey Leute
nach den vielen anfangs Problemen bin ich nun an dem FTUI dran, und wollte es euch nun mal in einer kleinen vorab Version zeigen. Vieleicht hat der eine oder andere ja dadurch Inspiration.
Wie man sehen kann fehlen aber noch ein Paar seiten.
Caleus
Sieht sehr gut aus. [emoji106]
Würdest du uns auch den Code dafür geben, damit man sieht wie du das umgesetzt hast.
Gruß Peter
Hallo Peter
Sehr gerne, ich habe mir als Vorlage das FTUI_Widget_Pagebutton genommen
https://wiki.fhem.de/wiki/FTUI_Widget_Pagebutton (https://wiki.fhem.de/wiki/FTUI_Widget_Pagebutton)
und habe darauf aufgebaut. Hier mal die HTML von der Index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="widget_base_width" content="74">
<meta name="widget_base_height" content="65">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="gridster_disable" content="1">
<meta name="longpoll" content="1"> <!-- 1=longpoll;0=shortpoll every 30sec -->
<meta name="debug" content="0"> <!-- verbose level 1-6 = output to console;0 = not output -->
<meta http-equiv="Cache-Control" content="no-store" />
<link rel="stylesheet" href="lib/jquery.gridster.min.css" />
<link rel="stylesheet" href="css/fhem-tablet-ui.css" />
<link rel="stylesheet" href="lib/font-awesome.min.css" />
<link rel="stylesheet" href="lib/jquery.toast.min.css" />
<link rel="stylesheet" href="css/ftui_chart.css" />
<!-- define your personal style here, it wont be overwritten -->
<!-- link rel="stylesheet" href="css/fhem-green-ui.css" / -->
<!-- link rel="stylesheet" href="css/fhem-tablet-ui-user.css" / -->
<script src="../pgm2/jquery.min.js"></script>
<script src="lib/jquery.toast.min.js"></script>
<script src="lib/jquery.gridster.min.js"></script>
<script src="js/fhem-tablet-ui.js" defer></script>
<title>Home</title>
</head>
<body>
<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="2" data-sizey="7" data-template="menu.html" class="halbTransparent"></li>
<li data-row="1" data-col="1" data-sizex="7" data-sizey="7" ></li>
</ul>
</div>
</body>
</html>
Das hier ist für die Navigation (menu.html):
<li data-row="1" data-col="1" data-sizex="1" data-sizey="2" class="halbTransparent,">
<header>Navigation</header>
<div data-type="pagetab" data-url="wall.html" data-icon="fa-home" class="" data-on-background-color="transparent" data-off-background-color="transparent" data-on-color="#FBB117"></div>Home
<div data-type="pagetab" data-url="wetter.html" data-icon="fas fa-cloud" class="" data-on-background-color="transparent" data-off-background-color="transparent" data-on-color="#FBB117"></div>Wetter
<div data-type="pagetab" data-url="system.html" data-icon="fas fa-desktop" class="" data-on-background-color="transparent" data-off-background-color="transparent" data-on-color="#FBB117"></div>System
<div data-type="pagetab" data-url="Temp.html" data-icon="fas fa-thermometer" class=""></div>Temp
<div data-type="pagetab" data-url="Termine.html" data-icon="fas fa-calendar" class=""></div>Termine
<div data-type="pagetab" data-url="licht.html" data-icon="fa-lightbulb-o" class=""></div>Licht
<div data-type="pagetab" data-url="tanken.html" data-icon="mi-local_gas_station" class=""></div>Tanken
</li>
und das hier ist die Hauptseite, diese wird mit der index.html mit geladen:
<!DOCTYPE html>
<html>
<head></head>
<body>
<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="1" data-sizey="7" data-template="menu.html" class="halbTransparent"></li>
<li data-row="1" data-col="1" data-sizex="4" data-sizey="2" class="halbTransparent ">
<header>Datum und Uhrzeit</header>
<div data-type="clock" data-format="H:i:s" class="great thin"></div>
<div data-type="clock" data-format="d.m.Y" class="bigger thin"></div>
</li>
<li data-row="1" data-col="2" data-sizex="2" data-sizey="2" class="halbTransparent ">
<header>Wetter</header>
<div data-type="weather" data-device="MyWeather" data-get="condition" class="large"></div>
<div data-type="label" data-device="AURIOL_82" data-temp="temperature" data-get="temperature" data-unit="%B0C%0A" class="bigger thin"></div>
<div data-type="label" data-device="MyWeather" data-get="condition" class="thin"></div>
</li>
<li data-row="1" data-col="3" data-sizex="1" data-sizey="2" class="halbTransparent ">
<div data-type="weather" data-device="MyWeather" data-get="fc2_condition" class="cell large"></div>
<div class="inline">
<div data-type="label" data-device="MyWeather" data-get="fc2_low_c" data-unit="%B0C%0A" class="large"></div>
</div>
<div class="inline">
<div data-type="label" data-device="MyWeather" data-get="fc2_high_c" data-unit="%B0C%0A" class=" large"></div>
</div>
<div data-type="label" data-device="MyWeather" data-get="fc2_day_of_week" class="cell bigger thin"></div>
</li>
<li data-row="1" data-col="4" data-sizex="1" data-sizey="2" class="halbTransparent ">
<div data-type="weather" data-device="MyWeather" data-get="fc3_condition" class="cell large"></div>
<div class="inline">
<div data-type="label" data-device="MyWeather" data-get="fc3_low_c" data-unit="%B0C%0A" class="large"></div>
</div>
<div class="inline">
<div data-type="label" data-device="MyWeather" data-get="fc3_high_c" data-unit="%B0C%0A" class=" large"></div>
</div>
<div data-type="label" data-device="MyWeather" data-get="fc3_day_of_week" class="cell bigger thin"></div>
</li>
<li data-row="1" data-col="5" data-sizex="1" data-sizey="2" class="halbTransparent ">
<div data-type="weather" data-device="MyWeather" data-get="fc4_condition" class="cell large"></div>
<div class="inline">
<div data-type="label" data-device="MyWeather" data-get="fc4_low_c" data-unit="%B0C%0A" class="large"></div>
</div>
<div class="inline">
<div data-type="label" data-device="MyWeather" data-get="fc4_high_c" data-unit="%B0C%0A" class="large"></div>
</div>
<div data-type="label" data-device="MyWeather" data-get="fc4_day_of_week" class="cell bigger thin"></div>
</li>
<li data-row="1" data-col="6" data-sizex="1" data-sizey="2" class="halbTransparent ">
<div data-type="weather" data-device="MyWeather" data-get="fc5_condition" class="cell large"></div>
<div class="inline">
<div data-type="label" data-device="MyWeather" data-get="fc5_low_c" data-unit="%B0C%0A" class="large"></div>
</div>
<div class="inline">
<div data-type="label" data-device="MyWeather" data-get="fc5_high_c" data-unit="%B0C%0A" class="large"></div>
</div>
<div data-type="label" data-device="MyWeather" data-get="fc5_day_of_week" class="cell bigger thin"></div>
</li>
<li data-row="1" data-col="7" data-sizex="1" data-sizey="2" class="halbTransparent ">
<div data-type="weather" data-device="MyWeather" data-get="fc6_condition" class="cell large"></div>
<div class="inline">
<div data-type="label" data-device="MyWeather" data-get="fc6_low_c" data-unit="%B0C%0A" class="large"></div>
</div>
<div class="inline">
<div data-type="label" data-device="MyWeather" data-get="fc6_high_c" data-unit="%B0C%0A" class="large"></div>
</div>
<div data-type="label" data-device="MyWeather" data-get="fc6_day_of_week" class="cell bigger thin"></div>
</li>
<li data-row="3" data-col="2" data-sizex="3" data-sizey="2" class="halbTransparent ">
<header>Wunderlist</header>
<div class="thin">
<div class="notransmit" data-type="input" id="sendTask"></div>
<div class="round center" data-type="link" data-width="80" data-height="40" data-color="white" data-background-color="green" data-icon="fas fa-shopping-cart" data-device="WEB_Wunderlist" data-set="addTask" data-value="#sendTask">OK</div>
</div>
</li>
<li data-row="3" data-col="5" data-sizex="8" data-sizey="2" class="halbTransparent ">
<header>Licht</header>
<div class="center">
<div class="inline">
<div data-type="switch" data-device="Licht1" class="large" data-on-background-color="transparent" data-off-background-color="transparent" data-on-color="green"></div>
<div class="thin">Lounge Licht</div>
</div>
<div class="inline left-space-1x">
<div data-type="switch" data-device="WohnzimmerTV" class="large" data-on-background-color="transparent" data-off-background-color="transparent" data-on-color="green"></div>
<div class="thin">TV Wohnzimmer</div>
</div>
<div class="inline left-space-1x">
<div data-type="switch" data-device="wz.licht.decke" class="large" data-on-background-color="transparent" data-off-background-color="transparent" data-on-color="green"></div>
<div class="thin">Led Regal Wohnzimmer</div>
</div>
<div class="inline left-space-1x">
<div data-type="switch" data-device="Funksteckdose.C" class="large" data-on-background-color="transparent" data-off-background-color="transparent" data-on-color="green"></div>
<div class="thin">Küche</div>
</div>
<div class="inline left-space-1x">
<div data-type="switch" data-device="SchlafzimmerTV" class="large" data-on-background-color="transparent" data-off-background-color="transparent" data-on-color="green"></div>
<div class="thin">TV Schlafzimmer</div>
</div>
<div class="inline left-space-1x">
<div data-type="switch" data-device="SchlafzimmerLicht" class="large" data-on-background-color="transparent" data-off-background-color="transparent" data-on-color="green"></div>
<div class="thin">Licht Schlafzimmer</div>
</div>
<div class="inline left-space-1x">
<div data-type="switch" data-device="Ventilator.Warm" data-get="state" data-states='["cmd_1","cmd_2"]' data-icons='["oa-vent_ventilation_level_automatic","oa-vent_ventilation"]' class="large" data-on-background-color="transparent" data-off-background-color="transparent" data-colors='["green","grey"]'></div>
<div class="thin">Ventilator</div>
</div>
</div>
</li>
<li data-row="5" data-col="2" data-sizex="1" data-sizey="3" class="halbTransparent ">
<header>Tür</header>
<div class="inline top-space">
<div data-type="symbol" data-device="NUKIDevice246883369" data-get="battery" data-states='["ok","low"]' data-icons='["fa-battery-4","fa-battery-1 fa-blink"]' data-colors='["green","red"]'></div>
<br>
<div data-type="switch" data-device="NUKIDevice246883369" data-get="state" data-icons='["ftui-door","ftui-door warn"]' data-states='["locked","unlocked"]' data-set-states='["lock","unlock"]' data-colors='["green","red"]' data-on-background-color="transparent" data-off-background-color="transparent"></div>
<br>
<br>
<div data-type="label" class="">Tür</div>
</div>
</li>
<li data-row="5" data-col="4" data-sizex="1" data-sizey="3" class="halbTransparent ">
<header>Aussen</header>
<div class="inline top-space">
<div data-type="symbol" data-device="AURIOL_82" data-get="battery" data-states='["low","ok"]' data-icons='["fa-battery-1","fa-battery-4"]' data-colors='["red","green"]'></div>
<div data-type="label" class="">Sensor</div>
<br>
<br>
<div data-type="switch" data-icon="fas fa-tint" data-device="Funksteckdose.out" class="small" data-on-background-color="transparent" data-off-background-color="transparent" data-on-color="green" ></div>
<div data-type="label" class="">Brunnen</div>
</div>
</li>
<li data-row="5" data-col="6" data-sizex="6" data-sizey="3" class="halbTransparent ">
<header>Home Status</header>
<div class="center">
<div class="inline">
<div class="row">
<div class="big">
<div class="col-1-6">
<div data-type="switch" data-device="Home.Status" data-get-on="Home" data-get-off="!on" -set-off="" class="green" data-icon="fa-home" data-background-icon="fa-square" ></div>
<div data-type="label" class="inline">Home</div>
</div>
<div class="col-1-6">
<div data-type="switch" data-device="Home.Status" data-get-on="Arbeit" data-get-off="!on" data-set-off="" class="red" data-icon="oa-scene_workshop" data-background-icon="fa-square" ></div>
<div data-type="label" class="inline">Arbeit</div>
</div>
<div class="col-1-6">
<div data-type="switch" data-device="Home.Status" data-get-on="Nacht" data-get-off="!on" data-set-off="" class="blue" data-icon="fa-bed" data-background-icon="fa-square" ></div>
<div data-type="label" class="inline">Nacht</div>
</div>
<div class="col-1-6">
<div data-type="switch" data-device="Home.Status" data-get-on="Terrasse" data-get-off="!on" data-set-off="" class="orange" data-icon="oa-scene_terrace" data-background-icon="fa-square" ></div>
<div data-type="label" class="inline">Terrasse</div>
</div>
<div class="col-1-6">
<div data-type="switch" data-device="Home.Status" data-get-on="Urlaub" data-get-off="!on" data-set-off="" class="white" data-icon="mi-beach_access" data-background-icon="fa-square" ></div>
<div data-type="label" class="inline">Urlaub</div>
</div>
<div class="col-1-6">
<div data-type="switch" data-device="Home.Status" data-get-on="Wochenmende" data-get-off="!on" data-set-off="" class="white" data-icon="mi-weekend" data-background-icon="fa-square" ></div>
<div data-type="label" class="inline">WE</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li data-row="5" data-col="5" data-sizex="1" data-sizey="3" class="halbTransparent ">
<header>Tabletten</header>
<div class="center">
<div data-type="switch" data-device="Tabletten.Status1" data-get="state" data-states='["cmd_1","cmd_2"]' data-set-states='["cmd_2","cmd_1"]' data-icon="fa-thumbs-up" data-colors='["red","green"]' data-on-background-color="transparent" data-off-background-color="transparent"></div>
</div>
</li>
<li data-row="5" data-col="12" data-sizex="1" data-sizey="3" class="halbTransparent bg-red">
<header>NOT AUS</header>
<div class="center">
<div data-type="push" data-fhem-cmd="set HomeBot send ACHTUNG NOTAUS wurde ausgelöst.;sleep 3;shutdown" data-icon="fa-power-off" data-color="yellow" data-on-background-color="red" data-off-background-color="red"></div>
</div>
</li>
<li data-row="5" data-col="3" data-sizex="1" data-sizey="3" class="halbTransparent ">
<header>zu Hause</header>
<br/>
<div class="inline top-align">
<div class="row">
<div class="cell">
<div class="small">
<div data-type="symbol" data-device="PatrickBT" data-states='["present","absent"]' data-icons='["fas fa-male","far fa-male"]' data-colors='["green","red"]' class="big"></div>
<div data-type="label" class="">Patrick</div>
<br>
<div data-type="symbol" data-device="NalaBT" data-states='["present","absent"]' data-icons='["fas fa-female","far fa-female"]' data-colors='["green","red"]' class="big"></div>
<div data-type="label" class="">Nala</div>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</body>
</html>
Das ist die seite für das Wetter:
<!DOCTYPE html>
<html>
<head></head>
<body>
<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="1" data-sizey="7" data-template="menu.html" class="halbTransparent"></li>
<li data-row="1" data-col="2" data-sizex="5" data-sizey="5" class="halbTransparent ">
<header>Regenradar</header>
<div class="inline">
<div data-type="image" data-refresh="900" data-height="335" data-url="https://www.dwd.de/DWD/wetter/radar/radfilm_nrw_akt.gif" class="nocache">
</div>
</li>
<li data-row="1" data-col="7" data-sizex="3" data-sizey="5" class="halbTransparent ">
<header>Wind</header>
<div class="inline">
<div class="cell big" data-type="wind_direction" data-device="wetter" data-direction="windDir" data-speed="wind" data-calm="~" data-tickstep="22.5" class="mini"></div>
<div class="cell bigger" data-type="label" data-device="wetter" data-get="wind" data-unit="km/h" data-fix="0"></div>
</div>
</li>
<li data-row="1" data-col="8" data-sizex="2" data-sizey="7" class="halbTransparent ">
<header>Info`s</header>
<div class="inline">
Sichtweite:<br><div class="inline"><div data-type="symbol" data-device="MyWeather" data-get="visibility" class="thin" data-icon="mi-visibility" data-color="White" ></div></div><div class="inline"><div data-type="label" data-device="MyWeather" data-get="visibility" class="thin" data-unit="Km"></div></div><br>
Luftdruck:<br><div class="inline"><div data-type="symbol" data-device="MyWeather" data-get="pressure" class="thin" data-icon="oa-weather_barometric_pressure" data-color="White" ></div></div><div class="inline"><div data-type="label" data-device="MyWeather" data-get="pressure" class="thin" data-unit="hPa"></div></div><br>
UV-Index:<br><div class="inline"><div data-type="symbol" data-device="wetter" data-get="fc0_uv" class="thin" data-icon="fa-sun-o" data-color="White" ></div></div><div class="inline"><div data-type="label" data-device="wetter" data-get="fc0_uv" class="thin" data-icon="fa-sun-o" data-color="White" ></div></div><br>
Feuchte:<br><div class="inline"><div data-type="symbol" data-device="MyWeather" data-get="humidity" class="thin" data-icon="oa-weather_humidity" data-color="White" ></div></div><div class="inline"><div data-type="label" data-device="MyWeather" data-get="humidity" class="thin" data-unit="%"></div></div><br>
Sonnenaufgang:<br><div class="inline"><div data-type="symbol" data-device="Sonnenaufgang" data-get="STATE" class="thin" data-icon="wi wi-sunrise" data-color="White" ></div></div><div class="inline"><div data-type="label" data-device="Sonnenaufgang" data-get="STATE" class="thin" data-icon="wi wi-sunrise"></div></div><br>
Sonnenuntergang:<br><div class="inline"><div data-type="symbol" data-device="Sonnenuntergang" data-get="STATE" class="thin" data-icon="wi wi-sunset" data-color="White" ></div></div><div class="inline"><div data-type="label" data-device="Sonnenuntergang" data-get="STATE" class="thin" data-icon="wi wi-sunset"></div></div>
</div>
</li>
<li data-row="6" data-col="2" data-sizex="2" data-sizey="2" class="halbTransparent ">
<header>Wetter</header>
<div class="inline">
<div data-type="weather" data-device="MyWeather" data-get="condition" class="large"></div>
<div data-type="label" data-device="AURIOL_82" data-temp="temperature" data-get="temperature" data-unit="%B0C%0A" class="bigger thin"></div>
<div data-type="label" data-device="MyWeather" data-get="condition" class="thin"></div>
</div>
</li>
<li data-row="6" data-col="4" data-sizex="2" data-sizey="2" class="halbTransparent ">
<header>Morgens</header>
<div class="inline">
<div data-type="weather" data-device="wetter" data-get="fc0_weatherMorning" class="large"></div>
<div data-type="label" data-device="wetter" data-get="fc0_temp06" data-unit="%B0C%0A" class="large"></div>
<div class="inline">
<div data-type="symbol" data-icon="wi wi-raindrops" class="small" data-color="White" ></div>
</div>
<div class="inline left-narrow">=</div>
<div class="inline">
<div data-type="label" data-device="wetter" data-get="fc0_chOfRain06" data-unit="%" class="large"></div>
</div>
</div>
</li>
<li data-row="6" data-col="6" data-sizex="2" data-sizey="2" class="halbTransparent ">
<header>Mittag</header>
<div data-type="weather" data-device="wetter" data-get="fc0_weatherDay" class="large"></div>
<div data-type="label" data-device="wetter" data-get="fc0_temp12" data-unit="%B0C%0A" class="large"></div>
<div class="inline">
<div data-type="symbol" data-icon="wi wi-raindrops" class="small" data-color="White" ></div>
</div>
<div class="inline left-narrow">=</div>
<div class="inline">
<div data-type="label" data-device="wetter" data-get="fc0_chOfRain12" data-unit="%" class="large"></div>
</div>
</li>
<li data-row="6" data-col="8" data-sizex="2" data-sizey="2" class="halbTransparent ">
<header>Abends</header>
<div data-type="weather" data-device="wetter" data-get="fc0_weatherEvening" class="large"></div>
<div data-type="label" data-device="wetter" data-get="fc0_temp18" data-unit="%B0C%0A" class="large"></div>
<div class="inline">
<div data-type="symbol" data-icon="wi wi-raindrops" class="small" data-color="White" ></div>
</div>
<div class="inline left-narrow">=</div>
<div class="inline">
<div data-type="label" data-device="wetter" data-get="fc0_chOfRain18" data-unit="%" class="large"></div>
</div>
</li>
</div>
</body>
</html>
Sollte der ein oder andere Fehler finden last es mich wissen, nur so wird es besser.
Caleus
P.S. zur zeit bekomme ich leider beim seiten auf ruf immer Retry to connect in 10 seconds
Hallo zusammen,
nachdem ich hier ja vor einiger Zeit mein (fast) vollständiges Tablet-UI gepostet habe, ein kleineres Update, wohin sich das bei mir zwischenzeitlich entwickelt hat.
Im wesentlichen sind das nur Kleinigkeiten, aber falls Interesse besteht, kann ich meine html-Dateien noch mal posten.
1) Layout: Die eingeblendeten Meldungen werden nun unten zentriert und dynamisch gelayoutet.
2) Button-Hintergründe: Sind jetzt echte schattierte Box-Icons
3) Layout: Diverses Feintuning des Flexlayouts der einzelnen pages
4) Hintergrund: Kinooptik
Viele Grüße,
Holger
EDIT:
myftui - neue Version
myFTUI_alt - letzte von mir gepostete Version
die Button die du im ersten Bild darstellst sehen Klasse aus, kannst du sagen wie du sie erstellt hast.?
Zitat von: moonsorrox am 26 Juli 2018, 19:55:17
die Button die du im ersten Bild darstellst sehen Klasse aus, kannst du sagen wie du sie erstellt hast.?
Die Buttons sind von pixabay unter CC0 Lizenz (https://pixabay.com/de/service/terms/#usage). Ich habe sie für meine Zwecke ein wenig mit Photoshop nachbearbeitet.
Einbindung über CSS:
.blue-boxh {
background: url(../images/Box_Blue.png) no-repeat;
width: 256px;
height: 256px;
background-size: contain;
}
und dann im HTML-Code:
<div data-type="symbol" class="great"
data-device="HomeStatus"
data-background-icons='["blue-boxh myshadow2","black-boxh myshadow2","gray-boxh myshadow2","gray-boxh myshadow2"]'
data-icons='["fa-home","fa-bed","fa-automobile","fa-bug"]'
data-states='["Zuhause","Schlafen","Abwesend", ".*"]'
data-color="white">
</div>
EDIT:
Bevor jemand fragt, was myshadow2 ist. Der Name ist historisch, da ich hier mit CSS-Schatten experimentiert habe. Schatten ist aber SEHR CPU-lastig, das kann ich mir bei meinem Trekstor Tablet nicht leisten.
Derzeit ist myshadow2 ein leichter Transparenz-Effekt, d.h. der Hintergrund scheint dezent durch.
.myshadow2 {
opacity: .85 !important;
}
OK vielen Dank, da bin ich dann aber erst mal raus. Habe kein Photoshop und kenne mich auch nicht damit aus.
Die Button habe ich dort auch nicht gefunden, da muss man wohl angemeldet sein..!?
Vielleicht kannst du mal einen Button hier einstellen, denn kann man dann sicher mit Inkscape bearbeiten, dass Programm habe ich aber muss auch damit lernen :-\
Grauer Button: https://pixabay.com/de/button-dr%C3%BCcken-digital-push-3d-1363283/ (https://pixabay.com/de/button-dr%C3%BCcken-digital-push-3d-1363283/)
Verschiedene Farben:
https://pixabay.com/de/button-quadrat-gl%C3%A4nzend-149480/ (https://pixabay.com/de/button-quadrat-gl%C3%A4nzend-149480/)
Ob Photoshop oder Gimp oder anderes, Hauptsache, es geht vom Funktionsumfang über Microsoft Paint hinaus.
@Andre0909: Deine FTUI gefällt mir sehr gut, gibt es irgendwo den html als download bzw würdest du ihn zur Verfügung stellen?
Das ist ja ein Tablet UI und hier sind auch viele schöne Tablets zu sehen. Ich arbeite fast nur mit dem iPhone (6), weil mein Tablet zu alt ist. Gibt es da vergleichbare Sachen von jemandem? Der Bildschirm ist ja um einiges kleiner!
Zitat von: hsepm am 26 Juli 2018, 18:14:14
Im wesentlichen sind das nur Kleinigkeiten, aber falls Interesse besteht, kann ich meine html-Dateien noch mal posten.
Hey, ich hab die alte Version schon etwas für mich angepasst die neue sieht noch eine Nummer schärfer aus SUPER, ich fände es klasse wenn du deine HTML bereit stellen würdest
Zitat von: AET_FHEM am 08 August 2018, 10:25:55
Hey, ich hab die alte Version schon etwas für mich angepasst die neue sieht noch eine Nummer schärfer aus SUPER, ich fände es klasse wenn du deine HTML bereit stellen würdest
Hallo AET_FHEM,
Ich hoffe, dass ich das am Wochenende schaffe.
Gruß,
Holger
Hallo,
habe mal meine Monitoring-Seite überarbeitet.
Gruß
Eisix
Zitat von: Eisix am 10 August 2018, 15:23:48
Hallo,
habe mal meine Monitoring-Seite überarbeitet.
Gruß
Eisix
Das ja mal genial:-)
Was machst du mit dem fhem rollback Button?
Konntest du uns die HTML Daten zu Verfügung stellen.
Danke
Gruß Peter
@SirMarco
führt ein Shell-Script aus welches das letzte Update zurück kopiert.
@Octopus
Kann ich Anfang nächster Woche machen
Gruß
Eisix
Zitat von: hsepm am 10 August 2018, 12:05:51
Hallo AET_FHEM,
Ich hoffe, dass ich das am Wochenende schaffe.
Gruß,
Holger
Here we go. Du musst dir nur eigene 3D-Button-Icons bauen und per CSS einhängen.
Viele Grüße,
Holger
Hallo,
wie zugesagt meine Monitoring-Seite. Bei vielen Sachen sind noch Popups mit Zusatzinformationen.
Bei mir auf dem Mac wird es entpackt. Habe das gleiche nochmals als .zip drangehängt.
export ist ein Ordner der 1_Settings.html enthält und einen Ordner templates mit den Subpages.
Gruß
Eisix
da stimmt irgend etwas nicht mit, wenn du die entpackst zeigt er nur ein export ohne Endung, evtl. sollte Eisix noch etwas dazu schrieben
@Eisix:
Das mal echt Klasse :-) Verrätst du uns mehr über das data-device "UPDATE"?
Internals:
NAME UPDATE
NR 151
STATE OK
TYPE CustomReadings
READINGS:
2018-08-14 18:43:40 ALL 25
2018-08-14 18:43:40 FHEM 23
2018-08-14 18:43:40 FTUI 2
2018-08-14 18:43:40 state OK
Attributes:
event-on-update-reading FHEM,FTUI,ALL
interval 10800
readingDefinitions FHEM:qx(curl -sS http://fhem.de/fhemupdate/controls_fhem.txt| diff - /opt/fhem/FHEM/controls_fhem.txt |grep ">"|grep "UPD"|wc -l),FTUI:qx(wget -qO - https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt| diff - /opt/fhem/FHEM/controls_fhemtabletui.txt |grep ">" |grep "UPD"|wc -l),ALL:{ReadingsNum($name, "FHEM", 0) + ReadingsNum($name, "FTUI", 0)}
Danke :-)
Was für ein Router sitzt hinter dem Netzwerkmonitor?
Zitat von: Eisix am 14 August 2018, 18:51:44
Internals:
NAME UPDATE
NR 151
STATE OK
TYPE CustomReadings
READINGS:
2018-08-14 18:43:40 ALL 25
2018-08-14 18:43:40 FHEM 23
2018-08-14 18:43:40 FTUI 2
2018-08-14 18:43:40 state OK
Attributes:
event-on-update-reading FHEM,FTUI,ALL
interval 10800
readingDefinitions FHEM:qx(curl -sS http://fhem.de/fhemupdate/controls_fhem.txt| diff - /opt/fhem/FHEM/controls_fhem.txt |grep ">"|grep "UPD"|wc -l),FTUI:qx(wget -qO - https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt| diff - /opt/fhem/FHEM/controls_fhemtabletui.txt |grep ">" |grep "UPD"|wc -l),ALL:{ReadingsNum($name, "FHEM", 0) + ReadingsNum($name, "FTUI", 0)}
Das ja schon recht komplex für mich :-)
Habe mir das CustomReading eingebaut. Was sind für den update-ausführen Befehl die vorraussetzungen? der FTUI Update-Button läuft bei mir nicht. Das Device heisst genauso wie bei dir. der "run" Befehl ist mir nicht bekannt
Dank dir
Der Netzwerkmonitor ist eine Kombination der Module Unifi, sysmon und speedtest.
Das mit dem update wurde hier im Thread schon mal erklärt. Sind 4 DOIF und ein dummy. Kann ich dir schicken.
Wollte hier keinen support Thread aufmachen ;)
Da hast du vollkommen recht!
Dann gerne per PN
Zitat von: Caleus am 25 Juli 2018, 05:50:51
Hallo Peter
Sehr gerne, ich habe mir als Vorlage das FTUI_Widget_Pagebutton genommen
https://wiki.fhem.de/wiki/FTUI_Widget_Pagebutton (https://wiki.fhem.de/wiki/FTUI_Widget_Pagebutton)
und habe darauf aufgebaut. Hier mal die HTML von der Index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="widget_base_width" content="74">
<meta name="widget_base_height" content="65">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="gridster_disable" content="1">
<meta name="longpoll" content="1"> <!-- 1=longpoll;0=shortpoll every 30sec -->
<meta name="debug" content="0"> <!-- verbose level 1-6 = output to console;0 = not output -->
<meta http-equiv="Cache-Control" content="no-store" />
<link rel="stylesheet" href="lib/jquery.gridster.min.css" />
<link rel="stylesheet" href="css/fhem-tablet-ui.css" />
<link rel="stylesheet" href="lib/font-awesome.min.css" />
<link rel="stylesheet" href="lib/jquery.toast.min.css" />
<link rel="stylesheet" href="css/ftui_chart.css" />
<!-- define your personal style here, it wont be overwritten -->
<!-- link rel="stylesheet" href="css/fhem-green-ui.css" / -->
<!-- link rel="stylesheet" href="css/fhem-tablet-ui-user.css" / -->
<script src="../pgm2/jquery.min.js"></script>
<script src="lib/jquery.toast.min.js"></script>
<script src="lib/jquery.gridster.min.js"></script>
<script src="js/fhem-tablet-ui.js" defer></script>
<title>Home</title>
</head>
<body>
<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="2" data-sizey="7" data-template="menu.html" class="halbTransparent"></li>
<li data-row="1" data-col="1" data-sizex="7" data-sizey="7" ></li>
</ul>
<>
</body>
</html>
Das hier ist für die Navigation (menu.html):
<li data-row="1" data-col="1" data-sizex="1" data-sizey="2" class="halbTransparent,">
<header>Navigation</header>
<div data-type="pagetab" data-url="wall.html" data-icon="fa-home" class="" data-on-background-color="transparent" data-off-background-color="transparent" data-on-color="#FBB117"><>Home
<div data-type="pagetab" data-url="wetter.html" data-icon="fas fa-cloud" class="" data-on-background-color="transparent" data-off-background-color="transparent" data-on-color="#FBB117"><>Wetter
<div data-type="pagetab" data-url="system.html" data-icon="fas fa-desktop" class="" data-on-background-color="transparent" data-off-background-color="transparent" data-on-color="#FBB117"><>System
<div data-type="pagetab" data-url="Temp.html" data-icon="fas fa-thermometer" class=""><>Temp
<div data-type="pagetab" data-url="Termine.html" data-icon="fas fa-calendar" class=""><>Termine
<div data-type="pagetab" data-url="licht.html" data-icon="fa-lightbulb-o" class=""><>Licht
<div data-type="pagetab" data-url="tanken.html" data-icon="mi-local_gas_station" class=""><>Tanken
</li>
und das hier ist die Hauptseite, diese wird mit der index.html mit geladen:
<!DOCTYPE html>
<html>
<head></head>
<body>
<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="1" data-sizey="7" data-template="menu.html" class="halbTransparent"></li>
<li data-row="1" data-col="1" data-sizex="4" data-sizey="2" class="halbTransparent ">
<header>Datum und Uhrzeit</header>
<div data-type="clock" data-format="H:i:s" class="great thin"><>
<div data-type="clock" data-format="d.m.Y" class="bigger thin"><>
</li>
<li data-row="1" data-col="2" data-sizex="2" data-sizey="2" class="halbTransparent ">
<header>Wetter</header>
<div data-type="weather" data-device="MyWeather" data-get="condition" class="large"><>
<div data-type="label" data-device="AURIOL_82" data-temp="temperature" data-get="temperature" data-unit="%B0C%0A" class="bigger thin"><>
<div data-type="label" data-device="MyWeather" data-get="condition" class="thin"><>
</li>
<li data-row="1" data-col="3" data-sizex="1" data-sizey="2" class="halbTransparent ">
<div data-type="weather" data-device="MyWeather" data-get="fc2_condition" class="cell large"><>
<div class="inline">
<div data-type="label" data-device="MyWeather" data-get="fc2_low_c" data-unit="%B0C%0A" class="large"><>
<>
<div class="inline">
<div data-type="label" data-device="MyWeather" data-get="fc2_high_c" data-unit="%B0C%0A" class=" large"><>
<>
<div data-type="label" data-device="MyWeather" data-get="fc2_day_of_week" class="cell bigger thin"><>
</li>
<li data-row="1" data-col="4" data-sizex="1" data-sizey="2" class="halbTransparent ">
<div data-type="weather" data-device="MyWeather" data-get="fc3_condition" class="cell large"><>
<div class="inline">
<div data-type="label" data-device="MyWeather" data-get="fc3_low_c" data-unit="%B0C%0A" class="large"><>
<>
<div class="inline">
<div data-type="label" data-device="MyWeather" data-get="fc3_high_c" data-unit="%B0C%0A" class=" large"><>
<>
<div data-type="label" data-device="MyWeather" data-get="fc3_day_of_week" class="cell bigger thin"><>
</li>
<li data-row="1" data-col="5" data-sizex="1" data-sizey="2" class="halbTransparent ">
<div data-type="weather" data-device="MyWeather" data-get="fc4_condition" class="cell large"><>
<div class="inline">
<div data-type="label" data-device="MyWeather" data-get="fc4_low_c" data-unit="%B0C%0A" class="large"><>
<>
<div class="inline">
<div data-type="label" data-device="MyWeather" data-get="fc4_high_c" data-unit="%B0C%0A" class="large"><>
<>
<div data-type="label" data-device="MyWeather" data-get="fc4_day_of_week" class="cell bigger thin"><>
</li>
<li data-row="1" data-col="6" data-sizex="1" data-sizey="2" class="halbTransparent ">
<div data-type="weather" data-device="MyWeather" data-get="fc5_condition" class="cell large"><>
<div class="inline">
<div data-type="label" data-device="MyWeather" data-get="fc5_low_c" data-unit="%B0C%0A" class="large"><>
<>
<div class="inline">
<div data-type="label" data-device="MyWeather" data-get="fc5_high_c" data-unit="%B0C%0A" class="large"><>
<>
<div data-type="label" data-device="MyWeather" data-get="fc5_day_of_week" class="cell bigger thin"><>
</li>
<li data-row="1" data-col="7" data-sizex="1" data-sizey="2" class="halbTransparent ">
<div data-type="weather" data-device="MyWeather" data-get="fc6_condition" class="cell large"><>
<div class="inline">
<div data-type="label" data-device="MyWeather" data-get="fc6_low_c" data-unit="%B0C%0A" class="large"><>
<>
<div class="inline">
<div data-type="label" data-device="MyWeather" data-get="fc6_high_c" data-unit="%B0C%0A" class="large"><>
<>
<div data-type="label" data-device="MyWeather" data-get="fc6_day_of_week" class="cell bigger thin"><>
</li>
<li data-row="3" data-col="2" data-sizex="3" data-sizey="2" class="halbTransparent ">
<header>Wunderlist</header>
<div class="thin">
<div class="notransmit" data-type="input" id="sendTask"><>
<div class="round center" data-type="link" data-width="80" data-height="40" data-color="white" data-background-color="green" data-icon="fas fa-shopping-cart" data-device="WEB_Wunderlist" data-set="addTask" data-value="#sendTask">OK<>
<>
</li>
<li data-row="3" data-col="5" data-sizex="8" data-sizey="2" class="halbTransparent ">
<header>Licht</header>
<div class="center">
<div class="inline">
<div data-type="switch" data-device="Licht1" class="large" data-on-background-color="transparent" data-off-background-color="transparent" data-on-color="green"><>
<div class="thin">Lounge Licht<>
<>
<div class="inline left-space-1x">
<div data-type="switch" data-device="WohnzimmerTV" class="large" data-on-background-color="transparent" data-off-background-color="transparent" data-on-color="green"><>
<div class="thin">TV Wohnzimmer<>
<>
<div class="inline left-space-1x">
<div data-type="switch" data-device="wz.licht.decke" class="large" data-on-background-color="transparent" data-off-background-color="transparent" data-on-color="green"><>
<div class="thin">Led Regal Wohnzimmer<>
<>
<div class="inline left-space-1x">
<div data-type="switch" data-device="Funksteckdose.C" class="large" data-on-background-color="transparent" data-off-background-color="transparent" data-on-color="green"><>
<div class="thin">Küche<>
<>
<div class="inline left-space-1x">
<div data-type="switch" data-device="SchlafzimmerTV" class="large" data-on-background-color="transparent" data-off-background-color="transparent" data-on-color="green"><>
<div class="thin">TV Schlafzimmer<>
<>
<div class="inline left-space-1x">
<div data-type="switch" data-device="SchlafzimmerLicht" class="large" data-on-background-color="transparent" data-off-background-color="transparent" data-on-color="green"><>
<div class="thin">Licht Schlafzimmer<>
<>
<div class="inline left-space-1x">
<div data-type="switch" data-device="Ventilator.Warm" data-get="state" data-states='["cmd_1","cmd_2"]' data-icons='["oa-vent_ventilation_level_automatic","oa-vent_ventilation"]' class="large" data-on-background-color="transparent" data-off-background-color="transparent" data-colors='["green","grey"]'><>
<div class="thin">Ventilator<>
<>
<>
</li>
<li data-row="5" data-col="2" data-sizex="1" data-sizey="3" class="halbTransparent ">
<header>Tür</header>
<div class="inline top-space">
<div data-type="symbol" data-device="NUKIDevice246883369" data-get="battery" data-states='["ok","low"]' data-icons='["fa-battery-4","fa-battery-1 fa-blink"]' data-colors='["green","red"]'><>
<br>
<div data-type="switch" data-device="NUKIDevice246883369" data-get="state" data-icons='["ftui-door","ftui-door warn"]' data-states='["locked","unlocked"]' data-set-states='["lock","unlock"]' data-colors='["green","red"]' data-on-background-color="transparent" data-off-background-color="transparent"><>
<br>
<br>
<div data-type="label" class="">Tür<>
<>
</li>
<li data-row="5" data-col="4" data-sizex="1" data-sizey="3" class="halbTransparent ">
<header>Aussen</header>
<div class="inline top-space">
<div data-type="symbol" data-device="AURIOL_82" data-get="battery" data-states='["low","ok"]' data-icons='["fa-battery-1","fa-battery-4"]' data-colors='["red","green"]'><>
<div data-type="label" class="">Sensor<>
<br>
<br>
<div data-type="switch" data-icon="fas fa-tint" data-device="Funksteckdose.out" class="small" data-on-background-color="transparent" data-off-background-color="transparent" data-on-color="green" ><>
<div data-type="label" class="">Brunnen<>
<>
</li>
<li data-row="5" data-col="6" data-sizex="6" data-sizey="3" class="halbTransparent ">
<header>Home Status</header>
<div class="center">
<div class="inline">
<div class="row">
<div class="big">
<div class="col-1-6">
<div data-type="switch" data-device="Home.Status" data-get-on="Home" data-get-off="!on" -set-off="" class="green" data-icon="fa-home" data-background-icon="fa-square" ><>
<div data-type="label" class="inline">Home<>
<>
<div class="col-1-6">
<div data-type="switch" data-device="Home.Status" data-get-on="Arbeit" data-get-off="!on" data-set-off="" class="red" data-icon="oa-scene_workshop" data-background-icon="fa-square" ><>
<div data-type="label" class="inline">Arbeit<>
<>
<div class="col-1-6">
<div data-type="switch" data-device="Home.Status" data-get-on="Nacht" data-get-off="!on" data-set-off="" class="blue" data-icon="fa-bed" data-background-icon="fa-square" ><>
<div data-type="label" class="inline">Nacht<>
<>
<div class="col-1-6">
<div data-type="switch" data-device="Home.Status" data-get-on="Terrasse" data-get-off="!on" data-set-off="" class="orange" data-icon="oa-scene_terrace" data-background-icon="fa-square" ><>
<div data-type="label" class="inline">Terrasse<>
<>
<div class="col-1-6">
<div data-type="switch" data-device="Home.Status" data-get-on="Urlaub" data-get-off="!on" data-set-off="" class="white" data-icon="mi-beach_access" data-background-icon="fa-square" ><>
<div data-type="label" class="inline">Urlaub<>
<>
<div class="col-1-6">
<div data-type="switch" data-device="Home.Status" data-get-on="Wochenmende" data-get-off="!on" data-set-off="" class="white" data-icon="mi-weekend" data-background-icon="fa-square" ><>
<div data-type="label" class="inline">WE<>
<>
<>
<>
<>
<>
</li>
<li data-row="5" data-col="5" data-sizex="1" data-sizey="3" class="halbTransparent ">
<header>Tabletten</header>
<div class="center">
<div data-type="switch" data-device="Tabletten.Status1" data-get="state" data-states='["cmd_1","cmd_2"]' data-set-states='["cmd_2","cmd_1"]' data-icon="fa-thumbs-up" data-colors='["red","green"]' data-on-background-color="transparent" data-off-background-color="transparent"><>
<>
</li>
<li data-row="5" data-col="12" data-sizex="1" data-sizey="3" class="halbTransparent bg-red">
<header>NOT AUS</header>
<div class="center">
<div data-type="push" data-fhem-cmd="set HomeBot send ACHTUNG NOTAUS wurde ausgelöst.;sleep 3;shutdown" data-icon="fa-power-off" data-color="yellow" data-on-background-color="red" data-off-background-color="red"><>
<>
</li>
<li data-row="5" data-col="3" data-sizex="1" data-sizey="3" class="halbTransparent ">
<header>zu Hause</header>
<br/>
<div class="inline top-align">
<div class="row">
<div class="cell">
<div class="small">
<div data-type="symbol" data-device="PatrickBT" data-states='["present","absent"]' data-icons='["fas fa-male","far fa-male"]' data-colors='["green","red"]' class="big"><>
<div data-type="label" class="">Patrick<>
<br>
<div data-type="symbol" data-device="NalaBT" data-states='["present","absent"]' data-icons='["fas fa-female","far fa-female"]' data-colors='["green","red"]' class="big"><>
<div data-type="label" class="">Nala<>
<>
<>
<>
<>
<>
</li>
</ul>
<>
</body>
</html>
Das ist die seite für das Wetter:
<!DOCTYPE html>
<html>
<head></head>
<body>
<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="1" data-sizey="7" data-template="menu.html" class="halbTransparent"></li>
<li data-row="1" data-col="2" data-sizex="5" data-sizey="5" class="halbTransparent ">
<header>Regenradar</header>
<div class="inline">
<div data-type="image" data-refresh="900" data-height="335" data-url="https://www.dwd.de/DWD/wetter/radar/radfilm_nrw_akt.gif" class="nocache">
<>
</li>
<li data-row="1" data-col="7" data-sizex="3" data-sizey="5" class="halbTransparent ">
<header>Wind</header>
<div class="inline">
<div class="cell big" data-type="wind_direction" data-device="wetter" data-direction="windDir" data-speed="wind" data-calm="~" data-tickstep="22.5" class="mini"><>
<div class="cell bigger" data-type="label" data-device="wetter" data-get="wind" data-unit="km/h" data-fix="0"><>
<>
</li>
<li data-row="1" data-col="8" data-sizex="2" data-sizey="7" class="halbTransparent ">
<header>Info`s</header>
<div class="inline">
Sichtweite:<br><div class="inline"><div data-type="symbol" data-device="MyWeather" data-get="visibility" class="thin" data-icon="mi-visibility" data-color="White" ><><><div class="inline"><div data-type="label" data-device="MyWeather" data-get="visibility" class="thin" data-unit="Km"><><><br>
Luftdruck:<br><div class="inline"><div data-type="symbol" data-device="MyWeather" data-get="pressure" class="thin" data-icon="oa-weather_barometric_pressure" data-color="White" ><><><div class="inline"><div data-type="label" data-device="MyWeather" data-get="pressure" class="thin" data-unit="hPa"><><><br>
UV-Index:<br><div class="inline"><div data-type="symbol" data-device="wetter" data-get="fc0_uv" class="thin" data-icon="fa-sun-o" data-color="White" ><><><div class="inline"><div data-type="label" data-device="wetter" data-get="fc0_uv" class="thin" data-icon="fa-sun-o" data-color="White" ><><><br>
Feuchte:<br><div class="inline"><div data-type="symbol" data-device="MyWeather" data-get="humidity" class="thin" data-icon="oa-weather_humidity" data-color="White" ><><><div class="inline"><div data-type="label" data-device="MyWeather" data-get="humidity" class="thin" data-unit="%"><><><br>
Sonnenaufgang:<br><div class="inline"><div data-type="symbol" data-device="Sonnenaufgang" data-get="STATE" class="thin" data-icon="wi wi-sunrise" data-color="White" ><><><div class="inline"><div data-type="label" data-device="Sonnenaufgang" data-get="STATE" class="thin" data-icon="wi wi-sunrise"><><><br>
Sonnenuntergang:<br><div class="inline"><div data-type="symbol" data-device="Sonnenuntergang" data-get="STATE" class="thin" data-icon="wi wi-sunset" data-color="White" ><><><div class="inline"><div data-type="label" data-device="Sonnenuntergang" data-get="STATE" class="thin" data-icon="wi wi-sunset"><><>
<>
</li>
<li data-row="6" data-col="2" data-sizex="2" data-sizey="2" class="halbTransparent ">
<header>Wetter</header>
<div class="inline">
<div data-type="weather" data-device="MyWeather" data-get="condition" class="large"><>
<div data-type="label" data-device="AURIOL_82" data-temp="temperature" data-get="temperature" data-unit="%B0C%0A" class="bigger thin"><>
<div data-type="label" data-device="MyWeather" data-get="condition" class="thin"><>
<>
</li>
<li data-row="6" data-col="4" data-sizex="2" data-sizey="2" class="halbTransparent ">
<header>Morgens</header>
<div class="inline">
<div data-type="weather" data-device="wetter" data-get="fc0_weatherMorning" class="large"><>
<div data-type="label" data-device="wetter" data-get="fc0_temp06" data-unit="%B0C%0A" class="large"><>
<div class="inline">
<div data-type="symbol" data-icon="wi wi-raindrops" class="small" data-color="White" ><>
<>
<div class="inline left-narrow">=<>
<div class="inline">
<div data-type="label" data-device="wetter" data-get="fc0_chOfRain06" data-unit="%" class="large"><>
<>
<>
</li>
<li data-row="6" data-col="6" data-sizex="2" data-sizey="2" class="halbTransparent ">
<header>Mittag</header>
<div data-type="weather" data-device="wetter" data-get="fc0_weatherDay" class="large"><>
<div data-type="label" data-device="wetter" data-get="fc0_temp12" data-unit="%B0C%0A" class="large"><>
<div class="inline">
<div data-type="symbol" data-icon="wi wi-raindrops" class="small" data-color="White" ><>
<>
<div class="inline left-narrow">=<>
<div class="inline">
<div data-type="label" data-device="wetter" data-get="fc0_chOfRain12" data-unit="%" class="large"><>
<>
</li>
<li data-row="6" data-col="8" data-sizex="2" data-sizey="2" class="halbTransparent ">
<header>Abends</header>
<div data-type="weather" data-device="wetter" data-get="fc0_weatherEvening" class="large"><>
<div data-type="label" data-device="wetter" data-get="fc0_temp18" data-unit="%B0C%0A" class="large"><>
<div class="inline">
<div data-type="symbol" data-icon="wi wi-raindrops" class="small" data-color="White" ><>
<>
<div class="inline left-narrow">=<>
<div class="inline">
<div data-type="label" data-device="wetter" data-get="fc0_chOfRain18" data-unit="%" class="large"><>
<>
</li>
<>
</body>
</html>
Sollte der ein oder andere Fehler finden last es mich wissen, nur so wird es besser.
Caleus
P.S. zur zeit bekomme ich leider beim seiten auf ruf immer Retry to connect in 10 seconds
Ganz cool wäre ja auch, die passende CSS datei dazu zu haben, kannst Du die bereitstellen?
Zitat von: Zage am 08 Februar 2017, 11:23:46
Hallo zusammen,
hier ist meine Umsetzung.
Viele Grüße
Zage
Hi Zage,
sieht sehr schick aus! Mich interessiert der Code für die Temperaturanzeigen. Könntest du diesen posten?
Vielen Dank und viele Grüße,
Bernd
Hallo AmunRe
natürlich ich habe die fhem-tablet-ui.css angepasst
kann ich hier nicht mit CODE tag eintragen ist wohl zu viel
Mir gefällt das Deisgn von der Loxne App sehr gut. Hat jemand zufällig schon das Tabletdesign als Tabletui nachbegbaut?
Zitat von: FHEM-Wohnung am 04 Dezember 2018, 16:41:44
Mir gefällt das Deisgn von der Loxne App sehr gut. Hat jemand zufällig schon das Tabletdesign als Tabletui nachbegbaut?
Zeig doch bitte mal ein Bild von der Loxone App.
Also nachgebaut vom Stil/Design
https://youtu.be/ZgeBkBTsfXU
https://youtu.be/jdhL0YZTqz4
Zitat von: hsepm am 12 August 2018, 10:53:36
Here we go. Du musst dir nur eigene 3D-Button-Icons bauen und per CSS einhängen.
Viele Grüße,
Holger
Hallo hsepm,
ich finde deine Tablet Ui super und wollte mit dieser als Vorlage arbeiten.
Jedoch habe ich ein Problem
Wenn ich die ein binde., dann habe ich in bei dem Controll und Info Bereich zu erst nur einen schwarzen Hintergrund. Erst nach dem ich einem die Seiten gewechselt habe, wird mir der Hintergrund transparent angezeigt.
Hast Du eine Idee woran das liegen könnte ?
Vorab schon mal vielen Dank
Zitat von: Dominic am 20 Dezember 2018, 16:16:42
Hallo hsepm,
ich finde deine Tablet Ui super und wollte mit dieser als Vorlage arbeiten.
Jedoch habe ich ein Problem
Wenn ich die ein binde., dann habe ich in bei dem Controll und Info Bereich zu erst nur einen schwarzen Hintergrund. Erst nach dem ich einem die Seiten gewechselt habe, wird mir der Hintergrund transparent angezeigt.
Hast Du eine Idee woran das liegen könnte ?
Vorab schon mal vielen Dank
Schau dir mal die CSS Klassen an, dort wird der Hintergrund samt Transparenz definiert. Ansonsten keine Idee.
Danke für die Antwort. Auf die Idee bin ich dann auch gekommen ::) und das war es auch.
Eine Frage hätte ich noch. Wenn ich via Pagebutton zum Beispiel auf die Lichtseite wechsel, wird mir diese auch angezeigt, nur ändert sich dann die "größe" der Seite so das ich an der Seite und unten Scrollbalken bekomme...Weißt du wie ich das verhindern kann?
Viele Grüße
Zitat von: Dominic am 21 Dezember 2018, 08:56:21
Danke für die Antwort. Auf die Idee bin ich dann auch gekommen ::) und das war es auch.
Eine Frage hätte ich noch. Wenn ich via Pagebutton zum Beispiel auf die Lichtseite wechsel, wird mir diese auch angezeigt, nur ändert sich dann die "größe" der Seite so das ich an der Seite und unten Scrollbalken bekomme...Weißt du wie ich das verhindern kann?
Viele Grüße
Das hatte ich auch manchmal, liegt wohl manchmal an Rundungsfehlern bei der Skalierung. Als Workaround kann man die gridster box der page_... html-Seite kleiner machen als die ensprechende gridster box in der index.html.
Ich werd es mal testen.....ok klappt nicht... muss mal weiter suchen. Danke für deine Hilfe. Wenn ich noch was fragen darf ? :D bei dem dimmbaren Licht, wird mir der Controller-Balken nicht angezeigt. Woran könnte das liegen? Wenn ich ein anderes Widget nehmen geht es aber.
Soweit ich mich erinnern kann, habe ich den Hintergrund des Controller-Balkens als "transparent" definiert. Beim Anschalten sollte er erscheinen, falls die Lampe beim Anschalten den dim-Wert auf 100% setzt.
Ich bin inzwischen auf ein anderes Frontend umgestiegen, das per MQTT angebunden ist, das FTUI-Wissen wird langsam verdrängt, sorry.
Nicht schlimm. Trotzdem Danke.
Hast du mal einen link zu dem neuen Frontend? Bin eh gerade dabei mich ein zu arbeiten, vielleicht dann direkt dadrauf?
Hier nochmal mein Machwerk, das über das letzte Jahr gewachsen ist.
Mir war wichtig nicht zuviele Infos auf einmal auf dem Hauptbildschirm zu haben, daher können Mond, Garage, GästeWlan und Wettervorhersage über Popups aufgerufen werden.
Wind und Luftdruck sind ein Rotor.
@grossmaggul,
sehr schön. Mich würde der Code für die Lautstärke (bzw. Höhen, Tiefen beim AV) interessieren. Ist ja bestimmt mit dem "Spinner Widget" umgesetzt, oder?
Danke und Gruß
Andreas
Hallo grossmaggul,
Super Seiten hast du da aufgebaut, wäre es möglich die ganzen Seitenaufbau's zu veröffentlichen? Um mal zu schauen wie du das umgesetzt hast.
Besonders die Haupt- und Musikseite würde mich interessieren.
Gruß Peter
Danke für den Zuspruch.:-)
Zitat von: Octopus180wäre es möglich die ganzen Seitenaufbau's zu veröffentlichen?
Ja, kann ich machen, muß aber erstmal den persönlichen Kram rausnehmen, kann ein bißchen dauern.
Zitat von: somanschMich würde der Code für die Lautstärke (bzw. Höhen, Tiefen beim AV) interessieren. Ist ja bestimmt mit dem "Spinner Widget" umgesetzt, oder?
Nein, sind slider bzw. switche, code folgt:
<!-- Volume -->
<div class="cell top-align">
<!-- Volume -->
<!-- VolumeDown 3steps -->
<div class="cell inline small"
data-type="switch"
data-device="bz.yamaha_dlna"
data-set-on="volumeDown"
data-set-off="volumeDown"
data-icon="fa-volume-down"
data-on-color="white"
data-off-color="grey"
data-background-icon="none"
data-on-background-color="#2a2a2a"
data-off-background-color="#2a2a2a">
</div>
<!-- Lautstärkeregler -->
<div class ="cell inline horizontal mini"
data-type="slider"
data-device="bz.yamaha_dlna"
data-width="280"
data-height="4"
data-get="volume"
data-set="volume"
data-color="grey">
</div>
<!-- VolumeUp 3steps -->
<div class="cell inline small"
data-type="switch"
data-device="bz.yamaha_dlna"
data-set-on="volumeUp"
data-set-off="volumeUp"
data-icon="fa-volume-up"
data-background-icon="none"
data-on-color="white"
data-off-color="grey"
data-background-icon="fa-square"
data-on-background-color="#2a2a2a"
data-off-background-color="#2a2a2a">
</div>
</div>
<!-- Yamaha Receiver Controls-->
<div class="cell">
<header class="top-space">AV Receiver</header>
<div class="cell">
<!-- Yamaha on/off Indicator -->
<div data-device="bz.yamaha"
data-type="switch"
data-get="power"
data-get-on="on"
data-get-off="off"
data-icon="fa-power-off"
data-background-icon="none"
data-on-color="white"
data-off-color="grey"
data-on-backgroundcolor="none"
data-off-backgroundcolor="none"
class="small inline">
</div>
<!-- Yamaha Eingang-->
<div data-device="bz.yamaha"
data-type="select"
data-items='["server","airplay","hdmi1","hdmi2","audio1","audio2"]'
data-get="input"
data-set="input">
</div>
<div data-type="select"
data-device="bz.yamaha"
data-items='["hallinmunich","hallinvienna","chamber","cellarclub","theroxytheatre","thebottomline","sports","actiongame",
"roleplayinggame","musicvideo","standard","spectacle","sci-fi","adventure","drama","monomovie","surrounddecoder","2chstereo","7chstereo"]'
data-get="dsp"
data-set="dsp"
data-cmd="set">
</div>
<div class="cell inline top-space">
<!-- Treble -->
<div class="left-space small">
<div data-type="label" class="inline">T</div>
<div data-type="slider"
data-device="bz.yamaha"
data-get="treble"
data-set="treble"
data-min="-6"
data-max="6"
data-width="100px"
data-color="grey"
class="mini horizontal inline">
</div>
</div>
<!-- Bass -->
<div class="left-space small">
<div data-type="label" class="inline">B</div>
<div data-type="slider"
data-device="bz.yamaha"
data-get="bass"
data-set="bass"
data-min="-6"
data-max="6"
data-width="100px"
data-color="grey"
class="mini top-space horizontal inline">
</div>
</div>
</div>
</div>
</div> VG
gm
@grossmaggul,
danke für's teilen deines codes. Ich überlege noch, ob ich die Slider nehme oder die jetzige Lösung für meinen "Yamaha AV Receiver" so lasse ;)
Deine Sliderlösung sieht auch gut aus, hatte ich bei mir auch mal, waren mir dann aber irgendwie zu klobig.
Die html Dateien hängen dran.
Danke
@somansch
habe auch einen Yamaha AVR, wie hast du das mit den Szenen und 3D Schaltfelder gemacht?
Das sieht sehr gut aus.
Zitat von: chris76e am 08 Januar 2019, 17:15:38
@somansch
habe auch einen Yamaha AVR, wie hast du das mit den Szenen und 3D Schaltfelder gemacht?
Das sieht sehr gut aus.
Zuerst einmal brauchst du die Bilder aus der "Yamaha App". Diese darf ich hier nicht offiziell teilen, jedoch kannst du sie dir aus der Android-Version extrahieren: https://www.apkmonk.com/app/com.yamaha.av.avcontroller/ (https://www.apkmonk.com/app/com.yamaha.av.avcontroller/)
Mein FTUI habe ich mit Flex und Templates umgesetzt. In der Zip findest du die content.html und die template.html(s). Weiterhin habe ich meine user.css reingepackt für die genutzten Farben, sowie die "hdm-flexbox" Definition als Workaround für prozentuale Aufteilung und Ausrichtung innerhalb der Sections.
Viele Grüße
Andreas
Vielen Dank,
Christian
dürfte ich mal fragen was für nen yamaha avr ihr nutzt?
Benutze den RX-V685.
Haben den aber noch nicht richtig in FHEM eingerichtet.
RX-A850
Der steht aber in einem anderen Zimmer und da reicht es mir den über die normale App oder über die Ferndbedienung zu bedienen.
Zitat von: MCh76 am 09 Januar 2019, 00:08:26
dürfte ich mal fragen was für nen yamaha avr ihr nutzt?
RX-A680
Zitat von: somansch am 08 Januar 2019, 22:55:32
Zuerst einmal brauchst du die Bilder aus der "Yamaha App". Diese darf ich hier nicht offiziell teilen, jedoch kannst du sie dir aus der Android-Version extrahieren: https://www.apkmonk.com/app/com.yamaha.av.avcontroller/ (https://www.apkmonk.com/app/com.yamaha.av.avcontroller/)
Mein FTUI habe ich mit Flex und Templates umgesetzt. In der Zip findest du die content.html und die template.html(s). Weiterhin habe ich meine user.css reingepackt für die genutzten Farben, sowie die "hdm-flexbox" Definition als Workaround für prozentuale Aufteilung und Ausrichtung innerhalb der Sections.
Viele Grüße
Andreas
Hallo Andreas
Wärst du bereit ein paar Screenshots deiner anderen Seiten hier zu posten sowie die entsprechenden Codes zu posten?
Gefällt mir sehr gut und ich würde gerne mein Tablet etwas pimpen. Sieht bei mir nach einem Jahr altgebacken aus....
Gesendet von iPad mit Tapatalk
Zitat von: Mumpitz am 09 Januar 2019, 22:23:53
Hallo Andreas
Wärst du bereit ein paar Screenshots deiner anderen Seiten hier zu posten sowie die entsprechenden Codes zu posten?
Gefällt mir sehr gut und ich würde gerne mein Tablet etwas pimpen. Sieht bei mir nach einem Jahr altgebacken aus....
Gesendet von iPad mit Tapatalk
In Summe sind es über 50 Seiten. Habe ein paar ausgewählte Screenshots gemacht. Falls mehr gewünscht ist, bitte mit dem Seitentitel anfragen. Weiterhin habe ich den gesamten Code anonymisiert und angehängt. Habe auch noch die FHEM.cfg auf Nachfrage angehangen. Dort kann man Nachschauen, wie die FHEM-Devices konfiguriert sind.
PS: Habe das Flex Layout in Kombination mit Templates verwendet, ist somit für jegliche Auflösungen geeignet. Ich nutze es mit iPad, iPhone und Browser. Ein paar Höhen sind für Auflösung des iPads angepasst (1024*768).
Viel Spaß damit
Andreas
@hsepm
ad #1111
auf welches MTQQ Frontend bist Du umgestiegen. Ich verfolge einen ähnlichen Ansatz, bin jedoch noch nicht wirklich fündig geworden.
Zitat von: LudgerR am 12 Januar 2019, 17:11:48
@hsepm
ad #1111
auf welches MTQQ Frontend bist Du umgestiegen. Ich verfolge einen ähnlichen Ansatz, bin jedoch noch nicht wirklich fündig geworden.
Lovelace UI von Home Assistant.
Zitat von: Eisix am 14 August 2018, 19:40:01
Der Netzwerkmonitor ist eine Kombination der Module Unifi, sysmon und speedtest.
Das mit dem update wurde hier im Thread schon mal erklärt. Sind 4 DOIF und ein dummy. Kann ich dir schicken.
Wollte hier keinen support Thread aufmachen ;)
Hallo Eisix,
würdest Du mir bitte auch die DOIF zur Verfügung stellen? Der Rest läuft schon :D. Gefällt mir sehr gut.
Viele Grüße
Jürgen
Hallo Andreas,
würdest Du auch Deine fhem.cfg zur Verfügung stellen?
Ich glaube, dass würde mir sehr helfen.
VG
Marc
Zitat von: PingPong am 10 Februar 2019, 22:45:24
Hallo Andreas,
würdest Du auch Deine fhem.cfg zur Verfügung stellen?
Ich glaube, dass würde mir sehr helfen.
VG
Marc
Hallo Marc,
anbei eine (hoffentlich) anonymisierte fhem.cfg mit fast 2000 Zeilen. Es kann sein, dass dieser Stand nicht 100%ig zu dem geposteten Code passt. Es dient lediglich zum Nachschauen und Verstehen ;)
Viele Grüße
Andreas
Vielen lieben Dank.
Genau dafür war er auch gedacht. :)
Mit Eisix Unterstützung habe ich diese Systemseite gebaut ;D
Viele Grüße
Jürgen
Anbei meine Definitionen:
defmod Update CustomReadings
attr Update devStateStyle style="text-align:right"
attr Update event-on-update-reading FHEM,FTUI,ALL
attr Update group Update
attr Update interval 10800
attr Update readingDefinitions FHEM:qx(curl -sS http://fhem.de/fhemupdate/controls_fhem.txt| diff - /opt/fhem/FHEM/controls_fhem.txt |grep ">"|grep "UPD"|wc -l),FTUI:qx(wget -qO - https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt| diff - /opt/fhem/FHEM/controls_fhemtabletui.txt |grep ">" |grep "UPD"|wc -l),ALL:{ReadingsNum($name, "FHEM", 0) + ReadingsNum($name, "FTUI", 0)}
attr Update room Systemdaten
defmod Update_ALL_DOIF DOIF ([Update_Status:ALL_Update] eq "run")\
(IF ([Update:ALL] gt "0")\
(IF ([Update:FHEM] gt "0")\
(setreading Update_Status FHEM_Update run),\
IF ([[Update:FTUI] gt "0"]) \
(setreading Update_Status FTUI_Update run))\
ELSE\
(setreading Update_Status ALL_Update idle,\
setreading Update_Status FHEM_Update idle,\
setreading Update_Status FTUI_Update idle,\
set Update_Status idle))
attr Update_ALL_DOIF devStateStyle style="text-align:right"
attr Update_ALL_DOIF do always
attr Update_ALL_DOIF group Update
attr Update_ALL_DOIF room Systemdaten
defmod Update_Change_DOIF DOIF ([Update:ALL] gt "0" or [Update:FHEM] gt "0" or [Update:FTUI] gt "0")\
(IF ([Update:FHEM] gt "0")\
(setreading Update_Status FHEM_Update update),\
IF ([Update:FTUI] gt "0")\
(setreading Update_Status FHEM_Update update),\
setreading Update_Status ALL_Update update,\
set Update_Status update)
attr Update_Change_DOIF devStateStyle style="text-align:right"
attr Update_Change_DOIF do always
attr Update_Change_DOIF group Update
attr Update_Change_DOIF room Systemdaten
defmod Update_FHEM_DOIF DOIF ([Update_Status:FHEM_Update] eq "run")\
(IF ([Update:FHEM] gt "0")\
(set Update_Status run,\
setreading Update_Status ALL_Update run,\
update)\
ELSE\
(setreading Update_Status FHEM_Update idle,\
set Update_Status idle))
attr Update_FHEM_DOIF devStateStyle style="text-align:right"
attr Update_FHEM_DOIF do always
attr Update_FHEM_DOIF group Update
attr Update_FHEM_DOIF room Systemdaten
defmod Update_FTUI_DOIF DOIF ([Update_Status:FTUI_Update] eq "run")\
(IF ([Update:FTUI] gt "0")\
(set Update_Status run,\
update all https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt)\
ELSE\
(setreading Update_Status FTUI_Update idle,\
set Update_Status idle))
attr Update_FTUI_DOIF devStateStyle style="text-align:right"
attr Update_FTUI_DOIF do always
attr Update_FTUI_DOIF group Update
attr Update_FTUI_DOIF room Systemdaten
defmod Update_Status dummy
attr Update_Status devStateStyle style="text-align:right"
attr Update_Status group Update
attr Update_Status room Systemdaten
defmod Update_notify notify global:UPDATE \
IF ([Update_Status:FHEM_Update] eq "run") \
(setreading Update_Status FHEM_Update done);;\
IF ([Update_Status:FTUI_Update] eq "run") \
(setreading Update_Status FTUI_Update done);;\
IF ([Update_Status:ALL_Update] eq "run") \
(setreading Update_Status ALL_Update done);;\
set Update_Status done;;\
set Update update;;\
save;;\
sleep 2;;\
shutdown restart
attr Update_notify devStateStyle style="text-align:right"
attr Update_notify group Update
attr Update_notify room Systemdaten
Zitat von: somansch am 10 Januar 2019, 23:43:30
In Summe sind es über 50 Seiten. Habe ein paar ausgewählte Screenshots gemacht. Falls mehr gewünscht ist, bitte mit dem Seitentitel anfragen. Weiterhin habe ich den gesamten Code anonymisiert und angehängt. Habe auch noch die FHEM.cfg auf Nachfrage angehangen. Dort kann man Nachschauen, wie die FHEM-Devices konfiguriert sind.
PS: Habe das Flex Layout in Kombination mit Templates verwendet, ist somit für jegliche Auflösungen geeignet. Ich nutze es mit iPad, iPhone und Browser. Ein paar Höhen sind für Auflösung des iPads angepasst (1024*768).
Viel Spaß damit
Andreas
Hallo Andreas,
ich finde deine UI sehr gut und wollte mir diese als Vorlage nehmen um sie abzuändern.
Ich hätte jedoch eine Fragen: " WIe ist es möglich den Hintergrund im Flexlayout, transparent zu gestalten, so das ich ein Hintergrundbild, dahinter legen kann?
Viele Grüße
Dominic
Hallo Jürgen
sehr schön. Gefällt mir.
Würdest du bitte auch dein config und html für die Batterieanzeige zur Verfügung stellen?
Danke und Gruß
Helmut
Zitat von: Dominic am 14 Februar 2019, 20:27:51
Hallo Andreas,
ich finde deine UI sehr gut und wollte mir diese als Vorlage nehmen um sie abzuändern.
Ich hätte jedoch eine Fragen: " WIe ist es möglich den Hintergrund im Flexlayout, transparent zu gestalten, so das ich ein Hintergrundbild, dahinter legen kann?
Viele Grüße
Dominic
Hallo Dominic,
diese Frage kann ich dir nicht beantworten. Es ist bestimmt durch eine Anpassung über einen User-CSS Eintrag möglich. Hast du schonmal das Forum durchsucht? Falls du nicht fündig wirst, kannst du das Thema in einem separaten Thread adressieren.
Viele Grüße
Andreas
Zitat von: somansch am 16 Februar 2019, 17:57:13
Hallo Dominic,
diese Frage kann ich dir nicht beantworten. Es ist bestimmt durch eine Anpassung über einen User-CSS Eintrag möglich. Hast du schonmal das Forum durchsucht? Falls du nicht fündig wirst, kannst du das Thema in einem separaten Thread adressieren.
Viele Grüße
Andreas
Hi Andreas,
hat sich dann später erledigt. Habe es über die CSS hinbekommen. Danke für die Antwort
Zitat von: somansch am 10 Januar 2019, 23:43:30
In Summe sind es über 50 Seiten. Habe ein paar ausgewählte Screenshots gemacht. Falls mehr gewünscht ist, bitte mit dem Seitentitel anfragen. Weiterhin habe ich den gesamten Code anonymisiert und angehängt. Habe auch noch die FHEM.cfg auf Nachfrage angehangen. Dort kann man Nachschauen, wie die FHEM-Devices konfiguriert sind.
PS: Habe das Flex Layout in Kombination mit Templates verwendet, ist somit für jegliche Auflösungen geeignet. Ich nutze es mit iPad, iPhone und Browser. Ein paar Höhen sind für Auflösung des iPads angepasst (1024*768).
Viel Spaß damit
Andreas
Wow! Das sieht mal Klasse aus! Wie viel Zeit hast du darin investiert?
Darf man fragen warum du kein Websocket nutzt?
Liebe Grüsse
Zitat von: Helmi55 am 16 Februar 2019, 15:32:38
Hallo Jürgen
sehr schön. Gefällt mir.
Würdest du bitte auch dein config und html für die Batterieanzeige zur Verfügung stellen?
Danke und Gruß
Helmut
Hallo Helmut,
anbei meine gesamte html-Datei. Was meinst Du mit "config"?
Viele Grüße
Jürgen
Wahrscheinlich den relevanten Teil von fhem.cfg
Zitat von: SirMarco am 19 Februar 2019, 20:21:38
Wow! Das sieht mal Klasse aus! Wie viel Zeit hast du darin investiert?
Darf man fragen warum du kein Websocket nutzt?
Liebe Grüsse
Hallo Marco,
danke für die Blumen :). Ich habe die Stunden nicht gezählt, ist halt ein Hobby seit 4 Jahren...
Ich nutze Websocket, habe die globalen attribute nicht mit veröffentlicht.
VG
Andreas
hallo juemuc
amenomade hat es bereits geschrieben. bitte en relevanten Teil einer config Datei
LG
Helmut
Hallo Helmut,
ich verstehe zwar den Sinn nicht, da ich ja die Readings auslese aber hier mal zwei Devices.
defmod FBDECT_FB_10971_0203216 FBDECT FB:10971_0203216 actuator,tempSensor
attr FBDECT_FB_10971_0203216 IODev FB
attr FBDECT_FB_10971_0203216 alexaName Heizkörper Esszimmer links
attr FBDECT_FB_10971_0203216 alias Heizkörper Esszimmer links
attr FBDECT_FB_10971_0203216 event-min-interval power:120
attr FBDECT_FB_10971_0203216 event-on-change-reading .*
attr FBDECT_FB_10971_0203216 group DECT Heizung
attr FBDECT_FB_10971_0203216 icon hc_wht_regler
attr FBDECT_FB_10971_0203216 room AVM,Alexa,Statuszentrale,Wohnzimmer
attr FBDECT_FB_10971_0203216 sortby 03
defmod HM_Sec_SCo_OEQ0223456 HMCCUDEV OEQ0223456
attr HM_Sec_SCo_OEQ0223456 IODev HMCCU3
attr HM_Sec_SCo_OEQ0223456 alias HM Türkontakt Flur
attr HM_Sec_SCo_OEQ0223456 devStateStyle style="text-align:right"
attr HM_Sec_SCo_OEQ0223456 genericDeviceType contact
attr HM_Sec_SCo_OEQ0223456 group HM Fenster-/Türkontakte
attr HM_Sec_SCo_OEQ0223456 hmstatevals ERROR!7:sabotage;;SABOTAGE!1:sabotage
attr HM_Sec_SCo_OEQ0223456 icon hm-sec-win@black
attr HM_Sec_SCo_OEQ0223456 stateFormat {"Status: ".ReadingsVal($name,"state" ,"")." / LastOpen: ".ReadingsVal($name,"LastOpen","")}
attr HM_Sec_SCo_OEQ0223456 statedatapoint 1.STATE
attr HM_Sec_SCo_OEQ0223456 substitute STATE!(0|false):closed,(1|true):open
attr HM_Sec_SCo_OEQ0223456 userReadings LastOpen:1.STATE.* {if (ReadingsVal($name,"state","") eq "open") {ReadingsTimestamp($name,"state","") =~ /^(\d+)-(\d+)-(\d+)\s(\d+:\d+:\d+)$/;; return "$3.$2.$1 - $4";;} else {ReadingsVal($name,"LastOpen","")}}
Viele Grüße
Jürgen
Hallo zusammen. Ich dachte es wird Zeit Euch mal meine Installation zu zeigen.
Achtung die Bilder zeigen teilweise unterschiedliche Versionsstände... Das ganze ist immer noch work in progress, aber im Moment genau so im Einsatz...
Ein paar Eckpunkte:
- Die Oberfläche läuft auf 2 Tablets, die in den Wänden eingelassen sind
- der WAF ist auf jedenfall gegeben
- Basiert auf FTUI aber mit viel custom-HTML (feste Positionierung, kein FTUI Grid usw.)
- Die Grundrisse sind intelligent. D.h. sie zeigen natürlich die Status der einzelnen Controls an (An/Aus, Offen/Zu) und gleichzeitig signalisieren sie auch kritische Punkte: z.B. offene Fenster mit einem roten Rahmen oder hohe Luftfeuchtigkeit (>70%) mit rotem Hintergrund
- die 2x3 Kacheln sind Makros oder Schnellaktionen...
- Die Tablets schalten sich per MotionDetection (Fully Browser) an und aus
Das Ganze läuft schon ein 1/2 ganz stabil...
Hallo Leute
Vielleicht könnt ihr mir ja sagen was ich falsch mache. Und zwar es ist mein erstes Tablet ui mit Flex.
Ich möchte gerne Daten nebeneinander anordnen. Leider klappt das mit inline nicht. :( Was mache ich falsch??
es geht um das Wetter und den Sonnenaufgang im ersten abschnitt.
Und könnte mir vielleicht auch jemand sagen wie ich den Abstand zwischen UWZ und dem Elternzimmer verkleinern kann??
So sieht mein Code aus.
Danke schon mal für eure Hilfe.
<!DOCTYPE html>
<html>
<head>
<!--
/* FHEM tablet ui */
/*
* UI builder framework for FHEM
*
* Version: 2.5.*
* URL: https://github.com/knowthelist/fhem-tablet-ui
*
* Copyright (c) 2015-2017 Mario Stephan <mstephan@shared-files.de>
* Under MIT License (http://www.opensource.org/licenses/mit-license.php)
*
* - create a new folder named 'tablet' in /<fhem-path>/www
* - copy all files incl. sub folders into /<fhem-path>/www/tablet
* - add 'define TABLETUI HTTPSRV ftui ./www/tablet Tablet' in fhem.cfg
* - Tadaaa! A new fhem ui in http://<fhem-url>:8083/fhem/tablet/
*/
-->
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<!-- define your personal style here, it wont be overwritten -->
<!-- link rel="stylesheet" href="css/fhem-green-ui.css" / -->
<!-- link rel="stylesheet" href="css/fhem-tablet-ui-user.css" / -->
<script src="js/fhem-tablet-ui.js" defer></script>
<!-- Remove this line to enable for usage with WebViewControl
<script defer>var wvcDevices = {'12345': 'Tablet'}; var wvcUserCssFile="webviewcontrol.css"</script>
<script src="../pgm2/cordova-2.3.0.js" defer></script>
<script src="../pgm2/webviewcontrol.js" defer></script>
<!-- End for WebViewControl -->
<title>Zuhause</title>
</head>
<body>
<div class="hbox">
<div class="vbox grow-1">
<div class="card">
<header>Heute</header>
<div class="vbox">
<div data-type="clock" data-format="l, j. F Y" class="big"></div>
<div data-type="weather" data-device="IbbenbuerenProplanta" data-get="fc0_weatherDayIcon" data-imageset="kleinklima"></div>
<div data-type="label" data-device="LaCrosse_0C" data-temp="temperature" data-get="temperature" data-unit="%B0C%0A"></div>
<div data-type="label" data-device="IbbenbuerenProplanta" data-get="weather"></div>
<div data-type="symbol" data-icon="wi wi-sunrise" data-color="White"></div>
<div data-type="label" data-device="Mond" data-get="CivilTwilightMorning"></div>
<div data-type="symbol" data-icon="wi wi-sunset" data-color="White"></div>
<div data-type="label" data-device="Mond" data-get="CivilTwilightEvening"></div>
</div>
</div>
<div class="card grow-0"><header>Box 02</header><div data-type="symbol"></div></div>
<div class="card grow-0"><header>Box 03</header><div data-type="symbol"></div></div>
<div class="card grow-0"><header>Box 04</header><div data-type="symbol"></div></div>
</div>
<div class="vbox">
<div class="hbox">
<div class="card"><header>Unwetter</header><div data-template="dwd.html"></div></div>
<div class="card"><header>Pollenflug</header><div data-template="pollenflug.html"></div></div>
<div class="card"><header>Gäste WLan</header><div data-template="gwlan.html"></div></div>
<div class="card"><header>Box 08</header><div data-type="symbol"></div></div>
<div class="card"><header>Box 08</header><div data-type="symbol"></div></div>
</div>
<div class="hbox">
<div class="vbox">
<div class="card"><header>Eltern</header><div data-type="symbol"></div></div>
<div class="card"><header>Ole Schlafzimmer</header><div data-type="symbol"></div></div>
<div class="card"><header>Til Schlafzimmer</header><div data-type="symbol"></div></div>
<div class="card"><header>Badezimmer</header><div data-type="symbol"></div></div>
</div>
</div>
</div>
</li>
</ul>
</div>
</body>
</html>
Zitatvbox Definiert das HTML-Element als vertikalen Container. Die Inhalte werden übereinander angeordnet. flex-direction: column
hbox Definiert das HTML-Element als horizontalen Container. Die Inhalte werden nebeneinander angeordnet. flex-direction: row
mach eine
hbox draus
Danke
ich werde es Probieren.
@MKeY
Es hat mir zumindetsne bei meinen Zimmern geholfen. Aber leider nicht bei meinem Ersten oben lings. Die sind dann alle schön nebeneinander aber leider klappt es dann nicht das ich sie untereinander bekommen (die anderen wieder). :(
Hallo Nogga,
deine Wandhalterung für das Tablet sieht prima aus,
wo bekommt man so etwas her?
MfG
Uwe
Zitat von: my-engel am 19 März 2019, 09:39:09
deine Wandhalterung für das Tablet sieht prima aus,
wo bekommt man so etwas her?
Holger aus dem Homematic-Forum bietet sowas an:
https://homematic-forum.de/forum/viewtopic.php?t=22059
Hallo Nogga,
vielen Dank für deine Bilder.
Genauso stelle ich mir meine Installation in etwa vor.
Der WAF Hoch, Das Tablet nicht überfüllt!
Welche Tablet benutzt du?
Benutzt du DOORPI?
Oder nur eine Kamera, welche?
Kannst du deine index etc. zur Verfügung stellen?
Würde gerne sehen wie meine Familie darauf reagiert.
Gruß
Ralf
Zitat von: pnewman am 13 April 2019, 12:49:07
Welche Tablet benutzt du?
Benutzt du DOORPI?
Oder nur eine Kamera, welche?
Sorry, habs erst jetzt geschafft zu Antworten.
Ich benutze zwei Samsung Galaxy Tab A Tablets in 10 Zoll Größe.
Nein kein DOORPI - einfach nur eine FOSCAM-Kamera im Eingangsbereich.
Im Anhang mal ein paar Files..
Zitat von: Eisix am 14 August 2018, 19:40:01
Der Netzwerkmonitor ist eine Kombination der Module Unifi, sysmon und speedtest.
Das mit dem update wurde hier im Thread schon mal erklärt. Sind 4 DOIF und ein dummy. Kann ich dir schicken.
Wollte hier keinen support Thread aufmachen ;)
Hallo Eisix,
könntest du mir auch noch mal die zusätzlichen infos per PM zukommen lassen?
Danke...
Grüsse
Marcus
Hallo liebe Community,
anbei möchte ich euch auch mein Projekt einmal vorstellen!
Es ist ein Pi mit einem 800x480 Screen, eingebaut im Badezimmerspiegel. Es dient mehr als Info-Display bei der alltäglichen Hygiene.
Geschaltet werden lediglich die Spiegelleuchten und ein Webradio. Der Rest ist reine Information.
Die "Zahnrad-Seite" mit den Einstellungen ist noch nicht fertig, hier sollen in Zukunft ein paar Pi-Befehle (Helligkeit des Bildschirms, Neustart, etc..) rein.
Ich hoffe ich kann dem ein oder anderem hiermit ein paar Anregungen geben.
Beste Grüße, Schalter
Erzähl mal mehr (ich quäle mich gerade mit einem Nextion, der nicht will): Wie ist der angebracht? Aufgeklebt? Wo gibt es den? Hat er Touch-Eingabe? Wie mit FHEM verbunden?
Zitat von: andies am 11 Mai 2019, 21:20:45
Erzähl mal mehr (ich quäle mich gerade mit einem Nextion, der nicht will): Wie ist der angebracht? Aufgeklebt? Wo gibt es den? Hat er Touch-Eingabe? Wie mit FHEM verbunden?
Die Idee war eigentlich ein Smart-Mirror mit Touchfunktion. Ich habe mir mehrere Produktproben von halbdurchlässigen Spiegeln zukommen lassen und schnell gemerkt das die Spieglung nicht optimal ist. Das Spiegelbild ist sehr dunkel, grade mal ausreichend für ein Badezimmer. Des Weiteren funktioniert bei den meisten keine Touchfunktion. Also kam ich auf die Idee mir einen Spiegel mit Loch anfertigen zu lassen, kostet beim Glasmacher so um die hundert Euro. Dieser hat dann auch ein ganz normales Glas für das Loch zugeschnitten. Das ganze hält mit Silikon zusammen, man könnte aber Glaskleber benutzen, Silikon kann zur Not wieder gut entfernt werden. Also: Spiegel mit passender Aussparung, Normalglas reingeklebt und Pi Display dahinter.
Die Technik im Spiegel ist das offizielle Pi 7" Display mit nem Pi3 b+, installiert ist X11 mit Chromium (Kiosk Mode). Dazu kommt noch ein Bewegungsmelder und Lautsprecher, sowie eine Relaiskarte für das Licht.
Mein eigentliches FHEM läuft auf einem größerem Server (da dort auch TVHeadend, iTunes Remote, etc laufen), verbunden ist dieser mit FHEM2FHEM.
Das ist es eigentlich im Groben...
Das nenne ich mal ne geniale Idee ;)
Darf man fragen was du für einen Wetterdienst nutzt?
Zitat von: SirMarco am 12 Mai 2019, 00:33:25
Darf man fragen was du für einen Wetterdienst nutzt?
Darf man...
Proplanta, die Icons habe ich irgendwo aus dem Internet geladen und mit den kleinklima Bildern ersetzt.
Hey Schalter,
das sieht TOP aus!
Eine Frage: wie hast du die Geburtstage eingebunden? Google-Kalender?
Zitat von: M.Piet am 24 Mai 2019, 14:25:59
Hey Schalter,
das sieht TOP aus!
Eine Frage: wie hast du die Geburtstage eingebunden? Google-Kalender?
Danke :)
Den Kalender habe ich mit dem Widget Calender eingerichtet. Wie in dem Wiki beschrieben, nur ohne Altersberechnung. Man muss halt einmal die ganzen "Termine" eintragen.
https://wiki.fhem.de/wiki/FTUI_Widget_Calview
Beste Grüße, Schalter
Die Wettericons erinnern mich stark an die animierten "amCharts", welche ich im weather_widget hinzugefügt habe. Falls du also noch ein wenig "Action" auf dem Screen haben möchtest, schau mal hier vorbei ;): https://forum.fhem.de/index.php/topic,96954.0.html (https://forum.fhem.de/index.php/topic,96954.0.html)
Viele Grüße
Andreas
Gute Idee
@grossmaggul,
würdest Du auch Deine custom.css teilen?
VG
Marc
Hallo Marc,
wo finde ich die denn? Ich kann bei mir im css Ordner keine solchen Datei finden.
Hi,
sorry, ich hab wohl einfach nicht richtig hingeschaut :-\
Ich meinte die Datei, in der Du die von Dir vorgenommenen css-Anpassungen gespeichert hast.
Aber die hast Du ja sogar angehängt.
Trotzdem danke für Deine Rückmeldung.
Viele Grüße
Marc
Hallo Somansch,
ich habe nochmal eine Frage.
Wenn ich mir Temperatur-/Luftfeuchtigkeitsseite anschaue, fällt auf, dass die Labels nicht 100% übereinander stehen.
Hast Du eine Idee, wie sich das beheben ließe?
Viele Grüße
Marc
Zitat von: PingPong am 14 Juni 2019, 08:58:06
Hallo Somansch,
ich habe nochmal eine Frage.
Wenn ich mir Temperatur-/Luftfeuchtigkeitsseite anschaue, fällt auf, dass die Labels nicht 100% übereinander stehen.
Hast Du eine Idee, wie sich das beheben ließe?
Viele Grüße
Marc
Poste mal den aktuellen Code und einen Screenshot.
Das war ja mal ne schnelle Antwort :-)
Bitte sehr...
<!DOCTYPE html>
<html>
<body>
<div class="page" id="content_clima">
<div class="phone-back-btn">
<div data-type="link" data-url="#content_home.html" data-load="#content_home" data-color="white" data-icon="mi-chevron_left" class="large"></div>
</div>
<div class="hbox">
<div class="vbox phone-width">
<div class="card lift">
<header>Temperatur</header>
<section>
<div data-template="template_temperature.html" data-parameter='{"var_device":"sz_Durchschnittstemperatur","var_name":"Schlafzimmer","var_window":"sz.alle_Fenster"}'></div>
</section>
<section>
<div data-template="template_temperature.html" data-parameter='{"var_device":"ke_Durchschnittstemperatur","var_name":"Keller","var_window":"Kellerfenster"}'></div>
</section>
<section>
<div data-template="template_temperature.html" data-parameter='{"var_device":"Temperatursensor_Waschkeller","var_name":"Waschkeller","var_window":"Fenstersensor_Waschkeller"}'></div>
</section>
<section>
<div data-template="template_temperature.html" data-parameter='{"var_device":"Temperatursensor_Wohnzimmer","var_name":"Wohnzimmer","var_window":"wz.alleFenster"}'></div>
</section>
<section>
<div data-template="template_temperature.html" data-parameter='{"var_device":"lu_Durchschnittstemperatur","var_name":"Sienna","var_window":"lu.alle_Fenster"}'></div>
</section>
<section>
<div data-template="template_temperature.html" data-parameter='{"var_device":"si_Durchschnittstemperatur","var_name":"Luca","var_window":"si.alle_Fenster"}'></div>
</section>
<section>
<div data-template="template_temperature.html" data-parameter='{"var_device":"na_Durchschnittstemperatur","var_name":"Nayla","var_window":"Fensterkontakt_Nayla"}'></div>
</section>
<section>
<div data-template="template_temperature.html" data-parameter='{"var_device":"Temperatursensor_Bad","var_name":"Bad","var_window":"Fensterkontakt_Bad"}'></div>
</section>
<section>
<div data-template="template_temperature.html" data-parameter='{"var_device":"Temperatursensor_Dachboden","var_name":"Dachboden","var_window":"Fensterkontakt_Dachboden"}'></div>
</section>
<section>
<div data-template="template_temperature.html" data-parameter='{"var_device":"flUG.Temperatur","var_name":"Flur UG"}'></div>
</section>
<section>
<div data-template="template_temperature.html" data-parameter='{"var_device":"Flur_OG_Temperatur","var_name":"Flur OG"}'></div>
</section>
</div>
</div>
<div class="vbox phone-width">
<div class="card lift">
<header>Luftfeuchte</header>
<section>
<div data-template="template_humidity.html" data-parameter='{"var_device":"sz_Durchschnittstemperatur","var_name":"Schlafzimmer"}'></div>
</section>
<section>
<div data-template="template_humidity.html" data-parameter='{"var_device":"HM_359193_Climate","var_name":"Keller"}'></div>
</section>
<section>
<div data-template="template_humidity.html" data-parameter='{"var_device":"Temperatursensor_Waschkeller","var_name":"Waschkeller"}'></div>
</section>
<section>
<div data-template="template_humidity.html" data-parameter='{"var_device":"Temperatursensor_Wohnzimmer","var_name":"Wohnzimmer"}'></div>
</section>
<section>
<div data-template="template_humidity.html" data-parameter='{"var_device":"lu_Durchschnittstemperatur","var_name":"Sienna"}'></div>
</section>
<section>
<div data-template="template_humidity.html" data-parameter='{"var_device":"si_Durchschnittstemperatur","var_name":"Luca"}'></div>
</section>
<section>
<div data-template="template_humidity.html" data-parameter='{"var_device":"na_Durchschnittstemperatur","var_name":"Nayla"}'></div>
</section>
<section>
<div data-template="template_humidity.html" data-parameter='{"var_device":"Temperatursensor_Bad","var_name":"Bad"}'></div>
</section>
<section>
<div data-template="template_humidity.html" data-parameter='{"var_device":"Temperatursensor_Dachboden","var_name":"Dachboden"}'></div>
</section>
<section>
<div data-template="template_humidity.html" data-parameter='{"var_device":"flUG.Temperatur","var_name":"Flur UG"}'></div>
</section>
<section>
<div data-template="template_humidity.html" data-parameter='{"var_device":"Flur_OG_Temperatur","var_name":"Flur OG"}'></div>
</section>
</div>
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<!-- FHEM Tablet UI V2.6 -->
<!-- Template für Homematic Schaltaktor 4-fach HM-LC-SW4-DR zur Schaltung des Heizkreises (Fußbodenheizung) in Verbindung mit Wandthermostat HM-TC-IT-WM-W-EU -->
</head>
<body>
<div class="row">
<div class="cell left-align left-space">
<div data-type="symbol" data-device="var_device" data-off-color="flx_blue" data-icon="wi wi-humidity" class="big compressed"></div>
</div>
<div class="cell-80 left-align">
<div class="big">var_name</div>
</div>
<div class="cell right-align right-space">
<div data-type="label" data-device="var_device" data-get="humidity" data-unit="%" data-fix="1" class="bigger"></div>
<div data-type="klimatrend" data-device="var_device" data-get="statHumidityTendency" data-refperiod="1" class="inline readonly" data-stagnating-color="rgb(223,210,202)" data-rising-color="rgb(225,112,0)" data-highmark-rising-color="rgb(225,112,0)" data-falling-color="rgb(0,161,222)" data-highmark-falling-color="rgb(0,161,222)"></div>
<div data-type="klimatrend" data-device="var_device" data-get="statHumidityTendency" data-refperiod="2" class="inline readonly" data-stagnating-color="rgb(223,210,202)" data-rising-color="rgb(225,112,0)" data-highmark-rising-color="rgb(225,112,0)" data-falling-color="rgb(0,161,222)" data-highmark-falling-color="rgb(0,161,222)"></div>
<div data-type="klimatrend" data-device="var_device" data-get="statHumidityTendency" data-refperiod="3" class="inline readonly" data-stagnating-color="rgb(223,210,202)" data-rising-color="rgb(225,112,0)" data-highmark-rising-color="rgb(225,112,0)" data-falling-color="rgb(0,161,222)" data-highmark-falling-color="rgb(0,161,222)"></div>
</div>
</div>
</body>
</html>
wobei man das auch auf Deinem Screenshot sieht, wenn man genau schaut.
Ich habe das inzwischen auf "hdm-flexbox-container" umgestellt (in der user.css). Dort kann man sehr flexibel die feste prozentuale Aufteilung definieren. Hier meine aktuellen Templates.
Viele Grüße
Andreas
Hallo Andreas,
klasse, vielen lieben Dank für Deine Hilfe.
Jetzt sieht es besser aus.
Viele Grüße
Marc
Hallo,
ich suche nach einer Möglichkeit ein Regenradar in FTUI zu integrieren.
Den DWD Film habe ich schon.
Aber der ist ja "nur" die letzten Stunden bis jetzt!
Ich habe bei wetteronline einen Radar gesehen, der auch 2 Stunden in die Zukunft prognostiziert.
https://www.wetteronline.de/regenradar/koeln?mode=interactive&wrg=10513&wrh=true&wrn=S8O2bG4=&wrx=50.95,6.95&wry=50.95,6.95&wro=true
Wie kann ich den einbinden. Der hat eben kein gif.
Danke
Jörg
das kannst du mit einem iframe machen und den in der Größe anpassen
<div class="center"><iframe src="https://www.wetteronline.de/regenradar/koeln?mode=interactive&wrg=10513&wrh=true&wrn=S8O2bG4=&wrx=50.95,6.95&wry=50.95,6.95&wro=true" width="400" height="400"></iframe></div>
Zitat von: moonsorrox am 20 Juni 2019, 16:10:12
das kannst du mit einem iframe machen und den in der Größe anpassen
<div class="center"><iframe src="https://www.wetteronline.de/regenradar/koeln?mode=interactive&wrg=10513&wrh=true&wrn=S8O2bG4=&wrx=50.95,6.95&wry=50.95,6.95&wro=true" width="400" height="400"></iframe></div>
Danke.
... und wenn ich nur die Karte haben möchte ??? Was muss ich da machen ??
Danke
Jörg
Hallo zusammen,
ich weiß nicht ob ich hier richtig bin. Aber irgendwie komm ich hier mit meinem FTUI nicht so wirklich voran. Ich hab mal ein wenig mit dem Example gespielt was dabei war, dann mit dem von Überbeck. Ich hab hier auch schon ein wenig durchgestöbert und mir Screens angeschaut. Aber so richtig weiter komme ich noch nicht. Ich hab mir das in etwa so vorgestellt...
So nen Art Screensaver wie bei Ueberbeck, wobei wenn das Tablet aus ist wenn man es nicht nutzt bringt mir das ja nichts, es soll angehen, wenn man davor läuft. Dann lande ich ja eh auf der Übersichtseite, die wie folgt aufgebaut sein soll.
Wettervorhersage Heute, morgens mittags abends und vllt Morgen noch dazu. Wenn man auf die Kachel klickt kommt man zum Wetter Tab. Wo dann für die nächsten Tage das Wetter vorher gesagt wird.
Kalendereinträge, Termine, Müllgeschichte, Geburtstage. Ob Türen, Fenster offen sind. Vllt auch Anzeige wie viele ? Wenn man dann die Kachel anklickt gelangt man auf die Seite Türen und Fenster bei denen alle aufgelistet sind, vllt hier noch mit Rollo Steuerung, für die einzelnen Fenster.
FritzMonitor, Anrufe und Co.
Homestatus durch den Eco Taster von Max und die Einstellung der Heizung bzw. der WT's
Ginge das alles ohne Menü, das wenn ich auf so eine Kachel klicke, ich dann auf die nächste Seite gelange, dort gibt es dann nur einen Back button, der mich auf die Startseite bringt.
Aber irgendwie schaff ich nicht mal den Anfang. Bin so durcheinander, weiß nicht so recht wie das alles aussehen soll. Finde von allem was ich gesehen habe etwas toll, das andere wieder nicht. Schwierig wenn man da nicht in der Materie steckt, bzw einem das liegt.
Wie sollte ich Anfangen, was schlagt ihr mir vor, gibt es vllt doch ein Template was mein obiges so in etwas bietet und ich das noch nicht auf den über 70 Seiten gesehen habe ?
Auch wenn Du nicht der este bist, der hier OT ist, bist Du tatsächlich im falschen Thread. Hier heisst es "User-Demos"
Wenn Du mit TabletUI noch nicht wirklich angefangen hast, schlage ich vor FUIP zu schauen.
https://wiki.fhem.de/wiki/FHEM_User_Interface_Painter
Zitat von: amenomade am 13 August 2019, 21:57:20
Auch wenn Du nicht der este bist, der hier OT ist, bist Du tatsächlich im falschen Thread. Hier heisst es "User-Demos"
Wenn Du mit TabletUI noch nicht wirklich angefangen hast, schlage ich vor FUIP zu schauen.
https://wiki.fhem.de/wiki/FHEM_User_Interface_Painter
Das klingt ja super. Das werde ich heute Abend gleich mal ausprobieren. Vielen Dank für den Tipp. Hab ich gar nicht auf dem Schirm gehabt. Damit bekomm ich vllt was hin.
Na, dann will ich meins auch mal beisteuern.
Der LKW symbolisiert die Müllabholung am gleichen Tag.
Der Container zeigt die nächste Abholung an.
Ich möchte mich auch gleichzeitig für alle Hilfestellungen und Anregungen hier bedanken.
Zitat von: Kuehnhackel am 28 November 2019, 17:45:18
Na, dann will ich meins auch mal beisteuern.
Der LKW symbolisiert die Müllabholung am gleichen Tag.
Der Container zeigt die nächste Abholung an.
Ich möchte mich auch gleichzeitig für alle Hilfestellungen und Anregungen hier bedanken.
Wie get die Oberfläche damit um, wenn zwei Dinge abgeholt werden (z.b. Hausmüll und Bio) und eben auch zukünftig (Container) mehrere Dinge abgeholt werden.
2,. Frage
Hast du auch noch andere Oberflächen. Du baust anscheinend viel Aktoren auf die Seite. Seht schön und trotzdem übersichtlich
Hallo jnewton957,
sorry dass ich mich erst jetzt melde.
Im Anhang siehst du wie der "LKW" mit zwei Zeilen "umgeht". Zwei Zeilen würdest du auch beim Container hinbekommen. Dann könnte man die Resttage davor oder dahinter setzen.
Wie du im linken Menue siehst habe ich noch mehrere Untermenues.
Das sind im einzelnen:
Kompletter Müllkalender
Heizung, das braucht noch was und muss erst noch fertigstellen
Wetter 5-Tage-Vorhersage, da muss noch das Layout angepasst werden
TV-Programm im Augenblick, mit Iframe eingebunden
TV-Programm ab 20:15, mit Iframe eingebunden
Es wird dann noch irgendwann 1. OG und Garten dazukommen. Wobei der Garten dann als Zeichnung im Hintergrund liegt und die Lampen, Teich usw eingetragen sind.
Liebe Grüße
Ralf
Hallo Leute.
Könnte mir vielleicht jemand sagen was ich für eine Zeile eintragen muss wenn ich die Symbole "mf1-cloud-alert" sichtbar machen möchte??
den sie werden bei mir nicht angezeigt?
Habe das Unwettermodul länger nicht benutzt und nun werden sie leider nicht anzeigt.
In Fhem gibt es einen Beitrag leider nur auch ohne Ergebnis.
Danke schon mal im vorraus.
Zitat von: Wasserwerk33 am 19 Dezember 2019, 15:40:48
Hallo Leute.
Könnte mir vielleicht jemand sagen was ich für eine Zeile eintragen muss wenn ich die Symbole "mf1-cloud-alert" sichtbar machen möchte??
den sie werden bei mir nicht angezeigt?
Habe das Unwettermodul länger nicht benutzt und nun werden sie leider nicht anzeigt.
In Fhem gibt es einen Beitrag leider nur auch ohne Ergebnis.
Danke schon mal im vorraus.
mf1-cloud-alert ist wohl "selber-gebaut", wirst du so nicht finden, es sei denn du fragst den Ersteller,
https://forum.fhem.de/index.php?topic=64334.150 Antwort 161 - User octek0815,
ob er es dir gibt. Dann muss du das dann einbinden.
Wenn Du in den Browser:
http://adressevondeinemFHEM:8083/fhem/www/tablet/icons_table.htmleingibst, erhälst du eine Seite, wo alle deine Icons dargestellt werden. Diese kannst du dann demtensprechend "verarbeiten".
Alle anderen musst du manuell eintragen. Aber da hilft dir das Wiki oder Forum weiter.
Da ja hier der User Demo Thread ist möchte ich auch mal ein paar Bilder beisteuern.
Es ist nur ein Auszug an Bilder da ich hier nicht jedes PopUp und Template dargestellt habe.
Fotos sind alle mit dem Handy gemacht.
Sehr schön, übersichtlich und aufgeräumt.
Sind deine Sensoren überwiegend Homematic und Hue?
Hallo,
Dann packe ich mal meinen Tablet-Stand dazu.
Gruß
Eisix
Und noch ein Video meiner Handy Version.
Hallo Eisix
super Sache die du da gebaut hast.
Würdest du von Main und System deinen Code posten
Da kann man(n) - ich - noch was lernen
Danke
Helmut
Zitat von: Eisix am 28 Januar 2020, 22:13:16
Und noch ein Video meiner Handy Version.
Wie hast du denn das seitliche swipen umgesetzt?
@Helmi55
welche der templates brauchst du
main
<div class="page" id="content1">
<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="4" data-sizey="3" data-template="templates/tmp_Vorratsraum.htm"></li>
<li data-row="1" data-col="5" data-sizex="2" data-sizey="8" data-template="templates/tmp_Wetter.htm"></li>
<li data-row="1" data-col="7" data-sizex="4" data-sizey="4" data-template="templates/tmp_Wohnzimmer.htm"></li>
<li data-row="1" data-col="11" data-sizex="1" data-sizey="2" data-template="templates/tmp_Klingel.htm"></li>
<li data-row="1" data-col="12" data-sizex="1" data-sizey="2" data-template="templates/tmp_LichtTerrasse.htm"></li>
<li data-row="1" data-col="13" data-sizex="5" data-sizey="6" data-template="templates/tmp_Geraete2.htm"></li>
<li data-row="4" data-col="1" data-sizex="4" data-sizey="5" data-template="templates/tmp_Homestatus.htm"></li>
<li data-row="5" data-col="7" data-sizex="4" data-sizey="2" data-template="templates/tmp_Abfall.htm"></li>
<li data-row="7" data-col="7" data-sizex="4" data-sizey="2" data-template="templates/tmp_Bose.htm"></li>
<li data-row="3" data-col="11" data-sizex="2" data-sizey="2" data-template="templates/tmp_Garagen.htm"></li>
<li data-row="5" data-col="11" data-sizex="2" data-sizey="2" data-template="templates/tmp_Aquarium.htm"></li>
<li data-row="7" data-col="11" data-sizex="3" data-sizey="2" data-template="templates/tmp_Multimedia.htm"></li>
<li data-row="7" data-col="14" data-sizex="2" data-sizey="2" data-template="templates/tmp_Lueftung.htm"></li>
<li data-row="7" data-col="16" data-sizex="2" data-sizey="2" data-template="templates/tmp_Guest_WLAN.htm"></li>
<li data-row="9" data-col="1" data-sizex="17" data-sizey="7" data-template="templates/tmp_Calllist.htm"></li>
</ul>
</div>
</div>
system
<div class="page" id="Settings">
<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="5" data-sizey="7" data-template="templates/tmp_Fhemmonitor.htm"></li>
<li data-row="1" data-col="6" data-sizex="6" data-sizey="7" data-template="templates/tmp_Netzwerkmonitor.htm"></li>
<li data-row="1" data-col="12" data-sizex="5" data-sizey="7" data-template="templates/tmp_Servermonitor.htm"></li>
<li data-row="1" data-col="17" data-sizex="1" data-sizey="15" data-template="templates/tmp_Batterie.htm"></li>
<li data-row="8" data-col="1" data-sizex="11" data-sizey="8" data-template="templates/tmp_Stromverbrauch.htm"></li>
<li data-row="8" data-col="12" data-sizex="5" data-sizey="8" data-template="templates/tmp_APC.htm"></li>
</ul>
</div>
</div>
@TWART016
Zitat
Wie hast du denn das seitliche swipen umgesetzt?
Wahrscheinlich einfacher als du vermutest ;) ::)
Der gridster ist einfach 3 mal Bildschirmbreite und der 2+3 Bildschirm wird je nach ausgewählter Funktion ein/ausgeblendet.
index
<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="1" data-sizey="2" data-template="templates/tmp_Licht.htm"></li>
<li data-row="1" data-col="2" data-sizex="1" data-sizey="2" data-template="templates/tmp_LichtVR_mob.htm"></li>
<li data-row="1" data-col="3" data-sizex="1" data-sizey="2" data-template="templates/tmp_Tueren.htm"></li>
<li data-row="1" data-col="4" data-sizex="2" data-sizey="2" data-template="templates/tmp_Garagen.htm"></li>
<li data-row="3" data-col="1" data-sizex="5" data-sizey="2" data-template="templates/tmp_Rolladen_mob.htm"></li>
<li data-row="6" data-col="1" data-sizex="5" data-sizey="2" data-template="templates/tmp_Abfall.htm"></li>
<li data-row="8" data-col="1" data-sizex="5" data-sizey="2" data-template="templates/tmp_Bose.htm"></li>
<li data-row="10" data-col="1" data-sizex="5" data-sizey="2" data-template="templates/tmp_Multimedia_mob.htm"></li>
<li data-row="12" data-col="1" data-sizex="5" data-sizey="2" data-template="templates/tmp_Homestatus_mob.htm"></li>
<li data-row="1" data-col="6" data-sizex="10" data-sizey="12" data-template="Switch.htm"></li>
</ul>
</div>
Switch.htm
<div data-type="html" data-class="hubvirt:state" data-map-class='{"Licht":"show", ".*":"myhidden"}'>
<div data-type="include" data-url="templates/tmp_Licht_mob.htm"></div>
</div>
<div data-type="html" data-class="hubvirt:state" data-map-class='{"Fernsehen":"show", ".*":"myhidden"}'>
<div data-type="include" data-url="templates/tmp_Fernsehen_mob.htm"></div>
</div>
<div data-type="html" data-class="hubvirt:state" data-map-class='{"AmazonPrime":"show", ".*":"myhidden"}'>
<div data-type="include" data-url="templates/tmp_AmazonPrime_mob.htm"></div>
</div>
<div data-type="html" data-class="hubvirt:state" data-map-class='{"Musik":"show", ".*":"myhidden"}'>
<div data-type="include" data-url="templates/tmp_Onkyo_Player_mob.htm"></div>
</div>
<div data-type="html" data-class="hubvirt:state" data-map-class='{"Bose":"show", ".*":"myhidden"}'>
<div data-type="include" data-url="templates/tmp_Bose_Player_mob.htm"></div>
</div>
<div data-type="html" data-class="hubvirt:state" data-map-class='{"Filme":"show", ".*":"myhidden"}'>
<div data-type="include" data-url="templates/tmp_Filme_mob.htm"></div>
</div>
<div data-type="html" data-class="hubvirt:state" data-map-class='{"Zocken":"show", ".*":"myhidden"}'>
<div data-type="include" data-url="templates/tmp_Zocken_mob.htm"></div>
</div>
<div data-type="html" data-class="hubvirt:state" data-map-class='{"PowerOff":"show", ".*":"myhidden"}'>
<div data-type="include" data-url="templates/tmp_PowerOff_mob.htm"></div>
</div>
Gruß
Eisix
Danke für rasche Antwort - werde ich mir ansehen
Helmut
Hallo Eisix,
Mich würde das coding deines wetter chart mit dem Forecast für Regen interessieren. Das ist ja besser, als die Einbindung des Bildes von meteosat.
Danke dir
Jörg
Hallo Jörg,
alles nur geklaut, finde nur den Beitrag gerade nicht.
<div class="nobuttons fullsize"
data-type="chart"
data-device="Wetter"
data-logdevice='[
"lp",
"lp",
"lp"
]'
data-columnspec='[
"Func:logProxy_proplanta2Plot(\\x22Wetter\\x22,\\x22weatherIcon\\x22,$from,$to,12,\\x22day\\x22)",
[
"Func:logProxy_proplanta2Plot(\\x22Wetter\\x22,\\x22tempMax\\x22,$from,$to,12,\\x22day\\x22)",
"Func:logProxy_proplanta2Plot(\\x22Wetter\\x22,\\x22tempMin\\x22,$from,$to,12,\\x22day\\x22)"
],
"Func:logProxy_proplanta2Plot(\\x22Wetter\\x22,\\x22rain_\\x22,$from,$to,12,\\x22day\\x22)"
]'
data-style='[
"ftui l99icon",
["fill",["-40","#00A1DE","1.0"],["0","#00A1DE","0"],["0","#E17000","0"],["400","#E17000","1.0"]],
"ftui l5fill"
]'
data-ptype='[
"icons:1",
"cubic",
"steps"
]'
data-uaxis='[
"primary",
"primary",
"secondary"
]'
data-legend='[
"Wetterbedingung",
"Temperatur",
"Niederschlag"
]'
data-legendpos='["behind","top"]'
data-showlegend="true"
data-minvalue="auto"
data-maxvalue="auto"
data-minvalue_sec="0"
data-maxvalue_sec="20"
data-xticks="720"
data-yticks="auto"
data-yunit="°C"
data-yunit_sec="mm"
data-y_margin="20"
data-width="100%"
data-height="310px"
data-daysago_start = "now"
data-daysago_end = "-7d"
data-timeformat="hh\LF\ee\LF\dd.MM.."
data-nofulldays='true'
></div>
css
/* icon lines */
.ftui.l99icon { stroke:#DDA400; stroke-width:48px; fill:none; }
Hoffe ich habe nichts vergessen.
Das meteosat Video öffnet bei mir ein Popup zu www.windy.com (http://www.windy.com) dort gibt es dann alle Details bei Bedarf.
Gruß
Eisix
Hallo Eisix,
das sieht richtig toll aus was Du da gemach hast [emoji106] Ich bin auch dabei mein FTUI zu Designen von daher interessieren mich auch ein paar Aachen, die Du umgesetzt hast .
-> Amazon, System, TV und Onkyo.
Es eilt nicht, ist ja schon einiges [emoji3][emoji3]
Vielen Dank im Voraus,
Jens
Gesendet von iPhone mit Tapatalk
@Eisix: Wie bist du an die Preview Bilder der Sender gekommen? Also was da momentan läuft?
@Det20
über das Webif interface meines Sat-Receivers
<div data-type="image"
data-url="http://X.X.X.X/grab?format=jpg"
data-size='350'
data-refresh="30"
class="top-space-2x nocache">
</div>
Gruß
Eisix
Zitat von: Eisix am 29 Januar 2020, 11:07:36
welche der templates brauchst du
Hallo Eisix,
dank dir bin ich darauf gekommen, dass ich meine USV ja auch mal in FHEM einbinden könnte.
Wärst du so nett folgende Templates bereitzustellen?
- "templates/tmp_APC.htm"
- "templates/tmp_Servermonitor.htm"
Vielen Dank!
Beste Grüße
Andy
@Andy
APC
<div class="row">
<div class="">
<br>
<div class="inline">
<div data-type="scale"
data-device="APC"
data-get="BCHARGE"
data-tick="4"
data-extra-tick="20"
data-value-interval="20"
data-orientation="vertical"
data-height="120"
data-width="35px"
data-limits='["0","50","90"]'
data-colors='["#FA2828","#dddd22","#21a000"]'
data-min="0"
data-max="100"
data-part="^(\d+).\d.+$"
style="margin-left: -20px !important;"
class="white darker showdeco"
></div>
<b>Ladestand</b></div>
<div class="inline"></div>
<div class="inline"></div>
<div class="inline"></div>
<div class="inline"></div>
<div class="inline"></div>
<div class="inline"></div>
<div class="inline"></div>
<div class="inline">
<div data-type="scale"
data-device="APC"
data-get="LOADPCT"
data-tick="4"
data-extra-tick="20"
data-value-interval="20"
data-orientation="vertical"
data-height="120"
data-width="35px"
data-limits='["0","50","80"]'
data-colors='["#21a000","#dddd22","#FA2828"]'
data-min="0"
data-max="100"
data-part="^(\d+).\d.+$"
style="margin-left: -20px !important;"
class="white darker showdeco"
></div>
<b>Belastung</b></div>
</div>
</div>
<div class="row">
<div class="center">
<br>
<br>
<div data-type="controlbutton"
data-device="APC"
data-get="STATUS"
data-get-on="ONLINE"
data-get-off="!ONLINE"
data-icon="fa-plug"
data-on-color="white"
data-off-color="white"
data-on-background-color="#21a000"
data-off-background-color="#FA2828"
class=""
><div data-type="label" data-device='APC'
data-get='STATUS'
class="bold"
></div></div>
</div>
</div>
<div class="row">
<div class="">
<br>
<div><b>Restaufzeit:</b></div>
<br>
<div data-type="label" data-device='APC'
data-get='TIMELEFT'
class=""
></div>
</div>
</div>
servermonitor
<div class="inline">
<br>
<div data-type="popup" data-width="400px" data-height="300px">
<div data-type="knob"
data-device="SYSMON2"
data-get="CPU"
data-anglearc="360"
data-angleoffset="0"
data-min="0"
data-max="100"
data-fgcolor="#FA2828"
data-bgcolor="#21a000"
data-nomcolor="white"
class="mini readonly"
data-unit="%"
></div>
<div>CPU</div>
<div class="dialog">
<header>TEMPERATUR</header>
<table align="center" style="width:90%">
<tr>
<td style="" class="A1"><center><div class="inline"></div></td>
<td style="solid grey;" class="A2"><center><div class="inline"><big>Aktuell<br></big></div></td>
<td style="" class="A3"><center><div class="inline"></div></td>
<td style="solid grey;" class="A4"><center><div class="inline"><big>Durchschnitt<br></big></div></td>
</tr>
<tr>
<td style="" class="B1"><center><div class="inline"></div>
<div>CPU1</div>
</td>
<td style="" class="B2"><center><div class="inline"></div>
<div data-type="label"
data-device="sysmon"
data-get="cpu1_temp"
data-unit="%B0C%0A"
data-limits='[0,40]'
data-colors='["#21a000","#FA2828"]'
class="big">
</div>
</td>
<td style="" class="B3"><center><div class="inline"></div></td>
<td style="" class="B4"><center><div class="inline"></div>
<div data-type="label"
data-device="sysmon"
data-get="cpu1_temp_avg"
data-unit="%B0C%0A"
data-limits='[0,40]'
data-colors='["#21a000","#FA2828"]'
class="big">
</div>
</td>
</tr>
<tr>
<td style="" class="C1"><center><div class="inline"></div>
<div>CPU2</div>
</td>
<td style="" class="C2"><center><div class="inline"></div>
<div data-type="label"
data-device="sysmon"
data-get="cpu2_temp"
data-unit="%B0C%0A"
data-limits='[0,40]'
data-colors='["#21a000","#FA2828"]'
class="big">
</div>
</td>
<td style="" class="C3"><center><div class="inline"></div></td>
<td style="" class="C4"><center><div class="inline"></div>
<div data-type="label"
data-device="sysmon"
data-get="cpu2_temp_avg"
data-unit="%B0C%0A"
data-limits='[0,40]'
data-colors='["#21a000","#FA2828"]'
class="big">
</div>
</div>
</td>
</tr>
<br>
</table>
<header class="headerTransparent">AUSLASTUNG</header>
<table align="center" style="width:90%">
<tr>
<td style="" class="A1"><center><div class="inline"></div>
<div>User:</div>
<td style="" class="B1"><center><div class="inline"></div>
<div>System:</div>
<td style="" class="C1"><center><div class="inline"></div>
<div>Idle:</div>
<tr>
<td style="" class="A2"><center><div class="inline"></div>
<div data-type="label"
data-device="sysmon"
data-get="stat_cpu_text"
data-part="2"
data-unit=" %"
data-limits='[0,80]'
data-colors='["#21a000","#FA2828"]'
class="big">
</div>
</td>
<td style="" class="B2"><center><div class="inline"></div>
<div data-type="label"
data-device="sysmon"
data-get="stat_cpu_text"
data-part="8"
data-unit=" %"
data-limits='[0,80]'
data-colors='["#21a000","#FA2828"]'
class="big">
</div>
</td>
<td style="" class="A2"><center><div class="inline"></div>
<div data-type="label"
data-device="sysmon"
data-get="stat_cpu_text"
data-part="11"
data-unit=" %"
data-limits='[0,20]'
data-colors='["#FA2828","#21a000"]'
class="big">
</div>
</td>
</tr>
</table>
</div>
</div>
</div>
<div class="inline">
<div data-type="popup" data-width="240px" data-height="120px">
<div data-type="knob"
data-device="SYSMON2"
data-get="Mem"
data-anglearc="360"
data-angleoffset="0"
data-min="0"
data-max="100"
data-bgcolor="#21a000"
data-fgcolor="#FA2828"
data-nomcolor="white"
class="mini readonly"
data-unit="%"
></div>
<div>RAM</div>
<div class="dialog">
<header>RAM</header>
<table align="center" style="width:90%">
<tr>
<td style="solid grey;" class="A1"><center><div class="inline left"><big>Total:<br></big></div></td>
<td style="" class="B1"><center><div class="inline"></div>
<div data-type="label"
data-device="sysmon"
data-get="ram"
data-part="2"
data-unit="MB"
data-color="#21a000"
class="big top left">
</div>
</td>
</tr>
<tr>
<td style="solid grey;" class="A2"><center><div class="inline left"><big>Belegt:<br></big></div></td>
<td style="" class="B2"><center><div class="inline left"></div>
<div data-type="label"
data-device="SYSMON2"
data-get="Mem"
data-unit=" %"
data-color="#21a000"
class="big top left">
</div>
</td>
</tr>
</table>
</div>
</div>
</div>
<div class="inline">
<div data-type="knob"
data-device="SYSMON2"
data-get="Swap"
data-anglearc="360"
data-angleoffset="0"
data-min="0"
data-max="100"
data-bgcolor="#21a000"
data-fgcolor="#FA2828"
data-nomcolor="white"
class="mini readonly"
data-unit="%"
></div>
<div>SWAP</div>
</div>
<div class="inline">
<div data-type="knob"
data-device="SYSMON2"
data-get="fs_root"
data-anglearc="360"
data-angleoffset="0"
data-min="0"
data-max="100"
data-bgcolor="#21a000"
data-fgcolor="#FA2828"
data-nomcolor="white"
class="mini readonly"
data-unit="%"
></div>
<div>/</div>
</div>
<div class="inline">
<div data-type="knob"
data-device="SYSMON2"
data-get="fs_Daten"
data-anglearc="360"
data-angleoffset="0"
data-min="0"
data-max="100"
data-bgcolor="#21a000"
data-fgcolor="#FA2828"
data-nomcolor="white"
class="mini readonly"
data-unit="%"
></div>
<div>/Daten</div>
</div>
<br>
<br>
<table align="center" style="border:1px solid grey; width:80%">
<tr>
<td style="border:2px solid grey;"><div><big>System load:</big></div></td>
<td style="border:2px solid grey;"><div data-type="label" data-device="sysmon" data-get="loadavg"></div></td>
</tr>
</td>
<td style="border:2px solid grey;" class="C1"><center><div class="inline"><big>Server uptime<br></big></div>
</br>
<div data-type="label" data-device="sysmon" data-get="uptime_text" class="small"></div>
</td>
<td style="border:2px solid grey;" class="C1"><center>
<div data-type="popup" data-width="120px" data-height="80px">
<div data-type="button" data-icon="fa-linux" data-background-icon="fa-circle" data-on-background-color="#3f3d3e" data-off-background-color="#3f3d3e" data-on-color="#4ee02a" data-off-color="#4ee02a" class=""></div>
<div class="dialog">
<header>Neustart Server</header>
<div data-type="input"
data-device="UPDATE.status"
data-set="CODE"
default-value="0000"
data-cmd="setreading"
class="centered"
></div>
<div class="top">PIN!</div>
</div>
</div>
</td>
</table>
</br>
<th><b>Dienste</b></th>
<table>
<center>
<div class="row">
<div class="cell">
<div data-type="symbol"
data-device="SYSMON2"
data-get="RaidStatus"
data-warn="SYSMON2:RaidRebuild"
data-warn-off='no'
data-get-on='["3","4"]'
data-icons='["fa-unlink warn","fa-link"]'
data-colors='["#FA2828","#21a000"]'
></div>
<div class="top-narrow">Raid</div>
</div>
<div class="cell">
<div data-type="symbol"
data-device="Unifi"
data-get="state"
data-get-on='["disconnected","connected"]'
data-icons='["fa-unlink","fa-link"]'
data-colors='["#FA2828","#21a000"]'
></div>
<div class="top-narrow">Unifi</div>
</div>
<div class="cell">
<div data-type="symbol"
data-device="SYSMON2"
data-get="UMS"
data-get-on='["0","1"]'
data-icons='["fa-unlink","fa-link"]'
data-colors='["#FA2828","#21a000"]'
></div>
<div class="top-narrow">UMS</div>
</div>
<div class="cell">
<div data-type="symbol"
data-device="SYSMON2"
data-get="minidlna"
data-get-on='["0","1"]'
data-icons='["fa-unlink","fa-link"]'
data-colors='["#FA2828","#21a000"]'
></div>
<div class="top-narrow">MiniDLNA</div>
</div>
</div>
<div class="row">
<div class="cell">
<div data-type="symbol"
data-device="SYSMON2"
data-get="LMS"
data-get-on='["0","1"]'
data-icons='["fa-unlink","fa-link"]'
data-colors='["#FA2828","#21a000"]'
></div>
<div class="top-narrow">LMS</div>
</div>
<div class="cell">
<div data-type="symbol"
data-device="SYSMON2"
data-get="Samba"
data-get-on='["0","1"]'
data-icons='["fa-unlink","fa-link"]'
data-colors='["#FA2828","#21a000"]'
></div>
<div class="top-narrow">Samba</div>
</div>
<div class="cell">
<div data-type="symbol"
data-device="SYSMON2"
data-get="AFS"
data-get-on='["0","1"]'
data-icons='["fa-unlink","fa-link"]'
data-colors='["#FA2828","#21a000"]'
></div>
<div class="top-narrow">AFS</div>
</div>
<div class="cell">
<div data-type="symbol"
data-device="SYSMON2"
data-get="bind9"
data-get-on='["0","1"]'
data-icons='["fa-unlink","fa-link"]'
data-colors='["#FA2828","#21a000"]'
></div>
<div class="top-narrow">DNS</div>
</div>
</div>
</center>
</div>
Gruß
Eisix
Hallo Eisix,
tolle Templates hast Du da entwickelt.
Ich bin an dem Fhemmonitor und dem Netzwerkmonitor interessiert.
Muss aber zu meiner Schande gestehen das ich nicht den ganzen Thread gelesen habe.
Steht das schon irgendwo so in der Art oder würdest du es hier zeigen.
Gruß Wolfdieter
Hallo Wolfdieter,
fhemmonitor
<body>
<header></header>
<br>
<div class="inline top-narrow left">
<div data-type="symbol" data-device="logdb"
data-get-on='["connected"]'
data-icons='["fa-database"]'
data-colors='["#21a000","#FA2828"]'
class="big top-narrow"
></div>
<div class="top-narrow">Status DB</div>
</div>
<div class="inline right-align left-space-1x">
<div data-type="label" data-device="logdb" data-get="countCurrent"></div>
<div data-type="label" data-device="logdb" data-get="countHistory"></div>
</div>
<div class="inline left-align">
<div>Current</div>
<div>History</div>
</div>
<div class="inline right-align left-space-2x">
<div data-type="label" data-device="DbRep" data-get="INFO_current.data_index_lenth_MB" data-unit=" MB"></div>
<div data-type="label" data-device="DbRep" data-get="INFO_history.data_index_lenth_MB" data-unit=" MB"></div>
</div>
<div class="inline right bottom">
<div data-type="push" data-device="logdb"
data-set-on="count"
data-icon="fa-refresh"
data-color="#aa6900"
class="top-narrow">
</div>
<div>Refresh</div>
</div>
<br>
<br>
<br>
<br>
<center>
<table style="border:1px solid grey; width:80%">
<tr>
<td style="border:2px solid grey;" class="A1"><center><div class="inline"><big>FHEM uptime<br></big></div>
<br>
<div data-type="label" data-device="sysmon" data-get="fhemuptime_text" class="small"></div>
</center>
</td>
<td style="border:2px solid grey;" class="B1">
<div data-type="popup" data-width="120px" data-height="105px">
<div data-type="button" data-icon="fs-system_fhem_reboot" data-on-background-color="orange" data-off-background-color="orange" class="center"></div>
<div class="dialog">
<header>Neustart FHEM</header>
<div data-type="button" data-fhem-cmd="shutdown restart" data-icon="fs-system_fhem"></div>
<div class="top">sicher?</div>
</div>
</div>
</td>
</tr>
<tr>
<td style="border:2px solid grey;" class="A2"><center><div class="inline"><big>FHEM updates<br></big></div>
</center>
</td>
<td style="border:2px solid grey;" class="B2">
<div data-type="popup" data-width="260px" data-height="120px">
<div data-type="symbol" data-device="UPDATE" data-get="ALL" data-background-icon="fa-circle" data-on-background-color="orange" data-off-background-color="orange" data-get-warn="(\d+)" data-icon="fs-system_fhem_update warn" class="warn center"></div>
<div class="dialog">
<header>Update</header>
<br>
<div class="inline">
<div data-type="button"
data-device="UPDATE.status"
data-get="UPDATE.FHEM"
data-warn="UPDATE:FHEM"
data-fhem-cmd="setreading UPDATE.status UPDATE.FHEM run"
data-states='["idle","update","run","done"]'
data-icons='["fa-refresh","fa-refresh fa-blink","fa-refresh fa-spin","fa-refresh"]'
data-on-colors='["darkgrey","red","white","green"]'
data-background-icon="fa-circle"
data-on-background-color="orange"
data-off-background-color="orange"
data-icon="fa-refresh warn"
class="warn"
></div>
<div><small>FHEM</small></div>
</div>
<div class="inline">
<div data-type="button"
data-device="UPDATE.status"
data-get="UPDATE.FTUI"
data-warn="UPDATE:FTUI"
data-fhem-cmd="setreading UPDATE.status UPDATE.FTUI run"
data-states='["idle","update","run","done"]'
data-icons='["fa-refresh","fa-refresh fa-blink","fa-refresh fa-spin","fa-refresh"]'
data-on-colors='["darkgrey","red","white","green"]'
data-background-icon="fa-circle"
data-on-background-color="orange"
data-off-background-color="orange"
data-icon="fa-refresh warn"
class="warn"
></div>
<div><small>FTUI</small></div>
</div>
<div class="inline">
<div data-type="button"
data-device="UPDATE.status"
data-get="UPDATE.ALL"
data-warn="UPDATE:ALL"
data-fhem-cmd="setreading UPDATE.status UPDATE.ALL run"
data-states='["idle","update","run","done"]'
data-icons='["fa-refresh","fa-refresh fa-blink","fa-refresh fa-spin","fa-refresh"]'
data-on-colors='["darkgrey","red","white","green"]'
data-background-icon="fa-circle"
data-on-background-color="orange"
data-off-background-color="orange"
data-icon="fa-refresh warn"
class="warn"
></div>
<div><small>All</small></div>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td style="border:2px solid grey;" class="A3"><center><div class="inline"><big>FHEM rollback<br></big></div>
<br>
</center>
</td>
<td style="border:2px solid grey;" class="B3">
<div data-type="popup" data-width="150px" data-height="105px">
<div data-type="button" data-icon="oa-control_arrow_turn_left" data-on-background-color="orange" data-off-background-color="orange" class="center"></div>
<div class="dialog">
<header>Rollback last updates</header>
<div data-type="button" data-fhem-cmd="rollback" data-icon="fs-system_fhem"></div>
<div class="top">sicher?</div>
</div>
</div>
</td>
</tr>
<tr>
<td style="border:2px solid grey;" class="A4"><center><div class="inline"><big>FHEM backup<br></big></div>
<br>
</center>
</td>
<td style="border:2px solid grey;" class="B4">
<div data-type="popup" data-width="120px" data-height="105px">
<div data-type="button" data-icon="fs-system_backup" data-on-background-color="orange" data-off-background-color="orange" class="center"></div>
<div class="dialog">
<header>Create Backup</header>
<div data-type="button" data-fhem-cmd="backup" data-icon="fs-system_fhem"></div>
<div class="top">sicher?</div>
</div>
</div>
</td>
</tr>
</table>
</center>
</body>
Netzwerkmonitor
<div class="inline">
<br>
<div data-type="popup" data-width="400px" data-height="300px">
<div data-type="symbol"
data-device="Unifi"
data-get="-UC_wlan_state"
data-warn="Unifi:-UC_wlan_users"
data-get-on='["off","ok"]'
data-colors='["blue","#21a000"]'
data-icons='["fa-wifi warn","fa-wifi warn"]'
class="large readonly warn"
></div>
<div>WLAN</div>
<div class="dialog">
<header>Home</header>
<table align="center" style="width:90%">
<tr>
<td style="" class="A1"><center><div class="inline"></div></td>
<td style="solid grey;" class="A2"><center><div class="inline"><big>Aktuell<br></big></div></td>
<td style="" class="A3"><center><div class="inline"></div></td>
<td style="solid grey;" class="A4"><center><div class="inline"><big>Durchschnitt<br></big></div></td>
</tr>
<tr>
<header>Traffic</header>
<div class="inline">
<div class="">Upload:</div>
<div data-type="label"
data-device="sysmon"
data-get="WLAN"
data-part="5"
data-unit="MB"
class="big orange top-space"
></div>
</div>
<div class="inline left-space">
<div class="">Download:</div>
<div data-type="label"
data-device="sysmon"
data-get="WLAN"
data-part="2"
data-unit="MB"
class="big orange top-space"
></div>
</div>
</table>
</div>
</div>
</div>
<div class="inline cell">
</div>
<div class="inline">
<div data-type="popup" data-width="400px" data-height="300px">
<div data-type="symbol"
data-device="Unifi"
data-get="-UC_wlan_guests_state"
data-warn="Unifi:-UC_wlan_guests"
data-warn-on='[0-9]'
data-get-on='["off","ok"]'
data-colors='["blue","#21a000"]'
data-icons='["fa-wifi warn","fa-wifi warn"]'
class="large readonly warn"
></div>
<div>Gast</div>
<div class="dialog">
<header>Gast</header>
<table align="center" style="width:90%">
<tr>
<td style="" class="A1"><center><div class="inline"></div></td>
<td style="solid grey;" class="A2"><center><div class="inline"><big>Aktuell<br></big></div></td>
<td style="" class="A3"><center><div class="inline"></div></td>
<td style="solid grey;" class="A4"><center><div class="inline"><big>Durchschnitt<br></big></div></td>
</tr>
<tr>
<header>Traffic</header>
<div class="inline">
<div class="">Upload:</div>
<div data-type="label"
data-device="sysmon"
data-get="WLAN"
data-part="5"
data-unit="MB"
class="big orange top-space"
></div>
</div>
<div class="inline left-space">
<div class="">Download:</div>
<div data-type="label"
data-device="sysmon"
data-get="WLAN"
data-part="2"
data-unit="MB"
class="big orange top-space"
></div>
</div>
</table>
</div>
</div>
</div>
<div class="inline cell">
</div>
<div class="inline">
<div data-type="popup" data-width="260px" data-height="100px">
<div data-type="knob"
data-device="sysmon"
data-get="LAN_diff"
data-anglearc="360"
data-angleoffset="0"
data-part="8"
data-min="0"
data-max="3750"
data-fgcolor="#FA2828"
data-bgcolor="#21a000"
data-nomcolor="white"
class="mini readonly"
data-unit="MB"
></div>
<div>LAN</div>
<div class="dialog">
<table align="center" style="width:90%">
<tr>
<header>Traffic LAN Interface</header>
<div class="inline">
<div class="">Upload:</div>
<div data-type="label"
data-device="sysmon"
data-get="LAN_diff"
data-part="5"
data-unit="MB"
class="big orange top-space"
></div>
</div>
<div class="inline left-space">
<div class="">Download:</div>
<div data-type="label"
data-device="sysmon"
data-get="LAN_diff"
data-part="2"
data-unit="MB"
class="big orange top-space"
></div>
</div>
</tr>
</table>
</div>
</div>
</div>
<div class="inline cell">
</div>
<div class="inline">
<div data-type="popup" data-width="260px" data-height="100px">
<div data-type="knob"
data-device="sysmon"
data-get="DOCKER_diff"
data-anglearc="360"
data-angleoffset="0"
data-part="8"
data-min="0"
data-max="3750"
data-fgcolor="#FA2828"
data-bgcolor="#21a000"
data-nomcolor="white"
class="mini readonly"
data-unit="MB"
></div>
<div>DOCKER</div>
<div class="dialog">
<table align="center" style="width:90%">
<tr>
<header>Traffic DOCKER Interface</header>
<div class="inline">
<div class="">Upload:</div>
<div data-type="label"
data-device="sysmon"
data-get="DOCKER_diff"
data-part="5"
data-unit="MB"
class="big orange top-space"
></div>
</div>
<div class="inline left-space">
<div class="">Download:</div>
<div data-type="label"
data-device="sysmon"
data-get="DOCKER_diff"
data-part="2"
data-unit="MB"
class="big orange top-space"
></div>
</div>
</tr>
</table>
</div>
</div>
</div>
<!--
<div class="inline">
<div data-type="popup" data-width="260px" data-height="100px">
<div data-type="knob"
data-device="sysmon"
data-get="VLAN_diff"
data-anglearc="360"
data-angleoffset="0"
data-part="8"
data-min="0"
data-max="3750"
data-fgcolor="#FA2828"
data-bgcolor="#21a000"
data-nomcolor="white"
class="mini readonly"
data-unit="MB"
></div>
<div class="dialog">
<table align="center" style="width:90%">
<tr>
<header>Traffic VLAN Interface</header>
<div class="inline">
<div class="">Upload:</div>
<div data-type="label"
data-device="sysmon"
data-get="VLAN_diff"
data-part="5"
data-unit="MB"
class="big orange top-space"
></div>
</div>
<div class="inline left-space">
<div class="">Download:</div>
<div data-type="label"
data-device="sysmon"
data-get="VLAN_diff"
data-part="2"
data-unit="MB"
class="big orange top-space"
></div>
</div>
</tr>
</table>
</div>
<div>VLAN</div>
</div>
</div>
<div class="inline">
<div data-type="popup" data-width="250px" data-height="150px">
<div data-type="knob"
data-device="sysmon"
data-get="VPN_diff"
data-anglearc="360"
data-angleoffset="0"
data-part="8"
data-min="0"
data-max="375"
data-fgcolor="#FA2828"
data-bgcolor="#21a000"
data-nomcolor="white"
class="mini readonly"
data-unit="MB"
></div>
<div class="dialog">
<header>Traffic VPN Interface</header>
<div class="cell inline">
<div class="">Upload:</div>
<div data-type="label"
data-device="sysmon"
data-get="VPN_diff"
data-part="5"
data-unit="MB"
class="big orange top"
></div>
</div>
<div class="cell inline">
<div class="">Download:</div>
<div data-type="label"
data-device="sysmon"
data-get="VPN_diff"
data-part="2"
data-unit="MB"
class="big orange top"
></div>
</div>
<div class="cell">
<div class="">Clients connected: </div>
<div data-type="label"
data-device="SYSMON2"
data-get="OpenVPN"
class="big orange"
></div>
</div>
</div>
</div>
<div>VPN</div>
</div>
<div class="inline">
<div data-type="popup" data-width="260px" data-height="100px">
<div data-type="knob"
data-device="sysmon"
data-get="WAN_diff"
data-anglearc="360"
data-angleoffset="0"
data-part="8"
data-min="0"
data-max="375"
data-fgcolor="#FA2828"
data-bgcolor="#21a000"
data-nomcolor="white"
class="mini readonly"
data-unit="MB"
></div>
<div>WAN</div>
<div class="dialog">
<table align="center" style="width:90%">
<tr>
<header>Traffic WAN Interface</header>
<div class="inline">
<div class="">Upload:</div>
<div data-type="label"
data-device="sysmon"
data-get="WAN_diff"
data-part="5"
data-unit="MB"
class="big orange top-space"
></div>
</div>
<div class="inline left-space">
<div class="">Download:</div>
<div data-type="label"
data-device="sysmon"
data-get="WAN_diff"
data-part="2"
data-unit="MB"
class="big orange top-space"
></div>
</div>
</tr>
</table>
</div>
</div>
</div>
-->
<br></br>
<br>
<th><b>Internetverbindung</b></th>
<br></br>
<div data-type="chart"
data-logdevice='["logdb","logdb","logdb"]'
data-columnspec='["InternetSpeed:ping:::","InternetSpeed:upload:::","InternetSpeed:download:::"]'
data-style='["ftui l3","ftui l6fill","ftui l4fill"]'
data-ptype='["lines","lines","lines"]'
data-uaxis='["secondary","primary","primary"]'
data-legend='["ping","upload","download"]'
data-yunit="Mbit"
data-minvalue="auto"
data-maxvalue="auto"
data-yunit_sec="ms"
data-minvalue_sec="auto"
data-maxvalue_sec="auto"
data-height="150"
data-width="350"
data-daysago_start="1"
data-daysago_end="-1"
data-crosshair="true"
data-cursorgroup="1"
data-scrollgroup="1"
data-showlegend="false"
data-yticks="auto"
data-xticks="auto">
</div>
</div>
</body>
Netzwerk habe ich teilweise rausgenommen da ich gerade was umbaue und mein Server nun weniger Netzwerkinterfaces hat.
Gruß
Eisix
Hallo Zusammen,
hier ein Auszug meiner Darstellungen auf dem Tablet. Ich verwende den Fully-Browser dazu.
Die Bilder stammen allerdings aus dem Firefox, daher ist die eine oder andere Darstellung etwas "seltsam" anzusehen.
Die Werte der Poolsteuerung stammen alle aus dem letzten Jahr (Hier is nix mit baden z.Z.) ;D
Die Palmenheizung läuft auch nicht, da es draußen schon seit Wochen über 0 Grad ist.
Grüße Wolfdieter
Hallo Esix
ich hab den Fhemmonitor integrieren können aber
was ist data-device="UPDATE.status" für ein Device?
Erzeugst du einen Dummy mit all den Updateinfos oder wo kommen die her?
Gruß WDS
Ja, das ist ein Dummy
Internals:
FUUID 5c457ceb-f33f-8e5f-a437-da4d257c49d56003
FVERSION 98_dummy.pm:0.206650/2019-12-06
NAME UPDATE.status
NR 159
STATE update
TYPE dummy
READINGS:
2020-02-02 11:26:20 UPDATE.ALL update
2020-02-02 11:26:20 UPDATE.FHEM update
2020-02-02 11:26:20 UPDATE.FTUI idle
2020-02-02 11:26:20 state update
Attributes:
setList idle update run done
Das ganze habe ich hier im thread glaube ich schon mal erklärt. Wenn du es nicht findest schick mir eine PM dann suche ich es nochmal raus.
Gruß
Eisix
Ich möchte dann auch mal mein Dashboard Projekt vorstellen, was ich seit 12/2019 am basteln bin.
Hardware:
- Raspberry Pi 4, 2 GB
- ConBee II USB Stick mit deCONZ für Zigbee
- 15,6" Asus VT168H Touchscreen
Die Hardware befindet sich auf der Rückseite des Monitors in einem kleinen Gehäuse
Ziel war es, eine kleine Wetterstation und ein altes kleines Tablet mit Livestreamanzeige einer IP-Kamera durch etwas besseres, zukunftsorientiertes zu ersetzen.
Die gesamte Visualisierung entstand mit Tablet UI mittels Gridster von Null begonnen. Ziel war die Darstellung zweier Livestreams sowie einfache Übersichtlichkeit der wichtigsten Informationen.
"Leider" habe ich daran Gefallen gefunden, sodass ich FHEM & Smart-Home kontinuierlich erweitere.
Das Menü rechts im Bild ( v.O.n.U.)
- Apple iCloud Familienkalender mit optischerm Hinweis vor Termin
- Regenradar mit optischer Frostwarnung
- Livestream 3D-Drucker im Keller (und zukünftig Darstellung weiterer Infos des Druckers)
- Systeminformationen (und zukünftig ggf. einige Einstellungsmöglichkeiten)
- "Besucher"-Modus (siehe Bild-06, Blanker Bildschirm, lediglich Darstellung von Uhrzeit & Datum)
- Alles-Aus-Knopf (schaltet alle Lampen aus)
Ich bin ein Freund von Popups. So sind fast alle Temperaturen per Finger mit einem Diagramm hinterlegt, es gibt detailierte Wetterprognosen (Proplanta, hier nicht im Detail gezeigt), die Kalenderdarstellung und das Regenradar sind ebenfalls Popups.
Ganz neu sind die Rolläden, per Shelly-Modul eingebunden. 4 Stück an der Zahl im Wohn- und Essbereich, verfügen je über ein eigenes Symbol, per Finger mit eigenem Circlemenu steuerbar.
Was noch fehlt sind darunter 2-3 kleine Taster, womit alle Rolläden gemeinsam per Hand bedient werden können. Dazu fehlte mir bisher noch die Zeit.
Ansonsten sind viele kleine Gadgets inzwischen auch wieder rausgeflogen, da sie sich als unnötig herausgestellt hatten. Die Einbindung meiner Zentralheizung wäre noch interessant, übersteigt jedoch meine Fähigkeiten und das fehlende Ethernet-Modul ist zu kostenintensiv. Meine FBH ist inzwischen 100% passiv ohne Stellantriebe, weshalb es hier auch nichts mehr einzubinden gibt.
Mal sehen, was die Zukunft noch bringt, das Thema macht auf jeden Fall sau Spaß
Ich will dann auch gerne mal ein screenshot meiner Überarbeitung meiner tabletUI Installation.
Ich wollte das Raumklima darstellen und habe mit meinen Temperatursensoren eine entsprechende Grafik mit logproxy erzeugt.
Ziel ist es also alle Räume im inneren Feld zu halten.
Mit der Spalte rechts bin ich noch nicht glücklich. Da sind noch Fehler drin.
Grüße
Jörg
Zitat von: Eisix am 31 Januar 2020, 20:23:24
@Andy
...
Gruß
Eisix
Hallo,
so hier auch mal ein ganz kleiner Auszug aus meinem FTUI, was nun dank Eisix dazu kam
Beste Grüße
Andy
@Andy
Kannst du mir den USV Teil schicken? Sieht besser aus aus als meins ;)
Der Hintergrund macht auch was her.
Gruß
Eisix
sehr gerne.
hier der USV Anteil. Ich hab das im "flex" Design:
<div class="card lift">
<header>USV Status</header>
<section>
<div class=" col-1-4 left-align left-space ">
<div>Ladestand</div>
<div data-type="label" data-device="USV" data-get="battery.charge" data-fix="0" data-post-text=" %" class="big"></div>
</div>
<div class=" col-3-4 right-align right-space">
<div data-type="scale" data-device="USV" data-get="battery.charge" data-tick="4" data-extra-tick="20" data-value-interval="20" data-orientation="horizontal" data-height="35" data-width="240px" data-limits='["0","50","90"]' data-colors='["#FA2828","#dddd22","#21a000"]' data-min="0" data-max="100" class=""></div>
</div>
</section>
<section>
<div class=" col-1-4 left-align left-space ">
<div>Belastung</div>
<div data-type="label" data-device="USV" data-get="ups.load" data-fix="0" data-post-text=" %" class="big"></div>
</div>
<div class=" col-3-4 right-align right-space">
<div data-type="scale" data-device="USV" data-get="ups.load" data-tick="4" data-extra-tick="20" data-value-interval="20" data-orientation="horizontal" data-height="35" data-width="240px" data-limits='["0","50","80"]' data-colors='["#21a000","#dddd22","#FA2828"]' data-min="0" data-max="100" class="showdeco"></div>
</div>
</section>
<section>
<div class=" col-1-4 left-space">
<div data-type="controlbutton" data-device="USV" data-get="state" data-get-on="OL" data-get-off="!OL" data-icon="fa-plug" data-on-color="white" data-off-color="white" data-on-background-color="#21a000" data-off-background-color="#FA2828" class=""> </div>
</div>
<div class=" col-1-3 left-align">
<div data-type="label" data-device='USV' data-get='state' data-substitution='["OL","Online"]' class="big"></div>
<div data-pre-text="Update vor " data-type="label" data-device="USV" data-get="state" data-substitution="toDate().ago2()" class="small inline timestamp darker"></div>
</div>
<div class=" col-1-3 right-align right-space">
<div>Restaufzeit</div>
<div data-type="label" data-device="USV" data-get="runtime-minutes" data-fix="0" data-post-text=" Minuten" class="big"></div>
</div>
</section>
</div>
das Background Bild hab ich angehängt. Damit das funktionoert, muss man sich ne eigene CSS-Datei erstellen, welche auch in der index.html erwähnt wird. Die css muss dann dies enthalten:
body {
background-image: url(Background_01.png);
background-repeat: repeat;
background-size: 10% !important;
}
Ich hab die Background Datei am gleichen Pfand, wie die eigene CSS.
Beste Grüße
Andy
Zitat von: Dracolein am 07 Februar 2020, 12:16:16
Ich möchte dann auch mal mein Dashboard Projekt vorstellen, was ich seit 12/2019 am basteln bin.
Hardware:
- Raspberry Pi 4, 2 GB
- ConBee II USB Stick mit deCONZ für Zigbee
- 15,6" Asus VT168H Touchscreen
Die Hardware befindet sich auf der Rückseite des Monitors in einem kleinen Gehäuse
Ziel war es, eine kleine Wetterstation und ein altes kleines Tablet mit Livestreamanzeige einer IP-Kamera durch etwas besseres, zukunftsorientiertes zu ersetzen.
Die gesamte Visualisierung entstand mit Tablet UI mittels Gridster von Null begonnen. Ziel war die Darstellung zweier Livestreams sowie einfache Übersichtlichkeit der wichtigsten Informationen.
"Leider" habe ich daran Gefallen gefunden, sodass ich FHEM & Smart-Home kontinuierlich erweitere.
Das Menü rechts im Bild ( v.O.n.U.)
- Apple iCloud Familienkalender mit optischerm Hinweis vor Termin
- Regenradar mit optischer Frostwarnung
- Livestream 3D-Drucker im Keller (und zukünftig Darstellung weiterer Infos des Druckers)
- Systeminformationen (und zukünftig ggf. einige Einstellungsmöglichkeiten)
- "Besucher"-Modus (siehe Bild-06, Blanker Bildschirm, lediglich Darstellung von Uhrzeit & Datum)
- Alles-Aus-Knopf (schaltet alle Lampen aus)
Ich bin ein Freund von Popups. So sind fast alle Temperaturen per Finger mit einem Diagramm hinterlegt, es gibt detailierte Wetterprognosen (Proplanta, hier nicht im Detail gezeigt), die Kalenderdarstellung und das Regenradar sind ebenfalls Popups.
Ganz neu sind die Rolläden, per Shelly-Modul eingebunden. 4 Stück an der Zahl im Wohn- und Essbereich, verfügen je über ein eigenes Symbol, per Finger mit eigenem Circlemenu steuerbar.
Was noch fehlt sind darunter 2-3 kleine Taster, womit alle Rolläden gemeinsam per Hand bedient werden können. Dazu fehlte mir bisher noch die Zeit.
Ansonsten sind viele kleine Gadgets inzwischen auch wieder rausgeflogen, da sie sich als unnötig herausgestellt hatten. Die Einbindung meiner Zentralheizung wäre noch interessant, übersteigt jedoch meine Fähigkeiten und das fehlende Ethernet-Modul ist zu kostenintensiv. Meine FBH ist inzwischen 100% passiv ohne Stellantriebe, weshalb es hier auch nichts mehr einzubinden gibt.
Mal sehen, was die Zukunft noch bringt, das Thema macht auf jeden Fall sau Spaß
Kannst du mal den Teil mit der Rollosteuerung als code posten? Sieht schöner gelöst aus als bei mir.
Zitat von: Stonemuc am 08 Februar 2020, 19:36:06
Kannst du mal den Teil mit der Rollosteuerung als code posten? Sieht schöner gelöst aus als bei mir.
Klar,hier
<!-- Rollosteuerung -->
<div class="sheet">
<div class="row">
<div class="col">
<div class="sheet">
<div class="row">
<div class="col">
<!-- Symbol Rolladen 1 -->
<div data-type="circlemenu" class="noshade keepopen">
<ul>
<li><div data-type="symbol" data-device="shelly1" data-get="pct" class="large"
data-get-on='["0","10","20","30","40","50","60","70","80","90","100"]'
data-icons='["oa-fts_shutter_100","oa-fts_shutter_90","oa-fts_shutter_80","oa-fts_shutter_70","oa-fts_shutter_60","oa-fts_shutter_50","oa-fts_shutter_40","oa-fts_shutter_30","oa-fts_shutter_20","oa-fts_shutter_10","oa-fts_shutter_10"]'
data-colors='["gray","orange","orange","orange","orange","orange","orange","orange","orange","orange","green"]'></div></li>
<li><div data-type="push" data-device="shelly1" data-set-on="stop" data-icon="fa-stop"></div></li>
<li><div data-type="push" data-device="shelly1" data-set-on="pct 0" data-icon="fa-angle-down"></div></li>
<li><div data-type="push" data-device="shelly1" data-set-on="pct 80" data-icon="">80</div></li>
<li><div data-type="push" data-device="shelly1" data-set-on="pct 70" data-icon="">60</div></li>
<li><div data-type="push" data-device="shelly1" data-set-on="pct 55" data-icon="">40</div></li>
<li><div data-type="push" data-device="shelly1" data-set-on="pct 26" data-icon="">20</div></li>
<li><div data-type="push" data-device="shelly1" data-set-on="pct 100" data-icon="fa-angle-up"></div></li>
</ul>
</div>
</div>
<div class="col">
<!-- Symbol Rolladen 2 -->
<div data-type="circlemenu" class="noshade keepopen">
<ul>
<li><div data-type="symbol" data-device="shelly2" data-get="pct" class="large"
data-get-on='["0","10","20","30","40","50","60","70","80","90","100"]'
data-icons='["oa-fts_shutter_100","oa-fts_shutter_90","oa-fts_shutter_80","oa-fts_shutter_70","oa-fts_shutter_60","oa-fts_shutter_50","oa-fts_shutter_40","oa-fts_shutter_30","oa-fts_shutter_20","oa-fts_shutter_10","oa-fts_shutter_10"]'
data-colors='["gray","orange","orange","orange","orange","orange","orange","orange","orange","orange","green"]'></div></li>
<li><div data-type="push" data-device="shelly2" data-set-on="stop" data-icon="fa-stop"></div></li>
<li><div data-type="push" data-device="shelly2" data-set-on="pct 0" data-icon="fa-angle-down"></div></li>
<li><div data-type="push" data-device="shelly2" data-set-on="pct 80" data-icon="">80</div></li>
<li><div data-type="push" data-device="shelly2" data-set-on="pct 70" data-icon="">60</div></li>
<li><div data-type="push" data-device="shelly2" data-set-on="pct 55" data-icon="">40</div></li>
<li><div data-type="push" data-device="shelly2" data-set-on="pct 26" data-icon="">20</div></li>
<li><div data-type="push" data-device="shelly2" data-set-on="pct 100" data-icon="fa-angle-up"></div></li>
</ul>
</div>
</div>
<div class="col">
<!-- Symbol Rolladen 3 -->
<div data-type="circlemenu" class="noshade keepopen">
<ul>
<li><div data-type="symbol" data-device="shelly3" data-get="pct" class="large"
data-get-on='["0","10","20","30","40","50","60","70","80","90","100"]'
data-icons='["oa-fts_shutter_100","oa-fts_shutter_90","oa-fts_shutter_80","oa-fts_shutter_70","oa-fts_shutter_60","oa-fts_shutter_50","oa-fts_shutter_40","oa-fts_shutter_30","oa-fts_shutter_20","oa-fts_shutter_10","oa-fts_shutter_10"]'
data-colors='["gray","orange","orange","orange","orange","orange","orange","orange","orange","orange","green"]'></div></li>
<li><div data-type="push" data-device="shelly3" data-set-on="stop" data-icon="fa-stop"></div></li>
<li><div data-type="push" data-device="shelly3" data-set-on="pct 0" data-icon="fa-angle-down"></div></li>
<li><div data-type="push" data-device="shelly3" data-set-on="pct 80" data-icon="">80</div></li>
<li><div data-type="push" data-device="shelly3" data-set-on="pct 60" data-icon="">60</div></li>
<li><div data-type="push" data-device="shelly3" data-set-on="pct 40" data-icon="">40</div></li>
<li><div data-type="push" data-device="shelly3" data-set-on="pct 20" data-icon="">20</div></li>
<li><div data-type="push" data-device="shelly3" data-set-on="pct 100" data-icon="fa-angle-up"></div></li>
</ul>
</div>
</div>
<div class="col">
<!-- Symbol Rolladen 4 -->
<div data-type="circlemenu" class="noshade keepopen">
<ul>
<li><div data-type="symbol" data-device="shelly4" data-get="pct" class="large"
data-get-on='["0","10","20","30","40","50","60","70","80","90","100"]'
data-icons='["oa-fts_shutter_100","oa-fts_shutter_90","oa-fts_shutter_80","oa-fts_shutter_70","oa-fts_shutter_60","oa-fts_shutter_50","oa-fts_shutter_40","oa-fts_shutter_30","oa-fts_shutter_20","oa-fts_shutter_10","oa-fts_shutter_10"]'
data-colors='["gray","orange","orange","orange","orange","orange","orange","orange","orange","orange","green"]'></div></li>
<li><div data-type="push" data-device="shelly4" data-set-on="stop" data-icon="fa-stop"></div></li>
<li><div data-type="push" data-device="shelly4" data-set-on="pct 0" data-icon="fa-angle-down"></div></li>
<li><div data-type="push" data-device="shelly4" data-set-on="pct 80" data-icon="">80</div></li>
<li><div data-type="push" data-device="shelly4" data-set-on="pct 60" data-icon="">60</div></li>
<li><div data-type="push" data-device="shelly4" data-set-on="pct 40" data-icon="">40</div></li>
<li><div data-type="push" data-device="shelly4" data-set-on="pct 20" data-icon="">20</div></li>
<li><div data-type="push" data-device="shelly4" data-set-on="pct 100" data-icon="fa-angle-up"></div></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col top-narrow-2x">
<!-- untere Zeile -->
<div class="sheet">
<div class="row">
<div class="col" style="width:30px">
<!-- leere Zeile -->
</div>
<div class="col top-space" style="width:100px">
<div class="normal darker">Automatik:</div>
<div data-type="switch" data-device="Rolloautomatikschalter" class="" data-states='["off","on"]' data-icons='["fa-power-off", "fa-power-off"]' data-colors='["#720000", "green"]' data-background-colors='["lightgray", "#515151"]'></div>
</div>
<div class="col" style="width:170px">
<!-- Anzeige Rolloautomatik Zeitanzeige -->
<div class="top-space-2x bottom-space small darker">Nächste Schaltzeit:</div>
<!-- wird angezeigt wenn Rolloautomatik aus ist -->
<div data-type="classchanger" data-device="Rolloautomatikschalter" data-get="state" data-get-on="off" data-on-class="hide">
<div data-type="label" data-device="Rolladenautomatik" data-get="timer_01_c01" data-unit="Uhr" class="normal darker"></div>
<div data-type="label" data-device="Rolladenautomatik" data-get="timer_02_c02" data-unit="Uhr" class="normal darker"></div>
</div>
<!-- wird angezeigt wenn Rolloautomatik an ist -->
<div data-type="classchanger" data-device="Rolloautomatikschalter" data-get="state" data-get-on="on" data-on-class="hide">
<div class="small darker">Automatik inaktiv</div>
</div>
</div>
<div class="col top-space-2x" style="width:60px">
<!-- Button Alle Rollos Ab -->
<div data-type="switch" data-device="alleRollosAb" data-icon="fa fa-chevron-circle-down" data-color="lightgray" data-set-on="on"></div>
</div>
<div class="col top-space-2x" style="width:60px">
<!-- Button Alle Rollos Stop -->
<div data-type="switch" data-device="alleRollosStop" data-icon="fa fa-stop-circle" data-color="lightgray" data-set-on="on"></div>
</div>
<div class="col top-space-2x" style="width:60px">
<!-- Button Alle Rollos Auf -->
<div data-type="switch" data-device="alleRollosAuf" data-icon="fa fa-chevron-circle-up" data-color="lightgray" data-set-on="on"></div>
</div>
</div>
</div><!-- Ende untere Zeile -->
</div>
</div>
</div>
</div>
</div>
</div>
</div><!-- Ende Sheet -->
Inzwischen sind die Sammel-Buttons hinzugekommen und die Rolläden werden einzeln farbig dargestellt (orange="unterwegs", grau=geschlossen, grün=geöffnet)
Nachdem ja für heute das Sturmtief "Sabine" mit Orkanböen ansteht, habe ich mich mal um meine Wettertrendseiten gekümmert.
Auf die Schnelle ist ein Windtrend abgeleitet aus dem bekannten Chart-Beispiel "Darstellung der Wetter Icons im Diagramm" hinzu gekommen.
Auf der Windtrend-Seite ist die Idee der Vorhersage Wind / Regen für die nächsten 7 bzw. 3 Tage.
<li class="halbTransparent" data-row="2" data-col="2" data-sizex="7" data-sizey="2">
<header class="headerTransparent">Wind / Regen 7 Tage</header>
<div class="nobuttons fullsize"
data-type="chart"
data-device="AgroWeather"
data-logdevice='[
"logProxy",
"logProxy",
"logProxy"
]'
data-columnspec='[
"Func:logProxy_proplanta2Plot(\\x22AgroWeather\\x22,\\x22weatherIcon\\x22,$from,$to,12,\\x22day\\x22)",
[
"Func:logProxy_proplanta2Plot(\\x22AgroWeather\\x22,\\x22gust_\\x22,$from,$to,12,\\x22day\\x22)",
"Func:logProxy_proplanta2Plot(\\x22AgroWeather\\x22,\\x22wind_\\x22,$from,$to,12,\\x22day\\x22)"
],
"Func:logProxy_proplanta2Plot(\\x22AgroWeather\\x22,\\x22rain_\\x22,$from,$to,12,\\x22day\\x22)"
]'
data-style='[
"ftui l99icon",
["fill",["-40","#dfe100","1.0"],["0","#00de43","0"],["0","#00de43","0"],["90","#de1e00","1.0"]],
"ftui l5fill"
]'
data-ptype='[
"icons:1",
"cubic",
"steps"
]'
data-uaxis='[
"primary",
"primary",
"secondary"
]'
data-legend='[
"Wetterbedingung",
"Wind",
"Niederschlag"
]'
data-legendpos='["behind","top"]'
data-showlegend="true"
data-minvalue="auto"
data-maxvalue="auto"
data-minvalue_sec="0"
data-maxvalue_sec="20"
data-xticks="720"
data-yticks="auto"
data-yunit=" km/h"
data-yunit_sec=" mm"
data-y_margin="20"
data-width="90%"
data-height="280px"
data-daysago_start = "now"
data-daysago_end = "-7d"
data-timeformat="hh\LF\ee\LF\dd.MM.."
data-nofulldays='true'
></div>
</li>
<li class="halbTransparent" data-row="4" data-col="2" data-sizex="7" data-sizey="2">
<header class="headerTransparent">Wind / Regen 3 Tage</header>
<div class="nobuttons fullsize"
data-type="chart"
data-device="AgroWeather"
data-logdevice='[
"logProxy",
"logProxy",
"logProxy"
]'
data-columnspec='[
"Func:logProxy_proplanta2Plot(\\x22AgroWeather\\x22,\\x22weatherIcon\\x22,$from,$to,12,\\x22day\\x22)",
[
"Func:logProxy_proplanta2Plot(\\x22AgroWeather\\x22,\\x22gust_\\x22,$from,$to,12,\\x22day\\x22)",
"Func:logProxy_proplanta2Plot(\\x22AgroWeather\\x22,\\x22wind_\\x22,$from,$to,12,\\x22day\\x22)"
],
"Func:logProxy_proplanta2Plot(\\x22AgroWeather\\x22,\\x22rain_\\x22,$from,$to,12,\\x22day\\x22)"
]'
data-style='[
"ftui l99icon",
["fill",["-40","#dfe100","1.0"],["0","#00de43","0"],["0","#00de43","0"],["90","#de1e00","1.0"]],
"ftui l5fill"
]'
data-ptype='[
"icons:1",
"cubic",
"steps"
]'
data-uaxis='[
"primary",
"primary",
"secondary"
]'
data-legend='[
"Wetterbedingung",
"Wind",
"Niederschlag"
]'
data-legendpos='["behind","top"]'
data-showlegend="true"
data-minvalue="auto"
data-maxvalue="auto"
data-minvalue_sec="0"
data-maxvalue_sec="20"
data-xticks="720"
data-yticks="auto"
data-yunit=" km/h"
data-yunit_sec=" mm"
data-y_margin="20"
data-width="90%"
data-height="280px"
data-daysago_start = "now"
data-daysago_end = "-3d"
data-timeformat="hh\LF\ee\LF\dd.MM.."
data-nofulldays='true'
></div>
</li>
Auf der Windtrend2-Seite ist die Idee der Darstellung des tatsächlichen Ist und darunter der Tagesvorhersage Wind.
Ich nehme gerne Anregungen in Bezug auf Farben bzw. Fehler oder andere Optimierungen auf.
Grüße
Jörg
Zitat von: Dracolein am 07 Februar 2020, 12:16:16
Ich möchte dann auch mal mein Dashboard Projekt vorstellen, was ich seit 12/2019 am basteln bin.
Hardware:
- Raspberry Pi 4, 2 GB
- ConBee II USB Stick mit deCONZ für Zigbee
- 15,6" Asus VT168H Touchscreen
Die Hardware befindet sich auf der Rückseite des Monitors in einem kleinen Gehäuse
Ziel war es, eine kleine Wetterstation und ein altes kleines Tablet mit Livestreamanzeige einer IP-Kamera durch etwas besseres, zukunftsorientiertes zu ersetzen.
Die gesamte Visualisierung entstand mit Tablet UI mittels Gridster von Null begonnen. Ziel war die Darstellung zweier Livestreams sowie einfache Übersichtlichkeit der wichtigsten Informationen.
"Leider" habe ich daran Gefallen gefunden, sodass ich FHEM & Smart-Home kontinuierlich erweitere.
Das Menü rechts im Bild ( v.O.n.U.)
- Apple iCloud Familienkalender mit optischerm Hinweis vor Termin
- Regenradar mit optischer Frostwarnung
- Livestream 3D-Drucker im Keller (und zukünftig Darstellung weiterer Infos des Druckers)
- Systeminformationen (und zukünftig ggf. einige Einstellungsmöglichkeiten)
- "Besucher"-Modus (siehe Bild-06, Blanker Bildschirm, lediglich Darstellung von Uhrzeit & Datum)
- Alles-Aus-Knopf (schaltet alle Lampen aus)
Ich bin ein Freund von Popups. So sind fast alle Temperaturen per Finger mit einem Diagramm hinterlegt, es gibt detailierte Wetterprognosen (Proplanta, hier nicht im Detail gezeigt), die Kalenderdarstellung und das Regenradar sind ebenfalls Popups.
Ganz neu sind die Rolläden, per Shelly-Modul eingebunden. 4 Stück an der Zahl im Wohn- und Essbereich, verfügen je über ein eigenes Symbol, per Finger mit eigenem Circlemenu steuerbar.
Was noch fehlt sind darunter 2-3 kleine Taster, womit alle Rolläden gemeinsam per Hand bedient werden können. Dazu fehlte mir bisher noch die Zeit.
Ansonsten sind viele kleine Gadgets inzwischen auch wieder rausgeflogen, da sie sich als unnötig herausgestellt hatten. Die Einbindung meiner Zentralheizung wäre noch interessant, übersteigt jedoch meine Fähigkeiten und das fehlende Ethernet-Modul ist zu kostenintensiv. Meine FBH ist inzwischen 100% passiv ohne Stellantriebe, weshalb es hier auch nichts mehr einzubinden gibt.
Mal sehen, was die Zukunft noch bringt, das Thema macht auf jeden Fall sau Spaß
Hi
Darf ich mal Fragen was Du für Kameras hast und wie du das Livebild einbindest?
VG Alex
Zitat von: majestro84 am 09 Februar 2020, 15:48:50
Hi
Darf ich mal Fragen was Du für Kameras hast und wie du das Livebild einbindest?
VG Alex
Modul SSCAM.
FHEM bzw. Tablet UI dient ausschließlich der Livestream-Darstellung. Das gesamte Surveillance-Management (Bewegung erkennen, Sequenzen aufnehmen und abspeichern, ggf. Meldungen versenden) erledigt die Synology
Zitat von: Dracolein am 10 Februar 2020, 08:41:24
Modul SSCAM.
FHEM bzw. Tablet UI dient ausschließlich der Livestream-Darstellung. Das gesamte Surveillance-Management (Bewegung erkennen, Sequenzen aufnehmen und abspeichern, ggf. Meldungen versenden) erledigt die Synology
OK vielen Dank.
Zitat von: Dracolein am 10 Februar 2020, 08:41:24
Modul SSCAM.
FHEM bzw. Tablet UI dient ausschließlich der Livestream-Darstellung. Das gesamte Surveillance-Management (Bewegung erkennen, Sequenzen aufnehmen und abspeichern, ggf. Meldungen versenden) erledigt die Synology
Das mit dem Kameras interessiert mich auch mal, wie die von der Surveillance Station übertragen werden.
Ich habe mir mal auf einem kleinen freien PC Xpenology installiert und das arbeitet genau wie eine Synology.. ich habe mich damit noch nicht groß beschäftigt nur mal meine beiden Mobotix Kameras installiert in der Surveillance Station und wollte mal fragen da ich bisher nur Livestreams drin habe ob die auch einfach nur Bilder der Kamera aufnehmen kann.
Wie gesagt ich bin da noch absoluter Laie was die Surveillance betrifft.
Zitat von: moonsorrox am 10 Februar 2020, 11:58:57
Das mit dem Kameras interessiert mich auch mal, wie die von der Surveillance Station übertragen werden.
Ich habe mir mal auf einem kleinen freien PC Xpenology installiert und das arbeitet genau wie eine Synology.. ich habe mich damit noch nicht groß beschäftigt nur mal meine beiden Mobotix Kameras installiert in der Surveillance Station und wollte mal fragen da ich bisher nur Livestreams drin habe ob die auch einfach nur Bilder der Kamera aufnehmen kann.
Wie gesagt ich bin da noch absoluter Laie was die Surveillance betrifft.
Da ich selbst kein Experte bin:
FHEM Wiki zum Modul: https://wiki.fhem.de/wiki/SSCAM_-_Steuerung_von_Kameras_in_Synology_Surveillance_Station
FHEM Thread zum Modul: https://forum.fhem.de/index.php/topic,45671.1890.html
Zur Synology gibts im Netz massenhaft Informationen und YouTube Tutorials, wie man dort das AddOn "Surveillance Station" installiert und konfiguriert. Alle gängigen IP fähigen Kameras sind dort bereits vorkonfiguriert und man kann sich seine Konfiguration kinderleicht zusammenklicken.
Ich habe das auch schon wie du so schön sagst, massenhaft gefunden.
Ist auch alles installiert und auch soweit konfiguriert und funktioniert auch, nur ich habe eben nichts dazu gefunden, was das einfache übertragen von Bilder der Kameras betrifft.
Ok, ich werde mal versuchen dazu etwas zu finden. ;)
Zitat von: moonsorrox am 10 Februar 2020, 12:21:11
Ich habe das auch schon wie du so schön sagst, massenhaft gefunden.
Ist auch alles installiert und auch soweit konfiguriert und funktioniert auch, nur ich habe eben nichts dazu gefunden, was das einfache übertragen von Bilder der Kameras betrifft.
Ok, ich werde mal versuchen dazu etwas zu finden. ;)
https://wiki.fhem.de/wiki/SSCAM_-_Steuerung_von_Kameras_in_Synology_Surveillance_Station#MJPEG_direkt_von_Kamera_wiedergeben
vielen Dank, dass hatte ich hier im Forum noch gar nicht gesucht, da ich die Synology erst vor 2 Wochen installiert hatte.
Da habe ich genug Material zum lesen ;)
ein paar Impressionen meiner FTUI und grafana Implementierung ...
Wahnsinn was da an Technik gesteuert wird.
Das beste ist die Meldung
ZitatToaster fertig
;D ;D ;D
Zitat von: Dracolein am 11 Februar 2020, 08:40:11
Das beste ist die Meldung ;D ;D ;D
ja, das bringt manche Besucher zum Schmunzeln, weil das auch per Sprachausgabe angesagt wird ;)
Zitat von: Dracolein am 11 Februar 2020, 08:40:11
Wahnsinn was da an Technik gesteuert wird.
Das beste ist die Meldung ;D ;D ;D
Fehlt nur noch "Toast geschmiert" ;)
Dumme Frage, was ist das denn für ein Toaster? ;D
Zitat von: grossmaggul am 11 Februar 2020, 18:34:17
Dumme Frage, was ist das denn für ein Toaster? ;D
ein FHEM-Toaster ;) ;)
Wenn man den RPI gut belastet, kann man darauf auch toasten ;)
Zitat
@Andy
Kannst du mir den USV Teil schicken? Sieht besser aus aus als meins ;)
Der Hintergrund macht auch was her.
Sieht dann bei mir so aus.
Gruß
Eisix
Zitat von: Wetterhexe am 11 Februar 2020, 09:45:01
ja, das bringt manche Besucher zum Schmunzeln, weil das auch per Sprachausgabe angesagt wird ;)
Sehr schönes TabletUI
2 Fragen (vorerst :-)
Wie hast du das mit der Sprachausgabe gemacht. Kannst du das coding bitte dafür posten.
Wie hast du das mit dem Wasserzähler gemacht? (oder ist das schon einer mit Schnittstelle?)
Danke
Jörg
die Sprachausgabe läuft über einen raspberry und das text2speech Modul ... Details stehen im Wiki https://wiki.fhem.de/wiki/Text2Speech (https://wiki.fhem.de/wiki/Text2Speech)
der Wasserzähler ist leider ohne Schnittstelle :'( Die Idee zur Abtastung stammt von hier https://www.stall.biz/project/impulsgeber-fuer-den-wasserzaehler-selbst-gebaut (https://www.stall.biz/project/impulsgeber-fuer-den-wasserzaehler-selbst-gebaut)
Das funktioniert leider nicht ganz so exakt wie ich gern hätte, ein paar Ideen zur Verbesserung schweben mir im Kopf aber im Moment fehlts an Zeit.
Hier auch mal meine neu erstellte FTUI. die anderen Pagetabs müssen noch erstell werden. Auf dem Tablet sind die Formatierungen genauer da das hier ein screen eines kleineen Browserfenster ist.
Hallo in die Runde,
nun habe ich hier im Forum einige Jahre gelesen und mir sehr viele, nützliche Tips abholen können. Dafür mal ein herzliches Dankeschön an Alle.
Nicht nur das Backend ist inzwischen ziemlich umfangreich mit RasPi4, RasPi3, RaspberryMatic auf einem weiteren Pi3, HM CCU2, 2 Hue Bridges, Aurora Nanoleaf, LaCrosse, EnerGenie, USVs und diversem Kleinkram. :)
Und damit der WAF auch gegeben ist, gibt es als Frontend QuickFhem auf den Smartphones und in der Wohnung hängen 2 Tablets mit FTUI als Oberfläche mit dem Fully Browser.
Mein Ziel ist es, daß die Wohnung soweit wie möglich "Smart" ist, d.h. vieles soll tatsächlich automatisch laufen, je nach Gegebenheit und Anforderung.
Ein Beispiel ist, daß der Kaffeevollautomat an einer HMIP_PSM steckt und wenn morgens in einem bestimmten Zeitraum (Arbeitsbeginn anhand Kalendereinträgen dem System bekannt) der Stromverbrauch steigt, bedeutet dies, ein bestimmter Bewohner ist aufgewacht und kann entsprechend auf "awoken" gestellt werden, was dann wiederum durch DOIF und notify diverse Aktionen auslöst.
Ich bin zwar noch lange nicht fertig - wie wohl die wenigsten hier im Forum - da es immer neue Ideen gibt und die Technik sich weiterentwickelt und somit weitere Möglichkeiten eröffnet.
Natürlich geht es mir so wie vielen Anderen auch, es erwachsen Bedürfnisse beim Bauen, von denen man vorher noch garnicht wußte, daß diese vorhanden sind. ;)
So nun genug geschwätzt. Ich schreibe hier eigentlich, weil ich euch mal meine FTUI Oberfläche zeigen möchte.
Vielen Dank nochmal für alle Infos hier im Forum.
Liebe Grüße
Mario
edit: einen Screenshot vergessen
Na. Dann sind wir anscheinend Nachbarn ;)
Schöne Web UI
Danke sehr amenomade.
Gleicher Ort oder nur Gegend?
Hallo margu
Das sieht ja schon super aus. Ich habe so etwas ähnliches schon seit ca. 3 Jahren in Betrieb , aber man kann sich ja immer wieder Anregungen holen, zB bei dir.
Deshalb würde mich interessieren wie das mit dem Wetter1.jpg gemacht hast, das sieht echt gut aus.
Hallo sam50 und vielen Dank.
Das Wetterwidget habe ich anhand der Beispiele in der Chart-Wiki (https://wiki.fhem.de/wiki/FTUI_Widget_Chart#Darstellung_der_Wetter_Icons_im_Diagramm) aufgebaut. Dort ist erklärt wie die Wetter-Icons in das Chart kommen. Unter Punkt 4.2 ist dann noch erklärt wie die Farbverläufe gemacht werden.
Hallo margu
Danke für die info. Werde ich mir Mal anschauen
Hallo margu
Könntest die mir die Definition aus deinem Tablet FTUI für das Chart Widget zur Verfügung stellen. Ich habe es zwar schon einigermaßen hinbekommen, aber es hackt immer noch an der Darstellung. Wäre mir eine große Hilfe.
Danke schon mal im voraus.
Hi sam50,
klar, kein Problem. Du mußt nur "AgroWeather" durch dein Device ersetzen.
<li data-row="4" data-col="1" data-sizex="13" data-sizey="7">
<header class="normal">7-Tage-Vorhersage für Langen</header>
<div class="nobuttons small"
data-type="chart"
data-logdevice='[
"lp",
"lp",
"lp"
]'
data-columnspec='[
"Func:logProxy_proplanta2Plot(\\x22AgroWeather\\x22,\\x22weatherDayIcon\\x22,$from,$to,12,\\x22day\\x22)",
[
"Func:logProxy_proplanta2Plot(\\x22AgroWeather\\x22,\\x22tempMax\\x22,$from,$to,12,\\x22day\\x22)",
"Func:logProxy_proplanta2Plot(\\x22AgroWeather\\x22,\\x22tempMin\\x22,$from,$to,12,\\x22day\\x22)"
],
"Func:logProxy_proplanta2Plot(\\x22AgroWeather\\x22,\\x22rain_\\x22,$from,$to,12,\\x22day\\x22)"
]'
data-style='[
"ftui l99icon",
["fill",["-40","#00A1DE","1.0"],["0","#00A1DE","0"],["0","#ba4a00 ","0"],["400","#ba4a00","1.0"]],
"ftui l5fill"
]'
data-ptype='[
"icons:1",
"cubic",
"steps"
]'
data-uaxis='[
"primary",
"primary",
"secondary"
]'
data-legend='[
"Wetterbedingung",
"Temperatur",
"Niederschlag"
]'
data-legendpos='["right","top"]'
data-legend_horiz="true"
data-showlegend="false"
data-minvalue="auto"
data-maxvalue="auto"
data-minvalue_sec="0"
data-maxvalue_sec="20"
data-xticks="720"
data-yticks="auto"
data-yunit="°C"
data-yunit_sec="mm"
data-y_margin="20"
data-ytext="Temperature (°C)"
data-ytext_sec="Niederschlag (mm)"
data-width="98%"
data-height="98%"
data-nofulldays='true'
data-daysago_start = "0"
data-daysago_end = "-7d"
data-timeformat="hh:mm\LF\eeee\LF\dd.MM.."
>
</div>
</li>
Zitat von: Andy89 am 08 Februar 2020, 17:18:47
Hallo,
so hier auch mal ein ganz kleiner Auszug aus meinem FTUI, was nun dank Eisix dazu kam
Beste Grüße
Andy
Hi Andy,
hättest Du Lust weitere Seiten zu teilen? Ich finde die gezeigte Seite mega und würde gerne mehr sehen :-)
Wobei sehen schon fast zu wenig ist, da meine html und css Skills mehr als begrenzt sind.
Viele Grüße
Marc
Hallo margu
Vielen Dank, ich war gar nicht so weit weg, lediglich im "data-columnspec" und im "data-style" hatte ich noch ein paar Fehler.
Vielen Dank funktioniert super
Moin moin,
ich bin begeistert von dem was hier zu Verfügung gestellt wird. Ich bin relativ neu hier und stelle meine Startseite hier auch gerne zu Verfügung
VG Thomas
schau dir auch mal die neue Version 3 an, da wird schon reges Interesse gezeigt.
Die läuft auch schon richtig gut....
in dieser Rubrik (https://forum.fhem.de/index.php?topic=115259.new;topicseen#new)hier und alles was mit FTUI 3 beschrieben ist
@Dracolein
Hi Dracolein
könntest du mir vielleicht deinen Code von der ich nenne es mal Startseite geben? Also dort wo deine Zeit und Sonnenaufgang drauf steht.
Danke schon mal im vorraus