New FHEM Tablet UI

[setstate]

Hier noch eine Idee, die ich quick&dirty umgesetzt hier abkippen muss
Effekt in den Screenshots:

Danke nesges für die Idee. Ich habe die Funktionalität übernommen, aber in etwas geänderter Form.
Mit dieser Änderung kommt das circleMenu jetzt als eigenständiges Widget. Dies bedarf aber einer kleinen Anpassung in der index.html. Das muss jetzt so aussehen:

Code Auswählen Erweitern

        <div data-type="circlemenu" class="cell circlemenu">
            <ul>
              <li><div data-type="push" 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>


Also bitte data-type="circlemenu" einfügen

[setstate]

Möchte gerade ein array für die Stati einrichten, aber es geht nicht. Mein Code:

Code Auswählen Erweitern

<div class="left">
<div data-type="symbol" data-device="rr_Petra" data-get-on='["zuhause","schläft","bettfein"]' data-icons='["fa-user","fa-arrow-up","fa-arrow-down"]' class="cell big"></div>
<div type="label" class="cell">Petra</div>
</div>

Status wird nicht erkannt und es wird immer das Icon angezeigt, das an erster Stelle im Array der Icons steht. Mir scheint, dass er a) immmer nur die erste Stelle abfragt und b) auch den gültigen Status nicht mehr erkennt, sobald ein Array definiert ist. Ohne Array wird der Status sofort erkannt und auch farbig angezeigt.

Dieses Beispiel kam in einem vorhergehende Thread zum Thema Müll. Dachte deswegen, ich richte es "kurz" ein. Denkfehler. Beschäftigt mich nun schon eine Weile.

Hat jemand eine Idee, wo der Fehler liegt?

Gruß Jürgen

Es fehlt das data-on-colors Array. Laut Code macht er nur weiter, wenn alle drei Array da sind und gleich groß sind.

[Sky]

Hallo hotwebnet, ich glaube nicht, dass das so funktioniert, wie du denkst. Der Stream soll auf dem Tablet (Rechner) im Hintergrund laufen? Dann müsste ein HTML5 audio Tag benutzt werden. Ich versuche mal ein Demo zu bauen ...

Update Demo liegt auf Github bereit: 'playstream" widget

Code Auswählen Erweitern

<div data-type="playstream" data-url="http://radioeins.de/stream"></div>
<div data-type="label" class="darker">Radio eins</div>


Im Prinzip funktioniert dies genauso wie ich es mir vorstelle ...
aber ( wie immer  )
wenn ich meine Lieblingssender einpflegen will ,habe ich das Problem eine  URL ohne Playlist (ohne m3u ,pls) zu finden

Info gefunden auf :
http://www.radioeins.de/faqs/radioeins_hoeren.html

WLAN Radios

Der MP3-Stream lässt sich mit WLAN-Radios empfangen. Einige Geräte können jedoch keine Playlisten ( m3u, pls) verarbeiten. Die URL für den direkten Zugriff auf den Stream lautet:

http://radioeins.de/stream

Stream-URL´s der Radiobetreiber ,wie wie z.B: http://www.wdr.de/wdrlive/media/einslive.m3u
laufen nicht .

Was ist mit HTML5 audio Tag gemeint ?
Quelle http://webdesign.weisshart.de/audio_tag.php

[bmwfan]

@setstate: Danke, Jetzt gehts. Hatte nicht vermutet, dass auch die Farben benötigt werden und wollte keine anderen verwenden.

@nesges: Habe gleich dienen FB-Callmonitor-Code eingebaut und hat auf anhieb funktioniert.

Mal an alle einen Dank. Durch Eure Codes und Unterstützung schaffen es auch Laien wie ich, funktionierende Dinge hinzubekommen.

[setstate]

Im Prinzip funktioniert dies genauso wie ich es mir vorstelle ...
aber ( wie immer  )
wenn ich meine Lieblingssender einpflegen will ,habe ich das Problem eine  URL ohne Playlist (ohne m3u ,pls) zu finden

