[FUIP] Internetradio

[kabanett]

Hallo zusammen
und gleich vorweg ein riesiges Dankeschön an Thorsten für seine Arbeit am FUIP. Ich bin sehr, sehr begeistert. ,,Einfach" Super für mich!
 
Zum Thema Radio habe ich nichts gefunden. Im 1¾ Stunden Film wurde zwar gezeigt was alles mit HTML-View möglich ist, leider nicht wie. Zumindest Jemand wie ich, der so etwas noch nie gemacht hat, kommt da schnell an seine Grenzen.

Ich habe mir aus dem nachfolgenden Link den Code kopiert bzw. auch die Dummys angelegt und die Sender-Links und deren Namen angepasst.
https://wiki.fhem.de/wiki/FTUI_Beispiel_Webradio
Das funktioniert, bis auf ein paar Kleinigkeiten, soweit ganz gut. Vielleicht kann mir jemand bei meinen Problemchen helfen.

Die da wären:
1.   Wie bekomme ich die Auswahl der Sender Anzeige so lang, das Sender und Auswahlsymbol nicht ineinander verlaufen?
2.   Wie kann ich die Hintergrundfarbe im erscheinenden PopUp Auswahlfenster ändern?
3.   Momentan endet die Wiedergabe wenn ich eine andere Seite anwähle und geht erst nach der Rückkehr weiter. Ist es möglich die Wiedergabe trotz Seiten/Raumwechsel zu erhalten?

Ich hänge mal ein Bild zur Verdeutlichung an!

Vielen Dank und
Gruß Kabanett 

[Thorsten Pferdekaemper]

und gleich vorweg ein riesiges Dankeschön an Thorsten für seine Arbeit am FUIP. Ich bin sehr, sehr begeistert. ,,Einfach" Super für mich!

Bitteschön...
 

Zum Thema Radio habe ich nichts gefunden. Im 1¾ Stunden Film wurde zwar gezeigt was alles mit HTML-View möglich ist, leider nicht wie. Zumindest Jemand wie ich, der so etwas noch nie gemacht hat, kommt da schnell an seine Grenzen.

Die HTML-View ist auch ein bisschen "black magic". Natürlich muss man HTML "können", um das Teil verwenden zu können. Die HTML-View ist vor Allem für Umsteiger von reinem FTUI auf FUIP gedacht.

Ich habe mir aus dem nachfolgenden Link den Code kopiert bzw. auch die Dummys angelegt und die Sender-Links und deren Namen angepasst.
https://wiki.fhem.de/wiki/FTUI_Beispiel_Webradio
Das funktioniert, bis auf ein paar Kleinigkeiten, soweit ganz gut. Vielleicht kann mir jemand bei meinen Problemchen helfen.

Ich nehme mal an, Du hast das alles in eine einzige HTML-View gepackt. Wahrscheinlich wäre es besser, es in mehrere zu zerlegen. Dann kannst Du sie einzeln positionieren etc.

Die da wären:
1.   Wie bekomme ich die Auswahl der Sender Anzeige so lang, das Sender und Auswahlsymbol nicht ineinander verlaufen?

Ich wundere mich, dass es so kurz ist. Normalerweise müsste sich bei reinem FTUI die Breite anpassen. Kannst Du mal versuchen, die View "Select" zu verwenden? Dann kannst Du auch die Breite anpassen.

2.   Wie kann ich die Hintergrundfarbe im erscheinenden PopUp Auswahlfenster ändern?

Siehe oben: Wenn Du die Select-View verwendest, müsste es besser passen.

3.   Momentan endet die Wiedergabe wenn ich eine andere Seite anwähle und geht erst nach der Rückkehr weiter. Ist es möglich die Wiedergabe trotz Seiten/Raumwechsel zu erhalten?

Also das weiß ich im Moment nicht. Geht das mit reinem FTUI?
Soweit ich das sehe, verwendet das playstream Widget einfach nur ein Audio-Objekt im Main-Thread. Das ist natürlich weg, wenn man die Seite neu lädt. Dafür habe ich auf die Schnelle auch keine Lösung gefunden. Mal sehen, vielleicht fällt mir dazu  noch was ein. ...oder sonst jemandem?

Gruß,
   Thorsten

[kabanett]

Hallo und Danke für deine Antwort!

Ich nehme mal an, Du hast das alles in eine einzige HTML-View gepackt. Wahrscheinlich wäre es besser, es in mehrere zu zerlegen. Dann kannst Du sie einzeln positionieren etc.

Hab ich gemacht, ändert aber nichts an der Darstellung/Funktion!

