[FTUI3] weatherdetail.component.js

Begonnen von Jones, 12 Juli 2023, 02:08:52

Vorheriges Thema - Nächstes Thema
Drucken
Nach unten Seiten 1 2 3 4 Alle
Benutzer-Aktionen

mr_petz

#30
26 August 2023, 07:31:03
Hi Ralf,
zum besseren Nachvollziehen bzw zur Fehlerbehebung deine Definition zeigen.
LG

Kuehnhackel

#31
26 August 2023, 07:43:23
Hi, habe den Code aus dem ersetn Post übernommen und die Dateien geupdatet

Code Auswählen
<!-- Wetter -->
      <ftui-grid base-width="128" base-height="113" margin="1" shape="square">
      <ftui-grid-tile row="2.3" col="1.65" height="4" width="5">
      <ftui-grid-header>Wettervorschau</ftui-grid-header>
      <ftui-weatherdetail device="WetterProplanta" forecast="4" ></ftui-weatherdetail>
      </ftui-grid-tile>
      </ftui-grid>
LG Ralf

Kuehnhackel

#32
26 August 2023, 09:19:08
Alles noch einmal kontrolliert und überarbeitet, CHECK!

Danke.

LG Ralf

Kuehnhackel

#33
26 August 2023, 10:46:18
Ich nochmal 8)

Da das "Sliden" der 4 Tage funktioniert ist eigentlich alles okay, aber nur eigentlich.

