New FHEM Tablet UI

Nobby1805 · 01 Juli 2015, 09:09:44

poste mal wie du das widget aufrufst .. oder am Besten, den ganzen index-file

devil77 · 01 Juli 2015, 09:14:35

Anbei die index Datei mit den beiden widgets.

<!DOCTYPE html>
<html>
<head>
	<title>FHEM-Tablet-UI</title>
	<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=not output -->
	
	<link rel="stylesheet" href="/fhem/www/tablet/lib/jquery.gridster.min.css" />
	<link rel="stylesheet" href="/fhem/www/tablet/css/fhem-tablet-ui.css" />
	<link rel="stylesheet" href="/fhem/www/tablet/lib/font-awesome.min.css" />
	<link rel="stylesheet" href="/fhem/www/tablet/lib/jquery.toast.min.css" />
	<link rel="stylesheet" href="/fhem/www/tablet/lib/powerange.min.css" />

        <!-- define your personal style here, it wont be overwritten  -->
        <link rel="stylesheet" href="/fhem/www/tablet/css/fhem-tablet-ui-user.css" />
	
	<script type="text/javascript" src="/fhem/www/pgm2/jquery.min.js"></script>
    <script type="text/javascript" src="/fhem/www/tablet/lib/jquery.knob.mod.min.js"></script>
	<script type="text/javascript" src="/fhem/www/tablet/lib/jquery.toast.min.js"></script>
	<script type="text/javascript" src="/fhem/www/tablet/lib/jquery.circlemenu.js"></script>
	<script type="text/javascript" src="/fhem/www/tablet/lib/powerange.min.js"></script>
	<script type="text/javascript" src="/fhem/www/tablet/lib/jquery.gridster.min.js"></script>
    <script type="text/javascript" src="/fhem/www/tablet/lib/fa-multi-button.min.js"></script>
	<script type="text/javascript" src="/fhem/www/tablet/js/fhem-tablet-ui.js"></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 -->
</head>
<body>

<!-- available class: container,left,right,cell,narrow,darker,big,bigger,small,thin,large,wider -->
<!-- available data-type: symbol,dimmer,homestatus,label,push,slider,switch,thermostat,volume,weather -->

<div class="gridster">
<ul>
<li data-row="2" data-col="2" data-sizex="1" data-sizey="2">
    <header>Wohnzimmer</header>
    <div data-type="thermostat" data-device="WZ.Thermostat_Climate" data-valve="humidity" data-step="0.5" class="cell"></div>
	<div data-type="label" class="cell">Soll</div>
	<div data-type="label" 
		 data-device="WZ.Thermostat_Climate" 
		 data-part="4" 
		 data-unit="%B0C%0A" class="cell"></div>
	<div data-type="label" class="cell">Ist</div>
	<div data-type="label" 
		 data-device="WZ.Thermostat_Climate" 
		 data-part="2" 
		 data-unit="%B0C%0A" class="cell"></div>
</li>
<li data-row="2" data-col="3" data-sizex="2" data-sizey="2">
<header>Badezimmer</header>
        <div data-type="thermostat" 
		data-device="BZ.Stellantrieb_Clima" 
		data-step="0.5"   
  		data-min="5"
 		data-max="30" 
		class="cell">
	</div>
</li>
</ul>
</div>
</body>
</html>

setstate · 01 Juli 2015, 09:26:24

Zitat von: devil77 am 01 Juli 2015, 09:01:32
Ich versuche gerade das Widget für meine Thermostate einzubauen.
Dabei bekomme bei einer Breite von 1 Spalte immer eine Verschiebung der Temperatur.
Bei 2 Spalten Breite wird es richtig angezeigt, siehe Bild Anhang
Anzeigen lasse ich das ganze mit Chrome. Unter IE11 funktioniert die Anzeige nur das Hier die Spalten gespiegelt sind, also das Menü ist nicht mehr links sondern ganz rechts usw.
Weiß jemand woran das liegen kann das die Temperatur nicht mittig liegt?

Das passiert immer, wenn die Gridster Spalte zu klein ist. Entweder du nimmst data-sizex="2" oder oder du gibst ein paar Pixel bei widget_base_width hinzu.

devil77 · 01 Juli 2015, 09:30:35

Damit funktioniert es, dachte nicht das man an der Voreinstellung was ändern muss damit es passt.

Nobby1805 · 01 Juli 2015, 11:57:36

Zitat von: Nobby1805 am 01 Juli 2015, 08:15:21
Ich vermute auch hier ein Problem des IE ... auf dem iPad/Safari kommen die Linien ja ...
Ich musste auch vor dem gestrigen Update eine Änderung des Moduls für die xticks auf dem IE durchführen ... ich schaue da noch einmal nach, soweit ich mich erinnere hat der IE das Muster für das "stricheln" der Linie falsch ausgewertet

Scheint mal wieder das Skalierungsproblem des IE zu sein, wenn ich die Zeile 216 ändere von

Code Auswählen

'style':'stroke:#555;stroke-width:1.2px', in

Code Auswählen

'style':'stroke:#555;stroke-width:12px', dann kommt zumindest eine dünne Linie

cmillsy · 01 Juli 2015, 15:13:29

Hi. Would it be easy to implement a 'playstream' on a state change or notify then together with the popup widget they could be used as audible warnings on the frontend or as what i would intend to use as a clock radio. Apologise if this has been asked before, i've looked around the forums but not found a solution.

viegener · 01 Juli 2015, 16:52:47

Zitat von: cmillsy am 01 Juli 2015, 15:13:29
Hi. Would it be easy to implement a 'playstream' on a state change or notify then together with the popup widget they could be used as audible warnings on the frontend or as what i would intend to use as a clock radio. Apologise if this has been asked before, i've looked around the forums but not found a solution.