Ich wundere mich, dass es so kurz ist. Normalerweise müsste sich bei reinem FTUI die Breite anpassen. Kannst Du mal versuchen, die View "Select" zu verwenden? Dann kannst Du auch die Breite anpassen.
Siehe oben: Wenn Du die Select-View verwendest, müsste es besser passen.

Auch gemacht.... naja.... ich weiß nicht wie! Select setzt ein Device voraus das ich in dem Sinne nicht habe. Die Senderauswahl findet ja im HTML statt!? Siehe Anhang!

Also das weiß ich im Moment nicht. Geht das mit reinem FTUI?

Ich hoffe die Frage geht nicht an mich

Das kann ich doch sicher löschen, oder?

Code Auswählen Erweitern

<!-- mi-Icons im Header aktivieren:     <link rel="stylesheet" href="lib/material-icons.min.css" />     -->


Gruß Kabanett

[Thorsten Pferdekaemper]

Hi,
ich habe mich jetzt ein bisschen mehr mit der Thematik befasst. Zumindest den Darstellungsproblemen müssten wir beikommen. Also zuerst einmal habe ich das Device in FHEM etwas vereinfacht. Das ist, was ich jetzt habe:

Code Auswählen Erweitern


defmod radiosender dummy
attr radiosender readingList link volume
attr radiosender room radio
attr radiosender setList link volume

setstate radiosender off
setstate radiosender 2019-11-19 09:48:32 link http://radioeins.de/stream
setstate radiosender 2019-11-19 09:45:36 state off
setstate radiosender 2019-11-19 09:40:45 volume 5

Das eigene Device nur für "Volume" ist überflüssig.

Die HTML-View in FUIP habe ich in drei getrennte Views zerlegt:
Einmal ein HTML-View, welches nur das playstream- und select-Widget enthält.

Code Auswählen Erweitern


<div data-type="playstream"
     data-get="radiosender:STATE"
     data-url="radiosender:link"
     data-volume="radiosender:volume"
     class="hide">
</div>

<div class="w2x"
     data-type="select"
     data-device="radiosender"
     data-list=""
     data-items='["http://radioeins.de/stream","http://wdr-1live-live.icecast.wdr.de/wdr/1live/live/mp3/128/stream.mp3","http://br-b5aktuell-live.cast.addradio.de/br/b5aktuell/live/mp3/128/stream.mp3"]'
     data-alias='["Radio eins","einsLife","B5aktuell"]'
     data-get="link"
     data-set="link">
</div>

Man kann die Select-View tatsächlich nicht verwenden, da diese keine Alias-Angaben erlaubt. Da hätte man im Backend ziemliche Klimmzüge machen müssen. Außerdem habe ich das Ding mit 'class="w2x"' gleich etwas vergrößert.

Als zweites eine SimpleSwitch-View zum Ein- und Ausschalten. Sie erstes Bild im Anhang.

Und als drittes den Volume-Slider als HTML-View:

Code Auswählen Erweitern


<div data-type="spinner"
     data-device="radiosender"
data-get="volume"
data-set="volume"
     data-max="100"
     data-step="5"
     data-icon-left="fa-volume-down"
     data-icon-right="fa-volume-up"
     class="spinner value horizontal centered">
</div>


Die Aktion hat den Vorteil, dass man die Einzelteile jetzt frei auf der Oberfläche rumschieben kann. So kann  man z.B. vermeiden, dass die Senderliste ins Volume-Widget reinragt. (Siehe auch das zweite Bild im Anhang.)

Die Senderauswahl findet ja im HTML statt!?

Die Kommunikation geht aber über's Backend. Außerdem ist es egal, ob man am Frontend zwei getrennte Widgets hat oder gleich zwei getrennte Views in FUIP. Das select-Widget setzt den Link in das "link"-Reading im FHEM-Device. Das playstream-Widget bekommt das dann mit und schaltet um.

Das kann ich doch sicher löschen, oder?

Code Auswählen Erweitern

<!-- mi-Icons im Header aktivieren:     <link rel="stylesheet" href="lib/material-icons.min.css" />     -->


Ja. Erstens ist das sowieso nur ein Kommentar und zweitens macht FUIP das automatisch. Man hat alle mi-Icons sowieso immer zur Verfügung.

Die Hintergrundfarbe der Select-Options war bei mir automatisch richtig. Ich habe auch mal verschiedene styleSchema-Einstellungen probiert, aber es war immer so, wie es sein soll. Wenn es bei Dir immer noch falsch ist, dann sag' nochmal Bescheid.

