Block-Anordnungs-Problem

[TCr82]

Hi,

ich habe folgendes Problem: Wenn einer der Blöcke auf der Seite höher ist als der andere, dann klafft eine Riesen Lücke in der Ansicht.

Hat jemand eine Idee wie man das behebt oder bin ich der Einzige mit dem Problem?

Gruß

[macflei]

<br clear="all">

[Apollo]

Oder beim zweiten Block auch ne leere "Konfiguration" vorsehen.

Gruss

[TCr82]

Die Seite wird per Autogenerator aus sh.py erzeugt, so ist das alles etwas schwierig. Wie man sieht ist das eine der Übersichtsseiten die dynamtisch aus allen markierten Items erzeugt wurde.

Nicht wirklich zufriedenstellend das ganze. Optimal wäre das per CSS zu beheben, bin da aber auch nicht weiter gekommen, wie ich den Float korrigieren könnte.

Wenn der zweite Block höher ist dann gibts kein Problem...

[Orion]

Hallo,

ohne es im Konkreten selbst ausprobiert zu haben: Du kannst in die sv_widget definition auf HTML code mit reinschreiben, der landet dann auch in den generierten Seiten. Damit solltest Du evt.
<br clear="all">
in die Autogenerierung reinbekommen.

Michel

[SachsenTobi]

Hallo,

da ich diese Anordnung mit den Blocks und den darin enthaltenen Informationen sehr Interessant finde und mich auch interessiert was sich hinter "Konfiguration" versteckt wollte ich dich bitten Deinen HTML Code hier zu veröffentlichen.

Du hilfst damit bestimmt vielen Anfänger Usern, wie auch ich es bin, ein ganzes Stück weiter.

Dankeschön

[TCr82]

Hallo Tobi,

hier ein paar Auszüge aus meinem Setup:

root@sh:/usr/local/smarthome# ls -lah items/
insgesamt 52K
drwxr-xr-x  2 smarthome smarthome 4,0K 2015-01-17 13:25 .
drwxr-xr-x 15 smarthome smarthome 4,0K 2014-12-22 22:44 ..
-rw-r-xr--  1 smarthome smarthome 4,0K 2014-12-31 15:39 0-aussen.conf
-rw-r-xr--  1 smarthome smarthome 27K 2015-01-02 18:12 1-eg.conf
-rw-r-xr--  1 smarthome smarthome 3,3K 2015-01-17 13:22 2-zentral.conf
-rw-r-xr--  1 smarthome smarthome 3,2K 2015-01-26 23:33 3-technik.conf

auszug aus der 1-eg.conf

