FTUI version 3

[grossmaggul]

Ich fände es schön, wenn Ihr die Probleme mit Docker in einen eigenen Thread auslagern würdet, hat ja jetzt nicht direkt etwas mit FTUI 3 zu tun.

[OdfFhem]

@Sailor

Mittlerweile gab es etwas Zeit, um sich mit der Kartendarstellung besser vertraut zu machen und eine (nutzbare) Komponente zu entwickeln.

Neben meiner (speziellen) GeoJSON-Datei habe ich auch eine allgemeinere GeoJSON-Datei genutzt. Dies führt aktuell beispielsweise zum angehängten Screenshot.

Meine Frage wäre, ob Du eine anonymisierte Fassung Deiner GeoJSON-Datei zum Testen bereitstellen kannst - gerne per Mitteilung.

[Sailor]

Ein herzerfrischendes Moin vom achtern Diek vorweg

Mal wieder nicht ganz ftui3 aber ein bisschen doch.
Da es noch keine ftui3 - Loesung fuer das entfernte Refresh eines Mozilla Firefox Browsers gibt, habe ich bis dahin ein Workaround entwickelt.

Dazu wie folgt vorgehen:

Shell am entfernten Pi mit  Firefox Browser (192.168.178.

Code Auswählen Erweitern


sudo apt-get install xdotool
sudo nano /home/pi/f5mf.sh


Insert text below

Code Auswählen Erweitern


export DISPLAY=:0.0
WID=`xdotool search --name "Mozilla Firefox" | head -1`
xdotool windowactivate $WID
xdotool key F5


Make executeable

Code Auswählen Erweitern


sudo chmod +x /home/pi/f5mf.sh




Datei 99_myUtils.pm

Code Auswählen Erweitern


###START########## Refresh Conpan Browser #######################################################################START###
use Net::OpenSSH;
sub RefreshConpanBrowser() {

my %opts = (
user    => "pi",
passwd  => "Geheim!",
ssh_cmd => "/usr/bin/ssh",
timeout => 5
);

my $cmd      = "/home/pi/f5mf.sh";
my $hostname = "192.168.178.8";

my $ssh = Net::OpenSSH->new($hostname, %opts);
$ssh->error and die (Log 2, "RefreshConpanBrowser - Result : Couldn't establish SSH connection: " . $ssh->error);

$ssh->system($cmd)   or die (Log 2, "RefreshConpanBrowser - Result : remote command failed: " . $ssh->error);
$ssh->system("exit") or die (Log 2, "RefreshConpanBrowser - Result : remote command failed: " . $ssh->error);
}
####END########### Refresh Conpan Browser ########################################################################END####


Shell Command

Code Auswählen Erweitern


reload 99_myUtils
{RefreshConpanBrowser}


Gruss
    Sailor

[Sailor]

Ein herzerfrischendes Moin vom actern Diek vorweg

Ich bin mit meinem ControlPanel in der Langzeit-Testphase und mir sind da ein paar Eigenarten beim image aufgefallen, die ich gerne von Euch bestaetigt haben moechte.

Zusammenfassung: Update von Images scheint nicht mit bestimmter Webadresse zu funktionieren.

Anfrage: Koennt Ihr bitte mal bei Euch den folgenden Code testen und beobachten, ob sich die Anzeige entsprechend dem Interval (300s bzw. 300000ms) neu laedt?

Code a) ftui3 - Variante

Code Auswählen Erweitern


<ftui-image src          = "https://www.niederschlagsradar.de/image.ashx?type=regioloop&regio=ham&j=&m=&d=&mi=&uhr=&bliksem=0&voor=&srt=loop1stunde&tijdid=20183281942"
height       = "150px"
width        = "200px"
shape        = "round"
interval     = 300>
</ftui-image>



Code b) JavaScript mit Image - Variante

Code Auswählen Erweitern


<img id="RainRadarHome"src="https://www.niederschlagsradar.de/image.ashx?type=regioloop&regio=ham&j=&m=&d=&mi=&uhr=&bliksem=0&voor=&srt=loop1stunde&tijdid=20183281942" height="90%" alt="niederschlagsradar.de"></img>
<script>
window.setInterval("reloadRainRadarHome();", 300000);
function reloadRainRadarHome() {
var frameHolder=document.getElementById('RainRadarHome');
frameHolder.src="https://www.niederschlagsradar.de/image.ashx?type=regioloop&regio=ham&j=&m=&d=&mi=&uhr=&bliksem=0&voor=&srt=loop1stunde&tijdid=20183281942"
}
</script>


Code c) JavaScript mit iFrame - Variante

Code Auswählen Erweitern


