Neues Design, ähnlich Homeserver

[stromie]

Hallo Onkelandy
kannst du bitte deine Änderungen einpflegen. Ich habe erstmal keine Änderungen weiter gemacht.
Ich muss mich erstmal etwas mit CSS beschäftigen.

Grüße Stromie

[Onkelandy]

Gib mir ein bisschen Zeit.. ich bastel grad noch an einer anderen Sache, nem avdevice Plugin... danach schau ich mir die Visu nochmals an.

[stromie]

Hallo Onkelandy
nur kein Stress. Ich bastle auch noch etwas. Wollte die Phonelist auf QuadClient Form bringen. Aber da muss ich mir noch in die CSS Sachen vertiefen.

[Onkelandy]

Hi stromie ! So, jetzt kümmere ich mal ein bisschen um die Visu. Danke zuerst mal für den Fork auf Github, damit funktioniert das prinzipiell schon mal prima.

Allerdings wurde inzwischen ja einiges umgestellt was die Widgets anlangt. Ein basic.float gibt es ebenso wenig mehr wie ein basic.button. Das müsst man also auf den Test-Pages alles noch abändern.. Ich habe mal für 2 der neuen Widgets das Listen-Pendant dazu gemacht mit bis zu 4 Spalten. Magst das mal ausprobieren?

Ich starte mit dem stateswitch, das wohl button, switch, etc. ablöst.

widget_list.html

{% macro stateswitch(id, item, type, value, icon, text, color, indicator, gad_uzsu, linetext, columntext) %}
    {% import "basic.html" as basic %}
    {% import "widget_visu.html" as visu %}
    <li data-icon="false">
    <div class="nw_table">
        <div class="text">{{ linetext|e }}</div>
        <div>
            {% if item is iterable  %}
            {% if columntext[0] and columntext[0] != ' ' %}&nbsp;{{ columntext[0]|e }}{% endif %} 
            {{ basic.stateswitch(id~'_stateswitch0', item[0], type, value[0], icon[0], text[0], color[0], indicator[0]) }}
                {% if gad_uzsu[0] and gad_uzsu[0] != ' ' %}
                    {{ visu.uzsu_icon(id~'list_uzsu0', 'num', gad_uzsu[0]) }}
                {% endif %}
            {% else %}
            {% if columntext and columntext != ' ' %}&nbsp;{{ columntext|e }}{% endif %} 
            {{ basic.stateswitch(id~'_stateswitch', item, type, value, icon, text, color, indicator) }}  
                {% if gad_uzsu and gad_uzsu != ' ' %}
                    {{ visu.uzsu_icon(id~'list_uzsu0', 'num', gad_uzsu) }}
                {% endif %}  
            {% endif %}
        </div>
        {% if item[1] %}
            <div>
                {% if item[1] != ' ' %}
                    {% if columntext[1] and columntext[1] != ' ' %}&nbsp;{{ columntext[1]|e }}{% endif %} 
                    {{ basic.stateswitch(id~'_stateswitch1', item[1], type, value[1], icon[1], text[1], color[1], indicator[1]) }}
                    {% if gad_uzsu[1] and gad_uzsu[1] != ' ' %}
                        {{ visu.uzsu_icon(id~'list_uzsu1', 'num', gad_uzsu[1]) }}
                    {% endif %}
                {% endif %}
            </div>
        {% endif %}

        {% if item[2] %}
            <div>
                {% if item[2] != ' ' %}
                    {% if columntext[2] and columntext[2] != ' ' %}&nbsp;{{ columntext[2]|e }}{% endif %} 
                    {{ basic.stateswitch(id~'_stateswitch2', item[2], type, value[2], icon[2], text[2], color[2], indicator[2]) }}
                    {% if gad_uzsu[2] and gad_uzsu[2] != ' ' %}
                        {{ visu.uzsu_icon(id~'list_uzsu2', 'num', gad_uzsu[2]) }}
                    {% endif %} 
                {% endif %}

            </div>
        {% endif %}
        {% if item[3] %}
            <div>
                {% if item[3] != ' ' %}
                    {% if columntext[3] and columntext[3] != ' ' %}&nbsp;{{ columntext[3]|e }}{% endif %} 
                    {{ basic.stateswitch(id~'_stateswitch3', item[3], type, value[3], icon[3], text[3], color[3], indicator[3]) }}
                    {% if gad_uzsu[2] and gad_uzsu[3] != ' ' %}
                        {{ visu.uzsu_icon(id~'list_uzsu3', 'num', gad_uzsu[3]) }}
                    {% endif %}
                {% endif %}
            </div>
        {% endif %}
    </div>
    </li>    
{% endmacro %}

