Webinterface aktuallisiert sich nicht

Larusso · 02 Dezember 2018, 18:58:36

Hallo an die ganze Community,

ich beschäftige mich gerade ein wenig mit FTUI und stehe vor einem Problem.

Ich habe mir ein Grundgerüst mit Menübar links erstellt und in einer Seite meine Thermostate eingebunden. Wenn ich das Tabletui über mein Iphone Handy öffne wird fast immer das aktuelle UI mit den Reglern der Thermostate angezeigt. Öffne ich allerdings das ganze auf meinem PC und dabei ist es egal in welchem Browser ich das mache (Opera, IExplorer, Chrome) werden mir meine Thermostaticons wie unten angezeigt. Kann sich mal jemand meine html Datei der Thermostatseite anschauen und mir einen Tipp geben. Das Problem was ich habe ist folgendes: jedesmal wenn ich Änderungen an meinem UI Vornehme, möchte ich mir diese Änderungen live Anschauen um zu sehen ob alles klappt, wenn mir aber am PC im Browser und teilweise auch auf meinem Handy keine Aktualisierung angezeigt wird, weis ich nicht ob ich einen Fehler in meinem Code habe oder einfach nur wider nichts aktualisiert angezeigt wird. Zum Mäusemelken. Hier mal meine Seiten:

Index-Seite:

Code Auswählen