Info gefunden auf :
http://www.radioeins.de/faqs/radioeins_hoeren.html

WLAN Radios

Der MP3-Stream lässt sich mit WLAN-Radios empfangen. Einige Geräte können jedoch keine Playlisten ( m3u, pls) verarbeiten. Die URL für den direkten Zugriff auf den Stream lautet:

http://radioeins.de/stream

Stream-URL´s der Radiobetreiber ,wie wie z.B: http://www.wdr.de/wdrlive/media/einslive.m3u
laufen nicht .

Was ist mit HTML5 audio Tag gemeint ?
Quelle http://webdesign.weisshart.de/audio_tag.php

Hallo Sky,
es gibt diese einfache Lösung: man kann die m3u runterladen und mit eine Texteditor öffnen. Dort steht dann die mp3 Stream URL drin. 1Live: http://1live.akacast.akamaistream.net/7/706/119434/v1/gnl.akacast.akamaistream.net/1live

Solange diese sich nicht ändert, reicht das völlig. Wenn es dynamischer sein soll, müsste jemand das widget erweitern. Freiwillige vor ! 

Hier ein Beispiel wie so ein mu3 Parser aussehen könnte. https://github.com/nickdesaulniers/javascript-playlist-parser

[setstate]

ist es möglich, dass circlemenü innerhalb eines labels o.ä. zu setzen?
Idee: ich will gerne, dass innerhalb der Ausgabe des live-Bildes der Kamera, unten rechts das circlemenü einblenden.

