Ce Forum passera en lecture seule en janvier 2020
Image
Merci de vous rendre sur https://community.jeedom.com maintenant pour vos prochains postes ;)

[supprimé] bouton couleur selon etat

Réservé à l'utilisation et la création de widgets dans JEEDOM
alexpumasage
Timide
Messages : 7
Inscription : 23 janv. 2019, 18:32

Re: [widget] bouton couleur selon etat

Message par alexpumasage » 23 janv. 2019, 20:19

Oui ! Merci beaucoup.

Je ne savais pas qu'on pouvait regrouper 2 infos !

Maintenant la couleur de la température change en fonction de l'état du radiateur.

Merci beaucoup !
Pièces jointes
Chauffage éteint.JPG
Chauffage éteint.JPG (63.67 Kio) Consulté 593 fois
Chauffage allumé.JPG
Chauffage allumé.JPG (64.78 Kio) Consulté 593 fois

Roger
Timide
Messages : 213
Inscription : 16 déc. 2015, 18:23
Localisation : Marrakech Maroc
Contact :

Re: [widget] bouton couleur selon etat

Message par Roger » 17 févr. 2019, 23:32

Bonjour,
Voilà j'ai installé le widget "bouton couleur selon état" mais au moment de le sélectionner pour faire un lien, j'ai la roue qui tourne a en user l'écran
seule l'extinction du programme la stoppe
Je ne vois pas mon erreur
je ne dispose que d'un contacteur en test sur ma machine
Sur la gauche de l'écran j'ai la liste des widgets et les bleus (Binary) n'ont aucun problème d'attribution
Idée??
Merci de vos conseils
Roger

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

Re: [widget] bouton couleur selon etat

Message par winhex » 18 févr. 2019, 02:35

Bonjour le soucis est abordé la
Utilise l'autre façon d'assigner un widget
viewtopic.php?f=29&t=41594#p680765
Je met cette info dans le descriptif

Avatar de l’utilisateur
Salvialf
Helper
Messages : 1334
Inscription : 24 févr. 2018, 09:37
Contact :

Re: [supprimé] bouton couleur selon etat

Message par Salvialf » 03 mars 2019, 20:00

winhex a écrit :
21 déc. 2018, 22:16
edit
1 vote avec 1/5
j'abdique, je le met en privé pour les membres actif
Screenshot_20190302-231148_Chrome.jpg

inutile de lire la suite
N'importe quoi ! Je l'utilise sur 15 commandes ce widget il est parfait !

Par contre je viens de me rendre compte que je ne l'avais pas téléchargé sur le market et que j'utilise toujours celui créé et personnalisé avec le code du début.

C'est toujours qqchose dans cette idée où il a évolué depuis ?:

Code : Tout sélectionner

<span class="cmd reportModeHidden cmd-widget" style="display: inline !important;margin-right: 2px;" data-type="action" data-subtype="other" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#">
    <a id="cmdButton#id#" class="btn btn-sm btn-#id#-off action cmdName tooltips" title="#name#" style="margin-top: 2px;justify-content: center;">#name_display#</a>
<style>
.btn.btn-sm.btn-#id#-off{
  color: white!important;
  background-color: #cmdColor#!important;
  border: solid 1px white!important;

}
.btn.btn-sm.btn-#id#-on{
  color: #cmdColor#!important;
  background-color: white!important;
  border: solid 1px #cmdColor#!important;
  border-radius: 25px;
}
</style>
    <script>
jeedom.cmd.update['#id#'] = function(_options){
			jeedom.cmd.byId({ 
            id: #id#,
				success:  function(resulat) {    
					valeur#id#=(resulat.configuration.value);              
                    if (_options.display_value == valeur#id#) {
							$('#cmdButton#id#').removeClass("btn-#id#-off").addClass("btn-#id#-on");
					} else  {
							$('#cmdButton#id#').removeClass("btn-#id#-on").addClass("btn-#id#-off");
					}
				}
			});        
        }
        jeedom.cmd.update['#id#']({display_value:'#state#'});
              $('.cmd[data-cmd_uid=#uid#]:last .action').off('click').on('click', function () {
            jeedom.cmd.execute({id: '#id#'});
        });
        if ($('.cmd[data-cmd_uid=#uid#]:last').prev().data('subtype') != undefined && $('.cmd[data-cmd_id=#id#]:last').prev().data('subtype') != 'other'
                && $('.cmd[data-cmd_uid=#uid#]:last').prev().css('display') != 'block') {
            $('.cmd[data-cmd_uid=#uid#]:last').prepend('<br/>');
        }
    </script>
    </span>
