[FHEM-Tablet-UI] User-Demos

majorshark · 06 Dezember 2016, 12:25:34

Alles klar, jetzt gehts! Danke.

bjoernbo · 06 Dezember 2016, 17:01:47

Hey Setstate, nach langer suche doch wieder gefunden! Du hast in deiner Mobilenansicht von deinen "Homies" die Bilder eingebunden! Damit diese rund dargestellt werden, denke ich mal hast Du dir CSS zur Hilfe genommen. Könntest Du mir für deine Homies deinen Code zur Verfügung stellen? Momentan habe ich nur Pictogramme.

DANKE

setstate · 06 Dezember 2016, 18:05:55

class="round" macht runde Bilder

Aus dem Flexbox Demo3

Code Auswählen


            <div class="round grow-1" data-type="image" data-device="ftuitest" data-state-get="homie1" data-states='["anwesend","abwesend"]' data-classes='["","faded"]' data-width="60" data-height="60" data-url="http://lorempixel.com/150/150/people/1"></div>

bjoernbo · 06 Dezember 2016, 18:21:15

Super ! DANKE SETSTATE

meddie · 07 Dezember 2016, 11:07:44

Hallo Björn,

dein Design sieht ja echt Klasse aus, auch am Smartphone - echt tolle Arbeit.
Irgendwie hat man sich an diesem Dunlen Design satt gesehen, und Dein helles Design ist da wie ein frische Brise!

Würdest Du deine HTML Dateien teilen? Wäre Dir sehr dankbar!

Danke
Gruß Eddie

bjoernbo · 07 Dezember 2016, 17:19:39

Hallo,

klar, keine Problem. Da ich aber noch nicht fertig bin zunächst mal nur die "Startseite'" - ÜBERBLICK sowie die index.html mit der Menüstruktur.

index:

Code Auswählen

<!DOCTYPE html>
<html>
<head>
 <meta name="fhemweb_url" content="http:///192.168.178.51:8083/fhem/tablet/www/">
<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"><!-- 109 -->
    <meta name="widget_base_height" content="124">
    <meta name="gridster_disable" content="0">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="longpoll" content="1"> 
    <meta name="debug" content="0"> 
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<link rel="apple-touch-icon" href="/fhem/www/tablet/custom_icon.png">
    <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/css/fhem-mobil-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/jquery.toast.min.css" />
    <link rel="stylesheet" href="/fhem/www/tablet/lib/openautomation.css" />
    <link rel="stylesheet" href="/fhem/www/tablet/customfonts/font1/style.css">
    <link rel="stylesheet" href="/fhem/www/tablet/lib/fhemSVG.css" />
     <script type="text/javascript" src="/fhem/pgm2/jquery.min.js"></script>
    <script type="text/javascript" src="/fhem/www/tablet/lib/jquery.gridster.min.js" defer></script>
    <script type="text/javascript" src="/fhem/www/tablet/lib/jquery.toast.min.js"></script>
    <script type="text/javascript" src="/fhem/www/tablet/js/fhem-tablet-ui.js"></script>
<title>FHEM-Tablet-UI</title>
</head>
<body>
	<nav id="menu">
		<div data-type="link" class="default large top-space-2x left-space-3x"
			data-width="150" data-icon-left="fa-dashboard" data-color="white"
			data-text-align="left" data-load="div#v3_ueberblick"
			data-url="#v3_ueberblick.html" data-active-color="blue"
			data-active-pattern="(.*index_mobil.html|.*#v3_ueberblick.html)">Überblick</div>
			
		<div data-type="link" class="large top-space-2x left-space-3x"
			data-width="150" data-icon-left="fa-street-view"
			data-color="white" data-text-align="left"
			data-load="div#v3_wohnzimmer" data-url="#v3_wohnzimmer.html"
			data-active-color="blue" data-active-pattern=".*#v3_wohnzimmer.html">Wohnzimmer</div>
			
		<div data-type="link" class="large top-space-2x left-space-3x"
			data-width="150" data-icon-left="fa-bed" data-color="white"
			data-text-align="left" data-load="div#v3_schlafzimmer"
			data-url="#v3_schlafzimmer.html" data-active-color="blue"
			data-active-pattern=".*#v3_schlafzimmer.html">Schlafzimmer</div>
			
		<div data-type="link" class="large top-space-2x left-space-3x"
			data-width="150" data-icon-left="fa-cutlery"
			data-color="white" data-text-align="left"
			data-load="div#v3_kueche" data-url="#v3_kueche.html"
			data-active-color="blue" data-active-pattern=".*#v3_kueche.html">Küche</div>
		
		<div data-type="link" class="large top-space-2x left-space-3x"
			data-width="150" data-icon-left="fa-child" data-color="white"
			data-text-align="left" data-load="div#v3_ben"
			data-url="#v3_ben.html" data-active-color="blue"
			data-active-pattern=".*#v3_ben.html">Ben</div>
			
		<div data-type="link" class="large top-space-2x left-space-3x"
			data-width="150" data-icon-left="fa-female" data-color="white"
			data-text-align="left" data-load="div#v3_julia"
			data-url="#v3_julia.html" data-active-color="blue"
			data-active-pattern=".*#v3_julia.html">Julia</div>				
			
		<div data-type="link" class="large top-space-2x left-space-3x"
			data-width="150" data-icon-left="fa-bath" data-color="white"
			data-text-align="left" data-load="div#v3_badezimmer"
			data-url="#v3_badezimmer.html" data-active-color="blue"
			data-active-pattern=".*#v3_badezimmer.html">Badezimmer</div>

		<div data-type="link" class="large top-space-2x left-space-3x"
			data-width="150" data-icon-left="oa-sani_heating" data-color="white"
			data-text-align="left" data-load="div#v3_heizung"
			data-url="#v3_heizung.html" data-active-color="blue"
			data-active-pattern=".*#v3_heizung.html">Heizung</div>
			
		<div data-type="link" class="large top-space-2x left-space-3x"
			data-width="150" data-icon-left="fa-cogs" data-color="white"
			data-text-align="left" data-load="div#v3_einstellungen"
			data-url="#v3_einstellungen.html" data-active-color="blue"
			data-active-pattern=".*#v3_einstellungen.html">Einstellungen</div>
			
		<div data-type="link" class="large top-space-2x left-space-3x"
			data-width="150" data-icon-left="fa-wrench" data-color="white"
			data-text-align="left" data-load="div#v3_system"
			data-url="#v3_system.html" data-active-color="blue"
			data-active-pattern=".*#v3_system.html">System</div>
			
		<div data-type="link" class="large top-space-2x left-space-3x"
			data-width="150" data-icon-left="fa-phone" data-color="white"
			data-text-align="left" data-load="div#v3_anrufe"
			data-url="#v3_anrufe.html" data-active-color="blue"
			data-active-pattern=".*#v3_anrufe.html">Anrufe</div>
			
		<div data-type="link" class="large top-space-2x left-space-3x"
			data-width="150" data-icon-left="fa-cloud" data-color="white"
			data-text-align="left" data-load="div#v3_wetter"
			data-url="#v3_wetter.html" data-active-color="blue"
			data-active-pattern=".*#v3_wetter.html">Wetter</div>

		<div data-type="link" class="large top-space-2x left-space-3x"
			data-width="150" data-icon-left="fa-hourglass-half" data-color="white"
			data-text-align="left" data-load="div#v3_verbrauch"
			data-url="#v3_verbrauch.html" data-active-color="blue"
			data-active-pattern=".*#v3_verbrauch.html">Verbräuche</div>
			
		<div data-type="link" class="large top-space-2x left-space-3x"
			data-width="150" data-icon-left="fa-line-chart" data-color="white"
			data-text-align="left" data-load="div#v3_graphen"
			data-url="#v3_graphen.html" data-active-color="blue"
			data-active-pattern=".*#v3_graphen.html">Auswertungen</div>
			
		<div data-type="link" class="large top-space-2x left-space-3x"
			data-width="150" data-icon-left="fa-flask" data-color="white"
			data-text-align="left" data-load="div#v3_labor"
			data-url="#v3_labor.html" data-active-color="blue"
			data-active-pattern=".*#v3_labor.html">Labor</div>
