[FHEM-Tablet-UI] User-Demos

blackbluegl · 09 Juni 2016, 12:29:04

Das sieht ja schon sehr schön aus.

n4rrOx · 09 Juni 2016, 12:32:56

Hallo wildea,

könntest du einige Infos zu deiner Wetter-Seite posten?
Wäre interessiert am FTUI-Code und den angelegten Devices in FHEM.

wildea · 09 Juni 2016, 13:12:31

Zitat von: n4rrOx am 09 Juni 2016, 12:32:56
Hallo wildea,

könntest du einige Infos zu deiner Wetter-Seite posten?
Wäre interessiert am FTUI-Code und den angelegten Devices in FHEM.

ja klar gerne..

für die Wetterspalten oben habe ich folgendes in fhem eingestellt

Code Auswählen

define Wetterext PROPLANTA Burgdorf+%28Kreis+Hannover%29

hier musst du natürlich deine Stadt eintragen. Die html findest du unten.

Für das Chart benutze ich Meteo

https://github.com/knowthelist/fhem-tablet-ui/tree/master/examples/charts

n4rrOx · 09 Juni 2016, 14:15:57

@wildea

super, vielen Dank!
Sieht schick aus!

coolice · 10 Juni 2016, 06:51:50

Zitat von: wildea am 09 Juni 2016, 12:25:31
Wollte hier auch mal kurz mein Layout zeigen. Ich bin noch im Aufbau von vielen Sachen aber man kann ja schon erkennen wo es hingeht.

Das sieht super aus. Würdest Du die FTUI Codes deiner Seiten zur Verfügung stellen?

Gruß Mirco

wildea · 10 Juni 2016, 08:51:01

Ja mache ich in den nächsten Tagen mal.

Gesendet von iPhone mit Tapatalk

oli82 · 10 Juni 2016, 08:59:29

Zitat von: coolice am 10 Juni 2016, 06:51:50
Das sieht super aus. Würdest Du die FTUI Codes deiner Seiten zur Verfügung stellen?

Dem schließ' ich mir an

Octopus180 · 10 Juni 2016, 12:24:29

Hallo wildea

kannst du mir das mit den Charts erklären oder gibt es irgendwo das zum nachlesen. Ich beschäftige mich seit ein paar Wochen mit FHEM und finde die Charts sehr interresant.

Pi_Newbie · 17 Juni 2016, 20:00:02

Hallo zusammen,

hier gab es mal ein Screenshot eines UI, welches optisch sehr stark an das "HEIMA UI" angelehnt ist. Hat das jemand real laufen oder sind das alles nur "renderings"?

Falls ja, würdet Ihr Eure .html Dateien dazu zur Verfügung stellen, da ich mir das sehr gerne mal näher anschauen möchte.

Vielen Dank und beste Grüße,
Roman

kt83 · 17 Juni 2016, 21:16:39

Zitat von: Pi_Newbie am 17 Juni 2016, 20:00:02
hier gab es mal ein Screenshot eines UI, welches optisch sehr stark an das "HEIMA UI" angelehnt ist. Hat das jemand real laufen oder sind das alles nur "renderings"?

Ich habe folgendes am laufen (noch nicht komplett fertig), ist zwei Seiten vorher zu sehen - meinst Du das?

Hauptseite: siehe Screenshot, die 3-Tage-Wettervorschau kann man mittels Swiper auf die Tage 4-6 umschalten; gibt aktuell noch ein Problem wenn die Wetterinfo recht lang ist
2. Seite: Stundenplan Kind, statisch, muss alle 1/2 Jahre geändert werden
3. Seite: Verkehrsinfo, Öffentlicher Nahverkehr (Halltestellenauskunft) und Google Maps

Pi_Newbie · 17 Juni 2016, 21:36:38

Hallo KT83,

ja genau, dein UI meinte ich. Ist es möglich deine bisherigen html's zur Verfügung zu stellen? Das wäre super!

Ich sitze da auch gerade dran aber leider will es noch nicht ganz so wie ich es will!

