Ankündigung

Einklappen
Keine Ankündigung bisher.

Neues smartVISU Design mit Theme Roller unter Version 2.9.2

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

    [Codebeispiel] Neues smartVISU Design mit Theme Roller unter Version 2.9.2

    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:
    Code:
    /* 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".
    Code:
    .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.
    Code:
    if (config_design == 'ice')
    {
    $twig->addGlobal('icon1', 'icons/bl/');
    $twig->addGlobal('icon0', 'icons/sw/');
    }
    elseif (config_design == 'holo-inspired')
    {
    $twig->addGlobal('icon1', 'icons/bl/');
    $twig->addGlobal('icon0', 'icons/sw/');
    }
    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:
    Code:
    <div class="ui-right">
    <a href="javascript:window.location.href=window.locat ion.href" style="text-decoration:none;color:#000;">
    {{ 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
Lädt...
X