FTUI 3 nach FHEM update Syntax Error

Begonnen von Schniebi, 19 April 2026, 19:50:42

Vorheriges Thema - Nächstes Thema
Drucken
Nach unten Seiten1
Benutzer-Aktionen

Schniebi

19 April 2026, 19:50:42
Hallo,

Ich habe heute ein updat von FHEM durchgeführt. Seit dem habe ich folgenden Fehler auf den Tablet UIs:

FHEM Command failed
SyntaxError: JSON.parse: unexpected end od data at line 1column 1 of the JSON data

Refresh request failed: Result is null

Es werden viele Sachen nicht mehr dar gestellt.

Hier mal meine HTML:

<!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" />
  <link href="themes/retro-theme.css" rel="stylesheet"
        ftui-binding [disabled]="local:theme | map('`.*`:true, retro:false') | toBool()">

  <!-- 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 Schniebi</title>
</head>

<body>
  <ftui-speak [text]="speakFlur:state"></ftui-speak>
  <ftui-grid base-width="106" base-height="85" margin="5" shape="round" color="success">

      <ftui-grid-tile row="1" col="1" height="3" width="5" shape="round" color="dark">
        <ftui-row width="80%" height="0%">
          <ftui-clock format="ee" class="size-9 thin" unit="."></ftui-clock>
          <ftui-clock format="DD.MM.YYYY" class="size-9 thin"></ftui-clock>
        </ftui-row>
        <ftui-row width="90%" height="0%">
          <ftui-clock format="hh:mm" class="size-11 thin"></ftui-clock>
          <ftui-label class="size-11 thin">Uhr</ftui-label>
        </ftui-row>
      </ftui-grid-tile>

      <ftui-grid-tile row="4" col="1" height="2" width="5" color="dark">
        <header class="thin"><ftui-label size="3" color="orange">WETTERVOHERSAGE</ftui-label></header>
         <ftui-row width="80%" height="10%">
          <ftui-label size="4">Heute</ftui-label>
         <ftui-weather icon-set="meteocons" provider="proplanta" [condition]="DWD_Wetter:fc0_3_wwd" size="1"></ftui-weather>
           <ftui-label [text]="DWD_Wetter:fc0_Tn | round(0)" size="4" unit="°C">min.    </ftui-label>
           <ftui-label [text]="DWD_Wetter:fc0_Tx | round(0)" size="4" unit="°C">max.    </ftui-label>
        </ftui-row>
        <ftui-row width="80%" height="10%">
          <ftui-label size="4">Morgen</ftui-label>
          <ftui-weather icon-set="meteocons" provider="DWD" [condition]="DWD_Wetter:fc1_3_wwd" size="1"></ftui-weather>
           <ftui-label [text]="DWD_Wetter:fc1_Tn | round(0)" size="4" unit="°C">min.    </ftui-label>
           <ftui-label [text]="DWD_Wetter:fc1_Tx | round(0)" size="4" unit="°C">max.    </ftui-label>
        </ftui-row>
      </ftui-grid-tile>
    
     <ftui-grid-tile row="4" col="6" height="2" width="2" color="dark">
        <header class="thin"><ftui-label size="3" color="orange">POOL</ftui-label></header>
        <ftui-column width="80%" height="10%">
          <ftui-column align-items="center">
             <ftui-label [text]="ESPEasy_Pool_Temp_Pool:temperature | fix(1)" class="size-8 thin" unit="°C"></ftui-label>
          </ftui-column>
          
       <ftui-row width="65%">
          <ftui-column height="10%">
             <ftui-icon class="size-1" [name]="ESPEasy_Pool_Pumpe:State | map('off:sani_garden_pump, on:sani_garden_pump')" [color]="ESPEasy_Pool_Pumpe:State | map('off:gray, on:green')"></ftui-icon>
          </ftui-column>
          <ftui-column height="10%">
             <ftui-icon class="size-1" [name]="ESPEasy_Pool_Heizung:State | map('off:sani_heating, on:sani_heating')" [color]="ESPEasy_Pool_Heizung:State | map('off:gray, on:green')"></ftui-icon>
          </ftui-column>
       </ftui-row>
      </ftui-column>     
      
   <ftui-column>
      <ftui-row width="65%">
         <ftui-column>
            <ftui-label size="1">Pumpe</ftui-label>
         </ftui-column>
         <ftui-column>
            <ftui-label size="1">Heizung</ftui-label>
         </ftui-column>
      </ftui-row>
   </ftui-column>
      </ftui-grid-tile>
    
     <ftui-grid-tile row="4" col="8" height="4" width="1" color="dark">
        <header class="thin"><ftui-label size="3" color="orange">ESPs</ftui-label></header>
      <ftui-icon class="size-0" [name]="MQTT2_ESP_Strom:LWT | map('Offline:it_memory, Online:it_memory')" [color]="MQTT2_ESP_Strom:LWT | map('Offline:red, Online:green')"></ftui-icon>
       <ftui-label size="1">Strom</ftui-label>
       <ftui-icon class="size-0" [name]="ESPEasy_Pool_state:presence | map('absent:it_memory, present:it_memory')" [color]="ESPEasy_Pool_state:presence | map('absent:red, present:green')"></ftui-icon>
       <ftui-label size="1">Pool</ftui-label>
       <ftui-icon class="size-0" [name]="ESPEasy_Aquarium_state:presence | map('absent:it_memory, present:it_memory')" [color]="ESPEasy_Aquarium_state:presence | map('absent:red, present:green')"></ftui-icon>
       <ftui-label size="1">Aquarium</ftui-label>
       <ftui-icon class="size-0" [name]="ESPEasy_MV_State:presence | map('absent:it_memory, present:it_memory')" [color]="ESPEasy_MV_State:presence | map('absent:red, present:green')"></ftui-icon>
       <ftui-label size="1">Magnetventile</ftui-label>
       <ftui-icon class="size-0" [name]="ESPEasy_Temp_Schlafzimmer_state:presence | map('absent:it_memory, present:it_memory')" [color]="ESPEasy_Temp_Schlafzimmer_state:presence | map('absent:red, present:green')"></ftui-icon>
       <ftui-label size="1">Schlafzimmer</ftui-label>
       <ftui-icon class="size-0" [name]="ESPEasy_Temp_Lena_state:presence | map('absent:it_memory, present:it_memory')" [color]="ESPEasy_Temp_Lena_state:presence | map('absent:red, present:green')"></ftui-icon>
       <ftui-label size="1">Lena</ftui-label>   
      </ftui-grid-tile>
    
     <ftui-grid-tile row="4" col="9" height="2" width="1" color="dark">
        <header class="thin"><ftui-label size="3" color="orange">MÄHNDY</ftui-label></header>
        <ftui-icon class="size-4" [name]="dummy_Landroid_Steuerung:state | map('off:scene_robo_lawnmower, on:scene_robo_lawnmower')" [color]="dummy_Landroid_Steuerung:state | map('off:gray, on:green')"></ftui-icon>
      <ftui-label size="1" [text]="dummy_Landroid_Steuerung:state | map('off:Partymodus, on:Aktiv')"></ftui-label>
      </ftui-grid-tile>
     
      <ftui-grid-tile row="6" col="1" height="1" width="2" color="dark">
       <header class="thin"><ftui-label size="3" color="orange">AUSSENTEMPERATUR</ftui-label></header>
        <ftui-label [text]="Gartenpumpe:temperature_0 | fix(1)" class="size-7 thin" unit="°C"></ftui-label>
      </ftui-grid-tile>
     
      <ftui-grid-tile row="7" col="1" height="1" width="2" color="dark">
       <header class="thin"><ftui-label size="3" color="orange">INNENTEMPERATUR</ftui-label></header>
        <ftui-label [text]="HM_54BF41:temperature | fix(1)" class="size-7 thin" unit="°C"></ftui-label>
      </ftui-grid-tile>
    
     <ftui-grid-tile row="6" col="3" height="2" width="5" color="dark">
      <header class="thin"><ftui-label size="3" color="orange">ABFALLTERMINE</ftui-label></header>
      <ftui-column>
      <ftui-row margin-top="3" margin-bottom="3" width="70%">
       <ftui-label size="3">Biotonne:</ftui-label>
         <ftui-label [text]="abfall_Abfall:calendar_Abfall_Biotonne_date" size="3"></ftui-label>
       <ftui-label [text]="abfall_Abfall:calendar_Abfall_Biotonne_weekday" size="3"></ftui-label>
      </ftui-row>
      </ftui-column>
      <ftui-column>
      <ftui-row margin-top="3" margin-bottom="3" width="70%">
       <ftui-label size="3">Gelber Sack:</ftui-label>
         <ftui-label [text]="abfall_Abfall:calendar_Abfall_GelberSack_date" size="3"></ftui-label>
       <ftui-label [text]="abfall_Abfall:calendar_Abfall_GelberSack_weekday" size="3"></ftui-label>
      </ftui-row>
      </ftui-column>
      <ftui-column>
      <ftui-row margin-top="3" margin-bottom="3" width="70%">
       <ftui-label size="3">Papiertonne:</ftui-label>
         <ftui-label [text]="abfall_Abfall:calendar_Abfall_Papiertonne_date" size="3"></ftui-label>
       <ftui-label [text]="abfall_Abfall:calendar_Abfall_Papiertonne_weekday" size="3"></ftui-label>
      </ftui-row>
      </ftui-column>
      <ftui-column>
      <ftui-row margin-top="3" margin-bottom="3" width="70%">
       <ftui-label size="3">Restabfall:</ftui-label>
         <ftui-label [text]="abfall_Abfall:calendar_Abfall_Restabfall_date" size="3"></ftui-label>
       <ftui-label [text]="abfall_Abfall:calendar_Abfall_Restabfall_weekday" size="3"></ftui-label>
      </ftui-row>
       </ftui-column>   
      </ftui-grid-tile>
     
      <ftui-grid-tile row="1" col="6" height="3" width="3" color="dark">
        <header class="thin"><ftui-label size="3" color="orange">SOLAR</ftui-label></header>
        <ftui-column>
         <ftui-row margin-top="3" margin-bottom="3" width="80%">
            <ftui-column align-items="left">
            <ftui-label text="Ersparnis:" size="4"></ftui-label>
            </ftui-column>
             <ftui-column align-items="right">
            <ftui-label [text]="dummy_Stromersparnis_gesamt:Preis | fix(2)" size="4" unit="€"></ftui-label>
            </ftui-column>
         </ftui-row>
         <ftui-row margin-top="3" margin-bottom="3" width="80%">
            <ftui-column align-items="left">
            <ftui-label text="Momentan:" size="4"></ftui-label>
            </ftui-column>
             <ftui-column align-items="right">
            <ftui-label [text]="dummy_PV_Leistung_Momentan:Leistung | round(0)" size="4" unit="W"></ftui-label>
            </ftui-column>
         </ftui-row>
         <ftui-row margin-top="3" margin-bottom="3" width="80%">
            <ftui-column align-items="left">
            <ftui-label text="Gesamt:" size="4"></ftui-label>
            </ftui-column>
             <ftui-column align-items="right">
            <ftui-label [text]="PV_Leistung_Gesamt:STATE | round(1)" size="4" unit="Kwh"></ftui-label>
            </ftui-column>
         </ftui-row>
         <ftui-row margin-top="3" margin-bottom="3" width="80%">
            <ftui-column align-items="left">
            <ftui-label text="Effektivität:" size="4"></ftui-label>
            </ftui-column>
             <ftui-column align-items="right">
            <ftui-label [text]="dummy_Effektivitaet:Prozent | round(1)" size="4" unit="%"></ftui-label>
            </ftui-column>
         </ftui-row>
         <ftui-row margin-top="3" margin-bottom="3" width="80%">
            <ftui-column align-items="left">
            <ftui-label text="Stromzähler:" size="4"></ftui-label>
            </ftui-column>
             <ftui-column align-items="right">
            <ftui-label [text]="StromzaehlerMomentan:state | round(0)" size="4" unit="W"></ftui-label>
            </ftui-column>
         </ftui-row>
         </ftui-column>
      </ftui-grid-tile>
    
     <ftui-grid-tile row="1" col="9" height="3" width="1" color="dark">
        <header class="thin"><ftui-label size="3" color="orange">ABFALL</ftui-label></header>
        <ftui-icon name="trash-o" size="7" [class-name]="dummy_Abfall_morgen:state  | step('0:``, 1:hop, 2:``')" [color]="dummy_Abfall_morgen:state  | step('0:gray, 1:orange, 2:gray')"></ftui-icon>
        </ftui-row>
        <ftui-row width="40%" height="0%">
         <ftui-label [text]="abfall_Abfall:next_weekday" size="1"></ftui-label>
        </ftui-row>
      </ftui-grid-tile>
    
     <ftui-grid-tile row="6" col="9" height="2" width="1" color="dark">
        <header class="thin"><ftui-label size="3" color="orange">NACHT-PV</ftui-label></header>
      <ftui-label class="size-5" [text]="MQTT2_solar_114184531895:power | round(0)" [color]="MQTT2_solar_114184531895:power | map('0.0:gray, .*:green')" unit="W"></ftui-label>
      </ftui-grid-tile>

   </ftui-grid>

