Sonos im Tablet UI - Beispielkonfiguration

Nobby1805 · 07 Januar 2018, 16:22:22

Wie sieht denn der Rest deiner Datei aus ... wenn ich dein Fragment ohne Änderung in meine Umgebung übernehme dann ist das zwar nicht optimal aber vermutlich doch eher das was du erwartest
Edit: verwendest du das Template aus #33 oder eine anderer Version?

Fixel2012 · 07 Januar 2018, 19:28:21

Zitat von: Nobby1805 am 07 Januar 2018, 16:22:22
Wie sieht denn der Rest deiner Datei aus ... wenn ich dein Fragment ohne Änderung in meine Umgebung übernehme dann ist das zwar nicht optimal aber vermutlich doch eher das was du erwartest
Edit: verwendest du das Template aus #33 oder eine anderer Version?

Danke für das schnelle Antworten!

Ich verwende das Original Template aus dem Wiki von Reinerlein. Viel einstellen bzw. falsch machen kann man bei der Definition des Templates ja nicht?

Ich habe eben zusätzlich nochmal geprüft, ob ich vielleicht einen kopier Fehler habe. Es ist allerdings alles identisch (geprüft mit diff online checker)

In der Template Datei muss ja auch sonst nichts stehen, oder hat eine Template.html eine gewisse Syntax im Dokument? Das wäre mir neu.

Danke und Gruß,

Fixel

Nobby1805 · 07 Januar 2018, 23:52:21

Ok, dann habe ich es mal mit dem Template von Reiner probiert ... sieht gut aus

poste bitte mal deinen kompletten index-File wo du das Template aufrufst

PS deine ftui-Module sind alle auf dem neusten Stand?

Fixel2012 · 08 Januar 2018, 09:01:50

Zitat von: Nobby1805 am 07 Januar 2018, 23:52:21
Ok, dann habe ich es mal mit dem Template von Reiner probiert ... sieht gut aus

Schade, also muss es an meiner config liegen. Habe allerdings keine Ahnung, wo ich da anfangen soll zu suchen, bzw wonach ich überhaupt suchen muss

Zitatposte bitte mal deinen kompletten index-File wo du das Template aufrufst

Hier:

Code Auswählen

