Neues Design, ähnlich Homeserver

[masterjost]

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.

{% 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

[Onkelandy]

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

[masterjost]

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

.nw_tab-header a {
    text-decoration: none;
    display: block;
    text-align: center;
    height: 35px;
    font-size: 50pt;
}

und hier in der index.html

{% 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.

[Onkelandy]

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

[masterjost]

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.

[Onkelandy]

masterjost Falls sich hier noch was getan haben sollte, wäre jetzt noch die Zeit, die Erkenntnisse zu teilen Release steht kurz bevor: https://github.com/Martin-Gleiss/smartvisu/tree/develop
Etwaige zusätzliche CSS Sachen oder nur Tab spezifische Optimierungen könnte man noch rein packen.

[danny]

Hallo Onkelandy,

ich hab noch was kleines gefunden und weis aber nicht wie ich das weg bekomme.
So schaut es normal aus:
Ok.PNG

und so im Quad Design:
NIO.PNG

Der Mond ist da 3 mal zu sehen.

Der Code aus dem index.html

/**WETTER*/
<div style="padding: 20px">

{{ weather.current('weather_today') }}
{{ weather.forecastweek('weather_forecast') }}

</div>

Gruß Danny

[wvhn]

Das kann ich bestätigen. Ist sowohl im Quad, als auch im Standard-Design so. Das weather-widget ist aber seit Monaten unverändert. Werde morgen mal nachsehen, ob Änderungen in css dafür verantwortlich sind.

[henfri]

Hallo,

bei mir funktioniert der Shutter nicht richtig.
shutter.PNG

Die beiden Schieber lassen sich nicht bewegen.

Die Definition sieht so aus:

quad.blind('og.Till.lamellen_ost', 'Till Lamelle Ost',
'og.Till.lamellen.ost.auf_ab',
'og.Till.lamellen.ost.stop',
'og.Till.lamellen.ost.position',
'',
'og.Till.lamellen.ost.lamelle','', 0, 100) }}

Habe ich da was falsch gemacht?

Gruß,
Hendrik

[wvhn]

Hast Du mal das device.blind in der Doku aufgerufen und probiert?

Gruß Wolfram

[henfri]

Hallo Wolfram,

ja, in der Doku funktioniert es.

Gruß,
Hendrik

[Onkelandy]

henfri Check bitte mal die quad doku. Es gibt 2, 3 widgets, bei denen ich die Attribute den "normalen" Widgets angepasst habe. Sprich, nach "lamelle" muss das leere Attribut raus.

[henfri]

Hallo,

danke für den Tipp.
Meinst du nicht, es wäre besser, die Attribute der normalen Widgets beizubehalten?

Wie auch immer:

{{
quad.blind('og.Till.lamellen_ost', 'Till Lamelle Ost',
'og.Till.lamellen.ost.auf_ab',
'og.Till.lamellen.ost.stop',
'og.Till.lamellen.ost.position',
'og.Till.lamellen.ost.stop',
'og.Till.lamellen.ost.lamelle', 0, 100) }}

Zeigt das gleiche Verhalten :-(
Beim Blind funktioniert es:

{{ quad.blind('eg.Wohnzimmer.rollo', 'Wohnzimmer',
'eg.Wohnzimmer.rollo.auf_ab', 'eg.Wohnzimmer.rollo.stop','eg.Wohnzimmer.rollo.po sition') }}

Gruß,
Hendrik

[Onkelandy]

Ich weiß nicht, was du meinst. Die Attribute SIND ident zu den normalen Widgets. Wenn die Werte korrekt sind, ist auch die Anzeige korrekt. Die Attribs sind bei shutter und blind übrigens leicht anders, aber auch im normalen device.

Dein obiger Code funktioniert bei mir 1A

[henfri]

Hallo,

sorry, da hatte ich Dich falsch verstanden.
Ich habe das jetzt (noch) dreimal überprüft, sehe aber keinen Fehler.
:-(

Die Werte sehen doch gut aus (aus der Entwickler-Console in Chrome):

["og.Till.lamellen.ost.auf_ab",0],["og.Till.lamellen.ost.lamelle",100.0],["og.Till.lamellen.sued.auf_ab",0],["og.Till.lamellen.sued.lamelle",100.0]]}
io_smarthome.py.js:147 [io.smarthome.py] receiving data: {"cmd":"item","items":[["og.Till.lamellen.ost.position",99.2]]}
io_smarthome.py.js:147 [io.smarthome.py] receiving data: {"cmd":"item","items":[["og.Till.lamellen.ost.lamelle",33.7]]}

Gruß,
Hendrik