Play/Pause - data-icon-on/off

Pythonf · 22 Januar 2016, 23:25:40

Für die Steuerung meines Radios fände ich einen Button super, der je nach Status ein anderes Icon hat, quasi in der Art:

Code Auswählen

<div data-type="switch" data-device="RaspberryPi" data-set-on="pause" data-icon-on="fa-pause" data-set-off="play" data-icon-off="fa-play" class="cell"></div>

Gibt es hier eine Möglichkeit?

Beste Grüße
Fabian

setstate · 23 Januar 2016, 01:17:03

Code Auswählen


   <div data-type="push" data-device="MPD1"
        data-icon="fa-step-backward" data-background-icon="-"
        data-set-on="previous" class="inline  right-narrow">
   </div>
   <div data-type="switch"
          data-device="MPD1"
          data-set-on="play" data-set-off="pause"
          data-states='["play","pause"]'
          data-icons='["fa-pause","fa-play"]'
          data-colors='["#555","#555"]'
          data-background-colors='["#555","#555"]'
          data-background-icon="fa-circle-thin"
          data-background-color="#555"
          class="bigplus">
   </div>
   <div data-type="push" data-device="MPD1"
        data-icon="fa-step-forward" data-background-icon="-"
        data-set-on="next" class="inline left-narrow">
   </div>

Pythonf · 23 Januar 2016, 10:14:26

Muss ich noch mehr beachten, als die obige Konfiguration, denn ich erhalte nur einen Kreis, den ich anklicken kann (play, pause funktioniert)?

Code Auswählen

	<div class="inline">
		<div data-type="push" data-device="RaspberryPi" data-icon="fa-step-backward" data-set-on="prev" class="inline  right-narrow" ></div>
		<div data-type="switch"
			data-device="RaspberryPi"
			data-set-on="play" data-set-off="pause"
			data-states='["play","pause"]'
			data-icons='["fa-pause","fa-play"]'
			data-colors='["#555","#555"]'
			data-background-colors='["#555","#555"]'
			data-background-icon="fa-circle-thin"
			data-background-color="#555"
			class="cell">
		</div>
		<div data-type="push" data-device="RaspberryPi" data-icon="fa-step-forward" data-set-on="next" class="inline  left-narrow" ></div>
	</div>

setstate · 23 Januar 2016, 10:20:34

Welches Reading willst du nutzen? Wenn du es nicht explizit angibst, wird für data-get -> STATE benutzt und für data-set -> '' (leer)

Wenn es was anderes sein soll, muss man es zum Holen mit data-get="***" und zum Senden mit data-set="xxxx" angeben.

Pythonf · 23 Januar 2016, 11:06:58

Code Auswählen


data-get="playStatus"
data-states='["playing","paused"]'

Hab ich angepasst, jetzt wird das richtige Symbol angezeigt, allerdings nicht aktualisiert, erst duch ein neuladen der Seite wird das entsprechend andere Symbol angezeigt.
Im WEB 8083 hab ich longpoll 1 aktiviert. Das zu steuernde Device ist ein Squeezebox-Player. Gibt es hier auch irgendeinen Weg, dass das aktualisiert wird?

setstate · 23 Januar 2016, 16:05:37

Ich nehme mal an, dass in der ftui html

Code Auswählen

<meta name="longpoll" content="1">
gesetzt ist. Dann kann nur ein Fehler in der Seite selbst (nicht geschlossene Tags, Anführungszeichen vergessen usw.) ein Update verhindern.
Gibt es in der JS-Console Fehlermeldungen?

Pythonf · 24 Januar 2016, 23:12:33

Das einzige was angezeigt wird ist:

Code Auswählen

Synchrone XMLHttpRequests am Haupt-Thread sollte nicht mehr verwendet werden, weil es nachteilige Effekte für das Erlebnis der Endbenutzer hat. Für weitere Hilfe siehe http://xhr.spec.whatwg.org/

Hier mal ein minimalisiertes html dokument:

Code Auswählen

