Hallo,
ich bekomme keine Anzeige des Clock-Widget in Tablet Ui mit:
<div class="red" data-type="clock" data-format="H:i" data-interval="100"></div>
Hat jemand eine Idee?
Sollte es nicht eher so aussehen:
<div data-type="clock" data-format="H:i" class="red"></div>
(Wiki (https://wiki.fhem.de/wiki/FTUI_Widget_Clock))
Ansonsten mehr Infos wünschenswert. Zb die index.html mit den header-informationen und den eingebundenen scripten und CSS.
Hier der Code mit nachgestellter class. Immer noch keine Darstellung.
<!DOCTYPE html>
<html>
<head>
<!--
/* FHEM tablet ui */
/*
* UI builder framework for FHEM
*
* Version: 2.6.*
* 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_disable' content='1'>
<meta name='gridster_resize' content='0'>
<meta name='debug' content='2'>
<meta name='toast' content='0'>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- link rel="stylesheet" href="css/fhem-darkblue-ui.css" / -->
<!--link rel="stylesheet" href="css/ftui-bright-mint-ui.css" / -->
<!-- define your personal style here, it wont be overwritten -->
<!-- link rel="stylesheet" href="css/fhem-green-ui.css" / -->
<link rel="stylesheet" href="css/fhem-tablet-user-ui.css"/>
<script src="js/fhem-tablet-ui.js" defer></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<!-- 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-Dev</title>
</head>
<body>
<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="2" data-sizey="6">
<div class="big">
<header>Sonnenschutz</header>
</div>
<div class="col-1-1">
<div class="top-space big">Rolladen</div>
<div class="bigger doublebox-v">
<div data-type="push" data-device="AlleRolladen"
data-icon="fa-chevron-up" data-background-icon="fa-circle"
data-set-on="auf" data-get="state" data-get-on="on">
</div>
<div data-type="push" data-device="AlleRolladen"
data-icon="fa-chevron-down" data-background-icon="fa-circle"
data-set-on="ab" data-get="state" data-get-on="off" class="top-space">
</div>
</div>
</div>
</div>
</li>
<li data-row="1" data-col="3" data-sizex="2" data-sizey="4">
<div class="big">
<header>Ammersee</header>
</div>
<div class="col-1-1">
<div class="top-space big">Seetemperatur</div>
<div class="lightblue great bold" data-type="label"
data-device="AmmerseeTemp"
data-get="Wassertemperatur"
data-unit=" °C"></div>
<div class="top-space big">Luftfeuchtigkeit</div>
<div class="lightblue great bold" data-type="label"
data-device="netatmo_M02_00_00_27_31_70"
data-get="humidity"
data-unit=" %"></div>
<div class="top-space big">Wind</div>
<div class="great bold" data-type="label"
data-device="netatmo_forecast"
data-get="windstrength"
data-unit=" km/h"></div>
</div>
</li>
<li data-row="1" data-col="5" data-sizex="3" data-sizey="1">
<div class="big">
<header>Uhrzeit</header>
</div>
<div data-type="clock" data-format="H:i" class="red"></div>
</li>
<li data-row="2" data-col="5" data-sizex="3" data-sizey="3">
<div class="big">
<header>Temperatur</header>
</div>
<div class="col-1-1">
<div class="top-space big">Außenluft</div>
<div class="red great bold" data-type="label"
data-device="netatmo_M02_00_00_27_31_70"
data-get="temperature"
data-unit=" °C"></div>
<div class="top-space big">von - bis</div>
<div class="lightblue inline tall"
data-type="label" data-device="netatmo_forecast"
data-get="fc0_temp_min"
data-unit=" °C"></div> bis
<div class="red inline tall"
data-type="label" data-device="netatmo_forecast"
data-get="fc0_temp_max"
data-unit=" °C"></div>
</div>
</li>
<li data-row="1" data-col="8" data-sizex="2" data-sizey="4">
<div class="big">
<header>Regen</header>
</div>
<div class="col-1-1">
<div class="top-space big">letzte Stunde</div>
<div class="lightblue great bold" data-type="label"
data-device="netatmo_M05_00_00_03_81_70"
data-fix="1"
data-get="rain_hour"
data-unit=" mm"></div>
<div class="top-space big">heute gemessen</div>
<div class="lightblue great bold" data-type="label"
data-device="netatmo_M05_00_00_03_81_70"
data-get="rain_day"
data-unit=" mm"></div>
<div class="top-space big">Prognose</div>
<div class="lightblue great bold" data-type="label"
data-device="netatmo_forecast"
data-get="fc0_rain"
data-unit=" mm"></div>
</div>
</li>
<li data-row="4" data-col="3" data-sizex="7" data-sizey="2">
<div class="big">
<header>Vorhersage</header>
</div>
<div class="sheet">
<div class="row">
<div class="col-1-3">
<div data-type="label" class="cell top-space big">morgen</div>
<!--- <div data-type="weather" data-device="YahooWetter" data-get="fc2_condition" data-imageset="kleinklima" class="mini cell"></div>
<div data-type="label" data-device="YahooWetter" data-get="fc2_condition" class="cell top-narrow"></div>-->
<div data-type="label" data-device="netatmo_forecast" data-get="fc1_temp_min" data-unit="%B0C%0A" class="inline cell tall" data-limits='[-50,0]' data-colors='["#5858FA","white"]'></div> -
<div data-type="label" data-device="netatmo_forecast" data-get="fc1_temp_max" data-unit="%B0C%0A" class="inline cell tall" data-limits='[-50,0]' data-colors='["#5858FA","white"]'></div>
</div>
<div class="col-1-3">
<div data-type="label" class="cell top-space big">übermorgen</div>
<!--- <div data-type="weather" data-device="YahooWetter" data-get="fc3_condition" data-imageset="kleinklima" class="cell mini"></div>
<div data-type="label" data-device="YahooWetter" data-get="fc3_condition" class="cell top-narrow"></div>
-->
<div data-type="label" data-device="netatmo_forecast" data-get="fc2_temp_min" data-unit="%B0C%0A" class="inline cell tall" data-limits='[-50,0]' data-colors='["#5858FA","white"]'></div> -
<div data-type="label" data-device="netatmo_forecast" data-get="fc2_temp_max" data-unit="%B0C%0A" class="inline cell tall" data-limits='[-50,0]' data-colors='["#5858FA","white"]'></div>
</div>
<div class="col-1-3">
<div data-type="label" class="cell top-space big">drübermorgen</div>
<!--- <div data-type="weather" data-device="YahooWetter" data-get="fc4_condition" data-imageset="kleinklima" class="cell mini"></div>
<div data-type="label" data-device="YahooWetter" data-get="fc4_condition" class="cell top-narrow"></div>
-->
<div data-type="label" data-device="netatmo_forecast" data-get="fc3_temp_min" data-unit="%B0C%0A" class="inline cell tall" data-limits='[-50,0]' data-colors='["#5858FA","white"]'></div> -
<div data-type="label" data-device="netatmo_forecast" data-get="fc3_temp_max" data-unit="%B0C%0A" class="inline cell tall" data-limits='[-50,0]' data-colors='["#5858FA","white"]'></div>
</div>
</div>
</div>
</li>
</ul>
</div>
</body>
</html>
Der HTMl-Code ist schlecht zu lesen - aber sieht für mich erstmal augenscheinlich ok aus.
Kannst du testhalber mal eine leere (aber inklusive der ganzen header-information) index.html anlegen indem nur das clock widget ist?
Es kann sein, dass du noch die lib/jquery.min.js einbinden musst - dies ist aber jetzt hier nur geraten.
Welchen Browswer nutzt du zur Anzeige des FTUI?
Hallo yersinia,
hier reduziert.....
<!DOCTYPE html>
<html>
<head>
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<meta name='gridster_disable' content='1'>
<meta name='gridster_resize' content='0'>
<meta name='debug' content='2'>
<meta name='toast' content='0'>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="stylesheet" href="css/fhem-tablet-user-ui.css"/>
<script src="js/fhem-tablet-ui.js" defer></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>FHEM-Tablet-UI-Dev</title>
</head>
<body>
<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="5" data-sizey="2">
<div class="big">
<header>Uhrzeit</header>
</div>
<div data-type="clock" data-format="H:i" class="red"></div>
</li>
</ul>
</div>
</body>
</html>
Zitat von: yersinia am 10 September 2019, 10:00:03Kannst du testhalber mal eine leere (aber inklusive der ganzen header-information) index.html anlegen indem nur das clock widget ist?
Kannst du diese reduzierte index.html mal ausführen und schauen ob es dann läuft?
wie gesagt:
Zitat von: yersinia am 10 September 2019, 10:00:03Es kann sein, dass du noch die lib/jquery.min.js einbinden musst - dies ist aber jetzt hier nur geraten.
Zitat von: yersinia am 10 September 2019, 10:00:03Welchen Browswer nutzt du zur Anzeige des FTUI?
EDIT: versuche mal dies:
<!DOCTYPE html>
<html>
<head>
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<meta name='gridster_disable' content='1'>
<meta name='gridster_resize' content='0'>
<meta name='debug' content='2'>
<meta name='toast' content='0'>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="stylesheet" href="css/fhem-tablet-user-ui.css" />
<link rel="stylesheet" href="lib/jquery.gridster.min.css" type="text/css" />
<script src="../pgm2/jquery.min.js"></script>
<script src="js/fhem-tablet-ui.js" defer></script>
<title>FHEM-Tablet-UI-Dev</title>
</head>
<body>
<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="5" data-sizey="2">
<header class="big">Uhrzeit</header>
<div data-type="clock" data-format="H:i" class="red"></div>
</li>
</ul>
</div>
</body>
</html>Dabei habe ich bisher nur
<link rel="stylesheet" href="lib/jquery.gridster.min.css" type="text/css" />
<script src="../pgm2/jquery.min.js"></script>ergänzt.