<!DOCTYPE html>
<html>
<head>
    <!--
     /* FHEM tablet ui */
     /*
     * UI builder framework for FHEM
     *
     * Version: 2.2.*
     * URL: https://github.com/knowthelist/fhem-tablet-ui
     *
     * Copyright (c) 2015-2016 Mario Stephan <mstephan@shared-files.de>
     * Under MIT License (http://www.opensource.org/licenses/mit-license.php)
     *
     * !!!! Evaluation version - run only in a staging enviroment !!!!
     *
     * - create a new folder named 'tablet_eval' in /<fhem-path>/www
     * - copy all files incl. sub folders into /<fhem-path>/www/tablet_eval
     * - add 'define TABLETUIEVAL HTTPSRV ftui_eval ./www/tablet_eval Tablet-EVAL' in fhem.cfg
     * - Tadaaa! A new fhem ui in http://<fhem-url>:8083/fhem/tablet_eval/
     *
     * Create a Demo Device in FHEM
     * define ftuitest dummy
     */
	 
	 data-row = oben/unten
	 data-col = Rechts/Links
    -->
		<meta name="viewport" content="maximum-scale=3.0, user-scalable=yes">
		<meta name="widget_base_width" content="60">
		<meta name="widget_base_height" content="52">
		<meta name="mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="gridster_disable" content="1">
		<meta name="widget_margin" content="4">
		<meta name="longpoll" content="1"> <!-- 1=longpoll;0=shortpoll every 30sec -->
		<meta name="debug" content="0"> <!-- 1=output to console;0=not output -->	

		<link rel="stylesheet" href="/fhem/tablet/lib/jquery.gridster.min.css" />
		<link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui.css" />
		<link rel="stylesheet" href="/fhem/tablet/lib/font-awesome.min.css" />
		<link rel="stylesheet" href="/fhem/tablet/lib/material-icons.min.css" />
		<link rel="stylesheet" href="/fhem/tablet/lib/jquery.toast.min.css" />
		<link rel="stylesheet" href="/fhem/tablet/lib/powerange.min.css" />
		<link rel="stylesheet" href="/fhem/tablet/lib/openautomation.css" />
		<link rel="stylesheet" href="/fhem/tablet/lib/fhemSVG.css" />
		<link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui-page-user.css" />
		<link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui-weekprofile.css" />
			
		

		<!-- define your personal style here, it wont be overwritten  -->
		<!-- link rel="stylesheet" href="/fhem/tablet/css/fhem-green-ui.css" / -->
		<!-- link rel="stylesheet" href="css/fhem-tablet-ui-user.css" / -->
		<script type="text/javascript" src="/fhem/tablet/lib/powerange.min.js"></script>
		<script type="text/javascript" src="/fhem/pgm2/jquery.min.js"></script>
		<script type="text/javascript" src="/fhem/tablet/lib/jquery.toast.min.js"></script>
		<script type="text/javascript" src="/fhem/tablet/lib/jquery.gridster.min.js"></script>
		<script type="text/javascript" src="/fhem/tablet/js/fhem-tablet-ui.js" defer></script>
		
		<!-- Enable this lines for usage with WebViewControl --><!-- -->
		<script type="text/javascript" src="/fhem/pgm2/cordova-2.3.0.js"></script>
		<script type="text/javascript" src="/fhem/js/webviewcontrol.js"></script>
		<script type="text/javascript">var wvcDevices = {'12345': 'Tablet'}; var wvcUserCssFile="webviewcontrol.css"</script>
		<!-- End for WebViewControl -->
		
		
		<!-- ANFANG Auto Return to Home PageTab -->
		
	<script type="text/javascript">
		var t;
		window.onload = resetTimer;
		// DOM Events
		document.onmousemove = resetTimer;
		document.onkeypress = resetTimer;
		document.onclick = resetTimer;
		document.onmousedown = resetTimer;
	
		function returnHome() {
			var hash= window.location.hash.replace('#', '').replace('.html', '');
			if (hash != "" && hash != "home") {
				var homeButton = document.getElementById('home');
				$(homeButton).trigger("toggleOn");
				window.location = "https://192.168.1.8:8083/fhem/ftui_felix/#content_main.html";
			};
		}
	
		function resetTimer() {
			clearTimeout(t);
			t = setTimeout(returnHome, 30000);
			// 1000 milisec = 1 sec
		}
	</script>	
		
		<!-- ENDE Auto Return to Home PageTab -->
		
		<!-- Anfang Styles und Javascript für die Scrolltexte in der Sonosplayer-Ansicht -->
<style>
.flowanimation {
	position: relative;
	white-space: nowrap;
	display: inline-block;
	animation: floatText 8s infinite alternate ease-in-out;
}

@keyframes floatText {
	from {
		left: 0px;
	}
	
	to {
		left: calc(355px - 100%);
	}
}

.mycenteredtext {
	position: relative;
	white-space: nowrap;
	display: inline-block;
	left: calc(355px / 2 - 50%);
}
</style>

<script type="text/javascript">
	function checkFlowAnimation(elemName) {
		if ($(elemName).innerWidth() >= 355) {
			$(elemName).addClass('flowanimation');
		} else {
			$(elemName).addClass('mycenteredtext');
		}
	}
</script>
<!-- Ende Styles und Javascript für die Scrolltexte in der Sonosplayer-Ansicht -->
		
		
		

    <title>FHEM UI Felix</title>
