[FTUI3] Meine config

Jones · 27 September 2023, 15:02:15

ich stelle mal meine ftui3 config online, in der hoffnung das anfänger damit schnell zu einer ersten funktionierenden lösung kommen und damit rumspielen können.
nur view1 und view2 habe ich derzeit mit leben gefüllt, der rest ist auf meiner todo und kann noch ne weile dauern.
um keine rechte dritter zu verletzten habe ich auf dem bild einige sachen "geschwärzt"

ich habe nur zur unwetterkarte die fhem definition beigepackt, alles andere wird unter dem fhem forum gut erklärt.

Du darfst diesen Dateianhang nicht ansehen.

index.html

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>

view1.html

Code Auswählen

<ftui-grid base-width="128" base-height="113" margin="1" shape="square">
  <!-- ---------------------------------------------------------------------------------------- -->
  <!-- Grid: Wohnzimmer Licht
  <!-- ---------------------------------------------------------------------------------------- -->
  <ftui-grid-tile row="1" col="2" height="4" width="1">
    <ftui-grid-header>Wohnzimmer</ftui-grid-header>
    <ftui-column>
      <!-- Deckenfluter (Dual switch button 1) -->
      <ftui-button shape="circle" (value)="MQTT2_DVES_EE631B:POWER1.TOGGLE" [color]="MQTT2_DVES_EE631B:POWER1 | map('ON:primary, OFF:dark')">
      <ftui-icon name="lightbulb" color="grid" size="0"></ftui-icon>
      </ftui-button>
      <ftui-label>Deckenfluter</ftui-label>
      <!-- Esstisch (Dual switch button 2) -->
      <ftui-button shape="circle" (value)="MQTT2_DVES_EE631B:POWER2.TOGGLE" [color]="MQTT2_DVES_EE631B:POWER2 | map('ON:primary, OFF:dark')">
       <ftui-icon name="lightbulb" color="grid" size="0"></ftui-icon>
      </ftui-button>
	  <ftui-label>Esstisch</ftui-label>
      <!-- RGBW-Kette -->
      <ftui-button shape="circle" (value)="MQTT2_DVES_478191" states="toggle"
          @hold="popColorpicker.open()"
          [color]="MQTT2_DVES_478191:POWER | map('ON:primary, OFF:dark')">
          <ftui-icon path="../images/fhemSVG/" [rgb]="MQTT2_DVES_478191:rgb" name="hue_filled_lightstrip"></ftui-icon>
      </ftui-button>
      <ftui-icon name="sliders" @click="popColorpicker.open()"></ftui-icon>
	  <ftui-label>Sideboard</ftui-label>
    </ftui-column>
    <ftui-column></ftui-column> <!-- Abstände verringern -->
  </ftui-grid-tile>
  <!-- ---------------------------------------------------------------------------------------- -->
  <!-- Popup: Wohnzimmer RGBW-Kette
  <!-- ---------------------------------------------------------------------------------------- -->
  <ftui-popup id="popColorpicker" timeout="0" width="220px" height="220px" left="20%" top="20%">
    <header>Sideboard ColorPicker</header>
    <ftui-colorpicker [hex]="MQTT2_DVES_478191:rgb" (hex)="MQTT2_DVES_478191:Color"
                      (Dimmer)="MQTT2_DVES_478191:brightness"
                      layout="wheel,valueSlider"></ftui-colorpicker>
    <ftui-column></ftui-column> <!-- Abstände verringern -->
  </ftui-popup>
  <!-- ---------------------------------------------------------------------------------------- -->
  <!-- Grid: Wohnzimmer Rollos
  <!-- ---------------------------------------------------------------------------------------- -->
  <ftui-grid-tile row="1" col="3" height="4" width="1">
    <ftui-grid-header>Wohnzimmer</ftui-grid-header>
    <ftui-column>
      <ftui-content file="content-rollo-rf.html" device="Rollo_WZ_Rechts" label="WZ Rechts"></ftui-content>
      <ftui-content file="content-rollo-rf.html" device="Rollo_WZ_Links"  label="WZ Links"></ftui-content>
      <ftui-content file="content-rollo-rf.html" device="Rollo_WZ_Seite"  label="WZ Seite"></ftui-content>
    </ftui-column>
    <ftui-column></ftui-column> <!-- Abstände verringern -->
  </ftui-grid-tile>
  <!-- ---------------------------------------------------------------------------------------- -->
  <!-- Grid Küche Rollo
  <!-- ---------------------------------------------------------------------------------------- -->
  <ftui-grid-tile row="1" col="4" height="2" width="1">
    <ftui-grid-header>Kueche</ftui-grid-header>
    <ftui-column>
    <ftui-content file="content-rollo.html" device="Rollo.Kueche" var="SHUTTER1" label="Küche"></ftui-content>
    </ftui-column>
    <ftui-column></ftui-column> <!-- Abstände verringern -->
  </ftui-grid-tile>
  <!-- ---------------------------------------------------------------------------------------- -->
  <!-- Grid: Haustür
  <!-- ---------------------------------------------------------------------------------------- -->
  <ftui-grid-tile row="3" col="4" height="2" width="1">
    <ftui-grid-header>Haustür</ftui-grid-header>
    <ftui-column>
    <ftui-button shape="circle" [color]=" MQTT2_DVES_DOORB:BUTTON | map('down:primary, up:dark')">
      <ftui-icon name="bell" color="grid" size="0"></ftui-icon>
    </ftui-button>
    <ftui-label size="0">Klingel</ftui-label>
  </ftui-column>
  <ftui-column></ftui-column> <!-- Abstände verringern -->
  </ftui-grid-tile>
  <!-- ---------------------------------------------------------------------------------------- -->
  <!-- Grid: Garage
  <!-- ---------------------------------------------------------------------------------------- -->
  <ftui-grid-tile row="1" col="5" height="2" width="1">
    <ftui-grid-header>Garage</ftui-grid-header>
    <ftui-column>
    <ftui-button shape="circle" (value)="MQTT2_DVES_51A4E0" states="POWER.TOGGLE" [color]="MQTT2_DVES_51A4E0:POWER | map('ON:primary, OFF:dark')">
      <ftui-icon name="lightbulb" color="grid" size="0"></ftui-icon>
    </ftui-button>
    <ftui-label size="0">Fluter</ftui-label>
    </ftui-column>
    <ftui-column></ftui-column> <!-- Abstände verringern -->
  </ftui-grid-tile>
  <!-- ---------------------------------------------------------------------------------------- -->
  <!--  Grid: Keller
  <!-- ---------------------------------------------------------------------------------------- -->
  <ftui-grid-tile row="3" col="5" height="2" width="1">
    <ftui-grid-header>Keller</ftui-grid-header>
    <ftui-column>
    <ftui-button shape="circle" (value)="MQTT2_DVES_33D587" states="POWER.TOGGLE" [color]="MQTT2_DVES_33D587:POWER | map('ON:primary, OFF:dark')">
      <ftui-icon path="../images/fhemSVG" name="Ventilator_fett" color="grid" size="0"></ftui-icon>
    </ftui-button>
    <ftui-label size="0">Lüftung</ftui-label>
    </ftui-column>
    <ftui-column></ftui-column> <!-- Abstände verringern -->
  </ftui-grid-tile>
  <!-- ---------------------------------------------------------------------------------------- -->
  <!--Grid: Apotheken Notdienst
  <!-- ---------------------------------------------------------------------------------------- -->
  <ftui-grid-tile row="1" col="6" height="1" width="3">
    <ftui-grid-header>Apotheken Notdienst</ftui-grid-header>
    <ftui-label [text]="NotApo:NotApo_Name" size="2"></ftui-label>
    <ftui-label [text]="NotApo:NotApo_City" size="1">
	  <ftui-label [text]="NotApo:NotApo_Street"></ftui-label>,&nbsp;
	</ftui-label>
    <ftui-label [text]="NotApo:NotApo_Tel">Tel:&nbsp;</ftui-label>
    <ftui-label [text]="NotApo:NotApo_TimeText" size="0"></ftui-label>
    <ftui-column></ftui-column> <!-- Abstände verringern -->
  </ftui-grid-tile>
  <!-- ---------------------------------------------------------------------------------------- -->
  <!-- Grid: Abfall
  <!-- ---------------------------------------------------------------------------------------- -->
  <ftui-grid-tile row="1" col="9" height="1" width="2">
    <ftui-grid-header>Abfall</ftui-grid-header>
      <ftui-row>
        <ftui-content file="content-abfall.html" device="Muelltonnen" color="black"  var="GraueTonne_days"></ftui-content>
        <ftui-content file="content-abfall.html" device="Muelltonnen" color="blue"   var="BlaueTonne_days"></ftui-content>
        <ftui-content file="content-abfall.html" device="Muelltonnen" color="yellow" var="GelbeTonne_days"></ftui-content>
        <ftui-content file="content-abfall.html" device="Muelltonnen" color="brown"  var="BrauneTonne_days"></ftui-content>
		<!-- Download AbfallKaleder wird durch fhem an jeden 4. Tag des Monats ausgeführt, aber zur Sicherheit gibt es diesen Button -->
		<ftui-button name="test" shape="circle" (value)="downloadAbfallKalender" states="execNow"><ftui-icon name="download" color="grid"></ftui-icon></ftui-button>
      </ftui-row>
  </ftui-grid-tile>
  <!-- ---------------------------------------------------------------------------------------- -->
  <!-- Grid: Tagesschau RSS Feed
  <!-- ---------------------------------------------------------------------------------------- -->
  <ftui-grid-tile row="5" col="2" height="3" width="4">
    <ftui-grid-header>Tagesschau RSS</ftui-grid-header>
    <!-- RSS Icons howto: https://wiki.fhem.de/wiki/FTUI3_Readingsgroup -->
    <ftui-column class="size-2" align-items="left" margin="2">
      <ftui-content style="font-size: 11px;" id="readings_group" [content]="RG_TagesschauRSS | getHTML('RG_TagesschauRSS')"></ftui-content>
  </ftui-column>
  </ftui-grid-tile>
  <!-- ---------------------------------------------------------------------------------------- -->
  <!-- Grid: Doorbell 1
  <!-- Android unterbinded http authification, also kein http://user:pass@ip möglich.
  <!-- -------------------------------------------------------------------------------------- -->
  <ftui-grid-tile row="2" col="6" height="3" width="5">
    <img src="http://xxx.xxx.xxx.xxx:8080/cgi-bin/mjpeg.cgi" width="100%">
  </ftui-grid-tile>
  <!-- ---------------------------------------------------------------------------------------- -->
  <!-- Grid: Doorbell 2
  <!-- Android unterbinded http authification, also kein http://user:pass@ip möglich.
  <!-- ---------------------------------------------------------------------------------------- -->
  <ftui-grid-tile row="5" col="6" height="3" width="5">
      <img src="http://xxx.xxx.xxx.xxx:8080/cgi-bin/mjpeg.cgi" width="100%">
  </ftui-grid-tile>