D'ailleurs j'en profite car si je venais là à l'origine c'est parce que je ne parviens pas à afficher la valeur/l'état d'une autre commande dans un widget. J'ai vu que tu avais indiqué des topics à plusieurs personnes sur le forum malheureusement je ne m'en sors pas surement un gros problème de syntaxe.

En gros j'ai ce widget qui m'affiche une icône selon l'état 1 ou 0 de la commande + le valuedate et le displayduration sur la droite. Ok
Sauf que j'aimerai bien avoir une date plus sympa genre: "Vendredi 1 mars 2019 à 21:20" par exemple.
J'ai ajouté une fonction au fichier user.function.class.php pour formater la date en français et je la récupère dans une commande info/autre (n°1810).

Code : Tout sélectionner

<div style="min-width:95px;min-height:100%;" class="cmd #history# tooltips cmd-widget" data-type="info" data-subtype="binary" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" title="#collectDate#">
	<center>
    <span class="cmdName" style="padding-top:3px;font-family:system-ui;font-weight:bold;font-size:14px;#hideCmdName#">#name_display#</span>
	<div style="width:50%;padding-top:5px;padding-left:20px;float:left;" class="iconCmd#uid#"></div>
    <div style="font-size:0.9em;font-weight:bold;padding-top:13px;padding-bottom:5px;margin-left:50%;" class="stateCmd"></div>
    <span class="timeCmd#uid# timeCmd label" style="background-color:#cmdColor#!important;"></span>
	</center>
	
	<script>
		jeedom.cmd.update['#id#'] = function(_options){
    
	var valueState	= "off";
          	
        if (parseInt(_options.display_value) == 1) {
			valueState = "on";
		} else if (parseInt(_options.display_value) == 0) {
			valueState = "off";
		} else {
			valueState = "wrn";
		}
		
	var iconPath = "plugins/widget/core/template/dashboard/cmd.info.binary.IconInfo_Perso/#name#_" + valueState + ".png";
	var valueTaille = is_numeric('#taille#') ? parseFloat('#taille#'):90;
	
        $.get(iconPath)
    	.done(function() { 
        $('.iconCmd#uid#').empty().append('<img src="'+ iconPath +'" /height='+ valueTaille +'px width='+ valueTaille +'px>');
    	})
    	.fail(function() { 
        $('.iconCmd#uid#').empty().append('<img src="plugins/widget/core/template/dashboard/cmd.info.binary.IconInfo_Perso/defaut_'+ valueState +'.png" /height='+ valueTaille +'px width='+ valueTaille +'px>');
    	})   
      
        jeedom.cmd.displayDuration(_options.valueDate, $('.cmd[data-cmd_id=#id#] .timeCmd'));
      if (_options.display_value == '1') {
      $('.stateCmd').empty().text('Présent depuis '+_options.valueDate);
     }else {
      $('.stateCmd').empty().text('Absent depuis '+_options.valueDate);
     }
        
        $('.cmd[data-cmd_id=#id#]').attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate);
      	}
      	jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
	</script>
</div>
A la fin du code, à la place du "$('.stateCmd').empty().text('Présent depuis '+_options.valueDate);" je voudrais idéalement "$('.stateCmd').empty().text('Présent depuis 'VALEURCMD#1810#);"...?! C'est possible ?

Désolé si j'abuse @winhex :oops: et merci d'avance
VM Jeedom 3.2.16 sous Proxmox 5.4 sur NUC5i5RYH (Debian 9.9)
Helper Officiel Jeedom
Widgets développés
Téléchargement d'icônes domotique (Topic Forum)

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

Re: [supprimé] bouton couleur selon etat

Message par winhex » 03 mars 2019, 21:27

C'est casi identique