Gruß,
   Thorsten

[kabanett]

Hallo Thorsten

Hi,
ich habe mich jetzt ein bisschen mehr mit der Thematik befasst.

Vielen Dank dafür!

Die Aktion hat den Vorteil, dass man die Einzelteile jetzt frei auf der Oberfläche rumschieben kann.So kann  man z.B. vermeiden, dass die Senderliste ins Volume-Widget reinragt. (Siehe auch das zweite Bild im Anhang.)

So hatte ich das gestern Abend schon gemacht (siehe oben). Der Vorteil ist mir klar!
Jetzt sieht der Select schon mal gut aus.

Die Hintergrundfarbe der Select-Options war bei mir automatisch richtig. Ich habe auch mal verschiedene styleSchema-Einstellungen probiert, aber es war immer so, wie es sein soll. Wenn es bei Dir immer noch falsch ist, dann sag' nochmal Bescheid.

Bescheid! (siehe Anhang)

Ich habe daraus mal ein Template gemacht und auf einer anderen Seite eingebunden. Jetzt war meine Hoffnung, dass beim Seitenwechsel der Player, wenn vieleicht auch mit kurzer Unterbrechung, weiter spielt. Leider ist dem nicht so! Der Status ist richtig, aber es wird erst nach erneuten aus an etwas wieder gegeben.
Eigentlich hatte ich (als Nichtwisser) gehofft, dass eine Zelle innerhalb vom FUIP als (ich sag mal) Tab im Browser behandelt werden kann. Wieder zu einfach gedacht.

Gruß

[Thorsten Pferdekaemper]

Hi,
also der dunkle Hintergrund der options ist eigentlich sogar FTUI-Standard und FUIP ändert daran nichts. Hast Du eine user-css Datei (in FTUI oder FUIP)?
Das mit dem Seitenwechsel ist nicht ganz so einfach, wenn überhaupt möglich...
Gruß,
   Thorsten

[kabanett]

Hallo Thorsten,
ich habe da nichts händisch eingefügt oder etwas darin verändert!
Im FUIP habe ich folgende CSS Dateien.

Code Auswählen Erweitern

fuip-blue-ui.css
fuip-bright-mint-ui.css
fuipchart.css
fuip-darkblue-ui.css
fuip-darkgreen-ui.css
fuip-default-ui.css
fuip-green-ui.css
fuip-mobil-ui.css
theme.blue.css
theme.default.css
widget_dwdweblink.css
widget_fuip_colorwheel.css
widget_fuip_wdtimer.css
widget_weatherdetail.css
In FTUI befinden sich diese

Code Auswählen Erweitern

fhem-blue-ui.css
fhem-darkblue-ui.css
fhem-darkgreen-ui.css
fhem-green-ui.css
fhem-mobil-ui.css
fhem-tablet-ui.css
fhem-tablet-ui.min.css
fhem-tablet-ui-wdtimer.css
ftui_chart.css
ftui_checklist.css
ftui_colorwheel.css
ftui_controlbutton.css
ftui_controller.css
ftui_departure.css
ftui_medialist.css
ftui_range.css
ftui_slideout.css
ftui_slider.css
ftui_spinner.css
ftui_weekprofile.css
ftui-bright-mint-ui.css


Gruß

Edit:
Ich habe mal mit deiner Farbauswahl gespielt weil ich den Rollladenview nicht gut sehen kann. Also die Bedienbuttons gehen jetzt einigermaßen aber das Zahnraddingens ist nicht sichbar in der Zelle. Ich hatte Alle ausprobiert aber es hat sich bei keinem deiner Auswahlfarben verändert.
Hab ich da etwas verstellt?

[Thorsten Pferdekaemper]

ich habe da nichts händisch eingefügt oder etwas darin verändert!

Ich tappe da jetzt etwas im Dunkeln. Könntest Du mir auch mal ein list des FUIP-Device geben?
...oder könntest Du mit den Entwickler-Werkzeugen des Browsers mal nachsehen, woher die background-colour vom option-Element kommt?

Edit:
Ich habe mal mit deiner Farbauswahl gespielt weil ich den Rollladenview nicht gut sehen kann. Also die Bedienbuttons gehen jetzt einigermaßen aber das Zahnraddingens ist nicht sichbar in der Zelle. Ich hatte Alle ausprobiert aber es hat sich bei keinem deiner Auswahlfarben verändert.
Hab ich da etwas verstellt?

Das ist jetzt ein ganz anderes Thema. Könntest Du dafür einen neuen Thread aufmachen?

