Neues Oberflächen-Design (CSS) für HomeMatic WebUI / CCU3 (V0.54)

diverse Zusatzsoftware

Moderator: Co-Administratoren

Stilgar
Beiträge: 15
Registriert: 14.10.2018, 19:57

Neues Oberflächen-Design (CSS) für HomeMatic WebUI / CCU3 (V0.54)

Beitrag von Stilgar » 14.10.2018, 20:17

Hallo Zusammen,

in Verbindung mit z.B. mit dem FireFox Addon https://addons.mozilla.org/en-US/firefox/addon/styl-us/ habe ich die Stylesheets und Bilder für die HomeMatic WebUI (teilweise) angepaßt. Das Ganze werde ich den nächsten Wochen noch weiter überarbeiten.
Leider sind die CSS von WebUI nicht gerade sehr einheitlich, darum sieht das Ganze etwas "durcheinander" aus.

V0.54:
  • Layout (Programme) für Ausdrucke angepaßt
    WebUI_Programm-Druck.PNG
  • Geräte Einstellungen überarbeitet
V0.53:
  • Fehlermeldung beim Import beseitigt (Stylus 1.5.2)
V0.52:
  • Login / Logout -Seiten überarbeitet
Login.PNG

V0.51:
  • Lade-Animationen durch SVG-Animation ersetzt
  • Dialog für Addons ist nun scrollbar
  • Tabelle System-Variablen-Status korrigiert
  • Farben, Schatten usw. teilweise als CSS-Variablen festgelegt - für einfache Design-Änderungen

ToDo:
  • Korrektur der "fehlenden" Buttons und der unterschiedlichen Ränder in manchen Dialogen
  • Alle Farben, Radien u.ä. als Variablen festlegen
  • Restliche Tabellen anpassen
  • Dialoge anpassen
  • Buttons optimieren
  • optischer "Feinschliff" der Tabellen
  • Optimierung der Definitionen
  • Addon
Installation:
Die CSS (txt) Datei im Anhang über das obengenannte FireFox-Addon importieren und die vorhandenen IP-Adressen durch die eigenen ersetzen:
Stylus.png


Die CSS (als txt) ist im Anhang.

Viel Spaß damit.
WebUI_1.PNG
WebUI_2.PNG
WebUI_3.PNG
WebUI_4.PNG
WebUI_5.PNG
Dateianhänge
HomeMatic_CSS_V054.txt
(83.53 KiB) 33-mal heruntergeladen
HomeMatic_CSS_V053.txt
(82.72 KiB) 13-mal heruntergeladen
Zuletzt geändert von Stilgar am 22.01.2019, 15:20, insgesamt 20-mal geändert.

jp112sdl
Beiträge: 2414
Registriert: 20.11.2016, 20:01
Kontaktdaten:

Re: CSS für HomeMatic WebUI / CCU3

Beitrag von jp112sdl » 14.10.2018, 22:24

Hi,
bleiben die Custom-Farben in der /etc/config/color.map trotzdem erhalten, oder müsste ich die in der CSS auch noch mal anpassen?

VG,
Jérôme

Stilgar
Beiträge: 15
Registriert: 14.10.2018, 19:57

Re: CSS für HomeMatic WebUI / CCU3

Beitrag von Stilgar » 15.10.2018, 00:24

Hallo,

nein die CSS werden über das Addon nur in der Browser-Ansicht geändert, sonst nirgends.

Grüße
Stilgar

Stilgar
Beiträge: 15
Registriert: 14.10.2018, 19:57

Re: CSS für HomeMatic WebUI / CCU3 (V0.2)

Beitrag von Stilgar » 16.10.2018, 13:15

Update (siehe erster Beitrag)

jp112sdl
Beiträge: 2414
Registriert: 20.11.2016, 20:01
Kontaktdaten:

Re: Neue Oberfläche (CSS) für HomeMatic WebUI / CCU3 (V0.2)

Beitrag von jp112sdl » 16.10.2018, 13:53

Ich finde es schon echt gut, wie es jetzt aussieht!
Aber ich bin dauernd an wechselnden Systemen/Browsern.

Cool wäre es, die Anpassungen direkt auf der CCU (/www/webui/webui.css) durchzuführen (beispielsweise durch die Installation eines CCU-Addons), so dass man die Anpassung dann in allen Browsern (ohne zusätzliches Plugin) hat.

