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

[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

Code Auswählen Erweitern

<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:

Code Auswählen Erweitern


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

[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]

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

[Gunther]

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

[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 ?

[Chris8888]

Cool! Werde ich mal in meine Testumgebung werfen und damit etwas spielen. Besten Dank!

[Gunther]

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

Einfach ein anderes Symbol in der Datei 2_etage_og.html eintragen:

Code Auswählen Erweitern

data-icon="oa-scene_making_love"

[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.

[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.

[jnewton957]

Danke dafür,

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

Grüße
Jörg

[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?

[Leeloo_Dallas]

---> 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

[Gunther]

Wäre klasse, wenn Du das zur Verfügung stellst. Gerne mit den Wisch-Bereichen (der Widgetname fällt mir gerade nicht ein).

P.s. Hast Du Homematic Rauchmelder und auch Connection-Probleme?

[Leeloo_Dallas]

Ja, ich habe die Rauchmelder (HM-SEC-SD-2) zwar erst seit etwa 1-Woche. Muss aber leider der öfteren feststellen, dass es Connection-Probleme gibt.
Ich habe mich aber bisher noch nicht weiter darum gekümmert.

Die Zusammenstellung des "Smartphone-Gerippes" incl. einiger Beispiel befindet sich im Anhang.
Es hat etwas Zeit gekostet und ist bestimmt nicht ausgereift, aber für den einfachen Start sollte es sicher reichen.   

Einfach den Inhalt in "/opt/fhem/www/tablet" übernehmen und anschließend im Browser die "index_DASS.html" aufrufen.

Viel Spaß damit.

Gruß
Leeloo

[drhirn]

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

Ist doch schon lange geschehen
https://wiki.fhem.de/wiki/FTUI_Widget_Pagebutton#Weblinks

[Kusselin]

Hallo Gunther,

super dein HTML Code....genau richtig für Leuts die vieles haben aber nicht alles unterkriegen!!!

Meine Frage..ich bin noch nicht solange im HTML geschäft....wo muss ich denn jetzt zb. bei Multimedia meinen Code:

Code Auswählen Erweitern

<li data-col="2" data-row="1" data-sizex="6" data-sizey="8">
        <header class="big blue">Wohnzimmer</header>
        <!-- Power on/off -->
        <div data-type="switch"
data-device="piCoreWZ"
            data-states='["on","off"]'
            data-set-state='["off","on"]'
            data-background-icons='["none","none"]'
            data-icons='["fa-power-off","fa-power-off"]'
            data-on-colors='["white","blue"]'
            data-background-colors='["#2a2a2a","#2a2a2a"]'
            class="left-align inline">
        </div>
         
        <!-- Favoriten -->
        <div data-type="select"
             data-device="piCoreWZ"
             data-alias="ftuiFavoritesAlias"
             data-list="ftuiFavoritesItems"
             data-get="favorites"
             data-set="favorites">
         </div>
         
         <!-- Yamaha Mute-->
         <div data-type="switch"
             data-device="piCoreWZ"
             data-get="mute"
             data-set="mute"
             data-states='["on","off"]'
             data-set-states='["off","on"]'
             data-icons='["fa-volume-off","fa-volume-up"]'
             data-background-icons='["none","none"]'
             data-colors='["#ddd","#999"]'
             class="normal inline">
         </div>
         
         <!-- Cover -->
         <div class="cell top-space-1x">       
            <div data-type="image"
                data-device="piCoreWZ"
                data-get="coverarturl"
                data-size="40%"
                data-opacity="0.8">
            </div>
         </div>
         
         
         <!-- Artist,Title,Album -->
        <div class="cell">       
            <!-- Title -->
            <div data-type="label"
                data-device="piCoreWZ"
                data-get="currentTitle"           
                class="big top-space inline">
            </div>
         
            <!-- Artist -->
            <div data-type="label"
                data-device="piCoreWZ"
                data-get="currentArtist"
                class="large">
            </div>

            <!-- Album -->
            <div data-type="joinedlabel"
                data-device="piCoreWZ"
                data-get='["max2play.wz:currentAlbum"]'
                data-mask="[$1]"
                class="medium">
            </div>
        </div>
         
        <!-- Fortschrittsanzeige -->
        <div class="top-space-2x">
         <div data-type="label"
              data-device="piCoreWZ"
              data-get="currentTrackPosition"
              data-substitution="toMinFromSec()"
              class="inline middle">
         </div>
         <div data-type="level"
            data-device="piCoreWZ"
            data-get="currentTrackPosition"
            data-min="0"
            data-max="duration"
            data-width="300"
            data-color="grey"
            class="horizontal inline">
         </div>
         <div data-type="label"
              data-device="piCoreWZ"
              data-get="duration"
              data-substitution="toMinFromSec()"
              class="inline middle">
         </div>
        </div>
       
        <!-- Player Controls -->
        <div class="inline top-space-1x">
           
         <!-- Shuffle -->
<div data-type="multistatebutton"
             data-device="piCoreWZ"
data-get="shuffle"
data-get-on='["off","song","album"]'
             data-set='["shuffle song","shuffle album","shuffle off"]'
data-on-default="shuffle off"
data-icons='["fa-random","fa-random","fa-list"]'
             data-colors='["grey","white","white"]'
data-background-colors='["#2a2a2a","#2a2a2a","#2a2a2a"]'
class="inline">
</div>
       
         <!-- Next -->
         <div data-type="switch"
data-device="piCoreWZ"
data-set-on="prev"
data-set-off="prev"
data-icon="fa-step-backward"
            data-on-background-color="#2a2a2a"
            data-off-background-color="#2a2a2a"
            data-on-color="white"
            data-off-color="grey"
            class="inline">
         </div>
           
         <!-- Play/Pause -->   
         <div data-type="multistatebutton"
             data-device="piCoreWZ"
             data-get="playStatus"
             data-get-on='["playing","paused","stopped"]'
             data-set='["pause","play"]'
             data-set-default="pause"
             data-icons='["fa-pause","fa-play"]'
             data-on-color="white"
             data-on-background-color="none"
             data-background-icon="none"
             class="inline">
         </div>
           
         <!-- Stop -->
         <div data-type="push"
             data-device="piCoreWZ"
             data-icon="fa-stop"
             data-background-icon="none"
             data-off-color="none"
             data-on-color="white"
             data-background-color="none"
             data-set-on="stop"
             class="inline">
         </div>
           
         <!-- Back -->
         <div data-type="switch"
data-device="piCoreWZ"
data-set-on="next"
data-set-off="next"
data-icon="fa-step-forward"
            data-on-background-color="#2a2a2a"
            data-off-background-color="#2a2a2a"
            data-on-color="white"
            data-off-color="grey"
            class="inline">
         </div>
         <!-- Repeat -->
<div data-type="multistatebutton"
data-device="piCoreWZ"
             data-get="repeat"
data-get-on='["off","one","all"]'
data-set='["repeat one","repeat all","repeat off"]'
data-on-default="repeat off"
data-icons='["fa-repeat","fa-repeat","fa-list"]'
             data-colors='["grey","white","white"]'
             data-background-colors='["#2a2a2a","#2a2a2a","#2a2a2a"]'
             class="inline">
</div>       
        </div>
         
        <!-- Volume -->
        <div class="">
           
         
          <!-- VolumeDown 3steps -->
  <div class="inline small"
            data-type="switch"
data-device="piCoreWZ"
data-set-on="volumeDown"
data-set-off="volumeDown"
data-icon="fa-volume-down"
            data-on-color="white"
            data-off-color="grey"
data-background-icon="fa-square"
            data-on-background-color="#2a2a2a"
            data-off-background-color="#2a2a2a">
  </div>
                       
         <!-- Lautstärkeregler -->
<div class ="inline horizontal mini"
data-type="slider"
data-device="piCoreWZ"
            data-width="280"
data-get="volume"
data-set="volume"
            data-color="grey">
</div>
         
           
         <!-- VolumeUp 3steps -->
  <div class="small inline"
            data-type="switch"
data-device="piCoreWZ"
data-set-on="volumeUp"
data-set-off="volumeUp"
data-icon="fa-volume-up"
data-background-icon="fa-circle"
            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>
       
<header class="big">Onkyo Receiver</header>
        <div class="cell inline top-space-2x">
           
            <!-- Onkyo AVR on/off Steckdose -->
           <div class="inline">
   <div data-device="txnr509.sd"
                 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="green"
                 data-off-color="grey"
                 data-on-backgroundcolor="none"
                 data-off-backgroundcolor="none"
                 class="small inline">
            </div>
<div data-type="label" class="medium">AVR ein/aus</div>
</div>

            <!--Onkyo AVR Eingang  -->
           <div data-device="txnr509"
                data-type="select"
                data-items='["vcr"]'
                data-get="input"
                data-set="input">
            </div>
           
           
<!--Raspberry Pi3 Steckdose  -->
<div class="inline">
<div data-device="rpi3.wz"
                 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="green"
                 data-off-color="grey"
                 data-on-backgroundcolor="none"
                 data-off-backgroundcolor="none"
                 class="small inline">
            </div>
<div data-type="label" class="medium">Raspi ein/aus</div>
</div>
       
       
       
               
     </li> 
   
     <!-- Playlist -->
     <li data-row="1" data-col="8" data-sizex="6" data-sizey="8">       
     <header class="big">Playlist</header>
       <!-- Playlists -->
       <div data-type="select"
            data-device="piCoreWZ"
            data-alias="ftuiPlaylistsAlias"
            data-list="ftuiPlaylistsItems"
            data-get="playlists"
            data-set="playlists">
       </div>
       <div data-type="medialist"
           data-device="piCoreWZ"
           data-set="track"
           data-get="ftuiMedialist"
           data-pos="playlistCurrentTrack"
           class="autoscroll index1 centered top-space-2x">
       </div>
     </li>

bei Dir jetzt unter Multimedia einfügen:

Code Auswählen Erweitern

<li data-row="1" data-col="1" data-sizex="1" data-sizey="9">
<header><div data-type="label" class="medium orange">Media</header>
            <div class="cell">
               
                <div data-type="pagebutton" data-url="#2_multimedia_kino.html"    data-load="#multimedia_kino" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern="(.*/||.*1_multimedia.html||.*#2_multimedia_kino.html)" data-icon="oa-scene_scene" class="prefetch top-space"></div>
                <div data-type="label" class="darker">Kino</div>
               
                <div data-type="pagebutton" data-url="#2_multimedia_Onkyo.html" data-load="#multimedia_Onkyo" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern=".*#2_multimedia_Onkyo.html" data-icon="fa-music" class="top-space"></div>
                <div data-type="label" class="darker">Onkyo</div>
               
                <div data-type="pagebutton" data-url="#2_multimedia_vuduo.html"       data-load="#multimedia_vuduo" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern=".*#2_multimedia_vuduo.html" data-icon="fa-music" class="top-space"></div>
                <div data-type="label" class="darker">VU Duo</div>
               
                <div data-type="pagebutton" data-url="#2_multimedia_beamer.html" data-load="#multimedia_beamer" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern="(.*#2_multimedia_beamer.html)" data-icon="fa-music" class="top-space"></div>               
                <div data-type="label" class="darker">Beamer</div>
               
                <div data-type="pagebutton" data-url="#2_multimedia_ps3.html"    data-load="#multimedia_ps3" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern=".*#2_multimedia_ps3.html" data-icon="fa-music" class="top-space"></div>
                <div data-type="label" class="darker">PS3</div>
               
                <div data-type="pagebutton" data-url="#2_multimedia_tv.html"    data-load="#multimedia_tv" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern=".*#2_multimedia_tv.html" data-icon="oa-it_television" class="top-space"></div>
                <div data-type="label" class="darker">TV</div>
               
                <div data-type="pagebutton" data-url="#2_multimedia_epg.html"    data-load="#multimedia_epg" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern=".*#2_multimedia_epg.html" data-icon="fa-music" class="top-space"></div>
                <div data-type="label" class="darker">EPG</div>
               
                <div data-type="pagebutton" data-url="#2_multimedia_multiroom.html"    data-load="#multimedia_multiroom" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern=".*#2_multimedia_multiroom.html" data-icon="fa-music" class="top-space"></div>
                <div data-type="label" class="darker">Multi</div>
                </div>
            </div>
        </li>
        <li data-row="1" data-col="2" data-sizex="13" data-sizey="9">
            <div class="page" id="multimedia_kino"></div>
            <div class="page" id="multimedia_onkyo"></div>
            <div class="page" id="multimedia_vuduo"></div>
            <div class="page" id="multimedia_beamer"></div>
            <div class="page" id="multimedia_PS3"></div>
            <div class="page" id="multimedia_tv"></div>
            <div class="page" id="multimedia_epg"></div> 
            <div class="page" id="multimedia_multiroom"></div>           
         </li> 



Gesendet von iPad mit Tapatalk Pro

[Kusselin]

Wo muss ich nun meinen HTM Code einfügen bei Dir?? Aus deiner PN ging das nicht so gut hervor.
Über einen entsprechenden HTML Code danke ich dir sehr!
Gruss


Gesendet von iPad mit Tapatalk Pro

[Gunther]

Das Multimedia-Menü ist ja n ochmal in Untermenüs aufgeteilt.

Alle Dateien mit 2_multimedia_xxxxxxx.html, also z. B. 2_multimedia_kino.html beinhalten Deine "Widgets", also Deinen Code.
Diese habe ich beispielhaft in 4 Bereiche aufgeteilt. Da bist Du natürlich frei.

Code Auswählen Erweitern

<li data-row="1" data-col="3" data-sizex="13" data-sizey="9">
        <header><div data-type="label" class="medium orange">Widget 1</div></header>   
    </li>
   
    <li data-row="1" data-col="15" data-sizex="13" data-sizey="9">
        <header><div data-type="label" class="medium orange">Widget 2</div></header>   
    </li>
   
    <li data-row="10" data-col="3" data-sizex="13" data-sizey="9">
        <header><div data-type="label" class="medium orange">Widget 3</div></header>   
    </li>
   
    <li data-row="10" data-col="15" data-sizex="13" data-sizey="9">
        <header><div data-type="label" class="medium orange">Widget 4</div></header>   
    </li> 

Deinen Inhalt packst Du dort zwischen die "li"s

Code Auswählen Erweitern

<li> Dein Code </li>

Über die row und col definierst Du wo Dein Widget im Raster startet
Über die sizex und sizey definierst Du wie breit und hoch Deine Widgets sein sollen

z. B.

Code Auswählen Erweitern

<li data-row="1 (IN REIHE 1 STARTET DEIN WIDGET)" data-col="3 (IN SPALTE 3 STARTET DEIN WIDGET)" data-sizex="13 (DEIN WIDGET IST 13 SPALTEN BREIT)" data-sizey="9 (DEIN WIDGET IST 9 SPALTEN HOCH">
        <header><div data-type="label" class="medium orange (FARBE DEINER ÜBERSCHRIFT)">DEINE ÜBERSCHRIFT DES WIDGETS</div></header> 
  HIER KOMMT DEIN CODE REIN
    </li>

Bei "HIER KOMMT DEIN CODE REIN" packst Du dann z. B.

Code Auswählen Erweitern

<!-- Power on/off -->
        <div data-type="switch"
data-device="piCoreWZ"
            data-states='["on","off"]'
            data-set-state='["off","on"]'
            data-background-icons='["none","none"]'
            data-icons='["fa-power-off","fa-power-off"]'
            data-on-colors='["white","blue"]'
            data-background-colors='["#2a2a2a","#2a2a2a"]'
            class="left-align inline">
        </div>
oder natürlich auch mehr.
Das ist dann Geschmackssache, ob Du das in eigene Felder aufteilst oder innerhalb eines <data-row="xx" data-col="xx"">-Bereiches unterbringst.

Schau Dir mal die Dokumentation zur Tablet UI im Wiki an. Etwas reinfrickeln musst Du Dich da.
Ich habe von HTML wahrscheinlich genauso viel Ahnung wie Du. Teste einfach rum und verfolge die Pfade der Dateien (also in der von Dir geposteten die weiteren html-Dateien). Dann verstehst Du das schneller.

Viel Erfolg.

[Kusselin]

Hi Günther..super das war doch schon mal super erklärt..ich schaus mir die Woche mal an..danke Dir!!
Gruss


Gesendet von iPad mit Tapatalk Pro

[Kusselin]

Hallo Gunther,

da stimmt aber was nicht..du sagst hier soll mein Code rein:

Code Auswählen Erweitern

<li data-row="1 (IN REIHE 1 STARTET DEIN WIDGET)" data-col="3 (IN SPALTE 3 STARTET DEIN WIDGET)" data-sizex="13 (DEIN WIDGET IST 13 SPALTEN BREIT)" data-sizey="9 (DEIN WIDGET IST 9 SPALTEN HOCH">
        <header><div data-type="label" class="medium orange (FARBE DEINER ÜBERSCHRIFT)">DEINE ÜBERSCHRIFT DES WIDGETS</div></header>
<li HIER KOMMT DEIN CODE REIN
    </li>

da fehlt doch aber noch das Anfangs Li <li

also müsste es doch für Widget 1 so aussehen:

Code Auswählen Erweitern

<li data-row="1 (IN REIHE 1 STARTET DEIN WIDGET)" data-col="3 (IN SPALTE 3 STARTET DEIN WIDGET)" data-sizex="13 (DEIN WIDGET IST 13 SPALTEN BREIT)" data-sizey="9 (DEIN WIDGET IST 9 SPALTEN HOCH">
        <header><div data-type="label" class="medium orange (FARBE DEINER ÜBERSCHRIFT)">DEINE ÜBERSCHRIFT DES WIDGETS</div></header>
[color=red][b]<li HIER KOMMT DEIN CODE REIN
    </li>[/b][/color]

oder mach ich da einen Denkfehler?

Gruss

[Kusselin]

Ne Frage noch allgemein.....ich habe jetzt zum Testen eine neue microSD karte genommen und einen anderen Pi...der keine CULs angeschlossen hat..

Zum Testen für Aktionen die ja keinen CUL benötigen geht das ja wie zB das Abfall Moduul oder Geburtstagskalender usw...

Oder?

Gruss

[Gunther]

klar. Du hast halt keine Funktion. Ich würde mir notfalls Dummys mit gleichen Namen anlegen.

[Gunther]

da fehlt doch aber noch das Anfangs Li <li

oder mach ich da einen Denkfehler?

Gruss

Da ist doch ein öffnendes und ein schließendes

Code Auswählen Erweitern

<li data-row="1 (IN REIHE 1 STARTET DEIN WIDGET)" data-col="3 (IN SPALTE 3 STARTET DEIN WIDGET)" data-sizex="13 (DEIN WIDGET IST 13 SPALTEN BREIT)" data-sizey="9 (DEIN WIDGET IST 9 SPALTEN HOCH">
        <header><div data-type="label" class="medium orange (FARBE DEINER ÜBERSCHRIFT)">DEINE ÜBERSCHRIFT DES WIDGETS</div></header> 
                        <div data-type="switch"
data-device="piCoreWZ"
                        data-states='["on","off"]'
                        data-set-state='["off","on"]'
                       data-background-icons='["none","none"]'
                       data-icons='["fa-power-off","fa-power-off"]'
                      data-on-colors='["white","blue"]'
                       data-background-colors='["#2a2a2a","#2a2a2a"]'
                       class="left-align inline">
    </li>

ohne jetzt inhaltlich zu prüfen

[Kusselin]

 Hi Günther, ich hab jetzt probiert und habs hinbekommen ..hab auch die Texte geändert..super und vielen Dank dir nochmal


Gesendet von iPad mit Tapatalk Pro

[Gunther]

gerne wieder, aber nur wenn Du die Ü-Striche bei meinem Namen weglässt...

[Torsten_MG]

Hallo bin heute über diesen Beitrag gestolpert und wollte das auch direkt mal testen 

Nun kommt bei mir, wenn ich die Seite neu Lade immer folgende Meldung:

Code Auswählen Erweitern

ERROR
widget_clock.js2
ReferenceError: loadplugin is not
defined

woran liegt das?

[Gunther]

Was hast Du denn bisher gemacht?

Sieht irgendwie so aus, als würde Zugriff/Berechtigung fehlen.

[Torsten_MG]

Was hast Du denn bisher gemacht?

Sieht irgendwie so aus, als würde Zugriff/Berechtigung fehlen.

Bis jetzt noch nicht viel. Habe den Raspi seit Samstag laufen und spiele bisher nur was rum um die funktionen und Befehle zu lernen. Bisher habe ich noch keine Geräte, nur Kalender eingebunden und die Anwesenheitserkennung über lan-ping (leider mit dem allgemeinen Problem das sich 2 von 4 Handys abmelden). Auch habe ich beides schon in den TabletUI eingebunden. Beim durchlesen des Forums bin ich auf dieses Thema gestoßen und wollte dann mal den Pagebutton ausprobieren und versuchen zu verstehen wie der Aufbau funktioniert. Es scheint auch alles zu funktionieren, aber wenn ich die Seite neu aufrufe kommt diese Meldung.

[Gunther]

Es ist einfacher wenn Du mit einem oder zwei Screenshots und falls vorhanden mit einer Fehlermeldung zeigst, was passiert (oder eben nicht).
Ich kann es noch nicht greifen.

Wo hast Du die Dateien in Deinen Verzeichnissen abgelegt?
Wie schaut die index.html dazu aus?

[Torsten_MG]

Wo hast Du die Dateien in Deinen Verzeichnissen abgelegt?
Wie schaut die index.html dazu aus?

Ich habe das gepackte Verzeichnis aus Post1 genommen und in den Ordner /opt/fhem/www/tablet abgelegt

[Torsten_MG]

Hallo bin heute über diesen Beitrag gestolpert und wollte das auch direkt mal testen 

Nun kommt bei mir, wenn ich die Seite neu Lade immer folgende Meldung:

Code Auswählen Erweitern

ERROR
widget_clock.js2
ReferenceError: loadplugin is not
defined

woran liegt das?

Nachdem vor ein paar Tagen nichts mehr ging und ich alles neu aufgesetzt habe, bin ich wieder an diesen Punkt gekommen.
Habe jetzt nochmal im Forum gelesen und weiß jetzt, daß mir die widget_clock.js fehlt. Konnte diese Datei aber nirgends finden.
Wäre schön, wenn mir jemand einen Link geben könnte wo ich die herbekomme und wo genau ich die ablegen muß.

Danke schonmal

[JoWiemann]

Nachdem vor ein paar Tagen nichts mehr ging und ich alles neu aufgesetzt habe, bin ich wieder an diesen Punkt gekommen.
Habe jetzt nochmal im Forum gelesen und weiß jetzt, daß mir die widget_clock.js fehlt. Konnte diese Datei aber nirgends finden.
Wäre schön, wenn mir jemand einen Link geben könnte wo ich die herbekomme und wo genau ich die ablegen muß.

Danke schonmal

Nun ja, mit den Suchbegriffen: fhem und widget_clock.js gegoogelt und folgendes gefunden: https://github.com/nesges/Widgets-for-fhem-tablet-ui/tree/master/www/tablet/js

Gehört also zu tablet-ui

Grüße Jörg

[Torsten_MG]

danke Jörg, auf die Idee mit Google bin ich garnicht gekommen

Aber ich habe gerade festgestellt, dass ich die Datei doch im Ordner "/opt/fhem/www/tablet/js" habe.


Aber warum bekomme ich dann die Meldung im Tablet-UI wenn ich die Seite neu lade?

Code Auswählen Erweitern

ERROR
widget_clock.js2
ReferenceError: loadplugin is not
defined

[Gunther]

Berechtigungsproblem oder falscher Verweis in der index.html?

[setstate]

bestimmt die alte Version von Nesges installiert. Die läuft nicht mehr.

[PNinBB]

Zunächst besten Dank für die umfangreiche "Vorarbeit", so dass ich mich gleich ins "gemachte Nest" setzen kann !
Beim "Reinsetzen", genauer Anpassen, stoße ich aber momentan noch auf ein Problem.
Bei mir geht es nur um eine Wohnung, d.h. die ganze Etagenproblematik ist für mich kein Thema. Genauer: ich will einiges weglassen und anderes umbenennen. Und beim Umbennen komme ich in Schwierigkeiten.
1. Kann ich die führenden Ziffern ersatzlos streichen ?
2. Wenn ich eine HTML-Datei umbenenne und auch die entsprechenden Verweise im Menü und in den Dateien jeweils ändere, wird nichts geladen. Ich bekomme auch nirgends eine Fehlermeldung.
Ich vermute, dass ich noch einen Fehler bei den Einträgen zu 'data-active-pattern' mache. Ich habe aber bisher keine vernünftige Erklärung zu den dort notwendigen Einträgen gefunden.
Im Voraus schon einmal besten Dank für einen Tipp.
Peter
Ergänzung:
In der Java-Konsole kann ich lesen: 'Timer "fetch content" bereits vorhanden.' !

[Gunther]

Hilfreich ist es wenn Du beispielhaft zeigst, was Du anpassen möchtest und Deinen Code dazu postest. Einmal vom Menü und dann von der aufzurufenden Seite.

[Gunther]

Noch ein Tipp: im Ende des Videos siehst Du dass das Etagenmenü bei KG,EG,OG jeweils ein Untermenü hat. Das DG aber nicht. Wenn Du die entsprechenden Dateien vergeleichst, kommst Du auch selber dahinter.

[dirk.k]

Hallo Gunther,
erst mal vielen Dank für die tolle Vorarbeit.
dank der Vorlage habe ich eine ganz brauchbare Oberfläche hinbekommen.

Mit dem letzten FTUI-Update wurde die Oberfläche jedoch leider total zerschossen.
Ein Objekt scheint sich "dazwischenzuschieben". Im Startmenu sieht man das nur an fehlenden Zwischenräumen zwischen den Feldern, in allen anderen Menupunkten schieben sich die Felder nach unten aus dem Bild.

Hat das jemand beobachtet und einen Ansatz, wie das zu beheben ist?

PS: Zurückspielen des "tablet"-backups behebt den Fehler. Ich habe die leere Vorlage eingefügt und aktualisiert, da gibt es den gleichen Fehler.

[OdfFhem]

Hallo,

dies liegt wohl daran, dass alle/die meisten der html-Dateien innerhalb vom header-Tag einen div-Tag-Fehler enthalten.

z.B.:
index.html --- Zeile 78 --- div-Tag innerhalb von header-Tag wird geöffnet, der schliessende div-Tag befindet sind dann aber erst in Zeile 107; mittlerweile wurde das header-Tag längst geschlossen.
1_multimedia.htm --- Zeile 16 --- div-Tag innerhalb von header-Tag wird geöffnet, der schliessende div-Tag befindet sind dann aber erst in Zeile 43; mittlerweile wurde das header-Tag längst geschlossen.

2_multimedia_kino.html --- die data-col der li-Tags kann nach den obigen Korrekturen nun bei 1 beginnen; dadurch klebt der eigentliche Inhalt wieder am Menü ...

vorher

Code Auswählen Erweitern


    <li data-row="1" data-col="2" data-sizex="6" data-sizey="5">
    <li data-row="1" data-col="7" data-sizex="7" data-sizey="5">
    <li data-row="6" data-col="2" data-sizex="6" data-sizey="4">
    <li data-row="6" data-col="7" data-sizex="7" data-sizey="4">


nachher

Code Auswählen Erweitern


    <li data-row="1" data-col="1" data-sizex="6" data-sizey="5">
    <li data-row="1" data-col="6" data-sizex="7" data-sizey="5">
    <li data-row="6" data-col="1" data-sizex="6" data-sizey="4">
    <li data-row="6" data-col="6" data-sizex="7" data-sizey="4">


[dirk.k]

Hallo OdfFhem,
das war es.
Die eigenartige DIV-Klammerung war mir auch schon aufgefallen, bin aber nicht hinter den (un-)Sinn gestiegen.
Die Zählweise der li-Einträge (data-row usw) habe ich jetzt auch halbwegs verstanden.
Alles ist wieder schick.
DANKE

[DarkT]

Danke für die tolle Arbeit

[Gunther]

dies liegt wohl daran, dass alle/die meisten der html-Dateien innerhalb vom header-Tag einen div-Tag-Fehler enthalten.

Danke für Deine Anmerkungen. Ich habe mir nun mal die Zeit genommen und ein bereinigtes Set im ersten Beitrag hochgeladen.
Ich hoffe, dass es nun passt.

Edit um 22:22 Uhr: Minimale Änderungen --> Version 2.1

[B.Stromberg]

Hallo!
Auch ich habe diesen Thread eher zufällig gefunden und möchte mich für deine Arbeit bedanken.
Das Ganze hat mir doch sehr dabei geholfen, meine "eigene" Tablet UI zu basteln.

Allerdings habe ich nun ein Problem.

Recht rudimentär wird der Inhalt der Seiten nicht upgedated. So wirklich weiß ich noch nicht woran das liegt, mal sehe ich das Öffnen der Fenster in Echtzeit, mal werden die geänderten Temperaturen der Heizungen erst bei druck auf F5 im Firefox angezeigt.

Viel anfangen kannst du mit dieser Fehlerbeschreibung wahrscheinlich nicht, aber evtl. könntest du mir helfen zu versuchen, diesen Fehler einzugrenzen?

Ein quasi Push der Änderungen ist in der Tablet UI doch default, oder?

[NewMatic]

tolle vorlage. Ich hab nur das Problem, dass mir das Slider-Widget nicht richtig angezeigt wird:
https://forum.fhem.de/index.php/topic,93575.0.html

Vielleicht, kann mir einer von euch helfen?

Danke,
NewMatic

[rcaspar]

Hallo Gunther

Erstmal ein riesen-Merci für deine Arbeit und das "Zurverfügungstellen" der Daten.

Ich setze Version 2.1 ein und habe schon einige Anpassungen an den Seiteninhalten gemacht. Nun habe ich ein komishces Verhalten.
Sobald ich bei einem Widget-Feld ein "Chart" einfüge wird dieses korrekt angezeigt, aber alle Elemente werden etwas grösser. Also zum Beispiel die pagebuttons, die Schriften, etc auf allen "beteiligten Seiten.

Sobald ich die Seite wechsle, bleiben die vergrösserten Elemente, bis ich ein Reload mache, dann werden sie wieder in der korrekten Grösse angezeigt, bis ich auf die Seite mit dem Chart wechsle. Bei der Verwendung eines simplechart passiert dies nicht.

Zur Illustration habe ich 2 Screenshots angehängt.

Hast du eine Idee woran das liegen kann?

Gruss aus der Schweiz

René
 

[rcaspar]

Hi Gunther

Unterdessen habe ich noch entspprechend der Message hier:

https://forum.fhem.de/index.php/topic,48450.msg851860.html#msg851860

die Anpassung gemacht. DIes hat das Problem mit der Grösse der  Icons und Schrift gelöst.

Aktuell habe ich festgestellt, das der Titel "data-title" die Farbe gewechselt hat. Weitere "Nebenwirkungen" sind mir bis anhin noch nicht aufgefallen.

René

[Chriss]

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

Code Auswählen Erweitern

<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:

Code Auswählen Erweitern


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