FHEM Forum

FHEM => Frontends => TabletUI => Thema gestartet von: Wasserwerk33 am 16 Juli 2021, 23:25:30

Titel: Kann man sowas wie ein Bildschirmschoner anlegen und dann eine Hauptseite?
Beitrag von: Wasserwerk33 am 16 Juli 2021, 23:25:30
Hallo Leute
ich benutze Tablet Ui 2, mehr geht nicht. (Tablet zu alt.)

Ich würde gerne eine Startseite anlegen.
1. Leiste Unwetterwarnung; home (kaffeetasse); Hauptseite (Haus)
2. Zeile ( Rest) Uhrzeit und Sonnenaufgang, Untergang Temperatur.

2. Seite

Hier fängt es dann erst richtig an.
1. Zeile die einzelnen Seiten
2. Zeile und rest was mir so einfällt.

Aber es Klappt einfach nicht wo mache ich mein Fehler?

home (Index)
  <title>FTUI Middendorf</title>
</head>

</head>
<body>
<div class="gridster">
<ul>
<!-- Menu oben-->
<!-- Pause -->
<li data-row="1" data-col="1" data-sizex="25" data-sizey="3" class="semitransparent">
<div class="hbox">
<div class="vbox left-space">
            <td width="15%" style="border-left:1px #1D1F20 dashed;">
              <div data-type="symbol"
                 data-device="DWD"
                 data-get="a_count"
                 data-states='["0","[1-9]{1}|[0-9]{2}"]'
                 data-icons='["fa-bolt","fa-bolt warn"]'
                 data-colors='["#aaa","firebrick"]'
                 data-background-icons='["none","none"]'
                 class="small">
                 </div>
                 </div>
                 <div class="vbox items-center">
      <div data-type="pagebutton"
      data-url="#home.html"
      data-load="#home"
      data-fade-duration="0"
      data-icon="fa-coffee"
      ata-color="#eee"
      class="menusize top-narrow">
      </div>
      <div class="bigger robotothin centered">Home</div>
               </div>
            <div class="vbox items-center">
<div data-type="pagebutton"
data-url="#Hauptseite.html"
data-load="#Hauptseite"
data-fade-duration="0"
data-icon="fa-home"
ata-color="#eee"
class="menusize top-narrow">
</div>
<div class="bigger robotothin centered">Hauptseite</div>
          </div>
</div>
</li>
      <!-- Uhr-->
<li data-row="3" data-col="1" data-sizex="25" data-sizey="12" class="semitransparent">
  <div class="hbox items-center">
    <div class="vbox">
      <td width="50%" style="border-center:1px #1D1F20 dashed;">
      <div data-type="clock"
         data-format="H:i"
         data-interval="1000"
         class="bigger robotothin centered"
         style="color:#eee;">
      </div>
    </div>
    </li>
    <!-- Zeit leiste -->
<li data-row="3" data-col="1" data-sizex="25" data-sizey="12" class="semitransparent">
    <div class="page" id="Hauptseite"></div>
  </div>
</div>
</li>
</ul>
</div>
</body>
</html>


Hauptseite
<!DOCTYPE html>
<html>
<head>
   </head>
<body>
<div class="page" id="Hauptseite">
<div class="gridster">
<ul>
<!-- Menu oben-->
<!-- Hauptseite -->
<li data-row="1" data-col="1" data-sizex="25" data-sizey="3" class="semitransparent">
<div class="hbox">
<div class="vbox left-space">
<td width="15%" style="border-left:1px #1D1F20 dashed;">
<div data-type="pagebutton"
data-url="#DWD.html"
data-load="#DWD"
data-device="Unwetter"
data-get="a_count"
data-states='["0","[1-9]{1}|[0-9]{2}"]'
data-icons='["fa-bolt","fa-bolt warn"]'
data-colors='["#aaa","firebrick"]'
data-background-icons='["none","none"]'
class="small">
</div>
<div class="bigger robotothin centered">Wetterwarnungen</div>
</div>
<div class="vbox items-center">
<div data-type="pagebutton"
data-url="#wetter.html"
data-load="#wetter"
data-fade-duration="0"
data-icon="fa-cloud"
ata-color="#eee"
class="menusize top-narrow">
</div>
<div class="bigger robotothin centered">Wetter</div>
</div>
<div class="vbox items-center">
<div data-type="pagebutton"
data-url="#home.html"
data-load="#home"
data-fade-duration="0"
data-icon="fa-coffee"
ata-color="#eee"
class="menusize top-narrow">
</div>
<div class="bigger robotothin centered">Home</div>
</div>
<div class="vbox items-center">
<div data-type="pagebutton"
data-url="#Hauptseite.html"
data-load="#Hauptseite"
data-fade-duration="0"
data-icon="fa-home"
ata-color="#eee"
class="menusize top-narrow">
</div>
<div class="bigger robotothin centered">Hauptseite</div>
</div>
<div class="vbox items-center">
<div data-type="pagebutton"
data-url="#Obergeschoss.html"
data-load="#obergeschoss"
data-fade-duration="0"
data-icon="fa-home"
ata-color="#eee"
class="menusize top-narrow">
</div>
<div class="bigger robotothin centered">Obergeschoss</div>
</div>
<div class="vbox items-center">
<div data-type="pagebutton"
data-url="#system.html"
data-load="#system"
data-fade-duration="0"
data-icon="fa-raspberry-pi"
ata-color="#eee"
class="menusize top-narrow">
</div>
<div class="bigger robotothin centered">System</div>
</div>
</div>
</li>
<!-- Menu links-->
<li data-row="3" data-col="1" data-sizex="10" data-sizey="3" class="semitransparent">

</div>
</div>
<!-- page container -->
<li data-row="3" data-col="1" data-sizex="25" data-sizey="12" class="shiny">
<div class="page" id="home"></div>
<div class="page" id="Hauptseite"></div>
<div class="page" id="DWD"></div>
<div class="page" id="Obergschoss"></div>
<div class="page" id="system"></div>
<div class="page" id="page-heating-advanced"></div>
</div>
</div>
</li>
</ul>
</div>
</div>
</body>
</html>


Habe noch 2 Bilder mit angefügt vielleicht sieht man es.
Ich danke euch für die Hilfe.