<iframe id="RainRadarHome" src="https://www.niederschlagsradar.de/image.ashx?type=regioloop&regio=ham&j=&m=&d=&mi=&uhr=&bliksem=0&voor=&srt=loop1stunde&tijdid=20183281942" width="100%" frameBorder="0"></iframe>
<script>
window.setInterval("reloadRainRadarHome();", 300000);
function reloadRainRadarHome() {
var frameHolder=document.getElementById('RainRadarHome');
frameHolder.src="https://www.niederschlagsradar.de/image.ashx?type=regioloop&regio=ham&j=&m=&d=&mi=&uhr=&bliksem=0&voor=&srt=loop1stunde&tijdid=20183281942"
}
</script>


Danke
   Gruss
       Sailor

[elle]

Hi Sailor,

wenn ich das richtig sehe, hast du folgende Fehler drin:
a) keine Anführungszeichen um den Wert des Intervalls, da weiss ich aber nicht, ob die Browser das trotzdem akzeptieren
b) und c) in das setInterval schreibt man nur den Namen der Funktion ohne Anführungszeichen, Klammern und Semikolon

Code Auswählen Erweitern


window.setInterval(reloadRainRadarHome, 300000);


Alles ungetestet...

Siehe auch hier: https://www.w3schools.com/jsref/met_win_setinterval.asp

Gruß

Jens

[Sailor]

Hallo Jens

wenn ich das richtig sehe, hast du folgende Fehler drin:
a) keine Anführungszeichen um den Wert des Intervalls, da weiss ich aber nicht, ob die Browser das trotzdem akzeptieren

Also laut https://github.com/knowthelist/ftui#image ist das ohne "

b) und c) in das setInterval schreibt man nur den Namen der Funktion ohne Anführungszeichen, Klammern und Semikolon

Code Auswählen Erweitern


window.setInterval(reloadRainRadarHome, 300000);


Werde ich sofort ausprobieren

[Nachtrag]
Mit

Code Auswählen Erweitern

<ftui-image src          = "https://www.niederschlagsradar.de/image.ashx?type=loop1stunde&jaar=&regio=homepage&tijdid=202104300848&time=&bliksem=0"
height       = "300px"
width        = "400px"
interval     = "60"
nocache>
</ftui-image>
funktioniert prima!

Danke
   Sailor

[TWART016]

Ist es möglich ein komplettes Grid als "Button" zu verwenden, ähnlich wie bei Flex?

Zum Beispiel soll eine Lampe damit geschalten werden. Zudem wäre es schön, wenn die Hintergrundfarbe abhängig von einem Reading ist.

[mr_petz]

Ist es möglich ein komplettes Grid als "Button" zu verwenden...

Jain mit @click="sendFhem('')" kannst du einen Befehl senden, aber nicht toggeln..

Du könntest aber im ftui-grid-tile das so machen bsp:

Code Auswählen Erweitern


<ftui-grid base-width="50" base-height="50">
<!--Button Anfang-->
<ftui-button fill="none" [(value)]="LampenDevice">
<ftui-grid-tile row="1" col="1" height="8" width="6" [color]="LampenDevice | map('on:primary, off:grey')">
 
</ftui-grid-tile>
<ftui-grid-tile row="9" col="1" height="6" width="6">
 
</ftui-grid-tile>
<ftui-grid-tile row="1" col="7" height="7" width="5">
 
</ftui-grid-tile>
<ftui-grid-tile row="1" col="12" height="6" width="5">
 
</ftui-grid-tile>
<ftui-grid-tile row="7" col="12" height="8" width="5">
 
</ftui-grid-tile>
<ftui-grid-tile row="8" col="7" height="7" width="5">
 
</ftui-grid-tile>
<!--Button Ende-->
          </ftui-button>
</ftui-grid>

hier werden alle grid-tile zum Button.
[color] geht nur bei grid-tile
kannst natürlich auch noch ein grid im grid testen...
Gruß

[tom2966]

Hallo,
ich bin dabei mich in die FTUI3 einzuarbeiten. Bisher finde ich das klasse was hier entstanden ist. Allerdings komme ich mit dem HomematicIP Heizkörperthermostat nicht klar. Ich möchte mit einem Button den Modus zwischen Auto und Manu umschalten- hier mein Code:

Code Auswählen Erweitern


<ftui-button color="dark" fill="outline" shape="circle"
    [value]="EG_Jan_Heizung:1.SET_POINT_MODE'"
    (value)="EG_Jan_Heizung:datapoint 1.CONTROL_MODE" states="1, 0">
    <ftui-icon [name]="EG_Jan_Heizung:1.SET_POINT_MODE  | map('1:lightbulb, 0:lightbulb-on')"></ftui-icon>
</ftui-button>


