KNXWEB2 - Volet, portail, ...

[Frédéric Gilliard]

Bonjour,

Existe-t-il en knxweb2 quelques choses de comparable au widget Volet de knxweb premier du nom. Donc, un objet qui pourrait prendre 5-6 images en fonction du pourcentage d'ouverture.

J'ai vu que dans les images fournies, il y a les différentes étapes d'ouverture d'un volet, mais je ne vois pas de widget pour aller avec.

Merci,

Frederic

[Anthony PENHARD]

bonjour,

en effet pas de widget "natif mutli-images"

il y a une solution avec les subpages
créer 1 subpage avec autant de "button" que d'état souhaité
chaque "button" mettre une image dans "active picture" et un paramètre
à la subpage "status"
pour chaque button on utilise en fedback ce status conditionner si <
ou > a une valeur donnée

exemple : subpage "volet" avec parametre "position_in_pourcent" de type object
button 1 picture : Black/var/blinds/0.png (pas de gestion feedback
(sera toujours active)
button 2 Active picture : Black/var/blinds/1.png feedback le
paraméètre de la subpage et "Greater Than" puis "Value for active" =>
0
button 3 Active picture : Black/var/blinds/2.png feedback le
paraméètre de la subpage et "Greater Than" puis "Value for active" =>
10
...
button 11 Active picture : Black/var/blinds/10.png feedback le
paraméètre de la subpage et "Greater Than" puis "Value for active" =>
90

si la position n'est pas en % mais de "0 à 255" il faut changer Value
for active mais le principe reste le même

c'est assez fastidieux a faire mais une fois ok il n'y a qu'a
réutiliser la subpage

j'ai fait une page rapide ici avec le code de la sub-page :
https://sourceforge.net/apps/mediawiki/linknx/index.php?title=KnxWeb2_Status_blind
(en testant j'ai vu un bug dans le widget button la comparaison de
string et float marche pas bien je vais corriger ce soir cela sera
dispo demain matin ... )

PS : on essaye de réfléchir pour "partager" les sub-pages les mettres
à dispo quelques part et pouvoir les importer/exporter une sub page
comme celle-ci peut en intéressé plus d'un par exemple et si déjà
faite par quelqu'un qui veut bien la partager et que cela soit gérer
en "natif" dans knxweb2 pour l'import/export ...

@+
Anthony.

[Frédéric Gilliard]

Je vais prendre cette solution pour faire un portail (ouverture gauche et droite en même temps).

Sinon, pour le volet, je peux proposer une autre solution. (Je peux t'envoyer les fichiers.)

J'ai crée le widget "Vertical Progress bar".

J'ai crée une sub-page avec en image de fond une fenêtre. J'ai ajouter le widget vprogressbar avec une image de volet comme image de progression Le rendu est vraiment top

ce qui donne:

<subpage name="volet" width="64" height="64" bgimage="Perso/window64x64.jpg">

<parameters>

<parameter id="value" label="value" type="object"/>

</parameters>

<controls>

<control type="vprogressbar" progress-color="#FF0000" progress-picture="Progressbar/volet.jpg" 

border="true" border-color="#000000" feedback-object="_value" 

x="7" y="12" width="48" height="48" undefined="12"/>

</controls>

</subpage>

Pour ceux qui veulent, on peut trouver les codes ici : http://dl.dropbox.com/u/23987395/volet.zip

(ET si tu veux intégrer le vprogressbar sur le csv ...)

[Stephane Triglia]

Salut,

superbe widget, en plus tu utilise une seule image, c'est très judicieux, merci pour le partage.

je vais l'installer de suite

a+

[Anthony PENHARD]

> J'ai crée le widget "Vertical Progress bar".

> (ET si tu veux intégrer le vprogressbar sur le csv ...)

merci pour le partage

j'ai modifié ("pour moi" pour le moment) le widget hprogressbar pour
gérer le vertical
que cela soit de "haut en bas" (ou de "bas en haut" ça c'est à finir
!!) et soit un object en "%" soit de "0 à 255"

je pensai faire un widget progressbar "générique" qui traitera tous les cas
si je fais ça le hprogressbar ne sera plus géré ... ( ou en tout cas
n'évoluera plus)

pour ton vprogressbar as-tu fais des tests avec une couleur sans images ?

@+
Anthony.

[Frédéric Gilliard]

Oui, cela marche avec une couleur.

Le vprogressbar marche un peu à l'envers, puisque de haut en bas, mais c'est ce dont j'avais besoin pour le volet :-)

En fait, c'est juste ton hprogressbar ou j'ai mis des v au lieu des h + quelques mini-adaptations pour que cela aille dans le bon sens.

Clair qu'un progressbar générique serait encore mieux, surtout si il est cliquable pour faire évoluer la valeur. Et aussi, avec une valeur minimum et maximum configurable. Il faudra l'appelé Sprogressbar (le S de Super :-)

[Anthony PENHARD]

> Oui, cela marche avec une couleur.

ok nickel

> Clair qu'un progressbar générique serait encore mieux, surtout si il est
> cliquable pour faire évoluer la valeur. Et aussi, avec une valeur minimum et
> maximum configurable. Il faudra l'appelé Sprogressbar (le S de Super :-)

a oui clickable je vais voir comment faire ça
qu'est ce que tu entend par valeur min max ?
pour le moment c'est en % donc 0 et 100
ce que j'ai ajouter c'est soit % soit 0 à 255
tu voudrais quoi comme "bornes" ? pour quel besoin ?

@+
Anthony.

[Frédéric Gilliard]

>a oui clickable je vais voir comment faire ça
>qu'est ce que tu entend par valeur min max ?
>pour le moment c'est en % donc 0 et 100
>ce que j'ai ajouter c'est soit % soit 0 à 255
>tu voudrais quoi comme "bornes" ? pour quel besoin ?

Que l'on puisse choisir une valeur minimale et une valeur maximale, de façon par exemple à pouvoir s'en servir pour faire un thermomètre qui va de -5°C à 35°C (en cas de dépassement, on reste sur -5 ou 35

[Anthony PENHARD]

Re,

je viens de commiter un nouveau widget "slider" qui a les paramètres suivant :
image ou couleur
vertical/horizontal
min et max
et "clickable" avec envoi d'action sur "stop-slide" et/ou "slide"
...

@+
Anthony

[Frédéric Gilliard]

Je vais m'empresser de tester cela.

[Frédéric Gilliard]

Dans les actions du slider, comment on peut faire un set-value avec la valeur que l'on vient de sélectionner (je clique au milieu de la bar, ca fait 50%) ?

[TanguyT]

Ce widget est parfait, j'adore !!!

Je rejoins la question sur comment faire le set-value avec la valeur choisie en "slidant" ?
Et une question complémentaire, si je veux comme résultat graphique la fenêtre avec le volet devant, j'ai mis l'image du volet dans "slider picture" mais je ne sais pas ou mettre l'image de la fenêtre ? Je m'attends à un champ  de type image de fond, mais j'ai pas trouvé !

En tout cas merci pour le boulot,  c'est vraiment génial.

Tanguy

[Anthony PENHARD]

> Dans les actions du slider, comment on peut faire un set-value avec la
> valeur que l'on vient de sélectionner (je clique au milieu de la bar, ca
> fait 50%) ?

j'ai pas tout tester ... en effet j'ai pas encore géré l'envoi de la
valeur pour le moment ... (désolé pas précisé dans mon mail précédent
)
car ça implique d'autres modif plus importantes et/ou une solution à trouver
je peut ajouter un "command object" dans le paramétrage et envoyer la
valeur a cet object via set-value ça permet de fonctionner
mais ça pourrais être bien de récupérer cet object dans les autres
actions j'ai commencé à regarder comment faire au mieux ...

@+
Anthony.

[Anthony PENHARD]

> Et une question complémentaire, si je veux comme résultat graphique la
> fenêtre avec le volet devant, j'ai mis l'image du volet dans "slider
> picture" mais je ne sais pas ou mettre l'image de la fenêtre ? Je m'attends
> à un champ  de type image de fond, mais j'ai pas trouvé !

j'y est pansé aussi pourvoir ajouter un "background picture" sinon une
solution utiliser une sub-page pour mettre une image de fond

je regarde ces 2 points dans la journée

@+
Anthony.

[Frédéric Gilliard]

Pour le volet, je pense aussi que la sub-page est le mieux, car l'image de la fenetre (avec chassis) doit être plus grande que le slider en lui meme.

(le slider en position X=7, Y=14, width=48, height=48 (si tu utilise l'image window en 64x64)

Il y a toutefois un petit bug gênant avec l'utilisation du slider, en mode edit-design ou edit sub-page, lorsque l'on clique sur le slider, il change de valeur, mais il ne se sélectionne pas, ce qui fait que l'on ne peut pas changer ces paramètres (la premiere fois quand on le place, oui, mais après, pas moyen de le re-selectionner)

[Anthony PENHARD]

> Pour le volet, je pense aussi que la sub-page est le mieux, car l'image de
> la fenetre (avec chassis) doit être plus grande que le slider en lui meme.

je pense que je vais ajouter le background mais c'est vrai que
idéalement la combinaison que tu proposes rend mieux

> Il y a toutefois un petit bug gênant avec l'utilisation du slider, en mode
> edit-design ou edit sub-page, lorsque l'on clique sur le slider, il change
> de valeur, mais il ne se sélectionne pas, ce qui fait que l'on ne peut pas
> changer ces paramètres (la premiere fois quand on le place, oui, mais après,
> pas moyen de le re-selectionner)

oui j'ai galéré aussi ... il y a une fenêtre widget list (je sais
plus si j'ai commité ça !!) qui permet de le selectionner on sinon
cliquer sur le "border" mais pas simple

pour les tests cela m'aidait de pouvoir faire le slide en mode edit
mais en "prod" pas besoin je vais rectifier

merci pour vos tests remarques
@+
Anthony.

[TanguyT]

Je n'avais pas pensé au détail du volet à l'intérieur de l'encadrement de la fenêtre ;-)
Je vais essayer avec une sub-page, mais pas moyen d'en créer, il me demande d'entrer le nom de la sub-page puis plus rien !!! Probablement un problème de droits sur un fichier, je vais devoir patienter jusqu'à ce soir je n'ai pas possibilité d'accès console depuis le boulot !!!

Pour la sélection du slider en mode edit-design, en cliquant bien sur la bordure ça marche !

Tanguy

[Anthony PENHARD]

> Probablement un problème
> de droits sur un fichier, je vais devoir patienter jusqu'à ce soir je n'ai
> pas possibilité d'accès console depuis le boulot !!!

c'est hors sujet, tu peux utiliser par exemple webmin : http://www.webmin.com/
super simple / puissant / pratique ...

@+
Anthony.

[Frédéric Gilliard]

En fait, pour le volet, ca marche à l'envers avec le slider (position = left or top) parce que 100% = Fermé !, hors, dans ce sens, 100%= pas d'image :-)

[Anthony PENHARD]

>> Dans les actions du slider, comment on peut faire un set-value avec la
>> valeur que l'on vient de sélectionner (je clique au milieu de la bar, ca
>> fait 50%) ?

rapide "état des lieux"

l'impact est assez important pour pouvoir utiliser la valeur en
"paramètres" des actions
et ne suis pas sur que cela vraiment nécessaire ( pour le moment en tout cas!!!)

j'ai donc ajouté un paramètre "command object" sur lequel une action
de type "set-value" sera appliquée avec la valeur du "slider"
donc en clickant qu milieu (si min = 0 et max 100) la valeur envoyer
sera 50 sur le "command object"

j'ai aussi ajouté le "background picture"

> En fait, pour le volet, ca marche à l'envers avec le slider (position = left
> or top) parce que 100% = Fermé !, hors, dans ce sens, 100%= pas d'image :-)

j'ai aussi rectifié ça, pas simple non plus vu que la solution que
j'ai choisie au départ en gros inverse uniquement l'image mais pas les
valeur
exemple : le volet qui descend si est à 25% fermé soit 25 (min = 0 et
max =100) pour l'afficher "correctement" la valeur doit être 75 qui
est vu que le min du slider est toujours en bas
idem pour l'horizontal le min est toujours à gauche
et avec les valeur min et max saisissable et pas fixe 0/100 il faut
donc calculer la "bonne" valeur du slider pour le rendu et inversement
pour la commande

bilan : il me donne pas mal de "fil à retordre" avec toutes les
combinaisons possibles ...
mais ça avance je pense pourvoir le finaliser dans le Week-end ...

@+
Anthony.

[TanguyT]

Le vendredi 9 mars 2012 11:57:31 UTC+1, Energy01 a écrit :

l'impact est assez important pour pouvoir utiliser la valeur en
"paramètres" des actions
et ne suis pas sur que cela vraiment nécessaire ( pour le moment en tout cas!!!)

j'ai donc ajouté un paramètre "command object" sur lequel une action
de type "set-value" sera appliquée avec la valeur du "slider"
donc en clickant qu milieu (si min = 0 et max 100) la valeur envoyer
sera 50 sur le "command object"

L'objectif étant d'envoyer une valeur à un actuateur de volet, ça me semble parfait comme comportement !

Pas besoin de faire plus compliqué de mon point de vue. 

 

 

bilan : il me donne pas mal de "fil à retordre" avec toutes les
combinaisons possibles ...
mais ça avance je pense pourvoir le finaliser dans le Week-end ...

Super ! Et merci encore pour le boulot !

 

Tanguy 

 

[Frédéric Gilliard]

Bonjour,

Je viens de faire pas mal de tests ce Week-end avec le slider et je me permet de remonter quelques bugs:

- Si on mets une valeur minimale autre que 0, quand on clique sur le slider, il se met au maximum (dans mon cas, je voulais un slider de 3 à 30°C pour un thermostat)

- Si on clique une fois, il fait bien un set de la valeur. Par contre, pas moyen de le faire une deuxième fois sans faire un refresh de la page.

- J'ai fait un slider horizontal de 0° à 30°c sur 90 pixels de large. Pas moyen de mettre 7°C par exemple. Il passe de 6 à 8°C pourtant, je devrais avoir 3 pixels par unité, cela devrait donc être possible.

- Un slider qui ne fait pas de set value quand on clique dessus devrait rester à sa valeur même si on clique dessus (ou au moins se remettre à jour après une seconde)

- Quand on "slide" il faudrait avoir une petite info bulle avec la valeur tant qu'on ne lache pas la touche de la souris. Ce serait plus facile pour régler une valeur.

Pour info, les sliders que j'ai testés sont utilisés sur une sub-page. Bien sûr sur la toute dernière version dispo sur le CSV (en date du 23/03 20:30)

Sinon, je suis de plus en plus impressionné par knxweb2. C'est fabuleux. Et ce slider permet des choses vraiment géniale.

Fred.

[Frédéric Gilliard]

Anthony,

Pour corriger quelques petits bugs du widget slider, je te propose les corrections suivantes dans widget.js:

Pour permettre un réglage plus fin avec le slider, remplacer la ligne:

var step = (this.max - this.min)/20;

par la ligne

var step = (this.max - this.min) / parseFloat(this.conf.getAttribute("width"));

Au lieu de 20 valeurs possible, on en a une par pixel, ce qui est bien plus précis et plus joli quand on slide.

Ensuite, pour le problème que je ne pouvais changer qu'une seule fois la valeur, c'est du au fait que j'avais un espace dans l'ID de l'objet à changer. Je sais, normalement, c'est pas conseillé, mais pour éviter le soucis, il suffit de changer la ligne (~104):

var action = $("action[id=" + this.owner.conf.getAttribute("command-object") + "]", actions);

par 

var action = $("action[id='" + this.owner.conf.getAttribute("command-object") + "']", actions);

donc juste le ' autour du nom de l'objet.

Reste donc les bugs suivants:

- Si on mets une valeur minimale autre que 0, quand on clique sur le slider, il se met au maximum (dans mon cas, je voulais un slider de 3 à 30°C pour un thermostat)

La, je trouve pas. C'est bizarre, il ne semble même pas lancer la fonction "slide" du slider. Un bug de jquery ?

- Un slider qui ne fait pas de set value quand on clique dessus devrait rester à sa valeur même si on clique dessus (ou au moins se remettre à jour après une seconde)

Juste mettre la propriete disable a true quand il n'y a pas de control-object devrais arranger le problème

- Quand on "slide" il faudrait avoir une petite info bulle avec la valeur tant qu'on ne lache pas la touche de la souris. Ce serait plus facile pour régler une valeur.

[Frédéric Gilliard]

Et comme je suis lancé, j'ai corrigé pour empecher les slider sans command object d'être clickable

en ajoutant:

var clickable = true;

if (this.conf.getAttribute("command-object") != "") clickable=false;

juste avant la définition des paramètres du slider

et ajouter la ligne disabled: clickable,

$( '.sliderdiv', this.div ).slider({

orientation: conf.getAttribute("orientation"),

// range: range, //"min",

min: conf.getAttribute("min"),

max: conf.getAttribute("max"),

step: step, //5,

//animate: true,

disabled: clickable,

range: range

});

Comme cela, on ne sais pas visuellement avoir une valeur qui n'est pas correcte.

Note aussi que dans cette définition, tu définissais 2x range: range

Anthony, si tu veux, je t'envoi le widget avec ces corrections

[Anthony PENHARD]

> Anthony, si tu veux, je t'envoi le widget avec ces corrections

tu as été plus rapide que moi je n'ai pas regardé tu as déjà corrigé ...
je veux bien que tu m’envoies ce que tu as fait oui

merci

[Anthony PENHARD]

du coup j'ai regardé rapidement ...

> Pour permettre un réglage plus fin avec le slider, remplacer la ligne:

> var step = ...
> ...

> Au lieu de 20 valeurs possible, on en a une par pixel, ce qui est bien plus
> précis et plus joli quand on slide.

en fait le step doit être un entier et au départ j'ai 0 à 100 donc un
pas de 5 ça marchais bien
et de toute façon les volets et ou dimmer en dessous de 5% on vois pas
de différence vu que la précision est des 3% ...
sinon pour les autres comme thermostat que tu veux faire la précision
ça doit être 0.5 °C donc las faudrait pas mettre de "step"

mais en effet ce que tu proposes ça doit être mieux

> Ensuite, pour le problème que je ne pouvais changer qu'une seule fois la
> valeur, c'est du au fait que j'avais un espace dans l'ID de l'objet à
> changer. Je sais, normalement, c'est pas conseillé, mais pour éviter le
> soucis, il suffit de changer la ligne (~104):

ouais pas super le blanc dans l'id ... ;-)
ça risque en effet de te poser des problèmes car partout dans knxweb
on suppose que l'id est unique et sans "blanc" ou caractères spéciaux
tel que "#" voir même des "." ou encore le premier caractère ne doit
pas être "_" (la aussi ça poserais des problèmes ...)
( pas testé mais peut-être que certains navigateur si l'id commence
par un chiffre ça pourrais déconner aussi ...)

> Reste donc les bugs suivants:
> - Si on mets une valeur minimale autre que 0, quand on clique sur le slider,
> il se met au maximum (dans mon cas, je voulais un slider de 3 à 30°C pour un
> thermostat)

il est dans quel sens "vertcial"/"horizontal" et l'autre attribut
"left et top"/ "right bottom" ?

> - Quand on "slide" il faudrait avoir une petite info bulle avec la valeur
> tant qu'on ne lache pas la touche de la souris. Ce serait plus facile pour
> régler une valeur.

ça c'est pas simple et pas géré pour le moment pas jquery ...
c'est pas un bug mais en effet pourrais être pratique ...
sinon je peux ajouter une zone qui s'affiche à coter quand on slide
avec la valeur, à tester pour voir ce que ça donne ...

> Et comme je suis lancé, j'ai corrigé pour empecher les slider sans command
> object d'être clickable

oui le disabled ok,
du coup c'est la même chose que les vprogressbar ou hprogressbar, pk
utiliser un slider ?

quand tu auras fini il faudra nous mettrons le rendu de ta visu .... ;-)

@+
Anthony.

[sprint95]

Salut a tous,
Petite question sur la vprogressbar de knxweb2, elle se base sur des
infos en % ou en valeur ?
J'avoue ne pas bien comprendre car j'ai juste testé avec une image ou
couleur, la progression de mes volets "dépasse" le cadre défini, comme
si on était en % et que mes valeurs étaient en absolue (0-255).
Y a t il un paramètre que je n'ai pas vue ou bien faut il
obligatoirement être en % dans la déclaration des objets ?
Thierry

[Frédéric Gilliard]

La progressbar a des limites 0-100. Si tu as défini l'état de tes volets avec un objet de type 5.xxx, alors tu as un retour de 0-255, il est normal que la VProgressbar dépasse. 

Si tu avais choisi des objets de type 5.001, alors tu aurais des retours en 0-100, cela irait (!! si tu changes, vérifie tes règles linknx)

Autre solution, utilise le slider plutôt que les progressbar, avec lui, tu peux le mettre en horizontal ou en vertical, de gauche a droite ou de droite a gauche (et haut-bas / bas-haut), tu peux ajouter une image de fond et aussi et surtout, choisir les bornes min et max (donc 0 - 255).

Note que dans la toute dernière version de ce composant, il y a un petit bug, mais je pense que la correction va vite venir. (Anthony m'entends-tu :-) )