FTUI version 3

[Sailor]

Hallo OdfFhem

Ich selbst nutze eine bislang "kleine" Modul-Variante zur Kartendarstellung.
Kannst Du etwas genauer - mit Beispiel-Tag - beschreiben, was Du darstellen möchtest ?

Ich möchte quasi die alte Karte aus ftuiV2 wieder integrieren können.
Diese Karte kann auch eine Datei mit PoI (Points of Interest) darstellen.
Siehe Anlage

Code aus V2

Code Auswählen Erweitern


<div id = "TraffictMapBig"
style = "height:100%; width:100%;"
class = "fullsize"
data-type = "maps"
data-device = "UI_GeojsonUpdate"
data-map_type = "OSM"
data-showdetails = "true"
data-mapgroup = "1"
data-language = "en"
data-scrollgroup = "1"
data-traffic = "true"
data-center = "53.569531,9.619997"
data-zoom = "9"
data-stroke = "#FF0000,30,80"
data-geojson      = "geojson/features.geojson"
data-feature_style = '{"popup_properties_click":"name address phone website lastupdate arrival vmax timeframe",
"popup_properties_move":"name",
"display_styles":{
"personal.Papa":{                                                            "strokeColor":"yellow","label":"fa-user"},
"personal.Mama":{                                                          "strokeColor":"red"   ,"label":"fa-user"},
"personal.Tochter":{                                                      "strokeColor":"green" ,"label":"fa-user"},
"personal.Sohn":{                                                    "strokeColor":"blue"  ,"label":"fa-user"},
"poi.home"               :{                                          "strokeColor":"black" ,"label":"fa-home"},
"poi.hospital"           :{"icon":"../tablet/images/hospital.png"    ,"fontSize":"15px"                                         },
"poi.veterinarian"       :{"icon":"../tablet/images/veterinarian.png","fontSize":"15px"                                         },
"emergency.pharmacy"     :{"icon":"../tablet/images/pharmacy_de.png" ,"fontSize":"15px"                                         },
"vmax."                  :{"icon":"../tablet/images/Blitzer2.png"    ,"fontSize":"15px","strokeColor":"black" ,"label":"!"      },
"vmax.10"                :{"icon":"../tablet/images/Blitzer2.png"    ,"fontSize":"15px","strokeColor":"black" ,"label":"10"     },
"vmax.20"                :{"icon":"../tablet/images/Blitzer2.png"    ,"fontSize":"15px","strokeColor":"black" ,"label":"20"     },
"vmax.30"                :{"icon":"../tablet/images/Blitzer2.png"    ,"fontSize":"15px","strokeColor":"black" ,"label":"30"     },
"vmax.40"                :{"icon":"../tablet/images/Blitzer2.png"    ,"fontSize":"15px","strokeColor":"black" ,"label":"40"     },
"vmax.50"                :{"icon":"../tablet/images/Blitzer2.png"    ,"fontSize":"15px","strokeColor":"black" ,"label":"50"     },
"vmax.60"                :{"icon":"../tablet/images/Blitzer2.png"    ,"fontSize":"15px","strokeColor":"black" ,"label":"60"     },
"vmax.70"                :{"icon":"../tablet/images/Blitzer2.png"    ,"fontSize":"15px","strokeColor":"black" ,"label":"70"     },
"vmax.80"                :{"icon":"../tablet/images/Blitzer2.png"    ,"fontSize":"15px","strokeColor":"black" ,"label":"80"     },
"vmax.90"                :{"icon":"../tablet/images/Blitzer2.png"    ,"fontSize":"15px","strokeColor":"black" ,"label":"90"     },
"vmax.100"               :{"icon":"../tablet/images/Blitzer2.png"    ,"fontSize":"15px","strokeColor":"black" ,"label":"100"    },
"vmax.110"               :{"icon":"../tablet/images/Blitzer2.png"    ,"fontSize":"15px","strokeColor":"black" ,"label":"110"    },
"vmax.120"               :{"icon":"../tablet/images/Blitzer2.png"    ,"fontSize":"15px","strokeColor":"black" ,"label":"120"    },
"vmax.130"               :{"icon":"../tablet/images/Blitzer2.png"    ,"fontSize":"15px","strokeColor":"black" ,"label":"130"    }
}
}'>
</div>