Regarde le sujet design avec iframe
Je prends le retour d'un option_valuedate widget et le transforme en date via HTML
Pour un retour a ma sauce
Je le remet là en version avec des variable en paramètre
mais la seul la 1er partie du script t'interesse
<div style="width:90px;min-height:62px;" class="cmd #history# tooltips cmd-widget" data-type="info" data-subtype="binary" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#">
<center>
<div style="font-weight: bold;font-size : 12px;#hideCmdName#">#name_display#</div>
<span style="padding : 3px;border-radius: 4px;font-size: #size#;font-weight: bold;margin-top:0px;position:relative;top:1px;" class="iconCmd"></span><br />
<span class="test"></span>
</center>
<script>

jeedom.cmd.update['#id#'] = function(_options){
$('.cmd[data-cmd_id=#id#]').attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate)
var date = new Date("#valueDate#");
// var format = $.datepicker.formatDate('dd/mm D', date); // mer.
var format = $.datepicker.formatDate('dd/mm DD', date); // mercredi
var time = date.getHours()+"h"+date.getMinutes();
$('.cmd[data-cmd_id=#id#] .test').text(time+' '+format);

$('.cmd[data-cmd_id=#id#]').attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate)
if (_options.display_value == '1') {
$('.cmd[data-cmd_id=#id#] .iconCmd').empty().append('<i class="icon #icon-on#"></i>').css('color', '#color-off#');
}else {
$('.cmd[data-cmd_id=#id#] .iconCmd').empty().append('<i class="icon #icon-off#"></i>').css('color', '#color-on#');
}
}
jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
</script>
</div>
Perso
J'utilise beaucoup les actions en info
(Évidemment pas d'historique via cette méthode)
je crée un valudate custom sur l'état en info supplémentaire
Et Je le rends clickable qui mène a l'historique de l'état


Sinon il te faut en valeur mettre 2 info
Que tu sépares avec une virgule
Ton script concasse les 2 infos
Regarde le rond jen jaune c'est état avec 2 info
viewtopic.php?f=29&t=41964&hilit=plusie ... 40#p689041

Puisqu'on est dans le HS et puisqu'il n'ira pas sur le market
Reproduit une info binaire 2 action on/off valeur 1 et 0 (du classic)
Et pour les 2 action colles ça ou crée un widget (brut de pommes)

Code : Tout sélectionner

<div style="width:90px;min-height:80px;" class="cmd tooltips cmd-widget cursor" data-type="action" data-subtype="other" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#">
    <center>
        <div style="font-weight: bold;font-size : 12px;#hideCmdName#">#valueName#</div>
        	<div class="circle-main#id#">
        <div style="font-size: 2.5em;font-weight: bold;margin-top: -15px;" class="iconCmd state circle-middle#id#"></div>
        <div class="circle-outer#id#"></div>
</div>
          </center>
    <script>

        jeedom.cmd.update['#id#'] = function(_options){
            if (_options.display_value == '1' || _options.display_value == 1 || _options.display_value == '99' || _options.display_value == 99 || _options.display_value == 'on') {
                if (jeedom.cmd.normalizeName('#name#') == 'on') {
                    $('.cmd[data-cmd_id=#id#]').hide();
                }else{
                    $('.cmd[data-cmd_id=#id#]').show();

 //                   $('.cmd[data-cmd_id=#id#] .state').empty().append('<span style="font-size: 20px;" class="fa-stack fa-4x"><i class="fa fa-circle fa-stack-2x couleur-fond"></i><i class="fa fa-circle-thin fa-stack-2x couleur-bord-On"></i><i class="couleur-icon-On fa fa-power-off fa-stack-1x"></i></span>'); // on
                    $('.cmd[data-cmd_id=#id#] .state').empty().append('<i style="font-size: 20px;" class="couleur-icon-On fa fa-power-off"></i>'); // on
$('.cmd[data-cmd_id=#id#] .state').css('--background', '-webkit-linear-gradient(#B2FF59, #00C853)');
//$('.cmd[data-cmd_id=#id#] .circle-outer').css('--border-color', 'green');  
$(':root').css('--border-color#id#', '#B2FF59'); 
    //              $(':root').css('--border-color', '-webkit-linear-gradient(#fff, blue)'); 
                  //		$('.cmd[data-cmd_id=#id#] .state').empty().append('<img src="plugins/widget/core/template/dashboard/cmd.info.binary.frigo/refrigerator_close.png" height=120 />');
// $('.cmd[data-cmd_id=#id#] .state').empty().append('<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAABCUExURQAAAP///z3N/z3N/z3N/z3N/2fX/z3N/z3N/z3N/////////////////////2XX/z3N/////z3N/z3N/z3N/////xBVRCIAAAAUdFJOUwBAMq4nSAfzzpW8aNucLhVmh11ef5zGXAAAAd5JREFUWMPtV9uSgyAMrReuIt7K///qVpCVQBQ6dHb2oXmoU0wOyUkC8fH4yn+WfhacPV/CuJj7d61bYW1PYaJ9w5zwJyKclO6OmluIEi+ogK7DUATNUsfPqLfWqtN2OxnhGTpbr9hFAZPOv7kNg3hzZJ/eQ5Ds/uxChbCMD/0R5nSlMB0EXfBA3evuhmjqwuC4istfd8+yQxDXBPBMog83MRrsGzblCmWyTPKrDBaU+5UixwmQZkRp4DgDSX4aY4xGs91iKUgd2AEa1IU4ESwNbBj1AaDHIWGBIW6BNSpftgfA60fSeDcY7px4tdsHAEbG8c4pBWvov7GmDsD+CaLYUhJ45BR19p7E/WEoDJinHFLowBJkYQEu0JRFm9qIgSkAmCALsbpbCSG9vvaFZHMCHc4BuBJe1GKfYwHAEwPwAgHSEGISlTEKKIAFhMQ4jWPURBq4hKQxLqQmqj0JmmpNCykpZXUUgpO9DNRtKSfNZGtPuii0NLCrkWZK29nWv5HLsFjzsBWwdkYOFIfgZcgdKMiRptWvudLZIw09VJtxx1BjU3Co1h/r1RdL/dVWfbnWX+/VA0b9iFM/ZJ0IN2MeKR80Vz9oruWDZv2oWz9sf2Dc/8AHxwc+eb7yp/IDlLBGEWfl2hIAAAAASUVORK5CYII=" height=150 />');
                }
            } else {
                if (jeedom.cmd.normalizeName('#name#') == 'off') {
                    $('.cmd[data-cmd_id=#id#]').hide();
                }else{
                    $('.cmd[data-cmd_id=#id#]').show();
//                     $('.cmd[data-cmd_id=#id#] .state').empty().append('<span style="font-size: 20px;" class="fa-stack fa-4x"><i class="fa fa-circle fa-stack-2x couleur-fond"></i><i class="fa fa-circle-thin fa-stack-2x couleur-bord-Off"></i><i class="icon couleur-icon-Off fa fa-power-off fa-stack-1x"></i></span>'); // off                 
                    $('.cmd[data-cmd_id=#id#] .state').empty().append('<i style="font-size: 20px;" class="couleur-icon-Off fa fa-power-off"></i>'); // off
$('.cmd[data-cmd_id=#id#] .state').css('--background', '-webkit-linear-gradient(#d53a9d, #743ad5)');
//$('.cmd[data-cmd_id=#id#] .circle-outer').css('--border-color', 'gray');  
$(':root').css('--border-color#id#', '#d53a9d'); 
     //             $('.cmd[data-cmd_id=#id#] .state').empty().append('<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAzUExURQAAAAAAAP///////wAAAAAAAAAAAAAAAAAAAAAAAP///////////////////////////zuW2yAAAAAQdFJOUwADQLwvIBA2JClo25wthw0VEwp8AAAB70lEQVRYw+1X25aDIAwUQSgCyv9/7SYge7hE0dKzZx+ah2qRTCZDwDhNX/vPJhctVDChF/nYW6Oj0MEEAuknGBKj6ldmGtnIJ+7JD+24vwnB9OEemUcR0ojS7EZ4HULDdZFhOgM54V8Y7pKQMbxoNANVRSRxhcDA/7VAHEpygNDw8BIh+p9O6Tz+nSDOhGJMXCKw6H8lNNMRgZ4COaL/tcqIABPpBED/c/6JA2QBKlNJqPCkWygsxFEnBO7UqlQ0BSRACMC9JYQkKCABAnf23s+3piKsbglQABNui4YsocBq3QHg7NqqQNHKR3YOvgcA/PC9jFbnsKiaFfpnAJ5X+aqlkUDkQ6sPrhEg/MmyWNoVw/rKSe3RP4mIF78XIghRa1hUIcbcslXYCgqsUWyqR/gRMQHspQp9gDTfwY1LiA8BYglvZgtX+y5AslsAmYjGe1NMKAYIEetltCn3w1xBiVjGupDmqvZ4samIQmpK2RyFEA3LwFyWcrOZQu3xmIXjvtzV1IHQbOdQ/55v6xbc861AbWfiQIkIydbegUKcU878uhvXP/2oQ3W2iGHs3K6Y+vyxPvxiGX+1Db9cx1/v3QZj6jQY4y1OmvJ+kxXatJE2L2s0Rd1oinuN5nirO95sRyWG2v0PfHB84JPna39qPwYvJAReMtgwAAAAAElFTkSuQmCC" height=50 />');                  
                }
            }
        }
        jeedom.cmd.update['#id#']({display_value:'#state#'});
        $('.cmd[data-cmd_uid=#uid#] .iconCmd').off().on('click', function () {
          			navigator.vibrate([175,75,175,110]);
            jeedom.cmd.execute({id: '#id#'});
   
		$("<div class='circle-pulse#id#'></div>")
			.appendTo(".circle-main#id#")
			.delay(1100)
			.queue(function() {
				$(this).remove();
			});   
        }); 
    </script>
    <style>
                 :root{
--background: -webkit-linear-gradient(#fff, green);
// --border-color:#cmdColor#;
--border-color#id#:red;                   
--border: 2px solid white;
} 
       .couleur-icon-On {
        top:0px;
  //    font-size: 18px;
         background: var(--background);
 //     background: -webkit-linear-gradient(#fff, green);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
} 
      .couleur-icon-Off {
        top:0px;
   //   font-size: 5px;
//    color: #ff3300;
        background: var(--background);
//      background: -webkit-linear-gradient(#fff, red);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
} 
      
      .circle-main#id# {
//	position: relative;
//	margin: calc(75px + 2vw + 2vh) auto 0 auto;
//	width: 88px;
//	height: 88px;
	border-radius: 100px;
	overflow: hidden;
	cursor: pointer;
}
.circle-middle#id# {
	position: absolute;
	top: 30%;
	left: 50%;
	width: 22px;
	height: 22px;
	margin-left: -11px;
	margin-top: -11px;
	border-radius: 22px;
//	background: #000;
	z-index: 50;
	will-change: transform;
}

    .circle-outer#id# {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 44px;
	height: 44px;
	margin-top: -22px;
	margin-left: -22px;
	z-index: 49;
	background: none;