</head>
<body>
<div class="gridster">
<ul>


				<!-- ============= Uhrzeit ================ -->
				<!-- ====================================== -->
				<li class="semitransparent3d" data-row="1" data-col="2" data-sizex="4" data-sizey="2">
				<header class="semitransparentheader">Uhrzeit</header>
					<div class="cell">
					<div data-type="clock" class="cell top-space-1x big yellow semitransparenttext"></div>
					<div data-type="clock" data-format="l d.m.Y" class="large semitransparenttext"></div></div>
				</li>

				<!-- ========= Aussentemperatur  =========== -->
				<!-- ======================================= -->
				<li class="semitransparent3d" data-row="1" data-col="6" data-sizex="4" data-sizey="2">
				<header class="semitransparentheader">Aussentemperatur</header>
					<div class="sheet">
						<div class="vbox top-space items-space-around">
							<div class="row">
								<div class="cell-1-3">
									<div class="row">								
										<div class="hbox">
											<div class="compressed  normal shadow inline" data-type="symbol" data-icon="wi wi-thermometer" data-off-color="#999"></div>	
											<div class="large inline semitransparenttext" data-type="label" data-device="Aussen_Thermometer" data-get="temperature" data-limits='[-73,0,30]' data-colors='["#6699FF","#FAA460","#FF0000"]' data-unit="%B0C%0A" ></div>
										</div>							
										<div data-type="label" class="inline shadow darker">Temperatur</div>
										<div class="hbox">
											<div data-type="klimatrend" data-device="Aussen_Thermometer" data-get="statTemperatureTendency" data-refperiod="1" class="inline large"></div>
											<div data-type="klimatrend" data-device="Aussen_Thermometer" data-get="statTemperatureTendency" data-refperiod="2" class="inline large"></div>
											<div data-type="klimatrend" data-device="Aussen_Thermometer" data-get="statTemperatureTendency" data-refperiod="3" class="inline large"></div>
										</div>	
									</div>
								</div>	
								<div class="cell-1-3">
									<div class="row">								
										<div class="hbox">
											<div class="compressed  normal shadow inline" data-type="symbol" data-icon="wi wi-humidity" data-off-color="#999"></div> 							
											<div class="large inline semitransparenttext" data-type="label" data-device="Aussen_Thermometer" data-limits='[-73,0,100]' data-colors='["#6699FF","#FAA460","#FF0000"]' data-get="humidity" data-unit="%"></div> 
										</div>								
										<div data-type="label" class="inline shadow darker">Luftfeuchte</div>
										<div class="hbox">
											<div data-type="klimatrend" data-device="Aussen_Thermometer" data-get="statHumidityTendency" data-refperiod="1" class="inline large"></div>
											<div data-type="klimatrend" data-device="Aussen_Thermometer" data-get="statHumidityTendency" data-refperiod="2" class="inline large"></div>
											<div data-type="klimatrend" data-device="Aussen_Thermometer" data-get="statHumidityTendency" data-refperiod="3" class="inline large"></div>
										</div>	
									</div>
								</div>	
								<div class="cell-1-3">
									<div class="row">								
										<div class="hbox">
											<div class="compressed  normal shadow inline " data-type="symbol" data-icon="wi wi-thermometer-exterior" data-off-color="#999"></div>	
											<div class="compressed  normal shadow inline left-narrow" data-type="symbol" data-icon="wi wi-raindrops" data-off-color="#999"></div>	
											<div class="large inline semitransparenttext" data-type="label" data-device="Aussen_Thermometer" data-get="dewpoint" data-limits='[-73,0,100]' data-colors='["#6699FF","#FAA460","#FF0000"]' data-unit="%B0C%0A"></div>
										</div>								
										<div data-type="label" class="inline  shadow darker">Taupunkt</div>
															<div class="hbox">
					
										<br>
										</div>

									</div>
								</div>	
							</div>
						</div>
					</div>
				</li>
				
				
				<!-- ======= Oberes-Hauptmenü Regen ====== -->
				<!-- ====================================== -->
				<li class="semitransparent3d" data-row="1" data-col="10" data-sizex="2" data-sizey="2">
					<header   class="semitransparentheader">Regen</header>
					
					<div class="bigger"
					data-type="symbol"
					data-device="Regensensor_Rain"
					data-get-on='["rain","dry"]'
					data-icons='["oa-weather_rain_light","oa-weather_cloudy_heavy"]'
					data-on-colors='["#518cf0","#999"]'></div>
				</li>
				
				
				
				<!-- ================ Sonne =============== -->
				<!-- ====================================== -->
				<li class="semitransparent3d" data-row="1" data-col="9" data-sizex="3" data-sizey="2">
					<header class="semitransparentheader" >Sonne</header>
					<div class="vbox">	
						<div class="hbox">		
							<div class="compressed  normal shadow" data-type="symbol" data-icon="wi wi-sunrise" data-off-color="#999"></div>					
							<div class="w1x  normal semitransparenttext" data-type="label" data-device="Sonnenaufgangdummy"	data-color="#FAA460"></div>
						</div>
						<div class="hbox">							
							<div class="compressed  normal top-narrow shadow" data-type="symbol" data-icon="wi wi-sunset" data-off-color="#999"></div>					
						<div class="w1x  normal top-narrow semitransparenttext" data-type="label" data-device="Sonnenuntergangdummy" data-color="#FAA460"></div>
						</div>
					</div>
				</li>

				
						
								
				
				
				
				<!-- ============= Menü Links  ============= -->
				<!-- ======================================= -->				
				
				
				<li data-row="1" data-col="1" data-sizex="1" data-sizey="10" class="semitransparent3d">
				<header  class="semitransparentheader">Menü</header>
				
					<div class="vbox">
					

						<div id="home" data-type="pagebutton" data-url="#content_main.html" data-load="#content1" data-off-background-color="rgba(0,0,0,0)" data-on-background-color="rgba(0,0,0,0)" data-off-color="#0087EA" data-on-color="#273D5C" data-active-pattern="(.*/||.*index.html||.*#content_main.html)" data-icon="fa-home" class="prefetch big shadow"></div>
						<div data-type="label" class="small shadow">Home</div>
						<div data-type="pagebutton" data-url="#content_Sonos.html" data-load="#content2" data-off-background-color="rgba(0,0,0,0)" data-on-background-color="rgba(0,0,0,0)" data-off-color="#0087EA" data-on-color="#273D5C" data-active-pattern=".*#content_Sonos.html" data-icon="fa-music" class="prefetch big shadow"></div>
						<div data-type="label" class="small shadow">Sonos</div>
						<div data-type="pagebutton" data-url="#content_felix-Schlafzimmer.html"	   data-load="#content3" data-off-background-color="rgba(0,0,0,0)" data-on-background-color="rgba(0,0,0,0)" data-off-color="#0087EA" data-on-color="#273D5C" data-active-pattern=".*#content_felix-Schlafzimmer.html" data-icon="fa-bed" class="prefetch big top-space shadow"></div>
						<div data-type="label" class="small shadow">Schlaf- Zimmer</div>
						<div data-type="pagebutton" data-url="#content_felix-Wohnzimmer.html"     data-load="#content4" data-off-background-color="rgba(0,0,0,0)" data-on-background-color="rgba(0,0,0,0)" data-off-color="#0087EA" data-on-color="#273D5C" data-active-pattern=".*#content_felix-Wohnzimmer.html" data-icon="oa-scene_livingroom" class="prefetch big top-space shadow"></div>
						<div data-type="label" class="small shadow">Wohn- Zimmer</div>
						<div data-type="pagebutton" data-url="#content_zentrale.html"     data-load="#content5" data-off-background-color="rgba(0,0,0,0)" data-on-background-color="rgba(0,0,0,0)" data-off-color="#0087EA" data-on-color="#273D5C" data-active-pattern=".*#content_zentrale.html" data-icon="fa-cogs" class="prefetch big top-space shadow"></div>
						<div data-type="label" class="small shadow">Zentrale</div>

					</div>
				</li>
				
				
				
				<!-- ============= Menü Rechts  ============= -->
				<!-- ======================================= -->				
				
				<li data-row="1" data-col="15" data-sizex="1" data-sizey="10" class="semitransparent3d">
				<header  class="semitransparentheader">Menü</header>
					<div class="vbox">
						<div data-type="pagebutton" data-url="#content_kameras.html"      	data-load="#content6" data-off-background-color="rgba(0,0,0,0)" data-on-background-color="rgba(0,0,0,0)" data-off-color="#0087EA" data-on-color="#273D5C" data-active-pattern=".*#content_kameras.html" data-icon="oa-it_camera" class="prefetch big  shadow"></div>
						<div data-type="label" class="small top-narrow shadow">Kamera</div>
						<div data-type="pagebutton" data-url="#content_rolllaeden.html"  data-load="#content7" data-off-background-color="rgba(0,0,0,0)" data-on-background-color="rgba(0,0,0,0)" data-off-color="#0087EA" data-on-color="#273D5C" data-active-pattern=".*#content_rolllaeden.html" data-icon="oa-fts_shutter_60" class="prefetch big shadow"></div>
						<div data-type="label" class="small top-narrow shadow">Rollläden</div>
						<div data-type="pagebutton" data-url="#content_telefon.html"	    data-load="#content8" data-off-background-color="rgba(0,0,0,0)" data-on-background-color="rgba(0,0,0,0)" data-off-color="#0087EA" data-on-color="#273D5C" data-active-pattern=".*#content_telefon.html" data-icon="fa-phone" class="prefetch big shadow"></div>
						<div data-type="label" class="small top-narrow shadow">Anrufe</div>
						<div data-type="pagebutton" data-url="#content_tanken.html"       data-load="#content9" data-off-background-color="rgba(0,0,0,0)" data-on-background-color="rgba(0,0,0,0)" data-off-color="#0087EA" data-on-color="#273D5C" data-active-pattern=".*#content_tanken.html" data-icon="fa-car" class="prefetch big shadow"></div>
						<div data-type="label" class="small top-narrow shadow">Spritpreise</div>
						<div data-type="pagebutton" data-url="#content_garten.html"   	data-load="#content10" data-off-background-color="rgba(0,0,0,0)" data-on-background-color="rgba(0,0,0,0)" data-off-color="#0087EA" data-on-color="#273D5C" data-active-pattern=".*#content_garten.html" data-icon="oa-scene_garden" class="prefetch big shadow"></div>
						<div data-type="label" class="small top-narrow shadow">Garten</div>
						<div data-type="pagebutton" data-url="#content_wetter.html" data-load="#content11" data-off-background-color="rgba(0,0,0,0)" data-on-background-color="rgba(0,0,0,0)" data-off-color="#0087EA" data-on-color="#273D5C" data-active-pattern=".*#content_wetter.html" data-icon="oa-weather_cloudy" class="prefetch big shadow"></div>
						<div data-type="label" class="small top-narrow shadow">Wetter</div>
						<div data-type="pagebutton" data-url="#content_3D_Drucker.html" data-load="#content12" data-off-background-color="rgba(0,0,0,0)" data-on-background-color="rgba(0,0,0,0)" data-off-color="#0087EA" data-on-color="#273D5C" data-active-pattern=".*#content_3D_Drucker.html" data-icon="fa-print" class="prefetch big shadow"></div>
						<div data-type="label" class="small top-narrow shadow">3D-Drucker</div>

					</div>
				</li>
				
				<li data-row="3" data-col="2" data-sizex="13" data-sizey="8" >
					<div class="page" id="content1"></div>
					<div class="page" id="content2"></div>
					<div class="page" id="content3"></div>
					<div class="page" id="content4"></div>
					<div class="page" id="content5"></div>
					<div class="page" id="content6"></div>
					<div class="page" id="content7"></div>
					<div class="page" id="content8"></div>
					<div class="page" id="content9"></div>
					<div class="page" id="content10"></div>
					<div class="page" id="content11"></div>
					<div class="page" id="content12"></div>
					<div class="page" id="content13"></div>
					<div class="page" id="content14"></div>
					<div class="page" id="content15"></div>
					<div class="page" id="content16"></div>
					<div class="page" id="content17"></div>
					<div class="page" id="content18"></div>
				</li>