Gruß
    Sailor

[Init]

Hallo zusammen,

auf meiner alten FTUI-Oberfläche hatte ich ein circle-menu, mit dem ich unser Einfahrtstor für die gewählte Zeit aus dem Menü aufstellen konnte.

Hierfür hatte ich on-for-timer verwendet.

Meine alte Definition sah so aus:

Code Auswählen Erweitern

<div data-type="circlemenu" data-direction="left-half" data-item-diameter="1" data-circle-radius="100"  class="cell circlemenu">
<ul>
<li>
<div data-type="symbol"
data-device="HMW_NSK1_Toroeffner"
data-on-color="white"
data-off-color="white"
data-on-background-color="green"
data-off-background-color="grey"
data-icon="oa-fts_sliding_gate"
data-background-icon="oa-fts_sliding_gate"
class="yellow bold">
</div>
</li>
<li><div data-type="push" data-device="HMW_NSK1_Toroeffner" data-set-on="on-for-timer 60" data-off-background-color="white" class="yellow bold" data-icon="">1</div></li>
<li><div data-type="push" data-device="HMW_NSK1_Toroeffner" data-set-on="on-for-timer 300" data-off-background-color="white" class="yellow bold" data-icon="">5</div></li>
<li><div data-type="push" data-device="HMW_NSK1_Toroeffner" data-set-on="on-for-timer 600" data-off-background-color="white" class="yellow bold" data-icon="">10</div></li>
<li><div data-type="push" data-device="HMW_NSK1_Toroeffner" data-set-on="on-for-timer 900" data-off-background-color="white" class="yellow bold" data-icon="">15</div></li>
<li><div data-type="push" data-device="HMW_NSK1_Toroeffner" data-set-on="on-for-timer 1800" data-off-background-color="white" class="yellow bold" data-icon="">30</div></li>
<li><div data-type="push" data-device="HMW_NSK1_Toroeffner" data-set-on="on-for-timer 3600" data-off-background-color="white" class="yellow bold" data-icon="">60</div></li>
<li><div data-type="push" data-device="HMW_NSK1_Toroeffner" data-set-on="off" data-off-background-color="white" class="yellow bold" data-icon="">off</div></li>
</ul>
</div>
<div data-type="label" class="large">aufstellen</div>


Hat jemand eine Idee, wie ich das mit FTUI3 realisieren kann?

Ich bin leider noch nicht so fit in FTUI3.

Würde mich freuen, wenn ich Anregungen bekomme.

Gruß
Marc

[Init]

auf meiner alten FTUI-Oberfläche hatte ich ein circle-menu, mit dem ich unser Einfahrtstor für die gewählte Zeit aus dem Menü aufstellen konnte.

Hierfür hatte ich on-for-timer verwendet.
....
Hat jemand eine Idee, wie ich das mit FTUI3 realisieren kann?

Bin nun ein Stück weiter:

Code Auswählen Erweitern

    <ftui-circlemenu style="height:3em">

      <ftui-button shape="circle" [value]="dummy1" ><ftui-icon name="gate" color="grid"></ftui-icon><ftui-badge color="danger" [text]="dummy1 | map('on-for-timer 5: 5, on-for-timer 10: 10, off: off')"></ftui-badge></ftui-button>

      <ftui-button shape="circle" fill="outline" (value)="dummy1:off" [value]="dummy1" [fill]="dummy1 | map('off: outline')">off</ftui-button>
      <ftui-button shape="circle" fill="outline" (value)="dummy1:on-for-timer 5" [value]="dummy1" [fill]="dummy1 | map('on-for-timer 5: outline')">5</ftui-button>
      <ftui-button shape="circle" fill="outline" (value)="dummy1:on-for-timer 10" [value]="dummy1" [fill]="dummy1 | map('on-for-timer 10: outline')">10</ftui-button>
     
    </ftui-circlemenu>



Funktioniert schon ganz gut, aber das badge wird nicht am Circle-Menü angezeigt, sondern nur, wenn man das Menü öffnet.
Hat jemand eine Idee?

