fertiges Pagebutton Multi-Menü für Anfänger/ User mit wenig Zeit

Begonnen von Gunther, 15 Februar 2017, 01:08:04

Vorheriges Thema - Nächstes Thema

Gunther

So, ich möchte auch mal einen Beitrag hier leisten. Ursprung war meine Pagetab-Ablösung. Ich habe mich jetzt viele viele Stunden mit dem Pagebutton Menü rumgeschlagen und einen Stand, der direkt eingesetzt werden kann.

Es handelt sich um ein mehrstufiges Menü in dem wirklich viel unterzubekommen ist.
Die Dateien sind komplett. Überall liegen leere Seiten dahinter, in denen beispielhaft 4 leere "Widgetbereiche" angelegt sind.
So kann man direkt anfangen Inhalte einzupflegen und ändert lediglich Namen der Menübuttons ab bzw. kommentiert diese aus.
Wenn z. B. die dritte Ebene horizontal sein soll, müssen nur die Werte
<li data-row="x" data-col="x" data-sizex="x" data-sizey="x">
in den entsprechenden Dateien angepasst werden. Aufpassen, dass die Bereiche sich nicht überschreiben.

Die Menüstruktur kann natürlich angepasst oder geändert werden:

Hauptseite
Etagen
-DG
-OG
--Bad
--Gästezimmer
--Hilke
--Schlafzimmer
--Giebelraum
--Flur
-EG
--Kino
--Wintergarten
--Essen
--Wohnzimmer
--Küche
--Flur
--Gäste WC
--Gäste Bad
--Büro
-Keller
--Foto
--Heizung
--Technik
--Wäsche
--Flur
--Vorräte
-Außen
--Garage
--Garten
--Geräte
Licht
-DG
-OG
-EG
-KG
-Außen
-Wichtigste
-Setup
Heizung
-OG
-EG
-KG
-Wichtigste
-Setup
-Viessmann
-Temps
-Charts
Rolladen
-OG
-EG
-KG
-Wichtigste
-Setup
Multimedia
-Kino
-Onkyo
-VU Duo
-Beamer
-PS3
-TV
-EPG
-Multiroom
Telefon
-Wetter
-Wetter 1
-Wetter 2
-Wetter 3
-Wetter 4
-Wetter 5
Sonstiges
-Kalender
-Server
-FHEM
-WLAN
-Cams
-Batterien
-Test


So sieht das im Video aus:
https://vimeo.com/204097977

Beim ersten Laden der Seiten dauert es auf meinem RPI2 ein wenig. Wenn die einmal geöffnet waren läuft es flüssig, wie im Video.

Ich hoffe, dass es der ein oder andere brauchen kann. Derzeit ist das Ganze optimiert auf mein Tablet Acer Iconia One 10 B3-A20: 10 Zoll 1280x800
ggf. ist der head-Bereich in der index.html noch anzupassen. Z. B., Wenn die Tablet UI nicht im Ordner tablet liegt.

Die Dateien hänge ich als Zip an.
Viel Spaß und Gruß
Gunther

Edit: Die Inhalte dürfen natürlich gerne im Wiki oder wo auch immer verwendet werden. Komme da gerade nicht zu.

Edit 04.02.2018: Ich habe Fehler in den DIV-Tags bereinigt. Die Dateien habe ich in Version 2.0 hochgeladen.
Für die, die das Menü schon verwenden, schaut mal hier rein (Danke an OdfFHEM für das Checken der Syntax):
https://forum.fhem.de/index.php/topic,67141.msg750964.html#msg750964

Edit2 am 04.02.2018: Mir sind noch ein paar Fehler aufgefallen. Daher Version 2.1
FHEM@Proxmox@Nuc: TabletUI als User-Interface (4 Wandtablets) / IOs per ser2net gekapselt
Homematic: Heizung, Fenster, Bewegung | Jeelink: Temperatur | Z-Wave: Bewegung, Temperatur | FS20: Temperatur, Fenster | Viessmann-Heizung eingebunden

Macblock

Hallo Gunther,

ich wollte mich mal für deine Arbeit und das zur Verfügung stellen bedanken  :)

Hat mir doch einiges an Arbeit erspart.

VG Markus

namor

Hallo Gunther,

ich habe meines mit viel Arbeit zwar fertig, bewundere aber Deinen Einsatz.
Das ist für jeden Einsteiger echt "Gold" wert.

Das sollte jemand in die Wiki als link einpflegen...

Danke für Deine Arbeit :)

Gunther

Zitat von: Macblock am 17 Februar 2017, 10:41:34
Hallo Gunther,

ich wollte mich mal für deine Arbeit und das zur Verfügung stellen bedanken  :)

Hat mir doch einiges an Arbeit erspart.

VG Markus

Gerne.


Gesendet von iPhone mit Tapatalk
FHEM@Proxmox@Nuc: TabletUI als User-Interface (4 Wandtablets) / IOs per ser2net gekapselt
Homematic: Heizung, Fenster, Bewegung | Jeelink: Temperatur | Z-Wave: Bewegung, Temperatur | FS20: Temperatur, Fenster | Viessmann-Heizung eingebunden

Gunther

Zitat von: namor am 17 Februar 2017, 11:53:36
Hallo Gunther,

ich habe meines mit viel Arbeit zwar fertig, bewundere aber Deinen Einsatz.
Das ist für jeden Einsteiger echt "Gold" wert.

Das sollte jemand in die Wiki als link einpflegen...

Danke für Deine Arbeit :)

Ich profitiere hier ja als Laie auch ständig. Nun kann ich zumindest einen Miniteil zurückgeben.

Hinweis: ggf. Auf den Seiten die Klasse prefetch da hinzufügen, wo vorgeladen werden soll.