<!-- leerer Eintrag -->
		<div data-type="link" class="large top-space-2x left-space-3x"
			data-width="150" 
			data-text-align="left"></div>
</nav>
<header id="header-nav" class="bg-lightgray fixed row">
		<div data-type="slideout" class="col-1-6 big center-align notouch"></div>
		<div id="linkname" class="col-1-4 large bold center-align middle"></div>
		&nbsp;&nbsp;&nbsp;&nbsp;

		<div data-type="button" data-background-icon="none" data-device="Abfall" data-get="USBAbfuhrGrau-Restmuell_tage" data-off-color="#606060" data-get-on='["off","^[01]$","^[1-9][0-9]|[2-9]$"]' data-icons='["fa-trash-o warn","fa-trash-o warn blink","fa-trash-o warn"]' data-on-colors='["#505050","#505050","#505050"]' class="col-1-9 big center-align"></div>

		<div data-type="button" data-background-icon="none" data-device="Abfall" data-get="USBAbfuhrBlau-Altpapier_tage" data-off-color="cornflowerblue" data-get-on='["off","^[01]$","^[1-9][0-9]|[2-9]$"]' data-icons='["fa-trash-o warn","fa-trash-o warn blink","fa-trash-o warn"]' data-on-colors='["cornflowerblue","cornflowerblue","cornflowerblue"]' class="col-1-9 big center-align"></div>
		
		<div data-type="button" data-background-icon="none" data-device="Abfall" data-get="USBAbfuhrGelb-kombinierteWertstofftonne_tage" data-off-color="#D7DF01" data-get-on='["off","^[01]$","^[1-9][0-9]|[2-9]$"]' data-icons='["fs-bag warn","fs-bag warn blink","fs-bag warn"]' data-on-colors='["#D7DF01","#D7DF01","#D7DF01"]' class="col-1-9 big center-align"></div>
		<div data-type="symbol" 
			data-device="HR.WaschmaschineBetrieb"
			data-get-on='["standby","on","off"]'
			data-icons='["oa-scene_dishwasher","oa-scene_dishwasher","oa-scene_dishwasher"]'
			data-on-colors='["green","red","gray"]' 
			class="col-1-9 big center-align"></div>
	   <div data-type="symbol" data-device="AnzahlAnwesende"
			data-get='Zaehler' data-off-color="grey"
			data-get-on='["^[0]$","^[1-9][0-9]|[1-9]$"]'
			data-icons='["oa-scene_keyboard","oa-scene_keyboard warn"]'
			data-on-colors='["grey","green"]' class="col-1-9 big center-align"></div>
		<div data-type="symbol" data-device="AnzahlOffenerFenster"
			data-get='Zaehler' data-off-color="gray"
			data-get-on='["^[0]$","^[1-9][0-9]|[1-9]$"]'
			data-icons='["ftui-window","ftui-window warn"]'
			data-on-colors='["grey","blue"]' class="col-1-9 big center-align"></div>
		<div data-type="label" 
			 data-device="NetatmoInnenSensor" 
                   data-get="co2"
                   data-fix="0"
                   data-unit=" ppm" 
                   data-limits="[0, 600, 1000, 1180, 1800, 2250]"
                   data-off-color="gray"
                   data-colors='["green","yellowgreen","greenyellow","#D7DF01","orange","red"]'
			       class="col-1-9 big center-align"></div>
		<div class="right top space-2x">Außen</br>
		<div data-type="label" 
             data-device="netatmo_M02_00_00_00_24_a2"
             data-get="temperature"
             data-limits="[-20,-15,-10,-5,0,5,10,15,20,25,30,35]"
             data-colors='["#483D8B","#1874CD","#9AC0CD","#5B65F9","#0459E2","#0097D8","#41CD31","#C9E801","#E8C501","#E89B01","#E86101","#E80101"]'
             data-unit="°C"
             class="center-align"></div>

		<div data-type="klimatrend"
		data-device="netatmo_M02_00_00_00_24_a2"
		data-get="statTemperatureTendency"
		data-refperiod="6"
		data-stagnating-color="rgb(80,80,80)"
		data-icon="fa-angle"
		data-rising-color="rgb(180,80,80)"
		data-falling-color="rgb(80,80,180)"
		data-highmark="1"
		data-highmark-icon="fa-angle-double"
		data-highmark-rising-color="rgb(255,80,80)"
		data-highmark-falling-color="rgb(80,80,255)"
		class="small inline"></div>
		<div data-type="klimatrend"
		data-device="netatmo_M02_00_00_00_24_a2"
		data-get="statTemperatureTendency"
		data-refperiod="3"
		data-stagnating-color="rgb(80,80,80)"
		data-icon="fa-angle"
		data-rising-color="rgb(180,80,80)"
		data-falling-color="rgb(80,80,180)"
		data-highmark="1"
		data-highmark-icon="fa-angle-double"
		data-highmark-rising-color="rgb(255,80,80)"
		data-highmark-falling-color="rgb(80,80,255)"
		class="small inline"></div>
		<div data-type="klimatrend"
		data-device="netatmo_M02_00_00_00_24_a2"
		data-get="statTemperatureTendency"
		data-refperiod="2"
		data-stagnating-color="rgb(80,80,80)"
		data-icon="fa-angle"
		data-rising-color="rgb(180,80,80)"
		data-falling-color="rgb(80,80,180)"
		data-highmark="1"
		data-highmark-icon="fa-angle-double"
		data-highmark-rising-color="rgb(255,80,80)"
		data-highmark-falling-color="rgb(80,80,255)"
		class="small inline"></div>
		<div data-type="klimatrend"
		data-device="netatmo_M02_00_00_00_24_a2"
		data-get="statTemperatureTendency"
		data-refperiod="1"
		data-stagnating-color="rgb(80,80,80)"
		data-icon="fa-angle"
		data-rising-color="rgb(180,80,80)"
		data-falling-color="rgb(80,80,180)"
		data-highmark="1"
		data-highmark-icon="fa-angle-double"
		data-highmark-rising-color="rgb(255,80,80)"
		data-highmark-falling-color="rgb(80,80,255)"
		class="small inline"></div>
<div data-type="loading" data-icon="fa-spinner" data-color="blue"
			data-effect="fa-blink" data-shade="true"
			class="col-1-5 center-align big"></div>