Vielen Dank und beste Grüße

harry66 · 18 Juni 2016, 14:29:28

Hallo

ja so ähnlich hab ich mein neues design auch gestaltet, hier mal ein paar Bilder.

Ist noch nicht fertig, wird es aber bestimmt auch nie

Die Dateien und css jetzt im Anhang (für Eval 2.2).

Gruß Rolf

kt83 · 18 Juni 2016, 14:32:57

Zitat von: Pi_Newbie am 17 Juni 2016, 21:36:38
ja genau, dein UI meinte ich. Ist es möglich deine bisherigen html's zur Verfügung zu stellen? Das wäre super!

musste erst noch ein bisschen aufräumen ...
Die Dateien sind für die 2.2er-Eval-Version.

Als Wetterprovider wird AgroWeather verwendet:

Code Auswählen

define AgroWeather PROPLANTA <Deine PLZ>

Grüße,
Thomas.

kvo1 · 19 Juni 2016, 21:31:51

Zitat von: wildea am 10 Juni 2016, 08:51:01
Ja mache ich in den nächsten Tagen mal.

Gesendet von iPhone mit Tapatalk

Hallo wildea,
Ist schon absehbar, wenn Du was bereitstellen kannst, gefällt mir ansatzweise sehr gut !

kvo1

Helmi55 · 01 Juli 2016, 16:12:32

Hallo
nachdem mir hier sehr viel geholfen wurde und ich natürlich auch viel von anderen Usern abgeschaut habe, möchte ich mein einfaches "Kunstwerk"
hier vorstellen

Hier der htmlCode - sicher werden Kritiker sehr viel Verbesserungspotential erkennen, aber für mich tut es das was es soll.
Gerne sehe ich mir evtl. Verbesserungsvorschläge an.....

Code Auswählen


<!DOCTYPE html>
<html>
<head>
    <!--
     /* FHEM tablet ui */
     /*
     * UI builder framework for FHEM
     *
     * Version: 2.2.*
     * URL: https://github.com/knowthelist/fhem-tablet-ui
     *
     * Copyright (c) 2015-2016 Mario Stephan <mstephan@shared-files.de>
     * Under MIT License (http://www.opensource.org/licenses/mit-license.php)
     *
     * !!!! Evaluation version - run only in a staging enviroment !!!!
     *
     * - create a new folder named 'tablet_eval' in /<fhem-path>/www
     * - copy all files incl. sub folders into /<fhem-path>/www/tablet_eval
     * - add 'define TABLETUIEVAL HTTPSRV ftui_eval ./www/tablet_eval Tablet-EVAL' in fhem.cfg
     * - Tadaaa! A new fhem ui in http://<fhem-url>:8083/fhem/tablet_eval/
     */
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="widget_base_width" content="118">
    <meta name="widget_base_height" content="130">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="gridster_disable" content="1">
    <meta name="longpoll" content="1"> <!-- 1=longpoll;0=shortpoll every 30sec -->
    <meta name="debug" content="2"> <!-- verbose level 1-6 = output to console;0 = not output -->
    <meta http-equiv="Cache-Control" content="no-store" />

    <link rel="stylesheet" href="lib/jquery.gridster.min.css" />
    <link rel="stylesheet" href="css/fhem-tablet-ui.css" />
    <link rel="stylesheet" href="lib/font-awesome.min.css" />
    <link rel="stylesheet" href="lib/jquery.toast.min.css" />
    <link rel="stylesheet" href="/fhem/tablet/lib/openautomation.css" />
    <link rel="stylesheet" href="/fhem/tablet/lib/fhemSVG.css" />


    <!-- define your personal style here, it wont be overwritten  -->
    <!-- link rel="stylesheet" href="css/fhem-green-ui.css" / -->
    <!-- link rel="stylesheet" href="css/fhem-tablet-ui-user.css" / -->

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

    <title>Poolsteuerung</title>

</head>
<body>
    <div class="gridster">
        <ul>
        
