[WIDGET] Kontrol2

[Theduck38]

Pas de pb de réactivité de Kontrol2 chez moi, même lié à un autre slider via une commande d'état.

[glenan]

Pas de pb de réactivité de Kontrol2 chez moi, même lié à un autre slider via une commande d'état.

Le phénomène par la vidéo :

Je pars de la position Off
Je déplace le curseur de Kontrol2 sur 99%
le reste se fait tout seul jusqu'à la fin de la vidéo où kontrol2 montre enfin 99%

https://www.dropbox.com/s/vd3shpt1im8pj ... 0.mp4?dl=0

[Salvialf]

Pas de pb de réactivité de Kontrol2 chez moi, même lié à un autre slider via une commande d'état.

Le phénomène par la vidéo :

Je pars de la position Off
Je déplace le curseur de Kontrol2 sur 99%
le reste se fait tout seul jusqu'à la fin de la vidéo où kontrol2 montre enfin 99%

https://www.dropbox.com/s/vd3shpt1im8pj ... 0.mp4?dl=0

OK merci pour la vidée c'est effectivement tout de suite plus parlant.

Je ne pense pas que le widget soit en cause car le phénomène se produit sur toute la tuile même sur le curseur 'core' et celui de puissance et même le bouton on/off. Si tu remplaces Kontrol2 par le widget 'core' par défaut c'est pareil non ?

Des erreurs en mode DEV de ton navigateur ? F12 sur Chrome...

C'est quoi comme module que tu contrôles avec ? A première vue on dirait que les retours d'état se font au ralenti...

[winhex]

Coin !
Je viens de tester vite fait du boulot : c'est un pb de navigateur. Ça ne marche pas avec Firefox chez moi mais bien avec Chrome...

le script js knob étant assez ancien (4 ans) il serais peut être envisageable d'en prendre un plus récent !
donc j'en ai cherché un plus récent, offrant plus de possibilités

@Salvialf
je suis tombé sur celui là
http://roundsliderui.com/

je n'ai passé que la soirée à cherché et voir les possibilité (demo, aide a la construction, lecture question page d'accueil, et retour sur github) Impressionnant c'est du css

exemple
http://jsfiddle.net/soundar24/LpuLe9tr/11/
clic sur le chiffre au milieu pour un input (mode clavier)
ou
https://jsfiddle.net/soundar24/qekqkp3n/1/
...

si toutefois avec jeedom et les différents navigateurs ca tourne bien ?

[Salvialf]

le script js knob étant assez ancien (4 ans) il serais peut être envisageable d'en prendre un plus récent !
donc j'en ai cherché un plus récent, offrant plus de possibilités

@Salvialf
je suis tombé sur celui là
http://roundsliderui.com/

je n'ai passé que la soirée à cherché et voir les possibilité (demo, aide a la construction, lecture question page d'accueil, et retour sur github) Impressionnant c'est du css

exemple clic sur le chiffre au milieu pour un input (mode clavier)

si toutefois avec jeedom et les différents navigateurs ca tourne bien ?

Hey salut @winhex,

Les grands esprits se rencontrent car je l'avais vu celui-là avant de revenir sur Kontrol. C'est vrai qu'il est sympa, celui avec l'aiguille avait failli me faire craquer mais je ne me sentais pas de m'attaquer à un nouveau alors que j'avais pas mal avancé sur kontrol. j'avais regardé surtout pour voir ce qui se faisait d'autre mais j'avoues il donne envie de s'y intéresser.

Il y a l'input aussi sur Kontrol mais jamais été capable de lui faire prendre la valeur en compte... Je ne me suis pas acharné non plus. du coup j'ai fini par le cacher pour afficher le retour d'état à la main. L'input je réessaierais surement car il devait pas me manquer grand chose, la valeur bougeait bien sur la jauge mais n'était pas sauvegardée ni appliquée.