</header> 
<main id="panel" class="">
	<div class="page" id="v3_ueberblick"></div>
	<div class="page" id="v3_wohnzimmer"></div>
	<div class="page" id="v3_schlafzimmer"></div>
	<div class="page" id="v3_kueche"></div>
	<div class="page" id="v3_ben"></div>
	<div class="page" id="v3_julia"></div>
	<div class="page" id="v3_badezimmer"></div>
	<div class="page" id="v3_heizung"></div>
	<div class="page" id="v3_einstellungen"></div>
	<div class="page" id="v3_system"></div>
	<div class="page" id="v3_anrufe"></div>
	<div class="page" id="v3_wetter"></div>
	<div class="page" id="v3_verbrauch"></div>
	<div class="page" id="v3_graphen"></div>
	<div class="page" id="v3_labor"></div>
</main>
</body>
</html>

überblick.html
[code]!DOCTYPE html>
<html>
<head></head>
<body>
<div class="page" id="v3_ueberblick">
<div class="gridster">
<ul>

<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
<header>Wohnzimmer</header><div class="cell centered">
<div data-type="symbol"
data-off-color="#AC58FA"
data-icon="fa-street-view"
class="bigger"></div></div>
</li>
<li data-row="1" data-col="2" data-sizex="1" data-sizey="1">
<header>Terassentür</header><div class="cell centered">
<div data-type="symbol" data-device="Fensterkontakt.Wohnzimmer"
data-get-on='["geöffnet","geschlossen"]'
data-icons='["ftui-window warn","ftui-window"]'
data-on-backgoundcolor="blue" data-off-backgroundcolor="gray"
data-on-colors='["blue","gray"]'
class="bigger"></div></div>
</li>
<li data-row="1" data-col="3" data-sizex="1" data-sizey="1">
<header>Dimmer</header><div class="cell centered">
<div data-type="switch" data-device="WZ_Dimmer" class="bigger"></div>
</div>
</li>
<li data-row="1" data-col="4" data-sizex="1" data-sizey="1">
<header>Stehlampe</header>
<div class="cell centered">
<div data-type="switch"
data-device="Stehlampe"
data-on-backgoundcolor="blue"
data-off-backgroundcolor="gray"
class="bigger"></div>
</div>
</li>
<li data-row="1" data-col="5" data-sizex="1" data-sizey="1">
<header>SAT-TV</header>
<div class="cell centered">
<div data-type="switch"
data-device="TV_Modus"
data-icon="fa-tv"
class="bigger"></div>
</div>
</li>
<li data-row="1" data-col="6" data-sizex="1" data-sizey="1">
<header>Apple TV</header>
<div class="cell centered">
<div data-type="switch"
data-device="AppleTV_Modus"
data-icon="fa-apple"
class="bigger"></div>
</div>
</li>

<li data-row="1" data-col="7" data-sizex="1" data-sizey="1">
<header>KODI</header>
<div class="cell centered">
<div data-type="switch"
data-device="XBMC_Modus"
data-icon="font1-kodi" class="bigger">
</div>
</div>
</li>
<li data-row="1" data-col="8" data-sizex="2" data-sizey="1">
<header>HEIZUNG Wz.</header>
<div class="container">
<div class="left">
<div data-type="thermostat"
data-device="Wohnzimmer.Wandthermostat"
data-get="desired-temp"
data-temp="measured-temp"
data-min="4"
data-off="off"
data-max="31"
data-boost="boostclass"
class="cell center">
<div data-type="label"
data-device="Wohnzimmer.Wandthermostat"
data-get="humidity"
data-unit=" %"
class="cell small"></div>
</div>
</div>
<div class="container">
<div class="label" class="cell"> </div>
<div data-type="label"
data-device="CUL_HM_HM_TC_IT_WM_W_EU_303215"
data-get="batteryLevel"
data-unit="V"
class="darker narrow"></div>
<div class="label" class="cell"> </div>
<div data-type="label"
data-device="Wohnzimmer.Wandthermostat"
data-get="controlMode"
class="darker narrow"></div>
<div class="label" class="cell"> </div>
<div data-type="label"
data-device="Wohnzimmer.Wandthermostat"
data-get="boostTime"
class="darker narrow"></div>
<div class="label" class="cell"> </div>
<div data-type="label"
data-device="Wohnzimmer.Wandthermostat"
data-get="battery"
data-limits='["low","ok"]'
data-colors='["red","green"]'
class="darker narrow"></div>
<div class="label" class="cell"> </div>
<div data-type="label"
data-device="Wohnzimmer.Wandthermostat"
data-get="measured-temp"
data-unit=" °C"
class="darker narrow"></div>
<div class="label" class="cell"> </div>
</div>
</div>
</li>
<li data-row="1" data-col="10" data-sizex="1" data-sizey="3">
<header>Stromverbrauch</header>
<div data-type="label" class="cell normal">akt. Verbr.</div>
<div data-type="label"
data-device="ESAx000WZ_5242"
data-get="actual"
data-unit=" kWh"
data-fix="1"
class="cell large">
</div>

<div data-type="label" class="cell normal">Tagesverbr.</div>
<div data-type="label"
data-device="ESAx000WZ_5242"
data-get="day"
data-unit=" kWh"
data-fix="1"
class="cell large">
</div>

<div data-type="label" class="cell normal">Gestern</div>
<div data-type="label"
data-device="ESAx000WZ_5242"
data-get="day_last"
data-unit=" kWh"
data-fix="0"
class="cell large">
</div>

<div data-type="label" class="cell normal">Monatsverbr.</div>
<div data-type="label"
data-device="ESAx000WZ_5242"
data-get="month"
data-unit=" kWh"
data-fix="0"
class="cell large">
</div>

<div data-type="label" class="cell normal">Vormonat</div>
<div data-type="label"
data-device="ESAx000WZ_5242"
data-get="month_last"
data-unit=" kWh"
data-fix="0"
class="cell large">
</div>

<div data-type="label" class="cell normal">Jahresverbr.</div>
<div data-type="label"
data-device="ESAx000WZ_5242"
data-get="year"
data-unit=" kWh"
data-fix="0"
class="cell large">
</div>
</li>

