Hi,
ich hab ein Problem mit dem Widget Chart, welches ich nicht ganz verstehe.
Wenn meine index.html so aussieht ist alles ok (siehe ok.png):
<!DOCTYPE html>
<html>
<head>
<!--
/* FHEM tablet ui */
/*
* UI builder framework for FHEM
*
* Version: 2.5.*
* URL: https://github.com/knowthelist/fhem-tablet-ui
*
* Copyright (c) 2015-2017 Mario Stephan <mstephan@shared-files.de>
* Under MIT License (http://www.opensource.org/licenses/mit-license.php)
*
* - create a new folder named 'tablet' in /<fhem-path>/www
* - copy all files incl. sub folders into /<fhem-path>/www/tablet
* - add 'define TABLETUI HTTPSRV ftui ./www/tablet Tablet' in fhem.cfg
* - Tadaaa! A new fhem ui in http://<fhem-url>:8083/fhem/tablet/
*/
-->
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<!-- define your personal style here, it wont be overwritten -->
<!-- link rel="stylesheet" href="css/fhem-green-ui.css" / -->
<!-- link rel="stylesheet" href="css/fhem-tablet-ui-user.css" / -->
<script src="js/fhem-tablet-ui.js" defer></script>
<!-- Remove this line to enable for usage with WebViewControl
<script defer>var wvcDevices = {'12345': 'Tablet'}; var wvcUserCssFile="webviewcontrol.css"</script>
<script src="../pgm2/cordova-2.3.0.js" defer></script>
<script src="../pgm2/webviewcontrol.js" defer></script>
<!-- End for WebViewControl -->
<title>FHEM-Tablet-UI</title>
</head>
<body>
<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizey="3" data-sizex="7">
<header>LWP</header>
<div class="sheet">
<div data-type="chart"
data-device="LWP"
data-logdevice="FileLog_heizung"
data-logfile="-"
data-columnspec='["4:/dhwCircuits/dhw1/actualTemp","4:/system/sensors/temperatures/outdoor_t1","4:/system/sensors/temperatures/supply_t1","4:/system/sensors/temperatures/return","4:/heatSources/actualModulation","4:/heatingCircuits/hc1/actualSupplyTemperature"]'
data-style='["ftui l1","ftui l2","ftui l0","ftui l4","ftui l5fill","ftui l6"]'
data-uaxis='["primary","primary","primary","primary","secondary","primary"]'
data-legend='["WW","AT","VL","RL","Modul","VL HK"]'
data-showlegend="true"
data-yunit="°C"
data-ytext="Temperature"
data-minvalue="-10"
data-maxvalue="50"
data-yunit_sec="%"
data-ytext_sec="Prozent"
data-minvalue_sec="0"
data-maxvalue_sec="100"
data-cursorgroup="1"
data-scrollgroup="1"
data-xticks="auto"
></div>
</div>
</div>
</li>
<li data-row="4" data-col="4" data-sizey="2" data-sizex="4">
<header>MULTIMEDIA</header>
<div class="sheet">
<div class="row-40">
<div class="cell">
<!--right down -->
<div class="sheet">
<div class="row">
<div class="cell">
<div data-type="switch" data-device="Fernsehen" data-icon="fa-film"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</body>
</html>
wenn ich den Teil mit dem Multimedia aus der index.html entferne:
<!DOCTYPE html>
<html>
<head>
<!--
/* FHEM tablet ui */
/*
* UI builder framework for FHEM
*
* Version: 2.5.*
* URL: https://github.com/knowthelist/fhem-tablet-ui
*
* Copyright (c) 2015-2017 Mario Stephan <mstephan@shared-files.de>
* Under MIT License (http://www.opensource.org/licenses/mit-license.php)
*
* - create a new folder named 'tablet' in /<fhem-path>/www
* - copy all files incl. sub folders into /<fhem-path>/www/tablet
* - add 'define TABLETUI HTTPSRV ftui ./www/tablet Tablet' in fhem.cfg
* - Tadaaa! A new fhem ui in http://<fhem-url>:8083/fhem/tablet/
*/
-->
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<!-- define your personal style here, it wont be overwritten -->
<!-- link rel="stylesheet" href="css/fhem-green-ui.css" / -->
<!-- link rel="stylesheet" href="css/fhem-tablet-ui-user.css" / -->
<script src="js/fhem-tablet-ui.js" defer></script>
<!-- Remove this line to enable for usage with WebViewControl
<script defer>var wvcDevices = {'12345': 'Tablet'}; var wvcUserCssFile="webviewcontrol.css"</script>
<script src="../pgm2/cordova-2.3.0.js" defer></script>
<script src="../pgm2/webviewcontrol.js" defer></script>
<!-- End for WebViewControl -->
<title>FHEM-Tablet-UI</title>
</head>
<body>
<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizey="3" data-sizex="7">
<header>LWP</header>
<div class="sheet">
<div data-type="chart"
data-device="LWP"
data-logdevice="FileLog_heizung"
data-logfile="-"
data-columnspec='["4:/dhwCircuits/dhw1/actualTemp","4:/system/sensors/temperatures/outdoor_t1","4:/system/sensors/temperatures/supply_t1","4:/system/sensors/temperatures/return","4:/heatSources/actualModulation","4:/heatingCircuits/hc1/actualSupplyTemperature"]'
data-style='["ftui l1","ftui l2","ftui l0","ftui l4","ftui l5fill","ftui l6"]'
data-uaxis='["primary","primary","primary","primary","secondary","primary"]'
data-legend='["WW","AT","VL","RL","Modul","VL HK"]'
data-showlegend="true"
data-yunit="°C"
data-ytext="Temperature"
data-minvalue="-10"
data-maxvalue="50"
data-yunit_sec="%"
data-ytext_sec="Prozent"
data-minvalue_sec="0"
data-maxvalue_sec="100"
data-cursorgroup="1"
data-scrollgroup="1"
data-xticks="auto"
></div>
</div>
</div>
</li>
</ul>
</div>
</body>
</html>
wird anstelle der Buttons nur mehr ein Rechteck angezeigt (siehe falsch.png).
Warum hat das Wegnehmen des Multimedia Teils einen Einfluss auf mein Chart Widget?
die beiden HTMLs sind identisch ???
oh sorry... hab die zweite korrigiert...
die nicht funktionierende sieht so aus:
<!DOCTYPE html>
<html>
<head>
<!--
/* FHEM tablet ui */
/*
* UI builder framework for FHEM
*
* Version: 2.5.*
* URL: https://github.com/knowthelist/fhem-tablet-ui
*
* Copyright (c) 2015-2017 Mario Stephan <mstephan@shared-files.de>
* Under MIT License (http://www.opensource.org/licenses/mit-license.php)
*
* - create a new folder named 'tablet' in /<fhem-path>/www
* - copy all files incl. sub folders into /<fhem-path>/www/tablet
* - add 'define TABLETUI HTTPSRV ftui ./www/tablet Tablet' in fhem.cfg
* - Tadaaa! A new fhem ui in http://<fhem-url>:8083/fhem/tablet/
*/
-->
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<!-- define your personal style here, it wont be overwritten -->
<!-- link rel="stylesheet" href="css/fhem-green-ui.css" / -->
<!-- link rel="stylesheet" href="css/fhem-tablet-ui-user.css" / -->
<script src="js/fhem-tablet-ui.js" defer></script>
<!-- Remove this line to enable for usage with WebViewControl
<script defer>var wvcDevices = {'12345': 'Tablet'}; var wvcUserCssFile="webviewcontrol.css"</script>
<script src="../pgm2/cordova-2.3.0.js" defer></script>
<script src="../pgm2/webviewcontrol.js" defer></script>
<!-- End for WebViewControl -->
<title>FHEM-Tablet-UI</title>
</head>
<body>
<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizey="3" data-sizex="7">
<header>LWP</header>
<div class="sheet">
<div data-type="chart"
data-device="LWP"
data-logdevice="FileLog_heizung"
data-logfile="-"
data-columnspec='["4:/dhwCircuits/dhw1/actualTemp","4:/system/sensors/temperatures/outdoor_t1","4:/system/sensors/temperatures/supply_t1","4:/system/sensors/temperatures/return","4:/heatSources/actualModulation","4:/heatingCircuits/hc1/actualSupplyTemperature"]'
data-style='["ftui l1","ftui l2","ftui l0","ftui l4","ftui l5fill","ftui l6"]'
data-uaxis='["primary","primary","primary","primary","secondary","primary"]'
data-legend='["WW","AT","VL","RL","Modul","VL HK"]'
data-showlegend="true"
data-yunit="°C"
data-ytext="Temperature"
data-minvalue="-10"
data-maxvalue="50"
data-yunit_sec="%"
data-ytext_sec="Prozent"
data-minvalue_sec="0"
data-maxvalue_sec="100"
data-cursorgroup="1"
data-scrollgroup="1"
data-xticks="auto"
></div>
</div>
</div>
</li>
</ul>
</div>
</body>
</html>
du hast bei dem nicht funktionierenden ein </div> zu viel drin
der code OHNE dem </div>
<!DOCTYPE html>
<html>
<head>
<!--
/* FHEM tablet ui */
/*
* UI builder framework for FHEM
*
* Version: 2.5.*
* URL: https://github.com/knowthelist/fhem-tablet-ui
*
* Copyright (c) 2015-2017 Mario Stephan <mstephan@shared-files.de>
* Under MIT License (http://www.opensource.org/licenses/mit-license.php)
*
* - create a new folder named 'tablet' in /<fhem-path>/www
* - copy all files incl. sub folders into /<fhem-path>/www/tablet
* - add 'define TABLETUI HTTPSRV ftui ./www/tablet Tablet' in fhem.cfg
* - Tadaaa! A new fhem ui in http://<fhem-url>:8083/fhem/tablet/
*/
-->
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<!-- define your personal style here, it wont be overwritten -->
<!-- link rel="stylesheet" href="css/fhem-green-ui.css" / -->
<!-- link rel="stylesheet" href="css/fhem-tablet-ui-user.css" / -->
<script src="js/fhem-tablet-ui.js" defer></script>
<!-- Remove this line to enable for usage with WebViewControl
<script defer>var wvcDevices = {'12345': 'Tablet'}; var wvcUserCssFile="webviewcontrol.css"</script>
<script src="../pgm2/cordova-2.3.0.js" defer></script>
<script src="../pgm2/webviewcontrol.js" defer></script>
<!-- End for WebViewControl -->
<title>FHEM-Tablet-UI</title>
</head>
<body>
<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizey="3" data-sizex="7">
<header>LWP</header>
<div class="sheet">
<div data-type="chart"
data-device="LWP"
data-logdevice="FileLog_heizung"
data-logfile="-"
data-columnspec='["4:/dhwCircuits/dhw1/actualTemp","4:/system/sensors/temperatures/outdoor_t1","4:/system/sensors/temperatures/supply_t1","4:/system/sensors/temperatures/return","4:/heatSources/actualModulation","4:/heatingCircuits/hc1/actualSupplyTemperature"]'
data-style='["ftui l1","ftui l2","ftui l0","ftui l4","ftui l5fill","ftui l6"]'
data-uaxis='["primary","primary","primary","primary","secondary","primary"]'
data-legend='["WW","AT","VL","RL","Modul","VL HK"]'
data-showlegend="true"
data-yunit="°C"
data-ytext="Temperature"
data-minvalue="-10"
data-maxvalue="50"
data-yunit_sec="%"
data-ytext_sec="Prozent"
data-minvalue_sec="0"
data-maxvalue_sec="100"
data-cursorgroup="1"
data-scrollgroup="1"
data-xticks="auto">
</div>
</div>
</li>
</ul>
</div>
</body>
</html>
Zitat von: MKeY am 30 Januar 2020, 18:05:24
du hast bei dem nicht funktionierenden ein </div> zu viel drin
der code OHNE dem </div>
<!DOCTYPE html>
<html>
<head>
<!--
/* FHEM tablet ui */
/*
* UI builder framework for FHEM
*
* Version: 2.5.*
* URL: https://github.com/knowthelist/fhem-tablet-ui
*
* Copyright (c) 2015-2017 Mario Stephan <mstephan@shared-files.de>
* Under MIT License (http://www.opensource.org/licenses/mit-license.php)
*
* - create a new folder named 'tablet' in /<fhem-path>/www
* - copy all files incl. sub folders into /<fhem-path>/www/tablet
* - add 'define TABLETUI HTTPSRV ftui ./www/tablet Tablet' in fhem.cfg
* - Tadaaa! A new fhem ui in http://<fhem-url>:8083/fhem/tablet/
*/
-->
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<!-- define your personal style here, it wont be overwritten -->
<!-- link rel="stylesheet" href="css/fhem-green-ui.css" / -->
<!-- link rel="stylesheet" href="css/fhem-tablet-ui-user.css" / -->
<script src="js/fhem-tablet-ui.js" defer></script>
<!-- Remove this line to enable for usage with WebViewControl
<script defer>var wvcDevices = {'12345': 'Tablet'}; var wvcUserCssFile="webviewcontrol.css"</script>
<script src="../pgm2/cordova-2.3.0.js" defer></script>
<script src="../pgm2/webviewcontrol.js" defer></script>
<!-- End for WebViewControl -->
<title>FHEM-Tablet-UI</title>
</head>
<body>
<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizey="3" data-sizex="7">
<header>LWP</header>
<div class="sheet">
<div data-type="chart"
data-device="LWP"
data-logdevice="FileLog_heizung"
data-logfile="-"
data-columnspec='["4:/dhwCircuits/dhw1/actualTemp","4:/system/sensors/temperatures/outdoor_t1","4:/system/sensors/temperatures/supply_t1","4:/system/sensors/temperatures/return","4:/heatSources/actualModulation","4:/heatingCircuits/hc1/actualSupplyTemperature"]'
data-style='["ftui l1","ftui l2","ftui l0","ftui l4","ftui l5fill","ftui l6"]'
data-uaxis='["primary","primary","primary","primary","secondary","primary"]'
data-legend='["WW","AT","VL","RL","Modul","VL HK"]'
data-showlegend="true"
data-yunit="°C"
data-ytext="Temperature"
data-minvalue="-10"
data-maxvalue="50"
data-yunit_sec="%"
data-ytext_sec="Prozent"
data-minvalue_sec="0"
data-maxvalue_sec="100"
data-cursorgroup="1"
data-scrollgroup="1"
data-xticks="auto">
</div>
</div>
</li>
</ul>
</div>
</body>
</html>
Gleiches Ergebnis ohne dem "</div>" ...
hast recht, wie immer sollte man es selber testen...
<!DOCTYPE html>
<html>
<head>
<!--
/* FHEM tablet ui */
/*
* UI builder framework for FHEM
*
* Version: 2.5.*
* URL: https://github.com/knowthelist/fhem-tablet-ui
*
* Copyright (c) 2015-2017 Mario Stephan <mstephan@shared-files.de>
* Under MIT License (http://www.opensource.org/licenses/mit-license.php)
*
* - create a new folder named 'tablet' in /<fhem-path>/www
* - copy all files incl. sub folders into /<fhem-path>/www/tablet
* - add 'define TABLETUI HTTPSRV ftui ./www/tablet Tablet' in fhem.cfg
* - Tadaaa! A new fhem ui in http://<fhem-url>:8083/fhem/tablet/
*/
-->
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<meta name="gridster_base_width" content="116">
<meta name="gridster_base_height" content="131">
<!-- define your personal style here, it wont be overwritten -->
<!-- link rel="stylesheet" href="css/fhem-green-ui.css" / -->
<!-- link rel="stylesheet" href="css/fhem-tablet-ui-user.css" / -->
<link rel="stylesheet" href="lib/font-awesome.min.css" />
<script src="js/fhem-tablet-ui.js" defer></script>
<!-- Remove this line to enable for usage with WebViewControl
<script defer>var wvcDevices = {'12345': 'Tablet'}; var wvcUserCssFile="webviewcontrol.css"</script>
<script src="../pgm2/cordova-2.3.0.js" defer></script>
<script src="../pgm2/webviewcontrol.js" defer></script>
<!-- End for WebViewControl -->
<title>FHEM-Tablet-UI</title>
</head>
<body>
<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizey="3" data-sizex="7">
<header>LWP</header>
<div class="sheet">
<div data-type="chart"
data-device="LWP"
data-logdevice="FileLog_heizung"
data-logfile="-"
data-columnspec='["4:/dhwCircuits/dhw1/actualTemp","4:/system/sensors/temperatures/outdoor_t1","4:/system/sensors/temperatures/supply_t1","4:/system/sensors/temperatures/return","4:/heatSources/actualModulation","4:/heatingCircuits/hc1/actualSupplyTemperature"]'
data-style='["ftui l1","ftui l2","ftui l0","ftui l4","ftui l5fill","ftui l6"]'
data-uaxis='["primary","primary","primary","primary","secondary","primary"]'
data-legend='["WW","AT","VL","RL","Modul","VL HK"]'
data-showlegend="true"
data-yunit="°C"
data-ytext="Temperature"
data-minvalue="-10"
data-maxvalue="50"
data-yunit_sec="%"
data-ytext_sec="Prozent"
data-minvalue_sec="0"
data-maxvalue_sec="100"
data-cursorgroup="true"
data-scrollgroup="true"
data-xticks="auto">
</div>
</div>
</li>
</ul>
</div>
</body>
</html>
Anmerkungen:
1. Damit gridster sinnvoll genutzt wird, musst du die höhe und breite eines elementes definieren.
2. FTUI bringt einige Icons-"Schriftarten" mit, die für die Darstellung genützt werden können. Diese werden automatisch beim Start des UI eingebunden, sobald ein entsprechendes Icon-Präfix im Code der Seite vorkommt.
Ich denke hier läuft es nicht ganz rund. Da du "nur" das Chart widget hast, habe ich oben noch den Verweis auf die Font-awesome bibliothek gemacht. In meiner Testumgebung geht das so.
Wow danke! funktioniert auch bei mir.
Diese Zeile behebt das Problem!
<link rel="stylesheet" href="lib/font-awesome.min.css" />
Vielen Dank für deine Hilfe!