Projet (réalisable?) de thermostat

[Mika59]

Bonsoir à tous, je cherche à améliorer l’affichage du thermostat sur mon design, comme je ne trouve rien qui me plaise, je vais essayé de réaliser mon widget perso.

J’aimerais réaliser quelque chose qui ressemble à ça. Côté menu circulaire j’ai déjà vu pas mal de code qui pourrait faire le travail. Ma principale interrogation est de savoir si récupérer les commandes du thermostat ne sera pas trop compliqué…

Je n’ai jamais pondu de widget et mes connaissances sont rudimentaires mais il y a beaucoup de ressources disponibles sur internet et sur ce forum.

Si vous avez des tips, suggestions, conseils, avis ou tout autre

[olive]

Il y a notre amis @Spine qui est sur un projet disont circulaire

[PARTAGE] Jauges Highcharts paramétrable, ouvert aux contributions

Bonjour @snoopyfb , Je ne vous ai pas oublié mais je trouvais qu’une Solid gauge monochromatique perdait vraiment tout son intérêt. Et puis je me suis rendu compte un peu par hasard que mes Solid gauge de test fonctionnaient parfaitement en Alpha (4.1), pour l’explication la classe .highcharts-color-0 qui posait problème a été placé dans une sous classe, il suffit donc de supprimer la classe « mère » pour avoir de beaux gradients de couleur : [Gif] Donc elle arrive avec la 4.1, désolé de vous…

Ton idée est sympa et pas irréalisable, quelques effets 3D sur la périmétrie serait de bon ton.
L’ajout de l’hygrométrie sous la température et un information barométrique serait un plus.

A la vue de sont tag peut’être passera t’il ici …

[Mika59]

Merci pour l’info, effectivement mon dessin a été fait en 5 minutes sous paint, le design demande a être approfondi et sophistiqué.

Je vais lire le long sujet que tu as linké, toutefois j’ai l’impression que ça va être très compliqué avec mes connaissances !

[Spine]

Bonsoir,

Circulaire oui mais pas vraiment de rapport avec les jauges. Les widgets mutli-commandes sont assez complexes, je ne m’y suis pas encore essayé mais ça fait partie de mes projets. Voici un fil qui traite du sujet en question :

Virtuel Infos numeriques Primaire et Secondaire

Bonjour, Dans un widget que j’applique sur une Info type Numeric, j’aurais besoin de passer une seconde info numérique, liée a la premiere, différente et a utiliser dans un calcul. Cas concret : calcul du Point de Rosée sur une valeur Humidité. Dans ce cas, j’ai besoin de la température associée à la valuer Humidité. Une solution est de passer une Info type String avec les deux valeurs mais je perd alors (il me semble) les fonctionnalités automatiques Jeedom telles que que historique, courbes…

Mais il faut déjà un minimum d’expérience en codage de widget.
Pour info. ce que tu veux faire est très simplement réalisable en design, tu colles ton image de fond ou tu la dessines en CSS (plus compliqué), puis tu colles simplement toutes tes commandes par dessus et le tour est joué.

[Mika59]

Bonsoir et merci pour ta réponse, effectivement je suis en train de m’orienter vers la technique « sauvage » en trompe l’oeil, je n’ai malheureusement pas beaucoup de temps à consacrer à la programmation…

[Mika59]

Après quelques heures de bidouillage j’ai réussi à créer un menu rond avec des boutons cliquables qui fonctionne, par contre je galère à mettre des icônes dessus…

[Spine]

Bonsoir,

Quelques captures ainsi que plus de détails (code?) nous aideraient beaucoup à t’aider!

[Mika59]

Oui désolé j’ai édité avec un screen…
Pour le code, je copie dessous

