FHEM App - Manage your Home

[Jamo]

Hallo Helmut,
ja klar, kann ja auch nicht funktionieren. Dein template definiert folgendes, rightClick": ["state::on"].
Das Device 3FBE5A hat aber gar keinen set für state 'on'. Das ist ja nur der Sensor . . .

Also würde ich das umdrehen, wie ich hier schon mal geschrieben hatte:

PS: Alternativ kannst Du es andersrum machen, also im 562675 das "3FBE5A" als connected mit angeben, dann musts Du aber das template umschreiben.

PS: Und sorry das ich das erst gerade gesehen habe, habe vorher echt nicht drauf geachtet.

[Damian]

Aktuell greife ich HTML-Element nicht ab, sodass diese in FHEMApp dargestellt werden. Da mir das klar strukturierte Design bei FHEMApp wichtig ist, habe ich diesbezüglich auch noch keinen guten Ansatz, wie man Inhalte integrieren könnte, ohne das Layout von FHEMApp zu "verlassen".

Es würde ja ausreichen, wenn du im jeweiligen Fenster den HTML-Code ohne weitere Elemente darstellst. Die Größe des Fensters kann einheitlich bleiben.

Der Anwender kann sich selbst überlegen, was dort hineinpasst - der dargestellte Code ist skalierbar.

Eine Karte würde durchaus hineinpassen:

siehe z. B. https://forum.fhem.de/index.php/topic,120088.msg1161177.html#msg1161177

[Init]

Hallo zusammen,

vorab erstmal vielen Dank an jemu75 für die tolle neue Oberfläche.

Ich mache gerade die ersten Gehversuche und habe ein paar Fragen, zu welchen ich nicht über Suchen im Forum gelöst bekommen habe. Vielleicht nutze ich die falschen Suchbegriffe.

• Kann ich die Schriftgröße von den Templates anpassen? Würde gerne alles ein bisschen kleiner gestalten
• Gibt es ein Template, welches ich mit HTML-CODE und Platzhaltern für Readings usw. füllen bzw. HTML-Code in appOptions hinterlegen kann
• Gibt es schon ein Template für Kalender

Viele Grüße
Marc

[jemu75]

Hallo zusammen,

vorab erstmal vielen Dank an jemu75 für die tolle neue Oberfläche.

Ich mache gerade die ersten Gehversuche und habe ein paar Fragen, zu welchen ich nicht über Suchen im Forum gelöst bekommen habe. Vielleicht nutze ich die falschen Suchbegriffe.

• Kann ich die Schriftgröße von den Templates anpassen? Würde gerne alles ein bisschen kleiner gestalten
• Gibt es ein Template, welches ich mit HTML-CODE und Platzhaltern für Readings usw. füllen bzw. HTML-Code in appOptions hinterlegen kann
• Gibt es schon ein Template für Kalender

Viele Grüße
Marc

Hallo Marc,

vielen Dank für Dein Feedback. 
Deine 3 Fragen muss ich im Moment leider mit nein beantworten. Die App zielt auf ein klares Design und intuitive Bedienung ab. Deshalb ist der Gestaltungsspielraum bewusst eingeschränkt, obgleich technisch im Prinzip alles machbar ist. Das bezieht sich insbesondere auf die Geometrie der Templates, Farben, Schriftart und Schriftgröße.
Die Frage zu HTML Elementen kam aktuell auch von einem anderen User auf. Ich werde mir dazu mal Gedanken machen.
Anfragen zu einem Kalender gab es bisher noch nicht. Machbar ist das aber. Welche konkreten Anforderungen hättest du an ein solches Template?

Beste Grüße
Jens 

[Init]

Hallo Jens,

danke für die Antwort.

HTML-Code in den appOptions mit der Möglichkeit, auf ein Reading usw. Bezug zu nehmen wäre genial. Ich würde beispielsweise gerne die aktuellen Daten der PV-Anlage übersichtlich darstellen.
Für den Kalender wäre eine einfache Ansicht von einem CALVIEW schön. Toll wäre eine unterschiedliche Farbgebung je Kalender und einer Einstellung, welche Tage (heute +/-) dargestellt werden sollen. Z. B. alle Einträge heute + morgen aber max 10 Einträge oder so. Farben sind hilfreich, um die Kalender von den Kindern und anderen visuell schnell trennen zu können.