<!DOCTYPE html>
<html>
<head>
  <!--
       * Version: 1.4.4
       * Requires: jQuery v1.7+, font-awesome, jquery.gridster, jquery.toast
       * URL: https://github.com/knowthelist/fhem-tablet-ui
       *
       * Copyright (c) 2015 Mario Stephan <mstephan@shared-files.de>
       * Under MIT License (http://www.opensource.org/licenses/mit-license.php)
      -->
  <!-- Ipad Air Auflösung von 2048 x 1536 Pixeln  -->
      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
      <meta name="widget_base_width" content="116">
      <meta name="widget_base_height" content="131">
      <meta name="mobile-web-app-capable" content="yes">
      <meta name="apple-mobile-web-app-status-bar-style" content="black" />
      <meta name="apple-mobile-web-app-capable" content="yes">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="longpoll" content="1">
      <meta name="debug" content="0">

      <link rel="stylesheet" href="/fhem/tablet/lib/jquery.gridster.min.css" />
      <link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui.css" />
      <link rel="stylesheet" href="/fhem/tablet/lib/font-awesome.min.css" />
      <link rel="stylesheet" href="/fhem/tablet/lib/jquery.toast.min.css" />
      <link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui-user.css" />

      <script src="/fhem/pgm2/jquery.min.js" defer></script>
      <script src="/fhem/tablet/lib/jquery.toast.min.js" defer></script>
      <script src="/fhem/tablet/lib/jquery.gridster.min.js" defer></script>
      <script src="/fhem/tablet/js/fhem-tablet-ui.min.js" defer></script>

      <title>FHEM-Tablet-UI</title>
  </head>
  <body>
    <div data-type="clicksound"
        data-sound='["ion-tap", "ion-water-droplet-2", "ion-button-tiny", "ion-cd-tray", "ion-water-droplet-3"]'
        data-bind-to='["+knob", "+circlemenu-outer", "+button", "+circlemenu-center", "+slider"]'
        data-length='[200,300,200,1400,200]'
        data-volume="70"
        ></div>

  <div class="gridster">
<ul>

<li data-row="1" data-col="1" data-sizex="1" data-sizey="6" data-template="/fhem/tablet/nav_left.html"></li>






</ul>
</div>
</body>
</html>

die Menü-Seite

Code Auswählen

<html>
<body>
    <header>RÄUME</header>
    <div class="cell">
        <div data-type="pagetab" data-url="/fhem/tablet/index.html"  data-icon="fa-home" class="cell"></div>
        <div data-type="pagetab" data-url="/fhem/tablet/outdoor.html"  data-icon="fa-sun-o" class="cell"></div>
        <div data-type="pagetab" data-url="/fhem/tablet/heating.html"  data-icon="fa-fire" class="cell"></div>
        <div data-type="pagetab" data-url="/fhem/tablet/lamp.html"  data-icon="fa-lock" class="cell"></div>
        <div data-type="pagetab" data-url="/fhem/tablet/weather.html"  data-icon="fa-cloud" class="cell"></div>
        <div data-type="pagetab" data-url="/fhem/tablet/stats.html"  data-icon="fa-bar-chart" class="cell"></div>
        <div data-type="pagetab" data-url="/fhem/tablet/indextest.html"  data-icon="fa-home" class="cell"></div>
    </div>
</body>
</html>

und noch die Thermostat-Seite

Code Auswählen

<!DOCTYPE html>
<html>
<head>
	<title>FHEM-Tablet-UI</title>

	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<meta name="widget_base_width" content="60">
	<meta name="widget_base_height" content="65">
	<meta name="mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-capable" content="yes">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="longpoll" content="1"> <!-- 1=longpoll;0=shortpoll every 30sec -->
	<meta name="debug" content="1"> <!-- 1=output to console;0=not output -->
	<meta name="widget_margin" content="3">

	<meta name="gridster_disable" content="1">

	<link rel="stylesheet" href="/fhem/tablet/lib/jquery.gridster.min.css" />
	<link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui.css" />
	<link rel="stylesheet" href="/fhem/tablet/lib/font-awesome.min.css" />
	<link rel="stylesheet" href="/fhem/tablet/lib/jquery.toast.min.css" />
	<link rel="stylesheet" href="/fhem/tablet/lib/powerange.min.css" />
	<link rel="stylesheet" href="/fhem/tablet/lib/openautomation.css" />
	<link rel="stylesheet" href="/fhem/tablet/lib/thermostat.css" />
    <!-- define your personal style here, it wont be overwritten  -->
    <link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui-user.css" />

	<script type="text/javascript" src="/fhem/pgm2/jquery.min.js"></script>
    <script type="text/javascript" src="/fhem/tablet/lib/jquery.knob.mod.min.js"></script>
	<script type="text/javascript" src="/fhem/tablet/lib/jquery.toast.min.js"></script>
	<script type="text/javascript" src="/fhem/tablet/lib/jquery.circlemenu.js"></script>
	<script type="text/javascript" src="/fhem/tablet/lib/powerange.min.js"></script>
	<script type="text/javascript" src="/fhem/tablet/lib/jquery.gridster.min.js"></script>
    <script type="text/javascript" src="/fhem/tablet/lib/fa-multi-button.min.js"></script>
	<script type="text/javascript" src="/fhem/tablet/js/fhem-tablet-ui.js"></script>

</head>
<body>
	<div data-type="clicksound"
        data-sound='["ion-tap", "ion-water-droplet-2", "ion-button-tiny", "ion-cd-tray", "ion-water-droplet-3"]'
        data-bind-to='["+knob", "+circlemenu-outer", "+button", "+circlemenu-center", "+slider"]'
        data-length='[200,300,200,1400,200]'
        data-volume="70"
        ></div>

	<div class="gridster">

		<ul>
			<li data-row="1" data-col="1" data-sizex="1" data-sizey="6" data-template="/fhem/tablet/nav_left.html"></li>

      <!-- Heizung_Esszimmer -->
      <li data-row="1" data-col="2" data-sizex="1" data-sizey="1">
          <Header>Esszimmer</header>
                  <div class="top-space-1x">
                  <br>
                  <div data-type="thermostat"
                    data-device="Thermostat_Esszimmer"
                    data-get="desiredTemperature"
                    data-temp="temperature"
                    data-set="desiredTemperature"
                    data-step="0.5"
                    data-min="5"
                    data-max="30"
                    data-subtype="MAX"
                    data-off="off"
                    class="normal">
              </div>
            </li>

      <!-- Heizung_Ankelidezimmer -->
      <li data-row="1" data-col="3" data-sizex="1" data-sizey="1">
          <Header>Ankleidezimmer</header>
						<div class="top-space-1x">
						<br>
						<div data-type="thermostat"
							data-device="Thermostat_Ankleidezimmer"
							data-get="desiredTemperature"
							data-temp="temperature"
							data-set="desiredTemperature"
							data-step="0.5"
							data-min="5"
							data-max="30"
							data-subtype="MAX"
							data-off="off"
							class="normal">
						</div>
            </li>

      <!-- Heizung_Badezimmer -->
      <li data-row="1" data-col="4" data-sizex="1" data-sizey="1">
          <Header>Badezimmer</header>
                  <div class="top-space-1x">
                  <br>
                  <div data-type="thermostat"
                    data-device="Thermostat_Badezimmer"
                    data-get="desiredTemperature"
                    data-temp="temperature"
                    data-set="desiredTemperature"
                    data-step="0.5"
                    data-min="5"
                    data-max="30"
                    data-subtype="MAX"
                    data-off="off"
                    class="normal">
              </div>
            </li>

      <!-- Heizung_Charline -->
      <li data-row="1" data-col="5" data-sizex="1" data-sizey="1">
          <Header>Charline</header>
                  <div class="top-space-1x">
                  <br>
                  <div data-type="thermostat"
                    data-device="Thermostat_Charline"
                    data-get="desiredTemperature"
                    data-temp="temperature"
                    data-set="desiredTemperature"
                    data-step="0.5"
                    data-min="5"
                    data-max="30"
                    data-subtype="MAX"
                    data-off="off"
                    class="normal">
              </div>
            </li>

      <!-- Heizung_Elternflur -->
      <li data-row="1" data-col="6" data-sizex="1" data-sizey="1">
          <Header>Elternflur</header>
                  <div class="top-space-1x">
                  <br>
                  <div data-type="thermostat"
                    data-device="Thermostat_Elternflur"
                    data-get="desiredTemperature"
                    data-temp="temperature"
                    data-set="desiredTemperature"
                    data-step="0.5"
                    data-min="5"
                    data-max="30"
                    data-subtype="MAX"
                    data-off="off"
                    class="normal">
              </div>
            </li>

      <!-- Heizung_Enna -->
      <li data-row="2" data-col="2" data-sizex="1" data-sizey="1">
          <Header>Enna</header>
                  <div class="top-space-1x">
                  <br>
                  <div data-type="thermostat"
                    data-device="Thermostat_Enna"
                    data-get="desiredTemperature"
                    data-temp="temperature"
                    data-set="desiredTemperature"
                    data-step="0.5"
                    data-min="5"
                    data-max="30"
                    data-subtype="MAX"
                    data-off="off"
                    class="normal">
              </div>
            </li>

      <!-- Heizung_Flur_Eingang -->
      <li data-row="2" data-col="3" data-sizex="1" data-sizey="1">
          <Header>Flur Eingang</header>
                  <div class="top-space-1x">
                  <br>
                  <div data-type="thermostat"
                    data-device="Thermostat_Flur_Eingang"
                    data-get="desiredTemperature"
                    data-temp="temperature"
                    data-set="desiredTemperature"
                    data-step="0.5"
                    data-min="5"
                    data-max="30"
                    data-subtype="MAX"
                    data-off="off"
                    class="normal">
              </div>
            </li>

      <!-- Heizung_Flur_Keller -->
      <li data-row="2" data-col="4" data-sizex="1" data-sizey="1">
          <Header>Flur Keller</header>
                  <div class="top-space-1x">
                  <br>
                  <div data-type="thermostat"
                    data-device="Thermostat_Flur_Keller"
                    data-get="desiredTemperature"
                    data-temp="temperature"
                    data-set="desiredTemperature"
                    data-step="0.5"
                    data-min="5"
                    data-max="30"
                    data-subtype="MAX"
                    data-off="off"
                    class="normal">
              </div>
            </li>

      <!-- Heizung_Schlafzimmer_li -->
      <li data-row="2" data-col="5" data-sizex="1" data-sizey="1">
          <Header>Schlafzimmer li</header>
                  <div class="top-space-1x">
                  <br>
                  <div data-type="thermostat"
                    data-device="Thermostat_Schlafzimmer_li"
                    data-get="desiredTemperature"
                    data-temp="temperature"
                    data-set="desiredTemperature"
                    data-step="0.5"
                    data-min="5"
                    data-max="30"
                    data-subtype="MAX"
                    data-off="off"
                    class="normal">
              </div>
            </li>

      <!-- Heizung_Schlafzimmer_re -->
      <li data-row="2" data-col="6" data-sizex="1" data-sizey="1">
          <Header>Schlafzimmer re</header>
                  <div class="top-space-1x">
                  <br>
                  <div data-type="thermostat"
                    data-device="Thermostat_Schlafzimmer_re"
                    data-get="desiredTemperature"
                    data-temp="temperature"
                    data-set="desiredTemperature"
                    data-step="0.5"
                    data-min="5"
                    data-max="30"
                    data-subtype="MAX"
                    data-off="off"
                    class="normal">
              </div>
            </li>


		</ul>
	</div>
</body>
</html>

Im Anhang sieht man dann die Ausgabe am PC und am Handy. Das kommische ist halt das selbst am Handy manchmal sofort aktuallisiert wird und manchmal sehe ich keine Änderung. Longpol habe ich testhalber auch schon mal geändert, ohne Erfolg. Ich spiele die geänderten html Dateien per WINSCP in den tablet Ordner auf meinem Raspberry, die Berechtigungen passen auch alle bei den neuen Dateien.

Wie man bei beiden Bildern sieht stellt der I-Explorer auch die Thermostate nicht richtig dar. Am Handy funktioniert es aber wie gesagt nicht immer wird es nach einer Änderung aktualisiert. Zum bearbeiten der html benutze ich Atom.

Vaddi · 04 Dezember 2018, 19:54:25

Hey,
zum einen sieht deine Adresszeile vom PC merkwürdig aus mit der # dazwischen,
da dein Aufruf ja nur data-url="/fhem/tablet/heating.html" enthält.
In der Regel verweist FTUI ja eh auf den /fhem/tablet/ Ordner, in welchem
deine htlm Datein sein sollten. Dort sollte auch deine heating.html sein und der Aufruf würde dann
einfach mit data-url="heating.html" erfolgen.
Zum anderen würde ich gerne wissen, was in FHEM in deinem WEB Deivce bei dem
Attribut longpoll eingestellt ist.

Ansonsten könntest du hier meine deine Ordnerstruktur zeigen.

curt · 05 Dezember 2018, 06:27:21

Zitat von: Larusso am 02 Dezember 2018, 18:58:36
ich beschäftige mich gerade ein wenig mit FTUI und stehe vor einem Problem.

Willkommen im Club.

Zitat von: Larusso am 02 Dezember 2018, 18:58:36
Das Problem was ich habe ist folgendes: jedesmal wenn ich Änderungen an meinem UI Vornehme, möchte ich mir diese Änderungen live Anschauen um zu sehen ob alles klappt,

Das komplette html-Konstrukt scheint aus mehreren Webseiten zu bestehen - es ist aber nur eine. Das ist html5 mit css3. Das bedeutet erstens, dass alternative Browser hakelig sind, vielleicht können die noch nicht alles. Zweitens -wichtiger- bedeutet das, dass nach jeder Deiner händischen Änderungen die Hauptseite neu laden (reload) musst.

Die nächste Baustelle ist dann, dass nicht alle Widgets veränderte Werte auch wirklich anzeigen. Typischer Verdachtsfall scheint mir das das Widget Switch zu sein. In dem entsprechenden DIV-Konstrukt mit dem Messwert musst Du "class" um das Attribut "nocache" erweitern. Und falls es dort "class" gar nicht gibt, wirst Du es dort einführen wollen.

Larusso · 05 Dezember 2018, 07:28:09

Danke euch beiden für die Hinweise, ich schau mir das am Wochenende mal an und gebe eine Rückmeldung zu den Fragen.

FHEM Forum

Webinterface aktuallisiert sich nicht

Larusso

Vaddi

curt

Larusso