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

    #2
    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

    Kommentar


      #3
      Sieht gut aus!
      Danke fürs teilen!

      Kommentar


        #4
        Hallo Wolfram,
        vielen Dank!

        Kommentar


          #5
          Zitat von Acidrain Beitrag anzeigen
          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>
          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
          Zuletzt geändert von wvhn; 10.10.2020, 16:09.

          Kommentar


            #6
            Zitat von Acidrain Beitrag anzeigen
            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.

            Code:
            /*!
            * 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
            *
            * @default design_icon0 icons/ws/
            * @default design_icon1 icons/gn/
            *
            */
            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:
            Code:
            {{ forms.config_select(source, values, 'design', dir('designs', '(.+?).css')) }}
            /** 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>
            In ./lib/defaults.ini müssen die Werte vorbelegt werden:
            Code:
            ; -----------------------------------------------------------------------------
            ; 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"
            design_icon0 = "icons/ws/"
            design_icon1 = "icons/or/"
            In der Index.php noch die oben gezeigten vom Design abhängigen Zuweisungen ersetzen durch
            Code:
            $twig->addGlobal('icon1', config_design_icon1);
            $twig->addGlobal('icon0', config_design_icon0);
            Die Lösung ist jetzt im develop.

            Gruß
            Wolfram
            Angehängte Dateien
            Zuletzt geändert von wvhn; 10.10.2020, 22:27.

            Kommentar


              #7
              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?

              Kommentar


                #8
                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

                Kommentar

                Lädt...
                X