//	border: 3px solid gray;
	border: 3px solid var(--border-color#id#);
	border-radius: 44px;
	transform: scale(0.78);
	-webkit-transform: scale(0.78);
	-moz-transform: scale(0.78);
	-o-transform: scale(0.78);
}  
      .circle-pulse#id# {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 44px;
	height: 44px;
	margin-top: -22px;
	margin-left: -22px;
	z-index: 48;
	background: none;
//	border: 2px solid red;
 border: 2px solid var(--border-color#id#);
	border-radius: 44px;
	opacity: 0;
	transform: scale(0.95);
	-webkit-transform: scale(0.95);
	-moz-transform: scale(0.95);
	-o-transform: scale(0.95);
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	animation-name: pulse;
	-webkit-animation-name: pulse;
	-moz-animation-name: pulse;
	-o-animation-name: pulse;
	animation-duration: 1.1s;
	-webkit-animation-duration: 1.1s;
	-moz-animation-duration: 1.1s;
	-o-animation-duration: 1.1s;
	animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
	-webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
	-moz-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
	-o-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
	animation-iteration-count: 1;
	-webkit-animation-iteration-count: 1;
	-moz-animation-iteration-count: 1;
	-o-animation-iteration-count: 1;
	will-change: opacity, transform;
}
 .circle-middle#id#,