</body>

</html>

Schniebi

#1
19 April 2026, 21:53:34
Zur Lösung kann ich schon mal beitragen das die ganzen Größenverhältnisse für Höhe und Breite,egal ob bei Schrift, Icons oder Grid nicht mehr stimmen und daher einige Sachen nicht mehr zu sehen sind/waren. Aber das Syntaxproblem bleibt weiterhin. Mir ist noch aufgefallen das auch Schaltflächen bei mir momentan nicht funktionieren. In dem Cod meiner index.html sind kein schaltflächen enthalten diese habe ich auf anderen Tablets, Handys.

Medel

#2
20 April 2026, 10:30:45
Habe es so gelöst, bei mir geht es wieder, außer dass einige Buttons oval sind, hat aber mit der geänderten css zu tun.

https://github.com/knowthelist/ftui/issues/66#issuecomment-4274457136

Schniebi

#3
20 April 2026, 17:32:11
Wo finde ich diese Datei in die das eingefügt werden muss?

Schniebi

#4
20 April 2026, 18:40:05
Also ich habe alles gefunden und umgestellt. Es funktioniert wieder alles wie gewohnt. Noch mal zur Lösung etwas ausführlicher für alle die nun nicht jeden Tag Java programmieren.

Ihr sucht euch die Datei fhem.service.js und öffnet diese in einem Editor (Notepad).
Bei mir lag sie unter opt/fhem/www/ftui/modules/ftui

