New FHEM Tablet UI

DJ_SAMMY190 · 08 April 2015, 19:25:54

Vielleicht hilft dir das

http://www.farb-tabelle.de/de/farbtabelle.htm
Oder die Datei im Photoshop öffnen und Farbcodes auslesen.

bjoernbo · 08 April 2015, 19:43:30

wäre ein Ansatz. ich schau mal. Danke

nesges · 08 April 2015, 19:43:57

Zitat von: DJ_SAMMY190 am 08 April 2015, 19:11:49
Also ohne bekomm ich die Standardicons (01) . Setze ich den Imageset wird nichts angezeigt und zwar für alle folgenden Bilder schon (02). Imageset nur bei Freitag gesetzt. Samstag wieder Standard.

Sieht nach Javascript-Fehler aus. Was steht in der JS-Console?

bjoernbo · 08 April 2015, 19:45:40

OH MANN!! Photoshop, lol ..... ich habe gerade den "Digital Color Meter" auf meinem Mac entdeckt. Der zeigt sofort alle Werte.

DJ_SAMMY190 · 08 April 2015, 19:56:22

was ich so Auslese. wenn nicht muss ich nochmal suchen^^

Code Auswählen


"Get current values of readings" fhem-tablet-ui.js:137:0
"start longpoll" fhem-tablet-ui.js:207:0
TypeError: $(...).attr(...) is undefined jquery.min.js line 2 > eval:310:35
"start longpoll"

Was ich auch eben bemerkt hab ist der Code drin: data-imageset="kleinklima" dann zeigt der RGB Tacho darüber auch keinen Wert mehr an o0

nesges · 08 April 2015, 20:08:48

Danke, hab den Fehler damit gefunden. Neue Version unter https://github.com/nesges/Widgets-for-fhem-tablet-ui/blob/master/js/widget_weather.js oder widget_weather.js Zeile 310 ersetzen durch:

Code Auswählen

var fhem = $("meta[name='fhemweb_url']").attr("content") || "../fhem/";
fhem = fhem.replace(/\/$/, '');

Dass die anderen Widgets auch davon betroffen sind, liegt an Javascript: Sobald ein Fehler auftritt, wird kein weiterer JS Code verarbeitet.

Markus Hermann · 08 April 2015, 20:14:03

Responsive Webdesign?

@setstate:

Ich weiß, "gib jemanden den kleinen Finger und er nimmt die ganze Hand",
daher will ich auch ganz vorsichtig fragen:

Ist es möglich Gridster bzw. das UI so zu programmieren, dass sich die "Kacheln" automatisch dem "Endgerät" anpassen.

Wenn ich mein UI auf dem PC anschaue (1920x1080px) sieht es im Browser recht links oben aus (2/3 der Beildschirms).
Aud dem IPad ist es super ausgefüllt. Auf dem SamsungTV-Browser ist das UI auch vollformartig dargestellt.
Auf dem Android-Tablet und Handy jedoch nicht.

Gibt es eine Möglichkeit, dass das UI sich dem Bildschirm automatisch anpasst?

Gruß
Markus

DJ_SAMMY190 · 08 April 2015, 20:26:03

Zitat von: nesges am 08 April 2015, 20:08:48
Danke, hab den Fehler damit gefunden. Neue Version unter https://github.com/nesges/Widgets-for-fhem-tablet-ui/blob/master/js/widget_weather.js oder widget_weather.js Zeile 310 ersetzen durch:

Code Auswählen Erweitern
var fhem = $("meta[name='fhemweb_url']").attr("content") || "../fhem/"; fhem = fhem.replace(/\/$/, '');

Dass die anderen Widgets auch davon betroffen sind, liegt an Javascript: Sobald ein Fehler auftritt, wird kein weiterer JS Code verarbeitet.

Funzt einwandfrei

Danke

bjoernbo · 08 April 2015, 20:35:26

So nur noch die Farben für die Temperatur integrieren und fürs erste fertig.

