[Codebeispiel] Neues smartVISU Design mit Theme Roller

[Acidrain]

Hallo zusammen,

nachdem ich schon einige Zeit nicht mehr aktiv war, musste ich mich notgedrungen (Raspberry †) mit einer Neuinstallation beschäftigen; diesmal gleich richtig auf der DiskStation in einer VM. Vielen Dank auch nochmal an das Team, das diese tolle Anleitung hier gemacht hat!

Da ich Smarthome.py und SmarthomeNG seit den frühesten Tagen einsetze, habe ich mich ein wenig an den paar bestehenden Designs sattgesehen, und auch der Visu-Schriftart "Dosis". Im Internet habe ich diese leider veraltete Anleitung gefunden, um neue Themes zu bauen. Allerdings war es nicht so schwer, das Ganze auf die aktuellen Gegebenheiten anzupassen.

Das möchte ich hier gerne an euch weitergeben, falls sich noch jemand ein anderes frisches Design für seine smartVISU gönnen/bauen möchte.

1. ThemeRoller Design anpassen/herunterladen
Das beschriebene halo-inspired Theme ist leider im Internet nicht mehr aufzufinden, allerdings ist ein fast gleich aussehendes Theme das Standard-Theme bei ThemeRoller, dessen CSS-Dateien man einfach auf http://themeroller.jquerymobile.com herunterladen kann. Wer möchte, kann natürlich gerne mit dem Design herumspielen, ich habe das einfach so wie es ist ohne Änderung als "holo-inspiered" exportiert und die holo-inspired.css aus der Zip-Datei im Verzeichnis smartvisu/designs abgelegt. Die in der alten Anleitung beschriebene xxx.min.css wird in den neuen Visu-Designs nicht mehr benötigt und muss daher nicht kopiert werden.

2. CSS-Datei anpassen
Es müssen noch ein paar smartVISU-spezifische Anpassungen ergänzt werden. Am Besten klaut man von einem ähnlichen Design und passt bei Bedarf die Formatierung an. Zum ThemeRoller holo-inspired Theme kann man ohne Änderungen aus dem ice.css den letzten Part klauen und in die holo-inspired.css hineinkopieren:

/* smartVISU
-----------------------------------------------------------------------------------------------------------*/
.icon0, a.ui-link {
stroke: #000;
fill: #000;
stop-color: #000;
}
.icon1, a.ui-link:hover, a.ui-link:active {
stroke: #5595c6;
fill: #5595c6;
stop-color: #5595c6;
}
.switch.icon1,
html .ui-btn.icon1,
[data-widget="basic.print"].icon1,
[data-widget="basic.symbol"] .icon1 {
color: #5595c6;
}

Zusätzlich sollte noch folgendes eingefügt werden, damit das smartVISU Logo seine originale Schriftart "Dosis" behält. holo-inspired nutzt ansonsten "Sans-serif".

.smartvisu {
font-family: Dosis;
}

3. Hardcoded Design-Vorgaben anpassen
Leider gibt es ein paar hart-codierte Design-Vorgaben in smartVISU, die sich nicht konfigurieren oder per CSS anpassen lassen. Falls jemand vom smartVISU-Entwicklerteam mitliest: Das wäre doch mal was für ein nächstes Release; Konfiguration dieser Funktionen in einer <design-name>.ini 😉

3.a smartvisu/index.php
Die markierte Abfrage muss in die index.php eingebaut werden. Wenn euer Design anders heißt bzw. andersfarbige Icons besser zu eurem Design passen, bitte natürlich auf eure Bedürfnisse entsprechend anpassen.

if (config_design == 'ice')
{
$twig->addGlobal('icon1', 'icons/bl/');
$twig->addGlobal('icon0', 'icons/sw/');
}
[MARKIEREN]elseif (config_design == 'holo-inspired')
{
$twig->addGlobal('icon1', 'icons/bl/');
$twig->addGlobal('icon0', 'icons/sw/');
}[/MARKIEREN]
elseif (config_design == 'greenhornet')
{
$twig->addGlobal('icon1', 'icons/gn/');
$twig->addGlobal('icon0', 'icons/ws/');
}
else
{
$twig->addGlobal('icon1', 'icons/or/');
$twig->addGlobal('icon0', 'icons/ws/');
}