<li data-row="2" data-col="1" data-sizex="1" data-sizey="1">
<header>Schlafzimmer</header>
<div data-type="symbol"
data-icon="fa-bed"
data-off-color="#FA5882"
class="bigger"></div>
</li>
<li data-row="2" data-col="2" data-sizex="1" data-sizey="1">
<header>Fenster</header>
<div data-type="symbol" data-device="Fensterkontakt.Schlafzimmer"
data-get-on='["geöffnet","geschlossen"]'
data-icons='["ftui-window warn","ftui-window"]'
data-on-backgoundcolor="blue" data-off-backgroundcolor="gray"
data-on-colors='["blue","gray"]'
class="bigger"></div>
</li>
<li data-row="2" data-col="3" data-sizex="1" data-sizey="1">
<header>Deckenlicht</header><div class="cell centered">
<div data-type="switch" data-device="#" class="bigger"></div>
</div>
</li>
<li data-row="2" data-col="4" data-sizex="1" data-sizey="1">
<header>Oberlicht</header><div class="cell centered">
<div data-type="switch" data-device="Schrankbeleuchtung" class="bigger"></div>
</div>
</li>
<li data-row="2" data-col="5" data-sizex="1" data-sizey="1">
<header>Nachtlich Bj.</header><div class="cell centered">
<div data-type="switch" data-device="#" class="bigger"></div>
</div>
</li>
<li data-row="2" data-col="6" data-sizex="1" data-sizey="1">
<header>Nachtlicht Ag.</header><div class="cell centered">
<div data-type="switch" data-device="#" class="bigger"></div>
</div>
</li>
<li data-row="2" data-col="8" data-sizex="2" data-sizey="1">
<header>HEIZUNG Sch.</header>
<div class="container">
<div class="left">
<div data-type="thermostat"
data-device="Schlafzimmer.Wandthermostat"
data-get="desired-temp"
data-temp="measured-temp"
data-min="4"
data-off="off"
data-max="31"
data-boost="boostclass"
class="cell center">
<div data-type="label"
data-device="Schlafzimmer.Wandthermostat"
data-get="humidity"
data-unit=" %"
class="cell small"></div>
</div>
</div>
<div class="container">
<div class="label" class="cell"> </div>
<div data-type="label"
data-device="#"
data-get="batteryLevel"
data-unit="V"
class="darker narrow"></div>
<div class="label" class="cell"> </div>
<div data-type="label"
data-device="Schlafzimmer.Wandthermostat"
data-get="controlMode"
class="darker narrow"></div>
<div class="label" class="cell"> </div>
<div data-type="label"
data-device="Schlafzimmer.Wandthermostat"
data-get="boostTime"
class="darker narrow"></div>
<div class="label" class="cell"> </div>
<div data-type="label"
data-device="Schlafzimmer.Wandthermostat"
data-get="battery"
data-limits='["low","ok"]'
data-colors='["red","green"]'
class="darker narrow"></div>
<div class="label" class="cell"> </div>
<div data-type="label"
data-device="Schlafzimmer.Wandthermostat"
data-get="measured-temp"
data-unit=" °C"
class="darker narrow"></div>
<div class="label" class="cell"> </div>
</div>
</div>
</li>
<li data-row="2" data-col="7" data-sizex="1" data-sizey="1">
</li>
<li data-row="4" data-col="1" data-sizex="1" data-sizey="1">
<header>Ben</header>
<div data-type="symbol"
data-icon="fa-child"
data-off-color="#0000cd"
class="bigger"></div>
</li>
<li data-row="4" data-col="2" data-sizex="1" data-sizey="1">
<header>Fenster</header>
<div data-type="symbol" data-device="Fensterkontakt.Ben"
data-get-on='["geöffnet","geschlossen"]'
data-icons='["ftui-window warn","ftui-window"]'
data-on-backgoundcolor="blue" data-off-backgroundcolor="gray"
data-on-colors='["blue","gray"]'
class="bigger"></div>
</li>
<li data-row="4" data-col="3" data-sizex="1" data-sizey="1">
<header>Deckenlicht</header><div class="cell centered">
<div data-type="switch" data-device="#" class="bigger"></div>
</div>
</li>
<li data-row="4" data-col="4" data-sizex="2" data-sizey="1">
<header>HEIZUNG B.</header>
<div class="container">
<div class="left">
<div data-type="thermostat"
data-device="Ben.Wandthermostat"
data-get="desired-temp"
data-temp="measured-temp"
data-min="4"
data-off="off"
data-max="31"
data-boost="boostclass"
class="cell center">
<div data-type="label"
data-device="Ben.Wandthermostat"
data-get="humidity"
data-unit=" %"
class="cell small"></div>
</div>
</div>
<div class="container">
<div class="label" class="cell"> </div>
<div data-type="label"
data-device="#"
data-get="batteryLevel"
data-unit="V"
class="darker narrow"></div>
<div class="label" class="cell"> </div>
<div data-type="label"
data-device="Ben.Wandthermostat"
data-get="controlMode"
class="darker narrow"></div>
<div class="label" class="cell"> </div>
<div data-type="label"
data-device="Ben.Wandthermostat"
data-get="boostTime"
class="darker narrow"></div>
<div class="label" class="cell"> </div>
<div data-type="label"
data-device="Ben.Wandthermostat"
data-get="battery"
data-limits='["low","ok"]'
data-colors='["red","green"]'
class="darker narrow"></div>
<div class="label" class="cell"> </div>
<div data-type="label"
data-device="Ben.Wandthermostat"
data-get="measured-temp"
data-unit=" °C"
class="darker narrow"></div>
<div class="label" class="cell"> </div>
</div>
</div>
</li>
<li data-row="4" data-col="10" data-sizex="1" data-sizey="1">
<header>Rauchmelder</header><div class="cell centered">
<div data-type="switch"
data-device="FL.Rauchmelder"
data-on-color="FF4040"
data-get-on="ON"
data-off-color="green"
data-get-off="OFF"
data-icon="font1-fire"
class="bigger"></div></div>
</li>
<li data-row="5" data-col="1" data-sizex="1" data-sizey="1">
<header>Julia</header>
<div data-type="symbol"
data-icon="fa-female"
data-off-color="#ff1493"
class="bigger"></div>
</li>
<li data-row="5" data-col="2" data-sizex="1" data-sizey="1">
<header>Fenster</header>
<div data-type="symbol" data-device="Fensterkontakt.Julia"
data-get-on='["geöffnet","geschlossen"]'
data-icons='["ftui-window warn","ftui-window"]'
data-on-backgoundcolor="blue" data-off-backgroundcolor="gray"
data-on-colors='["blue","gray"]'
class="bigger"></div>
</li>
<li data-row="5" data-col="3" data-sizex="1" data-sizey="1">
<header>Deckenlicht</header><div class="cell centered">
<div data-type="switch" data-device="#" class="bigger"></div>
</div>
</li>
<li data-row="5" data-col="4" data-sizex="2" data-sizey="1">
<header>HEIZUNG J</header>
<div class="container">
<div class="left">
<div data-type="thermostat"
data-device="Julia.Wandthermostat"
data-get="desired-temp"
data-temp="measured-temp"
data-min="4"
data-off="off"
data-max="31"
data-boost="boostclass"
class="cell center">
<div data-type="label"
data-device="Julia.Wandthermostat"
data-get="humidity"
data-unit=" %"
class="cell small"></div>
</div>
</div>
<div class="container">
<div class="label" class="cell"> </div>
<div data-type="label"
data-device="#"
data-get="batteryLevel"
data-unit="V"
class="darker narrow"></div>
<div class="label" class="cell"> </div>
<div data-type="label"
data-device="Julia.Wandthermostat"
data-get="controlMode"
class="darker narrow"></div>
<div class="label" class="cell"> </div>
<div data-type="label"
data-device="Julia.Wandthermostat"
data-get="boostTime"
class="darker narrow"></div>
<div class="label" class="cell"> </div>
<div data-type="label"
data-device="Julia.Wandthermostat"
data-get="battery"
data-limits='["low","ok"]'
data-colors='["red","green"]'
class="darker narrow"></div>
<div class="label" class="cell"> </div>
<div data-type="label"
data-device="Julia.Wandthermostat"
data-get="measured-temp"
data-unit=" °C"
class="darker narrow"></div>
<div class="label" class="cell"> </div>
</div>
</div>
</li>
<li data-row="5" data-col="6" data-sizex="1" data-sizey="1"></li>
<li data-row="5" data-col="7" data-sizex="1" data-sizey="1"></li>