.circle-outer#id# {
	transition: transform 340ms cubic-bezier(0.405, -0.195, 0.165, 1.65),
		opacity 340ms ease-out;
	-webkit-transition: transform 340ms cubic-bezier(0.405, -0.195, 0.165, 1.65),
		opacity 340ms ease-out;
	-moz-transition: transform 340ms cubic-bezier(0.405, -0.195, 0.165, 1.65),
		opacity 340ms ease-out;
	-o-transition: transform 340ms cubic-bezier(0.405, -0.195, 0.165, 1.65),
		opacity 340ms ease-out;
}
.circle-main#id#:hover .circle-outer#id# {
	transform: scale(0.83);
	-webkit-transform: scale(0.83);
	-moz-transform: scale(0.83);
	-o-transform: scale(0.83);
	opacity: 1;
}
.circle-main#id#:active .circle-outer#id# {
	transform: scale(1.05);
	-webkit-transform: scale(1.05);
	-moz-transform: scale(1.05);
	-o-transform: scale(1.05);
}     
      @keyframes pulse {
	0% {
		opacity: 0;
		transform: scale(0.95);
		-webkit-transform: scale(0.95);
		-moz-transform: scale(0.95);
		-o-transform: scale(0.95);
	}
	1% {
		opacity: 1;
	}
	80% {
		opacity: 0;
	}
	90% {
		opacity: 0;
		transform: scale(2.1);
		-webkit-transform: scale(2.1);
		-moz-transform: scale(2.1);
		-o-transform: scale(2.1);
	}
	100% {
		opacity: 0;
		transform: scale(2.1);
		-webkit-transform: scale(2.1);
		-moz-transform: scale(2.1);
		-o-transform: scale(2.1);
	}
}
-webkit-@keyframes pulse#id# {
	0% {
		opacity: 0;
		transform: scale(0.95);
		-webkit-transform: scale(0.95);
		-moz-transform: scale(0.95);
		-o-transform: scale(0.95);
	}
	1% {
		opacity: 1;
	}
	80% {
		opacity: 0;
	}
	90% {
		opacity: 0;
		transform: scale(2.1);
		-webkit-transform: scale(2.1);
		-moz-transform: scale(2.1);
		-o-transform: scale(2.1);
	}
	100% {
		opacity: 0;
		transform: scale(2.1);
		-webkit-transform: scale(2.1);
		-moz-transform: scale(2.1);
		-o-transform: scale(2.1);
	}
}
-moz-@keyframes pulse#id# {
	0% {
		opacity: 0;
		transform: scale(0.95);
		-webkit-transform: scale(0.95);
		-moz-transform: scale(0.95);
		-o-transform: scale(0.95);
	}
	1% {
		opacity: 1;
	}
	80% {
		opacity: 0;
	}
	90% {
		opacity: 0;
		transform: scale(2.1);
		-webkit-transform: scale(2.1);
		-moz-transform: scale(2.1);
		-o-transform: scale(2.1);
	}
	100% {
		opacity: 0;
		transform: scale(2.1);
		-webkit-transform: scale(2.1);
		-moz-transform: scale(2.1);
		-o-transform: scale(2.1);
	}
}
-o-@keyframes pulse#id# {
	0% {
		opacity: 0;
		transform: scale(0.95);
		-webkit-transform: scale(0.95);
		-moz-transform: scale(0.95);
		-o-transform: scale(0.95);
	}
	1% {
		opacity: 1;
	}
	80% {
		opacity: 0;
	}
	90% {
		opacity: 0;
		transform: scale(2.1);
		-webkit-transform: scale(2.1);
		-moz-transform: scale(2.1);
		-o-transform: scale(2.1);
	}
	100% {
		opacity: 0;
		transform: scale(2.1);
		-webkit-transform: scale(2.1);
		-moz-transform: scale(2.1);
		-o-transform: scale(2.1);
	}
      </style>