Gruß,
   Thorsten

[Thorsten Pferdekaemper]

Hi,
bei der Sache mit dem Seitenwechsel bzw. dem Reload bin ich weitergekommen. Das Problem ist vor Allem, dass kaum noch ein Browser (standardmäßig) das automatische Abspielen von Sound erlaubt. Zuerst muss eine Benutzer-Interaktion mit der Seite erfolgen. Nach einem Reload gilt das ganze erst einmal als neue Seite (egal, ob es dieselbe ist oder eine andere). D.h. man muss auf der Seite erst einmal etwas machen, damit man irgendwelche Töne hören kann.
Bei Chrome zumindest kann man das aber pro Seite (bzw. Domain) abschalten. Dazu klickt man oben links neben der Adresszeile auf das kleine "i" und dann auf "Website-Einstellungen". Dort scrollt man dann runter bis zu "Ton" und wählt dort "Zulassen".
Dann unterbricht das Radio zwar mal kurz, läuft aber dann brav automatisch weiter.
Gruß,
   Thorsten

[kabanett]

Ich tappe da jetzt etwas im Dunkeln. Könntest Du mir auch mal ein list des FUIP-Device geben?

Code Auswählen Erweitern


Internals:
   FUUID      5dc5a350-f33f-0fc8-75df-37e42fb3087fd99e
   NAME       TAB_A_IF
   NR         268
   STATE      TAB_A_IF
   TYPE       FUIP
   autosave   none
   editOnly   0
   colors:
     background #2A2A2A
     background-hover #444
     background-transparent rgba(42,42,42,.7)
     editonly   rgba(255,255,255,.1)
     foreground #EEE
     header     #262626
     header-foreground #AAA
     header-transparent rgba(38,38,38,.7)
     page-background #000
     symbol-active #32a054
     symbol-foreground rgba(249,249,249,1)
     symbol-inactive rgba(127,127,127,1)
   fhem:
     directory  ./www/tablet
     friendlyname TAB_A_IF
     infix      tab_a_if/
   pages:
   viewtemplates:
Attributes:
   baseHeight 70
   baseWidth  70
   layout     gridster
   locked     0
   pageWidth  1280
   room       Software_Geräte
   styleBackgroundImage Strand.jpg
   styleSchema darkblue

...oder könntest Du mit den Entwickler-Werkzeugen des Browsers mal nachsehen, woher die background-colour vom option-Element kommt?

Ich hab da mal ein Bild angehängt. Meinst du so etwas?

Das ist jetzt ein ganz anderes Thema. Könntest Du dafür einen neuen Thread aufmachen?

Mal sehen?! Ich wollte nur darstellen was ich warum gemacht habe! Eigentliche Frage war ja ob man dadurch etwas kaputt machen kann. Aber scheinbar ja nicht.

Hi,
bei der Sache mit dem Seitenwechsel bzw. dem Reload bin ich weitergekommen.

Ja geht! Hilft nur nicht im Browser auf dem Tab in der Küche weiter. Es wäre schön gewesen aber wenn das so aufwendig ist, dann verzichte ich lieber und halte dich nicht weiter von wichtigeren Sachen ab! 

Gruß

[Thorsten Pferdekaemper]

Hi,
das mit der Hintergrundfarbe beim Select habe ich gefunden. Es war das darblue styleSchema. Mach mal ein update und schau Dir's nochmal an.

Ja geht! Hilft nur nicht im Browser auf dem Tab in der Küche weiter.

Wieso kann man das dort nicht einstellen? Ich habe es mal auf meinem Telefon versucht. Es klappt sowohl mit Chrome als auch dem Fully Browser.

Gruß,
   Thorsten

[kabanett]

Hallo,
ja sieht sehr gut aus!!!

Chrome hatte ich bis gestern nie verwendet. Mal schauen ob der auch Fullscreen und Bewegungserkennung kann.
Fully hab ich installiert, funktioniert auch! Für Bewegungserkennung muß man scheinbar zahlen.

Ich komme erst später zum ausführlichen Testen und melde mich entsprechend.

Vielen Dank und Gruß

[kabanett]

Hallo Thorsten,
sorry, hat ne Weile gedauert da ich an ,,Männerschnupfen" erkrankte und glücklicherweise überlebt hab.

Ich hab viel getestet. Alle möglichen Browser in allen möglichen Konstellationen, mehrere Tabs mit verschiedenen FUIP und dem gleichen Radiolink, aber es haut nicht zufriedenstellend hin. 
Die beste Lösung ist den View unsichtbar irgendwo auf den anderen Seiten eizufügen! Hier reicht nur dieser Teil

