Page 1 sur 1

[Beta] thermomètreCss

Publié : 28 mars 2019, 22:37
par winhex
pour test avant mise sur le market
TempCss1.png
TempCss1.png (55.97 Kio) Consulté 1098 fois
TempCss2.png
TempCss2.png (53.8 Kio) Consulté 1098 fois

Code : Tout sélectionner

<div style="min-width:90px;min-height:60px;margin-right: 5px;margin-left: 5px;padding:0px !important;" class="cmd #history# container-fluid tooltips cmd cmd-widget" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#">
	<center>
		<div style="font-weight: bold;font-size : 12px;#hideCmdName#">#name_display#</div>

     <div class="centered">
  <div class="tg-thermometer small" style="height: 120px;">
    <div class="draw-a"></div>
    <div class="draw-b"></div>
    <div class="meter">
      <div class="statistics">
        <div class="percent percent-a"></div>

        <div class="percent percent-c"></div>

        <div class="percent percent-e"></div>
      </div>
      <div class="mercury">
        <div class="percent-current"></div>
        <div class="mask">
          <div class="bg-color"></div>
        </div>
      </div>
    </div>
  </div>
</div>
          
  <script>



		jeedom.cmd.update['#id#'] = function(_options){
var value = ($.isNumeric(_options.display_value)) ? parseFloat(_options.display_value) : 0.0;
var minValue = ($.isNumeric('#minValue#')) ? parseFloat('#minValue#') : 0.0;
var maxValue = ($.isNumeric('#maxValue#')) ? parseFloat('#maxValue#') : 0.0;
var moyValue = (maxValue-minValue)/2;
          
          var corrNegative = 0;
		if(minValue < 0){
			var  corrNegative = minValue*-1;
			var moyValue = Math.floor((minValue+maxValue)/2);            
                        }
var  maxvaleur = maxValue + corrNegative;
var  valeurState = value + corrNegative;

       
   var jauge = (valeurState*100/maxvaleur);         

          $('.cmd[data-cmd_id=#id#]').attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate)
        	$('.cmd[data-cmd_id=#id#] .state').empty().append(_options.display_value);   
      	$('.cmd[data-cmd_id=#id#] .percent-current').empty().append(value+'#unite#');  

       	$('.cmd[data-cmd_id=#id#] .mercury').css('height', jauge+'%');
        $('.cmd[data-cmd_id=#id#] .percent-a').text(maxValue+'#unite#');  
		$('.cmd[data-cmd_id=#id#] .percent-e').text(minValue+'#unite#');
		$('.cmd[data-cmd_id=#id#] .percent-c').text(moyValue+'#unite#');
        }
		jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
    
    </script>
  <style>
      /* commentaire [data-cmd_id="#id#"]> */

[data-cmd_id="#id#"] .tg-thermometer {
  width: 100px;
  position: relative;
}

[data-cmd_id="#id#"] .tg-thermometer.small .meter {
  width: 6px;
}
[data-cmd_id="#id#"] .tg-thermometer.small .meter .mask {
  width: 6px;
}
[data-cmd_id="#id#"] .tg-thermometer.small .meter .bg-color {
  height: calc(120px - 57px);
}
[data-cmd_id="#id#"] .tg-thermometer.small .draw-a {
  width: 20px;
}
[data-cmd_id="#id#"] .tg-thermometer.small .draw-a:after {
  width: 32px;
  height: 32px;
  left: -6px;
  bottom: -10px;
}
[data-cmd_id="#id#"] .tg-thermometer.small .draw-b:before {
  width: 6px;
}
[data-cmd_id="#id#"] .tg-thermometer.small .draw-b:after {
  width: 14px;
  height: 14px;
}
[data-cmd_id="#id#"] .tg-thermometer.small .percent-b, .tg-thermometer.small .percent-d {
  display: none;
}

[data-cmd_id="#id#"] .tg-thermometer .statistics .percent {
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  text-align: right;
  position: absolute;
  width: 40px;
}
[data-cmd_id="#id#"] .tg-thermometer .statistics .percent.percent-a {
  bottom: calc(100% - 2px);
}

[data-cmd_id="#id#"] .tg-thermometer .statistics .percent.percent-c {
  bottom: calc(50% - 2px);
}