</div>

C'est un bouton personnalisé on/off /
animations (effet goute)
couleur icone,cercle et goute
et 2 vibrations sur tel/tab
Pièces jointes
Screenshot_2019-03-03-21-10-41-864-1.png
Screenshot_2019-03-03-21-10-41-864-1.png (45.26 Kio) Consulté 492 fois

Avatar de l’utilisateur
Salvialf
Helper
Messages : 1334
Inscription : 24 févr. 2018, 09:37
Contact :

Re: [supprimé] bouton couleur selon etat

Message par Salvialf » 03 mars 2019, 21:56

:D Merci tu m'as gâté j'ai de la lecture pour demain ! :mrgreen:

Le coup du formatage de la date en html ça a l'air plutôt simple et efficace. J'espère que je vais réussir à m'en sortir avec ça.

Sinon le 2ème lien avec la consigne de chauffage: j'ai déjà épluché le post dans tous les sens sans parvenir à quoi que ce soit. Je vais m'y replonger.
Je suis quand même étonné qu'il n'y ait pas moyen de récupérer plus facilement la valeur d'une autre commande par son #id# pour l'afficher dans un widget.

Il a l'air sympa aussi ton bouton on/off ! Je vais regarder en détail demain car le code est assez épais...

J'ai voulu ajouter une note 5* au widget "bouton_couleur" mais impossible car il est en privé. Tu devrais le laisser sur le market, il doit beaucoup servir ce widget quand même... ce serait dommage que plus personne n'y ait accès à cause d'un abruti qui n'a sûrement même pas été voir le topic sur le forum pour être ne mesure de l'utiliser correctement...

