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

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

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.   ;D

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

Viel Spaß damit.

Gruß
Leeloo
Greatz Leeloo

drhirn


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:

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

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

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:
<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:
<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.
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: Kusselin am 06 November 2017, 19:14:56
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

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

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... ;-)
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

Torsten_MG

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

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

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