Wenn ich jetzt vom Startbildschirm auf das Wetter springe kommme ich nicht mehr zurück.

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>Storchenwiese 48a</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="Übersicht" size="large" active>
          <ftui-icon name="home"></ftui-icon>
        </ftui-tab>
        <ftui-tab view="Temperatur" direction="vertical">
          <ftui-icon name="thermometer-0"></ftui-icon>
        </ftui-tab>
        <ftui-tab view="Tonnen">
          <ftui-icon name="trash"></ftui-icon>
        </ftui-tab>
        <ftui-tab view="4">
          <ftui-icon name="lightbulb"></ftui-icon>
        </ftui-tab>
        <ftui-tab view="5">
          <ftui-icon name="bath"></ftui-icon>
        </ftui-tab>
      </ftui-column>
    </ftui-grid-tile>
   

    <ftui-tab-view id="Übersicht">
      <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="6"></ftui-clock>
        </ftui-row>
        <ftui-clock format="hh:mm" size="9"></ftui-clock>
      </ftui-grid-tile>



      <!-- Tonnen -->
      <ftui-grid-tile row="1" col="4" height="2" width="2"                   [color]="myAbfall:next_days  | step('0:alert, 1:green, 2:ok')">
        <ftui-label size="3">Abfall</ftui-label>
     <ftui-icon name="trash" [color]="myAbfall:next_text | map (' `Gruenabfall`:brown, `Papiertonne`:blue, `Gelber Sack`:yellow, `Restmuell`:black, `Sperrmuell Altmetall`:red')" class="size-1" height="90%"></ftui-icon>
     <ftui-badge color="danger" [text]="myAbfall:next_days"></ftui-badge>
        <ftui-row width="80%" height="10%">
          <ftui-cell width="80%">
  <ftui-label [text]="myAbfall:next_text"></ftui-label>
          <ftui-cell width="80%">
          <ftui-label [text]="myAbfall:next_weekday"></ftui-label>
          <ftui-cell width="80%">
          <ftui-label [text]="myAbfall:next_date"></ftui-label>
          </ftui-cell>
          </ftui-row>
      </ftui-grid-tile>

      <!-- Markise -->
      <ftui-grid-tile row="1" col="6" height="2" width="2" shape="round"
                      [color]="Markise:position | step('0:ok, 100:blue')">
        <ftui-label size="3">Markise</ftui-label>
        <ftui-row height="45%">
          <ftui-button (value)="set Markise open" direction="vertical" color="current" fill="none"
                       margin="-1em">
            <ftui-icon name="angle-up" class="size-1" height="90%"></ftui-icon>
            <ftui-label>Raus</ftui-label>
          </ftui-button>
         
          <ftui-button (value)="set Markise stop" direction="vertical" color="current" fill="none"
                       margin="-1em">
            <ftui-icon name="stop" class="size-1" height="90%"></ftui-icon>
            <ftui-label>Stop</ftui-label>
          </ftui-button>
          <ftui-button (value)="set Markise close" direction="vertical" color="current" fill="none"
                       margin="-1em">
            <ftui-icon name="angle-down" class="size-1" height="90%"></ftui-icon>
            <ftui-label>Rein</ftui-label>
          </ftui-button>
        </ftui-row>
       </ftui-grid-tile>

      <!-- Bad -->
      <ftui-grid-tile row="1" col="8" height="2" width="2"
                   [color]="tuya_local_65373041bcff4d091c9c:state | map('on:alert, off:ok')">
        <ftui-label size="3">Bad</ftui-label>
        <ftui-icon name="bath" size="1"></ftui-icon>
        <ftui-cell width="80%">
       
        <ftui-label [text]="tuya_local_65373041bcff4d091c9c:state | map('off:aus, on:an')"></ftui-label>
        <ftui-cell width="80%">
        <ftui-label [text]="Bad:temperature" unit="°C"></ftui-label>
      </ftui-grid-tile>

      <!-- Eingangstuer -->
      <ftui-grid-tile row="1" col="10" height="2" width="2" shape="round"
                      [color]="Haustuer:state | map('locked:ok, unlocked:yellow, unlatch:alert')">
        <ftui-label size="3">Haustür</ftui-label>
        <ftui-icon name="front-door" size="3">
          <ftui-icon name="lock" size="2" top="1" right="3"
                     [hidden]="Haustuer:state | map('locked:false, unlocked:true, ')"></ftui-icon>
        </ftui-icon>
        <ftui-label [text]="Haustuer:state | map('locked:abgeschlossen, unlocked:nicht abgeschlossen, unlatch:offen')">
        </ftui-label>
      </ftui-grid-tile>

      <!-- MähRobi -->
      <ftui-grid-tile row="1" col="12" height="2" width="2"
                      [color]="MQTT_Worx_Robi:mowerErrorTxt  | map('No error:ok, error:alert')">
        <ftui-label size="3">Robi</ftui-label>
        <ftui-icon name="mower" size="2"></ftui-icon>
       
                <ftui-row>
                <ftui-column align-items="right" margin="0">
                <ftui-label text="Wo bin ich:"></ftui-label>
                <ftui-label text="Akkupower:"></ftui-label>
                <ftui-label text="Akkutemp:"></ftui-label>
                </ftui-column>         
                <ftui-column align-items="left" margin="0">
                <ftui-label [text]="MQTT_Worx_Robi:mowerStatusTxt | map('Stopped:gestoppt, Mowing:mähen, Home:Ladestation')"></ftui-label>
                <ftui-label [text]="MQTT_Worx_Robi:batteryPercent" unit="%"></ftui-label>
                <ftui-label [text]="MQTT_Worx_Robi:batteryTemperature" unit="°C"></ftui-label>
                </ftui-column>
               </ftui-row>       
      </ftui-grid-tile>
   
 
     

      <!--Wind -->
      <ftui-grid-tile row="3.05" col="10.3" height="2.5" width="2" shape="round">
        <header>Wind</header>
        <ftui-row class="w-60 h-80">
        <ftui-label text="W"></ftui-label>
        <ftui-column>
        <ftui-label text="N"></ftui-label>
        <ftui-knob [(value)]="WetterProplanta:windDir" min="0" max="360" start-angle="-90" end-angle="270" offset-y="0" height="80" width="80" has-scale has-needle></ftui-knob>
        <ftui-label text="S"></ftui-label>
        </ftui-column>
        <ftui-label text="O"></ftui-label>
        </ftui-row>
      </ftui-grid-tile> 

      <!--Mondphasen
      <ftui-grid-tile row="5.05" col="10.3" height="2.5" width="2" shape="round">
      <header>Mondphase</header>
        <ftui-moon [value]="SonneMond:MoonAge | scale(0,360,0,100)" hasshadows hasblur opacity="90"
          class="size-9"></ftui-moon>
        <ftui-label [text]="SonneMond:MoonPhaseS"></ftui-label>   
      </ftui-grid-tile>
     -->

     <ftui-grid-tile row="5.5" col="10.3" height="4" width="2">
        <header>Mondphase</header>
        <ftui-image src="http://192.168.178.221:8083/fhem/Astro_moonwidget?name='Astronomie" height="200px" width="200px">
        </ftui-image>
        <ftui-label [text]="SonneMond:MoonPhaseS"></ftui-label>
      </ftui-grid-tile>
     


      </ftui-tab-view>

      <!-- HomeStatus
      <ftui-grid-tile row="10" col="2" height="1" width="6">
        <ftui-segment [(value)]="HomeStatus">
          <ftui-segment-button value="1">
            <ftui-icon name="home"></ftui-icon>
          </ftui-segment-button>
          <ftui-segment-button value="2">
            <ftui-icon name="bed"></ftui-icon>
          </ftui-segment-button>
          <ftui-segment-button value="3">
            <ftui-icon name="road"></ftui-icon>
          </ftui-segment-button>
          <ftui-segment-button value="4">
            <ftui-icon name="plane"></ftui-icon>
          </ftui-segment-button>
        </ftui-segment>
      </ftui-grid-tile>
      -->

    <!-- Tab Temperaturen -->
    <ftui-tab-view id="Temperatur">
    <!-- AussenTemp-->
      <ftui-grid-tile row="1" col="2" height="3" width="2" shape="round">
        <ftui-label size="3">Terrasse</ftui-label>
        <ftui-knob [value]="Terrasse:temperature"
                   [color]="Terrasse:temperature | step('-99: primary, 15: ok, 25: warning, 35: danger')"
                   width="130" height"80"
                   type="handle" min="-10" max="40" step="0.1" decimals="1" unit="°C" readonly has-value-text>
        </ftui-knob>
      <ftui-row>
            <ftui-label size="3"> </ftui-label>
            </ftui-row>
      </ftui-grid-tile>
     
      <!-- Bad-->
      <ftui-grid-tile row="1" col="4" height="3" width="2" shape="round">
        <ftui-label size="3">Bad</ftui-label>
        <ftui-knob [value]="Bad:temperature"
                   [color]="Bad:temperature | step('-99: primary, 15: ok, 23: warning, 25: danger')"
                   width="130" height"80"
                   type="handle" min="-10" max="40" step="0.1" decimals="1" unit="°C" readonly has-value-text>
        </ftui-knob>
        <ftui-row>
            <ftui-label size="3">Feuchte:</ftui-label>
            <ftui-label size="3" [text]="Bad:humidity" unit="%">
            </ftui-label>
          </ftui-row>
        </ftui-grid-tile>