(//)

Es gibt nix was nicht geht:

Code Auswählen Erweitern

   <div class="container">
       <div data-type="image"
                data-url="http://knowthelist.github.io/fhem-tablet-ui/fhem-tablet-ui-example_new.png"
                data-size="240px"
                class="cell">
       </div>
       <div class="ontop">
            <div data-type="push" ></div>
       </div>
   </div>


Die Klasse ontop (neu in fhem-tablet-ui.css) schiebt das Objekt nach oben in der Z-Ebene und positioniert es links oben, innerhalb des gleichen Parent Containers.

[bjoernbo]

ich habe eben die

fhem-tablet-ui.css

ausgetauscht und mal schnell dein Beispiel ausprobiert:

... schiebt das Objekt nach oben in der Z-Ebene und positioniert es links oben, innerhalb des gleichen Parent Containers.

[bjoernbo]

Comando zurück! Funktioniert!!!! Hatte ein Cach-Problem!!!!

[bjoernbo]

anbei weitere Sender 

Auf dem Notebook laufen alle problemlos! Auf dem  Android-Tablet nur der letzte "Radio"-Bochum. also .mp3.
Ich bin noch nicht lange auf dem Android-Tablet unterwegs, aber muss ich ggf. noch was installieren?

<li data-row="3" data-col="1" data-sizex="2" data-sizey="3">
<div data-type="playstream" data-url="http://radioeins.de/stream"></div>
<div data-type="label" class="darker">Radio eins</div>
<div data-type="playstream" data-url="http://www.wdr.de/wdrlive/media/einslive.m3u"></div>
<div data-type="label" class="darker">1Live</div>
<div data-type="playstream" data-url="http://www.wdr.de/wdrlive/media/wdr2.m3u"></div>
<div data-type="label" class="darker">WDR 2</div>
<div data-type="playstream" data-url="http://www.jam.fm/streams/jam-nmr-mp3.m3u"></div>
<div data-type="label" class="darker">JAM FM</div>
<div data-type="playstream" data-url="http://edge.live.mp3.mdn.newmedia.nacamar.net/ps-radiobochum/livestream.mp3"></div>
<div data-type="label" class="darker">Radio Bochum</div>

Vorschlag: Wenn ich einen stream starte und einen weiteren, laufen beide gleichzeitig. Kann man das Widget "playstream" so anpassen, dass der vorherige Stream dann beendet wird?

[hillbicks]

Ich hab nochmal ein paar Fragen in der Hoffnung das mir hier jemand einen Tipp geben kann:

-  Ich kann leider immer noch nicht den Status Home ueber das Tablet auswaehlen, der "button" in der Mitte beim Homestatus laesst sich ueber das Tablet (Webviewcontrol oder Browser) nicht anklicken, ueber den Laptop mit Maus allerdings schon.
- Kann ich beim Thermostat-Widget auch den Slider einsetzen? Ich finde das mit dem default Teil irgendwie recht unpraktisch, da ist die Temperatur anzeige immer unter dem Finger.
- Dritte Frage habe ich bereits selbst halb geloest und im WebViewControl Thread gefragt (android app ueber einen Link im Browser starten). Sobald ich da weiss wie das geht sage ich hier Bescheid.

Danke fuer eure Hilfe!

[setstate]

...
Vorschlag: Wenn ich einen stream starte und einen weiteren, laufen beide gleichzeitig. Kann man das Widget "playstream" so anpassen, dass der vorherige Stream dann beendet wird?

Ist jetzt so eingebaut. Aber *.m3u werden nicht unterstützt, man muss die m3u runterladen und mit eine Texteditor öffnen. Dort steht dann die mp3 Stream URL drin. Die kann man benutzen ...

[setstate]

Ich hab nochmal ein paar Fragen in der Hoffnung das mir hier jemand einen Tipp geben kann:

-  Ich kann leider immer noch nicht den Status Home ueber das Tablet auswaehlen, der "button" in der Mitte beim Homestatus laesst sich ueber das Tablet (Webviewcontrol oder Browser) nicht anklicken, ueber den Laptop mit Maus allerdings schon.
- Kann ich beim Thermostat-Widget auch den Slider einsetzen? Ich finde das mit dem default Teil irgendwie recht unpraktisch, da ist die Temperatur anzeige immer unter dem Finger.
- Dritte Frage habe ich bereits selbst halb geloest und im WebViewControl Thread gefragt (android app ueber einen Link im Browser starten). Sobald ich da weiss wie das geht sage ich hier Bescheid.

Danke fuer eure Hilfe!

- Status Home: habe ich etwas optimiert. Vielleicht geht es jetzt bei dir besser.
- Thermostat-Widget: versuche ich auch noch zu optimieren. Kleiner Tipp: wenn man auf die Ziel-Temp-Stelle nur kurz tippt, ist es etwas einfachen mit dem Einstellen. Oder man macht sich die Teile größer mit 'big' als zusätzliche Klasse.

[bjoernbo]

Danke für die kleine, schneller Korrektur! Funktioniert hervorragend.
Hat einen kleinen Schönheitsfehler. Wenn ich das Radio auf der Seite Radio.html einbinde und ich dann auf einen anderen Raum (Wohnzimmer.html) wechsel geht der Stream aus :-/

Wer auf der Suche nach Streams ist kann sich hier umsehen! Sind viele im .mp3 Format.

http://www.chip.de/artikel/Webradio-Live-Stream-Alle-Sender-im-ueberblick_56137550.html

[hotwebnet]

Morgen , auch ich bin noch hier und versuche das mit dem Streamen besser hin zu bekommen, es geht natürlich zur Zeit auch bei mir alles.........
habe jetzt versucht meine Sender ins circlemenu einzubauen, das heißt, ich habe nur noch einen Buttom auf dem Panel und kann dann aus 6 Sendern aussuchen, leider bekomme ich das nicht hin.... ich glaube das mit im JS-Code  angepasst werden.....dafür bin ich aber leider nicht der richtige ...

[bjoernbo]

hotwebnet: Das habe ich gestern auch probiert. Das Problem ist aber das mann 2x "date-type" vernwenden muss.
1x für den push und 1x für den stream