Zweiten Raspberry mit zugriff auf fhem/ftui

[misux]

Hallo

mein Sohnemann scheint sich langsam für fhen und vor allem die ftui zu interessieren...

Mein plan ist es ihm eine seperate Raspberry zu verfügung zu stellen sodass er nur dort sich seine ftui seite erstellen kann...

Die Frage: Ist es irgendwie möglich das die zweite Raspberry mit dem "leeren" FHEM ÜBER die FTUI auf die Informationen und schalter usw von meinem aktiv System zugreifen kann?
Ich möchte einfach nicht das er am aktivsystem arbeitet... Aber es sollte "möglichst" so viel wie möglich von dem aktivsystem abgefriffen werden bzw. zu steuern sein...

Gibt es so etwas in "einfach"

[bartman121]

Du kannst ftui auch woanders hosten ... Webserver


Am einfachsten ist aber docker...
Für frui3 wurde da auch was vorbereitet:
https://github.com/knowthelist/ftui#docker

Ansonsten geht auch ein zweiter www-ordner unt entsprechend eine zweite ftui-definition im fhem-verzeichnis. So betreibe ich aktuell füri und frui3 parallel

[TWART016]

Aufgrund der Performance nutzte ich Produktiv einen lighttpd. Dafür kopiere ich alle Dateien vom FHEM Server nachts automatisch auf den lighttpd Server.

Dort kann natürlich bearbeitet werden, oder parallel zu /tablet ein Verzeichnis aufgebaut werden.

Mit dem DOIF + einem at kopiere ich die Daten.

Code Auswählen Erweitern

([$SELF:action] eq "on") ({system ("rsync -r -c /opt/fhem/www/tablet/ user\@192.168.178.15:/home/user/www/tablet")})


[misux]

Hmm... Also ich würde schon gerne ihm FHEM komplett auf einer seperaten Raspberry installieren damit er die Berührungspunkte mit FHEM schon mal hat. Da kann er dann ja FTUI nutzen und sich erstellen.

Wenn ich mir die Docker Geschichte so ansehe, müsste es ja auch möglich sein der FTUI auf dem seperaten Raspberry sagen zu können wo er die Daten abgreifen oder hinsenden soll... Mittels der Info vom Docker..

    Place your index.html somewhere where you can use it as a volume for docker.
    Put the fhemweb_url into the head of the index.html:

<meta name="fhemweb_url" content="http://<your_fhem_url>:8083/fhem/">

Habe ich das richtig verstanden?  Man müsste in seiner index.html auf seinem Raspberry die meta-name ergänzung durchführen mit der IP von meinem Aktivsystem und dann kann er seine FTUI mit meinem FHEM nutzen?

Ich möchte halt auf keinen Fall das er aktiv auf meiner Raspberry arbeitet... egal wie... ob per docker oder sonstigem... Das ist mir zu gefährlch 
Wenn er per sudo nano ...index.html bearbeitet darf das auf keinen Fall auf meinen aktiven System passieren sondern auf jeden Fall auf einer anderen IP/Raspberry...

[bartman121]

Also deine Annahme zu docker und dem meta-tag ist richtig. Du könntest sogar Basic-auth nutzen, das steht auch auf GitHub.

Du kannst sogar eine eigene WEB-Instanz nutzen und diese auch nochmal beschränken,was er auf deinem fhem darf.

Die andere variante ist natürlich ihm auf dem main-raspy einen Nutzer zu geben  Diesem Nutzer verbietet du dann sudo und setzt die rechte der Dateien, die er bearbeiten darf halt entsprechend. Und Mal im Ernst... Du willst ernsthaft ne html-datei mit nano/vi(m) oder sonstigem in der Konsole bearbeiten? .oO