Bei der Übermittlung des Befehles sehe ich "set EG_Jan_Heizung datapoint 1.CONTROL_MODE"- es fehlt also die 1 bzw. 0- was mache ich fasch? Danke für Eure Hilfe.
VG
Thomas

[mr_petz]

Hi, versuche mal so ob der Befehl gesendet wird (Test):

Code Auswählen Erweitern


<ftui-button class="size-1" @click="sendFhem('set EG_Jan_Heizung datapoint 1.CONTROL_MODE 1')">TEST1</ftui-button>

Wird nicht gehen!
Wie sieht der set-Befehl in fhem aus?

Ich denke das liegt am Leerzeichen hinter datapoint???
ftui denkt 1.CONTROL_MODE muss er setzen und nicht die 1....
Vielleicht muss es ja so sein?:

Code Auswählen Erweitern


(value)="EG_Jan_Heizung:1.CONTROL_MODE" states="1, 0">
oder so:

Code Auswählen Erweitern


(value)="EG_Jan_Heizung:1.SET_POINT_MODE" states="1, 0">

[tom2966]

Hi, danke Dir erst mal für den Tipp- ich versuche das heute abend mal. Mit dem Leerzeichen sollte das aber nichts zu tun haben- ich nutze für Homematic IP in meiner Installation HMCCU. Da ist der FHEM Befehl set <Device> datapoint <datapoint> <value>. Und das funktioniert soweit.
Gruß
Thomas

[mr_petz]

Dann könnte das vielleicht funktionieren:

Code Auswählen Erweitern


(value)="EG_Jan_Heizung:datapoint" states="1.CONTROL_MODE 1, 1.CONTROL_MODE 0">

alternative:

Code Auswählen Erweitern


(value)="EG_Jan_Heizung" states="datapoint 1.CONTROL_MODE 0,datapoint 1.CONTROL_MODE 1">

so werden die Befehle/states gesetzt/gesendet...
Gruß

[tom2966]

Ich noch mal- Danke für den Tipp- das hat funktioniert:

Code Auswählen Erweitern

(value)="EG_Jan_Heizung:datapoint" states="1.CONTROL_MODE 1, 1.CONTROL_MODE 0">


einen schönen Abend noch!

P.S.
Der Button "Test" hat übrigens auch funktioniert- halt nur in eine Richtung...

[RockFan]

Hallo,

ich habe eine Frage zu "icon". Wenn ich eine Bezeichnung zu den Icons wie folgt verwende, dann ist diese, offensichtlich abhängig von der Länge des Textes, nicht mittig unter dem Icon (siehe angehängten Screenshot). Gibt es eine Möglichkeit dies zu ändern, ohne über "label" arbeiten zu müssen? Vom Coding her betrachtet finde ich das eigentlich schön übersichtlich

Code Auswählen Erweitern


      <ftui-grid-tile row="3" col="2" height="3" width="1" shape="round">
          <ftui-icon name="wifi" class="align-center"
                    [color]="Handy1 | map('absent: red, present: green')">Pocophone
          </ftui-icon>
          <ftui-icon name="wifi"
                    [color]="Handy2 | map('absent: red, present: green')">Redmi
          </ftui-icon>
          <ftui-icon name="wifi"
                    [color]="Handy3 | map('absent: red, present: green')">HuaweiP20Lite
          </ftui-icon>
          <ftui-icon name="wifi"
                    [color]="Handy4 | map('absent: red, present: green')">iPhone
          </ftui-icon>
      </ftui-grid-tile>


Viele Grüße
Dieter

[mr_petz]

Hi, du könntest es einfach auch so machen wenn du kein label magst:

Code Auswählen Erweitern


          <ftui-icon name="wifi"
                    [color]="Handy1 | map('absent: red, present: green')">
          </ftui-icon><br>Pocophone
          <ftui-icon name="wifi"
                    [color]="Handy2 | map('absent: red, present: green')">
          </ftui-icon><br>Redmi
          <ftui-icon name="wifi"
                    [color]="Handy3 | map('absent: red, present: green')">
          </ftui-icon><br>HuaweiP20Lite
          <ftui-icon name="wifi"
                    [color]="Handy4 | map('absent: red, present: green')">
          </ftui-icon><br>iPhone
  <ftui-icon name="wifi"
                    [color]="Handy3 | map('absent: red, present: green')">
          </ftui-icon><br>HuaweiP20Lite
          <ftui-icon name="wifi"
                    [color]="Handy4 | map('absent: red, present: green')">
          </ftui-icon><br>iPhone


Die schieben sich je nach grid Größe zusammen... siehe screenshot

Edit oder so in einer cell:

Code Auswählen Erweitern


  <ftui-cell>
        <ftui-icon name="wifi"></ftui-icon>
iPhone
  </ftui-cell>