<!-- Büro-->
      <ftui-grid-tile row="1" col="6" height="3" width="2" shape="round">
        <ftui-label size="3">Büro</ftui-label>
        <ftui-knob [value]="Buero:temperature"
                   [color]="Buero:temperature | step('-99: primary, 15: ok, 23: warning, 30: danger')"
                   width="130" height"80"
                   type="handle" min="-10" max="40" step="0.1" decimals="1" unit="°C" readonly has-value-text>
        </ftui-knob>
      <ftui-row>
            <ftui-label size="3"> </ftui-label>
            </ftui-row>
      </ftui-grid-tile>
    <!-- Esszimmer-->
      <ftui-grid-tile row="1" col="8" height="3" width="2" shape="round">
        <ftui-label size="3">Esszimmer</ftui-label>
        <ftui-knob [value]="Essen:temperature"
                   [color]="Essen:temperature | step('-99: primary, 15: ok, 23: warning, 25: danger')"
                   width="130" height"80"
                   type="handle" min="-10" max="40" step="0.1" decimals="1" unit="°C" readonly has-value-text>
        </ftui-knob>
        <ftui-row>
            <ftui-label size="3">Feuchte:</ftui-label>
            <ftui-label size="3" [text]="Essen:humidity" unit="%">
            </ftui-label>
          </ftui-row>
        </ftui-grid-tile>
<!-- Flur-->
      <ftui-grid-tile row="1" col="10" height="3" width="2" shape="round">
        <ftui-label size="3">Flur</ftui-label>
        <ftui-knob [value]="Flur:temperature"
                   [color]="Flur:temperature | step('-99: primary, 15: ok, 23: warning, 25: danger')"
                   width="130" height"80"
                   type="handle" min="-10" max="40" step="0.1" decimals="1" unit="°C" readonly has-value-text>
        </ftui-knob>
        <ftui-row>
            <ftui-label size="3">Feuchte:</ftui-label>
            <ftui-label size="3" [text]="Flur:humidity" unit="%">
            </ftui-label>
          </ftui-row>
        </ftui-grid-tile>