Gerne stehe ich dir als Beta-Tester zur Verfügung.

Viele Grüße
Marc

[Damian]

Die Frage zu HTML Elementen kam aktuell auch von einem anderen User auf. Ich werde mir dazu mal Gedanken machen.

Falls du ein Device mit HTML-Code im Status brauchst - sagst du Bescheid.

[jemu75]

Falls du ein Device mit HTML-Code im Status brauchst - sagst du Bescheid.

Ich habe auf der Idee, HTML-Code in Templates von FHEMApp zu integrieren, noch etwas rumgedacht. Technisch gesehen, lässt sich das mit Vue gut realisieren. Jedoch habe ich meine Bedenken, was die Grundidee von FHEMApp anbetrifft. Diese basiert ja auf einem klaren Design und intuitiver Bedienung. Mit der Möglichkeit HTML-Code einzubinden, löse ich mich von jeglichen Vorgaben in punkto Design. Ich könnte also beliebige Schriftarten, Schriftgrößen einbinden, die Aufteilung komplett frei wählen, Grafiken einbinden usw. die im Zweifel nicht wirklich in das Layout von FHEMApp passen. Zudem sehe ich die Herausforderung in punkto responsive Design.
Weiterhin kann das Einbinden von "externem" Code Performanceprobleme hervorrufen und auf diesen Punkt lege ich bei FHEMApp großen Wert.

Im Moment sehe ich vermutlich eher die Probleme als die Chancen. Aber ich möchte die Grundidee von FHEMApp sehr gern erhalten. Letztlich denke ich, dass sich mit den Möglichkeiten, die FHEMApp liefert, faktisch jeglicher Content aus FHEM abbilden lässt. Das ganze aber in einem Rahmen, der in das Design passt.

Gebt eure Meinung gern in die Runde. Eine konstruktive Diskussion bringt am Ende ja immer auch was voran. 

[Helmi55]

Hallo Helfer
Vorerst Danke für den Tip mit dem ReloadBtn 
Ich habs jetzt so hinbekommen das ich 2 flachen habe (eine für Zustand und eine für den Schalter)
Ich schaff es nicht beides zu vereinen.
Ja natürlich darf ich dann den Sensor nicht mit der appOptions { "template": "contact" } verbinden.
Ich habe jetzt nur im Aktor

Code Auswählen Erweitern

appOptions

{ "template": "garage", "connected": { "contact": "3FBE5A"} }
eingetragen.
Was soll ich noch im Garagen Template ändern (hier ist unter Connected contact eingetragen)
und contact ist ja im Switch als der Sensor definiert??


Nochmals Danke für eure Unterstützung

Gruß
Helmut

[Jamo]

Hallo Helmut,
schau mal ob das so stimmt:

Hier das template mit dem connected für den Sensor (contact):
Überall wo "Connected.contact.Readings. .... " steht, muss es das Reading im contact geben, ich habe es aber mal grob nachgeschaut.

In Schalter, mit der DEF 562675, müsste dann folgendes stehen: appOptions { "template": "garage", "connected": { "contact": "3FBE5A"} }

template - garage:

Code Auswählen Erweitern

{
  "name": "garage",
  "author": "helmi55",
  "date": "2021-05-27",
  "status": {
    "bar": ["Connected.contact.Readings.Activity.Value:alive:100:success","Connected.contact.Readings.Activity.Value::0:success"]
  },
  "main": [
    {
      "text": ["state:off:aus","state:on:an","state::%s"],
      "rightBtn": "mdi-unfold-more-horizontal",
      "rightClick": ["state::on"]
    }
  ],
  "info": {
    "left1": ["Connected.contact.Readings.state.Value:open::mdi-garage-open-variant", "Connected.contact.Readings.state.Value:closed::mdi-garage-variant"] ,
    "mid1": ["Connected.contact.Readings.state.Time::%t"],
    "right2": ["Connected.contact.Readings.Activity.Value:alive::mdi-wifi","Connected.contact.Readings.Activity.Value:::mdi-wifi-off"]
  }
}

