FUIP Menu

[timmy2000]

Hallo zusammen, ich beschäftige mich seit einiger Zeit mit Fuip und bin auch recht angetan. Was mir allerdings nicht so gut gefällt ist die optische Darstellung im Seitenauswahlmenü.
Kann mir jemand einen Tipp geben, wie ich die Grafiken vom "FUIP::View::MenuItem" ändern kann? Ich habe versucht mir ein eignes Menü mit Html View zu basteln, hierbei habe ich nur leider keine Ahnung wie ich die Fuip Seiten im data-url weiterreichen kann?

<div data-type="pagetab"
     data-url="index.html"
     data-icon="mi-home"></div>

Über etwas Hilfe wäre ich sehr dankbar.

[Thorsten Pferdekaemper]

Hi,
also die MenuItems machen ungefähr so etwas:

Code Auswählen Erweitern


<div data-type="link" [...] data-url="/fhem/ui/page/dg"  data-icon="oa-control_building_s_dg" [...]>DG</div>
      
D.h. die URL ist einfach nur die URL der Zielseite, halt ohne Server und Port (wobei das auch gehen würde, wenn man sich darauf verlassen will, dass der Teil stabil bleibt). In der URL ist "ui" der Name des FUIP-Device und "dg" ist der eigentliche Name der Seite. Man kann das aber auch einfach ausprobieren, indem man die Seite mal aufruft und nachschaut, was in der Adresszeile steht.

Alternativ zum "alles selber Basteln" kann man sich vielleicht auch mit userCss behelfen:

userCss: Eigenes Stylesheet
Mit diesem Attribut kann ein eigenes Stylesheet (CSS-Datei) eingebunden werden. Die zugehörige Datei muss im Verzeichnis <fhem>/FHEM/lib/FUIP/config liegen und die Endung ".css" haben.
Diese Möglichkeit sollte nicht leichtfertig eingesetzt werden. Zuerst sollte man prüfen, ob man etwas passendes mit dem Attribut styleSchema einstellen kann. Die Farben kann man dann mit dem Punkt "Colours" im Zellenmenü anpassen. Erst wenn diese Möglichkeiten erschöpft sind, sollte man an das Attribut userCss denken.

Man muss in so einem Stylesheet dann auch nur die Sachen reinschreiben, die man auch tatsächlich ändern will.
Für die Menue Items könnte man z.B. so etwas machen:

Code Auswählen Erweitern


/* menu item */
div[data-type="link"].fuip-menu-item,
.fuip-menu-item,
div[data-type="link"].fuip-menu-item-active,
.fuip-menu-item-active {
margin: 3px 4px;
text-align: center;
border-style: solid;
border-radius: 17px;
border-width:2px;
display:flex;
align-items:center;
}

div[data-type="link"].fuip-menu-item > .linklefticon,
.fuip-menu-item > .linklefticon,
div[data-type="link"].fuip-menu-item-active > .linklefticon,
.fuip-menu-item-active > .linklefticon {
padding-left: 8px;
}

.fuip-color-menuitem {
color: var(--fuip-color-menu-foreground);
}

.fuip-color-menuitem-active {
color: var(--fuip-color-menu-symbol-active);
}


Ich selbst verwende übrigens das styleSchema bright-mint. Damit sieht das Menu auch ein bisschen moderner aus. Die Farben kann man ja leicht anpassen.

Ansonsten: Wie hättest Du es denn gerne? Vielleicht kann ich ja die ein oder andere Sache noch einbauen.

Gruß,
   Thorsten

[timmy2000]

Danke für die schnelle und freundliche Hilfe, das hat mich schon mal ein gutes Stück weiter gebracht. Die einzige Frage, die sich mir beim Gestalten meiner Oberfläche noch stellt ist, ob ich ein HTML View irgendwie vom Punkt "Colours" im Zellenmenü ausschließen kann. Ich habe z.B. ein View der mir Temperaturen in verschiedenen Farben darstellen soll

Code Auswählen Erweitern

<div data-type="label"
                data-device="Brenner_Temp1"
                data-get="temperature"
                data-unit="&deg;C"
                data-limits='[1,40,50,60,71]'
                data-colors='["blue","yellow","orange","green","red"]'
data-fix='1'
                class="bigger">
        </div>

