FTUI3 Testinstanz: Unterschied zwischen den Versionen

Aus FHEMWiki
(Die Seite wurde neu angelegt: „== Zielsetzung == Bei FTUI3 Updates werden unter Umständen Dinge angepasst, die bestehende Funktionen beeinträchtigen. Wie kann ich meine FTUI3 Installation…“)
 
 
Zeile 7: Zeile 7:
So gelangen die Updates und auch eigene Weiterentwicklungen zunächst auf meine Testgeräte, bevor ich sie dann auf die Enduser ausgerollt werden. (per Kopie des ftui Folders auf den ftui_stable folder)
So gelangen die Updates und auch eigene Weiterentwicklungen zunächst auf meine Testgeräte, bevor ich sie dann auf die Enduser ausgerollt werden. (per Kopie des ftui Folders auf den ftui_stable folder)


'''Optional''': Um die Versionen noch besser unterscheidbar zu machen, kann noch folgende Erweiterung vorgenommen werden. Damit erreicht man, dass in der Test-Version ein entsprechendes Banner angezeigt wird, was in der produktiven Instanz dann nicht hinzugefügt wird. Außerdem zeigt die Testversion auch Toast Messages an.  
Das folgende Skript selber muss in den html body, am besten als erste Anweisung.  


<syntaxhighlight lang="html">
<script>
  if (this.location.pathname.includes("ftui_stable")) {
    document.head.innerHTML += '<meta name="toast" content="0">';
  } else {
    document.head.innerHTML += '<meta name="toast" content="1">';
    document.head.innerHTML += '<meta name="toast_position" content="topLeft">';
    document.body.innerHTML += '<div id="div1">Test-Version</div>';
  }
</script>
</syntaxhighlight>
'''Optional''': Um die Versionen noch besser unterscheidbar zu machen, kann noch folgende Erweiterung vorgenommen werden. Damit erreicht man, dass in der Test-Version ein entsprechendes Banner angezeigt wird, was in der produktiven Instanz dann nicht hinzugefügt wird. Außerdem zeigt die Testversion auch Toast Messages an.
Ein CSS File (hier user.css) muss existieren und auch im html header verlinkt sein:


<syntaxhighlight lang="html">
<syntaxhighlight lang="html">
<script>
<link href="user.css" rel="stylesheet" type="text/css" />
    var url = $(location).attr('href');
    var pathname = $(location).attr('pathname');
    if (pathname.includes("ftui_stable")) {
      $('<meta name="toast" content="0">').appendTo('head');
    } else {
      $('<div id="div1">Test-Version</div>').appendTo('body');
      $('<meta name="toast" content="1">').appendTo('head');
      $('<meta name="toast_position" content="topLeft">').appendTo('head');
    }
  </script>
</syntaxhighlight>
</syntaxhighlight>


Das hinzugefügte DIV sollte man noch so stylen, z.B. durch hinzufügen des folgenden Eintrags in einer user.css Datei:
In dieses CSS File schreibt man anschließend den folgenden Code, um damit das hinzugefügte DIV noch zu stylen.<syntaxhighlight lang="css">
 
<syntaxhighlight lang="css">
#div1 {
#div1 {
     color: red;
     color: red;
Zeile 39: Zeile 42:
     top: 10px;
     top: 10px;
}
}
</syntaxhighlight>
</syntaxhighlight>'''Wichtig''': Der Ordner muss '''ftui_stable''' heißen oder man muss das Skript anpassen.

Aktuelle Version vom 8. Januar 2023, 21:31 Uhr

Zielsetzung

Bei FTUI3 Updates werden unter Umständen Dinge angepasst, die bestehende Funktionen beeinträchtigen. Wie kann ich meine FTUI3 Installation davor schützen?

Umsetzung

Um den Betrieb möglichst wenig zu gefährden und die Akzeptanz in der Familie zu erhöhen, kopiert man das ftui Verzeichnis auf ein ftui_stable (siehe auch Quelltext unten) Verzeichnis und verwendet in Zukunft dieses Verzeichnis, um es auf den "produktiven" Geräten (Tablet im Wohnzimmer, Handy der Ehefrau usw.) anzuzeigen. Auf meinen "Testgeräten" (eigenes Handy, eigener PC) läuft immer das FTUI3 im Standard FTUI Verzeichnis.

So gelangen die Updates und auch eigene Weiterentwicklungen zunächst auf meine Testgeräte, bevor ich sie dann auf die Enduser ausgerollt werden. (per Kopie des ftui Folders auf den ftui_stable folder)

Das folgende Skript selber muss in den html body, am besten als erste Anweisung. 

<script>
   if (this.location.pathname.includes("ftui_stable")) {
     document.head.innerHTML += '<meta name="toast" content="0">';
   } else {
     document.head.innerHTML += '<meta name="toast" content="1">';
     document.head.innerHTML += '<meta name="toast_position" content="topLeft">';
     document.body.innerHTML += '<div id="div1">Test-Version</div>';
   }
</script>

Optional: Um die Versionen noch besser unterscheidbar zu machen, kann noch folgende Erweiterung vorgenommen werden. Damit erreicht man, dass in der Test-Version ein entsprechendes Banner angezeigt wird, was in der produktiven Instanz dann nicht hinzugefügt wird. Außerdem zeigt die Testversion auch Toast Messages an.

Ein CSS File (hier user.css) muss existieren und auch im html header verlinkt sein: 

<link href="user.css" rel="stylesheet" type="text/css" />

In dieses CSS File schreibt man anschließend den folgenden Code, um damit das hinzugefügte DIV noch zu stylen.

#div1 {
    color: red;
    text-align: center;
    z-index: 99;
    height: 30px;
    width: 100px;
    background-color: pink;
    right: 10px;
    position: absolute;
    padding: 10px;
    top: 10px;
}

Wichtig: Der Ordner muss ftui_stable heißen oder man muss das Skript anpassen.

Abgerufen von „http://wiki.fhem.de/w/index.php?title=FTUI3_Testinstanz&oldid=37930“