UPGRADE IP 9 verfügbar!
Timberwolf VISU jetzt mit NEUEM Layout Editor
Freie Anordnung, Reihenfolge und Größe der Widgets - viele weitere Verbesserungen
Infos im Wiki: https://elabnet.atlassian.net/l/cp/06SeuHRJ

NEU! Insider & Leistungsmerkmale FÜR ALLE freigeschaltet
Damit kann nun jeder das Upgrade vornehmen und VISU & IFTTT testen. Alle Info hier: viewtopic.php?f=8&t=5074

[Erfahrungsbericht] CV: Custom Design (auf Basis Metal)

Rund um die CometVisu im Timberwolf Server
Antworten

Ersteller
Robosoc
Reactions:
Beiträge: 1876
Registriert: Di Okt 09, 2018 9:26 am
Hat sich bedankt: 635 Mal
Danksagung erhalten: 775 Mal

CV: Custom Design (auf Basis Metal)

#1

Beitrag von Robosoc »

Ich habe mich mal eine Weile mit CSS beschäftigt und mir ein etwas schlankeres Design gebastelt, welches mir bei der Nutzung auf dem großen Rechnerbildschirm, auf einem Pad und auf dem Smartphone insgesamt ganz gut gefällt. Besonderes Augenmerk habe ich auf ein einfaches und schlankes Navbar-Design gelegt

Wer Lust hat es bei sich auszuprobieren und ggf. weiter zu entwickeln findet hier den Code.

Folgenden Code einfach in eine Datei custom.css speichern und als zusätzliche Mediendatei hochladen. Dann noch folgende Ergänzung in den Abschnitt <meta> des Konfigurationscodes:

Code: Alles auswählen

    
    <files>
      <file type="css">resource/config/media/custom.css</file>
    </files>


Die 6 geänderten Farben habe ich als Variablen vorgegeben, so kann man das recht einfach modifizieren (gleich zu Beginn im css-file) und auch in den Konsolen der Browser sehr leicht mit Farbänderungen spielen:

CSS Code:

Code: Alles auswählen

:root {
  --bright-bg-color: #3c4d84;
  --dark-bg-color: #1a193a;
  --main-item-color: #ddd;
  --highlight-color: #96887a;
  --unpressed-color: #666;
  --info-bg-color: #222d;
}

#navbarTop hr { 
   height: 50px;
   width: 0px;
}

.nav_path {
   background-image: linear-gradient(var(--bright-bg-color), var(--bright-bg-color));
   color: var(--highlight-color);
}
.page.type_2d .widget.custom_bubble .value {
    line-height: 30px;
}

#pages > .page {
    padding-left: 15px;
}

.widget .ui-slider {
    width: calc(100%);
    margin-bottom: 1.9em;
}

div.actor.light-on.switchPressed, div.actor.light-off.switchUnpressed {
    border-style: none;
}

.light-on.switchPressed div, .light-on.switchUnpressed div {
    background-image: radial-gradient( rgba(150, 136, 122, 0.67), transparent 70%);
    padding: 0px;
    margin-left: -5px;
    margin-top: -1px;
}

.light-off.switchPressed div, .light-off.switchUnpressed div {
    color: var(--unpressed-color);
    padding: 0px;
    margin-left: -5px;
    margin-top: -1px;
}
.page.type_2d .widget.custom_bubble.embedded {
    box-shadow: 2px 4px 4px 0px rgba(135, 135, 135, 0.5);
}

.page.type_2d .widget.custom_bubble {
    border: 2px solid var(--highlight-color);
    border-radius: 30px;
    width: 30px;
    height: 30px;
    background-color: var(--info-bg-color);
}

#navbarTop .navbar .widget:not(.info) { 
   padding-top: 3px;
   padding-bottom: 3px; 
   height: 50px;
   min-height: 0em;
}

.group > div > h2 {
   font-size: 1em;
   padding: 4px 1.6em;
   color: var(--main-item-color);
   background-image: linear-gradient(var(--highlight-color), var(--unpressed-color));
}

.widget .actor {
  float: center;
}  

.group.widget {
   -webkit-border-radius: 30px;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
    margin: 0.7em 0.5em;
}    

.widget > .label {
	float: left;
	width: calc(75%);
	text-align: left;
	padding-left: 1em;
}

