[FTUI3] Test- und Produktivversion

[andreas_r]

Hallo zusammen,

ich betreibe derzeit eine FTUI3 Installation und habe diese auf meinem Tablet im Einsatz. Um den Betrieb möglichst wenig zu gefährden und die Akzeptanz in der Familie zu erhöhen, habe ich das ftui Verzeichnis auf ein ftui_stable Verzeichnis kopiert und zeige dieses auf meinen "produktiven" Geräten (Tablet im Wohnzimmer, Handy meiner Frau usw.) an.
Auf meinen "unwichtigen Geräten" (eigenes Handy, eigener PC) läuft immer das FTUI im Standard FTUI Verzeichnis.

So gelangen die Updates und auch meine Weiterentwicklungen zunächst auf meine eigenen Geräte, wo ich sie dann eine Zeit lang teste, bevor ich sie dann auf die Familie ausrolle. (per Kopie des ftui Folders auf den ftui_stable folder)

Falls das vielleicht für jemand interessant ist:

Folgenden Code habe ich zudem in der Seite untergebracht:

Code Auswählen Erweitern


<script>
    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>


in der User.css

Code Auswählen Erweitern


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


Das Skript prüft, ob die aufgerufene Instanz die Test oder die produktive ist und blendet dann zum einen einen Banner ein, der zeigt, dass es sich um die Testversion handelt und zum anderen die Toast Funktion aktiviert. Produktiv sind dann die Toast Messages deaktiviert und es wird logischerweise kein Banner angezeigt.

Vielleicht kann das ja jemand als Anregung brauchen.

VG, Andreas

[meier81]

Hi Andreas,

finde die Idee echt gut, habe die eben mal auf die Schnelle versucht nachzubauen, funktioniert aber leider bei mir nicht, weder der Banner noch die Deaktivierung der Toast-Messages.

Hab eine neue User.css angelegt mit genau dem Inhalt von dir, diese dann oben in der index.html definiert und in der index.html fast ganz oben in index dein script eingefügt, es tut sich aber leider nichts.

Hast du noch eine Idee?

Gruß Markus

[OdfFhem]

Grundsätzlich kann die Idee wirklich nützlich sein.

Ich würde aber ungern auf jQuery zurückgreifen wollen, da auch FTUI3 selbst auf reines JavaScript setzt.

[mr_petz]

jQuery-freies Script für FTUI3
Muss in den body tag:

Code Auswählen Erweitern


  <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>

pathname 'ftui_stable' muss existieren oder angepasst werden...
Dann noch die css von #1 im style tag oder user.css.

LG

[andreas_r]

Ja, das sollte man wohl noch erwähnen, sorry:

1) Die Seite muss einen Verweis auf jquery (im html header) haben:
<script src="modules/jquery-3.6.1.min.js"
    integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>

2) Das Skript selber muss - wie mr_petz richtig sagt - in den html body, am besten als erste Anweisung.

3) Das CSS File (hier user.css) muss existieren und auch im html header verlinkt sein:
<link href="user.css" rel="stylesheet" type="text/css" />

4) der Ordner muss ftui_stable heissen oder man muss das Skript anpassen.

1) und 4) hatte ich leider unterschlagen, weil das bei mir "sowieso" schon in der Seite enthalten war.

VG, Andreas

[OdfFhem]

1) Die Seite muss einen Verweis auf jquery (im html header) haben:

- Greift man auf das jQuery-freie script-Tag in Antwort #3 zurück, dann kann man 1) ignorieren

- Greift man auf das auf jQuery zurückgreifende script-Tag aus dem ersten Beitrag zurück, dann hat der "Normalnutzer" vermutlich ein Problem, da jQuery nicht mit FTUI3 ausgeliefert wird ... weitere Infos wären u.U. hilfreich.

[meier81]

jQuery-freies Script für FTUI3
Muss in den body tag:

Code Auswählen Erweitern


  <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>

pathname 'ftui_stable' muss existieren oder angepasst werden...
Dann noch die css von #1 im style tag oder user.css.

LG

So, hab das heute Abend mal so umgesetzt, funktioniert einwandfrei und ohne jQuery 

Muss das noch ein bisschen verfeinern und anpassen, denke das ist aber ein super Weg eine Produktiv- und eine Entwicklungsseite zu machen bzw. zu unterscheiden.

LG Markus

[andreas_r]

@Markus: Wenn Du noch weitere Ideen hast, bitte gern auch hier posten. Ich bin gespannt, was sich bei dem Ansatz noch optimieren lässt.

VG, Andreas

[mr_petz]

@andreas_r
Es ist schön das du im wiki die Einträge erstellst.
Einer muss ja mal anfangen...
https://wiki.fhem.de/wiki/FTUI3_Testinstanz
Ich würde aber wie hier in diesen Posts erwähnt auf ein jQuery-freies Script für FTUI3 verweisen.
https://forum.fhem.de/index.php/topic,129881.msg1242708.html#msg1242708

LG

[andreas_r]

Danke für den HInweis, ist erledigt.

VG

[Eisix]

Hallo,

in FTUI2 gab es ftui.version, gibt es was vergleichbares unter FTUI3?

Code Auswählen Erweitern


       <div class="tiny left top inline" data-bind="ftui.version"></div>


Gruß
Eisix

[OdfFhem]

gibt es was vergleichbares unter FTUI3?

"ftuiApp.version" sollte funktionieren ...

[Eisix]

so tut es nicht

Code Auswählen Erweitern


                                        <div class="size-0" data-bind="ftui.version"></div>

andere syntax?

[mr_petz]

so tut es nicht

Code Auswählen Erweitern


                                        <div class="size-0" data-bind="ftui.version"></div>

andere syntax?

Bei mir läuft es so:

Code Auswählen Erweitern


<script>
  loadFtuiVersion()
  function loadFtuiVersion() {
    clearTimeout(this.wait);
    if (typeof ftuiApp === "undefined") {
        this.wait = setTimeout(()=>loadFtuiVersion(),10);
    } else {
      clearTimeout(this.wait);
      ftuiversion.innerText = ftuiApp.version;
    }
  };
</script>
<ftui-label id="ftuiversion"></ftui-label>


LG

[OdfFhem]

"ftuiApp.version" steht allgemein zur Verfügung.
Um auf gebräuchliche FTUI3-Art darauf zugreifen zu können, benötigt man z.B. ein Event ...

Beispiele:

Code Auswählen Erweitern


  <ftui-label [text]="ftui-isDark | ()=>ftuiApp.version"></ftui-label>

  oder

  <ftui-label [text]="device:reading | ()=>ftuiApp.version"></ftui-label>

Ergebnis ist derzeit: 3.3.0