Gruß
Marc

[OdfFhem]

@Sailor

Heute hatte ich ein wenig Zeit, mich mit der FTUI2-Lösung zu beschäftigen.

Bislang nutze ich in FTUI3 nur etwas Vergleichbares zum geojson-Attribut; allerdings fehlt bislang ein beeinflussbares feature_style-Attribut. Da ich die dadurch erlangbare Dynamik aber nützlich fände, würde ich mich mal daran versuchen. Wann und ob es lauffähig sein wird, (noch) keine Ahnung ...

Ganz sicher bin ich noch nicht, aber ist die Darstellung der im geojson-Attribut angegebenen Datei Dein wichtigster Einsatzzweck ?

[Sailor]

Hi OdfFhem

Heute hatte ich ein wenig Zeit, mich mit der FTUI2-Lösung zu beschäftigen.
Bislang nutze ich in FTUI3 nur etwas Vergleichbares zum geojson-Attribut; allerdings fehlt bislang ein beeinflussbares feature_style-Attribut. Da ich die dadurch erlangbare Dynamik aber nützlich fände, würde ich mich mal daran versuchen. Wann und ob es lauffähig sein wird, (noch) keine Ahnung ...
Ganz sicher bin ich noch nicht, aber ist die Darstellung der im geojson-Attribut angegebenen Datei Dein wichtigster Einsatzzweck ?

Ich nutze die GeoJson - Datei Variante um mit verschiedenen anderen Modulen die augenblicklichen Bereitschaftsdienste der Apotheken, der aktuellen Blitzer und der Handypositionen der Familienmitglieder auf der Karte anzuzeigen.
Daneben lasse ich mir die Verkehrssituation der Straße um mich herum anzeigen.

Daher kann man das wohl als primäre Funktion betrachten...

Danke für deinen Einsatz und kein Stress!
Gruß
    Sailor

[Sailor]

Ein herzerfrischendes "Moin" vom achtern Diek

Hat nicht ganz direkt mit ftui3 zu tun, aber ich wollte meine Arbeit nur für diejenigen teilen, die ftui3 auch auf einem Monitor mit DPMS verwenden/anzeigen und das Display aus der Ferne (von fhem aus) aufwecken wollen und ohne erst auf dem Keyboard/Touchscreen tippen zu müssen.

a) Systemvorbereitung linux rechner fuer das Display (Entfernter RasPi "ConPan"):

Code Auswählen Erweitern


########## Set up general PI settings ##########
sudo raspi-config
raspi-config: Update raspi-config
raspi-config: Interfacing Options -> SSH -> Enable
raspi-config: System Options -> Boot -> B4 Desktop Autologin
raspi-config: Advanced Options -> Expand Filesystem
raspi-config: Reboot

### Rewrite ssh certificates
sudo rm /etc/ssh/ssh_host_*
sudo dpkg-reconfigure openssh-server
sudo reboot

### Prepare Desktop ###
sudo apt-get install unclutter

sudo nano /etc/xdg/pcmanfm/LXDE-pi/desktop-items-0.conf
   trash=0

nano /home/pi/.config/pcmanfm/LXDE-pi/desktop-items-0.conf
   trash=0

   
sudo nano /etc/xdg/lxsession/LXDE-pi/autostart

@lxpanel --profile LXDE-pi
@pcmanfm --desktop --profile LXDE-pi

# Mauszeiger ausblenden
@unclutter

# Bildschirmschoner ausschalten
#@xset s off
#@xset -dpms
@xset s noblank

# Firefoxstarten und control panel aufrufen
@firefox-esr -kiosk -private-window http://<fhem-Server IP>:8083/fhem/ftui/index.html


b) Systemvorbereitung fhem Server:

Code Auswählen Erweitern


sudo mkdir /home/fhem
sudo usermod fhem --home /home/fhem
sudo usermod -s /bin/bash fhem
sudo chown -R fhem:dialout /home/fhem
sudo usermod -a -G tty fhem
sudo passwd fhem
    GeheimesFhemPasswort!