Pour knob y'a pas mal de pull-requests de 2018 qui pourraient le remettre sur les rails... Quand j'aurais le courage de m'y ré-attaquer

Tiens tu vas pouvoir me répondre je suis sûr, je voudrais enlever les espaces sur le retour de 'displayDuration' (2 m 10 j 5 h 15 min -> 2m 10j 5h 15min) je pense que c'est faisable par une fonction dans user.function.class.php mais je ne trouve pas la fonction de base qui fait ça dans Jeedom pour m'en inspirer et la modifier... Saurais-tu où elle se cache par hasard ?

exemple
https://jsfiddle.net/soundar24/qekqkp3n/1/

C'est exactement ce point qui me donnais envie de m'y attaquer: mettre d'un côté la moitié d'un curseur pour la luminosité et de l'autre côté pour la couleur... Aaaahh je sens que je vais me laisser tenter du coup vu que tu m'en parles !

[winhex]

Tiens tu vas pouvoir me répondre je suis sûr, je voudrais enlever les espaces sur le retour de 'displayDuration' (2 m 10 j 5 h 15 min -> 2m 10j 5h 15min) je pense que c'est faisable par une fonction dans user.function.class.php mais je ne trouve pas la fonction de base qui fait ça dans Jeedom pour m'en inspirer et la modifier... Saurais-tu où elle se cache par hasard ?

cette commande est dans core/js/cmd.class.js

Code : Tout sélectionner