</ul>
</div>
</body>
</html>

ZitatPS deine ftui-Module sind alle auf dem neusten Stand?

Ja, alles aktuell!

Danke für deine Hilfe.

Gruß,

Fixel

Nobby1805 · 08 Januar 2018, 10:36:01

Jetzt komme ich dem Aussehen bei dir schon näher ...

und mit data-sizex="6" data-sizey="12" sieht es bei mir aus wie im 2. Screenshot ... das ist doch dann OK

Fixel2012 · 08 Januar 2018, 10:41:30

Du bist wohl sehr nahe!

Exakt so verzogen sieht es eben bei mir auch aus

Weißt du ganz zufällig auch noch an was es liegt?

Fixel2012 · 08 Januar 2018, 10:54:44

Zitat von: Nobby1805 am 08 Januar 2018, 10:36:01
und mit data-sizex="6" data-sizey="12" sieht es bei mir aus wie im 2. Screenshot ... das ist doch dann OK

Sieht bei mir mit der Veränderung genauso aus. Allerdings ist das nun außerhalb des bereiches der Tablet UI Seite.

Wie kann ich das Proportional ändern? Ich hätte gerne alle (3 Stück) meine Sonos auf der Seite.

Es muss also alles ein wenig kleiner werden.

Nobby1805 · 08 Januar 2018, 11:16:36