Gesendet von iPhone mit Tapatalk
FHEM@Proxmox@Nuc: TabletUI als User-Interface (4 Wandtablets) / IOs per ser2net gekapselt
Homematic: Heizung, Fenster, Bewegung | Jeelink: Temperatur | Z-Wave: Bewegung, Temperatur | FS20: Temperatur, Fenster | Viessmann-Heizung eingebunden

Phili

Wow vielen Dank dafür! Das hat mir einiges an Fummelarbeit erspart!

Philipp

lin_win

Vielen Dank.
Ein Problem hätte ich noch:
Wie bekomme ich eine Abfrage hin, um das Schlafen-Symbol altergerecht darstellen zu können ? ;D ;D

Chris8888

Cool! Werde ich mal in meine Testumgebung werfen und damit etwas spielen. Besten Dank!
FHEM 6.0 auf einem PI4 mit div. Homematic-Komponenten, Alexa, Tablet-UI und Homebridge...und läuft einfach. Erweitert mit CCU3 und Homematic-IP...und läuft immer noch.

Gunther

Zitat von: lin_win am 19 Februar 2017, 09:08:45
Vielen Dank.
Ein Problem hätte ich noch:
Wie bekomme ich eine Abfrage hin, um das Schlafen-Symbol altergerecht darstellen zu können ? ;D ;D

Einfach ein anderes Symbol in der Datei 2_etage_og.html eintragen:
data-icon="oa-scene_making_love"
FHEM@Proxmox@Nuc: TabletUI als User-Interface (4 Wandtablets) / IOs per ser2net gekapselt
Homematic: Heizung, Fenster, Bewegung | Jeelink: Temperatur | Z-Wave: Bewegung, Temperatur | FS20: Temperatur, Fenster | Viessmann-Heizung eingebunden

hobu

Tolle Sache!
Wenn's so ein Framework auch noch in als schlanke Version für's Smartphone geben würde...

Sprich: Nur für die Sachen, wie man mal von unterwegs sinnvoll einstellen/abrufen möchte.
Zeitversetztes Heizen, Statusübersicht Infrastruktur/Alarme, Status Bewohner. Mehr nicht.
Dafür wären ein paar leere Seiten im obigen Stil als Template eine gute Starthilfe - und in dieser abgespeckten Version auch gut für die bessere Hälfte nutzbar.

Raspberry Pi (Model B)
HM-CFG-USB, HM-CC-RT-DN, HM-LC-SW1-FM, HM-Dis-WM55, HM-FK-SCO

Gunther

Das würde ich auch nehmen. Selbst komme ich leider gerade nicht dazu. Muss erstmal meine Tablet-Version wieder in Grundzügen aufbauen.

Habe auch für das Handy noch nicht die Idee, wie eine Version aussehen könnte. Vielleicht hat ja jemand schon eine schöne Version, auf der man aufbauen kann.
FHEM@Proxmox@Nuc: TabletUI als User-Interface (4 Wandtablets) / IOs per ser2net gekapselt
Homematic: Heizung, Fenster, Bewegung | Jeelink: Temperatur | Z-Wave: Bewegung, Temperatur | FS20: Temperatur, Fenster | Viessmann-Heizung eingebunden

jnewton957

Danke dafür,

bin zwar mit meiner Installation schon durch - aber irgendwann wird ja wieder "renoviert".

Grüße
Jörg
FHEM6.2 auf Pi5
V 1.66 nanoCUL 433 (IT)
V 1.66 nanoCUL868 (HM)
sqlite3 LogDb
ELRO AB440, DECT200,  TFA30.3125, esp8266, HM, TabletUI, IR-Schreiblesekopf (Udo),tibber Pulse, Kostal Pico, cfos Wallbox, Modbus TCP

cattman

Hallo,
und erst mal vielen Dank für die Arbeit.
Aber es gibt für Anfänger wie mich doch noch die Frage.
Wie müssen die Dateien im Verzeichnis liegen?

Wenn ich sie hierher /opt/fhem/www/tablet kopiere bekomme ich nur die Startseite und keine Verlinkung funktioniert.

Gruß

Gunther

Eigentlich sollten alle Dateien direkt in diesem Ordner liegen. In der index.html ggf. noch die Pfade im head-Bereich anpassen.

Berechtigungen auf Betriebssystemebene auf den Dateien sind richtig eingestellt?

Was passiert denn, wenn Du einen Link drückst?
FHEM@Proxmox@Nuc: TabletUI als User-Interface (4 Wandtablets) / IOs per ser2net gekapselt
Homematic: Heizung, Fenster, Bewegung | Jeelink: Temperatur | Z-Wave: Bewegung, Temperatur | FS20: Temperatur, Fenster | Viessmann-Heizung eingebunden

Leeloo_Dallas

#14
---> Nachtrag bzw. Vortrag => hab wohl ins falsche Fenster getippt ;)

Hallo Gunther,

sieht gut aus,

Danke für die Arbeit !!!

-------------<

Stichwort: Smartphone

Ich habe in den letzten Tagen was fürs Smartphone gebaut. Es ist zwar noch nicht fertig, aber die Basis steht.
Bei gefallen und Interesse kann ich den Inhalt entfernen und nur das "gerippte" zur Verfügung stellen.

Anbei mal ein paar Bilder. Ich denke es wird auch ohne Video klar wie es funktionieren soll.
Die ersten zwei Elemente bilden quasi permanent den Hauptstatus des Alarm- und Sicherheitssystems (siehe: https://forum.fhem.de/index.php/topic,54292.msg458823.html#msg458823 ) ab.

Gruß
Leeloo
Greatz Leeloo