</ftui-grid>

view2.html

Code Auswählen

<ftui-grid base-width="128" base-height="113" margin="1" shape="square">
  <!-- ---------------------------------------------------------------------------------------- -->
  <!-- Grid: Wettervorschau
  <!-- ---------------------------------------------------------------------------------------- -->
  <ftui-grid-tile row="1" col="2" height="4" width="5">
  <ftui-grid-header>Wettervorschau</ftui-grid-header>
  <ftui-weatherdetail device="Proplanta" forecast="4" ></ftui-weatherdetail>
  </ftui-grid-tile>
  <!-- ---------------------------------------------------------------------------------------- -->
  <!-- Grid: Wetterwarnung
  <!-- FTUI3-Slider ist buggy, eine erste Verbesserung ist hier: 
  <!-- https://forum.fhem.de/index.php?topic=134357.0 
  <!-- ---------------------------------------------------------------------------------------- -->
  <ftui-grid-tile row="5" col="2" height="2" width="5">
  <ftui-grid-header>Wetterwarnung</ftui-grid-header>
  <ftui-column style="background-color: dark;">
    <ftui-weatherwarning device="Unwetter2" interval="8" size="1" txttype="auto" txtmaxlen="650"></ftui-weatherwarning>
  </ftui-column>  
  </ftui-grid-tile>
  <!-- ---------------------------------------------------------------------------------------- -->
  <!-- Grid: Mondphase
  <!-- ---------------------------------------------------------------------------------------- -->
  <ftui-grid-tile row="1" col="7" height="2" width="2">
    <ftui-grid-header>Mondphase</ftui-grid-header>
    <ftui-image left="-25px" width="140%" [src]="SonneMond:Mondbild"></ftui-image> 
  </ftui-grid-tile>
  <!-- ---------------------------------------------------------------------------------------- -->
  <!-- Grid: Status
  <!-- ---------------------------------------------------------------------------------------- -->
  <ftui-grid-tile row="3" col="7" height="2" width="2">
    <ftui-grid-header>Status</ftui-grid-header>
    <style>#tableStat tr:nth-child(even){ background-color: #555555; }</style>
    <table id="tableStat" style="border-spacing: 0px;">	
    <tr><td style="width: 20%; margin: 0; text-align: r;" >CPU:</td><td><ftui-label [text]="sysmon:cpu_model_name"></td></tr>
    <tr><td>Cores:</td><td><ftui-label [text]="sysmon:cpu_core_count"></td></tr>
    <tr><td>Freq:</td><td><ftui-label [text]="sysmon:cpu_freq" unit="&nbsp;MHz"></td></tr>
    <tr><td>Mips:</td><td><ftui-label [text]="sysmon:cpu_bogomips" unit="&nbsp;BogoMips"></td></tr>
    <tr><td>Temp:</td><td><ftui-label [text]="sysmon:cpu_temp" [color]="sysmon:cpu_temp | step('0:ok, 65:warning, 85:alert')" unit="&nbsp;°C"></td></tr>
    <tr><td>Ram:</td><td><ftui-label [text]="sysmon:ram | replace(/, [0-9].*/,'')" ></td></tr>
    <tr><td>WLAN:</td><td><ftui-label [text]="sysmon:wlan0_ip"></td></tr>
    <tr><td>Pearl:</td><td><ftui-label [text]="sysmon:perl_version"></td></tr>
    <tr><td>Uptime:</td><td><ftui-label [text]="sysmon:uptime_text"></td></tr>
    <tr><td>Fhem:</td><td><ftui-label [text]="sysmon:fhemuptime_text"></td></tr>
    </table>
  </ftui-grid-tile>
  <!-- ---------------------------------------------------------------------------------------- -->
  <!-- Grid: ToDo01
  <!-- ---------------------------------------------------------------------------------------- -->
  <ftui-grid-tile row="1" col="9" height="4" width="2">
    <ftui-grid-header>ToDo01</ftui-grid-header>
    <ftui-column ></ftui-column>
  </ftui-grid-tile>

  <!-- ---------------------------------------------------------------------------------------- -->
  <!-- Grid: ToDo02
  <!-- ---------------------------------------------------------------------------------------- -->
  <ftui-grid-tile row="7" col="2" height="1" width="5">
    <ftui-grid-header>ToDo02</ftui-grid-header>
    <ftui-column >
 
	</ftui-column>
  </ftui-grid-tile>

  <!-- ---------------------------------------------------------------------------------------- -->
  <!-- Grid: Unwetterkarte
  <!-- ---------------------------------------------------------------------------------------- -->
	<!--
    fhem Raw definition:
	--------------------
	defmod KarteUWZ dummy
	attr KarteUWZ comment Dummy um in ftui3 zwischen Unwetterkarte NRW / BRD  mittels Mausklick zu toggeln.
	attr KarteUWZ group Wetter
	attr KarteUWZ icon fa__399
	attr KarteUWZ room Daten
	attr KarteUWZ setList NRW BRD
	attr KarteUWZ webCmd NRW:BRD

	setstate KarteUWZ BRD
	setstate KarteUWZ 2023-09-27 13:35:44 state BRD
	-->
	<!--	
      image.component.js -> async createUrl() ist buggy!
	  Ein von den beiden möglichen änderungen ist nötig:
	  
	  Möglichkeit 1: image.component.js so ändern: 
      if (src && (this.hasAttribute('nocache') || this.refresh)) {
        //const url = new URL(src);
        //url.searchParams.set('_', Date.now());
        //return url; // FF 115.0.3 => Uncaught (in promise) TypeError: URL constructor: /fhem/www/images/deutschland.png? is not a valid URL.
        return src + "?"+Date.now();
      }
      Nachteil: wird bei jedem update wieder überschrieben
	  
	  Möglichkeit 2: 
	  Statt eines relativen pfades den umweg über http:// benutzen
	  Nachteil: keine einfaches copy/paste möglich, da ip händisch geändert werden muß
  -->

  <ftui-grid-tile row="5" col="7" height="3" width="4">
  <header>Unwetterkarte</header>
  <ftui-button height="0" [value]="KarteUWZ" (value)="KarteUWZ" states="BRD, NRW" >
    <ftui-image nocache [refresh]="Unwetterzentrale:lastConnection:time" height="315px" width="390px" top="3px" base="http://xxx.xxx.xxx.xxx:8083/fhem/www/images/" [src]="KarteUWZ | map('NRW: nordrhein-westfalen.png, BRD:deutschland.png')"></ftui-image>
  </ftui-button>