[LuGu]

Im Moment sehe ich vermutlich eher die Probleme als die Chancen. Aber ich möchte die Grundidee von FHEMApp sehr gern erhalten. Letztlich denke ich, dass sich mit den Möglichkeiten, die FHEMApp liefert, faktisch jeglicher Content aus FHEM abbilden lässt. Das ganze aber in einem Rahmen, der in das Design passt.

Gebt eure Meinung gern in die Runde. Eine konstruktive Diskussion bringt am Ende ja immer auch was voran. 

Gerade das schlichte aber einheitliche Design hat mich von fhemApp überzeugt und sollte aus meiner Sicht auch so bleiben. Es ist für jeden (Frau, Mann, Kind, Oma, Opa ...) intuitiv zu bedienen. Alles folgt einen logischen Schema ohne durch ein kunterbuntes Design vom Wesentlichen abzulenken. Für schnelle Infos über den Zustand und mal komfortabel was Schalten ist fhemApp bestens geeignet.
Für Schnickschnack habe ich dann noch ein Wandpanel mit FTUI3.

Gruß LuGu

[Helmi55]

Hallo Jamo
also ich habs jetzt nochmals so probiert wie von dir beschrieben.
So sieht meine appOption im Autor aus

Code Auswählen Erweitern

{ "template": "garage", "connected": { "contact": "3FBE5A"} }
Mein Garagen template habe ich angehängt (hier habe ich nur das right2 rausgenommen, da der Sensor kein Wifi Signal sendet)
Und es funktioniert wieder nicht.
Was ich nicht verstehe, wenn ich das template contact hernehme, dann passt das Icon (allerdings mit einer Türe - kann ich ja ändern)
und es passt die Uhrzeit - siehe Screenshots

Jetzt habe ich, naiv wie ich bin, das versucht im garage template zu ändern

Code Auswählen Erweitern

{
  "name": "garage",
  "author": "helmi55",
  "date": "2021-05-27",
  "status": {
    "bar": ["Connected.contact.Readings.Activity.Value:alive:100:success","Connected.contact.Readings.Activity.Value::0:success"]
  },
  "main": [
    {
      "text": ["state:off:aus","state:on:an","state::%s"],
      "rightBtn": "mdi-unfold-more-horizontal",
      "rightClick": ["state::on"]
    }
  ],
  "info": {
    "left1": ["Connected.contact.Readings.state:open::mdi-door-open", "Connected.contact.Readings.state:closed:geschlossen"] ,
    "mid1": ["Connected.contact.Readings.trigger_cnt.Time::%t"]
   
  }
}

Geht auch nicht

Ich glaube ich bleib bei zwei getrennten Anzeigen........

Gruß
Helmut

[Init]

Ich habe auf der Idee, HTML-Code in Templates von FHEMApp zu integrieren, noch etwas rumgedacht. Technisch gesehen, lässt sich das mit Vue gut realisieren. Jedoch habe ich meine Bedenken, was die Grundidee von FHEMApp anbetrifft. Diese basiert ja auf einem klaren Design und intuitiver Bedienung. Mit der Möglichkeit HTML-Code einzubinden, löse ich mich von jeglichen Vorgaben in punkto Design. Ich könnte also beliebige Schriftarten, Schriftgrößen einbinden, die Aufteilung komplett frei wählen, Grafiken einbinden usw. die im Zweifel nicht wirklich in das Layout von FHEMApp passen. Zudem sehe ich die Herausforderung in punkto responsive Design.
Weiterhin kann das Einbinden von "externem" Code Performanceprobleme hervorrufen und auf diesen Punkt lege ich bei FHEMApp großen Wert.

Im Moment sehe ich vermutlich eher die Probleme als die Chancen. Aber ich möchte die Grundidee von FHEMApp sehr gern erhalten. Letztlich denke ich, dass sich mit den Möglichkeiten, die FHEMApp liefert, faktisch jeglicher Content aus FHEM abbilden lässt. Das ganze aber in einem Rahmen, der in das Design passt.

Gebt eure Meinung gern in die Runde. Eine konstruktive Diskussion bringt am Ende ja immer auch was voran. 

Hallo Jens,