[eg]
        [[egSep]]
                name = Erdgeschoß
                sv_page = seperator

        [[flur]]
                name = Flur
                sv_page = room
                sv_img = scene_stairs.svg
                sv_nav_aside = {{ basic.float('item', 'eg.flur.temperature', '°') }} <br> {{ basic.symbol('licht_flur1', 'eg.flur.licht1', 'Flur 1 an', icon1~'light_light.png') }} {{ basic.symbol('licht_flur2', 'eg.flur.licht2', 'Flur 2 an', icon1~'light_light.png') }} {{ basic.symbol('licht_tauf', 'eg.flur.treppenaufgang', 'Treppenaufgang an', icon1~'light_light.png') }} {{ basic.symbol('licht_eingang', 'eg.flur.eingang', 'Eingang an', icon1~'light_light.png') }}
                sv_heading_left = Zentral &nbsp;<span data-role="controlgroup" data-type="horizontal">{{ basic.button('bz1', 'zentral.beleuchtung.flur', 'An', '', 'on') }}{{ basic.button('bz2', 'zentral.beleuchtung.flur', 'Aus', '', 'off') }}</span>

                [[[licht1]]]
                        name = Flur 1
                        type = bool
                        visu_acl = rw
                        sv_widget = {{ my_widgets.switch('item', 'Beleuchtung', 'item', 'item.stromwert', 'item.wh', 'item.betriebsstunden') }}
                        sv_item_type = light
                        knx_dpt = 1
                        knx_send = 2/0/120
                        knx_listen = 2/1/120
                        knx_init = 2/1/120

                        [[[[stromwert]]]]
                                type = num
                                visu_acl = ro
                                knx_dpt = 9
                                knx_listen = 2/5/120
                                knx_init = 2/5/120
                        [[[[wh]]]]
                                type = num
                                visu_acl = ro
                                knx_dpt = 13
                                knx_listen = 2/6/120
                                knx_init = 2/6/120
                        [[[[betriebsstunden]]]]
                                type = num
                                visu_acl = ro
                                knx_dpt = 7
                                knx_listen = 2/7/120
                                knx_init = 2/7/120
                [[[licht2]]]
                        name = Flur 2
                        type = bool
                        visu_acl = rw
                        sv_widget = {{ my_widgets.switch('item', 'Beleuchtung', 'item', 'item.stromwert', 'item.wh', 'item.betriebsstunden') }}
                        sv_item_type = light
                        knx_dpt = 1
                        knx_send = 2/0/121
                        knx_listen = 2/1/121
                        knx_init = 2/1/121

                        [[[[stromwert]]]]
                                type = num
                                visu_acl = ro
                                knx_dpt = 9
                                knx_listen = 2/5/121
                                knx_init = 2/5/121
                        [[[[wh]]]]
                                type = num
                                visu_acl = ro
                                knx_dpt = 13
                                knx_listen = 2/6/121
                                knx_init = 2/6/121
                        [[[[betriebsstunden]]]]
                                type = num
                                visu_acl = ro
                                knx_dpt = 7
                                knx_listen = 2/7/121
                                knx_init = 2/7/121
        [[kueche]]
                name = Küche
                sv_page = room
                sv_img = scene_cooking.svg
                sv_nav_aside = {{ basic.float('item', 'eg.kueche.temperature', '°') }} <br> {{ basic.symbol('kueche_licht1', 'eg.kueche.licht', 'Licht an', icon1~'light_light.png') }}

                [[[licht]]]
                        name = Küche
                        type = bool
                        visu_acl = rw
                        sv_widget = {{ my_widgets.dimmer('item', 'Beleuchtung', 'item', 'item.dimmen') }}
                        sv_item_type = light
                        knx_dpt = 1
                        knx_send = 2/0/130
                        knx_listen = 2/1/130
                        knx_init = 2/1/130

                        [[[[dimmen]]]]
                                type = num
                                visu_acl = rw
                                knx_dpt = 5.001
                                knx_listen = 2/4/130
                                knx_send = 2/3/130
                                knx_init = 2/4/130

auszug aus der 2-zentral.conf

[zentral]
        [[uebersichtSep]]
                name = Übersichten
                sv_page = seperator

        [[beleuchtung]]
                name = Beleuchtung
                sv_page = overview
                sv_img = light_light.svg
                sv_overview = light
                sv_heading_left = Alle Zentral <span data-role="controlgroup" data-type="horizontal">{{ basic.button('bz1', 'zentral.beleuchtung.alle', 'An', '', 'on') }}{{ basic.button('bz2', 'zentral.beleuchtung.alle', 'Aus', '', 'off') }}</span>
                sv_heading_right = Flur Zentral <span data-role="controlgroup" data-type="horizontal">{{ basic.button('bfz1', 'zentral.beleuchtung.flur', 'An', '', 'on') }}{{ basic.button('bfz2', 'zentral.beleuchtung.flur', 'Aus', '', 'off') }}</span>

                [[[alle]]]
                        type = bool
                        visu_acl = rw
                        enforce_updates = yes
                        knx_dpt = 1
                        knx_send = 1/2/0
                [[[eg]]]
                        type = bool
                        visu_acl = rw
                        enforce_updates = yes
                        knx_dpt = 1
                        knx_send = 1/2/2
                [[[flur]]]
                        type = bool
                        visu_acl = rw
                        enforce_updates = yes
                        knx_dpt = 1
                        knx_send = 1/2/120
                [[[keller]]]
                        type = bool
                        visu_acl = rw
                        enforce_updates = yes
                        knx_dpt = 1
                        knx_send = 1/2/1

so jetzt der html code:

