Page 2 sur 4

Re: widget input clock

Publié : 12 janv. 2018, 20:44
par winhex
j ai fait exprès.
tous comme gardé l'ancienne valeur (pour modif)

je t'ai fait la version portable
comme tu disais revoir la dispo des éléments et enlevé crois et flèche (inutile en mobile : gains de place entre hh:mm et icône validation)
tu peux tester pour validation ?

Code : Tout sélectionner

    <div class="tooltips cmd" data-type="action" data-subtype="slider" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" style="width : 120px;height : 40px;display : block;">
       <div class="input-group" style="height: 35px;width: 80px;margin: auto;">
      <input style="width:75px;padding-left:5px;border-radius: 5px;font-size : 17px;font-weight: Bold;background-color:#e4e2c2;" class="form-control input value" type="time" placeholder="#title_placeholder#" value="#state#" data-cmd_id="#id#"/>
	    <span class="input-group-btn" style="position: relative;padding-left:1px;">   
        <a class="btn btn-default execute" style="color:white;background-color:#cmdColor# !important;border-radius: 5px;border-color : transparent !important;height:35px;width:30px;"><i class="fa fa-check" style="position: relative;left:-5px;"></i></a>
       </span>
          </div>
	<script>

		$('.cmd[data-cmd_uid=#uid#]:last .execute').on('click', function() {
        jeedom.cmd.execute({id:'#id#', value: {slider: $('.cmd[data-cmd_uid=#uid#] .value').val().replace("#unite#", "").replace(" ", "")}});
                });
	</script>
    <style>

.value::-webkit-inner-spin-button, /* Removes arrows */
.value::-webkit-outer-spin-button, /* Removes arrows */
.value::-webkit-clear-button {/* Removes blue cross */
    -webkit-appearance: none !important;
    margin: 0 !important;
    -moz-appearance:textfield !important;
}
      </style>

</div>

Re: widget input clock

Publié : 12 janv. 2018, 20:55
par titou
Je le testerais dans le week-end. Je ne manquerai pas de te faire mon retour.

Pour le bouton validation, aucun reproche... Juste que je me suis fait avoir 2/3 fois... Ma mémoire de poisson rouge qui me joue des tours :D

Re: widget input clock

Publié : 12 janv. 2018, 21:00
par winhex
je le prenais pas comme un reproche !
merci

Re: widget input clock

Publié : 12 janv. 2018, 21:03
par Bosquetia
Merci winhex pour ce partage, je pense que plus d'une personne va profiter de ta création ;-)

Re: widget input clock

Publié : 13 janv. 2018, 08:08
par michel76
@winhex

Merci encore j'ai reussi a faire ce que je voulais avec tes explications.
(j'ai quand même lu et relu la doc sur les widget pour comprendre)

Re: widget input clock

Publié : 14 janv. 2018, 12:03
par michel76
@winhex
Bonjour,

Maintenant que ça fonctionne j'en voudrais plus mais je coince :
Je t'explique :
Je voudrais que par défaut la programmation soit a 07:00 tous les jours.

Exceptionnellement je programme un soir a 08:00 pour le lendemain. OK ca marche

Mon idée : Faire un scenario ou autre chose qui remet par défaut a 07:00 apres la derniere programmation

Je ne trouve pas comment réinitialiser les zones de saisies HH:MM a une valeur de 07:00
cafetiere1.PNG
cafetiere1.PNG (3.77 Kio) Consulté 1177 fois
Merci
Ps : les heures sont des exemples.

Re: widget input clock

Publié : 14 janv. 2018, 13:41
par winhex
un fois ton action réalisé
dans le scenario
action sur curseur valeur 07:00
et action
raffraichir (si tu veux pas actualisé ta page) = vu immediate

j' ajouterai en 1er page

HS
je suis sur imput : les jours de semaines ;
commande = une info (lundi,mardi...) un curseur (qui affiche ou enlevé le jour)
scénario envisage si contient (matches)
prev.png
prev.png (16.72 Kio) Consulté 1148 fois
checkbox qui sera remplacer par clic
lettre du jour
avec couleur différente : activer/non

les checkbox permettent de faire plus ou moins tous ca
http://freefrontend.com/css-checkboxes/
celui visible dans le screen est celui là "adapter"
All-CSS Toggle Switch
https://codepen.io/mburnette/pen/LxNxNg

sur le market
https://www.jeedom.com/market/index.php ... tch_winhex

(fonctionne en version mobile mais reste des test à réaliser )

plus je cherche moin j'ai le temps au vu de tous se que je découvre , à mon rythme

Re: widget input clock

Publié : 15 janv. 2018, 15:07
par michel76
@winhex

Merci pour ta solution, cela fonctionne parfaitement.

Re: widget input clock

Publié : 17 janv. 2018, 15:13
par coulox
@winhex merci pour ce partage encore : "je suis sur imput : les jours de semaines ; "
grace a toi j'ai découvert ce site : je trouve cette checkboxes sympas : https://codepen.io/landb/pen/pRQPNX
.
je vais essayer de faire comme toi pour les jours de semaines :)