<li data-row="5" data-col="8" data-sizex="1" data-sizey="1">
<div class="container top-center"><header>Agnes</header><br>
<div class="round grow-1" data-type="image"
data-device="GtAG.Agnes"
data-state-get="state"
data-states='["present","absent"]'
data-classes='["","faded"]' data-width="80" data-height="80" data-url="userfoto/agnes.jpg"
class="bigger"></div></div>
</li>
<li data-row="5" data-col="9" data-sizex="1" data-sizey="1">
<div class="container top-center"><header>Björn</header><br>
<div class="round grow-1" data-type="image"
data-device="GtAG.Bjoern"
data-state-get="state"
data-states='["present","absent"]'
data-classes='["","faded"]' data-width="80" data-height="80" data-url="userfoto/bjoern.jpg"
class="bigger"></div></div>
</li>
<li data-row="5" data-col="10" data-sizex="1" data-sizey="1">
<div class="container top-center"><header>Opa</header><br>
<div class="round grow-1" data-type="image"
data-device="GtAG.Opa"
data-state-get="state"
data-states='["present","absent"]'
data-classes='["","faded"]' data-width="80" data-height="80" data-url="userfoto/adalbert.jpg"
class="bigger"></div></div>
</li>
<li data-row="3" data-col="1" data-sizex="1" data-sizey="1">
<header>Küche</header>

bjoernbo · 07 Dezember 2016, 17:21:56

nun auch das Menü

bjoernbo · 07 Dezember 2016, 17:28:30

kurz zur Seite Überblick: Ich denke es macht Sinn auch mal kurz zu beschreiben was man sieht.

Was sieht man in der obersten Zeile. Eigentlich selbsterklärend. Hierbei handelt es sich um die Müllabfuhr die mir anzeigt in wievielten Tagen der Müll abgeholt wird. Daneben wird mir angezeigt, dass die Waschmaschine derzeit aus ist. Wenn diese eingeschaltet ist, ändert sich die Farbe in rot. Ist die Waschmaschine fertig kann man in den Keller gehen, da das Symbol dann grün ist.

Daneben sehen wir zivile Personen derzeit anwesend sind. Diese Information spiegelt sich unten recht nochmal wieder! Wenn keine Person anwensend ist, wird geprüft ob alle Lichter etc. ausgeschaltet sind, wenn dies nicht der Fall ist werden diese entspr. ausgeschaltet.

Das Fenstersymbol oben zeigt mit due Anzahl der offenen Fenster an, sofern eins geöffnet ist.

Dann folgt noch die Luftqualität sowie die Außentemperatur inklusive Tendenz.

meddie · 07 Dezember 2016, 19:20:28

Hallo Björn,

vielen vielen dank fürs Teilen deiner Arbeit!

Ich glaube Du hast einen Teil des Codes von der überblick.html ausgelassen. Du hast den Code mit dem Code-Tag eingeleitet aber die abschließenden HTML Tags fehlen und der abschließende BB-Code Tag fehlt auch.
Könntest Du Deinen Beitrag nochmal editieren. Danke sehr

bjoernbo · 07 Dezember 2016, 19:53:44

Danke für den Hinweis: Hier nochmal der Code "Überblick"

Code Auswählen

!DOCTYPE html>
<html>
<head></head>
<body>
<div class="page" id="v3_ueberblick"> 
<div class="gridster">
<ul>
<!-- WOHNZIMMER -->
  <li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
        <header>Wohnzimmer</header><div class="cell centered">
              <div data-type="symbol" 
                   data-off-color="#AC58FA"
                   data-icon="fa-street-view"
                   class="bigger"></div></div>        
</li>
<li data-row="1" data-col="2" data-sizex="1" data-sizey="1">
        <header>Terassentür</header><div class="cell centered">
              <div data-type="symbol" data-device="Fensterkontakt.Wohnzimmer"
                   data-get-on='["geöffnet","geschlossen"]'
                   data-icons='["ftui-window warn","ftui-window"]'
                   data-on-backgoundcolor="blue" data-off-backgroundcolor="gray"
                   data-on-colors='["blue","gray"]'
                   class="bigger"></div></div>  
</li>
<li data-row="1" data-col="3" data-sizex="1" data-sizey="1">
        <header>Dimmer</header><div class="cell centered">
        <div data-type="switch" data-device="WZ_Dimmer" class="bigger"></div>    
      </div>
</li>
<li data-row="1" data-col="4" data-sizex="1" data-sizey="1">
        <header>Stehlampe</header>
        <div class="cell centered">
            <div data-type="switch"
                 data-device="Stehlampe"
                 data-on-backgoundcolor="blue"
                 data-off-backgroundcolor="gray"
                 class="bigger"></div>
        </div>
</li>
<li data-row="1" data-col="5" data-sizex="1" data-sizey="1">
        <header>SAT-TV</header>
        <div class="cell centered">
            <div data-type="switch" 
                 data-device="TV_Modus" 
                 data-icon="fa-tv" 
                 class="bigger"></div>
        </div>
</li>
<li data-row="1" data-col="6" data-sizex="1" data-sizey="1">
        <header>Apple TV</header>
        <div class="cell centered">
            <div data-type="switch" 
                   data-device="AppleTV_Modus" 
                   data-icon="fa-apple" 
                   class="bigger"></div>
        </div>
</li>

<li data-row="1" data-col="7" data-sizex="1" data-sizey="1">
        <header>KODI</header>
        <div class="cell centered">
             <div data-type="switch"
                   data-device="XBMC_Modus"
                   data-icon="font1-kodi" class="bigger">
             </div> 
        </div>
</li>
<li data-row="1" data-col="8" data-sizex="2" data-sizey="1">
        <header>HEIZUNG Wz.</header>
    <div class="container">
        <div class="left">
                 <div data-type="thermostat"
                      data-device="Wohnzimmer.Wandthermostat" 
                      data-get="desired-temp"
                      data-temp="measured-temp"  
                      data-min="4" 
                      data-off="off" 
                      data-max="31" 
                      data-boost="boostclass" 
                      class="cell center">
                        <div data-type="label" 
                             data-device="Wohnzimmer.Wandthermostat" 
                             data-get="humidity" 
                             data-unit=" %" 
                             class="cell small"></div>
                </div>
        </div>
            <div class="container">
                <div class="label" class="cell">&nbsp;</div>
                <div data-type="label"
                     data-device="CUL_HM_HM_TC_IT_WM_W_EU_303215" 
                     data-get="batteryLevel" 
                     data-unit="V" 
                     class="darker narrow"></div>
                <div class="label" class="cell">&nbsp;</div>
                <div data-type="label"
                     data-device="Wohnzimmer.Wandthermostat" 
                     data-get="controlMode" 
                     class="darker narrow"></div>
                <div class="label" class="cell">&nbsp;</div>
                <div data-type="label" 
                     data-device="Wohnzimmer.Wandthermostat" 
                     data-get="boostTime" 
                     class="darker narrow"></div>
                <div class="label" class="cell">&nbsp;</div>
                <div data-type="label" 
                     data-device="Wohnzimmer.Wandthermostat" 
                     data-get="battery"  
                     data-limits='["low","ok"]' 
                     data-colors='["red","green"]' 
                     class="darker narrow"></div>
                <div class="label" class="cell">&nbsp;</div>
                <div data-type="label" 
                     data-device="Wohnzimmer.Wandthermostat" 
                     data-get="measured-temp" 
                     data-unit=" °C" 
                     class="darker narrow"></div>
                <div class="label" class="cell">&nbsp;</div>
            </div>
    </div>
