New FHEM Tablet UI

[hotwebnet]

Das kann ich auch und über mein Handy, aber wenn ich er einmal richtig in einem Rahmen eingebaut habe komme ich nur noch an die BT-Box

habe aber noch ein Probel.......
wie hast du das mit dem circlemenue hin bekommen....

hier mein Code

<li data-row="3" data-col="1" data-sizex="2" data-sizey="3">
<header>Radio</header>
<div data-type="circlemenu" class="cell circlemenu wider keepopen">
<ul>
<li><div data-type="push" data-icon="fa-volume-up"></div></li>
<li><div data-type="playstream" data-url="http://radioeins.de/stream" data-background-icon="fa-circle-thin" data-icon="">R1</div></li>
<li><div data-type="playstream" data-url="http://edge.live.mp3.mdn.newmedia.nacamar.net/ps-radiobochum/livestream.mp3" data-background-icon="fa-circle-thin" data-icon="">Bo</div></li>
<li><div data-type="playstream" data-url="http://stream.jam.fm/jamfm-nmr/mp3-128/directUrl" data-background-icon="fa-circle-thin"  data-icon="">Jm</div></li>
<li><div data-type="playstream" data-url="http://br-mp3-puls-m.akacast.akamaistream.net/7/501/142689/v1/gnl.akacast.akamaistream.net/br_mp3_puls_m" data-background-icon="fa-circle-thin" data-icon="">Ps</div></li>
</ul>

das sieht dann so aus wie auf dem Bilde....also hein circlemenu was mache ich denn nun schon wieder falsch.....

[setstate]

Hast du
   <script type="text/javascript" src="/fhem/tablet/lib/jquery.circlemenu.js"></script>
ergänzt?

[hotwebnet]

setstate nun verstehe ich nur noch Bahnhof oder ich stehe total auf dem Bahngleis....

den Code habe ich nicht ergänzt.........

<script type="text/javascript" src="/fhem/tablet/lib/jquery.circlemenu.js"></script>

weil ich überhaupt keine ahnung habe wo ich Ihn ergänzen soll..........

Gruß

[schka17]

Im Header der HTML Datei, dort wo auch alle anderen scripts definiert sind.


Sent from my iPad using Tapatalk

[hotwebnet]

Danke..........der Zug ist angekommen........super......

[hillbicks]

Kann derjenige von dem der Screenshot im ersten Post mit den Graphen ist, bitte den entsprechenden Code zur Verfügung stellen?

Ich wuerde gerne den Heizungsplot implementieren, mir ist aber nicht ganz klar wie. Muss ich den SVGPLOT aus fhem vorher in image umwandeln um ihn einbinden zu koennen oder wie habt ihr das gemacht?

Waere nett wenn das jemand teilen koennte, man muss das Rad ja nicht immer neu erfinden

Danke schonmal !

[Marie]

Ich hab da auch mal ne Frage....im Volume Widget gibt es das Problem wenn man am unteren Ende ist (also linksanschlag) dann kann man weiter nacht links "drehen" --> das Widget springt dann auf das rechte Ende. Was das bei einer Lautstärkeeinstellung bedeutet, kann man sich ja denken --> die Nachbarin meckert, die Katzen verlassen fluchtartig den Raum und der Verstärker geht in die Begrenzung und schaltet ab...ist also eher suboptimal...

Könntet Ihr da mal bitte drauf schauen und das verhindern??

Danke schon einmal.

LG

Marie

[setstate]

Ich hab da auch mal ne Frage....im Volume Widget gibt es das Problem wenn man am unteren Ende ist (also linksanschlag) dann kann man weiter nacht links "drehen" --> das Widget springt dann auf das rechte Ende. Was das bei einer Lautstärkeeinstellung bedeutet, kann man sich ja denken --> die Nachbarin meckert, die Katzen verlassen fluchtartig den Raum und der Verstärker geht in die Begrenzung und schaltet ab...ist also eher suboptimal...

Könntet Ihr da mal bitte drauf schauen und das verhindern??

Danke schon einmal.

LG

Marie

Hallo Marie,
danke für den Hinweis. Ich bin dran ...
Update: neues Volume Widget ist verfügbar. Bitte testet mal, ob es jetzt besser ist

[Marie]

Super,

