Widget-input-clock-winhex

Ce n’est pas le bon endroit pour parler de « ce widget » dont vous seul connaissez l’existence.
Il faut préciser ce qu’est ce widget et vous posez ensuite la question s’il sera intégré dans le core.
Sinon vous n’aurez pas de réponse.

Bonjour @jpty,

C’est un des widgets de @winhex sur l’ancien forum qui sont acclamés par la critique :smiley:

@michel76: il fonctionne en V4 ? Je ne suis pas sûr que l’équipe Jeedom ait prévu d’inclure de nouveaux widgets dans les semaines à venir ni même que tu obtiennes une réponse en cette période de très forte activité :kissing_heart:

1 « J'aime »

c’est quoi ?
en faite c’est une demande de widget à base d’input (comme le widget core action liste)
en numérique sur tel/tab ça ouvre le clavier numérique (avec liste favoris)
genre


et pour le clock une horloge
ou du numerique

tous ca est intégré au navigateur

pour ceux qui on accès

c’est vieux septembre
citation de @loic

Bonjour,
Je pense qu’il vaut mieux améliorer le systeme internet de widget du core (j’ai déjà une liste pour la 4.1 d’amélioration) et comme le dit alex voir les widgets les plus demandé pour les ajouter.

j’en sais pas +

1 « J'aime »

Bonjour,

Merci pour la description de ce qu’est ce widget dont je ne connaissais pas l’existence.

Pourquoi ne publiez-vous pas son code en attendant une éventuelle intégration dans le core?
Les personnes intéressées pourraient créer un widget code et l’utiliser.

bonjour
ils sont sur le market,

je sais pas si on peu toujours installer le plug wiidget en v4 sinon sur ex forum (via pc et beaucoup de patience)
en voilà 1 demande sur le forum

(j’utilise pas clock)

il y a des demandes pour agenda aussi

se soir je te mettrai se que j’utilise en v3

Salut @ajja17orange,

Si tu remets le nez dans ces widgets input (date/heure) je suis intéressé par tes retours. Je comptais justement y jeter un œil dans les prochains jours pour voir s’il était possible de faire un widget qui crée un événement dans l’agenda…

@+

PS: je suis justement en train de passer ton widget Etat_Bouton en V4 en ce moment même :wink: (courage si vous cliquez sur le lien car l’ancien forum est à la ramasse depuis quelques jours)

Edit: @ajja17orange :grin:

20200216_151722

1 « J'aime »

Sans%20titre4

voila les input clock,date et numb

2 « J'aime »

input%20date

l’input format date rencontre 3 soucis

  • la date saisi « celle du navigateur » fait un etat US « résolu »
  • l’info calcul le string « résolu »
  • l’actualisation via scenario event (entre guillement) et format « yyyy-mm-dd »
    n’actualise pas « résolu » pour les autres input faut faire pareil
2 « J'aime »

Bonjour,
Quelqu’un pourrait m’expliquer comment mettre en place le widget pour saisir une date à partir du petit calendrier tel que dessus ? J’ai essayé avant de poser la question de mettre le code de ajja17 mais soit je n’ai pas encore tout compris ce qui est possible car je débute avec cette gestion de widget en v4. Capture d’écran 2020-10-31 à 13.43.20
Pour l’instant je n’arrive qu’a ça mais pas d’ouverture de calendrier.
Merci

Au cas où
Il existe une fonction input date + heure

Tout a la fin on peux voir non compatible avec safari et firefox

donc je ne le mets pas sur le github voici le code du slider
image

<div class="cmd cmd-widget" data-type="action" data-subtype="slider" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" style="width:80px;">
<center>
    	<div class="title #hide_name#">
		<div class="cmdName">#name_display#</div>
	</div>
  
<span style="font-style: oblique;font-size : 13px;#hide_name#;"></span>
<span class="input-group">
<input class="form-control input-sm value execute" type="datetime-local" data-cmd_id="#id#" required>
</span>
  </center>
<style>
  [data-cmd_id="#id#"].form-control:not(.btn):not(.expressionAttr), [data-cmd_id="#id#"] input:not(.btn):not(.dial):not([type="radio"]):not([type="image"]):not(.expressionAttr):not(.knob):not([type="checkbox"]), textarea:not(.expressionAttr) {
  background-color:#e4e2c2!important;
  color:green!important;
       }
 [data-cmd_id="#id#"].value { 
right:55px;
      border-radius: 12px!important;
    height: 30px!important;
      width: 200px!important;
    min-height: 30px!important;
    max-height: 30px!important;
    font-size : 15px!important;
    font-weight: Bold!important;
    text-align: left!important; 
    }  

</style>
	<script>
        jeedom.cmd.update['#id#'] = function(_options){
    $('.cmd[data-cmd_uid=#uid#] .value').val(_options.display_value);

          
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {

$('.cmd[data-cmd_uid=#uid#] .execute').off("change").on("change", function () {  
        jeedom.cmd.execute({id:'#id#', value: {
           slider: '"'+this.value+'"'
        }});
                });
             } else {
$('.cmd[data-cmd_uid=#uid#]:last .execute').keypress(function( event ) {
           if(event.which == 13) {

 jeedom.cmd.execute({id:'#id#', value: {
  slider: '"'+this.value+'"'
 }}); 
           }});
}
}
    	jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
     
	</script>
</div>

pour retour info personnalisé jour-mois-année heure:minute
j’ai fait un retour sur un autre sujet

