New FHEM Tablet UI

[nesges]

Ich meinte folgendes Modul
http://www.fhemwiki.de/wiki/Modul_StreamRadio_Einrichtungshilfe

Wenn ich das nach dem überfliegen richtig verstanden habe, brauchst du eigentlich nur Befehle der Art

Code Auswählen Erweitern

set <name> PLAY <StreamURL/Stationname aus Playlist>

auszuführen. Dazu bietet sich das Standard-Widget push an:

Code Auswählen Erweitern

<div data-type="push" data-device="<name>" data-set="PLAY <StreamURL/Stationname aus Playlist>">

[setstate]

Das circleMenu mit einem push-Widget als zentralem Button funktioniert im moment nur am Desktop, nicht aber auf mobilen Geräten (getestet mit iOS Safari+Chrome und Android Chrome, Firefox und Webviewcontrol). Grund dafür ist, dass famultibutton das Click-Event nicht durchreicht (Aufruf von e.preventDefault() in den Modus push und toggle). Oder kann jemand gegenteiliges berichten?

Workarround: symbol-Widget benutzen. Es hat zwar keinen Hintergrund und ist daher mMn nicht so chick, aber es funktioniert erstmal, bis eine bessere Lösung da ist.

Komisch, bei meinem Android 4.1 funzt das perfekt. Siehe mein Beispielscode.
Den famultibutton kann ich ja noch anpassen, ist ja auch von mir

Das Symbol Widget kann man aber auch noch aufhübschen. Per data-background-icon="fa-circle-thin" zum Beispiel. Oder rechteckig mit data-background-icon="fa-square" oder "fa-square-o"

[nesges]

Komisch, bei meinem Android 4.1 funzt das perfekt. Siehe mein Beispielscode.

Bei mir sinds zwei Android 4.2 Geräte, aber ich will nicht ausschliessen, dass hier irgend was anderes die störende Ursache ist Hatte nur festgestellt, dass es funktioniert, wenn ich e.preventDefault() rauswerfe. Wenn sonst niemand Probleme damit hat, reicht mir aber die Lösung mit dem symbol+data-background-icon.

[mw_fhem]

Aktuell 33 Seiten zu diesem UI sind der sichere Beweis, dass es hervorragend ankommt. Das ist doch die Gelegenheit, eine ausführliche Anleitung als pdf zu schreiben!? Mario findet die Idee gut und ich habe mit Latex begonnen zu schreiben. Nun hat Mario noch nie mit Latex gearbeitet und ich habe keine Ahnugn von Javascript. Zudem meine ich sollte Mario sich nicht auch noch um eine Doku kümmern müssen.
Kurzum, ich suche Mitstreiter, die eine Anleitung/ein Handbuch mit vielen Beispielen und Bildern schreiben und aktuell halten wollen. Gerne per PM melden!

[krikan]

Das ist doch die Gelegenheit, eine ausführliche Anleitung als pdf zu schreiben!?

Neugierige Frage: Warum nutzt ihr denn nicht das Fhemwiki, so dass sich alle einfacher beteiligen können? Pdfs sind zumeist statischer... Gruß, Christian

[mw_fhem]

Wäre natürlich auch ne Möglichkeit. Ich persönlich bei ein Freund von pdf's und gutem Textsatz. Aber ich lasse mich gerne von der praktikableren Lösung überzeugen

[setstate]

Wäre natürlich auch ne Möglichkeit. Ich persönlich bei ein Freund von pdf's und gutem Textsatz. Aber ich lasse mich gerne von der praktikableren Lösung überzeugen

Erst einmal ist der Text wichtig, womit man schreibt ist persönliche Vorliebe. Ich hätte  eh demnächst ein Wiki Account beantragt und hätte dann ganz frech die ersten Passagen aus dem Pdf kopiert. 

[setstate]

Genial ....=> New Feature: "circleMenu"

Darüber werde ich meine Kamera steuern! GOIL, GOIL, GOIL

Sehr schön, idealer Anwendungsfall. Aber ich befürchte, die Sub-Buttons sollen offen bleiben, bis du die Kamera ausgerichtet hast. Jetzt schließen sie sich beim ersten Push automatisch. Da folgt noch eine Option heute, die das lösen wird.

[bjoernbo]

Sauber,!
das wäre cool! Dann müsste ich das JS für die Steuerung nicht "umbauen"

[nesges]

Update zu "weather": Kann jetzt alternatives Imageset benutzen, Screenshot in http://forum.fhem.de/index.php/topic,34233.msg280440.html#msg280440

[mw_fhem]

Erst einmal ist der Text wichtig, womit man schreibt ist persönliche Vorliebe. Ich hätte  eh demnächst ein Wiki Account beantragt und hätte dann ganz frech die ersten Passagen aus dem Pdf kopiert. 