.widget {
    text-shadow: 0 4px 4px var(--info-bg-color);
    padding: 0.2em;
}

.switchUnpressed {
   background-color: transparent;
}

#navbarTop .navbar .pagejump.active, 
#navbarTop .navbar .pagejump:hover,
#navbarTop .navbar .pagejump.active_ancestor { 
   background-image: linear-gradient( var(--bright-bg-color), var(--bright-bg-color));
   color: var(--main-item-color);
}

#navbarLeft .navbar .pagejump.active, 
#navbarLeft .navbar .pagejump:hover,
#navbarLeft .navbar .pagejump.active_ancestor { 
   background-image: linear-gradient( var(--bright-bg-color), var(--bright-bg-color));
   color: var(--main-item-color);
}

#navbarLeft .widget_container  { 
   width: 50px;
}

#navbarLeft .navbar  { 
   box-shadow: 2px 4px 4px 0px rgba(10, 10, 10, 0.5);
}

#navbarLeft { 
   color: var(--highlight-color);
}

.info {
    border-radius: 30px;
    border: none;
    text-align:center;
    height: 30px;
    background-color: var(--info-bg-color);
}

#navbarTop { 
   background-image: linear-gradient( var(--bright-bg-color), var(--dark-bg-color));
   color: var(--highlight-color);
}

body { 
   background-image: linear-gradient( var(--bright-bg-color), var(--dark-bg-color));
   color: var(--main-item-color);
   font-size: 0.8em;
}
Die Screenshots sind wie folgt entstanden: Geteilter Windows-Bildschirm mittels WIN+Pfeiltaste, beide Browserfenster sind allso gleich groß und haben eine Skalierung von 100%. Man sieht dann quasi, dass das custom.css die Darstellung deutlich aufgeräumter darstellt, was beim Standard-Metal Design erst geht, wenn man große Bildschirmflächen hat und nutzt.

Bild

Bild

Bild
Zuletzt geändert von Robosoc am Mi Mär 04, 2020 11:57 pm, insgesamt 1-mal geändert.
VG, Sven - TWS 950Q ID:335 & 291, VPN offen, Reboot OK

StefanW
Elaborated Networks
Reactions:
Beiträge: 9689
Registriert: So Aug 12, 2018 9:27 am
Wohnort: Frauenneuharting
Hat sich bedankt: 4831 Mal
Danksagung erhalten: 7633 Mal
Kontaktdaten:

#2

Beitrag von StefanW »

Hallo Sven,

erst jetzt gesehen und - wow - das ist ganz tolle Arbeit. :clap: :clap: :clap: :clap: :clap:

Danke dass Du auch Dein CSS mit uns teilst und es so schön einstellbar gemacht hast mit den änderbaren sechs Basisfarben, da kann sich jeder nach seinen Farbvorstellungen das anpassen.

==> Ich würde das gerne diese Möglichkeiten in die (kommende) Dokumentation und in unsere Marketing-Unterlagen übernehmen. Wäre es möglich, dass Du mir die Bilder in maximaler Auflösung (also auf großem Monitor, wenn verfügbar 4k, Zoom aufdrehen) separat zukommen läßt, inkl. Erlaubnis dass wir das nutzen dürfen? Gerne per wetransfer an gl at elabnet dot de?

Bitte weiter so, ganz toll!

lg

Stefan
Stefan Werner
Product Owner für Timberwolf Server, 1-Wire und BlitzART
Bitte WIKI lesen. Allg. Support nur im Forum. Bitte keine PN
Zu Preisen, Lizenzen, Garantie, HW-Defekt an service at elabnet dot de

Link zu Impressum und Datenschutzerklärung oben.

Ersteller
Robosoc
Reactions:
Beiträge: 1876
Registriert: Di Okt 09, 2018 9:26 am
Hat sich bedankt: 635 Mal
Danksagung erhalten: 775 Mal

#3

Beitrag von Robosoc »

Klar, gerne. Mach ich am Wochenende! VG, Sven
VG, Sven - TWS 950Q ID:335 & 291, VPN offen, Reboot OK

Sensej
Reactions:
Beiträge: 901
Registriert: So Aug 12, 2018 9:12 am
Hat sich bedankt: 112 Mal
Danksagung erhalten: 240 Mal

#4

Beitrag von Sensej »

Hallo Sven,
Respekt :handgestures-thumbupright:

