Erster Test smartVISU 2.9 mit jQuery Mobile 1.4.5

[ramann]

smai
Ich habe bei controlgroup das gleiche Problem, wie hier im Post von Ivan beschrieben ist.
https://knx-user-forum.de/forum/supp...38#post1066338

Das liegt soweit ich sehen kann am basic.stateswitch (widget.js)!
ui-last-child (falls vorhanden) wird richtig für die Klasse übergeben, wenn sich der/das Status/Icon ändert, ui-first-child aber nicht.

[smai]

Jup, danke. Unterdessen habe ich das ich korrigiert (aber noch nicht committed).
Aktuell warte ich noch auf Feedback von ralf9000 im erwähnten Thread wegen der vertikalen Controlgroup, dann werde ich beides zusammen committen.

[smai]

So, der Fix ist committed und pushed. (wow, denglitsch )

[schuma]

Hallo,
ich habe nun auch mal die Version2.9 Dev bei mir parallel am Laufen.
Da bei mir noch einiges nicht mit der Darstellung hinhaut, würde ich gerne mal fragen in welchen Bereichen ich evtl. was beim Umstieg auf die 2.9 Dev ändern muss.
ich hatte jetzt einfach ein: git clone -b develop https://github.com/Martin-Gleiss/smartvisu.git
gemacht und die Benutzer Gruppen Rechte angepasst. anschließend einfach meine Seiten in den Pages Ordner (inkl. der alten Widgets (UZSU))
Alles erstmal im Firefox 51.0.1.

Was mir sofort aufgefallen ist:
- Wenn ich in der Config die Smarthome IP eingetragen habe und auf speichern klicke, wird die IP nicht mehr angeigt und kann von da an auch nicht mehr geändert werden. Auf Offline umschalten hat nur mit diversen Versuchen und Pagecache löschen geklappt. Kann aber auch sein, das der Cache damit nichts zu tun hatte. war ja garnicht eingeschaltet. Aber diverse F5 Versuche hatten da nichts gebracht. Irgendwann ging es dann...
- Die UZSU wird komplett falsch dargestellt. Irgendwie unten an die Seite angehängt. Ist aber gar kein richtiges Popup mehr. (Gibt es hier ein neues Widget, Visu.js?)
- Das Datum in der Telefonliste ist nun unten bündig und nicht mehr in der Mitte des ovalen Fensters.
- Der Dimmerslider geht links in das Icon rein. Überlappt also das Icon.
SV.png

Grüße, Marc

[Tom Bombadil]

• Config - ist bei mir auch nach wie vor 'zickig'. Meist hilft Ctrl-F5 oder zurück zur Startseite und erneutes Aufrufen der Config.
• UZSU: Hat ein neues Format und ist jetzt in der sV integriert:

/** {% import "widget_uzsu.html" as uzsu %} auskommentieren **/
{% import "device.html" as device %}
{{ device.uzsuicon(id, item, headline, pic_on, pic_off, valueType, valueParameterList, color_on, color_off) }}

/tom

[schuma]

OK, Vielen Dank!
UZSU funktioniert nun.

Ich habe noch diverse optische "Mängel". Also Schrift zu hoch, zu tief, etc.
Soll ich das mal darstellen oder ist das noch zu sehr dev?

Marc

[smai]

Die Darstellung ist eigentlich gar nicht mehr Dev, da habe ich seit Wochen nichts gemacht und mir waren auch keine Probleme mehr bekannt.
Hast du evtl. ein eigenes CSS? Oder doch noch etwas im Browser Cache, drück mal Ctrl+F5

Die Config-Seite zickt tatsächlich. Ich verstehe nur noch nicht, in welchen Fällen genau.

[schuma]

Ich habe mal die Sachen zusammengetragen.....

Ich habe auf allen Seiten eine "ERROR" Ecke oben rechts (404). anscheinend wird dort eine Seite für den calender nicht richtig gefunden. Calendar.png