sudo nano /etc/ssh/sshd_config
   # Allow user fhem to access via ssh
   AllowUsers pi fhem
exit

login via ssh as user "fhem" within Homeserver to ConPan
ssh pi@<IP des linux Rechners welcher das ftui3 Display beinhaltet>
Confirm public key certificates
exit
exit

login via ssh as user "pi" on HomeServer
sudo nano /etc/ssh/sshd_config
   # Allow user fhem to access via ssh
   AllowUsers pi


c) 99_myUtils.pm auf dem fhem Server

Code Auswählen Erweitern


use Net::OpenSSH;
sub WakeConpan() {
my %opts = (
user    => "pi",
passwd  => "GeheimesConPanPasswort",
ssh_cmd => "/usr/bin/ssh",
timeout => 5
);

my $cmd      = "xset -display :0 dpms force on";
my $hostname = "<IP des linux Rechners welcher das ftui3 Display beinhaltet>";

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

$ssh->system($cmd)   or die (Log 2, "WakeConpan - Result : remote command failed: " . $ssh->error);
$ssh->system("exit") or die (Log 2, "WakeConpan - Result : remote command failed: " . $ssh->error);
}


Warten bis das Display in den Ruhemodus/Standby gefallen ist und dann in der fhem Commandline den Befehl {WakeConpan()} ausfuehren.

Viel Spass!

Gruss
    Sailor

[Init]

Hat jemand eine Idee?

Hallo zusammen,

mittlerweile funktioniert mein circlemenu zum Öffnen von unserem Tor, mit Anzeige der Restlaufzeit der Öffnung.

Mir erscheint das alles ein bisschen "von hinten durch die Brust ins Auge"

Hier jedenfalls meine Lösung in FTUI3:

Code Auswählen Erweitern


  <ftui-column>
    <ftui-circlemenu style="height:3em">
      <ftui-button shape="circle" [value]="HMW_NSK1_Schalter_Unused_07" [color]="HMW_NSK1_Schalter_Unused_07 | map('on:primary, off:light')"><ftui-icon name="gate" color="grid"></ftui-icon></ftui-button>
      <ftui-button shape="circle" fill="outline" (value)="HMW_NSK1_Schalter_Unused_07:off">off</ftui-button>
      <ftui-button shape="circle" fill="outline" (value)="HMW_NSK1_Schalter_Unused_07:on-for-timer 60">1</ftui-button>
      <ftui-button shape="circle" fill="outline" (value)="HMW_NSK1_Schalter_Unused_07:on-for-timer 300">5</ftui-button>
      <ftui-button shape="circle" fill="outline" (value)="HMW_NSK1_Schalter_Unused_07:on-for-timer 600">10</ftui-button>
      <ftui-button shape="circle" fill="outline" (value)="HMW_NSK1_Schalter_Unused_07:on-for-timer 900">15</ftui-button>
      <ftui-badge color="danger" [text]="HMW_NSK1_Schalter_Unused_07:timerValue"></ftui-badge>
    </ftui-circlemenu>
    <ftui-label>Gehtor <ftui-badge color="danger" [text]="HMW_NSK1_Schalter_Unused_07:timerValue"></ftui-badge></ftui-label>
  </ftui-column>


Hier mein Schalter, welchen ich zur Toröffnung nutzen möchte bzw. ein Testschalter:

Code Auswählen Erweitern


defmod HMW_NSK1_Schalter_Unused_07 HM485 00009067_19
attr HMW_NSK1_Schalter_Unused_07 custDeviceValue 0
attr HMW_NSK1_Schalter_Unused_07 userReadings timerValue { \
    if(AttrVal("HMW_NSK1_Schalter_Unused_07","custDeviceValue",0)>0){\
        AttrVal("HMW_NSK1_Schalter_Unused_07","custDeviceValue",0)\
        }\
    else {\
        "off"\
        }\
     }\


Hier mein Notify, welches meinen AT aktiviert und die eingestellte Laufzeit in mein userAttr schreibt:     

Code Auswählen Erweitern