Da sehe ich dann nur noch die Chance an diversen Stellen des Templates vorsichtig etwas zu ändern ... dort sind feste (Pixel) Größen eingetragen ... z.B. bei imagecover, slider, ... usw.

Ähnliche Probleme habe ich auch immer wieder wenn ich an einer Stelle in meiner Anzeige eine kleine Änderung mache und dann diverse andere Stellen im Bild wieder verschoben werden bzw. wirken

Fixel2012 · 08 Januar 2018, 11:31:33

Mhh, also ein wenig komplizierter und Aufwändiger

Schade.

Werde dann wohl einfach mal alle Werte, die Größen Angaben Signalisieren um die hälfte halbieren.

Danke dir aufjedenfall für deine Hilfe!

hnnmn · 30 Januar 2018, 23:16:19

Hallo zusammen

Grosse Begeisterung herrscht - toll, was schon alles funktioniert.
Danke!

Für den WAF>95% fehlt mir noch, dass beim Click auf das Menu-Icon im FTUI-Sonos-Modul im folgenden Popup in den Einträgen bspw. bei Playlist tatsächlich die Playlists erscheinen.

Ich habe ein "Sonos_Living_Room:<{SONOS_getListRG($DEVICE,"Playlists")}@Playlists>" erstellt und dort ist die testweise erstellte Playlist enthalten (readingsGroup).

