Avant toute chose merci de (re)prendre connaissance de la charte et de la respecter.
Pour résumer :
- Avant de poser une question, je cherche si la réponse existe
- Je suis poli, courtois et je respecte tout un chacun sur le forum
- Si un post m'agace : je m'en éloigne plutôt que de répondre d'une façon qui pourrait être mal interprétée


Il n'est jamais du luxe que de rappeler des choses simples :
Courtoisie, amabilité, politesse et bonne humeur sont les maîtres mots pour un forum sympathique, bienveillant et accueillant :)

Toute la communauté vous remercie

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

Réservé à l'utilisation et la création de widgets dans JEEDOM
winhex
Actif
Messages : 2725
Inscription : 23 janv. 2015, 01:41

Re: widget input clock

Message par winhex » 12 janv. 2018, 20:44

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>
Pièces jointes
20180112_204409.png
20180112_204409.png (20.18 Kio) Consulté 607 fois
Dernière édition par winhex le 12 janv. 2018, 20:55, édité 1 fois.

titou
Timide
Messages : 92
Inscription : 02 avr. 2017, 18:25

Re: widget input clock

Message par titou » 12 janv. 2018, 20:55

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

winhex
Actif
Messages : 2725
Inscription : 23 janv. 2015, 01:41

Re: widget input clock

Message par winhex » 12 janv. 2018, 21:00

je le prenais pas comme un reproche !
merci

Avatar de l’utilisateur
Bosquetia
Actif
Messages : 5808
Inscription : 10 mai 2016, 07:54

Re: widget input clock

Message par Bosquetia » 12 janv. 2018, 21:03

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

michel76
Timide
Messages : 33
Inscription : 10 oct. 2017, 06:47

Re: widget input clock

Message par michel76 » 13 janv. 2018, 08:08

@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
Timide
Messages : 33
Inscription : 10 oct. 2017, 06:47

Re: widget input clock

Message par michel76 » 14 janv. 2018, 12:03

@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é 572 fois
Merci
Ps : les heures sont des exemples.

winhex
Actif
Messages : 2725
Inscription : 23 janv. 2015, 01:41

Re: widget input clock

Message par winhex » 14 janv. 2018, 13:41

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é 543 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
Timide
Messages : 33
Inscription : 10 oct. 2017, 06:47

Re: widget input clock

Message par michel76 » 15 janv. 2018, 15:07

@winhex

Merci pour ta solution, cela fonctionne parfaitement.

coulox
Timide
Messages : 299
Inscription : 15 sept. 2014, 12:37
Localisation : Paris

Re: widget input clock

Message par coulox » 17 janv. 2018, 15:13

@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 :)
DIY : PC ATOM X86 (DEBIAN) (Jeedom) + razpberry
RPI 2 (Jeedom) + GCE teleinfo + TTS
Tablette nexus 7 mural (IHM avec design jeedom de F$B33)
Zwave modules : 1 Greenwave multiprise, 5 FGMS-001, 3 FGK-101, 3 FGRM-222

titou
Timide
Messages : 92
Inscription : 02 avr. 2017, 18:25

Re: widget input clock

Message par titou » 17 janv. 2018, 19:28

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
Actif
Messages : 2725
Inscription : 23 janv. 2015, 01:41

Re: widget input clock

Message par winhex » 17 janv. 2018, 21:54

@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
Actif
Messages : 2725
Inscription : 23 janv. 2015, 01:41

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

Message par winhex » 23 janv. 2018, 00:24

pour inspiration (non finalisé manque mini/max et autre test, donc beta...) mais fonctionnel
range.png
range.png (4.26 Kio) Consulté 449 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
Timide
Messages : 116
Inscription : 21 oct. 2015, 07:48
Localisation : Strasbourg

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

Message par ludomin » 28 janv. 2018, 14:52

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é 400 fois
Voilà :)

winhex
Actif
Messages : 2725
Inscription : 23 janv. 2015, 01:41

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

Message par winhex » 28 janv. 2018, 16:23

ç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
Timide
Messages : 116
Inscription : 21 oct. 2015, 07:48
Localisation : Strasbourg

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

Message par ludomin » 28 janv. 2018, 17:08

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
Actif
Messages : 2725
Inscription : 23 janv. 2015, 01:41

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

Message par winhex » 28 janv. 2018, 17:19

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

Patator33
Timide
Messages : 247
Inscription : 25 juin 2015, 23:14
Localisation : Région bordelaise

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

Message par Patator33 » 28 janv. 2018, 18:52

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
Timide
Messages : 92
Inscription : 02 avr. 2017, 18:25

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

Message par titou » 28 janv. 2018, 19:01

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
Timide
Messages : 22
Inscription : 23 avr. 2017, 17:15

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

Message par Caelion » 11 févr. 2018, 23:30

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
Actif
Messages : 2725
Inscription : 23 janv. 2015, 01:41

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

Message par winhex » 12 févr. 2018, 22:01

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

Répondre

Revenir vers « [Plugin officiel] Widgets »

Qui est en ligne ?

Utilisateurs parcourant ce forum : fcna et 1 invité