<!-- Gäste-WC-->
      <ftui-grid-tile row="4" col="2" height="3" width="2" shape="round">
        <ftui-label size="3">Gäste-WC</ftui-label>
        <ftui-knob [value]="Gaeste_WC:temperature"
                   [color]="Gaeste_WC:temperature | step('-99: primary, 15: ok, 23: warning, 25: danger')"
                   width="130" height"80"
                   type="handle" min="-10" max="40" step="0.1" decimals="1" unit="°C" readonly has-value-text>
        </ftui-knob>
        <ftui-row>
            <ftui-label size="3">Feuchte:</ftui-label>
            <ftui-label size="3" [text]="Gaeste_WC:humidity" unit="%">
            </ftui-label>
          </ftui-row>
        </ftui-grid-tile>
<!-- HWR-->
      <ftui-grid-tile row="4" col="4" height="3" width="2" shape="round">
        <ftui-label size="3">HWR</ftui-label>
        <ftui-knob [value]="HWR:temperature"
                   [color]="HWR:temperature | step('-99: primary, 15: ok, 23: warning, 25: danger')"
                   width="130" height"80"
                   type="handle" min="-10" max="40" step="0.1" decimals="1" unit="°C" readonly has-value-text>
        </ftui-knob>
        <ftui-row>
            <ftui-label size="3">Feuchte:</ftui-label>
            <ftui-label size="3" [text]="HWR:humidity" unit="%">
            </ftui-label>
          </ftui-row>
        </ftui-grid-tile>
<!-- Küche-->
      <ftui-grid-tile row="4" col="6" height="3" width="2" shape="round">
        <ftui-label size="3">Küche</ftui-label>
        <ftui-knob [value]="Kueche:temperature"
                   [color]="Kueche:temperature | step('-99: primary, 15: ok, 23: warning, 25: danger')"
                   width="130" height"80"
                   type="handle" min="-10" max="40" step="0.1" decimals="1" unit="°C" readonly has-value-text>
        </ftui-knob>
        <ftui-row>
            <ftui-label size="3">Feuchte:</ftui-label>
            <ftui-label size="3" [text]="Kueche:humidity" unit="%">
            </ftui-label>
          </ftui-row>
        </ftui-grid-tile>
<!-- Schlafzimmer -->
      <ftui-grid-tile row="4" col="8" height="3" width="2" shape="round">
        <ftui-label size="3">Schlafzimmer</ftui-label>
        <ftui-knob [value]="Schlafen:temperature"
                   [color]="Schlafen:temperature | step('-99: primary, 15: ok, 23: warning, 25: danger')"
                   width="130" height"80"
                   type="handle" min="-10" max="40" step="0.1" decimals="1" unit="°C" readonly has-value-text>
        </ftui-knob>
        <ftui-row>
            <ftui-label size="3">Feuchte:</ftui-label>
            <ftui-label size="3" [text]="Schlafen:humidity" unit="%">
            </ftui-label>
          </ftui-row>
        </ftui-grid-tile>
<!-- Wohnzimmer -->
      <ftui-grid-tile row="4" col="10" height="3" width="2" shape="round">
        <ftui-label size="3">Wohnzimmer</ftui-label>
        <ftui-knob [value]="Wohnen:temperature"
                   [color]="Wohnen:temperature | step('-99: primary, 15: ok, 23: warning, 25: danger')"0
                   width="130" height"80"
                   type="handle" min="-10" max="40" step="0.1" decimals="1" unit="°C" readonly has-value-text>
        </ftui-knob>
        <ftui-row>
            <ftui-label size="3">Feuchte:</ftui-label>
            <ftui-label size="3" [text]="Wohnen:humidity" unit="%">
            </ftui-label>
          </ftui-row>
        </ftui-grid-tile>

    </ftui-tab-view>