</ftui-grid>

content-rollo-rf.html

Code Auswählen

<!-------------------------------------------------------------------------------->
<!-- Content: Rollo Intertechno ITL-500
<!-- REGEX Info: Regex pattern will be expand to: ('^' + pattern + '$')) 
<!-------------------------------------------------------------------------------->
<ftui-row> 
  <ftui-button shape="circle" color="current" fill="none" (value)="map('on:open, off:stop') | set {{device}}">
    <ftui-icon name="angle-up" size="2" [color]="{{device}} | map('drive-up:warning, `.*`:current')"></ftui-icon>
  </ftui-button>
  <ftui-circlemenu direction="vertical">
    <ftui-icon path="../images/openautomation" [name]="{{device}} | map('
      drive-up:fts_shutter_up,
      drive-down:fts_shutter_down,
      open:fts_shutter_0,
      pct-0:fts_shutter_0,
      pct-10:fts_shutter_10,
      pct-20:fts_shutter_20,
      pct-30:fts_shutter_30,
      pct-40:fts_shutter_40,
      half:fts_shutter_50,
      pct-50:fts_shutter_50,
      pct-60:fts_shutter_60,
      pct-70:fts_shutter_70,
      pct-80:fts_shutter_80,
      pct-90:fts_shutter_90,
      pct-100:fts_shutter_100,
      closed:fts_shutter_100')">
    </ftui-icon>  
    <ftui-button shape="circle" fill="outline" (value)="{{device}}" states="pct 0"   color="light">Auf</ftui-button>
    <ftui-button shape="circle" fill="outline" (value)="{{device}}" states="pct 30"  color="light">30%</ftui-button>
    <ftui-button shape="circle" fill="outline" (value)="{{device}}" states="pct 50"  color="light">50%</ftui-button>
    <ftui-button shape="circle" fill="outline" (value)="{{device}}" states="pct 80"  color="light">80%</ftui-button>
    <ftui-button shape="circle" fill="outline" (value)="{{device}}" states="pct 100" color="light">Zu </ftui-button>
    </ftui-circlemenu>     
  <ftui-button shape="circle" color="current" fill="none" (value)="map('on:closed, off:stop') | set {{device}}">
    <ftui-icon name="angle-down" size="2" [color]="{{device}} | map('drive-down:warning, `(?!drive-down)`:current')" size="2"></ftui-icon>
  </ftui-button>