</li>
<li data-row="1" data-col="10" data-sizex="1" data-sizey="3">
    <header>Stromverbrauch</header>
    <div data-type="label" class="cell normal">akt. Verbr.</div>
        <div data-type="label"
             data-device="ESAx000WZ_5242" 
             data-get="actual" 
             data-unit=" kWh" 
             data-fix="1" 
             class="cell large">
        </div>
        
        <div data-type="label" class="cell normal">Tagesverbr.</div>
        <div data-type="label" 
             data-device="ESAx000WZ_5242" 
             data-get="day" 
             data-unit=" kWh" 
             data-fix="1" 
             class="cell large">
        </div>
          
          <div data-type="label" class="cell normal">Gestern</div> 
        <div data-type="label" 
             data-device="ESAx000WZ_5242" 
             data-get="day_last" 
             data-unit=" kWh" 
             data-fix="0" 
             class="cell large">
        </div>
          
          <div data-type="label" class="cell normal">Monatsverbr.</div>     
        <div data-type="label" 
             data-device="ESAx000WZ_5242" 
             data-get="month" 
             data-unit=" kWh" 
             data-fix="0" 
             class="cell large">
        </div>
         
          <div data-type="label" class="cell normal">Vormonat</div>
        <div data-type="label" 
             data-device="ESAx000WZ_5242" 
             data-get="month_last" 
             data-unit=" kWh" 
             data-fix="0" 
             class="cell large">
        </div>
        
        <div data-type="label" class="cell normal">Jahresverbr.</div>
        <div data-type="label" 
             data-device="ESAx000WZ_5242" 
             data-get="year" 
             data-unit=" kWh" 
             data-fix="0" 
             class="cell large">
        </div>     
</li>
<!-- SCHLAFZIMMER -->
 <li data-row="2" data-col="1" data-sizex="1" data-sizey="1">
        <header>Schlafzimmer</header>
              <div data-type="symbol" 
                   data-icon="fa-bed"
                   data-off-color="#FA5882"
                   class="bigger"></div>     
</li>
<li data-row="2" data-col="2" data-sizex="1" data-sizey="1">
        <header>Fenster</header>
         <div data-type="symbol" data-device="Fensterkontakt.Schlafzimmer"
                   data-get-on='["geöffnet","geschlossen"]'
                   data-icons='["ftui-window warn","ftui-window"]'
                   data-on-backgoundcolor="blue" data-off-backgroundcolor="gray"
                   data-on-colors='["blue","gray"]'
                   class="bigger"></div>
</li>
<li data-row="2" data-col="3" data-sizex="1" data-sizey="1">
        <header>Deckenlicht</header><div class="cell centered">
        <div data-type="switch" data-device="#" class="bigger"></div>    
      </div>
</li>
<li data-row="2" data-col="4" data-sizex="1" data-sizey="1">
        <header>Oberlicht</header><div class="cell centered">
        <div data-type="switch" data-device="Schrankbeleuchtung" class="bigger"></div>    
      </div>
</li>
<li data-row="2" data-col="5" data-sizex="1" data-sizey="1">
        <header>Nachtlich Bj.</header><div class="cell centered">
        <div data-type="switch" data-device="#" class="bigger"></div>    
      </div>
</li>
<li data-row="2" data-col="6" data-sizex="1" data-sizey="1">
        <header>Nachtlicht Ag.</header><div class="cell centered">
        <div data-type="switch" data-device="#" class="bigger"></div>    
      </div>
</li>
<li data-row="2" data-col="8" data-sizex="2" data-sizey="1">
        <header>HEIZUNG Sch.</header>
    <div class="container">
        <div class="left">
                 <div data-type="thermostat"
                      data-device="Schlafzimmer.Wandthermostat" 
                      data-get="desired-temp"
                      data-temp="measured-temp"  
                      data-min="4" 
                      data-off="off" 
                      data-max="31" 
                      data-boost="boostclass" 
                      class="cell center">
                        <div data-type="label" 
                             data-device="Schlafzimmer.Wandthermostat" 
                             data-get="humidity" 
                             data-unit=" %" 
                             class="cell small"></div>
                </div>
        </div>
            <div class="container">
                <div class="label" class="cell">&nbsp;</div>
                <div data-type="label"
                     data-device="#" 
                     data-get="batteryLevel" 
                     data-unit="V" 
                     class="darker narrow"></div>
                <div class="label" class="cell">&nbsp;</div>
                <div data-type="label"
                     data-device="Schlafzimmer.Wandthermostat" 
                     data-get="controlMode" 
                     class="darker narrow"></div>
                <div class="label" class="cell">&nbsp;</div>
                <div data-type="label" 
                     data-device="Schlafzimmer.Wandthermostat" 
                     data-get="boostTime" 
                     class="darker narrow"></div>
                <div class="label" class="cell">&nbsp;</div>
                <div data-type="label" 
                     data-device="Schlafzimmer.Wandthermostat" 
                     data-get="battery"  
                     data-limits='["low","ok"]' 
                     data-colors='["red","green"]' 
                     class="darker narrow"></div>
                <div class="label" class="cell">&nbsp;</div>
                <div data-type="label" 
                     data-device="Schlafzimmer.Wandthermostat" 
                     data-get="measured-temp" 
                     data-unit=" °C" 
                     class="darker narrow"></div>
                <div class="label" class="cell">&nbsp;</div>
            </div>
    </div>
</li>
<li data-row="2" data-col="7" data-sizex="1" data-sizey="1">   
</li>
<li data-row="4" data-col="1" data-sizex="1" data-sizey="1">
        <header>Ben</header>
              <div data-type="symbol" 
                   data-icon="fa-child"
                   data-off-color="#0000cd"
                   class="bigger"></div>     
</li>
<li data-row="4" data-col="2" data-sizex="1" data-sizey="1">
        <header>Fenster</header>
         <div data-type="symbol" data-device="Fensterkontakt.Ben"
                   data-get-on='["geöffnet","geschlossen"]'
                   data-icons='["ftui-window warn","ftui-window"]'
                   data-on-backgoundcolor="blue" data-off-backgroundcolor="gray"
                   data-on-colors='["blue","gray"]'
                   class="bigger"></div>
</li>
<li data-row="4" data-col="3" data-sizex="1" data-sizey="1">
        <header>Deckenlicht</header><div class="cell centered">
        <div data-type="switch" data-device="#" class="bigger"></div>    
      </div>
</li>
<li data-row="4" data-col="4" data-sizex="2" data-sizey="1">
        <header>HEIZUNG B.</header>
    <div class="container">
        <div class="left">
                 <div data-type="thermostat"
                      data-device="Ben.Wandthermostat" 
                      data-get="desired-temp"
                      data-temp="measured-temp"  
                      data-min="4" 
                      data-off="off" 
                      data-max="31" 
                      data-boost="boostclass" 
                      class="cell center">
                        <div data-type="label" 
                             data-device="Ben.Wandthermostat" 
                             data-get="humidity" 
                             data-unit=" %" 
                             class="cell small"></div>
                </div>
        </div>
            <div class="container">
                <div class="label" class="cell">&nbsp;</div>
                <div data-type="label"
                     data-device="#" 
                     data-get="batteryLevel" 
                     data-unit="V" 
                     class="darker narrow"></div>
                <div class="label" class="cell">&nbsp;</div>
                <div data-type="label"
                     data-device="Ben.Wandthermostat" 
                     data-get="controlMode" 
                     class="darker narrow"></div>
                <div class="label" class="cell">&nbsp;</div>
                <div data-type="label" 
                     data-device="Ben.Wandthermostat" 
                     data-get="boostTime" 
                     class="darker narrow"></div>
                <div class="label" class="cell">&nbsp;</div>
                <div data-type="label" 
                     data-device="Ben.Wandthermostat" 
                     data-get="battery"  
                     data-limits='["low","ok"]' 
                     data-colors='["red","green"]' 
                     class="darker narrow"></div>
                <div class="label" class="cell">&nbsp;</div>
                <div data-type="label" 
                     data-device="Ben.Wandthermostat" 
                     data-get="measured-temp" 
                     data-unit=" °C" 
                     class="darker narrow"></div>
                <div class="label" class="cell">&nbsp;</div>
            </div>
    </div>