jeedom.cmd.displayDuration = function(_date,_el){
  var arrDate = _date.split(/-|\s|:/);
  var timeInMillis = new Date(arrDate[0], arrDate[1] -1, arrDate[2], arrDate[3], arrDate[4], arrDate[5]).getTime();
....

aprés tu peux aussi en crée une en php
là faut rechercher dans la doc scenario la commande qui pour moi serai
stateDuration
et en faire une custom avec mise en forme
tous comme viewtopic.php?f=23&t=40534&p=661920&hil ... om#p661920

mais pour moi le plus simple

dans ton

Code : Tout sélectionner

      if (valUptime == 'duree') {
  		jeedom.cmd.displayDuration(_options.valueDate, $('.cmd[data-cmd_id=#id#] .timeCmd#id#'));
      	}

au debut dans core/js/cmd.class.js
on voit function(_date,_el)
donc
_date = _options.valueDate
_el = le placement

donc je remplacerai par
je laisse les test d'essai //
la ligne qui t'interesse

_el.empty().append(((j > 0 ? j + " j " : "") + (h > 0 ? h + " h " : "") + (m > 0 ? (h > 0 && m < 10 ? "0" : "") + m + " min" : "0 min")));

Code : Tout sélectionner

      if (valUptime == 'duree') {

var _el = $('.cmd[data-cmd_id=#id#] .timeCmd#id#');
var _date = "2019-04-10 00:42:30";
// var _date = _options.valueDate; 
  //      alert(_date);
  var arrDate = _date.split(/-|\s|:/);
  var timeInMillis = new Date(arrDate[0], arrDate[1] -1, arrDate[2], arrDate[3], arrDate[4], arrDate[5]).getTime();
  _el.attr('data-time',timeInMillis);
  if(_el.attr('data-interval') != undefined){
    clearInterval(_el.attr('data-interval'));
  }
  if(_el.attr('data-time') < (Date.now()+ clientServerDiffDatetime)){
    var d = ((Date.now() + clientServerDiffDatetime) - _el.attr('data-time')) / 1000;
    var j = Math.floor(d / 86400);
    var h = Math.floor(d % 86400 / 3600);
    var m = Math.floor(d % 3600 / 60);
    _el.empty().append(((j > 0 ? j + "j " : "") + (h > 0 ? h + "h " : "") + (m > 0 ? (h > 0 && m < 10 ? "0" : "") + m + "min" : "0 min")));
    var myinterval = setInterval(function(){
      var d = ((Date.now() + clientServerDiffDatetime) - _el.attr('data-time')) / 1000;
      var j = Math.floor(d / 86400);
      var h = Math.floor(d % 86400 / 3600);
      var m = Math.floor(d % 3600 / 60);
      _el.empty().append(((j > 0 ? j + " j " : "") + (h > 0 ? h + " h " : "") + (m > 0 ? (h > 0 && m < 10 ? "0" : "") + m + " min" : "0 min")));
    }, 60000);
    _el.attr('data-interval',myinterval);
  }else{
    _el.empty().append("0 min");
    var myinterval = setInterval(function(){
      if(_el.attr('data-time') < (Date.now()+ clientServerDiffDatetime)){
        var d = ((Date.now() + clientServerDiffDatetime) - _el.attr('data-time')) / 1000;
        var j = Math.floor(d / 86400);
        var h = Math.floor(d % 86400 / 3600);
        var m = Math.floor(d % 3600 / 60);
        _el.empty().append(((j > 0 ? j + "j " : "") + (h > 0 ? h + "h " : "") + (m > 0 ? (h > 0 && m < 10 ? "0" : "") + m + " min" : "0 min")));
      }else{
        _el.empty().append("0 min");
      }
    }, 60000);
    _el.attr('data-interval',myinterval);

}
      	}

[Salvialf]

Encore une fois merci @winhex

Nickel c'est bien ce fichier que je cherchais heureusement que t'es là j'aurais jamais trouvé je ne m'attendais pas à ce que la fonction soit sous cette forme.

Je regarde ça en détail demain sur le pc. J'ai commencé à le coder dans le widget aussi mais en voyant le nombre de lignes se multiplier je me suis dit que c'était dommage alors que la fonction est déjà présente dans le core...

D'ailleurs à priori j'ai pas fait tout à fait pareil, j'ai fait une variable 'new.Date(_options.valueDate)' et une autre variable 'new.Date()' puis la différence entre les 2 pour obtenir la durée en millisecondes. Ensuite les calculs et les restes pour formater la durée...

Je viens de regarder ça ressemble pas mal quand même mais sur tapatalk c'est pas très lisible.

Édit: je galérais pour afficher les mois en plus c'est aussi pour ça que j'ai laissé tomber... bref je regarde ça demain

[winhex]

au vu d'une redondance du code sur plusieurs widgets j avais mis de côté la création d' un fichier Js

Le JavaScript externe

Il vaut mieux privilégier un fichier externe plutôt que d'inclure le code JavaScript directement dans la page, pour la simple et bonne raison que le fichier externe est mis en cache par le navigateur et n'est donc pas rechargé à chaque chargement de page, ce qui accélère l’affichage de la page

https://openclassrooms.com/fr/courses/1 ... javascript

à tester car entre la compression des widgets, l'actualisation v3, rapidité, comportement au réveil d'un appareil mobile,..

[Salvialf]

au vu d'une redondance du code sur plusieurs widgets j avais mis de côté la création d' un fichier Js

Le JavaScript externe

Il vaut mieux privilégier un fichier externe plutôt que d'inclure le code JavaScript directement dans la page, pour la simple et bonne raison que le fichier externe est mis en cache par le navigateur et n'est donc pas rechargé à chaque chargement de page, ce qui accélère l’affichage de la page

https://openclassrooms.com/fr/courses/1 ... javascript

à tester car entre la compression des widgets, l'actualisation v3, rapidité, comportement au réveil d'un appareil mobile,..

Bonjour @winhex,

Tu ne m'as même plus mâché le travail, à ce point là c'est pré-digéré !

Bien sûr c'est nickel je n'ai quasiment pas dû retoucher au code que tu as partagé.

J'ai un peu lutté mais j'ai finalement réussi à l'inclure par un fichier externe, c'est propre !!

Encore une fois merci à toi tu es vraiment d'une très grande aide sur le forum.

[JAG]

Salut Salvialf,

Peut-tu prévoir dans tes prochaines mises à jour, de pouvoir intégrer un affichage un peu réduit du style de la température

Capture d’écran 2019-04-14 à 19.17.07.png (39.25 Kio) Consulté 2708 fois

et si possible de pouvoir mettre une couleur de fond comme la température

merci pour ton boulot

[Salvialf]

Salut @JAG,

Yop je regardes ça au plus vite... Pour la taille de la valeur pas de souci et pour le fond faut que je réfléchisses à comment l'intégrer pour que ça reste harmonieux en fonction des différents réglages. D'ailleurs tu te l'ais bien approprié il est sympa le widget comme ça je veux bien que tu m'envoies tes paramètres en MP pour que j'inclues l'image dans les exemples de paramétrages.

HS: il a fait chaud chez toi aujourd'hui

[dvb]

Hello,
Je viens tout juste de tester ce widget (je sais, j'suis légèrement en retard...).
Très très pratique, je l'adopte ! Du coup as-tu prévu de développer sa version mobile ?

[Salvialf]

Ah oui faut que je me ré-attaque à ce widget aussi rien que pour les modifs qui m'ont été demandées déjà... Et bien sûr une version mobile !!

Je commence à m'intéresser aux plugins depuis hier.... J'en oublies déjà les widgets

[glenan]

Demande à Loic de t'intégrer dans les dev.? Il me semble bien seul.

Envoyé de mon Samsung Note 8 en utilisant Tapatalk

[Salvialf]

C'est gentil mais je n'ai pas le niveau, j'ai encore beaucoup à apprendre je ne suis ni programmeur ni informaticien.

Et je crois qu'il a de l'aide maintenant + il a proposé sur un autre topic de faire des pull requests sur GitHub pour l'aider. Si l'occasion se présente je ferai ça...

[dvb]

C'est gentil mais je n'ai pas le niveau, j'ai encore beaucoup à apprendre je ne suis ni programmeur ni informaticien.

+1 glenan.

Salvialf se dit peut-être débutant mais il le cache bien.
Rigueur (méthode / doc) et tenacité évidents => capacité à monter en compétence.
Il a sa place au sein de la team Jeedom....

Ce ne sont pas des compliments, juste de simples constatations

[Theduck38]

Hello @salvialf

J'ai une petite idée derrière la tête mais je voudrais voir si ça va bien rendre... est-il possible facilement de pouvoir régler (par un paramètre interne au code widget) la transparence de l'arc de cercle vide et plein (ce genre de truc dépasse mes maigres compétences) ?
Je voudrais le coller sur un truc, mais pour que ça rende bien il faudrait qu'il laisse partiellement visible ce qu'il y a dessous.

[Salvialf]

Hello @salvialf

J'ai une petite idée derrière la tête mais je voudrais voir si ça va bien rendre... est-il possible facilement de pouvoir régler (par un paramètre interne au code widget) la transparence de l'arc de cercle vide et plein (ce genre de truc dépasse mes maigres compétences) ?
Je voudrais le coller sur un truc, mais pour que ça rende bien il faudrait qu'il laisse partiellement visible ce qu'il y a dessous.

Salut Theduck,

Oui c'est possible avec les paramètres optionnels "colFond" et "colCurseur" si tu mets rgba(0,0,0,0) comme valeur ce sera transparent.

...Quand je vois ce tuto je me dis qu'elles sont loin d'être maigres tes compétences !

[Theduck38]

Ah, merci, mais c'est pas le même domaine du tout
Le pb avec Jeedom, c'est qu'il faut apprendre le php, puis le html, puis le css, puis le javascript... avant avec la Vera, j'avais appris le Lua... et puis je maîtrise vraiment le VB !
Ça fait beaucoup de trucs à maîtriser !

Pour le rgba(0,0,0,0), c'est donc le 0 final qui fait la transparence. Du coup je peux la régler en direct, cool.

[Theduck38]

Ah, et j'oubliais : aussi le Python... et j'ai appris le TurboPascal à l'école !