Hello @ajja17orange,

Pour info, j’avais aussi ce besoin, alors j’ai adapté ton code pour renvoyer la date et l’heure dans le même format que #timestamp#, ce qui est plus utilisable pour faire des calculs.
J’ai aussi retiré le style propre à ton widget.

Voici le code du widget desktop :

<div style="width:195px;" class="tooltips cmd cmd-widget" data-type="action" data-subtype="slider" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#">
  <div class="input-group">
    <div style="font-weight:bold;font-size:12px;#hideCmdName#">#name_display#</div>
    <input id="input#id#" class="form-control input-sm value execute" type="datetime-local" data-cmd_id="#id#" required style="margin-top:5px;width:175px!important;height:30px!important;min-height:30px!important;max-height:30px!important;">
  </div>
  <script>
    jeedom.cmd.update['#id#'] = function(_options){
      if (_options.display_value!="") {
        var theVal = new Date(_options.display_value*1000);
        theVal.setHours(theVal.getHours() - theVal.getTimezoneOffset()/60);
        var theStr = theVal.toISOString();
        theStr = theStr.substr(0,theStr.indexOf("."));
        $('#input#id#').val(theStr);
      } else { 
        $('#input#id#').val("");
      }
      if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
        $('.cmd[data-cmd_uid=#uid#] .execute').off("change").on("change", function () {
          var theDate = new Date(this.value);
          jeedom.cmd.execute({id:'#id#', value: { slider: theDate.getTime()/1000 }});
        });
      } else {
        $('.cmd[data-cmd_uid=#uid#]:last .execute').off("keypress").keypress(function( event ) {
             if(event.which == 13) {
               var theDate = new Date(this.value);
               jeedom.cmd.execute({id:'#id#', value: { slider: theDate.getTime()/1000 }});
             }
        });
      }
    }
    jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
  </script>
</div>

Voici le code du widget mobile :

<div class="tooltips cmd cmd-widget" data-type="action" data-subtype="slider" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" style="width:155px;">
  <div class="input-group">
    <div style="font-weight:bold;font-size:12px;#hideCmdName#">#name_display#</div>
    <input id="input#id#" class="form-control input-sm value execute" type="datetime-local" data-cmd_id="#id#" required style="margin-top:5px;width:155px!important;height:30px!important;min-height:30px!important;max-height:30px!important;">
  </div>
  <script>
    jeedom.cmd.update['#id#'] = function(_options){
      if (_options.display_value!="") {
        var theVal = new Date(_options.display_value*1000);
        theVal.setHours(theVal.getHours() - theVal.getTimezoneOffset()/60);
        var theStr = theVal.toISOString();
        theStr = theStr.substr(0,theStr.indexOf("."));
        $('#input#id#').val(theStr);
      } else { 
        $('#input#id#').val("");
      }
      if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
        $('.cmd[data-cmd_uid=#uid#] .execute').off("change").on("change", function () {
          var theDate = new Date(this.value);
          jeedom.cmd.execute({id:'#id#', value: { slider: theDate.getTime()/1000 }});
        });
      } else {
        $('.cmd[data-cmd_uid=#uid#]:last .execute').off("keypress").keypress(function( event ) {
             if(event.which == 13) {
               var theDate = new Date(this.value);
               jeedom.cmd.execute({id:'#id#', value: { slider: theDate.getTime()/1000 }});
             }
        });
      }
    }
    jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
  </script>
</div>

Bad

2 « J'aime »

LO @Bad

J’ai repris ce code mais lorsque sur ordi je choisis la date et l"heure et que je fais entrée rien ne s’affiche dans ma commande qui reformate la date sélectionnée.
Aurais-tu une explication ?
Merci

Virtuel comportement



61903912a78f6fa8fd3b8ed558bc1dd0

EDIT : Après un 2ième enter avec souris sur le widget, cela fonctionne. Fausse alerte

1 « J'aime »

Salut Bad, sais-tu si ce code de widget est compatible v4.4 ?

Hello, j’avoue que je n’ai pas eu le temps de le tester.

Ok je viens de tomber dessus et ça pourrait me servir, à l’occasion je te ferais un retour si ça t’intéresse.

1 « J'aime »

Et bien écoute cela semble fonctionner sur mobile (je n’ai pas eu l’occasion de tester sur desktop).
Seule remarque, mais je n’ai pas l’impression que ce soit lié au code en lui-même, la fenêtre de sélection est très grande en hauteur et dépasse de mon écran de smartphone :slight_smile:


Edit : sur desktop ça fonctionne aussi :partying_face: !
2024-04-29 10_09_11-Window

2 « J'aime »

Mise à jour après plus de tets : sur desktop en fait ça marche pas :clown_face: .
Quand je sélectionne les valeurs date et heure souhaiter, elles ne s’enregistrent pas dans la commande info associée.
Et quand en parallèle je change les valeurs sur mobile, j’ai des erreurs inconnues qui apparaissent en direct sur desktop:

2024-04-29 11_41_24-Window

Sur le desktop ou en mode plan ?

Je clarifie :

  • sur mon smartphone c’est ok que ce soit en affichage mobile ou desktop
  • sur pc c’est KO que ce soit sur le dashboard ou sur un design (c’est ça que tu appelles mode plan?)

Encore quelques précisions : sur desktop la sélection fonctionne si je tape Entrée après avoir sélectionné une date/heure. J’imagine que ça ressemble le bouton Valider qui n’existe pas sur desktop ?