</li>
<li data-row="4" data-col="10" data-sizex="1" data-sizey="1">
 <header>Rauchmelder</header><div class="cell centered">
            <div data-type="switch"
                 data-device="FL.Rauchmelder"
                 data-on-color="FF4040"
                 data-get-on="ON"
                 data-off-color="green" 
                 data-get-off="OFF"
                 data-icon="font1-fire" 
                 class="bigger"></div></div>
</li>
<li data-row="5" data-col="1" data-sizex="1" data-sizey="1">
        <header>Julia</header>
              <div data-type="symbol" 
                   data-icon="fa-female"
                   data-off-color="#ff1493"
                   class="bigger"></div>     
</li>
<li data-row="5" data-col="2" data-sizex="1" data-sizey="1">
        <header>Fenster</header>
         <div data-type="symbol" data-device="Fensterkontakt.Julia"
                   data-get-on='["geöffnet","geschlossen"]'
                   data-icons='["ftui-window warn","ftui-window"]'
                   data-on-backgoundcolor="blue" data-off-backgroundcolor="gray"
                   data-on-colors='["blue","gray"]'
                   class="bigger"></div>
</li>
<li data-row="5" data-col="3" data-sizex="1" data-sizey="1">
        <header>Deckenlicht</header><div class="cell centered">
        <div data-type="switch" data-device="#" class="bigger"></div>    
      </div>
</li>
<li data-row="5" data-col="4" data-sizex="2" data-sizey="1">
        <header>HEIZUNG J</header>
    <div class="container">
        <div class="left">
                 <div data-type="thermostat"
                      data-device="Julia.Wandthermostat" 
                      data-get="desired-temp"
                      data-temp="measured-temp"  
                      data-min="4" 
                      data-off="off" 
                      data-max="31" 
                      data-boost="boostclass" 
                      class="cell center">
                        <div data-type="label" 
                             data-device="Julia.Wandthermostat" 
                             data-get="humidity" 
                             data-unit=" %" 
                             class="cell small"></div>
                </div>
        </div>
            <div class="container">
                <div class="label" class="cell">&nbsp;</div>
                <div data-type="label"
                     data-device="#" 
                     data-get="batteryLevel" 
                     data-unit="V" 
                     class="darker narrow"></div>
                <div class="label" class="cell">&nbsp;</div>
                <div data-type="label"
                     data-device="Julia.Wandthermostat" 
                     data-get="controlMode" 
                     class="darker narrow"></div>
                <div class="label" class="cell">&nbsp;</div>
                <div data-type="label" 
                     data-device="Julia.Wandthermostat" 
                     data-get="boostTime" 
                     class="darker narrow"></div>
                <div class="label" class="cell">&nbsp;</div>
                <div data-type="label" 
                     data-device="Julia.Wandthermostat" 
                     data-get="battery"  
                     data-limits='["low","ok"]' 
                     data-colors='["red","green"]' 
                     class="darker narrow"></div>
                <div class="label" class="cell">&nbsp;</div>
                <div data-type="label" 
                     data-device="Julia.Wandthermostat" 
                     data-get="measured-temp" 
                     data-unit=" °C" 
                     class="darker narrow"></div>
                <div class="label" class="cell">&nbsp;</div>
            </div>
    </div>
</li>
<li data-row="5" data-col="6" data-sizex="1" data-sizey="1"></li>
<li data-row="5" data-col="7" data-sizex="1" data-sizey="1"></li>


<li data-row="5" data-col="8" data-sizex="1" data-sizey="1">
<div class="container top-center"><header>Agnes</header><br>
              <div class="round grow-1" data-type="image"
                   data-device="GtAG.Agnes"
                        data-state-get="state"
                        data-states='["present","absent"]' 
                        data-classes='["","faded"]' data-width="80" data-height="80" data-url="userfoto/agnes.jpg"
                        class="bigger"></div></div> 
</li>
<li data-row="5" data-col="9" data-sizex="1" data-sizey="1">
  <div class="container top-center"><header>Björn</header><br>
              <div class="round grow-1" data-type="image"
                   data-device="GtAG.Bjoern"
                        data-state-get="state"
                        data-states='["present","absent"]' 
                        data-classes='["","faded"]' data-width="80" data-height="80" data-url="userfoto/bjoern.jpg"
                        class="bigger"></div></div> 
</li>
<li data-row="5" data-col="10" data-sizex="1" data-sizey="1">
  <div class="container top-center"><header>Opa</header><br>
              <div class="round grow-1" data-type="image"
                   data-device="GtAG.Opa"
                         data-state-get="state"
                        data-states='["present","absent"]' 
                        data-classes='["","faded"]' data-width="80" data-height="80" data-url="userfoto/adalbert.jpg"
                        class="bigger"></div></div> 
</li>
<li data-row="3" data-col="1" data-sizex="1" data-sizey="1">
        <header>Küche</header>
              <div data-type="symbol" 
                   data-icon="fa-cutlery"
                   data-off-color="#00FF40"
                   class="bigger"></div>     
</li>
<li data-row="3" data-col="2" data-sizex="1" data-sizey="1">
        <header>Fenster</header>
         <div data-type="symbol" data-device="Fensterkontakt.Kueche"
                   data-get-on='["geöffnet","geschlossen"]'
                   data-icons='["ftui-window warn","ftui-window"]'
                   data-on-backgoundcolor="blue" data-off-backgroundcolor="gray"
                   data-on-colors='["blue","gray"]'
                   class="bigger"></div>
</li>
<li data-row="3" data-col="3" data-sizex="1" data-sizey="1">
        <header>Deckenlicht</header>
        <div class="cell centered">
            <div data-type="switch"
                 data-device="LIGHTIFY7D0BDA0000261884"
                 data-on-backgoundcolor="blue"
                 data-off-backgroundcolor="gray"
                 class="bigger"></div>
        </div>
</li>
<li data-row="3" data-col="4" data-sizex="1" data-sizey="1">
        <header>Stehlampe</header>
        <div class="cell centered">
            <div data-type="switch" 
                 data-device="StehLaKueche"
                 data-on-backgoundcolor="blue"
                 data-off-backgroundcolor="gray"
                 class="bigger"></div>
        </div>
</li>



<li data-row="3" data-col="5" data-sizex="1" data-sizey="1">
        <header>Schranklicht</header>
        <div class="cell centered">
            <div data-type="switch"
                data-device='KuecheLED'
                 data-on-backgoundcolor="blue"
                 data-off-backgroundcolor="gray"
                 class="bigger"></div>
        </div>