Naja, wir müssen die Arbeit ja nicht doppelt und dreifach machen, dann wird es wohl am einfachsten sein, alles ins Wiki zu packen.

[schka17]

Komisch, bei meinem Android 4.1 funzt das perfekt. Siehe mein Beispielscode.
Den famultibutton kann ich ja noch anpassen, ist ja auch von mir

Das Symbol Widget kann man aber auch noch aufhübschen. Per data-background-icon="fa-circle-thin" zum Beispiel. Oder rechteckig mit data-background-icon="fa-square" oder "fa-square-o"

Ich habe mehrere Tablets mit 4.1.1 und 4.2.2 bei allen das selbe Verhalten, multibutoon funktioniert nicht, habe auch Dolphin browser. IOS+Safari auch das selbe Verhalten, schade.

Was ich jetzt noch nicht verstanden habe wie man dafür das Symbol Widget einsetzen könnte?


Gruß

Karl

[nesges]

Was ich jetzt noch nicht verstanden habe wie man dafür das Symbol Widget einsetzen könnte?

Eigentlich tauchst du nur im ersten Widget der Liste (das ist das zentrale) den data-type "push" gegen "symbol" aus. Im Beispiel von setstate:

Code Auswählen Erweitern

<div class="left">
        <div class="cell circlemenu">
            <ul class="menu">
              <li><div data-type="symbol" data-icon="fa-wrench"></div></li>
              <li><div data-type="push" data-device="AvReceiver" data-set="remoteControl subwoofer-temporary-level -6" data-icon="">-6</div></li>
              <li><div data-type="push" data-device="AvReceiver" data-set="remoteControl subwoofer-temporary-level -2" data-icon="">-2</div></li>
              <li><div data-type="push" data-device="AvReceiver" data-set="remoteControl subwoofer-temporary-level 0" data-icon="">0</div></li>
              <li><div data-type="push" data-device="AvReceiver" data-set="remoteControl subwoofer-temporary-level +3" data-icon="">2</div></li>
              <li><div data-type="push" data-device="AvReceiver" data-set="remoteControl subwoofer-temporary-level +9" data-icon="">9</div></li>
              <li><div data-type="push" data-device="AvReceiver" data-set="remoteControl subwoofer-temporary-level +C" data-icon="">12</div></li>
            </ul>
        </div>
        <div data-type="label" class="cell">Woofer</div>
</div>

Dem symbol-Widget kannst du dann noch nen Hintergrund mitgeben, dann ist der Unterschied nichtmal sichtbar:

Code Auswählen Erweitern

              <li><div data-type="symbol" data-icon="fa-wrench" data-background-icon="fa-circle-thin"></div></li>

[setstate]

Update zu "weather": Kann jetzt alternatives Imageset benutzen, Screenshot in http://forum.fhem.de/index.php/topic,34233.msg280440.html#msg280440

Perfekt, diese Bilder sind auch nicht schlecht.
Ich versuche aber gerade das weather widget bei mir einzubinden.  PROPLANTA liefert bei mir "Schneeregen", damit klappt das mapping nicht: TypeError: mapped is undefined

[setstate]

Eigentlich tauchst du nur im ersten Widget der Liste (das ist das zentrale) den data-type "push" gegen "symbol" aus. Im Beispiel von setstate:

Code Auswählen Erweitern

<div class="left">
        <div class="cell circlemenu">
            <ul class="menu">
              <li><div data-type="symbol" data-icon="fa-wrench"></div></li>
              <li><div data-type="push" data-device="AvReceiver" data-set="remoteControl subwoofer-temporary-level -6" data-icon="">-6</div></li>
              <li><div data-type="push" data-device="AvReceiver" data-set="remoteControl subwoofer-temporary-level -2" data-icon="">-2</div></li>
              <li><div data-type="push" data-device="AvReceiver" data-set="remoteControl subwoofer-temporary-level 0" data-icon="">0</div></li>
              <li><div data-type="push" data-device="AvReceiver" data-set="remoteControl subwoofer-temporary-level +3" data-icon="">2</div></li>
              <li><div data-type="push" data-device="AvReceiver" data-set="remoteControl subwoofer-temporary-level +9" data-icon="">9</div></li>
              <li><div data-type="push" data-device="AvReceiver" data-set="remoteControl subwoofer-temporary-level +C" data-icon="">12</div></li>
            </ul>
        </div>
        <div data-type="label" class="cell">Woofer</div>
</div>

Dem symbol-Widget kannst du dann noch nen Hintergrund mitgeben, dann ist der Unterschied nichtmal sichtbar:

Code Auswählen Erweitern

              <li><div data-type="symbol" data-icon="fa-wrench" data-background-icon="fa-circle-thin"></div></li>

Ich schau gleich mal, ob man das beim Push ändern kann, ohne Nachteile. vmtl. ja