Trotz viel Lesens bin ich noch nicht fuendig geworden :
<!DOCTYPE html>
<html>
<head>
<!--
/* FHEM tablet ui - FTUI */
/**
* UI builder framework for FHEM
*
* Version: 3.0.0
*
* Copyright (c) 2015-2021 Mario Stephan <mstephan@shared-files.de>
* Under MIT License (http://www.opensource.org/licenses/mit-license.php)
* https://github.com/knowthelist/ftui
*/
-->
<script src="ftui.js"></script>
<link href="ftui.css" rel="stylesheet">
<link href="themes/ftui-theme.css" rel="stylesheet">
<link href="favicon.ico" rel="icon" type="image/x-icon" />
<!-- avoid 300ms delay on click-->
<meta name="viewport" content="width=device-width">
<meta name="mobile-web-app-capable" content="yes">
<meta name="toast_position" content="topLeft">
<!-- verbose level 0-4 -->
<meta name="debug" content="0">
<title>FTUI Home</title>
</head>
<body>
<ftui-grid base-width="78" base-height="70" margin="5" shape="round">
<ftui-grid-tile row="1" col="1" height="10" width="1">
<ftui-column>
<ftui-tab view="View1" size="large" >
<ftui-icon name="home1"></ftui-icon>
</ftui-tab>
<ftui-tab view="View2" direction="vertical" active>
<ftui-icon name="music"></ftui-icon>
<ftui-label>Music</ftui-label>
</ftui-tab>
<ftui-tab view="View3">
<ftui-icon name="feed"></ftui-icon>
</ftui-tab>
<ftui-tab view="View4">
<ftui-icon name="lightbulb"></ftui-icon>
</ftui-tab>
<ftui-tab view="View5">
<ftui-icon name="bath"></ftui-icon>
</ftui-tab>
</ftui-column>
</ftui-grid-tile>
<ftui-tab-view id="View1">
<ftui-grid-tile row="1" col="2" height="2" width="2" shape="round" color="green">
<ftui-row width="80%" height="10%">
<ftui-clock format="ee" size="6"></ftui-clock>
<ftui-clock format="DD" size="5"></ftui-clock>
</ftui-row>
<ftui-clock format="hh:mm" size="2"></ftui-clock>
</ftui-grid-tile>
</ftui-tab-view>
</ftui-grid>
</body>
</html>
Das funktioniert, wie gewuenscht; die Uhr erscheint nebem dem Index.
2. Version :
<!DOCTYPE html>
<html>
<head>
<!--
/* FHEM tablet ui - FTUI */
/**
* UI builder framework for FHEM
*
* Version: 3.0.0
*
* Copyright (c) 2015-2021 Mario Stephan <mstephan@shared-files.de>
* Under MIT License (http://www.opensource.org/licenses/mit-license.php)
* https://github.com/knowthelist/ftui
*/
-->
<script src="ftui.js"></script>
<link href="ftui.css" rel="stylesheet">
<link href="themes/ftui-theme.css" rel="stylesheet">
<link href="favicon.ico" rel="icon" type="image/x-icon" />
<!-- avoid 300ms delay on click-->
<meta name="viewport" content="width=device-width">
<meta name="mobile-web-app-capable" content="yes">
<meta name="toast_position" content="topLeft">
<!-- verbose level 0-4 -->
<meta name="debug" content="0">
<title>FTUI Home</title>
</head>
<body>
<ftui-grid base-width="78" base-height="70" margin="5" shape="round">
<ftui-grid-tile row="1" col="1" height="10" width="1">
<ftui-column>
<ftui-tab view="View1" size="large" >
<ftui-icon name="home1"></ftui-icon>
</ftui-tab>
<ftui-tab view="View2" direction="vertical" active>
<ftui-icon name="music"></ftui-icon>
<ftui-label>Music</ftui-label>
</ftui-tab>
<ftui-tab view="View3">
<ftui-icon name="feed"></ftui-icon>
</ftui-tab>
<ftui-tab view="View4">
<ftui-icon name="lightbulb"></ftui-icon>
</ftui-tab>
<ftui-tab view="View5">
<ftui-icon name="bath"></ftui-icon>
</ftui-tab>
</ftui-column>
</ftui-grid-tile>
<ftui-tab-view id="View1">
<ftui-content file="main.html"></ftui-content>
</ftui-tab-view>
</ftui-grid>
</body>
</html>
Wie muss man main.html anlegen, damit die Uhr nicht ueber dem Index erscheint, sondern wie bei der ersten Version, daneben ?
Das hier habe ich als main.html mal versucht :
<ftui-grid-tile row="1" col="2" height="2" width="2" shape="round" color="primary">
<ftui-row width="80%" height="10%">
<ftui-clock format="ee" size="6"></ftui-clock>
<ftui-clock format="DD" size="5"></ftui-clock>
</ftui-row>
<ftui-clock format="hh:mm" size="9"></ftui-clock>
</ftui-grid-tile>
ging aber so nicht, Uhr erscheint ganz links ueber dem Index.
ich hab übergeordnet zum Menü einen "Gesamt-Bereich" definiert..
<ftui-grid cols="11" rows="7" margin="1" resize>
<ftui-grid-tile row="1" col="1" height="6" width="1" color="transparent" style="z-index:1">
.....
</ftui-grid-tile>
<ftui-tab-view id="main">
<ftui-content file="main.html"></ftui-content>
</ftui-tab-view>
</ftui-grid>
in der main.html ist der Aufbau dann wie folgt genau so wieder mit dem Gesamtbereich:
<ftui-grid cols="11" rows="7" margin="1" resize>
<ftui-grid-tile row="1" col="2" height="6" width="10" shape="round" color="transparent">
...
</ftui-grid-tile>
</ftui-grid>
Danke.
1. und letzte Zeile fehlten mir in main.html.