Beispiel für 03.test.html:

    <li data-role="list-divider">multistateswitch</li>
{{ list.stateswitch('stateswitch', ['dies', 'das'], 'icon', [[0,178],[0,185]], [['edit_numeric_0.svg','edit_numeric_3.svg'],['edit_numeric_4.svg','edit_numeric_5.svg']], [['0','3'],['4','5']], [['',''],['','']], ['blink','blink'], ['dies.uszu','das.uzsu'], 'Stateswitch', ['Switch1', 'Switch2']) }}

[Onkelandy]

hier kommt das neue Select-Widget für die Liste:
widget_list.html:

{% macro select(id, item, type, value, icon, text, color_on, group, gad_uzsu, linetext, columntext) %}
    {% import "basic.html" as basic %}
    {% import "widget_visu.html" as visu %}
    <li data-icon="false">
    <div class="nw_table">
        <div class="text">{{ linetext|e }}</div>
        <div>
            {% if item is iterable  %}
            {% if columntext[0] and columntext[0] != ' ' %}&nbsp;{{ columntext[0]|e }}{% endif %}
            {{ basic.select(id~'_select0', item[0], type, value[0], icon[0], text[0], color_on, group) }}
                {% if gad_uzsu[0] and gad_uzsu[0] != ' ' %}
                    {{ visu.uzsu_icon(id~'list_uzsu0', 'num', gad_uzsu[0]) }}
                {% endif %}
            {% else %}
            {% if columntext and columntext != ' ' %}&nbsp;{{ columntext|e }}{% endif %}
            {{ basic.select(id~'_select', item, type, value, icon, text, color_on, group) }}  
                {% if gad_uzsu and gad_uzsu != ' ' %}
                    {{ visu.uzsu_icon(id~'list_uzsu0', 'num', gad_uzsu) }}
                {% endif %}  
            {% endif %}
        </div>
        {% if item[1] %}
            <div>
                {% if item[1] != ' ' %}
                    {% if columntext[1] and columntext[1] != ' ' %}&nbsp;{{ columntext[1]|e }}{% endif %}
                    {{ basic.select(id~'_select1', item[1], type, value[1], icon[1], text[1], color_on, group) }}
                    {% if gad_uzsu[1] and gad_uzsu[1] != ' ' %}
                        {{ visu.uzsu_icon(id~'list_uzsu1', 'num', gad_uzsu[1]) }}
                    {% endif %}
                {% endif %}
            </div>
        {% endif %}

        {% if item[2] %}
            <div>
                {% if item[2] != ' ' %}
                    {% if columntext[2] and columntext[2] != ' ' %}&nbsp;{{ columntext[2]|e }}{% endif %}
                    {{ basic.select(id~'_select2', item[2], type, value[2], icon[2], text[2], color_on, group) }}
                    {% if gad_uzsu[2] and gad_uzsu[2] != ' ' %}
                        {{ visu.uzsu_icon(id~'list_uzsu2', 'num', gad_uzsu[2]) }}
                    {% endif %}
                {% endif %}

            </div>
        {% endif %}
        {% if item[3] %}
            <div>
                {% if item[3] != ' ' %}
                    {% if columntext[3] and columntext[3] != ' ' %}&nbsp;{{ columntext[3]|e }}{% endif %}
                    {{ basic.select(id~'_select3', item[3], type, value[3], icon[3], text[3], color_on, group) }}
                    {% if gad_uzsu[2] and gad_uzsu[3] != ' ' %}
                        {{ visu.uzsu_icon(id~'list_uzsu3', 'bool', gad_uzsu[3]) }}
                    {% endif %}
                {% endif %}
            </div>
        {% endif %}
    </div>
    </li>    
{% endmacro %}

Beispielcode:

    <li data-role="list-divider">singleselect</li>
{{ list.select('select', 'dieses', 'icon', [0,1,2,3,4], ['edit_numeric_0.svg','edit_numeric_1.svg','edit_numeric_2.svg','edit_numeric_3.svg','edit_numeric_4.svg'], ['','','','',''], '', 'horizontal', 'dieses.uszu', 'Select', '') }}

