[Résolu] HTML aide pour bout de code

HTML aide pour bout de code [Résolu] - HTML/CSS - Programmation

Marsh Posté le 19-11-2017 à 16:47:48    

bonjour dans un code HTML,  
je me sers de celui si pour faire un suivi de fonctionnement d'une chaudiere.
j'ai des valeurs qui s'affichent.
 

Code :
  1. <div id="contenu1"> 
  2. <center>
  3.         <div class="IO_mode">
  5.   <h2>Information</h2>
  7.   <p>ECS: <span id="T_eau">...</span> °C</p>
  8.   <p>Chaudiere: <span id="T_chaudiere">...</span> °C</p>
  9.   <p>Niveau: <span id="niveau">...</span> % </p>
  10.   <p>CO:<span id="CO">...</span> ppm /  Fumée:<span id="smoke">...</span> ppm</p>
  11.   </div>
  14.  <div class="IO_mode" float : center;>
  15.   <h2> Mode </h2>
  18.   <p>Mode hiver :  <span id="hiver">...</span></p>
  20.   <p>Mode jour:   <span id="mode" >...</span>   </p>
  21.   <p>Mode automatique:  <span id="auto" >...</span></p>
  22.   <p>type de chauffe:  <span id="type">...</span></p>
  24.  </div>
  26.  <div class="IO_mode">
  27.   <h2>Etat</h2>
  31.   <p>circulateur chauffage:  <span id="etat_circ_chauff">...</span></p>
  32.   <p>circulateur ECS:   <span id="etat_circ_ECS">...</span></p>
  33.   <p>Bruleur:  <span id="etat_bruleur">...</span></p>
  35.  </div>
  36. </center>
  37. </div>


mais j'aimerais afficher un texte a la place de la valeur (evidemment en fonction de la valeur retourner)
 
 
si on se concentre sur cette partie,  
 
 
 

Code :
  1. <p>Mode hiver :  <span id="hiver">...</span></p>
  3.   <p>Mode jour:   <span id="mode">...</span>   </p>
  4.   <p>Mode automatique:  <span id="auto" >...</span></p>
  5.   <p>type de chauffe:  <span id="type">...</span></p>


 
 
 
 
 
 
 
je l'ai modifié comme ca, mais ca ne fonctionne pas...
 
 
 
 
 

Code :
  1. <p>Mode hiver :  <span id="hiver" data-value==1>Hiver</span>   <span id="hiver" data-value==0>Eté</span></p>
  3.   <p>Mode jour:   <span id="mode" data-value=0>Nuit</span>   <span id="mode" data-value=1>Jour</span></p>
  4.   <p>Mode automatique:  <span id="auto" data-value= 0 >Arret</span>   <span id="auto" data-value= 1 >F. ECS</span>  <span id="auto" data-value= 2 >F. chauffage</span>  <span id="auto" data-value= 4 >Auto</span> <span id="auto" data-value= 5 >hors gel</span> </p>
  5.   <p>type de chauffe:  <span id="type">...</span></p>


 
pourriez vous m'aidez dans l'ecriture de ces quelques lignes??
 
 
aujourd'hui dans mon bloc c'est ecrit  ainsi
 