<!-- Tonnen -->
    <ftui-tab-view id="Tonnen">
                 
      <ftui-grid-tile row="1" col="2" height="2" width="2" [color]="myAbfall:next_days  | step('0:alert, 1:green, 2:ok')">
       <ftui-label size="3">Aktuell</ftui-label>
       <ftui-label size="3"[text]="myAbfall:next_text"></ftui-label>
       <ftui-badge color="danger" [text]="myAbfall:next_days"></ftui-badge>
       <ftui-icon name="trash" [color]="myAbfall:next_text | map (' `Gruenabfall`:green, `Papiertonne`:blue, `Gelber Sack`:yellow, `Restmuell`:black, `Sperrmuell Altmetall`:red')">
       </ftui-icon>
       <ftui-row width="80%" height="10%">
       <ftui-cell width="80%">
       <ftui-label [text]="myAbfall:next_weekday"></ftui-label>
       
       <ftui-cell width="80%">
       <ftui-label [text]="myAbfall:next_date"></ftui-label>
       </ftui-cell>
       </ftui-row>
     </ftui-grid-tile>
     <ftui-grid-tile row="1" col="4" height="2" width="2" [color]="myAbfall:next_days  | step('0:alert, 1:green, 2:ok')">
       <ftui-label size="3"[text]="myAbfall:Gruenabfall_text"></ftui-label>
       <ftui-icon name="trash" color="brown" class="size-1" height="90%"></ftui-icon>
       <ftui-badge color="danger" [text]="myAbfall:Gruenabfall_days"></ftui-badge>
       <ftui-row width="80%" height="10%">
       <ftui-cell width="80%">
       <ftui-cell width="80%">
       <ftui-label [text]="myAbfall:Gruenabfall_weekday"></ftui-label>
       <ftui-cell width="80%">
       <ftui-label [text]="myAbfall:Gruenabfall_date"></ftui-label>
       </ftui-cell>
       </ftui-row>
     </ftui-grid-tile>
    <ftui-grid-tile row="1" col="6" height="2" width="2" [color]="myAbfall:next_days  | step('0:alert, 1:green, 2:ok')">
       <ftui-label size="3"[text]="myAbfall:Papiertonne_text"></ftui-label>
       <ftui-icon name="trash" color="blue" class="size-1" height="90%"></ftui-icon>
       <ftui-badge color="danger" [text]="myAbfall:Papiertonne_days"></ftui-badge>
       <ftui-row width="80%" height="10%">
       <ftui-cell width="80%">
       <ftui-cell width="80%">
       <ftui-label [text]="myAbfall:Papiertonne_weekday"></ftui-label>
       <ftui-cell width="80%">
       <ftui-label [text]="myAbfall:Papiertonne_date"></ftui-label>
       </ftui-cell>
       </ftui-row>
     </ftui-grid-tile>
      <ftui-grid-tile row="1" col="8" height="2" width="2" [color]="myAbfall:next_days  | step('0:alert, 1:green, 2:ok')">
       <ftui-label size="3"[text]="myAbfall:Restmuell_text"></ftui-label>
       <ftui-icon name="trash" color="black" class="size-1" height="90%"></ftui-icon>
       <ftui-badge color="danger" [text]="myAbfall:Restmuell_days"></ftui-badge>
       <ftui-row width="80%" height="10%">
       <ftui-cell width="80%">
       <ftui-cell width="80%">
       <ftui-label [text]="myAbfall:Restmuell_weekday"></ftui-label>
       <ftui-cell width="80%">
       <ftui-label [text]="myAbfall:Restmuell_date"></ftui-label>
       </ftui-cell>
       </ftui-row>
     </ftui-grid-tile>
     <ftui-grid-tile row="1" col="10" height="2" width="2" [color]="myAbfall:next_days  | step('0:alert, 1:green, 2:ok')">
       <ftui-label size="3"[text]="myAbfall:GelberSack_text"></ftui-label>
       <ftui-icon name="trash" color="yellow" class="size-1" height="90%"></ftui-icon>
       <ftui-badge color="danger" [text]="myAbfall:GelberSack_days"></ftui-badge>
       <ftui-row width="80%" height="10%">
       <ftui-cell width="80%">
       <ftui-cell width="80%">
       <ftui-label [text]="myAbfall:GelberSack_weekday"></ftui-label>
       <ftui-cell width="80%">
       <ftui-label [text]="myAbfall:GelberSack_date"></ftui-label>
       </ftui-cell>
       </ftui-row>
     </ftui-grid-tile>
     <ftui-grid-tile row="1" col="12" height="2" width="auto" [color]="myAbfall:next_days  | step('0:alert, 1:green, 2:ok')">
       <ftui-label size="3"[text]="myAbfall:SperrmuellAltmetall_text"></ftui-label>
       <ftui-icon name="trash" color="red" class="size-1" height="90%"></ftui-icon>
       <ftui-badge color="danger" [text]="myAbfall:SperrmuellAltmetall_days"></ftui-badge>
       <ftui-row width="80%" height="10%">
       <ftui-cell width="80%">
       <ftui-cell width="80%">
       <ftui-label [text]="myAbfall:SperrmuellAltmetall_weekday"></ftui-label>
       <ftui-cell width="80%">
       <ftui-label [text]="myAbfall:SperrmuellAltmetall_date"></ftui-label>
       </ftui-cell>
       </ftui-row>
     </ftui-grid-tile>
   </ftui-tab-view>

    <ftui-tab-view id="4">
     <!-- Wetter -->
      <ftui-grid base-width="128" base-height="113" margin="1" shape="square">
      <ftui-grid-tile row="2.3" col="1.65" height="4" width="5">
      <ftui-grid-header>Wettervorschau</ftui-grid-header>
      <ftui-weatherdetail device="WetterProplanta" forecast="4" ></ftui-weatherdetail>
      </ftui-grid-tile>
      </ftui-grid>
    </ftui-tab-view>


    <ftui-tab-view id="5">
      <ftui-grid-tile row="1" col="2" height="5" width="9">
        <div class="size-10">Tab5</div>
      </ftui-grid-tile>
    </ftui-tab-view>
 </ftui-grid>