3.b smartvisu/pages/base/base.html
Bei einem hellen Design-Hintergrund bleibt leider das smartVISU-Logo und die Mini-Anzeige von Uhrzeit und Visu-Version in weißer Schrift. Sieht auch beim Standard-Design "ice" nicht toll aus. Abhilfe schafft, die Textfarbe von weiß (#fff) auf schwarz (#000) zu ändern:

<div class="ui-right">
<a href="javascript:window.location.href=window.locat ion.href" style="text-decoration:none;color:[MARKIEREN]#000[/MARKIEREN];">
{{ lib.smartvisu() }}
<div class="mini">
{{ clock.miniclock('', lang('format','time') ~ ', ' ~ lang('format','day') ) }} v{{ config_version_full }}</div>
</a>
</div>

4. Neues Theme auswählen
Zum Abschluss in die smartVISU Konfiguration gehen, Visu-Cache leeren, ggf. auch Browser-Cache leeren und das neue Design auswählen.

So sieht dann das Ergebnis aus:

holo-inspired.png

Viel Spaß beim Herumprobieren!

Viele Grüße
Dominik

[wvhn]

Danke für die Anleitung. Ich habe diese auf github ins Wiki übernommen und für die fest codierten Stile ein issue erstellt.

Gruß
Wolfram

[henfri]

Sieht gut aus!
Danke fürs teilen!

[Acidrain]

Hallo Wolfram,
vielen Dank!

[wvhn]

3.b smartvisu/pages/base/base.html
Bei einem hellen Design-Hintergrund bleibt leider das smartVISU-Logo und die Mini-Anzeige von Uhrzeit und Visu-Version in weißer Schrift. Sieht auch beim Standard-Design "ice" nicht toll aus. Abhilfe schafft, die Textfarbe von weiß (#fff) auf schwarz (#000) zu ändern:

  
 <div class="ui-right">
    [MARKIEREN]<a href="javascript:window.location.href=window.locat ion.href" style="text-decoration:none;color:#000;">[/MARKIEREN]
        {{ lib.smartvisu() }}
        <div class="mini">
            {{ clock.miniclock('', lang('format','time') ~ ', ' ~ lang('format','day') ) }} v{{ config_version_full }}
        </div>
    [MARKIEREN]</a>[/MARKIEREN]
</div>

Der markierte Link href=... ermöglicht zwar einen page-reload, widersetzt sich aber allen meinen Bemühungen, die Schriftfarbe jeweils in den CSS-Dateien der Designs festzulegen. Sobald ich die beiden markierten Zeilen weglasse, klappt die Darstellung einwandfrei. Man muss den page-reload dann halt über F5 machen.

Hat irgendjemand von Euch eine Anwendung, bei der er den o.g. Link braucht? Könnt Ihr mal testen, ob es negative Effekte gibt, wenn Ihr die beiden Zeilen in der base.html löscht? Ich kann bei mir keine Nachteile feststellen.

Gruß
Wolfram

[wvhn]

Falls jemand vom smartVISU-Entwicklerteam mitliest: Das wäre doch mal was für ein nächstes Release; Konfiguration dieser Funktionen in einer <design-name>.ini 😉

Die Configseite ist sowas von genial gemacht, das ist wirklich preisverdächtig. Man kann den Optionen in den Select-Menüs Metadaten mitgeben und diese auswerten. Ich habe den design-CSS Dateien jetzt die icon-Pfade (siehe oben Punkt 3a) als Metadaten mitgegeben.

/*!
* jQuery Mobile 1.4.5
* Git HEAD hash: 68e55e78b292634d3991c795f06f5e37a512decc <> Date: Fri Oct 31 2014 17:33:30 UTC
* http://jquerymobile.com
*
* Copyright 2010, 2014 jQuery Foundation, Inc. and othercontributors
* Released under the MIT license.
* http://jquery.org/license
*
* [MARKIEREN]@default design_icon0 icons/ws/[/MARKIEREN]
* [MARKIEREN]@default design_icon1 icons/gn/[/MARKIEREN]
*
*/

Für Leute, die das gerne testen möchten, hänge ich die CSS-Dateien als ZIP-Archiv an. Leider kann ich die anderen Dateien nicht mitliefern, weil die auf dem Entwicklungsstand des develop branch sind und deshalb nicht mehr kompatibel zu v2.9.2.

Deshalb hier eine kurze Anleitung zum Nachbau.

In der ./pages/base/config.html (ca. Zeile 54) sollen die Metadaten ausgewertet, aber nicht angezeigt werden:

{{ forms.config_select(source, values, 'design', dir('designs', '(.+?).css')) }}
[MARKIEREN]/** get icon colors out of design.css meta data but don't show input fields */
<span style="display: none;">{{ forms.config_input(source, values, 'design_icon0', 'wide') }} </span>
<span style="display: none;">{{ forms.config_input(source, values, 'design_icon1', 'wide') }} </span>[/MARKIEREN]

In ./lib/defaults.ini müssen die Werte vorbelegt werden:

; -----------------------------------------------------------------------------
; U S E R - I N T E R F A C E
; -----------------------------------------------------------------------------
; The name of the stylesheet. Results in NAME.min.css
; You may change your design with the jquerymobile theme roller
; Link: http://jquerymobile.com/themeroller/
design = "night"
[MARKIEREN]design_icon0 = "icons/ws/"
design_icon1 = "icons/or/"[/MARKIEREN]

In der Index.php noch die oben gezeigten vom Design abhängigen Zuweisungen ersetzen durch

[MARKIEREN]$twig->addGlobal('icon1', config_design_icon1);
$twig->addGlobal('icon0', config_design_icon0);[/MARKIEREN]

Die Lösung ist jetzt im develop.

Gruß
Wolfram

[wvhn]

Acidrain welche Erfahrungen hast Du mit den Plots? Passen die Farben auch ohne die Highcharts styles aus der ice.css, oder muss das Kopieren der styles in der Anleitung noch ergänzt werden?

[Acidrain]

Hallo wvhn

ich habe bei mir nur period und rtr im Einsatz, die sehen damit gut aus. Andere plots habe ich nicht ausprobiert.

Viele Grüße
Dominik

[klotzek]

Hallo,
grundsätzlich funktionieren bei mir eigene CSS-Dateien sehr gut, bis auf eine Ausnahme: Das Einfärben einiger Icons:
So soll es aussehen und so sieht es in der menu.html aus: image.png
Das ist der HTML Code dazu:

<img class="icon{% if page == 'index' %} icon1{% else %} icon0{% endif %}" src="{{ icon0 }}control_building_empty.svg" alt="home" />

In der menu_rooms.html sieht es so aus: image.png
Und das ist der Code dazu:

<img class="icon icon0" src="{{ icon0 }}control_building_modern_s_2og_eg.svg" />
   <img class="icon{% if page == 'index' %} icon1{% else %} icon0{% endif %}" src="{{ icon0 }}control_building_empty.svg" alt="home" />​

Ich habe testweise den Code von Oben hier reinkopiert, trotz identintischen Codes ist das Haus unten weiß, nicht in der im CSS-File angegebenen Farbe.

Kann mir bitte Jemand auf die Sprünge helfen?

Vielen Dank,
Jürgen

[wvhn]

Hallo Jürgen,

Da Du diesen Thread verwendest, gehe ich davon aus, dass Du ein eigenes Design erstellt hast. Ich kenne kein Design, das die hier abgebildeten Farben erzeugt.
In diesem Fall musst Du bei jedem neuen smartVISU-Release prüfen, ob Änderungen in den Design-CSS vorgenommen wurden und diese in Deinem Design entsprechend ergänzen.

Grundsätzlich lassen sich svg-icons, die mit einem <img>-Tag eingebunden werden, überhaupt nicht mittels CSS einfärben. smartVISU nutzt dazu einen Trick, indem sie die svg-icons driekt in das html-Gerüst einbettet. Dies wird von der Funktion "fx.init()" erledigt, wie in verschiedenen Threads zur Version 3.3 und dem neuen icon-Handling dokumentiert ist. Für die Icons im rooms_menu war dies bisher nicht vorgesehen.

Der Selektor, für fx.init() lautet:

('img.icon1[src$=".svg"], img.do-fx[src$=".svg"], a.icon1 > img.icon[src$=".svg"]')

Du kannst also in Deinem rooms_menu bei den Klassen im <img>-Tag "icon1" oder "do-fx" ergänzen, um die Icons mit fx.init() zu bearbeiten, oder Du gibst dem Anchor-Tag eine Klasse "icon1" mit:

<a id="{{ page }}_menu-rooms" class="icon1" href="index.php" onclick="linkAnimate(id)">
    <img class="icon{% if page == 'index' %} icon1{% else %} icon0{% endif %}" src="{{ icon0 }}control_building_empty.svg" alt="home" />
</a>​

Alternativ kannst Du das neue Widget {{ lib.imgsvg (( id, pic, iconclass, styleoptions ) }} anstelle des <img>-Tags nutzen:

{{ lib.imgsvg (( id, 'control_building_empty.svg', 'icon1' ) }}

Das Widget benötig die Icons zwingend in ./icons/ws oder ./dropins/icons/ws.

Gruß
Wolfram

[klotzek]

Hallo Wolfram,

vielen Dank für Deine schnelle Hilfe.
Die Variante mit der Klasse im <a> Tag funktioniert für icon1, aber nicht für icon0.
Die Variante die Klasse class="icon" im <img> Tag zu erweitern auf class="icon icon0 do-fx" funktioniert auch für die "Farbe" icon0.

Falls Interesse für mein CSS besteht, ich habe es angehängt.

Viele Grüße,
Jürgen

[wvhn]

Die Klasse „icon1“ im <a>-Tag wird für den Selector von fx.init() benötigt. Das Styling findet über die Klasse „icon0“ oder „icon1“ im <img>-Tag statt.

[klotzek]

Hallo Wolfram,

so läuft's bei mir:

<a  href="index.php?page=ankommen">
            <img class="icon icon0 do-fx" src="{{ icon0 }}fts_frontdoor.svg"/>​

Scheint auch ohne die Klasse im <a> Tag zu gehen.

Viele Grüße,
Jürgen

[wvhn]

Ja klar. Du schriebst aber, dass das <a>-Tag nicht mit „icon0“ funktioniert. Das soll es auch nicht. deshalb habe ich das zu Dokumentationszwecken hier nochmal richtig gestellt.

Du hast Dich für eine der anderen Varianten entschieden. Das ist auch OK.

Gruß
Wolfram

[klotzek]

Hallo Wolfram,

OK, verstanden. Ich möchte aber gern Eines noch los werden: Du warst unglaublich schnell und überaus kompetent. Vielen Dank dafür!!!
Mein Design läuft, aber nur wegen Dir.

Viele Grüße,
Jürgen