Dropdown-Menüs

[rasti]

Hallo,

sorry für die vielleicht blöde Frage:
- gibt es im Tablet UI noch kein widget, mit dem man über DropdownMenüs FHEM-Befehle absetzen kann ?

Also so ein Circle-Menu-Widget, wo die Einträge nicht in kleine Kreisen reinkommen,
sondern dann als Dropdown-Menü erscheinen, wo ein Eintrag auch mal mehr als nur 1-3 Zeichen haben kann.

Ich habe im Tablet-UI-Wiki  das Select-Widget gefunden und mir das Doppel-Combobox-Beispiel angesehen,
aber an meine fhem-Devices habe ich es nicht angepasst bekommen. Vielleicht ist das ja schon was ich suche....


Ganz konkret möchte ich Fernsehsender auswählen. In der FHEM-Standardoberfläche geht das bei mir über

Code Auswählen Erweitern

Internals:
   NAME       TVSender
   NR         374
   STATE      Das_Erste
   TYPE       dummy
   Readings:
     2016-02-04 22:55:14   state           Das_Erste
Attributes:
   alias      _____TV Sender
   devStateIcon ARD:ARD ZDF:ZDF 3-Sat:3-Sat
   group      1 - TV Sender im Wohnzimmer wählen
   icon       it_television
   room       TV-Programm
   setList    state:Das_Erste,ZDF,RTL,SAT1,VOX,Pro_Sieben,Arte,Kabel_Eins,Bayern,SWR,3Sat,Phoenix,Tele5,Eins_Festival,ZDF_Info,ZDF_Neo,ZDF_Kultur,SIXX,WDR,NDR,RBB,MDR,Hessen,Tagesschau_24,Eins_Plus,NTV,RTL_2,N24,Super_RTL,RTL_Nitro,Bibel_TV,DMAX,Kika,Pro7_Maxx,Sat1_Gold
   sortby     2
   webCmd     state


Schöne Grüße
Ralf

[kvo1]

Schau mal hier
http://forum.fhem.de/index.php/topic,34233.msg398645.html#msg398645

[roman1528]

Oder schau mal hier