Zudem habe ich aus der Anleitung heraus ein Notify erstellt: "Sonos_[^_]+:PlaylistsVersion.* { fhem("get $NAME PlaylistsWithCovers"); fhem("get $NAME Playlists"); }"

Um ehrlich zu sein: ich bin noch nicht ganz durchgestiegen... ggf. erstellte mir das Notify auch das zuerst genannte readingsGroup ...

Meine Erwartung war jedenfalls, dass wenn sie in der readingsGroup stehen, sie auch dem SONOS-Template für das FTUI resp. dem o.g. Menu-Eintrag 'zur Verfügung' stehen... dem ist bisher wenigstens, auch nach Restarts, nicht so.

Hat jemand eine Idee dazu?

Beste Grüsse

cpramhofer · 04 Februar 2018, 13:16:49

Beispiel für aktuelle Version von FHEM, FTUI und SONOS.

ich bin ja extrem begeistert von den Beispielen und den Möglichkeiten.
Nachdem ich mich nun eine Woche lang jeden Abend durch alle Beispiele gekämpft habe und immer noch nicht schlauer bin muss ich mich jetzt aber direkt an das Forum wenden.

Ich habe alles aktualisiert und die aktuellsten Versionen installiert.
Cover Anzeige, Buttons, usw. funktioniert alles. Nur leider komme ich mit den Playlists, Favoriten und Radios nicht klar.
Sonos lädt ja inzwischen die Listen in eigene Readings.
Wie schaffe ich es aus diesen Readings vernünftige Drop Down boxen (oder noch besser Listenauswahlen zu erzeugen)? Ich habe alles versucht inkl. Funktionen in myUtils.
Gibt es für die neusten Versionen ein durchgängiges Beispiel?

Code Auswählen