<li data-role="list-divider">multiselect</li>
{{ list.select('select', ['dieses', 'jenes'], 'menu', [[0,3],[4,5]], [['edit_numeric_0.svg','edit_numeric_3.svg'],['edit_numeric_4.svg','edit_numeric_5.svg']], [['0','3'],['4','5']], ['',''], ['',''], ['dieses.uszu','jenes.uzsu'], 'Select', ['Select1', 'Select2']) }}

[stromie]

Danke für die Arbeit. Ich probiere das am Wochenende.
schöne Ostern allen.

[Onkelandy]

Bin noch an ein paar anderen Widgets dran.. Außerdem ist mir aufgefallen, dass überall noch die alten Widgets genutzt werden, zB basic.float, basic.switch, etc.
Da wäre noch recht viel Arbeit zu tun.. mal sehen, ob ich mir da über Ostern was antue Wäre auf jeden Fall sinnvoll, da alles auf Vordermann zu bringen und die neuen Features gleich zu nutzen.

[stromie]

Das habe ich noch auf der Aufgabenliste.
Ich werde erstmal deine neuen Sachen testen.
Dann werde ich mich an das ersetzen der alten Widmet machen.

[Onkelandy]

stromie Ich mach gerade eine Grundreinigung des Quad-Designs. Es sind viele Features inzwischen normal in 2.9 implementiert, da räum ich jetzt grad mal alles auf und erweitere diverse Widgets. Vermutlich stell ich das dann auf Github.. Wäre dann cool, wenn du das auch testen könntest.

Was mich momentan noch am meisten stört ist die inkonsequente Reihenfolge der Attribute, also der uzsu, des Zeilentextes, etc. Da würde ich gerne eine saubere Struktur schaffen, dass im Prinzip alle Attribute 1:1 so sind wie im Original-Widget und alles andere dann erst danach folgt. Würde aber heißen, dass man alle Seiten, die man schon aufm Quad Design hat, umschreiben müsste..

[psilo]

Onkelandy du passt das für 2.9 an? sehr schön, teste auch gerne

[Onkelandy]

Jup, also basic.stateswitch, basic.print, device.uzsu_icon, etc. - die ganze Dröhnung Bin schon recht weit und meld mich, sobald es Neues gibt

[stromie]

Das ist halt nur Fleißarbeit. Sollten wir aber machen. Sag Bescheid wenn du es hochgelegen hast. Ich teste das dann und baue es in die Demo Seite ein.

[Burgerking]

Hallo,
bin auf der Suche nach der richtigen Visu, und diese gefällt mir im großen und ganzen sehr gut!
Ich lese aber immer wieder (meist ältere Threads) das die Smartvisu nicht weiterentwickelt wird, sondern das Cometvisu der "Nachfolger" sein sollte/wird.

Mit der Bitte um kurze Antwort!
Vielen Dank und lg Christian

[schuma]

kurz: SmartVisu lebt. Aktuelle Beta ist 2.9

[Onkelandy]

Soda, einen Monat später bin ich soweit.. hoff ich. Bin noch ein bisschen am Testen, aber generell müsste alles klappen. Hab das Quad Design von Grund auf neu erstellt. Nun kann man beliebig leere Spalten einfügen, die Breite davon definieren, spezifische Spalten mit CSS designen, die Reihenfolge der Spalten festlegen, und und und. Ich werde das Ganze demnächst auf Github stellen. Das Design funktioniert nur mit dem aktuellen develop Status der smartivsu 2.9, hat aber dafür auch die dort neuen Widgets voll integriert.

Hier mal ein Vorgeschmack:

Lichter
Licht.png

Popup (HSV oder RGB)
Licht_HSV_popup.png

Sperren (BWM, Force on und off oder normale Sperre)
Licht_Locks.png

Jalousie
Jalousie.png

Jalousie Autostate Popup zum Ändern der Suspendzeit und Sperren des Zustands
Jalouie_Autostatepopup.png

Schalter/Steckdosen inkl. Timer
Schalter.png

Multimedia / Steuerung von Playern, etc.
Multimedia.png

Volume Popup
Multimedia_Vol_popup.png