MfG Juri
TWS 2400 ID: 69 + PBM ID: 728 + TP-UART, VPN offen, Reboot erlaubt

Sun1453
Reactions:
Beiträge: 1849
Registriert: Do Feb 07, 2019 8:08 am
Hat sich bedankt: 1541 Mal
Danksagung erhalten: 788 Mal

#5

Beitrag von Sun1453 »

Hallo Sven,

sehr schön gemacht. Werde ich verwenden wenn ich meine CV erstelle. Sie viel besser aus als vorher. Vor allem besser für die Augen.
Gruß Michael

Timberwolf 950 QL #344 | Mit Internetanbindung | VPN Offen | Reboot nach Absprache | PROD Server
Timberwolf 2500 #602 | VPN offen | TEST Server | Reboot nach Absprache |

Ersteller
Robosoc
Reactions:
Beiträge: 1876
Registriert: Di Okt 09, 2018 9:26 am
Hat sich bedankt: 635 Mal
Danksagung erhalten: 775 Mal

#6

Beitrag von Robosoc »

Danke Euch, ich freue mich auch mega, dass ich da vorangekommen bin. Aber man muss ehrlich sagen, dass was ich da gemacht habe, ist nichts gegen das was Chris mit mehreren Designvorlagen schon geschaffen hat. Und mit meiner Konfiguration gibt es auch hier und da ein paar Schönheitsfehler, die ich noch am Ausbessern bin und die es im Original nicht gibt...Ich poste sicherlich irgendwann noch einmal eine überarbeitete CSS.

Für die die Bock auf Farbänderungen haben: Chris hat mich mal darauf gebracht, dass einem die Brwoser-Konsole deutlich unterstützt bei Änderungen mittels CSS. Hier einmal eine kurze Anleitung für Firefox zum ändern der 6 Farbvariablen, die ich verwendet habe:

1. Man klicke Strg+Shift+k -> es geht ein komplett neuer Abscnitt im unteren Bildschirmbereich auf
2. Man klicke auf Inspektor links oben in diesem Abschnitt
3. Rechts neben dem Seiten-Code werden die für den links aktuell ausgewählten Seiteninnhalt die relevanten CSS-Einstellungen angezeigt. Wen man hier nach ganz unten scrollt, findet man meine 6 Variablen, die man durch anklicken frei verändern kann und das wirkt sich auf die Darstellung auf der Seite aus...: Hier ein Bild:
4. Mit dem Element-Picker, den man ganz links oben im Abschnitt markieren kann, kann man übrigens Bereiche auf der Seite auswählen um zu ermitteln, welchen Einstellungen diese folgen... Damit kommt man schon reicht weit. Denn dann steht ja unten im rechten Abscchnitt exakt der Code, den man in eine Seite schreiben muss...

Bild

Hier mein aktuellster Code, der noch ein wenig verbessert wurde, z.B. für die Anzeige von Slidern...:

Code: Alles auswählen

:root {
  --bright-bg-color: #3c4d84;
  --dark-bg-color: #1a193a;
  --main-item-color: #ddd;
  --highlight-color: #96887a;
  --unpressed-color: #666;
  --info-bg-color: #222d;
}

#navbarTop hr { 
   height: 50px;
   width: 0px;
}

.nav_path {
   background-image: linear-gradient(var(--bright-bg-color), var(--bright-bg-color));
   color: var(--highlight-color);
}
.page.type_2d .widget.custom_bubble .value {
    line-height: 30px;
}

#pages > .page {
    padding-left: 15px;
    padding-right: 15px;
}

.widget.gauge {
    background-image: none;
}

.widget .ui-slider {
    width: calc(100%);
    margin-bottom: 1.9em;
}

div.actor.light-on.switchPressed, div.actor.light-off.switchUnpressed {
    border-style: none;
}

.light-on.switchPressed div, .light-on.switchUnpressed div {
    background-image: radial-gradient( rgba(150, 136, 122, 0.67), transparent 70%);
    padding: 0px;
    margin-left: -5px;
    margin-top: -1px;
}

.light-off.switchPressed div, .light-off.switchUnpressed div {
    color: var(--unpressed-color);
    padding: 0px;
    margin-left: -5px;
    margin-top: -1px;
}
.page.type_2d .widget.custom_bubble.embedded {
    box-shadow: 2px 4px 4px 0px rgba(135, 135, 135, 0.5);
}