</body>

</html>

Nun bin ich ein wenig ratlos.

LG Ralf

Jones

#34
26 August 2023, 15:46:35
moin ralf,
  • kannst du mal nur die weatherdetail zeile
    Code Auswählen
    <ftui-weatherdetail device="WetterProplanta" forecast="4" ></ftui-weatherdetail>auskommentieren und versuchen ob du dann zum startbildschirm zurückspringen kannst?
  • wenn dann die gleichen probleme auftreten versuchs mal mit z-index.

heute n8 bin ich wieder zuhause dann teste ich mal deine datei.

aber ein tip vorab schonmal:
deine config wird zwangsläufig immer weiter wachsen, weshalb du eine datei pro view anlegen solltest.
hier mal meine index.html als beispiel.

Code Auswählen
<!DOCTYPE html>
<html>
<head>
  <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="4">
  <meta name='viewport' content='width=device-width'>
  <title>Fhem - FTUI</title>
</head>
<body>

<ftui-grid base-width="128" base-height="113" margin="1" shape="square"> <!-- shape: round | square -->
<!---------------------------------------------------------------------------------------------------->
<!-- Menue
<!---------------------------------------------------------------------------------------------------->
<!-- active    = Definition der Defaultseite
<!-- timeout   = Rückkehrzeit in Sekunden
<!-- z-index:1 = Menue bleibt klickbar wenn views in dateien ausgelagert werden
<!---------------------------------------------------------------------------------------------------->
<ftui-grid-tile row="1" col="1" height="7" width="1">
  <ftui-grid-header>Menue</ftui-grid-header>
  <ftui-clock format="hh:mm:ss" class="size-3" bold></ftui-clock>
  <!-- <ftui-clock format="eeee" class="size-0"></ftui-clock> -->
  <ftui-clock format="DD.MM.YYYY" class="size-0"></ftui-clock>

  <ftui-column>
    <ftui-tab view="View1" size="large" direction="vertical" style="z-index:1">
      <ftui-icon name="home"></ftui-icon>
      <ftui-label>Home</ftui-label>
    </ftui-tab>
  </ftui-column>

  <ftui-column>
    <ftui-tab view="View2" size="large" direction="vertical" style="z-index:1"  active>
      <ftui-icon name="umbrella"></ftui-icon>
      <ftui-label>Wetter</ftui-label>
    </ftui-tab>
  </ftui-column>

  <ftui-column>
    <ftui-tab view="View3" size="large" direction="vertical" style="z-index:1">
      <ftui-icon name="calendar"></ftui-icon>
      <ftui-label>Kalender</ftui-label>
    </ftui-tab>
  </ftui-column>
 
  <ftui-column>
    <ftui-tab view="View4" size="large" direction="vertical" style="z-index:1">
      <ftui-icon name="desktop"></ftui-icon>
      <ftui-label>TV/Radio</ftui-label>
    </ftui-tab>
  </ftui-column>

  <ftui-column>
    <ftui-tab view="View5" size="large" direction="vertical" style="z-index:1">
      <ftui-icon  name="rss-square"></ftui-icon>
      <ftui-label>RSS</ftui-label>
    </ftui-tab>
  </ftui-column>

  <ftui-column></ftui-column> <!-- Abstände verringern -->
  <ftui-column></ftui-column> <!-- Abstände verringern -->
