[gelöst][FTUI3] Laden einer HTML Struktur und update per JS

Begonnen von Ellert, 14 August 2023, 01:19:27

Vorheriges Thema - Nächstes Thema

Ellert

Ich möchte eine Karte mit dem gefahrenen Weg eines Mähroboters in FTUI3 anzeigen und aktualisieren. Die Kartendaten erstellt das AutomowerConnect Modul.

Per get html wird das HTML Gerüst einmalig geladen und per Javascript wird die Karte aktualisiert, das funktioniert in FHEMWEB bereits und es gibt ein FTUI2 Widget ( http://forum.fhem.de/index.php/topic,131661.0.html ).

Das HTML-Gerüst kann ich anzeigen mit:
<script src="../pgm2/jquery.min.js"></script>
<script src="../pgm2/automowerconnect.js"></script>

<ftui-grid-tile row="1" col="1" height="9" width="4">
  <ftui-content id="amc_automowerconnect" [content]="am430x1 | getHTML('am430x1')"></ftui-content>
</ftui-grid-tile>
Allerdings wird bei jedem Event von am430x1 das HTML Gerüst neu geladen, das sollt nur einmal beim Aufruf der Seite erfolgen.
Bei bestimmten Events von am430x1 sollte ein Javascript ausgeführt werden

AutomowerConnectUpdateJsonFtui('/fhem/AutomowerConnect/am430x1/json')
Wie müsste ich das in FTUI3 realisieren?

Einmalig beim Laden der Seite HTML nachladen.
Aktualisieren bei einem bestimmten Event.





mr_petz

#1
Hi, ein bestimmtes Eventreading abonnieren erreichst du mit Bsp.:
[content]="am430x1:xyz | getHTML('am430x1')"

Edit:
Du kannst da auch noch ein map() dranhängen wo bestimmte Events verändert werden können.

LG

Ellert

Danke erstmal.

Es geht jedoch nicht darum getHTML bei jedem Event auszuführen, sondern nur einmalig beim Laden der Seite.

getHTML fügt folgende Struktur ein:

<style>
  .AutomowerConnect_am430x1_div{padding:0px !important;
    background-image: url('/fhem/AutomowerConnect/am430x1/map');
    background-size: 518px 909px;
    background-repeat: no-repeat;
    width: 518px; height: 909px;
    position: relative;}
  .AutomowerConnect_am430x1_canvas_0{
    position: absolute; left: 0; top: 0; z-index: 0;}
  .AutomowerConnect_am430x1_canvas_1{
    position: absolute; left: 0; top: 0; z-index: 1;}
</style>
<div id="AutomowerConnect_am430x1_div">
  <canvas id="AutomowerConnect_am430x1_canvas_0" width="518" height="909"></canvas>
  <canvas id="AutomowerConnect_am430x1_canvas_1" width="518" height="909"></canvas>
</div>

Die beiden Canvaselemente sollen durch den Aufruf der Funktion AutomowerConnectUpdateJsonFtui('/fhem/AutomowerConnect/am430x1/json') aktualisiert werden, wenn ein Event am430x1:mower_wsEvent: positions-event Auftritt.

Wie sage ich [content] das getHTML nur beim Laden der Seite ausgeführt wird und das Javascript bei jedem Event ausgeführt wird?

mr_petz

Du könntest ein Fakereading im Device am430x1 erstellen was kein Event erzeugt. Somit sollte das content nur beim Erstladen geladen werden.
Dieses Fakereading nutzt du dann um ein Event nachträglich zu triggern. ZBsp mit @click oder anderen...

LG

Ellert

Danke, der Tipp mit dem nicht triggernden Reading hat geholfen.

Ich habe das jetzt so gelöst:
<body>
<ftui-grid-tile row="1" col="1" height="9" width="4">
  <header>Automower Map</header>
     <ftui-content id="amc_automowerconnect" [content]="am430x1:system_name | getHTML('am430x1')" ></ftui-content>
</ftui-grid-tile>
<script type="text/javascript">
$(document).ready(function(){
setInterval(AutomowerConnectUpdateJsonFtui, 30000, '/fhem/AutomowerConnect/am430x1/json');
});
</script>
</body>