<li data-row="1" data-col="2" data-sizex="4" data-sizey="3">
   <header>Sonos Büro</header>

   <div class="col-1-3">
        <div data-type="image" data-device="Sonos_Buero" data-get="currentAlbumArtURL" data-size="100%" class="normal top-space"></div>

        <div data-type="spinner" class="bottom centered" data-device="Sonos_Buero" data-get="Volume" data-set="Volume" data-max="50" data-step="1" data-icon-left="fa-volume-down" data-icon-right="fa-volume-up" class="top-space-2x spinner value" style="width: 200px; max-width: 200px; height: 50px; line-height: 45px; color: rgb(204, 204, 204); background-color: rgb(74, 74, 74);">
            <div class="lefticon fa fa-volume-down fa-lg fa-fw" style="color: rgb(170, 170, 170);"></div>
            <div class="levelArea" style="width: 50%;">
              <div class="levelRange" style="left: 0px; width: 21.4286px; background: rgb(170, 105, 0) none repeat scroll 0% 0%;"></div>
            </div>
            <div class="righticon fa fa-volume-up fa-lg fa-fw" style="color: rgb(170, 170, 170);"></div>
        </div>
   </div>
   <div class="col-2-3">
          <div class="row top-space">
             <div data-type="push" data-device="Sonos_Buero" data-set-on="PLAY" data-icon="fa-play" class="cell bigger"></div>
             <div data-type="push" data-device="Sonos_Buero" data-set-on="PAUSE" data-icon="fa-pause" class="cell bigger"></div>
             <div data-type="push" data-device="Sonos_Buero" data-set-on="PREVIOUS" data-icon="fa-step-backward" class="cell bigger"></div>
             <div data-type="push" data-device="Sonos_Buero" data-set-on="NEXT" data-icon="fa-step-forward" class="cell bigger"></div>
             <div data-type="multistatebutton" data-device="Sonos_Buero" data-get="Shuffle" data-get-on='["0","1"]' data-set='["Shuffle 1","Shuffle 0"]' data-set-default="Shuffle 0" data-icons='["fa-random","fa-random"]' class="cell bigger"></div>
         </div>
          <div class="row bottom">
            <div data-type="label" data-device="Sonos_Buero" data-get="currentArtist" class="normal"></div>
            <div data-type="label" data-device="Sonos_Buero" data-get="currentAlbum" class="small"></div>
            <div data-type="label" data-device="Sonos_Buero" data-get="currentTitle"  class="large"></div>
          </div>
          <div data-type="select" data-device="Sonos_Buero" data-list="Playlists" data-set="Sonos_Buero" class="wider"></div>

          <div data-type="select"
            data-device="Sonos_Buero"
            data-list="Playlists"
            data-alias="PlaylistsListAlias"
            data-delimiter="|"
            data-quote="/"
            data-get="currentPlaylistNameMasked"
            data-set="StartPlaylist"
            class="inline w3x"></div>
        </div>

   </div>
</li>

ich finde nur weit und breit kein Reading "PlaylistsListAlias"

Code Auswählen