</ftui-grid-tile>
<!---------------------------------------------------------------------------------------------------->
<!-- Views -->
<!---------------------------------------------------------------------------------------------------->
<ftui-tab-view id="View1"><ftui-content file="view1.html" ></ftui-content></ftui-tab-view>
<ftui-tab-view id="View2"><ftui-content file="view2.html" ></ftui-content></ftui-tab-view>
<ftui-tab-view id="View3"><ftui-content file="view3.html" ></ftui-content></ftui-tab-view>
<ftui-tab-view id="View4"><ftui-content file="view4.html" ></ftui-content></ftui-tab-view>
<ftui-tab-view id="View5"><ftui-content file="view5.html" ></ftui-content></ftui-tab-view>

<!---------------------------------------------------------------------------------------------------->
</ftui-grid>
</body>
</html>
[FTUI3] Addons: https://github.com/mr-petz/ftui/tree/addons
Manchmal habe ich Angst, dass ich euch nerve, aber dann fällt mir ein: Ihr seid ja freiwillig hier!

Kuehnhackel

#35
26 August 2023, 18:14:18
Hallo Jones, bin augenblicklich auf Dienstreise in Singapur. Ich kann erst morgen am Sonntag die Sachen testen, da wir hier 6 Stunden voraus sind.

Danke schon einmal für deine Nachricht und Mühe.

Melde mich dann umgehend.

LG Ralf

Kuehnhackel

#36
27 August 2023, 12:31:35
Hi, hatte nun etwas Zeit und habe ein bisschen gespielt.

Habe das z-index eingefügt und es funktioniert.

Ich habe auch mit einer "Aufteilung" der einzelnen TAB begonnen und die Seiten "ausgelagert".

Soweit funktioniert schon mal alles.

Danke nochmal für die schnelle Hilfe.

LG Grüße aus Singapur.

Ralf

Jones

#37
27 August 2023, 21:52:41
ZitatIch habe auch mit einer "Aufteilung" der einzelnen TAB begonnen und die Seiten "ausgelagert".
sehr schön!
ZitatSoweit funktioniert schon mal alles.
aber natürlich. könnte es mir nicht leisten, wenn plötzlich alle nutzer ihr geld zurückfordern weil weatherdetail nicht funzt.

aber das war alles nur der erste schritt, du brauchst für die wetter view noch:
  • wetterwarnung (funzt teils/teils, der kaputte swiper treibt mich in den wahnsinn. die tage mache ich mal ein update für auto switch option zwischen longText/shortText bei sehr langem text)
  • mondphase (gibt hier 2 version. mit bildern und mit inline svg)
  • unwetterkarte (klick toggelt brd/bundesland)
  • pollenflug (habe die ente noch nicht gefragt - bin für demo dankbar)
  • sonnenstürme/meteoriten/etc (habe die ente noch nicht gefragt - bin für demo dankbar)
  • stauts ist nur lückenfüller, würde ihn gerne mit irgendwas wettermäßiges füllen - bin für demo dankbar

mein derzeitiger stand:
Du darfst diesen Dateianhang nicht ansehen.



[FTUI3] Addons: https://github.com/mr-petz/ftui/tree/addons
Manchmal habe ich Angst, dass ich euch nerve, aber dann fällt mir ein: Ihr seid ja freiwillig hier!

Kuehnhackel

