(Geloest) [FTUI3] Beispiel ?

Wolfgang Hochweller · 20 Oktober 2021, 12:37:56

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 :

Code Auswählen


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

Code Auswählen


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

StephanFHEM · 20 Oktober 2021, 17:16:23

ich hab übergeordnet zum Menü einen "Gesamt-Bereich" definiert..

Code Auswählen

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

Code Auswählen

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

Wolfgang Hochweller · 20 Oktober 2021, 18:16:18

Danke.

1. und letzte Zeile fehlten mir in main.html.

FHEM Forum

(Geloest) [FTUI3] Beispiel ?

Wolfgang Hochweller

StephanFHEM

Wolfgang Hochweller