define Sonos_Buero SONOSPLAYER RINCON_5CAAFD07505E01400_MR
attr Sonos_Buero getListsDirectlyToReadings 1
attr Sonos_Buero getPlaylistsListAtNewVersion 1
attr Sonos_Buero getQueueListAtNewVersion 1
attr Sonos_Buero getRadiosListAtNewVersion 1
attr Sonos_Buero getListsDirectlyToReadings 1
attr Sonos_Buero alias Büro
attr Sonos_Buero event-on-change-reading .*
attr Sonos_Buero generateInfoSummarize1 <NormalAudio><Artist prefix="(" suffix=")"/><Title prefix=" '" suffix="'" ifempty="[Keine Musikdatei]"/><Album prefix=" vom Album '" suffix="'"/></NormalAudio> <StreamAudio><Sender suffix=":"/><SenderCurrent prefix=" '" suffix="' -"/><SenderInfo prefix=" "/></StreamAudio>
attr Sonos_Buero generateInfoSummarize2 <TransportState/><InfoSummarize1 prefix=" => "/>
attr Sonos_Buero generateInfoSummarize3 <Volume prefix="Lautstärke: "/><Mute instead=" ~ Kein Ton" ifempty=" ~ Ton An" emptyval="0"/> ~ Balance: <Balance ifempty="Mitte" emptyval="0"/><HeadphoneConnected instead=" ~ Kopfhörer aktiv" ifempty=" ~ Kein Kopfhörer" emptyval="0"/>
attr Sonos_Buero generateVolumeSlider 1
attr Sonos_Buero getAlarms 1
attr Sonos_Buero getTitleInfoFromMaster 1
attr Sonos_Buero group Buero
attr Sonos_Buero icon icoSONOSPLAYER_icon-S6.png
attr Sonos_Buero minVolume 0
attr Sonos_Buero model Sonos_S6
attr Sonos_Buero room Sonos
attr Sonos_Buero simulateCurrentTrackPosition 1
attr Sonos_Buero sortby 1
attr Sonos_Buero stateFormat presence ~ currentTrackPositionSimulatedPercent% (currentTrackPositionSimulated / currentTrackDuration)
attr Sonos_Buero webCmd Volume
define Sonos_GetNewFavouritesNotify notify Sonos_[^_]+:FavouritesVersion.* { fhem("get $NAME FavouritesWithCovers");; fhem("get $NAME Favourites");; }
define Sonos_GetNewPlaylistsNotify notify Sonos_[^_]+:PlaylistsVersion.* { fhem("get $NAME PlaylistsWithCovers");; fhem("get $NAME Playlists");; }
define Sonos_GetNewRadiosNotify notify Sonos_[^_]+:RadiosVersion.* { fhem("get $NAME RadiosWithCovers");; fhem("get $NAME Radios");; }
define Sonos_GetNewQueueNotify notify Sonos_[^_]+:QueueVersion.* { fhem("get $NAME QueueWithCovers");; fhem("get $NAME Queue");; }

Liebe Grüsse
Christoph

Otto · 13 Februar 2018, 15:36:39

Moin,

ZitatCover Anzeige, Buttons, usw. funktioniert alles. Nur leider komme ich mit den Playlists, Favoriten und Radios nicht klar.

Da scheitere ich auch.

Wer hat einem Tipp?

PieBa · 05 März 2018, 22:43:26

Hallo,
versucht mal im SONOS device (nicht SONOSPLAYER!) das attribut getListsDirectlyToReadings auf 1 zu setzen.

Als Trigger zur Aktualisierung und zum erstmaligen Anlegen müsst Ihr dann noch für jedes SONOSPLAYER device

get Favourites
get Playlists
get Queue
get Radios

ausführen.

Damit diese Listen bei Änderungen automatisch aktualisiert werden, müssten dann noch die 4 Notifies, die im SONOS Wiki ganz unten aufgeführt sind, eingerichtet werden.

cpramhofer · 11 März 2018, 09:47:59

@PieBa vielen Dank!! Der Hinweis mit dem Attribut im SONOS Device und nicht im Player hat mich ein ordentliches Stück weiter gebracht! Die Playlists werden jetzt angezeigt. Die restlichen Dropdowns sind noch leer aber da werde ich mal bei mir auf Fehlersuche gehen.

Liebe Grüsse und einen schönen Sonntag
Christoph

cpramhofer · 11 März 2018, 17:00:49

Alle Playlists gefüllt! Perfekt!

Mit dem Feintuning bin ich noch nicht ganz zufrieden.

Brauche ich die Funktionen in 99_myUtils eigentlich noch? und wenn ja welche Funktion wird verwendet? Ich kann das aus dem Code nicht ableiten!

Die Selects baue ich mit folgendem Code im FTUI auf:

Code Auswählen

					<div>
						<div class="large middle inline">Abspielliste: </div>
						<div data-type="select"
							data-device="Device"
							data-list="QueueList"
							data-alias="QueueListAlias"
							data-delimiter="|"
							data-get="currentTrack"
							data-set="Track"
							class="inline w3x"
							onchange="$('.dialog-close').trigger('click');"></div>
					</div>

Er scheint aber auch die ":" als Delimeter zu verwenden.
Zusätzlich habe ich das Problem dass er bei den Playlists in der ersten Zeile den kompletten String anzeigt inkl. Delimeter.