funktioniert jetzt bei positiven Einstellungen für data-min und data-max.
Stellt man allerdings diese Werte auf -50...-20 db, so klappt das leider immer noch nicht....

Aber schon mal superschnelle Reaktion, danke!

LG

Marie

[stromer-12]

Beim Thermostat müsste Valve auch noch angepasst werden. Die FHT Thermostate liefern beim "actuator" ein "%"-Zeichen mit.

[mrfloppy]

Kann mir wer kurz auf dei Sprüngehelfen.
Wie mache ich das mit dem Three-State -Fensterkontaktmit der richtigen Anzeige.

Hätte

Code Auswählen Erweitern

<div data-type="symbol" data-device="OG_bz_FK" data-get-on='["tilted","open"]' data-on-colors='["#bb6242","#aa6900"]' </div>

versucht aber kein Erfolg.

Toll wären auch zwei verschiedene Symbole für Open und tilted.
Probier schon seit ein paar Stunde alle Varianten aber kein Erfolg.
LG

[jemu75]

Hallo Mario,
anbei die index.html zu meiner aktuellen Version. Die favicon.ico habe ich ebenfalls mal mit angehangen.
Hoffe sie ist halbwegs sauber geschrieben. Anregungen und Änderungswünsche natürlich sehr gern. 

VG Jens.

Code Auswählen Erweitern

<!DOCTYPE html>
<html>
<head>
<!--
/* FHEM tablet ui */
/*
* Just another dashboard for FHEM
*
         * Version: 1.3.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/
*/
-->
<title>JA-Team Home</title>
<link rel="shortcut icon" href="/fhem/tablet/favicon.ico" />
<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="0"> <!-- 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/jquery.toast.min.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/powerange.min.css" />


<script type="text/javascript" src="/fhem/pgm2/jquery.min.js"></script>
<script type="text/javascript" src="/fhem/pgm2/jquery.knob.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.circlemenu.js"></script>
<script type="text/javascript" src="/fhem/tablet/lib/powerange.min.js"></script>
<script type="text/javascript" src="/fhem/tablet/lib/jquery.gridster.min.js"></script>
        <script type="text/javascript" src="/fhem/tablet/lib/fa-multi-button.min.js"></script>
<script type="text/javascript" src="/fhem/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="1" data-col="1" data-sizex="1" data-sizey="4">
        <header>Wetter</header>
        <div data-type="label" data-device="WZ_HM_WDS10_TH_O" data-get="temperature" data-limits='[-73,10,25]' data-colors='["#6699FF","#AA6900","#FF0000"]' data-unit="%B0C%0A" class="cell bigger thin"></div>
<div data-type="label" class="cell">Temperatur</div>
        <div data-type="label" data-device="WZ_HM_WDS10_TH_O" data-get="humidity" data-limits='[0,40,60]' data-colors='["#bb6242","#aa6900","#bb6242"]' data-unit="%" class="cell bigger thin"></div>
        <div data-type="label" class="cell">Luftfeuchte</div>
<div data-type="label" class="cell darker wider">Heute</div>
        <div data-type="weather" data-device="Wetter" data-get="fc1_condition" class="cell big"></div>
        <div data-type="label" data-device="Wetter" data-get="fc1_condition" class="cell narrow"></div>
        <div data-type="label" data-device="Wetter" data-get="fc1_high_c" data-unit="%B0C%0A" class="cell large"></div>
        <div data-type="label" class="cell darker wider">Morgen</div>
        <div data-type="weather" data-device="Wetter" data-get="fc2_condition" class="cell big"></div>
        <div data-type="label" data-device="Wetter" data-get="fc2_condition" class="cell narrow"></div>
        <div data-type="label" data-device="Wetter" data-get="fc2_high_c" data-unit="%B0C%0A" class="cell large"></div>
</li>
<li data-row="1" data-col="2" data-sizex="1" data-sizey="4">
    <header>Wohnzimmer</header>