Encore une fois merci @winhex je vais enfin pouvoir centraliser toutes les données de présence dans le même widget info avec une date lisible en français... Enfin si j'y arrive bien sur !
VM Jeedom 3.2.16 sous Proxmox 5.4 sur NUC5i5RYH (Debian 9.9)
Helper Officiel Jeedom
Widgets développés
Téléchargement d'icônes domotique (Topic Forum)

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

Re: [supprimé] bouton couleur selon etat

Message par winhex » 03 mars 2019, 22:07

Je préfère laissé comme ça
Un débutant ne comprends pas
Clic ça marche point
Si faut faire en plus ça plus ca (trop compliqués)
Donc c'est pas faisable ou faut se cassé la tête
(Il y a tous dans le sujet pour le faire fonctionné)

Surtout que dans le plug mode je donne une autre methode
viewtopic.php?f=176&t=42405&p=713289#p702556


Il y a jeedom et le widget
Tu pourrais crée un HTML sur site externe (certains l'ont fait)
Pour récupérer l'info
Mais le soucis va être l'actualisation
Donc 2 info en valeur font que le widget s'actualise pour 1 des 2 infos

J'ai simplement repris la façon de faire du widget météo en simplifiant
Le code du widget
viewtopic.php?f=29&t=41964&hilit=plusie ... 20#p686552
Cette partie
var state = _options.display_value;
Mets en variable state les 2 info
var stateListe = state.split(",");
Séparé les via ,
var temp0 = stateListe[0].replace("\"","");
Var temp0 la 1er info auquel tu enleves \"
var temp1 = parseFloat(stateListe[1]);
Var temp1 la 2 ème info en numerique
$('.cmd[data-cmd_uid=#uid#] .Mode').empty().append(temp0);
Dans mode met temp0
$('.cmd[data-cmd_uid=#uid#] .Temp').empty().append(temp1.toFixed(1) + '°C');
Dans temp mets temp1 fixe 1 décimal et ajoute °C

Pour le bouton
Seul 4 lignes t'intéresses pour la couleur
2 x fois ses 2 lignes pour le on et off
$('.cmd[data-cmd_id=#id#] .state').css('--background', '-webkit-linear-gradient(#d53a9d, #743ad5)');
Couleur icone
$(':root').css('--border-color#id#', '#B2FF59');
Couleur cercle et annimation goute

Si tu veux enlevé la vibration tu dois supprimer ou commenté (// devant) ça
navigator.vibrate([175,75,175,110]);

Moi non plus je ne maîtrise pas tous du code j'ai adapter, personnalisé cette source
https://codepen.io/tommysmall92/pen/mGbNZY
Dernière édition par winhex le 24 mars 2019, 22:10, édité 1 fois.

Avatar de l’utilisateur
Salvialf
Helper
Messages : 1334
Inscription : 24 févr. 2018, 09:37
Contact :

Re: [supprimé] bouton couleur selon etat

Message par Salvialf » 04 mars 2019, 21:46

winhex a écrit :
03 mars 2019, 21:27
Regarde le sujet design avec iframe
Je prends le retour d'un option_valuedate widget et le transforme en date via HTML
Pour un retour a ma sauce
Je le remet là en version avec des variable en paramètre
mais la seul la 1er partie du script t'interesse
Comme d'habitude, @superwinhex à la rescousse ! :) Merci

Je m'en suis très bien sorti avec tes conseils en formatant la date en html. Bien plus simple que ce que je voulais faire en plus !

Je suis assez content du résultat, avec une seule info binaire j'affiche toutes les infos de présence:
PresenceData.jpg
PresenceData.jpg (33.32 Kio) Consulté 442 fois

Je commence à bien appréhender les subtilités des widgets même si j'ai encore des milliards de questions dont je te ferais grâce... En fait non j'en ai une dont je cherche la réponse depuis un moment sans succès: Tu peux me dire quelle est la différence entre les #id# et les #uid# ? Sûrement une question de noob mais j'assume car selon que j'affecte l'un ou l'autre j'obtiens le même résultat :roll:

Prochaine étape: Essayer de faire un widget de thermostat !?!

Merci encore une fois pour tes précieux conseils @winhex
VM Jeedom 3.2.16 sous Proxmox 5.4 sur NUC5i5RYH (Debian 9.9)
Helper Officiel Jeedom
Widgets développés
Téléchargement d'icônes domotique (Topic Forum)

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

Re: [supprimé] bouton couleur selon etat

Message par winhex » 04 mars 2019, 22:25

!= #id# et #uid# ?
1er ligne d'un widget

Code : Tout sélectionner

data-cmd_id="#id#" data-cmd_uid="#uid#" 
clic sur f12
icone de droite mets toi sur un widget
id.png
id.png (477.44 Kio) Consulté 435 fois
exemple id
data-cmd_id="3510"
exemple uid
data-cmd_uid="cmd3510__716082281__"

aprés le besoin réel j'en sais rien

guims78
Actif
Messages : 509
Inscription : 30 sept. 2017, 13:00

Re: [supprimé] bouton couleur selon etat

Message par guims78 » 30 avr. 2019, 13:57

petit up.
J'essaye d'appliquer le code proposé par Winhex sur un thermostat sur les différents modes créés, mais le bouton actif ne change pas de couleur et je ne sais pas par ou chercher !
Si qqun peut orienter mes recherche .

le code :

Code : Tout sélectionner

<span class="cmd reportModeHidden cmd-widget" style="display: inline !important;margin-right: 1px;" data-type="action" data-subtype="other" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#">
    <a id="cmdButton#id#" class="btn btn-sm btn-#id#-off action cmdName tooltips" title="#name#" style="margin-top: 1px;justify-content: center;">#name_display#</a>

<style>

.btn.btn-sm.btn-#id#-off{
    color: gainsboro!important;
   background-color: darkgray!important;
  border: solid 1px transparant!important;
  border-radius: 6px;
  width:65px;
  line-height:16px;
  font-size:13px;
}
.btn.btn-sm.btn-#id#-on{
color: mediumseagreen!important;
   background-color: dimgrey!important;
  border: solid 1px transparant!important;
  border-radius: 6px;
  width:65px;
  line-height:16px;
  font-size:13px;
}

      </style>
    <script>