Code Auswählen Erweitern

<div data-type="playstream"
     data-get="Radiosender:STATE"
     data-url="Radiosender:link"
     data-volume="Radiosender:volume"
     class="hide">
</div> und der Stream läuft mit kurzer Unterbrechung weiter.

Vielen Dank für deine Hilfe!!! Das ganze wurde auch von meinen beiden Testern sofort übernommen.

Woraus sich bei mir noch eine Bitte ergibt. Die Links und die Sendernamen zu pflegen ist momentan ziemlich unübersichtlich. Ich habe schon gesucht, aber als HTML Anfänger nichts Funktionierendes gefunden. Gibt es die Möglichkeit das ganze in einem anzugeben? (Link:Name) Oder in Tabellenform? Ich hoffe du  verstehst was ich meine. Gerade momentan, mit den temporären Weihnachtssendern, wäre das eine große Hilfe.

[offtopic]
Nochmal ne andere Sache als Hinweis. Man kann hier leider nicht mehr antworten.
https://forum.fhem.de/index.php/topic,95525.msg891986.html#msg891986
Ich habe ,,lange" alles mögliche versucht zu verbiegen um meine Anwesenheitsanzeige hin zu bekommen, bis ich den View ausversehen bemerkt habe. Im Prinzip ist es ja eine Statusanzeige für jedes Device mit jedem erdenklichen Reading und allen zur Verfügung stehenden Icons. Daher ist der Name für Einsteiger nicht gerade Hilfreich! Ist sicherlich aus der Entstehung bedingt.
[/offtopic]

Gruß

[Thorsten Pferdekaemper]

Woraus sich bei mir noch eine Bitte ergibt. Die Links und die Sendernamen zu pflegen ist momentan ziemlich unübersichtlich. Ich habe schon gesucht, aber als HTML Anfänger nichts Funktionierendes gefunden. Gibt es die Möglichkeit das ganze in einem anzugeben? (Link:Name) Oder in Tabellenform? Ich hoffe du  verstehst was ich meine. Gerade momentan, mit den temporären Weihnachtssendern, wäre das eine große Hilfe.

Also die einfachste Lösung, die mir dazu einfällt könnte folgendermaßen gehen: Du bastelst Dir in FHEM ein Reading, welches die Radiostationen enthält, also etwa "Radio eins,einsLife,B5aktuell". Dann benutzt Du im select-widget data-list mit dem Reading und setzt bei data-delimiter das ",".
Dann bekommst Du durch das select den Klarnamen (also z.B. B5aktuell) ins Backend geschickt. Dort kannst Du dann Dein Mapping machen. Das ganze könntest Du z.B. über ein File regelmäßig hochladen.
Dazu muss man halt ein bisschen programmieren, aber so würde es komfortabler werden.

[offtopic]
Nochmal ne andere Sache als Hinweis. Man kann hier leider nicht mehr antworten.
https://forum.fhem.de/index.php/topic,95525.msg891986.html#msg891986
Ich habe ,,lange" alles mögliche versucht zu verbiegen um meine Anwesenheitsanzeige hin zu bekommen, bis ich den View ausversehen bemerkt habe. Im Prinzip ist es ja eine Statusanzeige für jedes Device mit jedem erdenklichen Reading und allen zur Verfügung stehenden Icons. Daher ist der Name für Einsteiger nicht gerade Hilfreich! Ist sicherlich aus der Entstehung bedingt.
[/offtopic]

Ja das ist tatsächlich historisch gewachsen. Umbenennen ist da halt sehr schwierig. Mal sehen, vielleicht mache ich mal eine Kopie davon mit einem neuen Namen und setze das "alte" auf "veraltet". Hast Du eine Idee für einen besseren Namen?
Gruß, 
   Thorsten
   

[kabanett]

Also die einfachste Lösung........
Dazu muss man halt ein bisschen programmieren, aber so würde es komfortabler werden.

Hallo Thorsten, ich dachte es gibt vieleicht einen einfachen Ausdruck in HTML. Wenn nicht, es geht ja auch so. Oder ich schreib mich doch noch irgendwo ein.
Da ich noch am Anfang meiner FUIP-Bastelei stehe, kann es sein das ich noch mit anderen Sachen nerve.
Nochmals vielen Dank für deine Unterstützung!!! Einfach toll.

Hast Du eine Idee für einen besseren Namen?

Nee, nicht wirklich. Vieleicht in Richtung Reading und dessen Status?

Gruß