VG,
Jérôme

Slice
Beiträge: 372
Registriert: 03.02.2016, 14:44
Wohnort: irgendwo aus BaWü

Re: Neue Oberfläche (CSS) für HomeMatic WebUI / CCU3 (V0.2)

Beitrag von Slice » 17.10.2018, 16:39

Hallo,

wie bekomme ich das CSS nun in meinen Firefox? Ich habe die Erweiterung "Styl-Us" installiert und wenn ich die txt nun per Drag&Drop reinziehe sagt er mir das nicht geändert wurde.Habs auch mal als .json umbenannt, geht auch nicht.
Was muss ich den machen um die neue Oberfläche zu erhalten?!

Grüße,
Slice
--------------------------------------------
Raspi3B+ mit RPI-RF-MOD auf piVCCU-FW 3.45.7 / Addons: CuxD v2.2.0 - EMail v1.6.8c - Programme drucken v1.2a - XML-Api v1.20 - Scriptparser v1.80
Geräte: 112 / Kanäle: 602 / Datenpunkte: 4225 / SysVars: 166 / Programme: 91 / Regadom IDs: 9727 / 32 CUxD-Kanäle in 2 CUxD-Geräten
--------------------------------------------

Stilgar
Beiträge: 15
Registriert: 14.10.2018, 19:57

Re: Neue Oberfläche (CSS) für HomeMatic WebUI / CCU3 (V0.2)

Beitrag von Stilgar » 17.10.2018, 18:32

Hallo,

das Ganze bei Styl-Us über "Mozilla Format" importieren einfügen und die IP / URL ("Gilt für URLs: beginnend mit") entsprechend anpassen.

Grüße
Stilgar

jp112sdl
Beiträge: 2414
Registriert: 20.11.2016, 20:01
Kontaktdaten:

Re: Neue Oberfläche (CSS) für HomeMatic WebUI / CCU3 (V0.2)

Beitrag von jp112sdl » 17.10.2018, 18:40

Hab dir ne PN geschickt...
Wenn du die Anpassungen direkt in die style.css einpflegen würdest, würde ich es als installierbares CCU-Addon verpacken.

Dann muss der Anwender in seinen/m Browser/n nichts weiter machen.

VG,
Jérôme

tomi_cc16
Beiträge: 667
Registriert: 30.11.2013, 16:35
Wohnort: Mordor

Re: Neue Oberfläche (CSS) für HomeMatic WebUI / CCU3 (V0.2)

Beitrag von tomi_cc16 » 17.10.2018, 22:48

jp112sdl hat geschrieben:
17.10.2018, 18:40
Hab dir ne PN geschickt...
Wenn du die Anpassungen direkt in die style.css einpflegen würdest, würde ich es als installierbares CCU-Addon verpacken.

Dann muss der Anwender in seinen/m Browser/n nichts weiter machen.
Das wäre super

Slice
Beiträge: 372
Registriert: 03.02.2016, 14:44
Wohnort: irgendwo aus BaWü

Re: Neue Oberfläche (CSS) für HomeMatic WebUI / CCU3 (V0.2)

Beitrag von Slice » 18.10.2018, 16:44

Stilgar hat geschrieben:
17.10.2018, 18:32
Hallo,

das Ganze bei Styl-Us über "Mozilla Format" importieren einfügen und die IP / URL ("Gilt für URLs: beginnend mit") entsprechend anpassen.

Grüße
Stilgar
Hallo,

ganz klar war mir die Antwort nicht, aber ich habe es nun dennoch geschafft das Style einzupflegen!
Die WebUi sieht echt schon viel besser aus so.
Wäre echt Klasse wenn es das als eine Art Addon geben würde!

Danke und Grüße,
Slice
--------------------------------------------
Raspi3B+ mit RPI-RF-MOD auf piVCCU-FW 3.45.7 / Addons: CuxD v2.2.0 - EMail v1.6.8c - Programme drucken v1.2a - XML-Api v1.20 - Scriptparser v1.80
Geräte: 112 / Kanäle: 602 / Datenpunkte: 4225 / SysVars: 166 / Programme: 91 / Regadom IDs: 9727 / 32 CUxD-Kanäle in 2 CUxD-Geräten
--------------------------------------------

Antworten

Zurück zu „Sonstige“