Aide sur alignement de plusieurs widgets

Kenavoparis · Avril 17, 2020, 7:53

Bonjour
Je suis passé en V4 (c’est top ! bravo et merci)… et effectivement les widgets sont à reprendre. J’ai fait le ménage et je les ai tous repris mais je butte après plusieurs heures sur un problème d’alignement.
J’ai 3 widgets pour gérer un équipement thermostat perso et ces 3 derniers ne s’alignent pas de manière identique et comme je les utilise dans un tableau avec de nombreux équipements, cela ne fait pas très beau.
Je me suis inspiré de pas mal de widget sur le forum mais j’ai fait les 3 widgets sur le même modèle mais rien n’y fait, l’alignement n’est pas le même.

L’idéal serait que les valeurs et les boutons soient centrés verticalement.
Merci pour votre aide,
Olivier

Widget affichage température

<div class="cmd cmd-widget" data-type="action" data-subtype="slider" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">
        <div class="title #hide_name#">
                <div  class="cmdName">#name_display#</div>
        </div>
  <span id="thermo_icon#id#"></span>
  <p id="displayConsigne#id#" class="text-right">
    <span id="valeur#id#"></span>°C
   </p>
  <style>
#thermo_icon#id# {display:inline-block;font-size: 20px;}
#displayConsigne#id# { display:inline-block; }
#valeur#id# { font-size: 20px; font-weight: bold; }
#boutons#id# { display:inline-block; }
  </style>

Widget modifieConsigne

<div style="min-width:70px;min-height:40px;font-size: 10;" class="cmd cmd-widget" data-type="info" data-subtype="slider"  data-template="tile" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">
	<div class="title #hide_name#">
		<div  class="cmdName">#name_display#</div>
	</div>
  <span id="thermo_icon#id#"></span>
  <p id="displayConsigne#id#" class="text-right">
    <span id="valeur#id#"></span>°C
   </p>
   <div id="boutons#id#">
    <a class="btn-sm bt_plus"><i class="fa fa-plus-square"></i></a>
     <br />
    <a class="btn-sm bt_minus"><i class="fa  fa-minus-square"></i></a>
   </div>
<style>
#thermo_icon#id# {display:inline-block;font-size: 20px;}
#displayConsigne#id# { display:inline-block;}
#valeur#id# { font-size: 20px; font-weight: bold; }
#boutons#id# { display:inline-block; }
</style>

Widget modifieHeureFinConsigne

<div style="min-width:70px;min-height:40px;font-size: 10;" class="cmd cmd-widget" data-type="action" data-subtype="slider"  data-template="tile" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">
        <div class="title #hide_name#">
                <div  class="cmdName">#name_display#</div>
        </div>
		<input id="stateTime#id#" type="text" class="value form-control input-sm" value="#state#" style="display:none"/>
		<div id="boutonGauche#id#" >
        	<a style="cursor: pointer;" class="btn-sm bt_plusH" ><i class="fa fa-1x fa-plus-square"></i></a>
          		<br />
          	<a style="cursor: pointer;" class="btn-sm bt_minusH" ><i class="fa fa-1x fa-minus-square"></i></a>
        </div>
  		<p id="displayConsigne#id#" class="text-right">
    		<span id="chaineComplete#id#"></span>
   		</p>
        <div id="boutonDroite#id#">
        	<a style="cursor: pointer;" class="btn-sm bt_plusM" ><i class="fa fa-1x fa-plus-square"></i></a>
          		<br />
			<a style="cursor: pointer;" class="btn-sm bt_minusM" ><i class="fa fa-1x fa-minus-square"></i></a>
		</div>
