Comme annoncé, ce forum est passé en lecture seule au 1er janvier 2020. Désormais nous vous invitons à vous rendre sur notre nouvelle page communauté :
Image

A très bientôt !

[Beta] thermomètreCss

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

[Beta] thermomètreCss

Message par winhex » 28 mars 2019, 22:37

pour test avant mise sur le market
TempCss1.png
TempCss1.png (55.97 Kio) Consulté 1044 fois
TempCss2.png
TempCss2.png (53.8 Kio) Consulté 1044 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
Dernière édition par winhex le 29 mars 2019, 23:06, édité 2 fois.

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

Re: [Beta] TempCss

Message par Salvialf » 29 mars 2019, 09:29

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é 1018 fois
Installé sur dashboard = OK + Testé sur design avec redimensionnement de la taille du widget: impeccable.

Merci pour le taf et le partage.

@+
Dernière édition par Salvialf le 29 mars 2019, 09:29, édité 1 fois.
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)

Avatar de l’utilisateur
cadavor
Actif
Messages : 1284
Inscription : 21 juin 2015, 22:00
Localisation : 34

Re: [Beta] TempCss

Message par cadavor » 29 mars 2019, 10:29

Merci pour la création et le partage.
Jeedom Stable 3.3
NUC Z83 + Aeotec Z-Stick Gen5
Z-Wave FGR + FGMS + FGDS + FGFS + FGK + FGWPE + ZW062 + ZW080
GH Mini + Orvibo AllOne + Playbulb + Miband2

Avatar de l’utilisateur
Fabrice
Modérateur
Messages : 3424
Inscription : 27 oct. 2016, 22:26
Localisation : Planète terre, IDF, 93

Re: [Beta] thermomètreCss

Message par Fabrice » 29 mars 2019, 19:07

Bonjour,

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

Merci pour le travail.
Helper Officiel Jeedom
- Jeedom : 3.3.36
- Protocole : Z-Wave / RFXcom / BLEA
- Raspberry Pi : Pi 3 B+ / Pi 3 B / Pi Zero W

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

Re: [Beta] thermomètreCss

Message par Salvialf » 29 mars 2019, 20:23

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 ;)
Dernière édition par Salvialf le 29 mars 2019, 21:09, édité 1 fois.
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: [Beta] thermomètreCss

Message par winhex » 29 mars 2019, 20:55

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é

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

Re: [Beta] thermomètreCss

Message par winhex » 01 avr. 2019, 04:51

j'en suis là comparaison de l'evo
temperatureCss.png
temperatureCss.png (14.02 Kio) Consulté 909 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>



Avatar de l’utilisateur
lolo-95
Timide
Messages : 129
Inscription : 21 août 2014, 09:32
Localisation : Val d'Oise

Re: [Beta] thermomètreCss

Message par lolo-95 » 28 avr. 2019, 12:03

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
Jeedom sur VM Proxmox (Hystou)
Shinobi sur VM Proxmox (video surveillance)
Multi-room SqueezeBox avec RaspBerry (B+/II) IQaudio en lecteur.
OMV sur Proxmox

team18fr
Actif
Messages : 1119
Inscription : 11 oct. 2014, 18:41

Re: [Beta] thermomètreCss

Message par team18fr » 28 avr. 2019, 20:28

Bonjour,
Vraiment sympa ce widget, j'aurais voulu savoir si il était possible de réduire la taille ou est indiqué la température ?

wojc
Timide
Messages : 32
Inscription : 05 août 2018, 13:46

Re: [Beta] thermomètreCss

Message par wojc » 30 août 2019, 19:12

bonjour,
Super widget, winhex.
Je me demande juste comment redimensionner le thermomètre?
Merci.

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

Re: [Beta] thermomètreCss

Message par winhex » 30 août 2019, 20:26

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é 662 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é 662 fois
hs slide du tableau sur design
viewtopic.php?f=30&t=45196

Avatar de l’utilisateur
mich0111
Timide
Messages : 460
Inscription : 25 juin 2019, 13:59

Re: [Beta] thermomètreCss

Message par mich0111 » 30 août 2019, 21:04

Bonsoir,
Ce widget a l'air super sympa.
Juste une question.
Est-il prévu qu'il passe en stable?
Beau travail.
Jeedom V4 DIY
RPI3B+
SSD
RFXCOM version XL
Contrôleur Z-Wave Z-stick Gen5
CronBee2
Et plus de 70 devices de toutes marques et toutes natures

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

Re: [Beta] thermomètreCss

Message par winhex » 30 août 2019, 22:42

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

Avatar de l’utilisateur
mich0111
Timide
Messages : 460
Inscription : 25 juin 2019, 13:59

Re: [Beta] thermomètreCss

Message par mich0111 » 30 août 2019, 23:17

Merci.
Du coup, je suis inquiet.
Il va falloir tout redévelopper ?
Jeedom V4 DIY
RPI3B+
SSD
RFXCOM version XL
Contrôleur Z-Wave Z-stick Gen5
CronBee2
Et plus de 70 devices de toutes marques et toutes natures

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

Re: [Beta] thermomètreCss

Message par winhex » 30 août 2019, 23:50

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.

wojc
Timide
Messages : 32
Inscription : 05 août 2018, 13:46

Re: [Beta] thermomètreCss

Message par wojc » 31 août 2019, 10:28

Merci winhex.

Répondre

Revenir vers « [Plugin officiel] Widgets »

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 2 invités