jeedom.cmd.update['#id#'] = function(_options){
			jeedom.cmd.byId({ 
            id: #id#,
				success:  function(resulat) {    
					valeur#id#=(resulat.configuration.value);              
                    if (_options.display_value == valeur#id#) {
							$('#cmdButton#id#').removeClass("btn-#id#-off").addClass("btn-#id#-on");
					} else  {
							$('#cmdButton#id#').removeClass("btn-#id#-on").addClass("btn-#id#-off");
					}
				}
			});        
        }
        jeedom.cmd.update['#id#']({display_value:'#state#'});
              $('.cmd[data-cmd_uid=#uid#]:last .action').off('click').on('click', function () {
            jeedom.cmd.execute({id: '#id#'});
        });
        if ($('.cmd[data-cmd_uid=#uid#]:last').prev().data('subtype') != undefined && $('.cmd[data-cmd_id=#id#]:last').prev().data('subtype') != 'other'
                && $('.cmd[data-cmd_uid=#uid#]:last').prev().css('display') != 'block') {
            $('.cmd[data-cmd_uid=#uid#]:last').prepend('<br/>');
        }
    </script>
    </span>




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

Re: [supprimé] bouton couleur selon etat

Message par winhex » 30 avr. 2019, 16:27

c'est un virtuel
amuse toi à recréé cela en test
viewtopic.php?f=29&t=41594#p678129
et ensuite appliqué le widget

une fois maîtrisé ton test
tu pourras le reproduire pour ton besoin

je ne sais pas si le comportement avec la nouvelle version de jeedom est identique.


si c est le plug mode la ç'est different une autre methode
j avais donné la solution avec un widget info

viewtopic.php?f=176&t=42405&hilit=plucin+mode

Répondre

Revenir vers « [Plugin officiel] Widgets »

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 1 invité