Wenn es ein bisschen professioneller sein darf, dann nimm bitte eine IDE.(z.B. visual studio code https://code.visualstudio.com/)

Grüße

Andreas

[misux]

Und Mal im Ernst... Du willst ernsthaft ne html-datei mit nano/vi(m) oder sonstigem in der Konsole bearbeiten? .oO
Wenn es ein bisschen professioneller sein darf, dann nimm bitte eine IDE.(z.B. visual studio code https://code.visualstudio.com/)
Grüße
Andreas

Ähm... naja, ich weiß das es andere/Bessere Möglichkeiten gibt... Aber ich habe meine FTUI Oberflächen bis jetzt immer direkt aufm Raspi per nano gemacht...Hat alles soweit gut geklappt und funkktioniert.

Also deine Annahme zu docker und dem meta-tag ist richtig. Du könntest sogar Basic-auth nutzen, das steht auch auf GitHub.

Ich meine aber ohne docker... also auf einem extra Raspberry...

Die andere variante ist natürlich ihm auf dem main-raspy einen Nutzer zu geben  Diesem Nutzer verbietet du dann sudo und setzt die rechte der Dateien, die er bearbeiten darf halt entsprechend.

Nee, das möchte ich nicht... das soll unberührt bleiben.

[bartman121]

Das mit dem meta-tag geht natürlich, aber ein fhem als Webserver aufsetzen, kann man machen, muss man aber nicht.

Grundsätzlich ftui kann überall auf einem Webserver abgelegt werden. Über den meta-tag in der index.html verrätst du dem Browser/Client der aufgerufenen Seite nur, wo er die websocket-verbindung hin aufbauen soll.

Du kannst sogar auf dem PC deines Sohnes einen xampp installieren und dann kann er die index.html mit halbwegs sinnvollen Editoren bearbeiten.

[misux]

Du kannst sogar auf dem PC deines Sohnes einen xampp installieren und dann kann er die index.html mit halbwegs sinnvollen Editoren bearbeiten.

Hmmm... Das klingt natürlich auch interessant!

Denke die Raspberry Geschichte mit dem Fhem drauf ist gar nicht soo schlecht... so hat er erste Berührungspunkte und versteht wovon man redet und was wie miteinander agiert...

Vielen Dank!!!

[misux]

 ::)Hallo

Es ist doch nicht erledigt... Ich bekomme es nicht hin...

Also auf dem Rasp von meinem Sohn habe ich nun Fhem in der Grundinstallation inkl. FTUI am laufen...
192.168.1.85:8083
Dort bastelt er sich eine eigene FTUI...

indexDoinic.html auf seinem Raspberry: 192.168.1.85:8083

Code Auswählen Erweitern

<!DOCTYPE html>
<html>

<head>
    <!--
     /* FHEM tablet ui */
     /*
     * UI builder framework for FHEM
     *
     * Version: 2.5.*
     * URL: https://github.com/knowthelist/fhem-tablet-ui
     *
     * Copyright (c) 2015-2017 Mario Stephan <mstephan@shared-files.de>
     * Under MIT License (http://www.opensource.org/licenses/mit-license.php)
     *
     * - create a new folder named 'tablet' in /<fhem-path>/www
     * - copy all files incl. sub folders into /<fhem-path>/www/tablet
     * - add 'define TABLETUI HTTPSRV ftui ./www/tablet Tablet' in fhem.cfg
     * - Tadaaa! A new fhem ui in http://<fhem-url>:8083/fhem/tablet/
     */
    -->
    <link rel="icon" href="favicon.ico" type="image/x-icon" />

    <!-- define your personal style here, it wont be overwritten  -->
    <!-- link rel="stylesheet" href="css/fhem-green-ui.css" / -->
    <!-- link rel="stylesheet" href="css/fhem-tablet-ui-user.css" / -->

    <script src="js/fhem-tablet-ui.js" defer></script>
<meta name="fhemweb_url" content="http://192.168.1.80:8083/fhem/">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <!-- Remove this line to enable for usage with WebViewControl
    <script defer>var wvcDevices = {'12345': 'Tablet'}; var wvcUserCssFile="webviewcontrol.css"</script>
    <script src="../pgm2/cordova-2.3.0.js" defer></script>
    <script src="../pgm2/webviewcontrol.js" defer></script>
    <!-- End for WebViewControl -->

    <title>FHEM-Tablet-UI</title>
</head>

<body style="background:blac"</body>

<div>




<div class="hbox items-space-between top-space-3x center bold">

<div class="hbox big items-space-around">
                 <div class="inline top right-space white">
                        <div data-type="label" class="bold">Außentemperatur</div>
                        <div data-type="label" data-device="DOIFTempDurschnitt" data-get="state" data-fix="1" data-limits='[-73,18,25]' data-colors='["cornflowerblue","#00FF00","firebrick"]'data-unit="%B0C%0A" class="bold" style="font-size:3em;"></div>
</div>
</div>


<div class="vbox">
<div data-type="clock" data-format="H:i" class="bold" style="font-size:8em; color:white"></div>
<div data-type="clock" data-format="l, d.F" class="top-narrow-10 big bold" style="color:white"></div>
</div>



<div class="hbox">
<div data-type="label" class="bold white left-narrow-3x" style="font-size:1em;">&nbspDominic:&nbsp&nbsp</div>
<div data-type="label" data-device="TempDominic" data-get="temperature" data-fix="1" data-limits='[-73,20,23]' data-colors='["cornflowerblue","#00FF00","firebrick"]' data-unit="%B0C%0A" class="bold bigger"></div>
</div>

</div>
<!-- =================================================================Schalter=================================================================== -->
<!--===============================================================================================================================================-->

<header style="height:3px;background:#00FF00;color:white" class="top-space"></header>


<div>


<div class="hbox items-space-between top-space-3x center bold">



    <div class="vbox">
<div data-type="checkbox" class="" data-on-background-color="#00FF00" data-off-color="black" data-on-color="black" data-device="Chilltime"></div>
<div style="" class="fixedlabel top-space" data-type="label" data-device="Druckluft" data-states='["on","off"]' data-colors='["#00FF00","grey"]'>Chilltime</div>
    </div>

    <div class="vbox">
<div data-type="checkbox" class="" data-on-background-color="#00FF00" data-off-color="black" data-on-color="black" data-device="Drone"></div>
<div style="" class="fixedlabel top-space" data-type="label" data-device="GartenKlingelPower" data-states='["on","off"]' data-colors='["#00FF00","grey"]'>Drone</div>
    </div>

    <div class="vbox">
<div data-type="checkbox" class="" data-on-background-color="#00FF00" data-off-color="black" data-on-color="black" data-device="Bettlicht"></div>
<div style="" class="fixedlabel top-space" data-type="label" data-device="Wasserlauf" data-states='["on","off"]' data-colors='["#00FF00","grey"]'>Bettlicht</div>
    </div>

   <div class="vbox">
    <div data-type="checkbox" class="" data-on-background-color="#00FF00" data-off-color="black" data-on-color="black" data-device="Legolicht"></div>
    <div style="" class="fixedlabel top-space" data-type="label" data-device="Wasserlauf" data-states='["on","off"]' data-colors='["#00FF00","grey"]'>Legolicht</div>
   </div>



</div>
<div class="vbox">
<div data-type="push" data-icon="fa-bullhorn" data-on-background-color="#00FF00" data-fhem-cmd="set KE_.* speak Ich komme gleich!; set OG_.* speak Ich komme gleich!"></div>
<div class="fixedlabel white" data-type="label" data-device="">Ich komme gleich</div>
</div>

<div class="hbox top-space-3x">
<div class="vbox top-space-2x">
<div data-type="label" class="inline big bold">Morgen</div>
<div class="hbox">
<div data-type="label" data-device="Proplanta" data-get="fc1_tempMin" data-unit="%B0C%0A" class="big" data-limits='[-73,18,25]' data-colors='["cornflowerblue","green","firebrick"]'></div>
<div data-type="label" class="big">&nbspbis&nbsp</div>
<div data-type="label" data-device="Proplanta" data-get="fc1_tempMax" data-unit="%B0C%0A" class="big" data-limits='[-73,18,25]' data-colors='["cornflowerblue","green","firebrick"]'></div>
</div>
<div class="hbox">
<div data-type="weather" data-device="Proplanta" data-get="fc1_weatherMorningIcon" data-imageset="kleinklima" style="width:120px"></div>
<div class="vbox">
                        <div class="">Sonne</div>
                        <div data-type="label" data-device="Proplanta" data-get="fc1_sun" data-limits='[0,40,80]' data-colors='["firebrick","#aa6900","green"]' data-unit="%" class="inline big"></div>

                        <div class="">Regen</div>
                        <div data-type="label" data-device="Proplanta" data-get="fc1_chOfRainDay" data-unit="%" data-limits='[0,40,80]' data-colors='["green","#aa6900","firebrick"]'class="inline big"></div>
</div>
</div>
</div>


<!--=====================================================================ÜBERMORGEN================================================================-->


<div class="vbox top-space-2x">
<div data-type="label" data-device="Proplanta" data-get="fc2_date" data-substitution="toDate().eeee()+''" class="inline big bold"></div>
<div class="hbox">
                                <div data-type="label" data-device="Proplanta" data-get="fc2_tempMin" data-unit="%B0C%0A" class="big" data-limits='[-73,18,25]' data-colors='["cornflowerblue","green","firebrick"]'></div>
                                <div data-type="label" class="big">&nbspbis&nbsp</div>
                                <div data-type="label" data-device="Proplanta" data-get="fc2_tempMax" data-unit="%B0C%0A" class="big" data-limits='[-73,18,25]' data-colors='["cornflowerblue","green","firebrick"]'></div>
                </div>
<div class="hbox">
<div data-type="weather" data-device="Proplanta" data-get="fc2_weatherMorningIcon" data-imageset="kleinklima" style="width:120px"></div>
<div class="vbox">
                                <div class="">Sonne</div>
                                <div data-type="label" data-device="Proplanta" data-get="fc2_sun" data-limits='[0,40,80]' data-colors='["firebrick","#aa6900","green"]' data-unit="%" class="inline big"></div>

                                <div class="">Regen</div>
                                <div data-type="label" data-device="Proplanta" data-get="fc2_chOfRainDay" data-unit="%" data-limits='[0,40,80]' data-colors='["green","#aa6900","firebrick"]'class="inline big"></div>
</div>
</div>

</div>

<!--=====================================================================ÜberÜberMORGEN================================================================-->

<div class="vbox top-space-2x">
<div data-type="label" data-device="Proplanta" data-get="fc3_date" data-substitution="toDate().eeee()+''" class="inline big bold"></div>
<div class="hbox">
                                <div data-type="label" data-device="Proplanta" data-get="fc3_tempMin" data-unit="%B0C%0A" class="big" data-limits='[-73,18,25]' data-colors='["cornflowerblue","green","firebrick"]'></div>
                                <div data-type="label" class="big">&nbspbis&nbsp</div>
                                <div data-type="label" data-device="Proplanta" data-get="fc3_tempMax" data-unit="%B0C%0A" class="big" data-limits='[-73,18,25]' data-colors='["cornflowerblue","green","firebrick"]'></div>
</div>
<div class="hbox">
<div data-type="weather" data-device="Proplanta" data-get="fc3_weatherMorningIcon" data-imageset="kleinklima" style="width:120px"></div>

<div class="vbox">
                                <div class="">Sonne</div>
                                <div data-type="label" data-device="Proplanta" data-get="fc3_sun" data-limits='[0,40,80]' data-colors='["firebrick","#aa6900","green"]' data-unit="%" class="inline big"></div>

                                <div class="">Regen</div>
                                <div data-type="label" data-device="Proplanta" data-get="fc3_chOfRainDay" data-unit="%" data-limits='[0,40,80]' data-colors='["green","#aa6900","firebrick"]'class="inline big"></div>
                        </div>
                </div>
</div>

</div>
</div>

</body>
</head>

Soweit so gut...

Aber wenn ich nun mit dem Meta Tag: <meta name="fhemweb_url" content="http://192.168.1.80:8083/fhem/"> auf meinen Raspberry (192.1681.80:8083) zugreifen will um die Daten abzugreifen und schalter zu betätigen funktioniert es leider nicht...

Es wird sogar die von ihm erstellte indexDomiinic.html fast komplett leer dargestellt...

Hat einer einen Tipp wo mein Fehler sein könnte?

[bartman121]

ich empfehle hier mal einen Blick in die Entwicklerconsole des Browsers ....

F12 --> dann den TAB wählen "Console", dort sollte was drin stehen.

Ich vermute einfach mal ne CORS-Meldung oder mixed content ....

Aber guck bitte erstmal und stell die Fehlermeldung hier bereit.

Grüße

Andreas

[misux]

okay!

Habe das hier... damit kann ich leider nix anfangen...

Code Auswählen Erweitern

Base dir: ./
fhem-tablet-ui.js:2557 jQuery dynamically loaded
indexDominic.html:1 Access to XMLHttpRequest at 'http://192.168.1.80:8083/fhem/?XHR=1&_=1645078558404' from origin 'http://192.168.1.85:8083' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
jquery.min.js:2 GET http://192.168.1.80:8083/fhem/?XHR=1&_=1645078558404 net::ERR_FAILED

[bartman121]

Ist doch einfach... Auf dem hauptraspi für die WEB-Instanz (WEB) mit Port 8083 einfach das Attribut CORS auf 1 setzen ...

[misux]

 

Juhuuu!

Klasse! Velen Dank! Sohnemann ist glücklich und ich erst!!

[misux]

Hey Leute!

Sorry das ich den alten hier nochmal rausholen muss...

Habe meinen HauptRaspi auf Https mit Zugangspasswort umgestellt...

Hat einer einen Tipp wie ich jetzt mit dem Zweiten weiterhin zugriff drauf haben kann?

Wenn ich die Zugangsdaten dort eingebe klappt es leider nicht...
<meta name="fhemweb_url" content="https://benutzer:passwort@192.168.1.80:8083/fhem/">

[misux]

Hat niemand eine Idee?

[bartman121]

Viele Teile der Doku gelten auch für ftui3

https://wiki.fhem.de/wiki/FHEM_Tablet_UI#META-Parameter

[misux]

Vielen Dank!  Habs hinbekommen...

Aber jetzt habe ich ein anderes Problem.... Wenn ich das so mit dem zugriff auf eine andere Raspi habe... Dann bekonme ich keine Daten mehr von der eigenen Raspberry...

Ist das so? Lässt sich kein Mischbetrieb farhen?

Brauche im diesem Fall nur ein paar bestimmte Werte von der anderen Raspberry und die meisten von der einen...

[bartman121]

Ich blicks gerade nicht, du hast eine index.html und damit greifst du Daten von Zwei Instanzen ab? Ich hätte nichtmal gedacht, dass das überhaupt geht, aber die meta-parameter greifen natürlich immer.

Warum machst du nicht eine zweite html-Datei und verlinkst diese jeweils, dann kannst du neue META-Parameter nutzen?

Welchen Sinn macht es überhaupt Daten auf unterschiedlichen Instanzen in einer Weboberfläche darzustellen, aber die Instanzen zu trennen. Wäre es nicht sinnvoller die Daten ins Hauptfhem zu bringen?

Aber vielleicht verstehe ich auch irgendwas falsch....

Grüße

Andreas

[misux]

Ich benutze 2 Raspis und 2x Fhem weil es unterschiedliche Anwendungebereiche sind...

1x Fhem auf Raspbian Lite ohne GUI für die Hausautomation mit allem Schnick schnack... Muss stabil und immer laufen. Das tut es auch.

1x Fhem aufm GUI Raspi mit Monitoren, autostart von chromium und Zugriff auf meine Poolsteteurung mit bestimmten Daten.
Dieser Raspi ist nur saisonal an weil die Poolsteuerung nur saisonal an ist. Auf diesem Raspi würde ich aber gerne in der FTUI die Temperatursensoren vom Hauptraspi abgreifen damit ich die nicht 2x kaufen muss... Das ist der Grund warum ich nur manche Daten abgreifen möchte...

Da fällt mir ein:

Kann man im Fhem "Dummys" erstellen die einfach auf den anderen Raspberry zugreifen und das als reading anzeigen? Damit wäre ja mein Problem komplett gelöst...

[bartman121]

Nunja, hinsichtlich ftui würde ich prüfen ob die Daten tatsächlich auf der gleichen html-seiten sein müssen oder ob du nicht mittels links umschalten kannst.

Alternativ kannst du natürlich auch Daten von einer fhem-instanz zu einer anderen weiterleiten/kopieren.
https://wiki.fhem.de/wiki/FHEM2FHEM

Grüße

Andreas