Neues Design, ähnlich Homeserver

[henfri]

Hallo Wolfram,

ja, in der Doku funktioniert es.

Gruß,
Hendrik

[wvhn]

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

Gruß Wolfram

[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]

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.

[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

[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.

[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 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]

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]

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]

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]

Für die Standardfunktionen ist es ausreichend, die normalen Attribute anzugeben. Ich würde in diesem Sinne mal mit einfachen Dingen starten wie zB das zweite Dimmer-Beispiel hier: index.php?page=quad/widget_quad.dimmer&pages=quad_docu

Das ginge eigentlich auch einfacher...

{{ quad.dimmer('dimmer2', 'Dimmer Example 2', 'licht.SA', 'licht.dimmen', 0, 255, 1, [icon.light(),icon.light('','','licht.dimmen') }}]

Falls du Ideen zur Optimierung hast, her damit. Es sollte auf jeden Fall möglich sein, nur die wichtigsten Attribute anzugeben. Falls das irgendwo nicht klappt, muss ich das überarbeiten.

[stromie]

Danke für die Info.
Mit dem Vielen Paramenter und Klammern ist schwer rein zu kommen.

[Onkelandy]

Das ist nur dafür da, die Items mit werten zu befüllen. Für ne echte Installation kommt das raus, da die Werte ja von smarthomeNG oä kommen.

[stromie]

Hallo Onkelandy

habe angefangen meine bestehenden Seiten an deine neue Version anzupassen.
Was wir noch unklar ist, ist das Javascript in den
<script>
$( document ).ready(function() {
io.write('light.dimmen', '10' );
io.write('light.SA', '1' );
io.write('led.R.dimmen', '10' );
io.write('led.R', '1' );
io.write('led.G.dimmen', '100' );
io.write('led.G', '1' );
io.write('led.B.dimmen', '0' );
io.write('led.B', '0' );
io.write('led.WW.dimmen', '255' );
io.write('led.WW', '1' );
io.write('h.value', '50' );
io.write('h.switch', '1' );
io.write('s.value', '250' );
io.write('s.switch', '1' );
io.write('v.value', '250' );
io.write('v.switch', '1' );
io.write('led.sequencer', '0' );
io.write('item1.automatik.autostate_name', 'Standard');
io.write('item1.automatik.lock', '0');
});

</script>
kannst du mal kurz beschreiben, was das macht ?

Grüße Stromie