Für die Steuerung meines Radios fände ich einen Button super, der je nach Status ein anderes Icon hat, quasi in der Art:
<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
<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>
Muss ich noch mehr beachten, als die obige Konfiguration, denn ich erhalte nur einen Kreis, den ich anklicken kann (play, pause funktioniert)?
<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>
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.
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?
Ich nehme mal an, dass in der ftui html
<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 (http://www.fhemwiki.de/wiki/FHEM_Tablet_UI/FAQ#Wie_.C3.B6ffne_ich_die_Javascript-Konsole.3F) Fehlermeldungen?
Das einzige was angezeigt wird ist:
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:
<!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