<style>
#boutonGauche#id# {font-size: 12px; display: inline-block;}
#boutonDroite#id# {font-size: 12px; display: inline-block;}
#displayConsigne#id# { display:inline-block;}
#chaineComplete#id# { font-size: 20px; font-weight: bold; }
</style>```

JAG · Avril 17, 2020, 4:14

je n’ai pas regardé ton code Mais fait attention
« fa fa-plus-square », il faut le remplacer par « fas fa-plus-square »

« fa fa-minus-square » par « fas fa-minus-square »

c’est valable pour la v3 et la V4

Après il faut regarder avec les Div a mon avis il te manque quelque chose sur la premiere

Kenavoparis · Avril 21, 2020, 7:06

Bonjour
J’ai réussi à aligner tout cela… un peu du bricolage mais ça marche !
Widget affichage température => pas de changement
Widget modifieConsigne et Widget modifieHeureFinConsigne

=> alignement top + ajout de position: relative pour placer les boutons où je souhaite

<div style="min-width:70px;min-height:40px;font-size: 10;" class="cmd cmd-widget" data-type="action" data-subtype="slider"  data-template="tile" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">
	<div class="title #hide_name#">
		<div  class="cmdName">#name_display#</div>
	</div>
<div  id ="alignement">
  <span id="thermo_icon#id#"></span>
  <p id="displayConsigne#id#" class="text-right">
    <span id="valeur#id#"></span>°C
   </p>
   </div>
   <div id="boutons#id#">
    <span class="espacement1  btn-sm bt_plus"><i class="fas  fa-plus-square"></i> </span>
     <span class="espacement2 btn-sm bt_minus"><i class="fas  fa-minus-square"></i></span>
   </div>
<style>
#alignement {display:inline-block;vertical-align:top;}
#thermo_icon#id# {display:inline-block;font-size: 20px;}
#displayConsigne#id# { display:inline-block;}
#valeur#id# { font-size: 20px; font-weight: bold; }
#boutons#id# { display:inline-block;  }
.espacement1 {
  display:block;
position:relative;
  top:-10px;
  }
.espacement2 {
  display:block;
position:relative;
  top:-20px;
  }
  </style>

puis

<div style="min-width:70px;min-height:40px;font-size: 10;" class="cmd cmd-widget" data-type="action" data-subtype="slider"  data-template="tile" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">
        <div class="title #hide_name#">
                <div  class="cmdName">#name_display#</div>
        </div>
		<input id="stateTime#id#" type="text" class="value form-control input-sm" value="#state#" style="display:none"/>
		<div id="boutonGauche#id#" >
        	<span style="cursor: pointer;" class="espacement4 btn-sm bt_plusH" ><i class="fas fa-1x fa-plus-square"></i></span>
          	<span style="cursor: pointer;" class="espacement5 btn-sm bt_minusH" ><i class="fas fa-1x fa-minus-square"></i></span>
        </div>
	  <p id="displayConsigne#id#" class="espacement6 text-right">
    		<span id="chaineComplete#id#"></span>
   		</p>
          <div id="boutonDroite#id#">
        	<span style="cursor: pointer;" class="espacement4 btn-sm bt_plusM" ><i class="fas fa-1x fa-plus-square"></i></span>
			<span style="cursor: pointer;" class="espacement5 btn-sm bt_minusM" ><i class="fas fa-1x fa-minus-square"></i></span>
		</div>
<style>
#boutonGauche#id# {font-size: 12px; display: inline-block;}
#boutonDroite#id# {font-size: 12px; display: inline-block;}
#displayConsigne#id# { display:inline-block;vertical-align:top;position:relative;top:5px;}
#chaineComplete#id# { font-size: 20px; font-weight: bold; }
.espacement4 {
  display:block;
position:relative;
  top:-10px;
  }
.espacement5 {
  display:block;
position:relative;
  top:-20px;
  }
  
  
  </style>

Levan · Avril 21, 2020, 3:18

Super et merci pour le TimeBouton !
J’ai voulu aussi reprendre l’affichage de la température et la gestion de la consigne mais cela ne fonctionne pas. Je suppose que les sources ne sont pas complets.
Est-ce abuser de demander aussi les sources de l’affichage de la température et de la gestion de la consigne ?
Savez-vous s’il existe un widget quasi identique pour saisir une valeur numérique simple ?
Merci

Kenavoparis · Avril 22, 2020, 7:58

Bonjour Levan

Voici les 3 sources complets.
Pour la saisie d’une valeur numérique simple, il existe déjà un widget natif qui fait très bien le job.
Après si vous voulez un widget avec bouton vous prenez celui de la consigne (modifierConsigne) et vous supprimez l’icône température (#thermo_icon#id#).
Bonne journée
Olivier

cmd.action.slider.modifieHoraire.txt (8,7 Ko) cmd.action.slider.modifieConsigne.txt (3,2 Ko) cmd.info.numeric.Temperature.txt (1,6 Ko)

Levan · Avril 22, 2020, 10:53

Bonjour Kenavoparis,
C’est top, tout fonctionne super bien.
Merci

Salvialf · Avril 22, 2020, 11:03

Salut,

Les sources sont ici:

Merci @JAG pour le fas faut que je modifie

Levan · Avril 22, 2020, 6:12

Bonsoir,
Pour le widget modifieHoraire, est-ce normal que l’option « affichage uniquement » des minutes ne fonctionne plus? Elle s’activait lorsque la valeur maximum = 59.
Par avance merci pour ce complément d’information.

nerixs · Mai 4, 2020, 3:08

Bonjour,
Une petite explication SVP ?

Salvialf · Mai 4, 2020, 3:15

C’est dû au passage à FontAwesome 5

nerixs · Mai 4, 2020, 4:09

OK, merci

Toujours sur le front

Pour ma culture perso et pour qui veux :

Font Awesome est une police d’écriture et un outil d’icônes qui se base sur CSS, LESS et SASS.

Valable pour jeedom v3 et la V4.

J’en conclu que je dois faire la modification.

Quel impact ? certaines polices peuvent ne pas être gérées ? Icônes non supportés ?