sapeur3873 | 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 :
- <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr" style="height: 100%">
- <head>
- <title>Chaudière</title>
- <meta http-equiv="Content-Type" content="text/html; charset=ANSI" />
- <meta http-equiv="Content-Language" content="fr" />
- <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
- <LINK href="./styles.css" type=text/css rel=stylesheet>
- <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
- <script type="text/javascript">
- var mb_AutoRefresh = true;
- var ms_Server = 'http://xx.xx.xx.xx';
- function DisplayResult(po_Data)
- {
- console.log(po_Data);
- $('#Date').html(po_Data.date.day + '/' + po_Data.date.month + '/' + po_Data.date.year);
- $('#Time').html(po_Data.time.hour + ':' + po_Data.time.minute);
- $('#auto').html(po_Data.state.auto);
- $('#hiver').html(po_Data.state.hiver);
- $('#mode').html(po_Data.state.mode);
- $('#type').html(po_Data.state.type);
- $('#prog').html(po_Data.state.prog);
- $('#etat_circ_chauff').html(po_Data.relay.etat_circ_chauff);
- $('#etat_circ_ECS').html(po_Data.relay.etat_circ_ECS);
- $('#etat_bruleur').html(po_Data.relay.etat_bruleur);
- $('#T_eau').html(po_Data.value.t_eau);
- $('#T_chaudiere').html(po_Data.value.t_chaudiere);
- $('#T_consigne').html(po_Data.value.cons_chaudiere);
- $('#T_ext').html(po_Data.value.t_ext);
- $('#T_int').html(po_Data.value.t_int);
- $('#H_ext').html(po_Data.value.h_ext);
- $('#H_int').html(po_Data.value.h_int);
- $('#consigne').html(po_Data.value.consigne);
- $('#niveau').html(po_Data.value.niveau);
- $('#CO').html(po_Data.value.gas_co);
- $('#smoke').html(po_Data.value.gas_smoke);
- $('.LoadingShow').hide();
- $('.LoadingHide').show();
- $('.Button[data-code="auto"]').removeClass('VeryPositive').filter('[data-value=' + po_Data.state.auto + ']').addClass('VeryPositive');
- $('.Button[data-code="prog"]').removeClass('VeryPositive').filter('[data-value=' + po_Data.state.prog + ']').addClass('VeryPositive').attr('checked', true);
- $('#debut_AM').html(po_Data.param.debut_AM);
- $('#fin_AM').html(po_Data.param.fin_AM);
- $('#debut_PM').html(po_Data.param.debut_PM);
- $('#fin_PM').html(po_Data.param.fin_PM);
- $('#debut_AM1').html(po_Data.param.debut_AM);
- $('#fin_PM1').html(po_Data.param.fin_PM);
- $(this).css({ 'color': 'red', 'font-size': '150%' });
- if (mb_AutoRefresh)
- {
- window.setTimeout(RefreshData, 30000);
- }
- }
- function Ready()
- {
- RefreshData();
- }
- function Loading_Start()
- {
- $('.LoadingShow').show();
- $('.LoadingHide').hide();
- }
- function RefreshData()
- {
- Loading_Start();
- $.getJSON(ms_Server + '/Service/GetValue', DisplayResult);
- }
- function deletelogdata()
- {
- $.getJSON(ms_Server + '/Service/Delete');
- }
- function SetValue(pe_Button)
- {
- Loading_Start();
- var ls_Code = $(pe_Button).attr('data-code');
- var ls_Value = $(pe_Button).attr('data-value');
- var lo_Data = {};
- lo_Data[ls_Code] = ls_Value;
- $.get(ms_Server + '/Service/SetValue',
- lo_Data,
- RefreshData);
- }
- $(document).ready(function () { Ready(); });
- </script>
- <style type="text/css">
- /*****code CSS******/
- A.bl:link {TEXT-DECORATION: underline; color: #00549A}
- A.bl:visited {TEXT-DECORATION: underline; color: #00549A}
- A.bl:hover {COLOR: rgb(0,153,0); TEXT-DECORATION: none}
- A.bl:active {color: rgb(0,153,0); TEXT-DECORATION: underline}
- .textb {font-family:Verdana; font-size: 11; color: black }
- .text {font-family: Verdana; font-size: 10; color: rgb(102,102,102)}
- .ttt {font-size:100%; line-height:130%; margin-bottom:0.5em; margin-top:0; text-indent:0em; text-align: center;}
- .text2 {font-family:Verdana; font-size: 13; color: rgb(102,102,102); }
- .leb {font-size:100%; line-height:130%; margin-bottom:0.5em; margin-top:0; text-indent:0em;}
- .textBl {font-family:Verdana; font-size: 13; color: black }
- .level {font-family:Verdana; font-size: 18; color: #616351; font-weight: normal; TEXT-DECORATION: none}
- .laurent {font-family: Tahoma; font-size: 26; color: white; font-weight: bold }
- .texts {font-family:Verdana; font-size: 11; color: rgb(102,102,102) }
- .slider { background-image: url(slider_bg.gif); background-repeat: repeat-x; }
- .knob { position: relative; background-image: url(knob.gif); }
- /********************************************************************/
- /* BUTTONS */
- /********************************************************************/
- a.Button
- {
- display: inline-block;
- margin: 5px 5px 5px 5px;
- background-color: #EAEAEA;
- border-style: solid;
- border-width: 1px;
- text-decoration: none;
- font-size: 100%;
- font-weight: bold;
- cursor: pointer;
- padding: 5px 5px 5px 5px;
- border-radius: 5px 5px 5px 5px;
- -moz-border-radius: 5px 5px 5px 5px;
- -webkit-border-radius: 5px 5px 5px 5px;
- background: -webkit-gradient(linear, left top, left bottom, from(#F0F0F0), to(#D0D0D0));
- background: -moz-linear-gradient(top,#F0F0F0, #D0D0D0);
- width: 50%;
- height: 30px;
- }
- a.Button:hover, a.Button:active, a.Button:focus {
- text-decoration: none;
- }
- /* Make sure there is a space between the image and the text */
- a.Button img { padding-right: 5px;
- padding-left: 5px; }
- /* STANDARD */
- a.Button {
- border-color: #D0D0D0;
- color: #111111;
- }
- a.Button:hover, a.Button:active, a.Button:focus {
- background-color: #EAF5FF;
- border-color: #8AB6DD;
- color: #0557A0;
- background: -webkit-gradient(linear, left top, left bottom, from(#EAF5FF), to(#AAD6FD));
- background: -moz-linear-gradient(top, #EAF5FF, #AAD6FD);
- }
- /* DISABLED */
- a.Disabled {
- color: #999999;
- }
- a.Disabled:hover, a.Disabled:active, a.Disabled:focus {
- background-color: #EAEAEA;
- border-color: #A0A0A0;
- color: #666666;
- background: -webkit-gradient(linear, left top, left bottom, from(#F0F0F0), to(#D0D0D0));
- background: -moz-linear-gradient(top,#F0F0F0, #D0D0D0);
- }
- a.Disabled img {
- filter:alpha(opacity=30);
- opacity:0.30;
- }
- a.Disabled:hover img, a.Disabled:active img, a.Disabled:focus img {
- filter:alpha(opacity=50);
- opacity:0.5;
- }
- /* POSITIVE */
- a.Positive {
- color: #119911;
- }
- a.Positive:hover, a.Positive:active, a.Positive:focus {
- background-color: #E0FFE0;
- border-color: #A0F0A0 !important;
- color: #669966;
- background: -webkit-gradient(linear, left top, left bottom, from(#F0FFF0), to(#D0FFD0)) !important;
- background: -moz-linear-gradient(top, #F0FFF0, #D0FFD0) !important;
- }
- a.VeryPositive,a.VeryPositive:hover, a.VeryPositive:active, a.VeryPositive:focus {
- background-color: #C0FFC0;
- border-color: #A0F0A0 !important;
- color: #229922 !important;
- background: -webkit-gradient(linear, left top, left bottom, from(#D0FFD0), to(#A0FFA0)) !important;
- background: -moz-linear-gradient(top, #D0FFD0, #A0FFA0) !important;
- }
- /* NEGATIVE */
- a.Negative {
- color: #991111;
- }
- a.Negative:hover, a.Negative:active, a.Negative:focus {
- background-color: #FFE0E0 !important;
- border-color: #F0A0A0 !important;
- color: #996666 !important;
- background: -webkit-gradient(linear, left top, left bottom, from(#FFF0F0), to(#FFD0D0)) !important;
- background: -moz-linear-gradient(top,#FFF0F0, #FFD0D0) !important;
- }
- a.VeryNegative,a.VeryNegative:hover, a.VeryNegative:active, a.VeryNegative:focus {
- background-color: #FFC0C0 !important;
- border-color: #F0A0A0 !important;
- color: #992222 !important;
- background: -webkit-gradient(linear, left top, left bottom, from(#FFD0D0), to(#FFA0A0)) !important;
- background: -moz-linear-gradient(top, #FFD0D0, #FFA0A0) !important;
- }
- /* SELECTED */
- a.Selected {
- color: #111111 !important;
- border-color: #0557A0 !important;
- background-color: #7DBEFA !important;
- background: -webkit-gradient(linear, left top, left bottom, from(#96CAFA), to(#4BA5FA)) !important;
- background: -moz-linear-gradient(top, #96CAFA, #4BA5FA) !important;
- }
- a.Selected:hover, a.Selected:active, a.Selected:focus {
- color: #222299;
- border-color: #0557A0 !important;
- background-color: #7DBEFA !important;
- background: -webkit-gradient(linear, left top, left bottom, from(#96CAFA), to(#4BA5FA)) !important;
- background: -moz-linear-gradient(top, #96CAFA, #4BA5FA) !important;
- }
- b.Button
- {
- display: inline-block;
- margin: 5px 5px 5px 5px;
- background-color: #EAEAEA;
- border-style: solid;
- border-width: 1px;
- text-decoration: none;
- font-weight: bold;
- cursor: pointer;
- padding: 5px 10px 6px 7px;
- border-radius: 5px 5px 5px 5px;
- -moz-border-radius: 5px 5px 5px 5px;
- -webkit-border-radius: 5px 5px 5px 5px;
- background: -webkit-gradient(linear, left top, left bottom, from(#F0F0F0), to(#D0D0D0));
- background: -moz-linear-gradient(top,#F0F0F0, #D0D0D0);
- width: 5%;
- height: 25px;
- }
- div#bandeau { width:100%; height:70px; background-color:#00CCFF;
- border-radius: 10px 20px 0px 0px;
- -moz-border-radius: 5px 5px 5px 5px;
- -webkit-border-radius: 5px 5px 5px 5px; }
- div#contenuparam { width:80% ;float:left; height:600px; background-color: lightgrey; }
- div#contenu { width:80% ;float:left; height:200px; background-color: lightgrey; }
- div#contenu1 { width:80% ;float:left; height:250px; background-color: lightgrey; }
- div#contenu2 { width:80% ;float:left; height:150px; background-color: lightgrey; }
- div#piedpage { width:100%; clear:both; background-color:#33FF99; }
- div#menu { float:left; width:20%; height:600px; background-color: #F5ECCE;
- border-radius: 5px 5px 5px 5px;
- -moz-border-radius: 5px 5px 5px 5px;
- -webkit-border-radius: 5px 5px 5px 5px; }
- .IO_temp {
- float: left;
- margin: 2% 0 2% 5%;
- border: 1px solid ligthgrey;
- padding: 0px 2px 0px 5px;
- width: 40%;
- height: 200px;
- background-color: lightgrey;
- }
- .IO_cons{
- float: left;
- margin: 2% 0 2% 5%;
- border: 1px solid red;
- padding: 0 0px 0 0px;
- width: 20%;
- height: 150px;
- border-radius: 20px 20px 20px 20px;
- -moz-border-radius: 5px 5px 5px 5px;
- -webkit-border-radius: 5px 5px 5px 5px;
- background-color: lightpink;
- }
- .IO_tempext{
- float: left;
- margin: 5% 0 5% 3%;
- border: 1px solid lightgrey;
- padding: 0 5px 0 5px;
- width: 20%;
- height: 50px;
- background-color: lightgrey;
- }
- .IO_mode {
- float: left;
- margin: 0px 0 5% 5%;
- border: 1px solid blue;
- padding: 0px 2px 0px 5px;
- width: 25%;
- height: 200px;
- background-color: lightblue;
- border-radius: 20px 20px 20px 20px;
- -moz-border-radius: 5px 5px 5px 5px;
- -webkit-border-radius: 5px 5px 5px 5px;
- }
- .IO_brul {
- float: left;
- margin: 0 20px 20px 0;
- border: 1px solid green;
- padding: 0 5px 0 5px;
- width: 590px;
- background-color: lightgreen;
- }
- h1 {
- font-size: 150%;
- color: blue;
- margin: 0 2px 0px 0;
- }
- h2 {
- font-size: 100%;
- color: #5734E6;
- margin: 5px 0 5px 0;
- }
- form {
- font-size: 120%;
- color: #252525;
- }
- p{
- font-size: 110%;
- color: #252525;
- }
- temp{
- font-size: 500%;
- color: #252525;
- }
- tempext{
- font-size: 150%;
- color: #252525;
- }
- time{
- font-size: 150%;
- color: #252525;
- }
- cons{
- font-size: 300%;
- color: #252525;
- }
- petit{
- font-size: 60%;
- color: #737373;
- }
- /****fin code julien****/
- </style>
- </head>
- <body>
- <div id="bandeau">
- <center>
- <h1>Chaudiere</h1>
- <span id="Date">Date</span> <span id="Time">Hour</span>
- </center>
- </div>
-
- <div id="menu">
- <center>
- <h2>Pilotage</h2>
- <br>
- <div>
- <a class="Button" data-code="auto" data-value="0" onclick="SetValue(this);">Arret</a><br>
- <a class="Button" data-code="auto" data-value="4" onclick="SetValue(this);">Auto</a><br>
- <a class="Button" data-code="auto" data-value="1" onclick="SetValue(this);">F_Eau chaude</a><br>
- <a class="Button" data-code="auto" data-value="2" onclick="SetValue(this);">F_Chauffage</a><br>
- <a class="Button" data-code="auto" data-value="5" onclick="SetValue(this);">Hors Gel</a><br>
- </div>
- <br>
- <br>
- <br>
- <br>
- <div>
- <a class="Button" data-code="prog" data-value="1" onclick="SetValue(this);">Prog 1</a><br />
- <a class="Button" data-code="prog" data-value="2" onclick="SetValue(this);">Prog 2</a><br />
- </div>
- <br>
- <br>
- <br>
- <!--<a href= "http://192.168.2.180/datalog.csv" title="données sauvegardées" target="_blank">données sauvegardées</a><br />
- <a href= "http://192.168.2.180/Service/Delete" title="efface fichier" target="_blank">efface fichier</a><br />-->
- <a href= "param.htm" title="parametres" target="">parametrage</a>
- </center>
- </div>
- <div id="contenu">
- <center>
-
- <div class="IO_temp">
- <center>
- <temp><span id="T_int">...</span> °C </temp>
- <p><span id="H_int">...</span> %</p>
- </center>
- </div>
- <div class="IO_cons">
- <a>Consigne</a> <br />
- <a class="Button" data-code="temperature" data-value="plus" onclick="SetValue(this);">+</a>
- <h1><span id="consigne">...</span> °C </h1>
- <a class="Button" data-code="temperature" data-value="minus" onclick="SetValue(this);">-</a>
-
- </div>
- <div class="IO_tempext">
- <h2> Temperature ext</h2>
- <p> <span id="T_ext">...</span> °C // <span id="H_ext">...</span> %</p>
- </div>
- </center>
- </div>
- <div id="contenu1">
- <center>
- <div class="IO_mode">
- <h2>Information</h2>
- <p>ECS: <span id="T_eau">...</span> °C</p>
- <p>Chaudiere: <span id="T_chaudiere">...</span> °C</p>
- <p>Niveau: <span id="niveau">...</span> % </p>
- <p>CO:<span id="CO">...</span> ppm / Fumée:<span id="smoke">...</span> ppm</p>
- </div>
- <div class="IO_mode" float : center;>
- <h2> Mode </h2>
- <p>Mode hiver : <span id="hiver">...</span></p>
- <p>Mode jour: <span id="mode">...</span></p>
- <p>Mode automatique: <span id="auto">...</span></p>
- <p>type de chauffe: <span id="type">...</span></p>
- </div>
- <div class="IO_mode">
- <h2>Etat</h2>
- <p>circulateur chauffage: <span id="etat_circ_chauff">...</span></p>
- <p>circulateur ECS: <span id="etat_circ_ECS">...</span></p>
- <p>Bruleur: <span id="etat_bruleur">...</span></p>
- </div>
- </center>
- </div>
- <div id="contenu2">
- <center>
- <div class="IO_box1">
- <h2>Consigne du bruleur</h2>
-
- <p>la consigne envoye au bruleur est de: <span id="T_consigne">...</span> °C<p>
- </div>
- </center>
- </div>
- <div id="piedpage">
- <center>
-
- <h2>Notice</h2>
- </center>
- <petit> Mode chaudiere ==> 0: arret, 1: mode forcage ECS, 2: mode forcage chauffage, 4: Mode auto, 5:hors gel </petit> <br />
- <petit> Type de chauffe ==> 0: pas de chauffe, 1: ECS, 2: chauffage jour, 3: chauffage nuit , 4: hors gel </petit><br />
- <petit> Prog 1:
- heure de debut matin :
- <span id="debut_AM">Hour</span>
- , heure fin matin :
- <span id="fin_AM">Hour</span>
- , heure debut Aprem :
- <span id="debut_PM">Hour</span>
- , heure fin Aprem :
- <span id="fin_PM">Hour</span> </petit>
- <br />
- <petit> Prog 2:
- heure de debut matin :
- <span id="debut_AM1">Hour1</span>
- , heure fin Aprem :
- <span id="fin_PM1">Hour2</span> </petit>
- </div>
- </body>
- </html>
|
|