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

[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>

[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

[winhex]

je le prenais pas comme un reproche !
merci

[Bosquetia]

Merci winhex pour ce partage, je pense que plus d'une personne va profiter de ta création

[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)

[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 (3.77 Kio) Consulté 3954 fois

Merci
Ps : les heures sont des exemples.

[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 (16.72 Kio) Consulté 3925 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

[michel76]

@winhex

Merci pour ta solution, cela fonctionne parfaitement.

[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

[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

[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.

[winhex]

pour inspiration (non finalisé manque mini/max et autre test, donc beta...) mais fonctionnel

range.png (4.26 Kio) Consulté 3831 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

[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 (21.58 Kio) Consulté 3782 fois

Voilà

[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 ?

[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....

[winhex]

http://www.htmlquick.com/reference/tags/input-time.html
dans SPECIFIC ATTRIBUTES clic sur list
Essai avec ton tel/tab

[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 ?

[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é

[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)

[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