Keine Anzeige von "clock"

weldel60 · 09 September 2019, 09:52:36

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?

yersinia · 09 September 2019, 11:19:20

Sollte es nicht eher so aussehen:

Code Auswählen

<div data-type="clock" data-format="H:i" class="red"></div>
(Wiki)

Ansonsten mehr Infos wünschenswert. Zb die index.html mit den header-informationen und den eingebundenen scripten und CSS.

weldel60 · 09 September 2019, 11:38:33

Hier der Code mit nachgestellter class. Immer noch keine Darstellung.

Code Auswählen


<!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=" &deg;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=" &deg;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=" &deg;C"></div> bis 
        <div class="red inline tall" 
        data-type="label" data-device="netatmo_forecast"
        data-get="fc0_temp_max" 
        data-unit=" &deg;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>

yersinia · 10 September 2019, 10:00:03

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?

weldel60 · 11 September 2019, 09:31:32

Hallo yersinia,

hier reduziert.....

Code Auswählen


<!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>

yersinia · 11 September 2019, 15:33:37

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:

Code Auswählen

<!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

Code Auswählen

    <link rel="stylesheet" href="lib/jquery.gridster.min.css" type="text/css" />

    <script src="../pgm2/jquery.min.js"></script>

ergänzt.

FHEM Forum

Keine Anzeige von "clock"

weldel60

yersinia

weldel60

yersinia

weldel60

yersinia