#38
28 August 2023, 15:06:25
Zitat von: Jones am 27 August 2023, 21:52:41aber das war alles nur der erste schritt, du brauchst für die wetter view noch:
  • wetterwarnung (funzt teils/teils, der kaputte swiper treibt mich in den wahnsinn. die tage mache ich mal ein update für auto switch option zwischen longText/shortText bei sehr langem text)
  • mondphase (gibt hier 2 version. mit bildern und mit inline svg)
  • unwetterkarte (klick toggelt brd/bundesland)
  • pollenflug (habe die ente noch nicht gefragt - bin für demo dankbar)
  • sonnenstürme/meteoriten/etc (habe die ente noch nicht gefragt - bin für demo dankbar)
  • stauts ist nur lückenfüller, würde ihn gerne mit irgendwas wettermäßiges füllen - bin für demo dankbar

mein derzeitiger stand:
Du darfst diesen Dateianhang nicht ansehen.


Deine Mondphase gefällt mir gut. Magst du den Code teilen?

Die Geschichte mit dem Unwetter gefällt mir, würde mich als Tester zur Verfügung stellen, wenn ich eine Anleitung bekomme.

LG Ralf

Jones

#40
29 August 2023, 00:09:18
...auch wenn mr_petz dir jetzt schon die lösung zum mond gezeigt hat, werde ich trotzdem "zeitnah" mal index.html
und view2.html (wetter) im tabletUI channel posten (habe keine antwort von der ente bekommen, ob es hier irgendwo schon sowas wie einen subchannel "my ftui3 Config" gibt).

tester brauch ich eigentlich nicht für die unwetter geschichte, sondern erfahrene coder um den swiper zu fixen.


[FTUI3] Addons: https://github.com/mr-petz/ftui/tree/addons
Manchmal habe ich Angst, dass ich euch nerve, aber dann fällt mir ein: Ihr seid ja freiwillig hier!

Kuehnhackel

#42
30 August 2023, 16:19:55
Hallo Jason,

kennst du das?

https://wiki.fhem.de/wiki/Pollenflug

Vielleicht kannst du ja was nettes drumherumbauen  8)

Liebe Grüße

Ralf

Jones

#43
04 September 2023, 21:03:50
moin kuehnhackel,

habe zzt ein kleines zeitproblem und deshalb würde ich gerne fertige sachen einbauen, aber nichts selber coden.
sobald ich etwas leerlauf habe will ich erstmal weg von meiner funkgeschichte und muss dazu erstmal meine neuen geräte
mit tasmota flashen und mal sehen was da noch so für stricke auf mich lauern.
sobald das fertig ist werde ich endlich mal pi hole testen und sehen ob es nicht schon was schönes fertiges für ftui3 gibt.
falls nicht wäre das mein nächstes ftui3 projekt.
bis ich mir auf der wetter view noch was reinbaue wird also ne zeit dauern.

[FTUI3] Addons: https://github.com/mr-petz/ftui/tree/addons
Manchmal habe ich Angst, dass ich euch nerve, aber dann fällt mir ein: Ihr seid ja freiwillig hier!

Kuehnhackel

#44
18 September 2023, 10:51:11
Zitat von: Kuehnhackel am 28 August 2023, 15:06:25
Zitat von: Jones am 27 August 2023, 21:52:41aber das war alles nur der erste schritt, du brauchst für die wetter view noch:
  • wetterwarnung (funzt teils/teils, der kaputte swiper treibt mich in den wahnsinn. die tage mache ich mal ein update für auto switch option zwischen longText/shortText bei sehr langem text)
  • mondphase (gibt hier 2 version. mit bildern und mit inline svg)
  • unwetterkarte (klick toggelt brd/bundesland)
  • pollenflug (habe die ente noch nicht gefragt - bin für demo dankbar)
  • sonnenstürme/meteoriten/etc (habe die ente noch nicht gefragt - bin für demo dankbar)
  • stauts ist nur lückenfüller, würde ihn gerne mit irgendwas wettermäßiges füllen - bin für demo dankbar

mein derzeitiger stand:
Du darfst diesen Dateianhang nicht ansehen.


Deine Mondphase gefällt mir gut. Magst du den Code teilen?

Die Geschichte mit dem Unwetter gefällt mir, würde mich als Tester zur Verfügung stellen, wenn ich eine Anleitung bekomme.

LG Ralf

Hi Jones,

wann hättest Du Zeit mal deine html-Seiten zu sharen?

Liebe Grüße

Ralf
Drucken
Nach oben Seiten 1 2 3 4 Alle
Benutzer-Aktionen