.page.type_2d .widget.custom_bubble {
    border: 2px solid var(--highlight-color);
    border-radius: 30px;
    width: 30px;
    height: 30px;
    background-color: var(--info-bg-color);
}

#navbarTop .navbar .widget:not(.info) { 
   padding-top: 3px;
   padding-bottom: 3px; 
   height: 50px;
   min-height: 0em;
}

.group > div > h2 {
   font-size: 1em;
   padding: 4px 1.6em;
   color: var(--main-item-color);
   background-image: linear-gradient(var(--highlight-color), var(--unpressed-color));
}

.widget .actor {
  float: center;
}  

.group.widget {
   -webkit-border-radius: 30px;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
    margin: 0.7em 0.5em;
}    

.widget > .label {
	float: left;
	width: calc(75%);
	text-align: left;
	padding-left: 1em;
}

.widget {
    text-shadow: 0 4px 4px var(--info-bg-color);
    padding: 0.2em;
}

.switchUnpressed {
   background-color: transparent;
}

#navbarTop .navbar .pagejump.active, 
#navbarTop .navbar .pagejump:hover,
#navbarTop .navbar .pagejump.active_ancestor { 
   background-image: linear-gradient( var(--bright-bg-color), var(--bright-bg-color));
   color: var(--main-item-color);
}

#navbarLeft .navbar .pagejump.active, 
#navbarLeft .navbar .pagejump:hover,
#navbarLeft .navbar .pagejump.active_ancestor { 
   background-image: linear-gradient( var(--bright-bg-color), var(--bright-bg-color));
   color: var(--main-item-color);
}

#navbarLeft .widget_container  { 
   width: 50px;
}

#navbarLeft .navbar  { 
   box-shadow: 2px 4px 4px 0px rgba(10, 10, 10, 0.5);
}

#navbarLeft { 
   color: var(--highlight-color);
}

.info {
    border-radius: 30px;
    border: none;
    text-align:center;
    height: 30px;
    background-color: var(--info-bg-color);
}

#navbarTop { 
   background-image: linear-gradient( var(--bright-bg-color), var(--dark-bg-color));
   color: var(--highlight-color);
}

body { 
   background-image: linear-gradient( var(--bright-bg-color), var(--dark-bg-color));
   color: var(--main-item-color);
   font-size: 0.8em;
}
VG, Sven - TWS 950Q ID:335 & 291, VPN offen, Reboot OK

Ersteller
Robosoc
Reactions:
Beiträge: 1876
Registriert: Di Okt 09, 2018 9:26 am
Hat sich bedankt: 635 Mal
Danksagung erhalten: 775 Mal

#7

Beitrag von Robosoc »

StefanW hat geschrieben: Fr Mär 06, 2020 8:50 am Gerne per wetransfer an gl at elabnet dot de?
Habt Ihr die Bilder Sonntag eigentlich bekommen? Habe ich Sonntag los geschickt. Will nur auf Nummer sicher gehen, dass sie angekommen sind.
VG, Sven - TWS 950Q ID:335 & 291, VPN offen, Reboot OK

StefanW
Elaborated Networks
Reactions:
Beiträge: 9689
Registriert: So Aug 12, 2018 9:27 am
Wohnort: Frauenneuharting
Hat sich bedankt: 4831 Mal
Danksagung erhalten: 7633 Mal
Kontaktdaten:

#8

Beitrag von StefanW »

Robosoc hat geschrieben: Fr Mär 13, 2020 8:15 amHabt Ihr die Bilder Sonntag eigentlich bekommen? Habe ich Sonntag los geschickt. Will nur auf Nummer sicher gehen, dass sie angekommen sind.
Hallo Sven, ja vielen lieben Dank.

Ich bekomme nur ca. 150 eMails, WhatsUp, Telegram, Signal, Anrufe, Faxe, Tickets und Foreneinträge am Tag und schaffe nicht alles zu beantworten. Sorry.

lg

Stefan
Stefan Werner
Product Owner für Timberwolf Server, 1-Wire und BlitzART
Bitte WIKI lesen. Allg. Support nur im Forum. Bitte keine PN
Zu Preisen, Lizenzen, Garantie, HW-Defekt an service at elabnet dot de

Link zu Impressum und Datenschutzerklärung oben.
Antworten

Zurück zu „CometVisu“