</li>
<li data-row="3" data-col="6" data-sizex="1" data-sizey="1">
<header>Fensterdeko</header>
        <div class="cell centered">
            <div data-type="switch"
                 data-device="Lampe_Kueche"
                 data-icon="fa-snowflake-o" 
                 data-on-backgoundcolor="blue"
                 data-off-backgroundcolor="gray"
                 class="bigger"></div>
        </div>

</li>


<li data-row="3" data-col="7" data-sizex="1" data-sizey="1">
        <header>Radio</header>
        <div class="cell centered">
            <div data-type="switch"
                 data-device="Radio" 
                 data-get"power"
                 data-icon="oa-it_radio"
                 class="bigger"></div>
        </div>
</li>

<li data-row="3" data-col="8" data-sizex="1" data-sizey="1"></li>
<li data-row="3" data-col="9" data-sizex="1" data-sizey="1">
   <header>Weihnachtsbaum</header><div class="cell centered">
        <div data-type="switch" data-device="steckdose01" data-icon="fa-tree" class="bigger"></div>    
      </div>
</li>

<li data-row="4" data-col="6" data-sizex="1" data-sizey="1">
        <header>Badezimmer</header>
              <div data-type="symbol" 
                   data-icon="fa-bath"
                   data-off-color="#00FFFF"
                   class="bigger"></div>     
</li>
<li data-row="4" data-col="7" data-sizex="1" data-sizey="1">
        <header>Fenster</header>
         <div data-type="symbol" data-device="Fensterkontakt.Badezimmer"
                   data-get-on='["geöffnet","geschlossen"]'
                   data-icons='["ftui-window warn","ftui-window"]'
                   data-on-backgoundcolor="blue" data-off-backgroundcolor="gray"
                   data-on-colors='["blue","gray"]'
                   class="bigger"></div>
</li>
<li data-row="4" data-col="8" data-sizex="2" data-sizey="1">
        <header>HEIZUNG Bad</header>
    <div class="container">
        <div class="left">
             <div data-type="thermostat"
                      data-device="HM_3CDC88_Clima" 
                      data-get="desired-temp"
                      data-temp="measured-temp"  
                      data-min="4" 
                      data-off="off" 
                      data-max="31" 
                      data-boost="boostclass" 
                      class="cell center">
                        <div data-type="label" 
                             data-device="HM_3CDC88_Clima" 
                             data-get="humidity" 
                             data-unit=" %" 
                             class="cell small"></div>
                </div>    
        </div>
            <div class="container">
                <div class="label" class="cell">&nbsp;</div>
                
                <div data-type="label"
                     data-device="HeizungsThermostatBad" 
                     data-get="batteryLevel" 
                     data-unit="V" 
                     class="darker narrow"></div>
                <div class="label" class="cell">&nbsp;</div>
                <div data-type="label"
                     data-device="HM_3CDC88_Clima" 
                     data-get="controlMode" 
                     class="darker narrow"></div>
                <div class="label" class="cell">&nbsp;</div>
                <div data-type="label" 
                     data-device="HM_3CDC88_Clima" 
                     data-get="boostTime" 
                     class="darker narrow"></div>
                <div class="label" class="cell">&nbsp;</div>
                <div data-type="label" 
                     data-device="HeizungsThermostatBad" 
                     data-get="battery"  
                     data-limits='["low","ok"]' 
                     data-colors='["red","green"]' 
                     class="darker narrow"></div>
                <div class="label" class="cell">&nbsp;</div>
                <div data-type="label" 
                     data-device="HM_3CDC88_Clima" 
                     data-get="measured-temp" 
                     data-unit=" °C" 
                     class="darker narrow"></div>
                <div class="label" class="cell">&nbsp;</div>
            </div>
</li>
</ul>
</div>
</div>
</body>
</html>

jnewton957 · 07 Dezember 2016, 21:14:05

Mein aktueller Stand des Servermonitors als Kombination einiger Tips.

Danke@Eisix und Danke@Masterfunk

Grüße
Jörg

meddie · 07 Dezember 2016, 21:16:14

Hallo Björn,

darf ich Dir noch eine Frage stellen - wie stellst Du die Anzahl der Anwesenden fest?

Danke
Gruß Eddie

bjoernbo · 07 Dezember 2016, 21:45:17

Klar, dafür ist ein Forum da. :-D

Ich habe 3 SiemensGTags im Einsatz. Anleitungen zum Einbinden gibt es hier im Forum zu genüge:

Zitatdefine GtAG.Bjoern PRESENCE lan-bluetooth 7C:XX:XX:XX:90:FC 192.168.178.51:5333 60
attr GtAG.Bjoern room Anwesenheit

define GtAG.Agnes PRESENCE lan-bluetooth 7C:xx:xx:xx:91:A3 192.168.178.51:5333 60
attr GtAG.Agnes room Anwesenheit

define GtAG.Opa PRESENCE lan-bluetooth 7C:xx:xx:xx:xx:00 192.168.178.51:5333 60
attr GtAG.Opa room Anwesenheit

define AnzahlAnwesende dummy
attr AnzahlAnwesende readingList Zaehler
attr AnzahlAnwesende room Anwesenheit,System
attr AnzahlAnwesende setList state Zaehler
attr AnzahlAnwesende userReadings Zaehler
define nt_AnzahlAnwesende notify (GtAG.*):.* {\
my $bisherigeAnwesende = ReadingsVal("AnzahlAnwesende",$NAME,0);;\
my $Wert=ReadingsVal("AnzahlAnwesende","Zaehler",0);;\
if($EVENT eq "present" && $bisherigeAnwesende ne "present")\
{$Wert = $Wert+1;;\
fhem("setreading AnzahlAnwesende Zaehler $Wert");;\
fhem("setreading AnzahlAnwesende $NAME present");;\
fhem("set AnzahlAnwesende $Wert");;\
} \
elsif($EVENT eq "absent" && $bisherigeAnwesende ne "absent") \
{$Wert = $Wert-1;;\
fhem("setreading AnzahlAnwesende Zaehler $Wert");;\
fhem("set AnzahlAnwesende $Wert");;\
fhem("setreading AnzahlAnwesende $NAME absent");;\
}\
}
attr nt_AnzahlAnwesende room Anwesenheit,System

Schau mal ob das reicht.

MrFisch · 08 Dezember 2016, 00:11:39

Nachdem mir dieses Forum schon unglaublich geholfen hat, möchte ich gerne meinen aktuellen Stand meines Heim-Projektes teilen... Vielen Dank an die vielen Vorlagen hier im Thread... Ohne Euch hätte ich es definitiv nicht geschafft, ein Layout zu finden, was meinen Geschmack voll trifft.

Aktuell habe ich zwar noch viel Arbeit vor mir, aber der Anfang ist für mein Empfinden schon sehr erfolgreich. Immerhin beschäftige ich mich erst seit ca. 4 Wochen mit FHEM. Bin echt begeistert!!

bjoernbo · 08 Dezember 2016, 06:23:43

Hey Mr.Fish!
Kannst Du mir deinen Code für "es läuft" zur Verfügung stellen?

Wie hast Du die Empfangsqualität abgefragt? Welchen SAT Receiver verwendest du?

Danke.

[FHEM-Tablet-UI] User-Demos

MrFisch