</ftui-row>
  <ftui-label>{{label}}</ftui-label>
<ftui-row></ftui-row> <!-- Abstände verringern -->

content-rollo.html

Code Auswählen

<!-------------------------------------------------------------------------------->
<!-- Content: Rollo (SonOff DualR3)
<!-- REGEX Info: Regex pattern will be expand to: ('^' + pattern + '$')) 
<!-------------------------------------------------------------------------------->
<ftui-row> 
  <ftui-button shape="circle" color="current" fill="none" (value)="map('on:0, off:-1') | set {{device}}">
    <ftui-icon name="angle-up" size="2" [color]="{{device}}:POWER1 | map('ON:warning, `.*`:current')"></ftui-icon>
  </ftui-button>
  <ftui-circlemenu direction="vertical"> <!-- step statt map wenn zwischenwerte ignoriert werden sollen -->
    <ftui-icon path="../images/openautomation" [name]="{{device}}:{{var}} | step('
      100:fts_shutter_0, 90:fts_shutter_10, 80:fts_shutter_20, 70:fts_shutter_30, 60:fts_shutter_40, 50:fts_shutter_50,
	  40:fts_shutter_60, 30:fts_shutter_70, 20:fts_shutter_80, 10:fts_shutter_90,  0:fts_shutter_100')">
    </ftui-icon>  
    <ftui-button shape="circle" fill="outline" (value)="{{device}}" states="0"   color="light">Auf</ftui-button>
    <ftui-button shape="circle" fill="outline" (value)="{{device}}" states="30"  color="light">30%</ftui-button>
    <ftui-button shape="circle" fill="outline" (value)="{{device}}" states="50"  color="light">50%</ftui-button>
    <ftui-button shape="circle" fill="outline" (value)="{{device}}" states="80"  color="light">80%</ftui-button>
    <ftui-button shape="circle" fill="outline" (value)="{{device}}" states="100" color="light">Zu </ftui-button>
  </ftui-circlemenu>  
  <ftui-button shape="circle" color="current" fill="none" (value)="map('on:100, off:-1') | set {{device}}">
    <ftui-icon name="angle-down" size="2" [color]="{{device}}:POWER2 | map('ON:warning, `.*`:current')"></ftui-icon>
  </ftui-button>
