Autor Thema: fertiges Pagebutton Multi-Menü für Anfänger/ User mit wenig Zeit  (Gelesen 5863 mal)

Offline Gunther

  • Hero Member
  • *****
  • Beiträge: 1275
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:


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.
« Letzte Änderung: 15 Februar 2017, 01:10:40 von Gunther »
FHEM auf Rasperri PI: TabletUI als User-Interface (4 Wandtablets)
Homematic: Heizung, Fenster, Bewegung | Jeelink: Temperatur | Z-Wave: Bewegung, Temperatur | FS20: Temperatur, Fenster | Viessmann-Heizung eingebunden
Gefällt mir Gefällt mir x 26 Liste anzeigen

Offline Macblock

  • New Member
  • *
  • Beiträge: 36
Antw:fertiges Pagebutton Multi-Menü für Anfänger/ User mit wenig Zeit
« Antwort #1 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

Offline namor

  • Jr. Member
  • **
  • Beiträge: 90
Antw:fertiges Pagebutton Multi-Menü für Anfänger/ User mit wenig Zeit
« Antwort #2 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 :)

Offline Gunther

  • Hero Member
  • *****
  • Beiträge: 1275
Antw:fertiges Pagebutton Multi-Menü für Anfänger/ User mit wenig Zeit
« Antwort #3 am: 17 Februar 2017, 11:55:33 »
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 auf Rasperri PI: TabletUI als User-Interface (4 Wandtablets)
Homematic: Heizung, Fenster, Bewegung | Jeelink: Temperatur | Z-Wave: Bewegung, Temperatur | FS20: Temperatur, Fenster | Viessmann-Heizung eingebunden

Offline Gunther

  • Hero Member
  • *****
  • Beiträge: 1275
Antw:fertiges Pagebutton Multi-Menü für Anfänger/ User mit wenig Zeit
« Antwort #4 am: 17 Februar 2017, 11:57:44 »
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 auf Rasperri PI: TabletUI als User-Interface (4 Wandtablets)
Homematic: Heizung, Fenster, Bewegung | Jeelink: Temperatur | Z-Wave: Bewegung, Temperatur | FS20: Temperatur, Fenster | Viessmann-Heizung eingebunden

Offline Phili

  • New Member
  • *
  • Beiträge: 38
Antw:fertiges Pagebutton Multi-Menü für Anfänger/ User mit wenig Zeit
« Antwort #5 am: 18 Februar 2017, 22:52:08 »
Wow vielen Dank dafür! Das hat mir einiges an Fummelarbeit erspart!

Philipp

Offline lin_win

  • New Member
  • *
  • Beiträge: 13
Antw:fertiges Pagebutton Multi-Menü für Anfänger/ User mit wenig Zeit
« Antwort #6 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

Offline Chris8888

  • Full Member
  • ***
  • Beiträge: 309
Antw:fertiges Pagebutton Multi-Menü für Anfänger/ User mit wenig Zeit
« Antwort #7 am: 19 Februar 2017, 13:56:27 »
Cool! Werde ich mal in meine Testumgebung werfen und damit etwas spielen. Besten Dank!
FHEM 5.8 auf einem PI3 mit div. Homematic-Komponenten, Alexa, Tablet-UI und Homebridge...und läuft einfach. Erweitert mit CCU2 und Homematic-IP...und läuft immer noch.

Offline Gunther

  • Hero Member
  • *****
  • Beiträge: 1275
Antw:fertiges Pagebutton Multi-Menü für Anfänger/ User mit wenig Zeit
« Antwort #8 am: 19 Februar 2017, 14:28:38 »
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 auf Rasperri PI: TabletUI als User-Interface (4 Wandtablets)
Homematic: Heizung, Fenster, Bewegung | Jeelink: Temperatur | Z-Wave: Bewegung, Temperatur | FS20: Temperatur, Fenster | Viessmann-Heizung eingebunden

Offline hobu

  • Jr. Member
  • **
  • Beiträge: 57
Antw:fertiges Pagebutton Multi-Menü für Anfänger/ User mit wenig Zeit
« Antwort #9 am: 19 Februar 2017, 15:11:10 »
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

Offline Gunther

  • Hero Member
  • *****
  • Beiträge: 1275
Antw:fertiges Pagebutton Multi-Menü für Anfänger/ User mit wenig Zeit
« Antwort #10 am: 19 Februar 2017, 15:18:20 »
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 auf Rasperri PI: TabletUI als User-Interface (4 Wandtablets)
Homematic: Heizung, Fenster, Bewegung | Jeelink: Temperatur | Z-Wave: Bewegung, Temperatur | FS20: Temperatur, Fenster | Viessmann-Heizung eingebunden

Offline jnewton957

  • Full Member
  • ***
  • Beiträge: 319
Antw:fertiges Pagebutton Multi-Menü für Anfänger/ User mit wenig Zeit
« Antwort #11 am: 19 Februar 2017, 19:17:34 »
Danke dafür,

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

Grüße
Jörg
FHEM5.8 auf Pi3
V 1.65 nanoCUL433 (IT)
nanoCUL JeeLink
V 1.66 nanoCUL868 (HM) (ESA2000WZ)
xELRO AB440, xDECT200, PCA301, xTFA30.3125, esp8266, HM, TabletUI, IR-Schreiblesekopf (Udo)

Offline cattman

  • Newbie
  • Beiträge: 1
Antw:fertiges Pagebutton Multi-Menü für Anfänger/ User mit wenig Zeit
« Antwort #12 am: 19 Februar 2017, 19:55:22 »
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ß

Offline Gunther

  • Hero Member
  • *****
  • Beiträge: 1275
Antw:fertiges Pagebutton Multi-Menü für Anfänger/ User mit wenig Zeit
« Antwort #13 am: 21 Februar 2017, 10:33:19 »
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 auf Rasperri PI: TabletUI als User-Interface (4 Wandtablets)
Homematic: Heizung, Fenster, Bewegung | Jeelink: Temperatur | Z-Wave: Bewegung, Temperatur | FS20: Temperatur, Fenster | Viessmann-Heizung eingebunden

Offline Leeloo_Dallas

  • Full Member
  • ***
  • Beiträge: 223
  • -- Multipass --
Antw:fertiges Pagebutton Multi-Menü für Anfänger/ User mit wenig Zeit
« Antwort #14 am: 21 Februar 2017, 19:42:03 »
---> 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
« Letzte Änderung: 21 Februar 2017, 20:07:53 von Leeloo_Dallas »
Greatz Leeloo
Gefällt mir Gefällt mir x 9 Liste anzeigen

 

decade-submarginal