1. Im constructor() direkt nach den Event-Subjects
Suche diesen Bereich:
// Initialize local event subjects
this.debugEvents = new Subject();
this.errorEvents = new Subject();
und ändere ihn zu:
// Initialize local event subjects
this.debugEvents = new Subject();
this.errorEvents = new Subject();
this.fetchCSrf();
also genau direkt darunter.

2. Die Funktion fetchCSrf() unten ersetzen
Du hast aktuell bereits diese Funktion:
fetchCSrf() {
  return fetch(this.config.fhemDir + '?XHR=1', {
    cache: 'no-cache',
  })
    .then(response => {
      this.config.csrf = response.headers.get('X-FHEM-csrfToken');
      log(1, 'Got csrf from FHEM:' + this.config.csrf);
    });
}
Diese komplett ersetzen durch:
async fetchCSrf() {
  return await fetch(this.config.fhemDir + '?XHR=1', {
    cache: 'no-cache',
  })
    .then(response => {
      this.config.csrf = response.headers.get('X-FHEM-csrfToken');
      log(1, 'Got csrf from FHEM:' + this.config.csrf);
    });
}
Das war bei mir alles und die Tablet UI3 lief wieder wie gewohnt. Ein paar großen der Schrift und der Icons habe ich noch angepasst.

Das War es. Gelöst. Danke für den Denkanstoß.
Drucken
Nach oben Seiten1
Benutzer-Aktionen