[data-cmd_id="#id#"] .tg-thermometer .statistics .percent.percent-e {
  bottom: calc(0% - 2px);
}
[data-cmd_id="#id#"] .tg-thermometer .meter {
  width: 10px;
  margin: auto;
  left: 0;
  right: 0;
  height: calc(100% - 50px);
  top: 12px;
  position: absolute;
  background-color: #d6d6d6;
  border-radius: 10px 10px 0 0;
  z-index: 1;
}
[data-cmd_id="#id#"] .tg-thermometer .meter .mercury {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #F44336;
  border-radius: 10px 10px 0 0;
  background: linear-gradient(0deg, #f44336, #3f51b5);
  transition: all .5s ease-in-out;
  height: 0;
}
[data-cmd_id="#id#"] .tg-thermometer .meter .mask {
  position: absolute;
  bottom: 0;
  overflow: hidden;
  width: 10px;
  height: 100%;
  border-radius: 10px 10px 0 0;
}
[data-cmd_id="#id#"] .tg-thermometer .meter .bg-color {
  position: absolute;
  width: 10px;
  height: calc(200px - 57px);
  background: linear-gradient(#F44336, #8BC34A, #2196F3);
//   background: linear-gradient(#2196F3, #8BC34A, #F44336);
  bottom: 0;
}
[data-cmd_id="#id#"] .tg-thermometer .meter .percent-current {
  position: absolute;
  left: 0;
  top: 4px;
  transform: translateX(calc(-100% - 10px)) translateY(-60%);
  background-color: #fff;
  padding: 5px 10px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 3px 3px 6px rgba(0, 0, 0, 0.1);
  border-radius: 2px;
  font-weight: 500;
  font-size: 1.5em;
  color: #333;
}
[data-cmd_id="#id#"] .tg-thermometer .meter .percent-current:after {
  border-left: 8px solid white;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  content: "";
  position: absolute;
  right: 0;
  transform: translateX(calc(100% - 2px));
  top: 0;
  bottom: 0;
  margin: auto;
  width: 0;
  height: 0;
}
[data-cmd_id="#id#"] .tg-thermometer .meter .percent-current:before {
  border-left: 7px solid rgba(0, 0, 0, 0.2);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  content: "";
  position: absolute;
  right: 0;
  transform: translateX(calc(100% - 0px));
  top: 0;
  bottom: 0;
  margin: auto;
  width: 0;
  height: 0;
}
[data-cmd_id="#id#"] .tg-thermometer .draw-a {
  background-color: #fff;
  height: calc(100% - 20px);
  width: 30px;
  margin: auto;
  position: relative;
  border-radius: 20px 20px 0 0;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 1px 1px 5px rgba(0, 0, 0, 0.2);
}
[data-cmd_id="#id#"] .tg-thermometer .draw-a:before {
  width: 100%;
  bottom: 0px;
  left: 0;
  position: absolute;
  height: 50px;
  background-color: #fff;
  content: "";
  z-index: 1;
}
[data-cmd_id="#id#"] .tg-thermometer .draw-a:after {
  content: "";
  width: 50px;
  height: 50px;
  position: absolute;
  background-color: #fff;
  left: -10px;
  bottom: -20px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 1px 1px 5px rgba(0, 0, 0, 0.2);
}
[data-cmd_id="#id#"] .tg-thermometer .draw-b {
  position: absolute;
  width: 50px;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  height: 50px;
  z-index: 1;
}
[data-cmd_id="#id#"] .tg-thermometer .draw-b:after {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 24px;
  height: 24px;
  background-color: #2196F3;
  content: "";
  border-radius: 50%;
}
[data-cmd_id="#id#"] .tg-thermometer .draw-b:before {
  position: absolute;
  left: 0;
  right: 0;
  width: 10px;
  top: 0;
  margin: auto;
  height: 20px;
  background-color: #2196F3;
  content: "";
  border-radius: 10px 10px 0 0;
}
[data-cmd_id="#id#"] .centered {
/**  position: absolute !important; **/
   position: relative;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
//*  width: 300px;
//  height: 300px; **/
  width: 100%; height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
    font-size: 12px;

}

[data-cmd_id="#id#"] .tg-thermometer .statistics {
  position: absolute;
  left: 0;
  z-index: 1;
  font-size: 1em;
  top: 0;
  height: 100%;
  font-style: italic;
  font-weight: 500;
//  text-shadow: 1px 1px #fff;
} 

</style>

</div>
la source
https://codepen.io/interaminense/pen/RoKPOb

Re: [Beta] TempCss

Publié : 29 mars 2019, 09:29
par Salvialf
Hello @winhex,

Super ! Beau, sobre et efficace je l'adopte !

Il est venu remplacer mon ancien thermomètre qui n'était pas très beau:
TempCSS.jpg
TempCSS.jpg (11.42 Kio) Consulté 1072 fois
Installé sur dashboard = OK + Testé sur design avec redimensionnement de la taille du widget: impeccable.

Merci pour le taf et le partage.

@+

Re: [Beta] TempCss

Publié : 29 mars 2019, 10:29
par cadavor
Merci pour la création et le partage.

Re: [Beta] thermomètreCss

Publié : 29 mars 2019, 19:07
par Fabrice
Bonjour,

Il fonctionne ok en 3.3.19.
- et il est beau et fonctionnel !

Merci pour le travail.

Re: [Beta] thermomètreCss

Publié : 29 mars 2019, 20:23
par Salvialf
Bien vu! C'est pour ça que les écritures paraissent légèrement floues je pensais que c'était voulu.

Ps: j'aimais bien TempCSS comme nom ;)

Re: [Beta] thermomètreCss

Publié : 29 mars 2019, 20:55
par winhex
Moi aussi mais entre Temps et TempCss
ça porte à confusion

Je pensais que c'était un caractère effet blur mais finalement non, merci

edit :
finalement il y a de ça text-shadow
https://developer.mozilla.org/fr/docs/W ... ext-shadow

code corrigé

Re: [Beta] thermomètreCss

Publié : 01 avr. 2019, 04:51
par winhex
j'en suis là comparaison de l'evo
temperatureCss.png
temperatureCss.png (14.02 Kio) Consulté 963 fois
reste la personnalisation des couleurs

Code : Tout sélectionner

<div style="min-width:90px;min-height:60px;margin-right: 5px;margin-left: 5px;padding:0px !important;" class="cmd #history# container-fluid tooltips cmd cmd-widget" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#">
	<center>
		<div style="font-weight: bold;font-size : 12px;#hideCmdName#">#name_display#</div>

     <div class="centered">
  <div class="tg-thermometer small" style="height: 120px;">
    <div class="draw-a"></div>
    <div class="draw-b"></div>
    <div class="meter">
      <div class="statistics">
        <div class="percent percent-a"></div>

        <div class="percent percent-c"></div>

        <div class="percent percent-e"></div>
      </div>
      <div class="mercury">
        <div class="percent-current"></div>
        <div class="mask">
          <div class="bg-color"></div>
        </div>
      </div>
    </div>
  </div>
</div>

  <script>

		jeedom.cmd.update['#id#'] = function(_options){
var value = ($.isNumeric(_options.display_value)) ? parseFloat(_options.display_value) : 0.0;
   	var intNum = Math.floor(value);
	var decNum = Math.round((value - intNum) * 10);
          
var minValue = ($.isNumeric('#minValue#')) ? parseFloat('#minValue#') : 0.0;
var maxValue = ($.isNumeric('#maxValue#')) ? parseFloat('#maxValue#') : 0.0;
var moyValue = (maxValue+minValue)/2;
          
var corrNegative = 0;
		if(minValue < 0){
			var  corrNegative = minValue*-1;
			var moyValue = Math.floor((minValue+maxValue)/2);            
                        }
var  maxvaleur = maxValue + corrNegative;
var  valeurState = value + corrNegative;
       
   var jauge = Math.round( (_options.display_value - ('#minValue#')) * (100/('#maxValue#' - ('#minValue#'))) );
          $('.cmd[data-cmd_id=#id#]').attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate)
        	$('.cmd[data-cmd_id=#id#] .state').empty().append(_options.display_value);  
          
//      	$('.cmd[data-cmd_id=#id#] .percent-current').empty().append(value+'#unite#');  
      	$('.cmd[data-cmd_id=#id#] .percent-current').empty().append(intNum).append('<span class="decNumclass">.'+decNum+'</span><span class="uniteclass">#unite#</span>');  

       	$('.cmd[data-cmd_id=#id#] .mercury').css('height', jauge+'%');
        $('.cmd[data-cmd_id=#id#] .percent-a').text(maxValue+'#unite#');  
		$('.cmd[data-cmd_id=#id#] .percent-e').text(minValue+'#unite#');
		$('.cmd[data-cmd_id=#id#] .percent-c').text(moyValue+'#unite#');
        }
		jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
    
    </script>
  <style>
      /* commentaire  */
[data-cmd_id="#id#"] .decNumclass {
      font-size:12px;
  	color: #323232 ;
 // 	position: absolute;
  	top: 15px;
  	right: 10px;
  font-weight: 500;
  }

[data-cmd_id="#id#"] .uniteclass {
    font-size:12px;
  	color: gray ;
  	position: absolute;
   font-weight: 500;
  	top: 3px;
  	right: 6px;
  }
[data-cmd_id="#id#"] .tg-thermometer {
  width: 100px;
  position: relative;
}

[data-cmd_id="#id#"] .tg-thermometer.small .meter {
  width: 6px;
}
[data-cmd_id="#id#"] .tg-thermometer.small .meter .mask {
  width: 6px;
}
[data-cmd_id="#id#"] .tg-thermometer.small .meter .bg-color {
  height: calc(120px - 57px);
}
[data-cmd_id="#id#"] .tg-thermometer.small .draw-a {
  width: 20px;
}
[data-cmd_id="#id#"] .tg-thermometer.small .draw-a:after {
  width: 32px;
  height: 32px;
  left: -6px;
  bottom: -10px;
}
[data-cmd_id="#id#"] .tg-thermometer.small .draw-b:before {
  width: 6px;
}
[data-cmd_id="#id#"] .tg-thermometer.small .draw-b:after {
  width: 14px;
  height: 14px;
}
[data-cmd_id="#id#"] .tg-thermometer.small .percent-b, .tg-thermometer.small .percent-d {
  display: none;
}

[data-cmd_id="#id#"] .tg-thermometer .statistics .percent {
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  text-align: right;
  position: absolute;
  width: 40px;
}
[data-cmd_id="#id#"] .tg-thermometer .statistics .percent.percent-a {
  bottom: calc(100% - 2px);
}

[data-cmd_id="#id#"] .tg-thermometer .statistics .percent.percent-c {
  bottom: calc(50% - 2px);
}

[data-cmd_id="#id#"] .tg-thermometer .statistics .percent.percent-e {
  bottom: calc(0% - 2px);
}
[data-cmd_id="#id#"] .tg-thermometer .meter {
  width: 10px;
  margin: auto;
  left: 0;
  right: 0;
  height: calc(100% - 50px);
  top: 12px;
  position: absolute;
  background-color: #d6d6d6;
  border-radius: 10px 10px 0 0;
  z-index: 1;
}
[data-cmd_id="#id#"] .tg-thermometer .meter .mercury {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #F44336;
  border-radius: 10px 10px 0 0;
  background: linear-gradient(0deg, #f44336, #3f51b5);
  transition: all .5s ease-in-out;
  height: 0;
}
[data-cmd_id="#id#"] .tg-thermometer .meter .mask {
  position: absolute;
  bottom: 0;
  overflow: hidden;
  width: 10px;
  height: 100%;
  border-radius: 10px 10px 0 0;
}
[data-cmd_id="#id#"] .tg-thermometer .meter .bg-color {
  position: absolute;
  width: 10px;
  height: calc(200px - 57px);
  background: linear-gradient(#F44336, #8BC34A, #2196F3);
//   background: linear-gradient(#2196F3, #8BC34A, #F44336);
  bottom: 0;
}
[data-cmd_id="#id#"] .tg-thermometer .meter .percent-current {
  position: absolute;
  left: 0;
  top: 4px;
  transform: translateX(calc(-100% - 10px)) translateY(-60%);
  background-color: #fff;
  padding: 5px 10px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 3px 3px 6px rgba(0, 0, 0, 0.1);
  border-radius: 2px;
  font-weight: 500;
  font-size: 2.2em;
  color: #333;
}
[data-cmd_id="#id#"] .tg-thermometer .meter .percent-current:after {
  border-left: 8px solid white;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  content: "";
  position: absolute;
  right: 0;
  transform: translateX(calc(100% - 2px));
  top: 0;
  bottom: 0;
  margin: auto;
  width: 0;
  height: 0;
}
[data-cmd_id="#id#"] .tg-thermometer .meter .percent-current:before {
  border-left: 7px solid rgba(0, 0, 0, 0.2);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  content: "";
  position: absolute;
  right: 0;
  transform: translateX(calc(100% - 0px));
  top: 0;
  bottom: 0;
  margin: auto;
  width: 0;
  height: 0;
}
[data-cmd_id="#id#"] .tg-thermometer .draw-a {
  background-color: #fff;
  height: calc(100% - 20px);
  width: 30px;
  margin: auto;
  position: relative;
  border-radius: 20px 20px 0 0;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 1px 1px 5px rgba(0, 0, 0, 0.2);
}
[data-cmd_id="#id#"] .tg-thermometer .draw-a:before {
  width: 100%;
  bottom: 0px;
  left: 0;
  position: absolute;
  height: 50px;
  background-color: #fff;
  content: "";
  z-index: 1;
}
[data-cmd_id="#id#"] .tg-thermometer .draw-a:after {
  content: "";
  width: 50px;
  height: 50px;
  position: absolute;
  background-color: #fff;
  left: -10px;
  bottom: -20px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 1px 1px 5px rgba(0, 0, 0, 0.2);
}
[data-cmd_id="#id#"] .tg-thermometer .draw-b {
  position: absolute;
  width: 50px;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  height: 50px;
  z-index: 1;
}
[data-cmd_id="#id#"] .tg-thermometer .draw-b:after {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 24px;
  height: 24px;
  background-color: #2196F3;
  content: "";
  border-radius: 50%;
}
[data-cmd_id="#id#"] .tg-thermometer .draw-b:before {
  position: absolute;
  left: 0;
  right: 0;
  width: 10px;
  top: 0;
  margin: auto;
  height: 20px;
  background-color: #2196F3;
  content: "";
  border-radius: 10px 10px 0 0;
}
[data-cmd_id="#id#"] .centered {
/**  position: absolute !important; **/
   position: relative;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
/**  width: 300px;
  height: 300px; **/
  width: 100%; height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
    font-size: 12px;

}

[data-cmd_id="#id#"] .tg-thermometer .statistics {
  position: absolute;
  left: 0;
  z-index: 1;
  font-size: 1em;
  top: 0;
  height: 100%;
  font-style: italic;
  font-weight: 500;
/**  text-shadow: 1px 1px #fff; **/
} 

</style>

</div>



Re: [Beta] thermomètreCss

Publié : 28 avr. 2019, 12:03
par lolo-95
Bonjour Winhex,
Au top ......... très beau travail.
Merci, je l'ai essayé, parfait en version 3.3.22, je vais le mettre partout maintenant.
:D

Re: [Beta] thermomètreCss

Publié : 28 avr. 2019, 20:28
par team18fr
Bonjour,
Vraiment sympa ce widget, j'aurais voulu savoir si il était possible de réduire la taille ou est indiqué la température ?

Re: [Beta] thermomètreCss

Publié : 30 août 2019, 19:12
par wojc
bonjour,
Super widget, winhex.
Je me demande juste comment redimensionner le thermomètre?
Merci.

Re: [Beta] thermomètreCss

Publié : 30 août 2019, 20:26
par winhex
bonjour, amuse toi avec les css (entre style ) tu verras qui fait quoi c'est formateur c'est comme ça que j'ai fait pour aggrandir le numérique
au début du sujet j'ai mis le code pour temp en plus petit

chaque élément est positionné droite,gauche,haut,bas,taille
faudrait tous revoir (j'aime cherché, adapté
autre ex : https://codepen.io/tommysmall92/pen/mGbNZY
en fin de se message
viewtopic.php?f=29&t=41594&p=703878&hil ... er#p703878

mais la c'est de la finition et ça prends un temps fou surtout que j'en ai pas besoin)


moi la taille me vas
Screenshot_20190830-200605_Chrome.jpg
Screenshot_20190830-200605_Chrome.jpg (317.04 Kio) Consulté 716 fois
et dans design pour mon tel j'ai pas changé la taille non plus (on peux définir la taille d'un équipement 1 étant par default)
Screenshot_20190830-201827_Chrome.jpg
Screenshot_20190830-201827_Chrome.jpg (185.77 Kio) Consulté 716 fois
hs slide du tableau sur design
viewtopic.php?f=30&t=45196

Re: [Beta] thermomètreCss

Publié : 30 août 2019, 21:04
par mich0111
Bonsoir,
Ce widget a l'air super sympa.
Juste une question.
Est-il prévu qu'il passe en stable?
Beau travail.

Re: [Beta] thermomètreCss

Publié : 30 août 2019, 22:42
par winhex
bonjour

vu que la v4 arrive à grand pas
le Plugin Widgets deviendra caduque
cela semble inutile
créé actuellement prend < 1 mn

mais je le mettrais (avec d'autres) pour la visibilité du market (et le suivi v3 qui devrait perduré un moment) se week end

Re: [Beta] thermomètreCss

Publié : 30 août 2019, 23:17
par mich0111
Merci.
Du coup, je suis inquiet.
Il va falloir tout redévelopper ?

Re: [Beta] thermomètreCss

Publié : 30 août 2019, 23:50
par winhex
je ne sais pas, enfin se que j'ai compris
sur dashboard adieu widget
(ou bidouille pour en faire des semblant de core avec perte entre chaque mise à jour)
sur design j'attends de voir se qu'on pourra faire. (j'en ai aucune idée)
voir blog.

et maintien de la v3 pendant plusieurs mois,
sans préjugé, ni précipitation je vais simplement attendre et continuer mon petit bonhome de chemin.

Re: [Beta] thermomètreCss

Publié : 31 août 2019, 10:28
par wojc
Merci winhex.