<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
        <header class="cell" >Platzhalter</header>
        <div data-type="switch"
    	     data-device=""
   	  	     data-set-on="off"  	      
   	  	     data-set-off="on"
       	     data-get-on='["off","on"]'
       	     data-icon=""
       	     data-background-colors='["red","green"]'
             class="bigger" >
        </div>                      
        <div data-type="label" class="bold"></div>
</li>

<li data-row="2" data-col="1" data-sizex="1" data-sizey="1">
        <header class="cell" >Platzhalter</header>
        <div data-type="switch"
    	     data-device=""
   	  	     data-set-on="off"  	      
   	  	     data-set-off="on"
       	     data-get-on='["off","on"]'
       	     data-icon=""
       	     data-background-colors='["red","green"]'
             class="bigger" >
        </div>                      
        <div data-type="label" class="bold"></div>
</li> 
       
        <li data-row="1" data-col="2" data-sizex="1" data-sizey="1">
        <header class="cell" > </header>
        <div data-type="switch"
		     data-device="PoolMaster"  	
	         data-set-on="off"
             data-set-off="on"
             data-get-on='["off","on"]'
             data-icon="fa-power-off"
             data-background-colors='["red","green"]'
             class="bigger" >
        </div>  
        <div data-type="label" class="bold">Pool Master</div>
</li>

<li data-row="1" data-col="3" data-sizex="1" data-sizey="1">
        <header class="cell" > </header>
        <div data-type="switch"
		     data-device="PoolPumpe"     	 
	         data-set-on="off"
             data-set-off="on"
	         data-get-on='["off","on"]'
             data-icon="fa-power-off"
             data-background-colors='["red","green"]'
             class="bigger" >
        </div>  
        <div data-type="label" class="bold">Pool Pumpe</div>
</li>

<li data-row="1" data-col="4" data-sizex="1" data-sizey="1">
        <header class="cell" > </header>
        <div data-type="switch"
		     data-device="SolarPumpe"   
	         data-set-on="off"
	         data-set-off="on"
	         data-get-on='["off","on"]'
	         data-icon="fa-power-off"
	         data-background-colors='["red","green"]'
             class="bigger" >
        </div>   
        <div data-type="label" class="bold">Solar Pumpe</div>
</li>

<li data-row="1" data-col="5" data-sizex="1" data-sizey="1">
        <header class="cell" > </header>
        <div data-type="switch"
	    	 data-device="Abend"
       	     data-set-on="off"
       	     data-set-off="on"
             data-get-on='["off","on"]'
	         data-icon="fa-power-off"
	         data-background-colors='["red","green"]'
             class="bigger" >
        </div>
        <div data-type="label" class="bold">Abend</div>
</li>

<li data-row="1" data-col="6" data-sizex="1" data-sizey="1">
        <header class="cell" > </header>
        <div data-type="switch"
       	 	 data-device="Chlor_Schalter"
       	     data-set-on="off"
       	     data-set-off="on"
       	     data-get-on='["off","on"]'
       	     data-icon="fa-power-off"
       	     data-background-colors='["red","green"]'
             class="bigger" >
        </div>      
        <div data-type="label" class="bold">Chlor Schalter</div>
</li>

<li data-row="1" data-col="7" data-sizex="1" data-sizey="1">
        <header>Roboter</header>
        <div class="row top-space">
	    <div class="col-1-4">
		<div data-type="switch"
			data-device="Roboter"
			data-set-on="on"
			data-set-off="off"
			data-get-on="on"
			data-get-off="off"
			data-icon="fa-power-off"
			data-on-background-color="green"
			data-off-background-color="red"
			class="small">
		</div>
		<div data-type="label"
			class="">&nbsp;Auto
		</div>
	    </div>
	    <div class="col-2-4">&nbsp;
	    </div>
        </div>
        <div class="row">
	    <div class="col-2-4">&nbsp;
	    </div>
	    <div class="col-1-4">
		<div data-type="symbol"
			data-device="Roboter_sw4"
			data-get-on="on"
			data-get-off="off"
			data-icon="fa-gear"
			data-on-color="green"
			data-off-color="red"
			class="small">
		</div>
		<div data-type="label"
			class="">Status
		</div>
	    </div>
        </div>