deine Grundidee finde ich sehr gut und kann deine Bedenken verstehen, aber wahrscheinlich gibt es hier und da doch Dinge, welche nicht im Standard abgedeckt werden können. Ich bin natürlich noch ganz frisch dabei, aber mir fehlt beispielsweise die Möglichkeit, viele Werte übersichtlich und kompakt darzustellen. Dies würde ich auf meinem Smartphone vermissen.

Was ist mit einer Bereitstellung solch einer Funktionalität, ohne jeden Support für verhunzte Darstellungen .

Mir sind gerade das responsive Design, die klare Struktur und die gute Performance extrem wichtig.

Viele Grüße
Marc

[jemu75]

Hallo Jamo
also ich habs jetzt nochmals so probiert wie von dir beschrieben.
So sieht meine appOption im Autor aus

Code Auswählen Erweitern

{ "template": "garage", "connected": { "contact": "3FBE5A"} }
Mein Garagen template habe ich angehängt (hier habe ich nur das right2 rausgenommen, da der Sensor kein Wifi Signal sendet)
Und es funktioniert wieder nicht.
Was ich nicht verstehe, wenn ich das template contact hernehme, dann passt das Icon (allerdings mit einer Türe - kann ich ja ändern)
und es passt die Uhrzeit - siehe Screenshots

Jetzt habe ich, naiv wie ich bin, das versucht im garage template zu ändern

Code Auswählen Erweitern

{
  "name": "garage",
  "author": "helmi55",
  "date": "2021-05-27",
  "status": {
    "bar": ["Connected.contact.Readings.Activity.Value:alive:100:success","Connected.contact.Readings.Activity.Value::0:success"]
  },
  "main": [
    {
      "text": ["state:off:aus","state:on:an","state::%s"],
      "rightBtn": "mdi-unfold-more-horizontal",
      "rightClick": ["state::on"]
    }
  ],
  "info": {
    "left1": ["Connected.contact.Readings.state:open::mdi-door-open", "Connected.contact.Readings.state:closed:geschlossen"] ,
    "mid1": ["Connected.contact.Readings.trigger_cnt.Time::%t"]
   
  }
}

Geht auch nicht

Ich glaube ich bleib bei zwei getrennten Anzeigen........

Gruß
Helmut

Also das mit den zwei Templates können wir so nicht stehen lassen... 
Deine Definition in appOptions passt bereits. Nur in der Template-Datei habe ich noch ein paar Fehler entdeckt. Ich passe Dir das Template "Garage" mal an und poste Dir das. Mal schauen, ob ich heute Abend noch dazu komme. 

Edit: ich habe die Template-Datei "templ_garage.json" angepasst und angehangen. Kopiere die bitte mal in dein cfg-Verzeichnis. Dann bitte einen Browser-Reload machen. Und melde dich bitte, falls noch irgendwas nicht passt.

[jemu75]

Hallo Jens,

deine Grundidee finde ich sehr gut und kann deine Bedenken verstehen, aber wahrscheinlich gibt es hier und da doch Dinge, welche nicht im Standard abgedeckt werden können. Ich bin natürlich noch ganz frisch dabei, aber mir fehlt beispielsweise die Möglichkeit, viele Werte übersichtlich und kompakt darzustellen. Dies würde ich auf meinem Smartphone vermissen.

Was ist mit einer Bereitstellung solch einer Funktionalität, ohne jeden Support für verhunzte Darstellungen .

Mir sind gerade das responsive Design, die klare Struktur und die gute Performance extrem wichtig.

Viele Grüße
Marc

Hallo Marc,

was die Darstellung vieler Werte anbetrifft, so hätte ich folgenden Lösungsansatz.
Du kannst dir ein Template erstellen. Im "main-Teil" hast du die Möglichkeit 2 Werte (Parameter "text" und "text2") nebeneinander darzustellen.
Du kannst bei Bedarf mehrere Ebenen im "main-Teil" definieren, um mehr als 2 Werte darzustellen.
Du kannst den Parameter "expand" nutzen, um alle definierten Ebenen direkt anzuzeigen.

Alle Infos zur Erstellung eigener Templates findest du hier