<!DOCTYPE html>
<html>
<head>
    <!--
     /* FHEM tablet ui */
     /*
     * Just another dashboard for FHEM
     *
     * Version: 1.4.4
     * Requires: jQuery v1.7+, font-awesome, jquery.gridster, jquery.toast
     * URL: https://github.com/knowthelist/fhem-tablet-ui
     *
     * Copyright (c) 2015 Mario Stephan <mstephan@shared-files.de>
     * Under MIT License (http://www.opensource.org/licenses/mit-license.php)
     *
     * - create a new folder named 'tablet' in /<fhem-path>/www
     * - copy all files incl. sub folders into /<fhem-path>/www/tablet
     * - add 'define tablet_ui HTTPSRV tablet ./www/tablet Tablet Frontend' in fhem.cfg
     * - Tadaaa! A new fhem ui in http://<fhem-url>:8083/fhem/tablet/
     */
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="widget_base_width" content="116">
    <meta name="widget_base_height" content="131">
    <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="longpoll" content="1"> <!-- 1=longpoll;0=shortpoll every 30sec -->
    <meta name="debug" content="0"> <!-- 1=output to console;0=no 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/jquery.toast.min.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="/fhem/tablet/css/fhem-tablet-ui-user.css" /> -->

    <script src="/fhem/pgm2/jquery.min.js" defer></script>
    <script src="/fhem/tablet/lib/jquery.toast.min.js" defer></script>
    <script src="/fhem/tablet/lib/jquery.gridster.min.js" defer></script>
    <script src="/fhem/tablet/js/fhem-tablet-ui.min.js" defer></script>

    <!-- Remove this line to enable for usage with WebViewControl
    <script defer>var wvcDevices = {'12345': 'Tablet'}; var wvcUserCssFile="webviewcontrol.css"</script>
    <script src="/fhem/pgm2/cordova-2.3.0.js" defer></script>
    <script src="/fhem/pgm2/webviewcontrol.js" defer></script>
    <!-- End for WebViewControl -->

    <title>FHEM-Tablet-UI</title>
</head>
<body>

<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="3" data-sizey="3">
    <header>Radio</header>
	<div class="centered">
		<div data-type="volume" data-device="RaspberryPi" data-get="volume" data-set="volume" data-min="0" data-max="100" class=""></div>
	</div>
	<div class="inline">
		<div data-type="push" data-device="RaspberryPi" data-icon="fa-step-backward" data-set-on="prev" class="inline  right-narrow" ></div>
		<div data-type="switch"
			data-device="RaspberryPi"
			data-set-on="play" data-set-off="pause"
			data-get="playStatus"
			data-states='["playing","paused"]'
			data-icons='["fa-pause","fa-play"]'
			data-colors='["#555","#555"]'
			data-background-colors='["#555","#555"]'
			data-background-icon="fa-circle-thin"
			data-background-color="#555"
			class="cell">
		</div>
		<div data-type="push" data-device="RaspberryPi" data-icon="fa-step-forward" data-set-on="next" class="inline  left-narrow" ></div>
	</div>
	<div class="centered">
		<div data-type="label" data-device="RaspberryPi" data-get="currentPlaylistName"></div>
		<hr>
		<div data-type="label" data-device="RaspberryPi" data-get="currentArtist"></div>
		<div data-type="label" data-device="RaspberryPi" data-get="currentTitle"></div>
		<hr>
		<div data-type="label" class="inline left-narrow">Sender:</div>
		<div data-type="select" data-device="KodiSVData" data-items='["SWR3","SWR1","Antenne1","SwissJazz","KlassikRadio","KlassikRock","RadioTon"]' data-get="Sender" data-set="Sender" class="cell w2x" ></div>
		<div data-type="switch" data-device="RaspberryPi" data-icon="fa-power-off" class="inline right-narrow"></div>
	</div>
</li>
</ul>
</div>
</body>
</html>

Haben die anderen html Dateien einfluss auf einander? Hab die Datei als index.html getestet.

Beste Grüße
Fabian