(//)

DJ_SAMMY190 · 08 April 2015, 20:37:23

Zitat von: bjoernbo am 08 April 2015, 20:35:26
So nur noch die Farben für die Temperatur integrieren und fürs erste fertig.

(//)

Wow. Top. Gefällt sehr gut.

bjoernbo · 08 April 2015, 20:42:40

anbei:
1. noch nicht optimiert !
2. ... ich arbeite mit zwei Unterschiedlichen "Wetter-devices" !

Zitat<li data-row="1" data-col="2" data-sizex="3" data-sizey="2">
<div class="container weather">
<div class="container weather">
<header>
Wetter in
<div data-type="label"
data-device="MeinWetter"
data-get="city"
style="display:inline"></div>
</header>
<table border="0px" width="100%">
<tr>
<td class="A2"><div data-type="label"
data-device="MyWeather"
data-get="fc0_date"></div></td>

<td class="B2"><center><div data-type="label" class="inline small"><big>↑</big><small> Sonne:</small><br></div>
<div data-type="label"
data-device="Sonnenaufgang"
data-get="state"></div></center></td>
<td class="C2"><center><div data-type="label" class="inline small"><big>↓</big><small> Sonne:</small><br></div>
<div data-type="label"
data-device="Sonnenuntergang"
data-get="state"></div></center></td>
<td class="D2"><center><div data-type="label" class="inline small"><small>Sichtweite:</small><br></div>
<div data-type="label"
data-device="MyWeather"
data-get="visibility"
data-unit=" km"></center></td>

</tr>
<tr>
<td class="tg-031e"><div data-type="label"><small>Temp<br></small></div>
<center><div data-type="label"
data-device="MyWeather"
data-get="temperature"
data-limits="[-50,0,10,25,30,40]"
data-colors='["#9999ff","#ffbdff","#aa6900","#ff6900","#ff3333","#ff0000"]'
data-unit="°C"
class="inline cell big"></div></center></td>
<td class="tg-031e" colspan="2" rowspan="2">
<center> <div data-type="weather"
data-device="MeinWetter"
data-get="condition"
style="font-size:250%">
</div>

<div data-type="label"
data-device="MeinWetter"
data-get="fc1_condition">
</div>

</center>
</td>

<td><center><div data-type="wind_direction"
data-device="MyWeather"
data-get="wind_condition"
data-part="2"

data-size="75"
data-tickstep="45"></div>
</center></td>
</tr>
<tr>
<td class="tg-031e"><div data-type="label"><small>Feucht<br></small></div>
<center><div data-type="label"
data-device="MyWeather"
data-get="humidity"
data-limits="[0,40,60]"
data-colors='["#9999ff","#aa6900","#ff6900"]'
data-unit=" %"
class="inline cell big">
</div></center></td>

<td class="tg-031e">
<center><div data-type="label"><small>Wind</small><br></div>
<div data-type="label"
data-device="MyWeather"
data-get="wind"
data-unit=" km/h"
data-limits="[0, 19, 28, 38, 49, 74, 102, 117]"
data-colors='["#ffffff","#dddddd","#aa6900","#aa6900","#ff9999","#ff6666","#ff3333","#ff0000"]'
style="display:inline"
class="inline">
</div>

</center>
</td>

</tr>

<tr>
<td class="A5"><center><div data-type="label" class="inline"><small>UV-Index<br></small></div>
<div data-type="label"
data-device="MyWeather"
data-get="fc0_uv"
data-limits="[0,2,10]"
data-colors='["grey","orange","red"]'
style="display:inline">
</div>

</center>
</td>
<td class="B5"><center><div data-type="label" class="inline"><small>Regenrisiko<br></small></div>
<div data-type="label"
data-device="MyWeather"
data-get="fc0_chOfRainDay"
data-unit=" %"
data-limits="[0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100]" 
data-colors='["#32AD4F","#3AAB2C","green","green","green","#F6AA1D","green","green","green","green","#F6451D"]' 
style="display:inline">
</div></center></td>
<td class="C5"><center><div data-type="label" class="inline"><small>Taupunkt<br></small></div>
<div data-type="label"
data-device="MyWeather"
data-get="dewPoint"
data-unit=" °C"></div>
</center></td>
<td class="D5"><center><div data-type="label" class="inline"><small>Luftdruck<br></small></div>

<div data-type="label"
data-device="MyWeather"
data-get="pressure"
data-unit=" hPa"
data-limits="[0,950,1000]"
data-colors='["#ff9999","#aa6900","#9999ff"]'></div>
<div data-type="label"
data-device="MeinWetter"
data-get="pressure_trend_sym"
class="inline"></div></center>
</td>
</tr>

</table>
</li>
</li>
<li data-row="1" data-col="6" data-sizex="3" data-sizey="3">
<div class="container">
<header>Regenradar</header>
<br><img src="http://www.wetteronline.de/?pid=p_radar_map&ireq=true&src=radar/vermarktung/p_radar_map_forecast/forecastLoop/DL/latestForecastLoop.gif" width="300" height="350">
</img src>

</div>
</li>
<li data-row="5" data-col="2" data-sizex="1" data-sizey="1">
<header>
Wetter für
<div data-type="label"
data-device="MeinWetter"
data-get="fc2_day_of_week"
style="display:inline">
</div>

</header>
<center>
<div data-type="weather"
data-device="MeinWetter"
data-get="fc2_condition"
style="font-size:250%">
</div>
<br>
<div data-type="label"
data-device="WEATHER"
data-get="fc2_condition"
class="inline">

</div><big>↓</big>
<div data-type="label"
data-device="MeinWetter"
data-get="fc2_low_c"
data-limits="[-50,0,10,25,30,40]"
data-colors='["#9999ff","#ffbdff","#aa6900","#ff6900","#ff3333","#ff0000"]'
data-unit=" °C"
class="inline">
</div><big>↑</big>
<div data-type="label"
data-device="MeinWetter"
data-get="fc2_high_c"
data-limits="[-50,0,10,25,30,40]"
data-colors='["#9999ff","#ffbdff","#aa6900","#ff6900","#ff3333","#ff0000"]'
data-unit=" °C"
class="inline">
</div>
</center>
</li>
<li data-row="5" data-col="3" data-sizex="1" data-sizey="1">
<header>
Wetter für
<div data-type="label"
data-device="MeinWetter"
data-get="fc3_day_of_week"
style="display:inline">
</div>

</header>
<center>
<div data-type="weather"
data-device="MeinWetter"
data-get="fc3_condition"
style="font-size:250%">
</div>
<br>
<div data-type="label"
data-device="WEATHER"
data-get="fc3_condition"
class="inline">

</div><big>↓</big>
<div data-type="label"
data-device="MeinWetter"
data-get="fc3_low_c"
data-limits="[-50,0,10,25,30,40]"
data-colors='["#9999ff","#ffbdff","#aa6900","#ff6900","#ff3333","#ff0000"]'
data-unit=" °C"
class="inline">
</div><big>↑</big>
<div data-type="label"
data-device="MeinWetter"
data-get="fc3_high_c"
data-limits="[-50,0,10,25,30,40]"
data-colors='["#9999ff","#ffbdff","#aa6900","#ff6900","#ff3333","#ff0000"]'
data-unit=" °C"
class="inline">
</div>
</center>
</li>
<li data-row="5" data-col="4" data-sizex="1" data-sizey="1">
<header>
Wetter für
<div data-type="label"
data-device="MeinWetter"
data-get="fc4_day_of_week"
style="display:inline">
</div>
</header>
<center>
<div data-type="weather"
data-device="MeinWetter"
data-get="fc4_condition"
style="font-size:250%">
</div>
<br>
<div data-type="label"
data-device="WEATHER"
data-get="fc4_condition"
class="inline">
</div><big>↓</big>
<div data-type="label"
data-device="MeinWetter"
data-get="fc4_low_c"
data-limits="[-50,0,10,25,30,40]"
data-colors='["#9999ff","#ffbdff","#aa6900","#ff6900","#ff3333","#ff0000"]'
data-unit=" °C"
class="inline">
</div><big>↑</big>
<div data-type="label"
data-device="MeinWetter"
data-get="fc4_high_c"
data-limits="[-50,0,10,25,30,40]"
data-colors='["#9999ff","#ffbdff","#aa6900","#ff6900","#ff3333","#ff0000"]'
data-unit=" °C"
class="inline">
</div>
</center>
</li>
<li data-row="5" data-col="5" data-sizex="1" data-sizey="1">
<header>
Wetter für
<div data-type="label"
data-device="MeinWetter"
data-get="fc5_day_of_week"
style="display:inline">
</div>
</header>
<center>
<div data-type="weather"
data-device="MeinWetter"
data-get="fc5_condition"
style="font-size:250%">
</div>
<br>
<div data-type="label"
data-device="WEATHER"
data-get="fc5_condition"
class="inline">
</div><big>↓</big>
<div data-type="label"
data-device="MeinWetter"
data-get="fc5_low_c"
data-limits="[-50,0,10,25,30,40]"
data-colors='["#9999ff","#ffbdff","#aa6900","#ff6900","#ff3333","#ff0000"]'
data-unit=" °C"
class="inline">
</div><big>↑</big>
<div data-type="label"
data-device="MeinWetter"
data-get="fc5_high_c"
data-limits="[-50,0,10,25,30,40]"
data-colors='["#9999ff","#ffbdff","#aa6900","#ff6900","#ff3333","#ff0000"]'
data-unit=" °C"
class="inline">
</div>
</center>
</li>
<li data-row="1" data-col="4" data-sizex="1" data-sizey="2">
<header>INNEN</header>
<div data-type="label"><br><small>Feucht:<br></small></div>
<div type="label" device="Wohnzimmer.Wandthermostat" data-get="humidity" data-fix="0" data-unit="%" class="cell big"></div>
<div data-type="label"><br><small>Lärm:<br></small></div>
<div type="label" device="netatmo_XXXXXXXXX" data-get="noise" data-fix="0" data-unit=" dB" class="cell big"></div>
<div data-type="label"><br><small>Temp:<br></small></div>
<div data-type="label" data-device="Wohnzimmer.Wandthermostat" data-get="measured-temp" data-unit=" °C" class="cell big"></div>
</li>
</ul>

DJ_SAMMY190 · 08 April 2015, 20:52:16

cool

aber ich seh grad im Bild Sonnenaufgang um 30 Uhr o0^^ hihi^^ Das Regenradar gefällt mir echt gut^^ Gute einfälle

Herzlichen Dank. Frauchen gefällt das auch^^ So ich geh mal arbeiten -.-^^

nesges · 08 April 2015, 21:03:50

Zitat von: Markus Hermann am 08 April 2015, 20:14:03
Ist es möglich Gridster bzw. das UI so zu programmieren, dass sich die "Kacheln" automatisch dem "Endgerät" anpassen.

Man kann den Viewport pro Gerät anpassen, allerdings wüsste ich nicht, wie das allgemeingültig geht. Ich hab's bei mir PHP-seitig mit einer Weiche auf REMOTE_ADDR gelöst. Evtl. kann ähnliches auch per JS umgesetzt werden. Den PHP-Code als Anregung:

Code Auswählen

<?
    if ($_SERVER['REMOTE_ADDR'] == '192.168.178.88') {
        // monitroid
        ?><meta name="viewport" content="width=device-width, initial-scale=1.15, maximum-scale=1.15 user-scalable=no"><?
    } else if ($_SERVER['REMOTE_ADDR'] == '192.168.178.49' || $_SERVER['REMOTE_ADDR'] == '2003:7a:cf25:f700:4b3:2521:7e23:700a' ) {
        // iPad
        ?><meta name="viewport" content="width=device-width, initial-scale=1.1, maximum-scale=1.1 user-scalable=no"><?
    } else if ($_SERVER['REMOTE_ADDR'] == '192.168.178.51') {
        // handy
        ?><meta name="viewport" content="width=device-width, initial-scale=0.6, maximum-scale=1.1 user-scalable=yes"><?
    } else {
        ?><meta name="viewport" content="width=device-width, initial-scale=0.6, maximum-scale=1.1 user-scalable=yes"><?
    }
?>

nesges · 08 April 2015, 21:23:55

Wenn jemand Inspiration sucht: Meine komplette Installation als Github-Repository. Link & Diskussion bitte im Nachbarthread http://forum.fhem.de/index.php/topic,36063.0.html

Hermann · 08 April 2015, 21:30:10

Hallo.
Nachdem mich Dank des Klasse Tablet UI wieder der fhem Eifer gepackt hat hätte ich auch ne Frage. Ich habs mit viel copy and paste und abkucken / lesen geschafft, ein für mich brauchbares UI zu erstellen. Ich scheitere momentan daran meine Philips hue vernünftig einzubinden. Habs über den Demo Dimmer zwar geschafft, aber ich bekomme keine Rückantwort und auch die Helligkeit stimmt nicht.

Kann mir evtl. jemand zeigen wie er das gelöst hat ? Bin leider eher probierender Anwender als grosser Programmierer.
Danke,
Hermann