root@sh:/var/www/smartVISU/pages/MyHOME# ls -lah
insgesamt 40K
drwxrwxr-x  2 www-data www-data 4,0K 2014-11-29 21:06 .
drwxrwxr-x 15 www-data www-data 4,0K 2013-11-03 18:57 ..
-rw-rw-r--  1 www-data www-data 4,9K 2015-01-08 22:37 my_widgets.html
-rw-rw-r--  1 www-data www-data 555 2014-12-28 18:31 rooms.html
-rw-rw-r--  1 www-data www-data 1,4K 2014-12-30 23:08 visu.css
-rw-rw-r--  1 www-data www-data 924 2014-11-29 21:07 visu.js

die rooms.html

{% import "my_widgets.html" as my_widgets %}

{% extends "base.html" %}

{% block sidebar %}
    {% include 'navigation.html' %}
{% endblock %}

{% block content %}

    Rooms

{% endblock %}

und ein ein teil meine my_widgets.html

{% macro switch(id, txt, gad_switch, gad_power, gad_oh, gad_Wh, gad_ao) %}
        {% import "basic.html" as basic %}
        {% set uid = uid(page, id) %}

                                <table class="myStyle">
                                        <tr>
                                                <td class="myStyle">
                                                        <h1 class="myStyle">{{ txt }}</h1>
                                                        <div class="myStyle myvCenter">{{ basic.flip(id~'-switch', gad_switch ,'An','Aus') }}</div>
                                                </td>
                                                <td class="myStyle">
                                                        <h1 class="myStyle">Leistung</h1>
                                                        <div class="myStyle myvCenter">
                                                                {{ basic.formula(id~'-power2watt', gad_power, 'Watt', '(((230)*(VAR/1000)*100)/100).toFixed(0)') }} ({{ basic.float(id~'-power', gad_power, 'mA') }})
                                                        </div>
                                                </td>
                                        </tr>
                                        <tr>
                                                <td class="myStyle">
                                                        <h1 class="myStyle">Betriebsstunden</h1>
                                                        <div class="myStyle myvCenter">{{ basic.value(id~'-oh', gad_oh) }}</div>
                                                </td>
                                                <td class="myStyle">
                                                        <h1 class="myStyle">Verbrauch</h1>
                                                        <div class="myStyle myvCenter">{{ basic.value(id~'-Wh', gad_Wh, 'Wh') }}</div>
                                                </td>
                                        </tr>
                                </table>

{% if gad_ao %}
                        </div>
                        <div data-role="collapsible">
                                <h3>Konfiguration</h3>
                                <table class="myStyle">
                                        <tr>
                                                <td class="myStyle">
                                                        <h1 class="myStyle">Automatisch aus</h1>
                                                        <div class="myStyle myvCenter">{{ basic.flip(id~'-switch-ao', gad_ao, 'An', 'Aus') }}</div>
                                                </td>
                                                <td class="myStyle">
                                                        <h1 class="myStyle">&nbsp;</h1>
                                                        <div class="myStyle myvCenter">
                                                             {{ basic.symbol(id~'icon1', gad_ao, '', icon1~'time_automatic.png') }}
                                                             {{ basic.symbol(id~'icon0', gad_ao, '', icon0~'time_automatic.png', 0) }}
                                                        </div>
                                                </td>
                                        </tr>
                                </table>
{% endif %}
{% endmacro %}

das ist jetzt nur das makro/widget für meine licht schalter.

das ist die visu.css noch dazu:

.ui-li-aside {
    width: auto;
}
table.myStyle {
        width: 100%;
        margin: 0;
}
td.myStyle {
        padding-left: 4px;
        text-align: left;
        vertical-align: vcenter;
}
h1.myStyle {
        font-size: 10pt;
}
div.myStyle {
        padding-left: 8px;
        height: 35px;
}
div.myvCenter {
        display: table-cell;
        vertical-align: middle;
}
td.myvCenter {
        vertical-align: middle;
}

denke das sollte als beispiel genügen. Erklärungen zur Autogeneration mit sh.py habe ich auch schon ein paar mal abgegeben.

https://knx-user-forum.de/smarthome-...smartvisu.html
https://knx-user-forum.de/447726-post2.html