Dann habe ich in der Raumliste mal eine Tabelle eingefügt um den Sonnenauf bzw. Untergang darszustellen. Das ist jetzt unten bündig dargestellt. War vorher in der Mitte.
tabelle.png
In der Anrufe in Abwesenheitsliste wird das Datum etwas zu weit unten dargstellt (Nicht mittig)
phone.png
Auf dem Schalter das "aus" ist auch etwas zu weit unten.
Switch.png

Grüße, Marc

P.s. Ein eigenes css habe ich nicht verbaut.

Und noch eine Frage: Braucht man das UZSU Zeug in der eigenen visu.js jetzt noch? Oder kann das dann entfernt werden.

[smai]

Nun bist du aber sehr penibel

Das mit dem Kalender ist mir neu. Hast du ein spezielles Kalenderwidget eingebaut? Wenn es auf jeder Seite kommt, müsste das ja im Menü oder so sein.

Bei der Ausrichtung kann ich schauen, was sich tun lässt. Allerdings kann ich nichts versprechen, weil sonst vielleicht die Abstände im Menü oder sonst wo nicht mehr stimmen. Ist etwas mühsam in jQuery Mobile.
Dazu brauche ich noch deinen HTML-Code der betroffenen Stellen, mit Ausnahme der Aunrufe scheint das nicht Standard zu sein.

Und noch eine Frage: Braucht man das UZSU Zeug in der eigenen visu.js jetzt noch? Oder kann das dann entfernt werden.

Das brauchst du nicht mehr.

[schuma]

Hallo.
Der Code zu dem Basic.flip ist denke ich standard:

            <table align="middle" width="100%">
                <tr>
                    <td align=left>
                        <a href="#rpopup1" data-rel="popup">Gäste anwesend:</a>
                        <div id="rpopup1" data-role="popup" style="width:450px; height:260px;">
                        <a href="#" data-rel="back" data-role="button" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
                            <center>Modus: Gäste anwesend!</center><br>
                            Im Modus "Gäste anwesend", werden:<br>
                             - Die Zeitschaltuhren für die Rolläden im GZ abgeschaltet<br>
                             - Die Zeitschaltuhren des PM für die Tag/Nacht Umschaltung abgeschaltet<br>
                             - Der PM im GZ gesperrt<br>
                        </div>
                    </td>
                    <td width="15%">{{basic.flip('gaestemodus', 'EG.Raum4.Szenen.Gaeste', 'an', 'aus')}}</td>
                </tr>
            </table>

Der Code von der Raumseite:

<ul data-role="listview" data-dividertheme="c">
<li data-role="list-divider">Allgemein</li>
<li data-icon="false">
    <a href="index.php?page=Allgemein">
        <img class="icon" src="{{ icon0 }}control_all_on_off.svg"/><h3>Ganzes Haus</h3>
        <div class="ui-li-aside">
            <table align="right" width="20%">
                <tr>
                    <td><img style="height: 24px; vertical-align: middle;" src="lib/weather/pics/sun_up.png"></td>
                    <td>{{ basic.formula('sunrise', 'env.location.sunrise', 'time') }}</td>
                </tr><tr>
                    <td><img style="height: 24px; vertical-align: middle;" src="lib/weather/pics/sun_down.png"></td>
                    <td>{{ basic.formula('sunset', 'env.location.sunset', 'time') }}</td>
                </tr>
            </table>
        </div>
    </a>
</li>

Grüße, Marc

EDIT: Das mit dem Error 404 kommt vom Müll Widget. Ich habe es mal in der index.html auskommentiert. Danach kommt kein Error mehr!

[smai]

Nun, tables sind definitiv nicht Standard in einem responsive Design. Noch weniger ist es das Attribut align.
Da muss ich dich leider bitten, selbst im HTML-Inspektor deines Browsers zu suchen, woher die paar Pixel Verschiebung kommen.
Wenn du was herausfindest und sich dies korrigieren lässt, ohne das restliche Layout zu zerstören, werde ich das gerne übrrnehmen.

Ist dies das integrierte Müll-Widget calendar.waste oder ein selbst eingebautes?

[schuma]

Das mit den Sonnenstand Tabelle werde ich einfach selber lösen. Evtl. mit den Symbolen rechts und dann rechtsbündig.

Aber, dass die Beschriftung des Basic.flip zu tief ist, kommt doch nicht aus der Tabelle oder?

Das Müll Widget ist das hier:
https://knx-user-forum.de/forum/supp...lles-m%C3%BCll

[smai]

Der Flip ist in einer table mit align Attribut. In einem Standard-Kontext stimmt die Beschriftung.

Wie geschrieben gibt es neu calendar.waste.
Schau dir mal changelog.md und die inline Doku durch (Pages in deiner Installation auf Docu einstellen).

[schuma]

Ahh ok.
Danke, werde ich machen...

Grüße, Marc

[schuma]

Also, auch ohne <table> bleibt die Textausrichtung in dem Basic.flip zu tief.
Das Symbol in dem device.dimmer ist nun, ohne tabel, in der gleichen Zeile allerdings zu dicht am Slider.
dimmer.png

smai : Kannst Du mir einen Tip geben wie ich diesen Block ohne <table> richtig darstellen kann?

    <div class="block">
    <div class="set-2" data-role="collapsible-set" data-theme="c" data-content-theme="a" data-mini="true">
        <div data-role="collapsible" data-collapsed="false" >
            <h3>Steckdosen / Schalten</h3>
            <table width="100%">
                <tr>
                    <td align=left> <label for="sd1">Steckdose Ost/Nord</label></td>
                    <td width="10%"> {{ device.uzsuicon('uzsu_sd1', 'EG.Raum4.Steckdosen.SD_O_N.schaltuhr', 'Steckdose Ost/Nord', '', '', '', '', '', '') }}</td>
                    <td width="10%" align=center> {{ basic.switch('sd1', 'EG.Raum4.Steckdosen.SD_O_N', 'message_socket.svg', 'message_socket.svg', '', '', '', '') }}</td>
                </tr><tr>
                    <td align=left> <label for="sd2">Steckdose Süd/Ost</label></td>
                    <td width="10%"> {{ device.uzsuicon('uzsu_sd2', 'EG.Raum4.Steckdosen.SD_S_O.schaltuhr', 'Steckdose Süd/Ost', '', '', '', '', '', '') }}</td>
                    <td width="10%" align=center> {{ basic.switch('sd2', 'EG.Raum4.Steckdosen.SD_S_O', 'message_socket.svg', 'message_socket.svg', '', '', '', '') }}</td>
                </tr><tr>
                    <td align=left> <label for="sd3">Steckdose Süd/West</label></td>
                    <td width="10%"> {{ device.uzsuicon('uzsu_sd3', 'EG.Raum4.Steckdosen.SD_S_W.schaltuhr', 'Steckdose Süd/West', '', '', '', '', '', '') }}</td>
                    <td width="10%" align=center> {{ basic.switch('sd3', 'EG.Raum4.Steckdosen.SD_S_W', 'message_socket.svg', 'message_socket.svg', '', '', '', '') }}</td>
                </tr><tr>
                    <td align=left> <label for="sd4">Steckdosen Fenster</label></td>
                    <td width="10%"> {{ device.uzsuicon('uzsu_sd4', 'EG.Raum4.Steckdosen.SD_Fenster.schaltuhr', 'Steckdosen Fenster', '', '', '', '', '', '') }}</td>
                    <td width="10%" align=center> {{ basic.switch('sd4', 'EG.Raum4.Steckdosen.SD_Fenster', 'message_socket.svg', 'message_socket.svg', '', '', '', '') }}</td>       
                </tr>
            </table>
            <hr />
            <table width="100%">
                <tr>
                    <td align=left>
                        <a href="#rpopup1" data-rel="popup">Gäste anwesend:</a>
                        <div id="rpopup1" data-role="popup" style="width:450px; height:260px;">
                        <a href="#" data-rel="back" data-role="button" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
                            <center>Modus: Gäste anwesend!</center><br>
                            Im Modus "Gäste anwesend", werden:<br>
                        </div>
                    </td>
                    <td width="15%">{{basic.flip('gaestemodus', 'EG.Raum4.Szenen.Gaeste', 'an', 'aus')}}</td>
                </tr>
            </table>
        </div>
    </div>
    </div>

block.png