Um meine Implementierung von Tablet-UI etwas verständlicher zu machen, hier einige Code-Beispiele. Diese kannst Du als Ausgangspunkt verwenden und nach Belieben anpassen. Bitte beachte, dass einige Geräte noch gesonderte Konfiguration in FHEM benötigen. Hierzu zählen zum Beispiel der Müllkalender, Familienkalender oder die Anwesenheitserkennung.
Tablet-UI Code-Beispiel für index.html
<!DOCTYPE html> <html> <head> <title>FHEM-Tablet-UI</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <meta name="widget_base_width" content="60"> <meta name="widget_base_height" content="65"> <meta name="mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="longpoll" content="1"> <!-- 1=longpoll;0=shortpoll every 30sec --> <meta name="debug" content="0"> <!-- 1=output to console;0=not output --> <meta name="widget_margin" content="3"> <meta name="gridster_disable" content="1"> <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" /> <link rel="stylesheet" href="/fhem/tablet/lib/openautomation.css" /> <!-- define your personal style here, it wont be overwritten --> <link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui-user.css" /> <script type="text/javascript" src="/fhem/pgm2/jquery.min.js"></script> <script type="text/javascript" src="/fhem/tablet/lib/jquery.knob.mod.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> </head> <body> <div data-type="clicksound" data-sound='["ion-tap", "ion-water-droplet-2", "ion-button-tiny", "ion-cd-tray", "ion-water-droplet-3"]' data-bind-to='["+knob", "+circlemenu-outer", "+button", "+circlemenu-center", "+slider"]' data-length='[200,300,200,1400,200]' data-volume="70" ></div> <div class="gridster"> <ul> <li data-row="1" data-col="1" data-sizex="1" data-sizey="6" data-template="/fhem/tablet/nav_left.html"></li> <!-- Current Weather Start --> <li data-row="2" data-col="2" data-sizex="4" data-sizey="2"> <div class="container container--current-weather"> <div class="inline"> <div data-type="weather" data-device="Yahoo_Wetter" data-get="condition" class="big"></div> <div data-type="label" data-device="Yahoo_Wetter" data-get="temperature" data-unit="°C" class="bigger"></div> </div> <div class="inline left-space"> <div> <div class="inline"> <div data-type="wind_direction" data-device="Yahoo_Wetter" data-direction="wind_direction" data-speed="wind_speed" data-calm="-" data-size="150" data-tickstep="45" data-angleoffset="0" class="mini"></div> </div> <div class="inline left-space"> <div data-type="label" data-device="Yahoo_Wetter" data-get="wind" data-unit="km/h" class=""></div> <div data-type="label" data-device="Yahoo_Wetter" data-get="pressure" data-unit="hPa" class=""></div> <div data-type="label" data-device="Yahoo_Wetter" data-get="wind_chill" data-unit="°C" class="large"></div> </div> </div> <div class="" style="border-top: solid 1px #333; margin-top: 5px; padding-top: 5px;"> <div data-type="label" class="darker inline">Außentemperatur</div> <div data-type="label" data-device="AB_Temperatur" data-get="temperature" data-unit="°C" class="big inline left-space"></div> </div> </div> </div> </li> <!-- Current Weather Start --> <!-- Yahoo Forecast Start --> <li data-row="2" data-col="6" data-sizex="6" data-sizey="2"> <div class="container container--weather-forecast"> <div class="inline"> <div data-type="label" class="darker">Heute</div> <div data-type="weather" data-device="Yahoo_Wetter" data-get="fc1_condition" class="big"></div> <div data-type="label" data-device="Yahoo_Wetter" data-get="fc1_low_c" data-unit="°C" class=""></div> <div data-type="label" data-device="Yahoo_Wetter" data-get="fc1_high_c" data-unit="°C" class="large"></div> </div> <div class="inline left-space"> <div data-type="label" data-device="Yahoo_Wetter" data-get="fc2_day_of_week" class="darker"></div> <div data-type="weather" data-device="Yahoo_Wetter" data-get="fc2_condition" class="big"></div> <div data-type="label" data-device="Yahoo_Wetter" data-get="fc2_low_c" data-unit="°C" class=""></div> <div data-type="label" data-device="Yahoo_Wetter" data-get="fc2_high_c" data-unit="°C" class="large"></div> </div> <div class="inline left-space"> <div data-type="label" data-device="Yahoo_Wetter" data-get="fc3_day_of_week" class="darker"></div> <div data-type="weather" data-device="Yahoo_Wetter" data-get="fc3_condition" class="big"></div> <div data-type="label" data-device="Yahoo_Wetter" data-get="fc3_low_c" data-unit="°C" class=""></div> <div data-type="label" data-device="Yahoo_Wetter" data-get="fc3_high_c" data-unit="°C" class="large"></div> </div> <div class="inline left-space"> <div data-type="label" data-device="Yahoo_Wetter" data-get="fc4_day_of_week" class="darker"></div> <div data-type="weather" data-device="Yahoo_Wetter" data-get="fc4_condition" class="big"></div> <div data-type="label" data-device="Yahoo_Wetter" data-get="fc4_low_c" data-unit="°C" class=""></div> <div data-type="label" data-device="Yahoo_Wetter" data-get="fc4_high_c" data-unit="°C" class="large"></div> </div> <div class="inline left-space"> <div data-type="label" data-device="Yahoo_Wetter" data-get="fc5_day_of_week" class="darker"></div> <div data-type="weather" data-device="Yahoo_Wetter" data-get="fc5_condition" class="big"></div> <div data-type="label" data-device="Yahoo_Wetter" data-get="fc5_low_c" data-unit="°C" class=""></div> <div data-type="label" data-device="Yahoo_Wetter" data-get="fc5_high_c" data-unit="°C" class="large"></div> </div> </div> </li> <!-- Yahoo Forecast End --> <!-- Familienkalender Start --> <li data-row="3" data-col="2" data-sizex="4" data-sizey="4" style="overflow-y: auto;"> <header>Familienkalender</header> <div class="container" style="text-align: left; padding: 10px;"> <div data-type="label" data-device="data_familienkalender" class="left"></div> </div> </li> <!-- Familienkalender End --> <li data-row="3" data-col="6" data-sizex="6" data-sizey="4"> <header>Rollläden</header> <div class="container"> <div class="cell inline"> <div data-type="symbol" data-device="Action_EG_Blinds" class="inline" data-states='["auf","zu"]' data-icons='["fa-square", "fa-square-o"]' data-colors='["white", "white"]' ></div> <div data-type="select" data-device="Action_EG_Blinds" data-items='["auf","zu"]' class="cell" ></div> </div> <div class="cell wider inline"> <div data-type="switch" data-device="EG_Wohnzimmer_Aktor_Rollladen_1" data-set-on="auf" data-set-off="zu" data-states='["auf","zu"]' data-icons='["fa-square-o", "fa-square-o"]' data-colors='["white", "white"]' data-background-colors='["green", "red"]' class="small"></div> <div data-type="label" class="cell small">Rolladen 1</div> </div> <div class="cell wider inline"> <div data-type="switch" data-device="EG_Wohnzimmer_Aktor_Rollladen_2" data-set-on="auf" data-set-off="zu" data-states='["auf","zu"]' data-icons='["fa-square-o", "fa-square-o"]' data-colors='["white", "white"]' data-background-colors='["green", "red"]' class="small"></div> <div data-type="label" class="cell small">Rolladen 2</div> </div> <div class="cell wider inline"> <div data-type="switch" data-device="EG_Wohnzimmer_Aktor_Rollladen_3" data-set-on="auf" data-set-off="zu" data-states='["auf","zu"]' data-icons='["fa-square-o", "fa-square-o"]' data-colors='["white", "white"]' data-background-colors='["green", "red"]' class="small"></div> <div data-type="label" class="cell small">Terrassentür</div> </div> <header>Schlafzimmer</header> <div data-type="push" data-device="OG_Eltern_Lampe_1" data-set-on="on-for-timer 30" class="cell" ></div> <div data-type="push" data-device="OG_Eltern_Lampe_2" data-set-on="on-for-timer 30" class="cell" ></div> <div data-type="select" data-device="Action_Media_Eltern_Timer" data-items='["0","30","45","60","90","120"]' class="wider" ></div> </div> </li> <!-- Abfallkalender Start --> <li data-row="7" data-col="1" data-sizex="4" data-sizey="1"> <div class="container" style="padding-top: 7px;"> <div data-type="symbol" data-device="data_muelltermine" data-get="Restmuell" data-icons='["fa-trash warn fa-blink","fa-trash warn"]' data-on-colors='["white","white"]' data-get-on='["0","2"]' data-background-icon="fa-circle" data-on-background-color="black" class="inline" > </div> <div data-type="symbol" data-device="data_muelltermine" data-get="BioTonne" data-icons='["fa-trash warn fa-blink","fa-trash warn"]' data-on-colors='["white","white"]' data-get-on='["0","2"]' data-background-icon="fa-circle" data-on-background-color="SaddleBrown" class="inline" > </div> <div data-type="symbol" data-device="data_muelltermine" data-get="GelbeTonne" data-icons='["fa-trash warn fa-blink","fa-trash warn"]' data-on-colors='["white","white"]' data-get-on='["0","2"]' data-background-icon="fa-circle" data-on-background-color="#ff9900" class="inline" > </div> <div data-type="symbol" data-device="data_muelltermine" data-get="BlaueTonne" data-icons='["fa-trash warn fa-blink","fa-trash warn"]' data-on-colors='["white","white"]' data-get-on='["0","2"]' data-background-icon="fa-circle" data-on-background-color="blue" class="inline" > </div> </div> </li> <!-- Abfallkalender End --> <!-- Anwesenheit Start --> <li data-row="7" data-col="5" data-sizex="3" data-sizey="1"> <div class="centered container" style="padding-top: 7px;"> <div class="container inline"> <div data-type="switch" data-device="rgr_Parents" data-set-on="home" data-set-off="absent" data-states='["home","absent"]' data-icons='["fa-home", "fa-car"]' data-colors='["white", "white"]' data-background-colors='["green", "red"]' class=""></div> </div> <div class="container inline"> <div data-type="switch" data-device="rr_R1" data-set-on="home" data-set-off="absent" data-states='["home","absent"]' data-icons='["fa-male", "fa-male"]' data-colors='["white", "white"]' data-background-colors='["green", "red"]' class=""></div> </div> <div class="container inline"> <div data-type="switch" data-device="rr_R2" data-set-on="home" data-set-off="absent" data-states='["home","absent"]' data-icons='["fa-female", "fa-female"]' data-colors='["white", "white"]' data-background-colors='["green", "red"]' class=""></div> </div> </div> </li> <!-- Anwesenheit End --> <li data-row="7" data-col="8" data-sizex="4" data-sizey="1"> <div class="container"> </div> </li> </ul> </div> </body> </html>
Tablet-UI Code-Beispiel für nav-left.html
<html> <body> <header>RÄUME</header> <div class="cell"> <div data-type="pagetab" data-url="/fhem/tablet/index.html" data-icon="fa-home" class="cell"></div> <div data-type="pagetab" data-url="/fhem/tablet/outdoor.html" data-icon="fa-sun-o" class="cell"></div> <div data-type="pagetab" data-url="/fhem/tablet/heating.html" data-icon="fa-fire" class="cell"></div> <div data-type="pagetab" data-url="/fhem/tablet/security.html" data-icon="fa-lock" class="cell"></div> <div data-type="pagetab" data-url="/fhem/tablet/weather.html" data-icon="fa-cloud" class="cell"></div> <div data-type="pagetab" data-url="/fhem/tablet/stats.html" data-icon="fa-bar-chart" class="cell"></div> </div> </body> </html>
Tablet-UI Code-Beispiel für heating.html
<!DOCTYPE html> <html> <head> <title>FHEM-Tablet-UI</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <meta name="widget_base_width" content="60"> <meta name="widget_base_height" content="65"> <meta name="mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="longpoll" content="1"> <!-- 1=longpoll;0=shortpoll every 30sec --> <meta name="debug" content="0"> <!-- 1=output to console;0=not output --> <meta name="gridster_disable" content="1"> <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" /> <!-- define your personal style here, it wont be overwritten --> <link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui-user.css" /> <script type="text/javascript" src="/fhem/pgm2/jquery.min.js"></script> <script type="text/javascript" src="/fhem/tablet/lib/jquery.knob.mod.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> </head> <body> <div data-type="clicksound" data-sound='["ion-tap", "ion-water-droplet-2", "ion-button-tiny", "ion-cd-tray", "ion-water-droplet-3"]' data-bind-to='["+knob", "+circlemenu-outer", "+button", "+circlemenu-center", "+slider"]' data-length='[200,300,200,1400,200]' data-volume="70" ></div> <div class="gridster"> <ul> <li data-row="1" data-col="1" data-sizex="1" data-sizey="6" data-template="/fhem/tablet/nav_left.html"></li> <li data-row="1" data-col="2" data-sizex="1" data-sizey="4"> <header>Wohnz.</header> <div class="container"> <div data-type="label" data-device="EG_Wohnzimmer_Sensor_Thermostat_Climate" data-get="measured-temp" data-unit="%B0C%0A" class="large top-space"> </div> <div data-type="label" class="darker small">Ist-Temperatur</div> <div data-type="label" data-device="EG_Wohnzimmer_Sensor_Thermostat_Climate" data-get="desired-temp" data-unit="%B0C%0A" class="large top-space"> </div> <div data-type="label" class="darker small">Soll-Temperatur</div> <div data-type="label" data-device="EG_Wohnzimmer_Sensor_Thermostat_Climate" data-get="humidity" data-unit="%" class="large top-space"> </div> <div data-type="label" class="darker small">Luft-Feuchtigkeit</div> <div data-type="label" data-device="EG_Wohnzimmer_Sensor_HKThermostat_01_Clima" data-get="ValvePosition" data-unit="%" class="large top-space"> </div> <div data-type="label" class="darker small">Ventil</div> </div> </li> <li data-row="1" data-col="4" data-sizex="1" data-sizey="4"> <header>Flur</header> <div class="container"> <div data-type="label" data-device="EG_Flur_Sensor_Thermostat_Climate" data-get="measured-temp" data-unit="%B0C%0A" class="large top-space"> </div> <div data-type="label" class="darker small">Ist-Temperatur</div> <div data-type="label" data-device="EG_Flur_Sensor_Thermostat_Climate" data-get="desired-temp" data-unit="%B0C%0A" class="large top-space"> </div> <div data-type="label" class="darker small">Soll-Temperatur</div> <div data-type="label" data-device="EG_Flur_Sensor_Thermostat_Climate" data-get="humidity" data-unit="%" class="large top-space"> </div> <div data-type="label" class="darker small">Luft-Feuchtigkeit</div> <div data-type="label" data-device="EG_Flur_Sensor_HKThermostat_01_Clima" data-get="ValvePosition" data-unit="%" class="large top-space"> </div> <div data-type="label" class="darker small">Ventil</div> </div> </li> <li data-row="1" data-col="3" data-sizex="1" data-sizey="4"> <header>Eltern</header> <div class="container"> <div data-type="label" data-device="OG_Eltern_Sensor_Thermostat_Climate" data-get="measured-temp" data-unit="%B0C%0A" class="large top-space"> </div> <div data-type="label" class="darker small">Ist-Temperatur</div> <div data-type="label" data-device="OG_Eltern_Sensor_Thermostat_Climate" data-get="desired-temp" data-unit="%B0C%0A" class="large top-space"> </div> <div data-type="label" class="darker small">Soll-Temperatur</div> <div data-type="label" data-device="OG_Eltern_Sensor_Thermostat_Climate" data-get="humidity" data-unit="%" class="large top-space"> </div> <div data-type="label" class="darker small">Luft-Feuchtigkeit</div> <div data-type="label" data-device="OG_Eltern_Sensor_HKThermostat_01_Clima" data-get="ValvePosition" data-unit="%" class="large top-space"> </div> <div data-type="label" class="darker small">Ventil</div> </div> </li> <li data-row="1" data-col="4" data-sizex="1" data-sizey="4"> <header>Bad</header> <div class="container"> <div data-type="label" data-device="OG_Bad_Sensor_Thermostat_Climate" data-get="measured-temp" data-unit="%B0C%0A" class="large top-space"> </div> <div data-type="label" class="darker small">Ist-Temperatur</div> <div data-type="label" data-device="OG_Bad_Sensor_Thermostat_Climate" data-get="desired-temp" data-unit="%B0C%0A" class="large top-space"> </div> <div data-type="label" class="darker small">Soll-Temperatur</div> <div data-type="label" data-device="OG_Bad_Sensor_Thermostat_Climate" data-get="humidity" data-unit="%" class="large top-space"> </div> <div data-type="label" class="darker small">Luft-Feuchtigkeit</div> <div data-type="label" data-device="OG_Bad_Sensor_HKThermostat_01_Clima" data-get="ValvePosition" data-unit="%" class="large top-space"> </div> <div data-type="label" class="darker small">Ventil</div> </div> </li> <li data-row="1" data-col="6" data-sizex="1" data-sizey="4"> <header>Kind</header> <div class="container"> <div data-type="label" data-device="OG_Kind_Sensor_Thermostat_Climate" data-get="measured-temp" data-unit="%B0C%0A" class="large top-space"> </div> <div data-type="label" class="darker small">Ist-Temperatur</div> <div data-type="label" data-device="OG_Kind_Sensor_Thermostat_Climate" data-get="desired-temp" data-unit="%B0C%0A" class="large top-space"> </div> <div data-type="label" class="darker small">Soll-Temperatur</div> <div data-type="label" data-device="OG_Kind_Sensor_Thermostat_Climate" data-get="humidity" data-unit="%" class="large top-space"> </div> <div data-type="label" class="darker small">Luft-Feuchtigkeit</div> <div data-type="label" data-device="OG_Kind_Sensor_HKThermostat_01_Clima" data-get="ValvePosition" data-unit="%" class="large top-space"> </div> <div data-type="label" class="darker small">Ventil</div> </div> </li> <li data-row="1" data-col="7" data-sizex="1" data-sizey="4"> <header>Gästez.</header> <div class="container"> <div data-type="label" data-device="OG_Gaestezimmer_Sensor_HKThermostat_01_Clima" data-get="measured-temp" data-unit="%B0C%0A" class="large top-space"> </div> <div data-type="label" class="darker small">Ist-Temperatur</div> <div data-type="label" data-device="OG_Gaestezimmer_Sensor_HKThermostat_01_Clima" data-get="desired-temp" data-unit="%B0C%0A" class="large top-space"> </div> <div data-type="label" class="darker small">Soll-Temperatur</div> <div data-type="label" data-device="OG_Gaestezimmer_Sensor_HKThermostat_01_Clima" data-get="humidity" data-unit="%" class="large top-space">- </div> <div data-type="label" class="darker small">Luft-Feuchtigkeit</div> <div data-type="label" data-device="OG_Gaestezimmer_Sensor_HKThermostat_01_Clima" data-get="ValvePosition" data-unit="%" class="large top-space"> </div> <div data-type="label" class="darker small">Ventil</div> </div> </li> <li data-row="1" data-col="8" data-sizex="1" data-sizey="4"> <header>Büro</header> <div class="container"> <div data-type="label" data-device="EG_Buero_Sensor_HKThermostat_01_Clima" data-get="measured-temp" data-unit="%B0C%0A" class="large top-space"> </div> <div data-type="label" class="darker small">Ist-Temperatur</div> <div data-type="label" data-device="EG_Buero_Sensor_HKThermostat_01_Clima" data-get="desired-temp" data-unit="%B0C%0A" class="large top-space"> </div> <div data-type="label" class="darker small">Soll-Temperatur</div> <div data-type="label" data-device="EG_Buero_Sensor_HKThermostat_01_Clima" data-get="humidity" data-unit="%" class="large top-space">- </div> <div data-type="label" class="darker small">Luft-Feuchtigkeit</div> <div data-type="label" data-device="EG_Buero_Sensor_HKThermostat_01_Clima" data-get="ValvePosition" data-unit="%" class="large top-space"> </div> <div data-type="label" class="darker small">Ventil</div> </div> </li> <li data-row="3" data-col="2" data-sizex="3" data-sizey="1"> <header>Fenster & Türen</header> <div class="container"> <div data-type="symbol" data-device="EG_Flur_Sensor_Eingangstuer" data-get-on='["open","closed"]' data-icons='["ftui-door warn","ftui-door"]' data-on-colors='["#999","#555"]' class="narrow"> </div> <div data-type="label" class="narrow darker small">Eingangstür</div> </div> </li> </ul> </div> </body> </html>
The post FHEM Dashboard – Tablet-UI Code-Beispiele appeared first on krannich Hausautomation.