defmod HMW_NSK1_Schalter_Unused_07_notify_1 notify HMW_NSK1_Schalter_Unused_07:(on-for-timer.*|off|on) {\
if($EVENT =~ /on-for-timer/) {\
my @EVENTPART = split(" ", $EVENT);;\
fhem ("attr HMW_NSK1_Schalter_Unused_07 custDeviceValue ". int($EVENTPART[1]/60));;\
            }\
elsif ($EVENT eq "on")  {\
fhem ("attr HMW_NSK1_Schalter_Unused_07TimerAt disable 0");;\
}\
elsif ($EVENT eq "off")  {\
fhem ("attr HMW_NSK1_Schalter_Unused_07 custDeviceValue 0");;\
fhem "attr HMW_NSK1_Schalter_Unused_07TimerAt disable 1";;\
}\
}


Zu guter Letzt noch mein AT, zum Runterzählen der Restlaufzeit:

Code Auswählen Erweitern


defmod HMW_NSK1_Schalter_Unused_07TimerAt at +*00:01:00 {\
if(AttrVal("HMW_NSK1_Schalter_Unused_07","custDeviceValue",0)>0){\
fhem("attr HMW_NSK1_Schalter_Unused_07 custDeviceValue ".(AttrVal("HMW_NSK1_Schalter_Unused_07","custDeviceValue",1)-1));;\
}\
else {\
fhem("attr HMW_NSK1_Schalter_Unused_07TimerAt disable 1");;\
}\
}
attr HMW_NSK1_Schalter_Unused_07TimerAt disable 1


Meiner Meinung nach zu viel Overhead, welchen ich benötige, um die Restlaufzeit anzuzeigen.

Und dann habe ich noch das Problem, das ftui-badge innerhalb von circlemenu nicht richtig funktioniert, daher habe ich alternativ ftui-badge in mein Lable gepackt.
Wäre toll, wenn hierfür jemand eine Lösung kennt.

Natürlich wäre es auch super, wenn jemand eine andere Lösung für die Berechnung der Restlaufzeit hat.

Ich bin für jeden Hinweis/Rat dankbar.

Viele Grüße
Marc

[Sailor]

Mal wieder ein herzerfrischendes "Moin" vom achtern Diek vorweg! 

Ich habe (mal wieder) eine Frage: Besteht irgendwie die Möglichkeit eine bestimmte hinter <ftui-tab> hinterlegte Seite (z.B. Home) mit einem Timeout zu versehnen, so dass auf diese nach einem Zeitraum x (z.B. 5min ohne Aktivitaet) zurück gekehrt wird?

Alternativ: Kann man die aktive Seite, welche man durch <ftui-tab> ausgewählt hat an ein fhem - Dummy übertragen, bzw. kann man von fhem aus eine <ftui-tab> - Seite auswählen?

Gruß
    Sailor

[grossmaggul]

Ich meine, setstate hätte irgendwo geschrieben, daß er den Timeout noch einbauen wollte, hat er aber bisher nicht getan, wenn ich das richtig sehe.

[TWART016]

Zur Docker Installation für FTUI3. Muss FTUI auf dem gleichen Docker Host wie FHEM installiert sein?

In der Anleitung steht nur Image herunterladen, FHEM URL anpassen und den Container starten.
Muss nicht vorher noch die Dateien aus github heruntergeladen werden?

[Sailor]

Ich meine, setstate hätte irgendwo geschrieben, daß er den Timeout noch einbauen wollte, hat er aber bisher nicht getan, wenn ich das richtig sehe.

Danke für die Info!

Gruß
    Sailor

[meier81]

Ein herzerfrischendes Moin vomn achtern Diek

Ich habe mein Control Panel ist soweit fertig und auf dem 27" TouchScreen integriert.
Siehe Anlage (Wetterseite)

@Sailor: Echt super Arbeit, sieht echt gut aus! Eine Frage bezüglich deiner verwendeten Symbole: Hast du da ein fertiges Symbolpaket benutzt oder dir die benötigten Symbole einzeln in den Icon-Ordner kopiert. Da mit den kleinklima-Symbolen habe ich schon gelöst und in den Unterordner von icons gelegt, mir fehlen jetzt nur noch die anderen Symbole wie z.B. Luftdruck, Außenfeuchte und so. Die habe ich zur Zeit in meinem ftui2-Version auch benutzt, habe die aber noch nicht wirklich gefunden. Muss mal schauen wo dort das mapping stattfindet.