Dieser View funktioniert auch einige Zeit erst mal und stellt die Temperaturen farblich korrekt zur Ansicht. Wenn ich jedoch mehrere davon nacheinander einfüge, ändert sich die Farbe der Temperaturanzeige irgendwann zur Farbe vom Punkt "Colours" im Zellenmenü in die Farbe die unter "foreground" definiert wurde. Hab ich hier etwas falsch gemacht, oder muss ich die Darstellung im View explizit vom Punkt "Colours" ausschliessen?

Zu guter Letzt ein herzliches Dankeschön für FUIP ! Ich schätze Ihre Arbeit wirklich sehr! Danke!

[Thorsten Pferdekaemper]

Hi,
sorry, dass ich mich nicht mehr gemeldet habe. Das ganze muss ich mir mal genauer anschauen. So direkt habe ich dafür keine Erklärung.
Gruß,
   Thorsten

[Thorsten Pferdekaemper]

Hi,
ich habe jetzt mal damit rumgespielt und bei mir passiert das nicht. Es werden immer brav die Farben angezeigt, die in data-colors festgelegt sind. Könntest Du mir mal Deine komplette FUIP_<name>.cfg-Datei geben? Dann könnte ich es nochmal versuchen.
Gruß,
   Thorsten

[Thorsten Pferdekaemper]

Hi,

kann es sein, dass Du für fast alles die View FUIP::View verwendet hast? Es ist erstaunlich, dass damit so etwas überhaupt geht. Ich hätte nicht erwartet, dass das HTML einigermaßen richtig rauskommt. Dafür gibt es eigentlich die View FUIP::View::Html. Bitte probier die mal aus. Der erste Anhang an diesem Beitrag zeigt, was ich meine. Falls das nicht so aussieht wie bei Dir, dann ist irgendwas anderes faul.

Ansonsten wundere ich mich, dass das bei mir anscheinend ganz seltsam dargestellt wird. (Siehe den zweiten Anhang.) Normalerweise kann ich so zumindest eine Ahnung bekommen, wie das Layout so grob aussieht. Kannst Du mal einen Screenshot schicken?

Gruß,
   Thorsten

[timmy2000]

Danke für deine Mühen, ich habe das FUIP::View::Html tatsächlich komplett übersehen. Aber ohne gings ja auch irgendwie. Ich habe nun versucht die Temperatur Darstellung einmal. Über das FUIP::View::Html zu realisieren, was aber leider nichts an der Farbwiedergabe ändert. Hier schon mal ein Screenshot der Ui Oberfläche. Die Grafiken sind teilweise gif Animationen um das ganze ein wenig optisch aufzuhübschen.

[Thorsten Pferdekaemper]

Hi,
interessant, was man so alles mit FUIP machen kann...

Kannst Du mir nochmal Deine FUIP....cfg  mit den Html-Views hier dranhängen? Dann schaue ich mir das nochmal an.

Gruß,
    Thorsten

[Thorsten Pferdekaemper]

Hi,
ich habe eine Mail bekommen, dass Du eine neue Antwort hier reingeschrieben hast mit der .cfg. Allerdings scheint das ganze wieder verschwunden zu sein...
Gruß,
   Thorsten

[timmy2000]

Guten Abend,

ich habe mir das ganze heute noch mal in Ruhe angeschaut. Ich konnte das Problem lösen, indem ich die Temperatur Anzeigen komplett aus dem FUIP::View entfernt habe und sie neu in der FUIP::View::Html angelegt habe. Das hat auch funktioniert, nachdem wirklich keine Temp devices mehr als FUIP::View angelegt waren. Somit ist nun für mich die Welt in Ordnung und ich habe wieder etwas dazu gelernt. Ich muss mich leider immer etwas durchquälen, da meine technischen Fähigkeiten auf diesem Gebiet nicht grade die besten sind und möchte mich an dieser Stelle noch einmal herzlich für die Hilfe bedanken. Es ist wirklich schön zu sehen, was man mit FUIP alles anstellen kann. Ich nutze hier unheimlich gern gif Dateien und lasse mir dann immer entweder ein animiertes gif, oder ein schwarzes leeres Bild anzeigen, je nachdem welchen Status ich darstellen möchte. Das ganze kann ich dann über einen Dummy in Fhem umschalten und somit wirklich schöne grafische Darstellung erzielen. Um das ganze hier zum Abschluss zu bringen, denke ich, dass ich die cfg nun nicht mehr zu teilen brauche, da die Lösung ja nun gefunden wurde. Ein angenehmes Wochenende euch allen und vielen Dank