hiver : 1 ou 0 (c'est ce que je recois)
Mode : 0 ou 1  
Mode automatique : 0 ou 1 ou 2 etc...
type de chauffe : 0 ou 1 etc...
 
et je voudrais que ca puisse ecrire
 
 
hiver : hiver ou été
Mode : jour ou nuit  
Mode automatique : arret, automatique forcage etc...
type de chauffe : regule, eau chaude etc...


Message édité par sapeur3873 le 20-11-2017 à 04:28:37
Reply

Marsh Posté le 19-11-2017 à 16:47:48   

Reply

Marsh Posté le 19-11-2017 à 17:09:34    

Merci de mettre le code entre balises [code ] [/ code], c'est plus lisible. ;)  
 
J'ai pas vraiment compris ton problème... Il y a du Javascript qui va avec ce code HTML non? Dans ce cas merci de tout copier.

Reply

Marsh Posté le 19-11-2017 à 17:19:02    

oui je veut bien mettre le code complet, mais il est tres  long il y a en effet du javascript et du css aussi...

Code :
  1. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr" style="height: 100%">
  2. <head>
  3.         <title>Chaudière</title>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=ANSI" />
  5.         <meta http-equiv="Content-Language" content="fr" />
  6.         <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
  8.  <LINK href="./styles.css" type=text/css rel=stylesheet>
  9.  <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
  12.  <script type="text/javascript">
  13.   var mb_AutoRefresh = true;
  15.   var ms_Server = 'http://xx.xx.xx.xx';
  17.   function DisplayResult(po_Data)
  18.   {
  19.    console.log(po_Data);
  21.    $('#Date').html(po_Data.date.day + '/' + po_Data.date.month + '/' + po_Data.date.year);
  22.    $('#Time').html(po_Data.time.hour + ':' + po_Data.time.minute);
  25.    $('#auto').html(po_Data.state.auto);
  26.    $('#hiver').html(po_Data.state.hiver);
  27.    $('#mode').html(po_Data.state.mode);
  28.    $('#type').html(po_Data.state.type);
  29.    $('#prog').html(po_Data.state.prog);
  31.    $('#etat_circ_chauff').html(po_Data.relay.etat_circ_chauff);
  32.    $('#etat_circ_ECS').html(po_Data.relay.etat_circ_ECS);
  33.    $('#etat_bruleur').html(po_Data.relay.etat_bruleur);
  35.    $('#T_eau').html(po_Data.value.t_eau);
  36.    $('#T_chaudiere').html(po_Data.value.t_chaudiere);
  37.    $('#T_consigne').html(po_Data.value.cons_chaudiere);
  38.    $('#T_ext').html(po_Data.value.t_ext);
  39.    $('#T_int').html(po_Data.value.t_int);
  40.    $('#H_ext').html(po_Data.value.h_ext);
  41.    $('#H_int').html(po_Data.value.h_int);
  42.    $('#consigne').html(po_Data.value.consigne);
  43.    $('#niveau').html(po_Data.value.niveau);
  44.    $('#CO').html(po_Data.value.gas_co);
  45.    $('#smoke').html(po_Data.value.gas_smoke);
  51.    $('.LoadingShow').hide();
  52.    $('.LoadingHide').show();
  54.    $('.Button[data-code="auto"]').removeClass('VeryPositive').filter('[data-value=' + po_Data.state.auto + ']').addClass('VeryPositive');
  55.    $('.Button[data-code="prog"]').removeClass('VeryPositive').filter('[data-value=' + po_Data.state.prog + ']').addClass('VeryPositive').attr('checked', true);
  57.           $('#debut_AM').html(po_Data.param.debut_AM);
  58.    $('#fin_AM').html(po_Data.param.fin_AM);
  59.    $('#debut_PM').html(po_Data.param.debut_PM);
  60.    $('#fin_PM').html(po_Data.param.fin_PM);
  61.    $('#debut_AM1').html(po_Data.param.debut_AM);
  62.    $('#fin_PM1').html(po_Data.param.fin_PM);
  64. $(this).css({ 'color': 'red', 'font-size': '150%' });
  65.    if (mb_AutoRefresh)
  66.    {
  67.     window.setTimeout(RefreshData, 30000);
  68.    }
  69.   }
  71.   function Ready()
  72.   {
  73.    RefreshData();
  75.   }
  77.   function Loading_Start()
  78.   {
  79.    $('.LoadingShow').show();
  80.    $('.LoadingHide').hide();
  81.   }
  83.   function RefreshData()
  84.   {
  85.    Loading_Start();
  86.    $.getJSON(ms_Server + '/Service/GetValue', DisplayResult);
  87.   }
  89.   function deletelogdata()
  90.   {
  91.    $.getJSON(ms_Server + '/Service/Delete');
  92.   }
  95.   function SetValue(pe_Button)
  96.   {
  97.    Loading_Start();
  99.    var ls_Code = $(pe_Button).attr('data-code');
  100.    var ls_Value = $(pe_Button).attr('data-value');
  102.    var lo_Data = {};
  103.    lo_Data[ls_Code] = ls_Value;
  105.    $.get(ms_Server + '/Service/SetValue',
  106.      lo_Data,
  107.     RefreshData);
  108.   }
  110.   $(document).ready(function () { Ready(); });
  111.  </script>
  113.  <style type="text/css">
  119. /*****code CSS******/
  121. A.bl:link {TEXT-DECORATION: underline; color: #00549A}
  122. A.bl:visited {TEXT-DECORATION: underline; color: #00549A}
  123. A.bl:hover {COLOR:  rgb(0,153,0); TEXT-DECORATION: none}
  124. A.bl:active {color: rgb(0,153,0);  TEXT-DECORATION: underline}
  126. .textb {font-family:Verdana; font-size: 11; color: black }
  127. .text {font-family: Verdana; font-size: 10; color: rgb(102,102,102)}
  128. .ttt {font-size:100%; line-height:130%; margin-bottom:0.5em; margin-top:0; text-indent:0em; text-align: center;}
  129. .text2 {font-family:Verdana; font-size: 13; color: rgb(102,102,102); }
  130. .leb {font-size:100%; line-height:130%; margin-bottom:0.5em; margin-top:0; text-indent:0em;}
  131. .textBl {font-family:Verdana; font-size: 13; color: black }
  132. .level {font-family:Verdana; font-size: 18; color: #616351; font-weight: normal; TEXT-DECORATION: none}
  133. .laurent {font-family: Tahoma; font-size: 26; color: white; font-weight: bold }
  134. .texts {font-family:Verdana; font-size: 11; color: rgb(102,102,102) }
  137. .slider { background-image: url(slider_bg.gif); background-repeat: repeat-x; }
  138. .knob { position: relative; background-image: url(knob.gif); }
  141. /********************************************************************/
  142. /* BUTTONS                                                          */
  143. /********************************************************************/
  145. a.Button
  146. {
  147. display:    inline-block;
  148. margin:     5px 5px 5px 5px;
  149. background-color:  #EAEAEA;
  150. border-style:           solid;
  151.     border-width:   1px;
  152. text-decoration:  none;
  153. font-size: 100%;
  154. font-weight:   bold;
  155. cursor:     pointer;
  156. padding:     5px 5px 5px 5px;
  157.     border-radius:          5px 5px 5px 5px;
  158.     -moz-border-radius:  5px 5px 5px 5px;
  159. -webkit-border-radius: 5px 5px 5px 5px;
  160. background:    -webkit-gradient(linear, left top, left bottom, from(#F0F0F0), to(#D0D0D0));
  161. background:    -moz-linear-gradient(top,#F0F0F0, #D0D0D0);
  162.   width: 50%;
  163.   height: 30px;
  164. }
  166. a.Button:hover, a.Button:active, a.Button:focus {
  167.     text-decoration:  none;
  168. }
  170. /* Make sure there is a space between the image and the text */
  171. a.Button img { padding-right: 5px;
  172.                padding-left: 5px; }
  174. /* STANDARD */
  176. a.Button {
  177.     border-color:           #D0D0D0;
  178.     color:     #111111;
  179. }
  181. a.Button:hover, a.Button:active, a.Button:focus {
  182.     background-color:  #EAF5FF;
  183.     border-color:   #8AB6DD;
  184.     color:     #0557A0;
  185. background:    -webkit-gradient(linear, left top, left bottom, from(#EAF5FF), to(#AAD6FD));
  186. background:    -moz-linear-gradient(top, #EAF5FF, #AAD6FD);
  187. }
  189. /* DISABLED */
  191. a.Disabled {
  192.      color:     #999999;
  193. }
  195. a.Disabled:hover, a.Disabled:active, a.Disabled:focus {
  196.     background-color:  #EAEAEA;
  197.     border-color:   #A0A0A0;
  198.     color:     #666666;
  199. background:    -webkit-gradient(linear, left top, left bottom, from(#F0F0F0), to(#D0D0D0));
  200. background:    -moz-linear-gradient(top,#F0F0F0, #D0D0D0);
  201. }
  203. a.Disabled img {
  204.     filter:alpha(opacity=30);
  205.     opacity:0.30;
  206. }
  208. a.Disabled:hover img, a.Disabled:active img, a.Disabled:focus img {
  209.     filter:alpha(opacity=50);
  210.     opacity:0.5;
  211. }
  213. /* POSITIVE */
  215. a.Positive {
  216.      color:     #119911;
  217. }
  218. a.Positive:hover, a.Positive:active, a.Positive:focus {
  219.     background-color:  #E0FFE0;
  220.     border-color:   #A0F0A0 !important;
  221.     color:     #669966;
  222. background:    -webkit-gradient(linear, left top, left bottom, from(#F0FFF0), to(#D0FFD0)) !important;
  223. background:    -moz-linear-gradient(top, #F0FFF0, #D0FFD0) !important;
  224. }
  226. a.VeryPositive,a.VeryPositive:hover, a.VeryPositive:active, a.VeryPositive:focus {
  227.     background-color:  #C0FFC0;
  228.     border-color:   #A0F0A0 !important;
  229.     color:     #229922 !important;
  230. background:    -webkit-gradient(linear, left top, left bottom, from(#D0FFD0), to(#A0FFA0)) !important;
  231. background:    -moz-linear-gradient(top, #D0FFD0, #A0FFA0) !important;
  232. }
  234. /* NEGATIVE */
  236. a.Negative {
  237.      color:     #991111;
  238. }
  239. a.Negative:hover, a.Negative:active, a.Negative:focus {
  240.     background-color:  #FFE0E0 !important;
  241.     border-color:   #F0A0A0 !important;
  242.     color:     #996666 !important;
  243. background:    -webkit-gradient(linear, left top, left bottom, from(#FFF0F0), to(#FFD0D0)) !important;
  244. background:    -moz-linear-gradient(top,#FFF0F0, #FFD0D0) !important;
  245. }
  247. a.VeryNegative,a.VeryNegative:hover, a.VeryNegative:active, a.VeryNegative:focus {
  248.     background-color:  #FFC0C0 !important;
  249.     border-color:   #F0A0A0 !important;
  250.     color:     #992222 !important;
  251. background:    -webkit-gradient(linear, left top, left bottom, from(#FFD0D0), to(#FFA0A0)) !important;
  252. background:    -moz-linear-gradient(top, #FFD0D0, #FFA0A0) !important;
  253. }
  255. /* SELECTED */
  257. a.Selected {
  258. color:     #111111 !important;
  259. border-color:   #0557A0 !important;
  260. background-color:  #7DBEFA !important;
  261. background:    -webkit-gradient(linear, left top, left bottom, from(#96CAFA), to(#4BA5FA)) !important;
  262. background:    -moz-linear-gradient(top, #96CAFA, #4BA5FA) !important;
  263. }
  264. a.Selected:hover, a.Selected:active, a.Selected:focus {
  265.     color:     #222299;
  266. border-color:   #0557A0 !important;
  267. background-color:  #7DBEFA !important;
  268. background:    -webkit-gradient(linear, left top, left bottom, from(#96CAFA), to(#4BA5FA)) !important;
  269. background:    -moz-linear-gradient(top, #96CAFA, #4BA5FA) !important;
  270. }
  272. b.Button
  273. {
  274. display:    inline-block;
  275. margin:     5px 5px 5px 5px;
  276. background-color:  #EAEAEA;
  277. border-style:           solid;
  278.     border-width:   1px;
  279. text-decoration:  none;
  280. font-weight:   bold;
  281. cursor:     pointer;
  282. padding:     5px 10px 6px 7px;
  283.     border-radius:          5px 5px 5px 5px;
  284.     -moz-border-radius:  5px 5px 5px 5px;
  285. -webkit-border-radius: 5px 5px 5px 5px;
  286. background:    -webkit-gradient(linear, left top, left bottom, from(#F0F0F0), to(#D0D0D0));
  287. background:    -moz-linear-gradient(top,#F0F0F0, #D0D0D0);
  288.   width: 5%;
  289.   height: 25px;
  290. }
  294. div#bandeau { width:100%; height:70px; background-color:#00CCFF;
  295.     border-radius:          10px 20px 0px 0px;
  296.     -moz-border-radius:  5px 5px 5px 5px;
  297. -webkit-border-radius: 5px 5px 5px 5px; }
  298. div#contenuparam { width:80% ;float:left; height:600px; background-color: lightgrey; }
  299. div#contenu { width:80% ;float:left; height:200px; background-color: lightgrey; }
  300. div#contenu1 { width:80% ;float:left;  height:250px; background-color: lightgrey; }
  301. div#contenu2 { width:80% ;float:left; height:150px; background-color: lightgrey; }
  302. div#piedpage { width:100%;  clear:both; background-color:#33FF99; }
  304. div#menu { float:left; width:20%; height:600px; background-color: #F5ECCE;
  305.     border-radius:          5px 5px 5px 5px;
  306.     -moz-border-radius:  5px 5px 5px 5px;
  307. -webkit-border-radius: 5px 5px 5px 5px; }
  309. .IO_temp {
  310.   float: left;
  311.   margin: 2% 0  2% 5%;
  312.   border: 1px solid ligthgrey;
  313.   padding: 0px 2px 0px 5px;
  314.   width: 40%;
  315.   height: 200px;
  316.   background-color: lightgrey;
  318.  }
  319. .IO_cons{
  320.   float: left;
  322.   margin: 2% 0  2% 5%;
  323.   border: 1px solid red;
  324.   padding: 0 0px 0 0px;
  325.   width: 20%;
  326.   height: 150px;
  327. border-radius:          20px 20px 20px 20px;
  328.     -moz-border-radius:  5px 5px 5px 5px;
  329. -webkit-border-radius: 5px 5px 5px 5px;
  331.   background-color: lightpink;
  332. }
  334. .IO_tempext{
  336. float: left;
  337.   margin: 5% 0  5% 3%;
  338.   border: 1px solid lightgrey;
  339.   padding: 0 5px 0 5px;
  340.   width: 20%;
  341.   height: 50px;
  343.   background-color: lightgrey;
  344. }
  346. .IO_mode {
  347.   float: left;
  348.   margin: 0px 0 5% 5%;
  352.   border: 1px solid blue;
  353.   padding: 0px 2px 0px 5px;
  354.   width: 25%;
  355.   height: 200px;
  356.   background-color: lightblue;
  357. border-radius:          20px 20px 20px 20px;
  358.     -moz-border-radius:  5px 5px 5px 5px;
  359. -webkit-border-radius: 5px 5px 5px 5px;
  361.  }
  363. .IO_brul {
  364.   float: left;
  366.   margin: 0 20px 20px 0;
  367.   border: 1px solid green;
  368.   padding: 0 5px 0 5px;
  369.   width: 590px;
  370.   background-color: lightgreen;
  371. }
  375.  h1 {
  376.   font-size: 150%;
  377.   color: blue;
  378.   margin: 0 2px 0px 0;
  379.  }
  380.  h2 {
  381.   font-size: 100%;
  382.   color: #5734E6;
  383.   margin: 5px 0 5px 0;
  384.  }
  385.   form {
  386.   font-size: 120%;
  387.   color: #252525;
  388.  }
  389.  p{
  390.   font-size: 110%;
  391.   color: #252525;
  392.  }
  393.  temp{
  394.   font-size: 500%;
  395.   color: #252525;
  396.  }
  397.  tempext{
  398.   font-size: 150%;
  399.   color: #252525;
  400.  }
  401.  time{
  402.   font-size: 150%;
  403.   color: #252525;
  404.  }
  405.  cons{
  406.   font-size: 300%;
  407.   color: #252525;
  408.  }
  410.  petit{
  411.   font-size: 60%;
  412.   color: #737373;
  413.  }
  415. /****fin code julien****/
  431.  </style>
  434. </head>
  436. <body>
  439. <div id="bandeau">
  440. <center>
  441. <h1>Chaudiere</h1>
  442.  <span id="Date">Date</span>   <span id="Time">Hour</span>
  444. </center>
  446. </div> 
  450.    
  451. <div id="menu">           
  453. <center>
  454.   <h2>Pilotage</h2>
  455.   <br>
  456.   <div>
  457.   <a class="Button" data-code="auto" data-value="0" onclick="SetValue(this);">Arret</a><br>
  458.   <a class="Button" data-code="auto" data-value="4" onclick="SetValue(this);">Auto</a><br>
  459.   <a class="Button" data-code="auto" data-value="1" onclick="SetValue(this);">F_Eau chaude</a><br>
  460.   <a class="Button" data-code="auto" data-value="2" onclick="SetValue(this);">F_Chauffage</a><br>
  461.   <a class="Button" data-code="auto" data-value="5" onclick="SetValue(this);">Hors Gel</a><br>
  463.   </div>
  465.  <br>
  466.  <br>
  467.  <br>
  468.  <br>
  469.  <div>
  470.   <a class="Button" data-code="prog" data-value="1" onclick="SetValue(this);">Prog 1</a><br />
  471.   <a class="Button" data-code="prog" data-value="2" onclick="SetValue(this);">Prog 2</a><br />
  472.  </div>
  473.  <br>
  474.  <br>
  475.  <br>
  479.  <!--<a href= "http://192.168.2.180/datalog.csv" title="données sauvegardées" target="_blank">données sauvegardées</a><br />
  480.  <a href= "http://192.168.2.180/Service/Delete" title="efface fichier" target="_blank">efface fichier</a><br />-->
  481.  <a href= "param.htm" title="parametres" target="">parametrage</a>
  482. </center>
  483. </div>
  485. <div id="contenu">           
  486. <center>
  488.            
  491.         <div class="IO_temp">
  494.   <center>
  495.   <temp><span id="T_int">...</span> °C </temp>
  496.   <p><span id="H_int">...</span> %</p>
  497.   </center>
  498.  </div>
  501. <div class="IO_cons">
  503.  <a>Consigne</a> <br />
  504. <a class="Button" data-code="temperature" data-value="plus" onclick="SetValue(this);">+</a>
  505. <h1><span id="consigne">...</span> °C </h1>
  506. <a class="Button" data-code="temperature" data-value="minus" onclick="SetValue(this);">-</a>
  507.          
  512.       </div>
  514. <div class="IO_tempext">
  515.   <h2> Temperature ext</h2>
  517.   <p> <span id="T_ext">...</span> °C // <span id="H_ext">...</span> %</p>
  518.  </div>
  519. </center>
  520. </div>
  522. <div id="contenu1"> 
  523. <center>
  524.         <div class="IO_mode">
  526.   <h2>Information</h2>
  528.   <p>ECS: <span id="T_eau">...</span> °C</p>
  529.   <p>Chaudiere: <span id="T_chaudiere">...</span> °C</p>
  530.   <p>Niveau: <span id="niveau">...</span> % </p>
  531.   <p>CO:<span id="CO">...</span> ppm /  Fumée:<span id="smoke">...</span> ppm</p>
  532.   </div>
  535.  <div class="IO_mode" float : center;>
  536.   <h2> Mode </h2>
  538.   <p>Mode hiver :  <span id="hiver">...</span></p>
  539.   <p>Mode jour:   <span id="mode">...</span></p>
  540.   <p>Mode automatique:  <span id="auto">...</span></p>
  541.   <p>type de chauffe:  <span id="type">...</span></p>
  543.  </div>
  545.  <div class="IO_mode">
  546.   <h2>Etat</h2>
  550.   <p>circulateur chauffage:  <span id="etat_circ_chauff">...</span></p>
  551.   <p>circulateur ECS:   <span id="etat_circ_ECS">...</span></p>
  552.   <p>Bruleur:  <span id="etat_bruleur">...</span></p>
  554.  </div>
  555. </center>
  556. </div>
  557. <div id="contenu2"> 
  558. <center>
  559.  <div class="IO_box1">
  560.   <h2>Consigne du bruleur</h2>
  561.            
  562.             <p>la consigne envoye au bruleur est de: <span id="T_consigne">...</span> °C<p>
  563.  </div>
  564. </center>
  565. </div>
  573. <div id="piedpage"> 
  574. <center>
  575.          
  576. <h2>Notice</h2>
  577. </center>
  579.              <petit> Mode chaudiere ==> 0: arret, 1: mode forcage ECS, 2: mode forcage chauffage,  4: Mode auto, 5:hors gel </petit> <br />
  580.            <petit> Type de chauffe ==> 0: pas de chauffe, 1: ECS, 2: chauffage jour, 3: chauffage nuit , 4: hors gel </petit><br />
  581.            <petit> Prog 1:
  582.              heure de debut matin :
  583.             <span id="debut_AM">Hour</span>
  584.              , heure fin matin :
  585.              <span id="fin_AM">Hour</span>
  586.               , heure debut Aprem :
  587.              <span id="debut_PM">Hour</span>
  588.              , heure fin Aprem :
  589.             <span id="fin_PM">Hour</span> </petit>
  590.             <br />
  591.             <petit> Prog 2:
  592.              heure de debut matin :
  593.              <span id="debut_AM1">Hour1</span>
  594.              , heure fin Aprem :
  595.             <span id="fin_PM1">Hour2</span> </petit>
  597. </div>
  608. </body>
  609. </html>

Reply

Marsh Posté le 19-11-2017 à 19:44:52    

C'est long mais on a toutes les infos. Il faut bien modifier le code Javascript et "traduire" les valeurs numériques qui viennent du chauffage en texte. On peut faire ça avec des tableaux. Par contre il faut le faire à la main pour chaque paramètre, c'est un peu de boulot. P.ex.

Code :
  1. $('#auto').html(po_Data.state.auto);

devient

Code :
  1. var txt_auto=["arret", "mode forcage ECS", "mode forcage chauffage", "Mode auto", "hors gel"];
  2. $('#auto').html(txt_auto[po_Data.state.auto]);

etc. Autrement dit au lieu de mettre directement la valeur du JSON dans le HTML on l'utilise comme index pour un tableau qui contient les textes qui vont bien.
(Peut-être il y a une méthode plus élégante aussi, je suis que bricoleur, pas un pro du JS et encore moins de JQuery que je connais pas du tout.)

Citation :

var ms_Server = 'http://xx.xx.xx.xx';

Plus bas t'as oublié de censurer. :o Mais peu importe, c'est une adresse locale, heureusement! ("L'internet des choses" a beaucoup fait parler de lui par rapport aux failles diverses et variées qu'il contient... :o )

Reply

Marsh Posté le 20-11-2017 à 04:27:19    

Salut,
 
je te remercie de ta réponse clair et rapide.
 
ca fait pas trop de boulot, et je me doute bien qu'il faut modifier et écrire quelques lignes de plus...
ta méthode me va tres bien, et en plus ca fonctionne a merveille.
 
donc meme si il y a plus élégant, celle-ci est compréhensive...
 
pour ce qui est de l'IP , j'avais masqué l'IP public mais pas celle interne qui en plus n'est pas utiliser...
mon internet de chaudière est en effet pas tres sécurisé, mais quel est le risque de me faire pirater... qu'on me coupe le chauffage?  :lol:  
 
 
Merci pour ton coup de pouce! :bounce:  
 

Message cité 1 fois
Reply

Marsh Posté le 20-11-2017 à 17:44:18    

sapeur3873 a écrit :

IP public

Aie.
 

Citation :

mon internet de chaudière est en effet pas tres sécurisé, mais quel est le risque de me faire pirater... qu'on me coupe le chauffage?  :lol:

P.ex. ou alors mettre le chauffage sur max quand t'es en vacances avec une grosse facture à la fin ou alors simplement pirater le truc et l'utiliser pour des attaques DDoS ou autre. Il y a probablement un moyen de passer outre cette interface web, peut-être carrément un accès telnet qui donne un shell root ou autre, ça ne serait pas le premier produit avec ce genre de problèmes... Il y a au moins un mot de passe pour accéder aux réglages? C'est un truc commercial ou fait maison? Et est-ce que tu as vraiment besoin de pouvoir contrôler ton chauffage depuis n'importe ou? Enfin peu importe, c'est HS finalement. Tu auras deviné que je ne suis pas un fan du "IoT" (le 'S' signifie sécurité). :o

Reply

Marsh Posté le 20-11-2017 à 18:04:28    

comme tu le vois au code html, c'est du entierement fait maison.
un petit arduino qui pilote tout ca.
 
je ne suis pas fan des IOT, surtout ceux que l'on achete tout fait...
apres ce 'est qu'un bout de code dans un fichier html que j'ai sur mon telephone, ou mon ordi.. il n'est pas en acces  via un site internet.
 
non il y a pas de mot de passe.
 
mais apres quelques temps d'utilisation, oui c'est vraiment un plus de pouvoir visualiser et controler sa chaudiere (eau chaude/ chauffage) a distance.
 
si ils veulent mettre le chauffage au max, ils peuvent!!!
c'est une chaudiere au pellet quand le bac est vide, elle s'arrete.
 
par contre avantage, je pars en vacance quelques jours, je la bascule en hors gel, et avant mon retour, je peut la redemarrer.
 
je peut aussi mettre en mode creuse, pendant mon absence et si je dois rentrer plus tot , je repasse en mode plein...
 
et comme c'est un systee fait maison, elle envoi aussi des emails pour m'indiquer si mon bac est vide, si elle loupe un demarrage etc...
 
j'avous que c'est aussi parcque je me suis amusé a faire tout ca.. ca n'a rien de vital!
juste un passe temps qui m'amuse.
 
 

Reply

Marsh Posté le 20-11-2017 à 18:12:14    

Je comprends. C'est sûr que ce n'est pas un risque vital de rendre ça accessible par internet et un Arduino n'a pas beaucoup de puissance de calcul pour faire des bêtises avec, mais de manière générale ce que je disais ce sont des points auxquels il faut penser. Juste une remarque:

Citation :

par contre avantage, je pars en vacance quelques jours, je la bascule en hors gel, et avant mon retour, je peut la redemarrer.
 
je peut aussi mettre en mode creuse, pendant mon absence et si je dois rentrer plus tot , je repasse en mode plein...

En regardant ton chauffage (par internet sans mot de passe) on peut donc savoir si t'es chez toi ou pas (et si c'est pour la journée ou pour quelque jours), c'est pratique pour certaines choses... (genre un cambriolage) Bon, après la encore c'est un scénario pas forcément très probable, mais sur le principe c'est une chose possible.
 
Enfin bref, désolé pour le HS...

Reply

Marsh Posté le 20-11-2017 à 18:19:35    

pas de souci, mais tu as raison...
 
merci pour tes remarques! et surtout pour ton aide...

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed