Erster Test smartVISU 2.9 mit jQuery Mobile 1.4.5

[whisperbot]

Guten Morgen,

danke für den butten für clear pagecache.

dann hab ich noch bei mir das SV Logo ober rechts versetzt, (ich nutze firefox 50.1.. das gleiche bei chrome)
SV-logo-ICONS.jpg

und wie man sieht die ICONS von der externer Seiten anwahl fehlen... oder hab ich was im code übersehen.

    <style>
        .nav-custom .ui-btn .ui-btn-inner {
            padding-top: 40px !important;
        }

        .nav-custom .ui-btn .ui-icon {
            width: 30px !important;
            height: 30px !important;
            margin-left: -15px !important;
            box-shadow: none !important;
            -moz-box-shadow: none !important;
            -webkit-box-shadow: none !important;
            -webkit-border-radius: 0 !important;
            border-radius: 0 !important;
        }

        #fussboden .ui-icon {
            background: url({{ icon0 }}sani_floor_heating.svg) 50% 50% no-repeat;
            background-size: 36px 36px;
        }

        #rolllos .ui-icon {
            background: url({{ icon0 }}fts_shutter.svg) 50% 50% no-repeat;
            background-size: 36px 36px;
        }

        #smarthome .ui-icon {
            background: url({{ icon0 }}time_graph.svg) 50% 50% no-repeat;
            background-size: 36px 36px;
        }
    </style>

und ich hatte noch ein kleinen fehler der schnell lösbar war, das popup fenster von Pin-Code war bei mir so schmal ...sstand ja im widgets auf style="width: 168px; geändert auf 170px . evtl hat das auch ein oder anderer...

pin-code-text.jpg

und wie im Bild zusehen überschrift von Fenster wird gekürzt.. ist das was machbar das es automatisch angepasst wird...


ansonsten Vielen dank für die Tolle arbeit überhaupt an SmartVisu...

Gruß
Niko

[smai]

Danke für dein Feedback Niko.

Leider kann ich fast nichts davon nachvollziehen.

Das Logo sitzt bei mir sowohl in Chrome wie auch in FF an der richtigen Stelle.
Hast du evtl. noch anderswo CSS-Angaben?

Sind deine icons in .nav-custom? Da kann ich dir nur den Hinweis geben, dass das HTML-Markup der Buttons in jQM 1.4 geändert hat. Es gibt z.B. kein Element mit .ui-btn-inner mehr.

Das Code-Popup hat width: 166px und das reicht bei mir sowohl in Chrome wie auch in FF um die Buttons anzuzeigen. Oder was war bei dir das problem, dass du es 4px breiter machen musstest?
Das mit der Überschrift ist hingegen so. jQuery Mobile gönnt der Beschriftung aus irgend einem Grund nur 40% der Breite. Das werde ich wohl überschreiben. War übrigens in 2.8 bereits so, habe das aber auch nie beachtet.

Gruss
Stefan

[whisperbot]

hallo,

ich habe das Page design von albert.sh.py übernommen, hab mal das Design gewechselt und siehe da war das LOGO an der richtigen Stelle. das liegt anscheinend an den originalen design von Albert....

das mit dem code-pad mit 166px sieht es so aus.

pin-code.jpg

gruß
Niko

[ramann]

Hallo Stefan,
gute Arbeit!

Kurze Rückmeldung von mir:

In der Doku auf der Seite Basic-Widgets bei basic.button ganz unten ist bei der controlgroup mit den micro-Buttons der rechte Button mit dem Icon etwas größer als die beiden mit der Schrift (zumindest bei mir).
Ich habe folgendes bei mir in der base.css ergänzt, um das anzupassen (weiß aber nicht, ob es damit Nebeneffekte gibt!).

.ui-controlgroup-controls .ui-btn.ui-btn-inline.ui-micro .icon, .ui-controlgroup-controls .ui-btn.ui-btn-inline.ui-micro .fx-icon {
  height: 26px;
}

Was mir noch in der Doku aufgefallen ist, dass beim semicircle-Slider die einzelnen Elemente etwas verschoben sind und das Input-Feld nicht richtig positioniert ist.

Mir persönlich gefallen die Input-Felder beim Slider nicht besonders, aber trotzdem habe ich gerne den aktuellen Wert im Blick. Deshalb habe ich für mich probeweise in deiner geänerten jquery.mobile.slider.js-Datei die Anzeige auf dem Handle eingebaut.
Wäre es möglich das offiziell aufzunehmen? Eventuell kann es der Eine oder Andere auch gebrauchen. Code kann ich bei Interesse posten.

Das ganze sieht dann so aus:
slider.JPG

Gruß

R.

[smai]

ramann Erstmal danke für deine Vorarbeit.
Vor allem für all die Button-Varianten in 3 grössen mit inline, background und ohne Icon musste ich Stunden üben.
Und die Designs habe ich nun doch alle komplett migriert, damit alle Swatches vollständig vorhanden sind. Als ich mal begriffen hatte, welche paar Angaben man nach dem Themeroller von Hand wieder einfügen muss, war es keine grosse Sache mehr.

Der Button ist tatsächlich 0.571px zu hoch. Gutes Auge, das ist mir nicht aufgefallen.
Ich kann es mir auch nicht ganz erklären, konnte es aber beheben, indem ich die line-height von 26px auf 25px reduziert habe.

In welchem Browser stimmt das Input-Feld beim semicircle nicht und was ist daran falsch? Bei mir scheint es in allen getesteten Browsern (Chrome, FF, IE, Edge unter Windows und Chrome unter Android) zu passen.

Deine Wertanzeige auf dem Slider finde ich Cool. Ich nutze aber manchmal gerne auch die Texteingabe.
Vielleicht könnte man als zusätzlichen Widget-Parameter einführen, ob das Input-Feld angezeigt werden soll und wenn nicht, deine Variante nehmen.
Kannst du mal den Code posten?

whisperbot Ich habe nun festgestellt, was das Problem bei Albers Design ist: In der visu.css wird als Schriftart Verdana festgelegt.
Bisher war es eigentlich ein Bug, dass dies nicht berücksichtigt wurde und trotzdem alles in Dosis angezeigt war. Neu wird die Schriftart korrekt übernommen.
Lösche mal nachfolgende Zeilen und und schau es dir nochmal an.

font-family: 'Verdana'  !important;
font-weight: 500  !important;

[ramann]

Hallo Stefan,
das Input-Feld beim semicircle ist bei mir im FF unter Windows verschoben (habs nur mit dem kurz getestet).

Hier der Code für die Anzeige:

jquery.mobile.slider.js nach Z15 ergänzt:

var handleinfo = this.handleinfo = this.element.attr("handleinfo");

jquery.mobile.slider.js nach Z45 ergänzt:

if ( handleinfo == true) {
    this.handle.addClass("ui-slider-handle-info");
    this.control.addClass("ui-slider-handle-info");
    this.handle.text(this._value());
}

jquery.mobile.slider.js nach Z66 ergänzt:

handleinfo = this.handleinfo;

jquery.mobile.slider.js Z72 ersetzt durch:

self.slider[0].className = [ this.isToggleSwitch ? "ui-slider ui-slider-switch ui-slider-track ui-shadow-inset" : "ui-slider-track ui-slider-track-" + orientation + " ui-shadow-inset", trackThemeClass, cornerClass, miniClass, handleinfo == true ? " ui-slider-handle-info" : "" ].join( "" );

jquery.mobile.slider.js nach Z230 ergänzt:

if ( handleinfo == true) {
    this.handle.text(this._value());
}

base.css:

.ui-slider-track.ui-slider-handle-info {
    margin: 0 15px 12px;
}

input.ui-slider-input.ui-slider-handle-info {
    display: none !important;
}

.ui-slider-track-bottomup .ui-btn.ui-slider-handle.ui-slider-handle-info,
.ui-slider-track-vertical .ui-btn.ui-slider-handle.ui-slider-handle-info {
    line-height: 22px;
}

Änderung in der basic.html

{% macro slider(id, item, min, max, step, mode, info) %}

    <input id="{{ uid(page, id) }}" data-widget="basic.slider" data-item="{{ item }}"
        type="range" value="0" min="{{ min|default(0) }}" max="{{ max|default(255) }}" step="{{ step|default(5) }}"
        orientation="{{ mode }}" handleinfo="{{ info|default(false) }}" data-highlight="true" />

{% endmacro %}

Mit dem letzten Parameter info, wie du ja auch schon vorgeschlagen hast, kann man festlegen, ob die Info auf dem Handle (wenn true) oder das Inputfeld angezeigt werden soll.

[smai]

So, ich habe nochmals diverse Änderungen gepusht, damit sollten alle gemeldeten und noch einige weitere Darstellungsproblemchen behoben sein.

Der basic.slider hat nun einen Parameter value_display mit den Optionen 'input', 'handle', 'both' und 'none'. Danke ramann.

Ausserdem ist device.uzsuicon eingebaut, eine überarbeitete Version des Widgets von Orion. Nutzer des UZSU-Plugins bitte testen, da ich dieses bisher selbst nicht genutzt hatte. Vielen Danke an dieser Stelle an Orion für seine Arbeit.

Und basic.maptext ist ebenfalls drin. Danke an JuMi2006 für das Einverständnis. Achtung: Evtl. fliegt dieses zugunsten eines zusammengefassten Widgets wider raus, siehe Umfrage: Neues zusammengefasstes Widget.

Könnte noch jemand mit einem Apple Gerät testen, ob das Codepad da jetzt auch greift? Ich habe noch was kleines geändert, weiss aber nicht, ob dies die erwartete Wirkung bringt.

@psilo: Falls dich die Ursache mit dem % (bzw. jeder Einheit) interessiert:
jQuery.isNumeric() von einem Array mit einer Zahl drin (wie [1]) war früher true, in der nun eingesetzte jQ Version aber false. Wurde in jQ geändert, weil ersteres da als Bug betrachtet wurde. Nun nutze ich das native !isNaN(), das weiterhin true ergibt.

[ramann]

Ich hab mal kurz angetestet.

UZSU-Plugin funktioniert bei mir im Zusammenhang mit fhem nur, wenn ich damals nötige Änderung in SV2.8 für die 5.0-Version im io_fhem.js Treiber wieder rückgängig mache.

io_fhem.js:

- 262   io.callUpdateHandler(this, value.list instanceof Array ? values : [values]);
+ 262   io.callUpdateHandler(this, [values]);

Der Slider ist bei mir zu weit links positioniert und "schaut" über den Rand, wenn ich nur den Wert auf dem Handle anzeigen lasse.

slider.JPG

[smai]

UZSU-Plugin funktioniert bei mir im Zusammenhang mit fhem nur, wenn ich damals nötige Änderung in SV2.8 für die 5.0-Version im io_fhem.js Treiber wieder rückgängig mache.

Das ist interessant, da ich an den Datenstruktur nichts (bewusst) geändert habe. Mangels FHEM kann ich dazu auch nicht mehr sagen, kann das jemand anderes verifizieren?

Der Slider ist bei mir zu weit links positioniert und "schaut" über den Rand, wenn ich nur den Wert auf dem Handle anzeigen lasse.

Ja den könnte man in der Tat noch etwas nach rechts schieben.

[smai]

Der Aufruf des UZSU-Widgets hat sich übrigens minim geändert.
- Der Parameter gad_designType entfällt. Da dieser vom I/O-Treiber abhängt, wird dies neu direkt darüber gesteuert.
- Man kann eine zusätzliche Farbe für den Aus-Status übergeben.

Ansonsten habe ich nur das gad_ aus den Namen gestrichen, da es sich ja um fixe Parameter und nicht um GAD/Item handelt. Für den Aufruf ändert das aber nichts.

alt {{ uzsu.uzsu_icon(id, gad_uzsu, gad_headline, gad_designType, pic_on, pic_off, gad_valueType, gad_valueParameterList, gad_color) }}

neu {{ device.uzsuicon(id, item, headline, pic_on, pic_off, valueType, valueParameterList, color_on, color_off) }}

id: unique id for this widget
item: the item of the UZSU (NOT the item which is switched by UZSU)
headline: headline of popup (optional, default: UZSU)
pic_on: the pic for the 'on' state (optional)
pic_off: the pic for the 'off' state (optional)
valueType: supported types are 'bool', 'num', 'list', 'text' (optional, default: bool)
valueParameterList: valueParameterList depending on valueType (optional):
bool: ['text on','text off'] or ['text1:value1','text2:value2'], 
num: ['min max step'], 
list: ['value1','value2','value3'] or ['text1:value1','text2:value2','text3:value3'], 
text: no value parameter
color_on: the color for the 'on' state, e.g. '#f00' for red (default 'icon1' of the design)
color_off: the color for the 'off' state, e.g. '#f00' for red (default 'icon0' of the design)

[psilo]

Vielleicht nochmal als Feedback von meiner Seite: seit den letzten Changes alles 1a. Habe die SV 2.8 jetzt nur noch als Backup Ordner rumliegen..

[Tom Bombadil]

Noch ein Hinweis für die Doku:
- {% import "widget_uzsu.html" as uzsu %} auskommentieren
- {% import "device.html" as device %} hinzufügen, falls noch nicht vorhanden.

Mann hab ich mir 'nen Wolf gesucht, warum das Icon nicht angezeigt wird. Jetzt funktioniert die UZSU - leicht anders, aber ich find's ok (rechts die 2.9 in Chrome):

2-89.png

Ich bekomme übrigens noch einen 404 in der Konsole:

GET http://192.168.178.4/smartvisu-develop/vendor/jquery.mobile/jquery.mobile-1.4.5.min.map 404 (Not Found)

Keine Ahnung, ob das wichtig ist - bisher scheint sonst alles zu gehen ...

/tom

[Tom Bombadil]

Ok, einen hab ich noch - tritt bei mir bei allen Popup's auf (habe einige davon, werden fast alle gleich aufgerufen):

_header.png


Das Schwarz wirkt auch "schwärzer". HTML ist unverändert:

/** Info popup **/
<div class="helios_info_button">
    <a href="#popup_helios_info" data-rel="popup"><img src="{{helios_pic_dir~'/message_info_or.svg'}}" class="icon"></a>
</div>

/** Here's the corresponding popup for the info window **/    
<div id="popup_helios_info" data-role="popup" class="helios_popup_info" data-overlay-theme="c">
    <a href="#" data-rel="back" data-role="button" data-icon="delete" data-iconpos="notext" class="ui-btn-right";>Close</a>
    <span id="popup_helios_info_bar" class="ui-btn-up-c helios_popup_header"> {{ info_popup_title }} </span>
    [...]
</div>

/tom

[psilo]

was mir gerade auffällt: wenn ich die min dateien via define('config_js', 'js'); in der config.php raus haben will, ist jquery immernoch mit der .min drin.

Ich kriege zudem auf beliebigen Seiten eine Riesenmenge dieser Fehler:
ff.PNG

[schuma]

Ich hätte da noch einen Wunsch für die 2.9.
Passt das überhaupt hier rein? Oder lieber einen neuen Beitrag eröffnen?

Es wäre super, wenn man das Symbol/Schalter von dem Dimmer Device auch auf der rechten Seite anzeigen könnte. Am besten per item im Aufruf auswählbar (r/l).

Ich hatte da schon mal versucht was selber zu machen, bin dann aber gescheitert.