Re: widget input clock

Publié : 17 janv. 2018, 19:28
par titou
Je viens de voir la vidéo de présentation du widget dont tu as mis le lien un peu plus haut... top. En plus elle m'a permise de découvrir le mode tableau

Re: widget input clock

Publié : 17 janv. 2018, 21:54
par winhex
@coulox
c'est la ici même que j'ai découvert le site comme le PHP,html,css

@titou
je trouve cque ette méthode simpliste (pas de vocabulaire) clic clic et reclic
et une bonne approche de la domotique

Après l'obtention de ceux qui doit nous amélioré le confort,sécurité,...
on veux pouvoir rapidement faire le tour des outils qu'offre Jeedom et quoi de mieux que des vidéo de < 10mn

même pour une personne ne parlant pas le français un préambule de possibilité, ça ne remplacera jamais les docs, les tuto, forum.

j'essai de me poser les questions qu'un nouveau se poserai afin de les mettre en vidéo sans aller trop loin.

Re: widget input clock, switch, numérique, ...

Publié : 23 janv. 2018, 00:24
par winhex
pour inspiration (non finalisé manque mini/max et autre test, donc beta...) mais fonctionnel
range.png
range.png (4.26 Kio) Consulté 1054 fois
input range / slide

la base sans style
qu'on trouve avec une multitude d'exemple
w3schools

Code : Tout sélectionner

<div class="cmd cmd-widget" data-type="action" data-subtype="slider" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#">
    <div class="cmdName" style="font-weight: bold;font-size : 12px;#hideCmdName#">#name_display#</div>

<input id="write#id#" type="range" class="value" value="#state#">
 <p>Value: <span id="demo"></span></p>
  <script>
var slider = document.getElementById("write#id#");
var output = document.getElementById("demo");
output.innerHTML = slider.value;

slider.oninput = function() {
  output.innerHTML = this.value;
  jeedom.cmd.execute({id:'#id#', value: {slider: $('.cmd[data-cmd_uid=#uid#] .value').val().replace("", "")}});
}		
    </script>
</div>
une fois tous testé
quelques exemples à tester sur tab/Phone avant d'entreprendre une adaption de style
http://www.bestjquery.com/demo/jquery-range-slider/

édit
avec personnalisation finalisé
slider inutilisable sur smartphone

Re: widget input clock, switch, numérique, ...

Publié : 28 janv. 2018, 14:52
par ludomin
Salut à tous,

bravo winhex pour ton travail.

Je rajoute ma contribution pour ceux qui veulent rajouter la validation par la touche enter lorsqu'on rentre une heure.
J'ai rajouté la classe execute2 et l'event .keypress.

voici mon code :

Code : Tout sélectionner