<div data-type="thermostat" data-device="CUL_HM_HM_CC_TC_1A3FE7" data-valve="actuator" data-step="0.5" class="cell left"></div>
<div data-type="label" data-device="CUL_HM_HM_CC_TC_1A3FE7" data-get="controlMode" class="cell big thin"></div>
<div data-type="button" data-fhem-cmd="set+CUL_HM_HM_CC_TC_1A3FE7+desired-temp+20.5" data-icon="fa-sun-o" class="cell"></div>
<div data-type="button" data-fhem-cmd="set+CUL_HM_HM_CC_TC_1A3FE7+desired-temp+19.0" data-icon="fa-moon-o" data-color="hsl(0,0%,50%)" class="cell"></div>
<div data-type="label" data-device="CUL_HM_HM_CC_TC_1A3FE7_Weather" data-get="measured-temp" data-limits='[-73,18,22]' data-colors='["#6699FF","#AA6900","#FF0000"]' data-unit="%B0C%0A" class="cell bigger thin"></div>
<div data-type="label" class="cell">Temperatur</div>
        <div data-type="label" data-device="CUL_HM_HM_CC_TC_1A3FE7_Weather" data-get="humidity" data-limits='[0,40,60]' data-colors='["#bb6242","#aa6900","#bb6242"]' data-unit="%" class="cell bigger thin"></div>
        <div data-type="label" class="cell">Luftfeuchte</div>
</li>
<li data-row="1" data-col="3" data-sizex="1" data-sizey="4">
    <header>Kinderzimmer</header>
        <div data-type="thermostat" data-device="CUL_HM_HM_CC_RT_DN_21FD96_Clima" data-valve="ValvePosition" data-step="0.5" class="cell left"></div>
<div data-type="label" data-device="CUL_HM_HM_CC_RT_DN_21FD96_Clima" data-get="controlMode" class="cell big thin"></div>
<div data-type="button" data-fhem-cmd="set+CUL_HM_HM_CC_RT_DN_21FD96_Clima+controlMode+boost" data-icon="fa-fire" class="cell"></div>
<div data-type="button" data-fhem-cmd="set+CUL_HM_HM_CC_RT_DN_21FD96_Clima+desired-temp+16.0" data-icon="fa-moon-o" data-color="hsl(0,0%,50%)" class="cell"></div>
        <div data-type="label" data-device="CUL_HM_HM_CC_RT_DN_21FD96_Weather" data-get="measured-temp" data-limits='[-73,18,22]' data-colors='["#6699FF","#AA6900","#FF0000"]' data-unit="%B0C%0A" class="cell bigger thin"></div>
<div data-type="label" class="cell">Temperatur</div>
</li>
</ul>
</div>
</body>
</html>


[setstate]

Kann mir wer kurz auf dei Sprüngehelfen.
Wie mache ich das mit dem Three-State -Fensterkontaktmit der richtigen Anzeige.

Hätte

Code Auswählen Erweitern

<div data-type="symbol" data-device="OG_bz_FK" data-get-on='["tilted","open"]' data-on-colors='["#bb6242","#aa6900"]' </div>

versucht aber kein Erfolg.

Toll wären auch zwei verschiedene Symbole für Open und tilted.
Probier schon seit ein paar Stunde alle Varianten aber kein Erfolg.
LG

Hallo mrfloppy,
das funktioniert bis jetzt nur, wenn alle drei Arrays existieren und gleich groß sind:

Code Auswählen Erweitern


<div data-type="symbol" data-device="dummy1"
data-get-on='["wert1","wert2","wert3"]'
data-icons='["fa-user","fa-arrow-up","fa-arrow-down"]'
data-on-colors='["SeaGreen","SlateBlue","IndianRed"]'
class="cell big">
</div>

[mrfloppy]

Danke setstate

mit allen drei Werten die der Fensterkontakt ausgibt funktioniert es.
Brauch ich nur mehr ein paar passende Symbole.
Wobei wir gleich bei noch einer Frage wären. Kann ich eigene Symbole einfügen?

LG

[setstate]

Als Symbol wird der Font Awesome benutzt: http://fortawesome.github.io/Font-Awesome/icons/

Da kann man sich aus 519 Symbolen was raussuchen, fa-NameDesIcon

png, ico oder ähnliches wird nicht unterstützt, das habe ich auch nicht vor. Die FA Symbole sind sehr zahlreich, modern und simpel - passend zum beabsichtigen Stil dieses UI. Ich möchte keine Icons mit Farbverläufen oder 3D Look.

Es laufen auch schon Anträge zur Erweiterung der FA Icons für etwas mehr HomeAutomation Symbole, ich hoffe, die kommen mit dem nächsten Update vom Font Awesome