Falls du möchtest kannst du ja mal ein paar Bilder deiner anderen Seiten zeigen, finde so etwas als "Ideenanreicherung" immer cool.

Gruß Markus

[Sailor]

Hallo Markus

@Sailor: Echt super Arbeit, sieht echt gut aus! Eine Frage bezüglich deiner verwendeten Symbole: Hast du da ein fertiges Symbolpaket benutzt oder dir die benötigten Symbole einzeln in den Icon-Ordner kopiert. Da mit den kleinklima-Symbolen habe ich schon gelöst und in den Unterordner von icons gelegt, mir fehlen jetzt nur noch die anderen Symbole wie z.B. Luftdruck, Außenfeuchte und so. Die habe ich zur Zeit in meinem ftui2-Version auch benutzt, habe die aber noch nicht wirklich gefunden. Muss mal schauen wo dort das mapping stattfindet.

Ich habe die benötigten Symbole alle ins icons-Verzeichnis reinkopiert die ich brauchte.

Entweder habe ich sie im /opt/fhem/www/images/fhemSVG oder /opt/fhem/www/images/openautomation rueber kopiert,
oder ich habe sie von https://www.svgrepo.com/ heruntergeladen.

Bilder folgen...

Gruß
    Sailor

[rob]

Muss nicht vorher noch die Dateien aus github heruntergeladen werden?

Ich meine schon. Zumindest lief es bei mir erst vollständig, als ich den kompletten Pfad incl. der Komponenten in den Container durchgereicht habe (wie yersinia unter #1089 schrieb).
Scheint mir erst recht nötig, wenn man "custom components" z.B. aus diesem Fred benötigt.

Hab es so gemacht:

Code Auswählen Erweitern


docker run -d \
    --rm \
    -p 8181:80 \
    -v /opt/fhem/www/ftui/:/usr/share/nginx/html/ \
    --name ftui3 \
knowthelist/ftui


Auf dem selben Host muss es m.E. nicht zwingend installiert sein, wenn man FTUI3 z.B. nur via Docker nutzen will. Es muss halt alles aus ...www/ftui auf dem Zweit-Host bereit stehen, sodass es in den Container durchgereicht werden kann (z.B. dort lokal abgelegt oder via share z.B. nfs usw.).
Weil ich aber aktuell beides nutze/ teste: FTUI3 via lokaler Fhem-URL und Docker, ist es für mich bequemer alles auf einem Host zusammen zu haben.

Btw: Der (Zweit-)Host müsste natürlich ein PI o.ä. sein, weil der Container aktuell für ARM-Prozis gebaut ist (https://hub.docker.com/r/knowthelist/ftui/tags?page=1&ordering=last_updated).

Viele Grüße
rob

[TWART016]

Ich meine schon. Zumindest lief es bei mir erst vollständig, als ich den kompletten Pfad incl. der Komponenten in den Container durchgereicht habe (wie yersinia unter #1089 schrieb).
Scheint mir erst recht nötig, wenn man "custom components" z.B. aus diesem Fred benötigt.

Den Ordner habe ich mittlerweile heruntergeladen

Hab es so gemacht:

Code Auswählen Erweitern


docker run -d \
    --rm \
    -p 8181:80 \
    -v /opt/fhem/www/ftui/:/usr/share/nginx/html/ \
    --name ftui3 \
knowthelist/ftui


Der Container wird so zwar erstellt, läuft aber nicht. Wenn ich die index.html mappe, läuft er zumindest, allerdings ohne einen Port nach außen weiterzugeben.

Btw: Der (Zweit-)Host müsste natürlich ein PI o.ä. sein, weil der Container aktuell für ARM-Prozis gebaut ist (https://hub.docker.com/r/knowthelist/ftui/tags?page=1&ordering=last_updated).

Der Docker ist leider kein Pi, sondern ein Ubuntu. Ist eine Version für x86 angedacht oder wie kann ich das selber bauen?