Hi cmillsy,
not sure if I got your request right. You are asking for a function that can trigger the playback of some audiostream/file based on a state change of a device in fhem. The good news is there is a playstream widget, but to my understanding this is playing a stream when being clicked manually. it would be generally possible to add this also without changing the playstream widget, but it would be slightly cumbersome...

But in general I assume the functionality you describe might be also interesting for others, so stay tuned.
Best regards,
Johannes

cmillsy · 01 Juli 2015, 17:28:43

Hi Johannes,
Thanks for the reply. Yes. I was thinking maybe i combination of the playstream widget and a toast popup triggered from fhem. I have a fhem server (rpi) with a frontend on a tablet at the bedside. triggered audible alarms in the front end could be used for both house alarm functions (streamed from server://...alarm.mp3) or alarm wake up to a radio stream.
regards
Craig

viegener · 01 Juli 2015, 18:23:56

Craig,
attached you find a quick hack, that you might try for do playstream as an "alarm function".
I extended playstream to be able to also react on device changes. You can specify data-device and other options (data-get / data-get-on / data-get-off ) for playing a stream and pausing a stream based on device changes.

Disclaimer: This works on my machine after a quick test

Restrictions: It does not stop other streams (as it is done in normal behavior for playstream if you manually activate it)

Johannes

@setstate: Moechtest Du, dass ich die Änderungen einchecke und über github bereitstelle?

MarcoE · 02 Juli 2015, 10:27:05

Hallo,
ich würde gerne die Farbe der Temperaturanzeige entsprechend der Differenz Außen- zu Innentemperatur anzeigen (sprich wenn draußen kälter als drinnen die AUßentemp in blau, wenn wärmer als innen dann in Rot).

Die Außentemperatur per Label sieht so aus:

Code Auswählen

<div data-type="label" data-device="Wetter" data-get="temperature" data-unit="%B0C%0A" class="cell big
ger thin"></div>
        <div data-type="label" class="cell">Temperatur</div>

Meine Innentemperatur kommt von einem FHT (ebenso per Reading temperature).
Ich vermute mal irgendwie über das data-limit-gets... Nur wie?

Danke und Gruß,
Marco

setstate · 02 Juli 2015, 10:35:49

Zitat von: MarcoE am 02 Juli 2015, 10:27:05
Hallo,
ich würde gerne die Farbe der Temperaturanzeige entsprechend der Differenz Außen- zu Innentemperatur anzeigen (sprich wenn draußen kälter als drinnen die AUßentemp in blau, wenn wärmer als innen dann in Rot).

Die Außentemperatur per Label sieht so aus:
Code Auswählen Erweitern
<div data-type="label" data-device="Wetter" data-get="temperature" data-unit="%B0C%0A" class="cell big ger thin"></div> <div data-type="label" class="cell">Temperatur</div>
Meine Innentemperatur kommt von einem FHT (ebenso per Reading temperature).
Ich vermute mal irgendwie über das data-limit-gets... Nur wie?

Danke und Gruß,
Marco

Man müsste ein UserReading anlegen, was die Differenz als Wert beinhaltet und diese per data-limits-get holen und die entsprechenden Farben zuweisen.

MarcoE · 02 Juli 2015, 13:49:21

Hallo,
userreading ist angelegt und wird per Perl Funktion befüllt (perl Funktion per Telnet getestet (liefert 1 bei Aussen>Innen, 2 bei Aussen<Innen und 0 bei gleich):

Code Auswählen


attr Wetter userReadings deltaT { TempFarbe(ReadingsVal("Wetter","temperature",""),ReadingsVal("Wohzimmer","temperature",""))}

Der Output des Readings ist derzeit so:

Zitat
Readings
deltaT 1 2015-07-02 13:38:47
dewpointTemperature 20.3 2015-07-02 13:38:47
heatindex 32 2015-07-02 11:06:21
humidity 43 2015-07-02 13:38:47
pressure 1023.2 2015-07-02 13:38:47
temperature 34.4 2015-07-02 13:38:47

Mein Label sieht nun so aus (die Möglichkeit 0 habe ich jetzt mal ignoriert):

Code Auswählen


        <div data-type="label" data-device="Wetter_Bruchsal" data-get="temperature" data-unit="%B0C%0A" data-colors='["#ff0000","#00ff00"]' data-limits='["1","2"]' data-limits-get="deltaT" class="cell bigger thin"></div>

Nun würde ich erwarten da deltaT=1, dass das Label rot wird- wird aber grün. Selbst wenn ich statt "1","2" "2","1" schreibe sich etwas ändert- passiert aber leider nicht.
Wo ist mein Denkfehler?

Danke und Gruß,
Marco

CoolTux · 02 Juli 2015, 14:08:22

Hatte "label" nicht mal probleme mit Zahlen? Oder geht das schon wieder?

setstate · 02 Juli 2015, 14:40:37

Hallo MarcoE,
Sieht doch schon mal gut aus, bist ja schon gut voran gekommen.
Der HTML Code müsste eigentlich klappen, ich sehe rein optisch auch keinen Fehler.
Muss ich mir heute Abend mal live im Debugger ansehen.
Die Limits würde ich dann so festlegen

Code Auswählen


data-limits='["-50","1"]'

Kleiner oder größer Null

setstate · 02 Juli 2015, 19:23:35

genau, klappt bei mir. Bei Delta -1 -> blau, bei Delta 1 rot

Code Auswählen

<div data-type="label" data-device="Wetter_Bruchsal" data-get="temperature" data-unit="%B0C%0A" data-colors='["#0044ff","#dd3344"]' data-limits='["-50","1"]' data-limits-get="deltaT" class="cell bigger thin"></div>

Geht auch bei -7 (blau) und 14 (rot)