</li>

<li data-row="1" data-col="8" data-sizex="1" data-sizey="1">
        <header>Garagentor</header>
        <div data-type="symbol" data-device="GaragenTor" 
             data-get-on='["Offen","Zu"]' 
             data-icons='["oa-fts_garage_door_10","oa-fts_garage_door_100"]' 
             data-on-colors='["red","green"]'
             class="bigger" >      
        </div>
        <div data-type="label" data-device="Tuer"
</li>

<li data-row="2" data-col="2" data-sizex="1" data-sizey="1">
        <header>Batteriestatus %</header>   
        <div data-type="label"       
             data-device="TabletGarage"
             data-get="powerLevel"
             data-fix="1"
             class="big">
        </div>      
        <br/>
        <header>Ladestatus "on=1"</header> 
        <div data-type="label"
             data-device="TabletGarage"
             data-get="powerPlugged"
             class="big" data-unit="">
        </div>                   
</li>       
</li>

<li data-row="2" data-col="3" data-sizex="1" data-sizey="1">
        <header>Pool °C</header>
        <div data-type="thermostat" 
             data-device="PoolSensor"
             data-get="temperature" data-temp=""
             data-min="-10" data-max="60" data-step=".1" data-unit=""
             class="readonly top-space">
        </div>     
</li>

<li data-row="2" data-col="4" data-sizex="1" data-sizey="1">
        <header>Solar °C</header>
        <div data-type="thermostat"
             data-device="SolarSensor"
             data-get="temperature" data-temp=""
             data-min="-10" data-max="60" data-step=".1" data-unit=""
             class="readonly top-space">
        </div>
</li>

<li data-row="2" data-col="5" data-sizex="1" data-sizey="1">
        <header>Luft °C</header>
        <div data-type="thermostat" 
             data-device="LuftTemp_Telefonmast"
             data-get="temperature" data-temp=""
             data-min="-10" data-max="60" data-step=".1" data-unit=""
             class="readonly top-space">
        </div>
</li>

<li data-row="2" data-col="6" data-sizex="1" data-sizey="1">
        <header>SolarDiff</header>   
        <div data-type="label"  
             data-device="SolarDiff"
             data-get="STATE" 
             data-fix="1"
             data-unit="%B0C%0A" 
             class="big">
        </div>  
        <br/>
        <header>Hysterese</header>
        <div data-type="label"
             data-device="Hysterese"
             data-get="STATE" 
             data-unit="%B0C%0A" 
             class="big">
        </div> 
</li>


<li data-row="2" data-col="7" data-sizex="1" data-sizey="1">
        <header class="cell" > </header>
        <div data-type="switch"
       	 	 data-device="Roboter_sw4"
       	     data-set-on="off"
       	     data-set-off="on"
       	     data-get-on='["off","on"]'
       	     data-icon="fa-power-off"
       	     data-background-colors='["red","green"]'
             class="bigger" >
        </div>      
        <div data-type="label" class="bold">Roboter</div>
</li>






<li data-row="2" data-col="8" data-sizex="1" data-sizey="1">
        <header>Garage °C</header>
        <div data-type="thermostat" 
             data-device="Garage"
             data-get="temperature" data-temp=""
             data-min="-10" data-max="60" data-step=".1" data-unit=""
             class="readonly top-space">
        </div>     
</li>

<li data-row="3" data-col="1" data-sizex="1" data-sizey="3">     
        <div data-type="label" class="cell darker top-space">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" data-device="Wetter" data-get="fc1_low_c" data-unit="%B0C%0A" class="cell large"></div>
        <div data-type="label" class="cell darker top-space">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>
        <div data-type="label" data-device="Wetter" data-get="fc2_low_c" data-unit="%B0C%0A" class="cell large">
        </div>   
</li>