<div id="menu">

 

                <div class="item1 item">

                <div onClick="jeedom.cmd.execute({id: '760'});"></div>

                </div>

 

                <div class="item2 item">

      <div onClick="jeedom.cmd.execute({id: '761'});"></div>

                </div>

 

  <div class="item3 item">

      <div onClick="jeedom.cmd.execute({id: '759'});"></div>

  </div>

 

  <div class="item4 item">

  <div onClick="jeedom.cmd.execute({id: '4046'});"></div>

  </div>

 

  <div class="item5 item">

      <div onClick="jeedom.cmd.execute({id: '4063'});"></div>

  </div>

 

  <div id="wrapper6">

    <div class="item6 item">

       <i class="fa fa-chevron-circle-left" style="float:left; margin-top:15px;"></i>

    </div>

  </div>

 

  <div id="center">

    <a href="#"></a>

  </div>

</div>

 

 

<style>

 

#menu {

  background: #aaa;

  position: relative;

  width: 300px;

  height: 300px;

  margin: 0 auto;

  overflow: hidden;

  border-radius: 150px;

  -moz-border-radius: 150px;

  -webkit-border-radius: 150px;

}

 

#center {

  position: relative;

  left: 75px;

  top: 75px;

  width: 150px;

  height: 150px;

  z-index: 10;

  background: #fff;

  background: #888;

  background: #888;

  background: #888;

  border-radius: 80px;

  -moz-border-radius: 80px;

  -webkit-border-radius: 80px;

}

 

#center a {

  display: block;

  width: 100%;

  height: 100%

}

 

.item {

  background: #fff;

  overflow: hidden;

  position: absolute;

  width: 150px;

  height: 150px;

  transform-origin: 100% 100%;

  -moz-transform-origin: 100% 100%;

  -webkit-transform-origin: 100% 100%;

  transition: background .5s;

  -moz-transition: background .5s;

  -webkit-transition: background .5s;

  -o-transition: background .5s;

  -ms-transition: background .5s;

}

 

.item:hover {

  background: #0080ff

}

 

.item1 {

  z-index: 1;

  transform: rotate(60deg);

  -moz-transform: rotate(60deg);

  -webkit-transform: rotate(60deg);

}

 

.item2 {

  z-index: 2;

  transform: rotate(120deg);

  -moz-transform: rotate(120deg);

  -webkit-transform: rotate(120deg);

}

 

.item3 {

  z-index: 3;

  transform: rotate(180deg);

  -moz-transform: rotate(180deg);

  -webkit-transform: rotate(180deg);

}

 

.item4 {

  z-index: 4;

  transform: rotate(240deg);

  -moz-transform: rotate(240deg);

  -webkit-transform: rotate(240deg);

}

 

.item5 {

  z-index: 5;

  transform: rotate(300deg);

  -moz-transform: rotate(300deg);

  -webkit-transform: rotate(300deg);

}

 

.item6 {

  border: none;

  position: absolute;

  z-index: 6;

  transform: rotate(-30deg);

  -moz-transform: rotate(-30deg);

  -webkit-transform: rotate(-30deg);

}

 

#wrapper6 {

  position: absolute;

  width: 150px;

  height: 150px;

  overflow: hidden;

  transform-origin: 100% 120%;

  -moz-transform-origin: 100% 100%;

  -webkit-transform-origin: 100% 100%;

}

 

.item1 .content {

  left: -10px;

  top: 15px;

  transform: rotate(-60deg);

  -moz-transform: rotate(-60deg);

  -webkit-transform: rotate(-60deg);

}

 

.item2 .content {

  left: -11px;

  top: 16px;

  transform: rotate(-120deg);

  -moz-transform: rotate(-120deg);

  -webkit-transform: rotate(-120deg);

}

 

.item3 .content {

  left: -7px;

  top: 12px;

  transform: rotate(-180deg);

  -moz-transform: rotate(-180deg);

  -webkit-transform: rotate(-180deg);

}

 

.item4 .content {

  left: -5px;

  top:

    

[Mika59]

Ça risque de paraître barbare aux puristes, j’y vais empiriquement