(rechte Seite (Select)

http://knowthelist.github.io/fhem/tablet/demo_circlemenu.html

Grüße^^

[rasti]

Schau mal hier
http://forum.fhem.de/index.php/topic,34233.msg398645.html#msg398645

Habe das mal implementiert, ich sehe dann einene Schalter mit dem ich nacheinander verschiedene fhem-Befehle absetzen kann.
Gut zu wissen, dass es sowas gibt, könnte ich anderweitig brauchen, aber ein Dropdown-menü ist das doch nicht ??

[rasti]

Habe das mal implementiert, ich sehe dann einene Schalter mit dem ich nacheinander verschiedene fhem-Befehle absetzen kann.
Gut zu wissen, dass es sowas gibt, könnte ich anderweitig brauchen, aber ein Dropdown-menü ist das doch nicht ??

das sieht schon mal gut aus macht aber noch nicht was ich will.

Ich bräuchte anstatt der Links das Absetzen eines fhem-Befehls, so wie bei Push.
Noch schöner wäre dass beim Klicken auf ein (eigenes) Logo (also die der TV/Radiosender) ein Fhem Befehl abgesetzt wird.

Geht das mit circlemenu, wenn es jemand weiss oder implementiert hat bitte mal den Code posten.

Ich habe nicht hinbekommen...

Gruss

Ralf


Gruss

Ralf

[setstate]

Ins Circlemenu kann man auch push-Buttons oder Images einbinden:

Code Auswählen Erweitern


    <div data-type="circlemenu" data-border="square"
         data-item-width="100" data-item-height="45"
         data-circle-radius="50"
         data-direction="vertical"
         class="circlemenu">
        <ul>
          <li>
            <div class="inline">Select</div>
            <div data-type="symbol" data-icon="fa-bars" class="small inline"></div>
          </li>
          <li><div data-type="push" data-device="dummy1" data-set="remoteControl" data-set-on="channel1" data-background-icon="fa-square-o" data-icon="">1</div></li>
          <li><div data-type="push" data-device="dummy1" data-set="remoteControl" data-set-on="channel2" data-background-icon="fa-square-o" data-icon="">2</div></li>
          <li><div data-type="push" data-device="dummy1" data-set="remoteControl" data-set-on="channel3" data-background-icon="fa-square-o" data-icon="">3</div></li>
          <li><div data-type="push" data-device="dummy1" data-set="remoteControl" data-set-on="channel4" data-background-icon="fa-square-o" data-icon="">4</div></li>
        </ul>
    </div>
    <div class="newline"></div>
    <div data-type="circlemenu" data-border="square"
         data-item-width="100" data-item-height="40"
         data-circle-radius="50"
         data-direction="vertical"
         class="circlemenu">
        <ul>
          <li>
            <div class="inline">Select</div>
            <div data-type="symbol" data-icon="fa-bars" class="small inline"></div>
          </li>
          <li><div data-type="image" data-url="https://upload.wikimedia.org/wikipedia/commons/thumb/d/db/ProSieben_Logo_2015.svg/120px-ProSieben_Logo_2015.svg.png" data-fhem-cmd="set remoteControl channel1"></div></li>
          <li><div data-type="image" data-url="https://upload.wikimedia.org/wikipedia/de/thumb/d/dd/Sat.1_Logo2011.png/200px-Sat.1_Logo2011.png" data-fhem-cmd="set remoteControl channel2"></div></li>
          <li><div data-type="image" data-url="https://upload.wikimedia.org/wikipedia/commons/thumb/4/45/RTL_Logo_2014.svg/300px-RTL_Logo_2014.svg.png" data-fhem-cmd="set remoteControl channel3"></div></li>
          <li><div data-type="image" data-url="https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/ZDF.svg/150px-ZDF.svg.png" data-fhem-cmd="set remoteControl channel4"></div></li>
        </ul>
    </div>

[rasti]

Ins Circlemenu kann man auch push-Buttons oder Images einbinden:

Code Auswählen Erweitern


    <div data-type="circlemenu" data-border="square"
         data-item-width="100" data-item-height="45"
         data-circle-radius="50"
         data-direction="vertical"
         class="circlemenu">
        <ul>
          <li>
            <div class="inline">Select</div>
            <div data-type="symbol" data-icon="fa-bars" class="small inline"></div>
          </li>
          <li><div data-type="push" data-device="dummy1" data-set="remoteControl" data-set-on="channel1" data-background-icon="fa-square-o" data-icon="">1</div></li>
          <li><div data-type="push" data-device="dummy1" data-set="remoteControl" data-set-on="channel2" data-background-icon="fa-square-o" data-icon="">2</div></li>
          <li><div data-type="push" data-device="dummy1" data-set="remoteControl" data-set-on="channel3" data-background-icon="fa-square-o" data-icon="">3</div></li>
          <li><div data-type="push" data-device="dummy1" data-set="remoteControl" data-set-on="channel4" data-background-icon="fa-square-o" data-icon="">4</div></li>
        </ul>
    </div>
    <div class="newline"></div>
    <div data-type="circlemenu" data-border="square"
         data-item-width="100" data-item-height="40"
         data-circle-radius="50"
         data-direction="vertical"
         class="circlemenu">
        <ul>
          <li>
            <div class="inline">Select</div>
            <div data-type="symbol" data-icon="fa-bars" class="small inline"></div>
          </li>
          <li><div data-type="image" data-url="https://upload.wikimedia.org/wikipedia/commons/thumb/d/db/ProSieben_Logo_2015.svg/120px-ProSieben_Logo_2015.svg.png" data-fhem-cmd="set remoteControl channel1"></div></li>
          <li><div data-type="image" data-url="https://upload.wikimedia.org/wikipedia/de/thumb/d/dd/Sat.1_Logo2011.png/200px-Sat.1_Logo2011.png" data-fhem-cmd="set remoteControl channel2"></div></li>
          <li><div data-type="image" data-url="https://upload.wikimedia.org/wikipedia/commons/thumb/4/45/RTL_Logo_2014.svg/300px-RTL_Logo_2014.svg.png" data-fhem-cmd="set remoteControl channel3"></div></li>
          <li><div data-type="image" data-url="https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/ZDF.svg/150px-ZDF.svg.png" data-fhem-cmd="set remoteControl channel4"></div></li>
        </ul>
    </div>

Danke dir, ich habe es nun hinbekommen.

Problem bei mir war zusätzlich, dass ich eine alte Version der widget_circlemenu.js hatte.
Habe nun ein update durchgeführt und es läuft nun.



Gruss

Ralf

[rasti]

Hallo,

noch eine Zusatzfrage dazu :

Wie bekomme ich den Browser dazu, die Imagegröße in der folgenden Zeile in das Feld  data-item-width="100" data-item-height="45" einzupassen ?

Code Auswählen Erweitern


   <li><div data-type="image" data-url="https://upload.wikimedia.org/wikipedia/commons/thumb/d/db/ProSieben_Logo_2015.svg/120px-ProSieben_Logo_2015.svg.png" data-fhem-cmd="set remoteControl channel1"></div></li>


Anscheinend werden alle Bilder automatisch verkleinert, denn selbst wenn ich pixelmäßig größere Images einlade erscheinen die ganz klein und mickrig....

Gruß

Ralf

[setstate]

beim Image kannst du mit data-width und data-height arbeiten, in % oder px

[rasti]

beim Image kannst du mit data-width und data-height arbeiten, in % oder px

Imagegröße einstellen funktioniert bei mir anscheinend nur, wenn das Image
dann das einzige Element in einem gridsterfeld ist,

Kann es sein, dass wenn das Image wie oben in einem circlemenu drin ist, es nicht mehr einzustellen geht ?

Gruss
Ralf

[rasti]

Imagegröße einstellen funktioniert bei mir anscheinend nur, wenn das Image
dann das einzige Element in einem gridsterfeld ist,

Kann es sein, dass wenn das Image wie oben in einem circlemenu drin ist, es nicht mehr einzustellen geht ?

Gruss
Ralf

Kommando zurück - es geht doch.

Sorry ....