<li data-row="3" data-col="2" data-sizex="1" data-sizey="1">
        <header class="cell" ></header>
        <div data-type="switch"
		     data-device="GartenLicht"
       	     data-states='["off","on","on-for-timer.*"]'
       	     data-set-states='["on","off","off"]'
       	     data-icons='["fa-power-off","fa-power-off","fa-power-off"]'
       	     data-background-colors='["red","green","green"]'
             class="bigger" >
        </div>    
        <div data-type="label" class="bold">Gartenlicht</div>
</li>

<li data-row="3" data-col="4" data-sizex="2" data-sizey="1"> 
	    <header>St. Andrä-Wördern</header>
	    <div class="cell center">
	    <h2><a style="text-decoration:none;" href="http://www.zeitverschiebung.net/de/city/2761369"></h2><iframe src="http://www.zeitverschiebung.net/clock-widget-iframe?language=de&timezone=Europe%2FVienna" width="100%" height="130" frameborder="0" seamless></iframe></a>
	    </div>
</li>

<li data-row="3" data-col="6" data-sizex="1" data-sizey="1">
        <header class="cell">pH - Wert</header>
        <br/>
        <div data-type="label"
		     data-device="pHSonde"
		     data-get="pH"     
    	     data-limits='[5,6.9,7.3]'
  	         data-colors='["orange","green","red"]'  
  	         data-fix="1"
             class="bigger">
        </div>  
</li>

<li data-row="3" data-col="7" data-sizex="1" data-sizey="1">
        <header class="cell" ></header>
        <div data-type="switch"
		     data-device="PoolLicht"
       	     data-set-on="off"
       	     data-set-off="on"
       	     data-get-on='["off","on"]'
       	     data-icon="fa-power-off"
       	     data-background-colors='["red","green"]'
             class="bigger" >
        </div>   
        <div data-type="label" class="bold">Poollicht</div>
</li>



<li data-row="3" data-col="8" data-sizex="1" data-sizey="1">
        <header>TechnikPool °C</header>
        <div data-type="thermostat"
             data-device="Technik_Pool"
             data-get="temperature" data-temp=""
             data-min="-10" data-max="60" data-step=".1" data-unit=""
             class="readonly top-space">
        </div>
</li>

<li data-row="4" data-col="8" data-sizex="1" data-sizey="1">
        <header>Abstellraum °C</header>
        <div data-type="thermostat" 
             data-device="Abstellraum"
             data-get="temperature" data-temp=""
             data-min="-10" data-max="60" data-step=".1" data-unit=""
             class="readonly top-space">
        </div>
</li>

<li data-row="5" data-col="8" data-sizex="1" data-sizey="1">
        <header>Brunnen °C</header>
        <div data-type="thermostat"
             data-device="Brunnen" 
             data-get="temperature" data-temp=""
             data-min="-10" data-max="60" data-step=".1" data-unit=""
             class="readonly top-space">
        </div>
</li>

<li data-row="4" data-col="2" data-sizex="6" data-sizey="2">
    <header>Pooltemperatur</header>
	<div data-type="chart"
	     data-device="PoolSensor" 
	     data-logdevice='["FileLog_PoolSensor","FileLog_SolarSensor","FileLog_LuftTemp_Telefonmast"]'
	     data-columnspec='["4:temperature","4:temperature","4:temperature"]'
	     data-style='["ftui l1fill","ftui l2","ftui l5"]'
	     data-ptype='["lines","lines","lines"]'
	     data-uaxis='["CURRENT","CURRENT","CURRENT"]'
	     data-legend='["Pool","Solar","Luft"]'
	     data-yunit="˚C"
	     data-ytext="Temperatur"
	     data-minvalue="auto"
	     data-maxvalue="auto"
	     data-daysago_start="0"
         data-daysago_end="-1"
         data-crosshair="true"
         data-cursorgroup="1"
         data-scrollgroup="1"
         data-showlegend="true"
         data-xticks="auto">
	     </div>
</li>
                



</ul>
</div>

</body>
</html>

Liebe Grüße
Helmut