Ankündigung

Einklappen
Keine Ankündigung bisher.

Neues Design, ähnlich Homeserver

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

    Gibts eine möglichkeit die Größe und Breite der Tabs irgendwie anzupassen? Ich hätte das gerne wie beim Gira Quad Client. Rechts und Links ein Pfeilsymbol und in der Mitte mehrere Tabs. Allerding müssen die Pfeiltabs ja nicht so breit sein, wie die anderen Tabs. Auch mit der Höhe der Tabs komm ich nicht so richtig weiter.
    Anbei noch mein Code. Quasi aus der Beispielseite.

    Code:
    {% block quad_top %}
     <div id="navbar1" class="nw_tab-header ui-min" data-role="navbar" data-tab-selection="tab1">
            <ul>
                <li><a href="#" data-tab-class="tab1"><img class="icon" src="{{ icon0 }}edit_settings.svg" /></a></li>
                <li><a href="#" data-tab-class="tab2"><h1>Wind</h1></a></li>
                <li><a href="#" data-tab-class="tab3"><h3>Helligkeit</h3></a></li>
                <li><a href="#" data-tab-class="tab4"><h5>Globalstrahlung</h5></a></li>
            </ul>
        </div>
        <div id="tab-content1" class="nw_tab-content">
            <div class="tab1">{{ plot.period('plot.aa.temp', ['aa.temp', 'ws.temperatur'], 'avg', '1w', 0, -20, 40, '', ['Nordwand', 'Dach'], '', '', '', '1h') }}</div>
            <div class="tab2 ui-screen-hidden">{{ plot.period('plot.wind', 'ws.wind.geschwindigkeit', 'avg', '1w', 0, 0, 15, '', 'Geschwindigkeit', '', '', '', '1h') }}</div>
            <div class="tab3 ui-screen-hidden">{{ plot.period('plot.helligkeit', ['ws.helligkeit.nord', 'ws.helligkeit.ost', 'ws.helligkeit.sued', 'ws.helligkeit.west', 'ws.helligkeit.sky'], 'avg', '1w', 0, 0, 80000, '', ['Nord', 'Ost', 'Süd', 'West', 'Sky'], '', '', '', '1h') }}</div>
            <div class="tab4 ui-screen-hidden">{{ plot.period('plot.globalstrahlung', ['ws.globalstrahlung.nord', 'ws.globalstrahlung.ost', 'ws.globalstrahlung.sued', 'ws.globalstrahlung.west', 'ws.globalstrahlung.sky'], 'avg', '1w', 0, 0, 1000, '', ['Nord', 'Ost', 'Süd', 'West', 'Sky'], '', '', '', '1h') }}</div>
    </div>
    
    {% endblock %}
    image_71675.jpg

    Kommentar


      Mit den Tabs habe ich mich ehrlich gesagt noch zu wenig auseinander gesetzt.. Aber ich hab mal das CSS ein wenig aufgeräumt...
      Die Aktualisierungen sind nun hier zu finden: https://github.com/onkelandy/smartvi...uad/pages/base
      (quad.html, root.html und der quad Ordner)

      Die Einträge im visu.css für die Tabs heißen quad_tab-content und quad_tab-header. Da kannst du mal rumspielen. Pfeil links/rechts zum Durchschalten mehrerer Tabs ist wohl nicht implementiert

      Kommentar


        Dass ich an die visu.css ran muss hatte ich schon rausgefunden. Hab darüber und über die html auch hinbekommen die Tabs in Höhe und Breite zu manipulieren und die Schriftgröße anzupassen.

        Das hier ist mein Eintrag in der visu.css
        Code:
        .nw_tab-header a {
            text-decoration: none;
            display: block;
            text-align: center;
            height: 35px;
            font-size: 50pt;
        }
        und hier in der index.html
        Code:
        {% block quad_top %}
        
         <div id="navbar1" class="nw_tab-header min" data-role="navbar" data-tab-selection="tab1">
                <ul>
                        <li><a href="#" data-tab-class="tab1" class="ui-btn-active"><span style="font-size:15pt;">Temperatur</span></a></li>
                        <li><a href="#" data-tab-class="tab2"><span style="font-size:15pt;">Wind</span></a></li>
                        <li><a href="#" data-tab-class="tab3"><span style="font-size:15pt;">Helligkeit</span></a></li>
                        <li><a href="#" data-tab-class="tab4"><span style="font-size:15pt;">Globalstrahlung</span></a></li>
        
                </ul>
        </div>
        <div id="tab-content1" class="nw_tab-content">
                <div class="tab1">{{ plot.period('plot.aa.temp', ['aa.temp', 'ws.temperatur'], 'avg', '1w', 0, -20, 40, '', ['Nordwand', 'Dach'], '', '', '', '1h') }}</div>
                <div class="tab2 ui-screen-hidden">{{ plot.period('plot.wind', 'ws.wind.geschwindigkeit', 'avg', '1w', 0, 0, 15, '', 'Geschwindigkeit', '', '', '', '1h') }}</div>
                <div class="tab3 ui-screen-hidden">{{ plot.period('plot.helligkeit', ['ws.helligkeit.nord', 'ws.helligkeit.ost', 'ws.helligkeit.sued', 'ws.helligkeit.west', 'ws.helligkeit.sky'], 'avg', '1w', 0, 0, 80000, '', ['Nord', 'Ost', 'Süd', 'West', 'Sky'], '', '', '', '1h') }}</div>
                <div class="tab4 ui-screen-hidden">{{ plot.period('plot.globalstrahlung', ['ws.globalstrahlung.nord', 'ws.globalstrahlung.ost', 'ws.globalstrahlung.sued', 'ws.globalstrahlung.west', 'ws.globalstrahlung.sky'], 'avg', '1w', 0, 0, 1000, '', ['Nord', 'Ost', 'Süd', 'West', 'Sky'], '', '', '', '1h') }}</div>
                <div class="tab5 ui-screen-hidden">{{ plot.period('plot.globalstrahlung', ['ws.globalstrahlung.nord', 'ws.globalstrahlung.ost', 'ws.globalstrahlung.sued', 'ws.globalstrahlung.west', 'ws.globalstrahlung.sky'], 'avg', '1w', 0, 0, 1000, '', ['Nord', 'Ost', 'Süd', 'West', 'Sky'], '', '', '', '1h') }}</div>
        </div>
        
        {% endblock %}
        Ergibt dann folgendes Bild
        tabs2.jpg

        Die Geschichte mit dem Pfeil links und rechts hab ich jetzt erstmal aufgegeben und werde mich auf maximal 5 oder 6 Einträge Beschränken.
        Da ich werder fit in css, java, und html bin, würde das enorm viel Zeit in Anspruch nehmen mich da einzuarbeiten und die Zeit kann ich leider aktuell nicht aufbringen. Obs danach überhaupt ein brauchbares Ergebniss gäbe steht auch in den Sternen. Ich bleib aber mit den zur Verfügung stehenden Mittel weiter dran, und wenn die Visu soweit fertig ist stell ich Sie zur Verfügung.
        Angehängte Dateien
        Zuletzt geändert von masterjost; 31.03.2018, 09:24.

        Kommentar


          masterjost Magst vielleicht deine Ergebnisse mal hier preisgeben?
          Inzwischen hab ich auf GitHub das Quad Design deutlich sauberer in die normale sv eingebunden. Was beim Umstieg zu tun ist, steht hier:
          https://knx-user-forum.de/forum/supp...16#post1366816

          Kommentar


            Aktuell bin ich leider noch überhaupt nicht dazu gekommen an dieser Stelle weiter zu machen. Ich habs aber noch nicht aufgegeben und poste die Ergebnisse bei Gelegenheit.

            Kommentar

            Lädt...
            X