Hallo,
ich habe seit längerem eine gut funktionierende Mobile Version nach meinem Gusto. Deshalb hab ich auch lange kein Update gemacht. Doch gestern hab ich es dann doch gemacht, und siehe da, es hat mir tatsächlich alles durcheinander gebracht. Siehe Anlage, einmal gut (vorher) und einmal schlecht (nach Update).
Nun als Laie frage ich mich natürlich, ob dies mit 2-3 Handgriffen wieder aktualisiert werden kann, oder ob ich erneut Wochen dran rumbasteln muss. Was meint ihr? Danke für Hilfe.
Lg C
Hier noch der Code der Seite.
index_mobile.html
<!DOCTYPE html>
<html>
<head>
<!--
/* FHEM tablet ui */
/*
* UI builder framework for FHEM
*
* Version: 2.2.3
* 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)
*
* - 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 charset="utf-8" />
<!--<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />-->
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi" />
<meta name="widget_base_width" content="84">
<meta name="widget_base_height" content="105">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="gridster_disable" content="1">
<meta name="longpoll" content="1">
<meta name='toast' content='0'>
<meta name="debug" content="6"> <!-- verbose level 1-6 = output to console;0 = not output -->
<meta name='toast_position' content='mid-center'>
<meta name="longpoll_filter" content=".*">
<!--<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="css/fhem-mobil-ui.css" />
<link rel="stylesheet" href="lib/font-awesome.min.css" />
<link rel="stylesheet" href="lib/jquery.toast.min.css" />
<link rel="stylesheet" href="lib/material-icons.min.css" />
<link rel="stylesheet" href="lib/openautomation.css" />
<!-- Widget WeekdayTimer -->
<link rel="stylesheet" href="css/fhem-tablet-ui-wdtimer.css" />
<link rel="stylesheet" href="lib/jquery.datetimepicker.css" />
<!-- define your personal style here, it wont be overwritten -->
<!-- link rel="stylesheet" href="css/fhem-green-ui.css" /
<link rel="stylesheet" href="lib/bootstrap.min.css" />
<link rel="stylesheet" href="/fhem/tablet/customfonts/thyraz-ftui-font/style.css">
<link rel="stylesheet" href="customfonts/thyraz-ftui-font/style.css">-->
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500" rel="stylesheet">
<link rel="stylesheet" href="css/fhem-mobil-ui-custom.css" />
<link rel="shortcut icon" href="favicon.ico">
<link rel="apple-touch-icon" href="touchico.png">
<script src="../pgm2/jquery.min.js"></script>
<!--<script src="lib/jquery.min.js"></script>-->
<script src="js/widget_wdtimer.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>Home</title>
<body>
<main id="panel" class="">
<div class="page default" id="content1"></div>
<div class="page" id="content2"></div>
<div class="page" id="content3"></div>
<div class="page" id="content4"></div>
<div class="page" id="content8"></div>
<footer>
<div class="tab-bar" >
<div class="tab-link" >
<div data-type="link"
data-load="#content1"
data-url="#tom_temp.html"
data-icon="ftui-thermo"
data-color="#555"
data-active-color="blue"
data-active-pattern=".*#tom_temp.html"
class="default small">
</div>
<span class="tab-label">Temps</span>
</div>
<div class="tab-link" >
<div data-type="link"
data-load="#content2"
data-url="#tom_licht.html"
data-icon="fa-lightbulb-o"
data-color="#555"
data-active-color="blue"
data-active-pattern=".*#tom_licht.html"
class="small">
</div>
<span class="tab-label">Licht</span>
</div>
<div class="tab-link" >
<div data-type="link"
data-load="#content3"
data-url="#tom_storen.html"
data-icon="mi-line_weight"
data-color="#555"
data-active-color="blue"
data-active-pattern=".*#tom_storen.html"
class="small">
</div>
<span class="tab-label">Storen</span>
</div>
<div class="tab-link" >
<div data-type="link"
data-load="#content4"
data-url="#tom_media.html"
data-icon="fa-music"
data-color="#555"
data-active-color="blue"
data-active-pattern=".*#tom_media.html"
class="small">
</div>
<span class="tab-label">Media</span>
</div>
<div class="tab-link" >
<div data-type="link"
data-load="#content8"
data-url="#tom_system.html"
data-icon="fa-cogs"
data-color="gray"
data-active-color="blue"
data-active-pattern=".*#tom_system.html"
class="small">
</div>
<span class="tab-label">System</span>
</div>
</div>
</footer>
</main>
</body>
</html>
temp.html
<!DOCTYPE html>
<html>
<head>
<title>Lüthi Home Temps</title></head>
<body>
<div class="page" id="content1">
<div class="card">
<!-- AUSSEN-->
<div class="sheet uline2">
<div><br></div>
<div class="row">
<div class="col-1-6">
<div data-type="switch"
data-icon="fa-thermometer"
data-color="blue"
data-background-icon=""
class="top-narrow">
</div>
</div>
<div class="col-5-6">
<div>
<div data-type="label"
class="left-align big red inlign">
Aussen
</div>
</div>
</div>
</div>
<div class="cell">
<div class="row left-space uline2">
<div class="col-1-5 left-align"></div>
<div class="col-1-5 left-align">Aktuell</div>
<div class="col-1-5 left-align">Max</div>
<div class="col-1-5 left-align thin">Min</div>
<div class="col-1-5 left-align thin"></div>
</div>
<div class="row left-space uline">
<div class="col-1-5 left-align">
<div data-type="label">
Gartenh.
</div>
</div>
<div class="col-1-5 left-align">
<div data-type="label"
data-device="Netatmo_Aussen"
data-get="temperature"
data-color="gray"
data-unit="°C"
data-background-icon=""
class="">
</div>
</div>
<div class="col-1-5 left-align">
<div data-type="label"
data-device="Netatmo_Aussen"
data-get="temp_max"
data-color="gray"
data-unit="°C"
data-background-icon=""
class="">
</div>
</div>
<div class="col-1-5 left-align">
<div data-type="label"
data-device="Netatmo_Aussen"
data-get="temp_min"
data-color="gray"
data-unit="°C"
data-background-icon=""
class="">
</div>
</div>
<div class="col-1-5 left-align">
<div></div>
</div>
</div>
<div class="row left-space uline">
<div class="col-1-5 left-align">
<div data-type="label">
Palme
</div>
</div>
<div class="col-1-5 left-align">
<div data-type="label"
data-device="PoolController"
data-get="Aussen"
data-part="1"
data-fix="1"
data-color="gray"
data-unit="°C"
class="">
</div>
</div>
<div class="col-1-5 left-align">
<div data-type="label"
data-device="Palme_Temp"
data-get="statTemperatureDayMax"
data-color="gray"
data-fix="1"
data-unit="°C"
data-background-icon=""
class="">
</div>
</div>
<div class="col-1-5 left-align">
<div data-type="label"
data-device="Palme_Temp"
data-get="statTemperatureDayMin"
data-color="gray"
data-fix="1"
data-unit="°C"
data-background-icon=""
class="">
</div>
</div>
<div class="col-1-5 left-align">
<div></div>
</div>
</div>
<div class="row left-space uline">
<div class="col-1-5 left-align">
<div data-type="label">
Pool
</div>
</div>
<div class="col-1-5 left-align">
<div data-type="label"
data-device="PoolController"
data-get="Pool"
data-part="1"
data-fix="1"
data-color="gray"
data-unit="°C"
class="">
</div>
</div>
<div class="col-1-5 left-align">
<div data-type="label"
data-device="Pool_Temp"
data-get="statTemperatureDayMax"
data-color="gray"
data-fix="1"
data-unit="°C"
data-background-icon=""
class="">
</div>
</div>
<div class="col-1-5 left-align">
<div data-type="label"
data-device="Pool_Temp"
data-get="statTemperatureDayMin"
data-color="gray"
data-fix="1"
data-unit="°C"
data-background-icon=""
class="">
</div>
</div>
<div class="col-1-5 left-align">
<div></div>
</div>
</div>
<div class="row left-space uline">
<div class="col-1-5 left-align">
<div data-type="label">
Wind
</div>
</div>
<div class="col-1-5 left-align">
<div data-type="label"
data-device="Netatmo_Wind"
data-get="windstrength"
data-color="gray"
data-unit="km/h"
class="">
</div>
</div>
<div class="col-1-5 left-align">
<div data-type="label"
data-device="Netatmo_Wind"
data-color="gray"
data-get="windstrength_max"
data-unit="km/h"
class="">
</div>
</div>
<div class="col-1-5 left-align">
<div></div>
</div>
<div class="col-1-5 left-align">
<div></div>
</div>
</div>
<div class="row left-space uline">
<div class="col-1-5 left-align">
<div data-type="label">
Regen
</div>
</div>
<div class="col-1-5 left-align">
<div data-type="label"
data-device="Netatmo_Regen"
data-get="rain_hour"
data-fix="1"
data-color="gray"
data-unit="mm"
class="">
</div>
</div>
<div class="col-1-5 left-align">
<div data-type="label"
data-device="Netatmo_Regen"
data-get="rain_day"
data-fix="1"
data-color="gray"
data-unit="mm"
class="">
</div>
</div>
<div class="col-1-5 left-align">
<div></div>
</div>
<div class="col-1-5 left-align">
<div></div>
</div>
</div>
<div class="row left-space uline">
<div class="col-1-5 left-align">
<div data-type="label">
Feuchte
</div>
</div>
<div class="col-1-5 left-align">
<div data-type="label"
data-device="Netatmo_Aussen"
data-get="humidity"
data-color="gray"
data-unit="%"
class="">
</div>
</div>
<div class="col-1-5 left-align">
<div></div>
</div>
<div class="col-1-5 left-align">
<div></div>
</div>
<div class="col-1-5 left-align">
<div></div>
</div>
</div>
<div class="row left-space uline">
<div class="col-1-5 left-align">
<div data-type="label">
Druck
</div>
</div>
<div class="col-1-5 left-align">
<div data-type="label"
data-device="Netatmo_SZ"
data-get="pressure"
data-color="gray"
data-fix="0"
data-unit=""
class="">
</div>
</div>
<div class="col-1-5 left-align">
<div></div>
</div>
<div class="col-1-5 left-align">
<div></div>
</div>
<div class="col-1-5 left-align">
<div></div>
</div>
</div>
<div class="row left-space uline">
<div class="col-1-5 left-align">
<div data-type="label">
Sonne
</div>
</div>
<div class="col-1-5 left-align">
<div data-type="label"
class="inline gray">↑
</div>
<div data-type="label"
data-device="Wunderground_Home"
data-get="sunrise"
data-color="gray"
data-unit=""
class="inline">
</div>
</div>
<div class="col-1-5 left-align">
<div data-type="label"
class="inline gray">↓
</div>
<div data-type="label"
data-device="Wunderground_Home"
data-get="sunset"
data-color="gray"
data-unit=""
class="inline">
</div>
</div>
<div class="col-1-5 left-align">
<div></div>
</div>
<div class="col-1-5 left-align">
<div></div>
</div>
</div>
<br>
<div class="row left-space gray">
<div class="hbox left">
<div data-type="label"
data-device="Netatmo_Aussen"
data-get="temperature"
data-substitution="toDate().ee()"
data-unit=""
data-color="gray"
class="timestamp small">
</div>
<div data-type="label"
data-device="Netatmo_Aussen"
data-get="temperature"
data-substitution="toDate().ddmm()"
data-unit=""
data-color="gray"
class="timestamp small">
</div>
<div data-type="label"
data-device="Netatmo_Aussen"
data-get="temperature"
data-substitution="toDate().hhmm()"
data-color="gray"
class="timestamp small">
</div>
</div>
</div>
</div>
</div>
<!-- INNEN -->
<div class="sheet bg-tomgray uline2">
<br>
<div class="row">
<div class="col-1-6">
<div data-type="switch"
data-icon="fa-thermometer"
data-color="blue"
data-background-icon=""
class="top-narrow">
</div>
</div>
<div class="col-5-6">
<div>
<div data-type="label"
class="left-align red big">
Innen
</div>
</div>
</div>
</div>
<div class="cell">
<div class="row left-space uline2">
<div class="col-1-5 left-align"></div>
<div class="col-1-5 left-align">Temp</div>
<div class="col-1-5 left-align">Feuchte</div>
<div class="col-1-5 left-align thin">CO2</div>
<div class="col-1-5 left-align thin">DB</div>
</div>
<div class="row left-space uline">
<div class="col-1-5 left-align">
<div data-type="label">
Wohnen
</div>
</div>
<div class="col-1-5 left-align">
<div data-type="label"
data-device="Netatmo_WZ"
data-get="temperature"
data-unit="°C"
data-limits='[0,19,30]'
data-colors='["blue","gray","red"]'>
</div>
</div>
<div class="col-1-5 left-align">
<div data-type="label"
data-device="Netatmo_WZ"
data-get="humidity"
data-unit="%"
data-limits='[0,60]'
data-colors='["gray","red"]'>
</div>
</div>
<div class="col-1-5 left-align">
<div data-type="label"
data-device="Netatmo_WZ"
data-get="co2"
data-unit=""
data-limits='[0,1000]'
data-colors='["gray","red"]'>
</div>
</div>
<div class="col-1-5 left-align">
<div></div>
</div>
</div>
<div class="row left-space uline">
<div class="col-1-5 left-align">
<div data-type="label">
Schlafen
</div>
</div>
<div class="col-1-5 left-align">
<div data-type="label"
data-device="Netatmo_SZ"
data-get="temperature"
data-unit="°C"
data-limits='[0,19,30]'
data-colors='["blue","gray","red"]'>
</div>
</div>
<div class="col-1-5 left-align">
<div data-type="label"
data-device="Netatmo_SZ"
data-get="humidity"
data-unit="%"
data-limits='[0,61]'
data-colors='["gray","red"]'>
</div>
</div>
<div class="col-1-5 left-align">
<div data-type="label"
data-device="Netatmo_SZ"
data-get="co2"
data-unit=""
data-limits='[0,1000]'
data-colors='["gray","red"]'>
</div>
</div>
<div class="col-1-5 left-align">
<div data-type="label"
data-device="Netatmo_SZ"
data-get="noise"
data-unit=""
data-limits='[0,50]'
data-colors='["gray","red"]'>
</div>
</div>
</div>
<div class="row left-space uline">
<div class="col-1-5 left-align">
<div data-type="label">
Büro
</div>
</div>
<div class="col-1-5 left-align">
<div data-type="label"
data-device="Netatmo_Buero"
data-get="temperature"
data-unit="°C"
data-limits='[0,19,30]'
data-colors='["blue","gray","red"]'>
</div>
</div>
<div class="col-1-5 left-align">
<div data-type="label"
data-device="Netatmo_Buero"
data-get="humidity"
data-unit="%"
data-limits='[0,60]'
data-colors='["gray","red"]'>
</div>
</div>
<div class="col-1-5 left-align">
<div data-type="label"
data-device="Netatmo_Buero"
data-get="co2"
data-unit=""
data-limits='[0,1000]'
data-colors='["gray","red"]'>
</div>
</div>
<div class="col-1-5 left-align">
<div></div>
</div>
</div>
<div class="row left-space uline">
<div class="col-1-5 left-align">
<div data-type="label">
Wein
</div>
</div>
<div class="col-1-5 left-align">
<div data-type="label"
data-device="Weinkeller_Klima"
data-get="temperature"
data-unit="°C"
data-limits='[0,19,30]'
data-colors='["blue","gray","red"]'>
</div>
</div>
<div class="col-1-5 left-align">
<div data-type="label"
data-device="Weinkeller_Klima"
data-get="humidity"
data-unit="%"
data-limits='[0,60]'
data-colors='["gray","red"]'>
</div>
</div>
<div class="col-1-5 left-align">
<div></div>
</div>
<div class="col-1-5 left-align">
<div></div>
</div>
</div>
<div class="row left-space uline">
<div class="col-1-5 left-align">
<div data-type="label">
Technik
</div>
</div>
<div class="col-1-5 left-align">
<div data-type="label"
data-device="Technik_Klima"
data-get="temperature"
data-unit="°C"
data-limits='[0,19,30]'
data-colors='["blue","gray","red"]'>
</div>
</div>
<div class="col-1-5 left-align">
<div data-type="label"
data-device="Technik_Klima"
data-get="humidity"
data-unit="%"
data-limits='[0,60]'
data-colors='["gray","red"]'>
</div>
</div>
<div class="col-1-5 left-align">
<div></div>
</div>
<div class="col-1-5 left-align">
<div></div>
</div>
</div>
<br>
<div class="row left-space gray">
<div class="hbox left">
<div data-type="label"
data-device="Netatmo_WZ"
data-get="temperature"
data-substitution="toDate().ee()"
data-unit=""
data-color="gray"
class="timestamp small">
</div>
<div data-type="label"
data-device="Netatmo_WZ"
data-get="temperature"
data-substitution="toDate().ddmm()"
data-unit=""
data-color="gray"
class="timestamp small">
</div>
<div data-type="label"
data-device="Netatmo_WZ"
data-get="temperature"
data-substitution="toDate().hhmm()"
data-color="gray"
class="timestamp small">
</div>
</div>
</div>
</div>
</div>
<!-- Pool -->
<div class="sheet uline2">
<br>
<div class="row">
<div class="col-1-6">
<div data-type="switch"
data-icon="fa-thermometer"
data-color="blue"
data-background-icon=""
class="top-narrow">
</div>
</div>
<div class="col-5-6">
<div>
<div data-type="label"
class="left-align red big">
Pool
</div>
</div>
</div>
</div>
<div class="cell">
<div class="row left-space uline2">
<div class="col-1-5 left-align"></div>
<div class="col-1-5 left-align">Wert</div>
<div class="col-1-5 left-align">Verbr</div>
<div class="col-1-5 left-align thin">Rest</div>
<div class="col-1-5 left-align thin"></div>
</div>
<div class="row left-space uline">
<div class="col-1-5 left-align">
<div data-type="label">
Wasser
</div>
</div>
<div class="col-1-5 left-align">
<div data-type="label"
data-device="PoolController"