<div class="tooltips cmd cmd-widget" data-type="action" data-subtype="slider" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" style="min-width:105px;">
<div class="input-group" style="width: 100px;">
<input style="height: 33px;border-radius: 5px;font-size : 16px;font-weight: Bold;background-color:#e4e2c2;" class="form-control input-sm value execute2" type="time" placeholder="#title_placeholder#" value="#state#" data-cmd_id="#id#"/>
<span class="input-group-btn" style="position: relative;">   
<a class="btn btn-default execute" style="background-color:#cmdColor# !important;border-color : transparent !important;height:30px;width:25px"><i class="fa fa-check" style="position: relative;left:-5px;"></i></a>
</span>
</div>
	<script>
	    $('.cmd[data-cmd_uid=#uid#]:last .execute2').keypress(function( event ) {
           if(event.which == 13) {
        jeedom.cmd.execute({id:'#id#', value: {slider: $('.cmd[data-cmd_uid=#uid#] .value').val().replace("#unite#", "").replace(" ", "")}});
                }});
		$('.cmd[data-cmd_uid=#uid#]:last .execute').on('click', function() {
        jeedom.cmd.execute({id:'#id#', value: {slider: $('.cmd[data-cmd_uid=#uid#] .value').val().replace("#unite#", "").replace(" ", "")}});
                });
	</script>
</div>

On peut aussi en fonction de ce qu'on veut que ça update dès qu'on change une valeur :

Code : Tout sélectionner

	$('.cmd[data-cmd_uid=#uid#]:last .execute').change(function() {
        jeedom.cmd.execute({id:'#id#', value: {slider: $('.cmd[data-cmd_uid=#uid#] .value').val().replace("#unite#", "").replace(" ", "")}});
                });
pratique sur un design par exemple.

Je peux ainsi me faire des zones horaires personnalisées avec l'affichage minimum :
Screenshot 2018-01-28_14-57-22.png
Screenshot 2018-01-28_14-57-22.png (21.58 Kio) Consulté 1005 fois
Voilà :)

Re: widget input clock, switch, numérique, ...

Publié : 28 janv. 2018, 16:23
par winhex
ça sa fait plaisir !
retour sur market,YouTube,.. (pas motivant)
vu le temps que prend le partage (parfois plus que de créer/adapter)
donc voir une adaptation partagé c'est sympas de ta part. merci

ps : optimisation possible : j'ai trouvé le moyen d'avoir des heures preconfigurer (comme pour numérique) une liste et a la fin de la liste : autres pour l'horloge si tu veux ?

Re: widget input clock, switch, numérique, ...

Publié : 28 janv. 2018, 17:08
par ludomin
Tu as abattu un sacré travail et en plus tu le partages... C'est normal de le reconnaitre.

Oui c'est toujours bon à prendre des optimisations, variantes....

Re: widget input clock, switch, numérique, ...

Publié : 28 janv. 2018, 17:19
par winhex
http://www.htmlquick.com/reference/tags/input-time.html
dans SPECIFIC ATTRIBUTES clic sur list
Essai avec ton tel/tab

Re: widget input clock, switch, numérique, ...

Publié : 28 janv. 2018, 18:52
par Patator33
Super taf ! Merci beaucoup pour le partage.
Testé et adopté ...
Sans mettre la pression et juste pour savoir, à quand la version mobile en stable ?

Re: widget input clock, switch, numérique, ...

Publié : 28 janv. 2018, 19:01
par titou
un moment que j'ai pas eu le temps de me replonger dans ma domotique et je vois plein d'évolution intéressante ici. merci a vous pour le boulot. dès que possible j'essaie de voir ce que je peux faire de toutes ces nouveautés.

@winhex : je n'ai pas encore eu le temps de tester la modification que tu as fait pour le mode mobile mais je ne t'ai pas oublié

Re: widget input clock, switch, numérique, ...

Publié : 11 févr. 2018, 23:30
par Caelion
Bonjour à tous,
merci pour ce sujet, qui m'a permit de régler le point sur les sliders dans les designs depuis les téléphones.
J'en profite pour ajouter un point qui pourra être utile à certains :
Il peut être intéressant de passer la fonction oninput en onchange dans le script pour éviter d'avoir une mise à jour du paramètre pendant que l'on a le doigt sur le slider (par exemple un slider de variateur de lumière pour éviter que cela ne fasse que changer le temps qu'on lâche le doigt)

Re: widget input clock, switch, numérique, ...

Publié : 12 févr. 2018, 22:01
par winhex
tu m'as fait gagné du temps, voir j'aurais peut être pas trouvé !
j'y avais songé sans connaître la fonction pour le faire.

j'apprécie et te remercie pour le retour.@caelion