Autor Thema: (Geloest) [FTUI3] Beispiel ?  (Gelesen 366 mal)

Offline Wolfgang Hochweller

  • Sr. Member
  • ****
  • Beiträge: 586
(Geloest) [FTUI3] Beispiel ?
« am: 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 :

<!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.
« Letzte Änderung: 20 Oktober 2021, 18:16:39 von Wolfgang Hochweller »

Offline StephanFHEM

  • Full Member
  • ***
  • Beiträge: 455
Antw:[FTUI3] Beispiel ?
« Antwort #1 am: 20 Oktober 2021, 17:16:23 »
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>

Offline Wolfgang Hochweller

  • Sr. Member
  • ****
  • Beiträge: 586
Antw:[FTUI3] Beispiel ?
« Antwort #2 am: 20 Oktober 2021, 18:16:18 »
Danke.

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