Anbei mal die Template-Definition mit den entscheidenden Parametern:

Code Auswählen Erweitern


{
  "name": "example",
  "description": "Template mit mehreren Ebenen, die untereinander dargestellt werden."
  "expand": true,
  "main": [
    {
      "text": ["reading1::%s"],
      "text2": ["reading2::%s"],
    },
    {
      "text": ["reading3::%s"],
      "text2": ["reading4::%s"],
    },
    {
      "text": ["reading5::%s"],
      "text2": ["reading6::%s"],
    }
  ]
}


[Benni]

Ich habe auf der Idee, HTML-Code in Templates von FHEMApp zu integrieren, noch etwas rumgedacht. Technisch gesehen, lässt sich das mit Vue gut realisieren. Jedoch habe ich meine Bedenken, was die Grundidee von FHEMApp anbetrifft. Diese basiert ja auf einem klaren Design und intuitiver Bedienung. Mit der Möglichkeit HTML-Code einzubinden, löse ich mich von jeglichen Vorgaben in punkto Design. Ich könnte also beliebige Schriftarten, Schriftgrößen einbinden, die Aufteilung komplett frei wählen, Grafiken einbinden usw. die im Zweifel nicht wirklich in das Layout von FHEMApp passen. Zudem sehe ich die Herausforderung in punkto responsive Design.
Weiterhin kann das Einbinden von "externem" Code Performanceprobleme hervorrufen und auf diesen Punkt lege ich bei FHEMApp großen Wert.

Im Moment sehe ich vermutlich eher die Probleme als die Chancen. Aber ich möchte die Grundidee von FHEMApp sehr gern erhalten. Letztlich denke ich, dass sich mit den Möglichkeiten, die FHEMApp liefert, faktisch jeglicher Content aus FHEM abbilden lässt. Das ganze aber in einem Rahmen, der in das Design passt.

Gebt eure Meinung gern in die Runde. Eine konstruktive Diskussion bringt am Ende ja immer auch was voran. 

Hallo Jens,

du weißt, was die Grundidee der Restriktionen bzgl. Design und Klarheit angeht, bin ich ganz bei dir!

Ich sehe auch eher mehr Probleme darin, das ganze zu öffnen. Schon alleine der Supportaufwand würde um ein vielfaches steigen, da (u.a. von dir) dann auch alles, was darüber rein kommt mit supportet werden müsste.

Wenn jemand viele Werte darstellen will oder dies und das und jenes noch einbinden will (Kamera, Webseiten, Newsticker, ...) dann muss er sich überlegen, ob fhemapp wirklich das richtige dafür ist, oder ob er mit FTUI oder FUIP nicht besser bedient ist.

Im Zweifelsfall bin ich eher dafür, für spezielle Probleme, wenn eine entsprechende Nutzerbasis da ist, dedizierte Templates anzubieten (ähnl. Kamera oder Sysmon), die dann auch wirklich in das Design passen und die sich dann auch supporten lassen.
(Leider komme ich zeitlich gerade nicht dazu mich endlich mal in diese vue-Geschichte einzuarbeiten Bin sonst auf .NET zuhause. )

Und ich habe es schon mehrfach gesagt, gerade die Klare Benutzerführung durch die Restriktionen waren das was mich, nachdem ich mich erst einmal darauf eingelassen (!) habe, letztendlich von fhemapp überzeugt hat. Und es war auch das erste mal, dass ich meiner Frau eine Bedienoberfläche (für FHEM) in die Hand geben konnte, die sie ad hoc und ohne viel Erklären verstanden hat und benutzen konnte.

Übrigens bin ich inzwischen so weit, bei mir eine Hybrid-Lösung aufzubauen. Sprich für mein Wand-Tablet auf der Übersicht bleibe ich bei FUIP. Aber wenn es dann ans Schalten oder in die Details geht, dann werde ich dazu den jeweiligen fhemapp-Bereich aufrufen. Das entschlackt zum einen mein FUIP und sorgt dort wieder für bessere Performance und zum anderen bleibt die eigentliche Bedienung mit fhemapp geräteübergreifend gleich. Vielleicht ist das ja auch für jemand anders ein brauchbarer Lösungsansatz?

gb#