</ftui-row>
<ftui-label>{{label}}</ftui-label>
<ftui-row></ftui-row> <!-- Abstände verringern -->

content-abfall.html

Code Auswählen

<!-------------------------------------------------------------------------------->
<!-- Content: Abfall
<!-- REGEX Info: Regex pattern will be expand to: ('^' + pattern + '$')) 
<!-------------------------------------------------------------------------------->
<ftui-icon name="trash" color="{{color}}" [class-name]="{{device}}:{{var}} | map('`0`|`1`:hop, `.*`:')">
<!--<ftui-badge color="danger" [text]="{{device}}:{{var}} | replace('0','heute')"></ftui-badge>-->
    <ftui-badge color="danger" [text]="{{device}}:{{var}}"></ftui-badge>
</ftui-icon>

Kuehnhackel · 28 September 2023, 16:21:03

Hi Jones,

danke dafür.

LG Ralf

M.Piet · 29 September 2023, 14:06:04

Dann schließe ich mich mal an und zeige meine beiden Hauptseiten.

Noch nicht alles im Details so wie ich es will, aber die wichtigsten Sachen gehen und der WAF ist auch OK:

cruser1800 · 22 Oktober 2023, 18:45:26

Zitat von: M.Piet am 29 September 2023, 14:06:04Dann schließe ich mich mal an und zeige meine beiden Hauptseiten.

Noch nicht alles im Details so wie ich es will, aber die wichtigsten Sachen gehen und der WAF ist auch OK:

Hallo M.Piet,

mich würde mal die Fritzbox-Seite interessieren. Bei mir wird leider nach dem Schalten des WLAN keine Änderung angezeigt!
Wie ist es bei dir, oder welche Lösung hast du dafür?

Danke

Gruß Lutz

M.Piet · 26 Oktober 2023, 14:49:35

Hallo Lutz,
ich habe keine eigene Fritzbox Seite. Ich nutze nur die Anruferliste.

...also sofern überhaupt mal jemand auf Festnetz anruft.

FHEM Forum

[FTUI3] Meine config

Jones

Kuehnhackel

M.Piet

cruser1800

M.Piet