Problème Custom Page, multivariables, multicourbes

Forum dédié aux interfaces personnalisables : Custom Pages, Reacticz, Domoboard...
Répondre
DomoEsp32
Messages : 9
Enregistré le : 20 avr. 2021, 18:03

Problème Custom Page, multivariables, multicourbes

Message par DomoEsp32 »

Bonjour,

Le point de départ est le fichier par défaut : custom.example
Comment modifier cette fonction ( = function(data) )
pour afficher la 1ère, la 2ème ou la 3ème valeur du champ "Data" renvoyé par Json?

La plupart du temps, le champ "Data" présente une seule valeur..
Par exemple, ci-dessous, un device qui renvoyant trois valeurs dans l'item "Data" :
(ce device est du type "CM113, Electrisave ou owl CM180")
{
"ActTime" : 1666289475,
"AstrTwilightEnd" : "20:42",
"AstrTwilightStart" : "06:38",
"CivTwilightEnd" : "19:28",
"CivTwilightStart" : "07:52",
"DayLength" : "10:32",
"NautTwilightEnd" : "20:06",
"NautTwilightStart" : "07:15",
"ServerTime" : "2022-10-20 20:11:15",
"SunAtSouth" : "13:40",
"Sunrise" : "08:24",
"Sunset" : "18:56",
"app_version" : "2022.1",
"result" :
[
{
"AddjMulti" : 1.0,
"AddjMulti2" : 1.0,
"AddjValue" : 0.0,
"AddjValue2" : 0.0,
"BatteryLevel" : 100,
"CustomImage" : 0,
"Data" : "120 Watt, 2500 Watt, 1240 Watt, Total: 3129.493 kWh", <========== Mes Data à afficher (3 valeurs)
"Description" : "",
"Favorite" : 0,
"HardwareDisabled" : false,
"HardwareID" : 5,
"HardwareName" : "Mon RFX",
"HardwareType" : "RFXCOM - RFXtrx433 USB 433.92MHz Transceiver",
"HardwareTypeVal" : 1,
"HaveTimeout" : false,
"ID" : "AA00",
"LastUpdate" : "2022-10-20 20:10:34",
"Name" : "owl-3",
"Notifications" : "false",
"PlanID" : "0",
"PlanIDs" :
[
0
],
"Protected" : false,
"ShowNotifications" : true,
"SignalLevel" : 4,
"SubType" : "CM180i",
"Timers" : "false",
"Type" : "Current/Energy",
"TypeImg" : "current",
"Unit" : 0,
"Used" : 1,
"XOffset" : "0",
"YOffset" : "0",
"displaytype" : 1,
"idx" : "3194"
}
],
"status" : "OK",
"title" : "Devices"
}


La fonction 'Data' est :

Code : Tout sélectionner

	function(data) {
		if (typeof data.ActTime != 'undefined') {
			$.LastUpdateTime=parseInt(data.ActTime);
		}
		if (typeof data.result != 'undefined') {
			if (typeof data.WindSign != 'undefined') {
				$('.windsign').html(data.WindSign);
			}
			if (typeof data.TempSign != 'undefined') {
				$('.degsign').html(data.TempSign);
			}
			$.each(data.result, function(i,item){
				for( var ii = 0, len = $.PageArray.length; ii < len; ii++ ) {
					if( $.PageArray[ii][0] === item.idx ) {
						var vtype=$.PageArray[ii][1];
						var vlabel=$.PageArray[ii][2];
						var vdata=item[vtype];
						if (typeof vdata == 'undefined') {
							vdata="??";
						}
						else {
							vdata=new String(vdata).split(" ",1)[0];
						}
						$('#'+vlabel).html(vdata);
					}
				}
			});
		}
	});
L'appel de cette fonction :

Code : Tout sélectionner

$(document).ready(function() {
	$.LastUpdateTime=parseInt(0);
	$.roomplan=0;
	$.domoticzurl="";//"http://192.168.0.150:8080";
	//format: idx, value, label, comment
	$.PageArray = [
		['3193','Usage','itemp','popo'],
		['3194','Data','ihum','pepe'],    <=========== Mon device 
		['433','Usage','astatw','woonkamer'],
		['630','ForecastStr','otxt','woonkamer'],
		['503','Temp','otemp','buiten'],
		['503','Humidity','ohum','buiten'],
		['627','SetPoint','ihi','room setpoint'],
		['584','Usage','ctmep','elektra'],
		['584','CounterToday','estate','elektra'],
		['3','Rain','rain','rain'],
		['585','CounterToday','sgas','gas'],
		['411','UVI','ohi','uv'],
		['613','Speed','wind','wind'],
		['401','Status','ilow','lamp'],
	];
Le fichier "custom.html" complet :

Code : Tout sélectionner

<link href="http://fonts.googleapis.com/css?family=Orbitron:700" rel="stylesheet" type="text/css">
<style>
body {
	background: #000;
}

div#cnt {
	background: #FF00FF;
	width: 990px;
    margin: 0 auto;
    text-align: center;
}

a, a:visited { text-decoration: none; color: #336699; }
a:hover { text-decoration: none; color: #003366; }

#frame {
	float: left;
	margin: 0px;
	padding: 0px 2px 0px 2px;
}

#label_lg {
	font-family: arial;
	font-weight: normal;
	color: #999;
	font-size: 17px;
	margin-top: -20px;
	height: 25px;
	line-height: 10px;
}

#itemp {
	font-family: Orbitron, serif;
	font-weight: bold;
	width: 570px;
	padding: 5px;
	border: 1px solid #666;
	height: 217px;	
	line-height: 210px; 
	font-size: 180px;	
	color: darkorange;
	margin: 0px ;
}

#ihi, #ilow, #ohi, #ihum, #astat, #astatw, #otemp, #crte,
#ohi, #rain, #ohum, #ocld, #otxt, #ctime, #cycb, #ctemp, #cyce, 
#tmpb, #tmpe, #tmpc, #crte, #ctme, #wind, #state, 
#ctmep, #sgas, #mode, #estate {
	font-family: Orbitron, serif;
	font-weight: bold;
	width: 162px;
	padding: 10px;
	border: 1px solid #666;
	height: 90px;
	line-height: 75px; 		
	font-size: 90px;
	color: #999;
}

#ctime, #cycb, #cyce, #tmpb, #tmpe, #tmpc, #crte, #ctme, #ohi, 
#rain, #ohum, #ocld, #otxt, #otemp, #wind, #astat, #awatt, 
#astatw, #state, #estate, #ctmep, #sgas, #mode {
	height: 65px;
	line-height: 55px;
	color: #999;
}

#state, #estate, #crte, #wind { 
	width: 184px; 
}

#otxt { 
	width: 560px; 
	font-size: 40px;
	line-height: 55px;
	color: darkorange;
}

#al { 
	margin-left: -35px; 
	margin-top: 55px; 
	width: 1050px;height: 570px;	
}
</style>

<div id="cnt">
	<div style="margin-bottom:5px;">
		<div>
			<div>
				<div id="frame">
					<div id="ihum" style="color:lightblue;font-size:50px;">--</div>
					<div id="label_lg">owl-3 (W)</div>
					<div id="ilow" style="font-size:35px;">--</div>
					<div id="label_lg">Lamp State</div>
				</div>
				<div id="frame">
					<div id="itemp">--</div>
					<div id="label_lg" style="font-size:25px;margin-top:-30px;">Production Panneaux Photo owl-3-cum </div>
				</div>
				<div id="frame">
					<div id="ihi" style="color:teal;font-size:50px;">--</div>
					<div id="label_lg">Temp Set (º<span class="degsign">C</span>)</div>
					<div id="ctemp" style="color:#6666FF;font-size:50px;">--</div>
					<div id="label_lg">Temp Cellar (º<span class="degsign">C</span>)</div>
					</div>
				</div>

				<div>
					<div id="frame">
						<div id="cycb" style="font-size:40px;">--</div>
						<div id="label_lg">Pignon Gauche</div>
					</div>
					<div id="frame">
						<div id="cyce" style="font-size:40px;">--</div>
						<div id="label_lg">Pignon Centre</div>
					</div>
						<div id="frame">
						<div id="state" style="font-size:40px;">--</div>
						<div id="label_lg">Pignon Droite</div>
					</div>
					<div id="frame">
						<div id="tmpb" style="font-size:40px;">--</div>
						<div id="label_lg">Toit Terrasse</div>
					</div>
					<div id="frame">
						<div id="tmpe" style="font-size:40px;">--</div>
						<div id="label_lg">Banc essais</div>
					</div>
				</div>

				<div>
					<div id="frame">
						<div id="mode" style="font-size:40px;;color:#3333cc;">--</div>
						<div id="label_lg">Water Today (ltr)</div>
					</div>
					<div id="frame">
						<div id="sgas" style="font-size:40px;color:#009933;">--</div>
						<div id="label_lg">Gas Today (m³)</div>
					</div>
					<div id="frame">
						<div id="estate" style="font-size:40px;color:#ff3333;">--</div>
						<div id="label_lg">Energy Today (kW)</div>
					</div>
					<div id="frame">
						<div id="ctmep" style="font-size:40px;color:#ff3333;">--</div>
						<div id="label_lg">Current Energy (watt)</div>
					</div>
					<div id="frame">
						<div id="ctme" style="font-size:40px;color:#ff3333;">--</div>
						<div id="label_lg">Highest Consumer</div>
					</div>
				</div>

			<div>
				<div id="frame">
					<div id="rain" style="font-size:40px;">--</div>
					<div id="label_lg">Daily Rain (MM)</div>
				</div>
				<div id="frame">
					<div id="ohi" style="font-size:40px;color:#C34A2C;">--</div>
					<div id="label_lg">UV Sensor</div>
				</div>
				<div id="frame">
					<div id="wind" style="font-size:40px;">--</div>
					<div id="label_lg">Wind Velocity (<span class="windsign">km/h</span>)</div>
				</div>
				<div id="frame">
					<div id="otemp" style="font-size:40px;color:darkorange;">--</div>
					<div id="label_lg">Outdoor Temp (º<span class="degsign">C</span>)</div>
				</div>
				<div id="frame">
					<div id="ohum" style="font-size:40px;color:teal;">--</div>
					<div id="label_lg">Outdoor Humidity (%)</div>
				</div>
			</div>

			<div>
				<div id="frame">
					<div id="astat" style="font-size:40px;">--</div>
					<div id="label_lg">Hvac Watt</div>
				</div>
				<div id="frame">
					<div id="otxt">--</div>
					<div id="label_lg">Weather Forecast at Hilversum Netherlands</div>
				</div>
				<div id="frame">
					<div id="astatw" style="font-size:40px;">--</div>
					<div id="label_lg">owl-1</div>
				</div>
			</div>
		</div>
	</div>
</div>

<script type="text/javascript" charset="utf-8">
function RefreshData()
{
	clearInterval($.refreshTimer);
	var jurl=$.domoticzurl+"/json.htm?type=devices&plan="+$.roomplan+"&lastupdate="+$.LastUpdateTime+"&jsoncallback=?";
	$.getJSON(jurl,
	{
		format: "json"
	},
	function(data) {
		if (typeof data.ActTime != 'undefined') {
			$.LastUpdateTime=parseInt(data.ActTime);
		}
		if (typeof data.result != 'undefined') {
			if (typeof data.WindSign != 'undefined') {
				$('.windsign').html(data.WindSign);
			}
			if (typeof data.TempSign != 'undefined') {
				$('.degsign').html(data.TempSign);
			}
			$.each(data.result, function(i,item){
				for( var ii = 0, len = $.PageArray.length; ii < len; ii++ ) {
					if( $.PageArray[ii][0] === item.idx ) {
						var vtype=$.PageArray[ii][1];
						var vlabel=$.PageArray[ii][2];
						var vdata=item[vtype];
						if (typeof vdata == 'undefined') {
							vdata="??";
						}
						else {
							vdata=new String(vdata).split(" ",1)[0];
						}
						$('#'+vlabel).html(vdata);
					}
				}
			});
		}
	});
	$.refreshTimer = setInterval(RefreshData, 10000);
}

$(document).ready(function() {
	$.LastUpdateTime=parseInt(0);
	$.roomplan=0;
	$.domoticzurl="";//"http://192.168.0.150:8080";
	//format: idx, value, label, comment
	$.PageArray = [
		['3193','Usage','itemp','popo'],
		['3194','Data','ihum','pepe'],
		['433','Usage','astatw','woonkamer'],
		['630','ForecastStr','otxt','woonkamer'],
		['503','Temp','otemp','buiten'],
		['503','Humidity','ohum','buiten'],
		['627','SetPoint','ihi','room setpoint'],
		['584','Usage','ctmep','elektra'],
		['584','CounterToday','estate','elektra'],
		['3','Rain','rain','rain'],
		['585','CounterToday','sgas','gas'],
		['411','UVI','ohi','uv'],
		['613','Speed','wind','wind'],
		['401','Status','ilow','lamp'],
	];

    RefreshData();
});  
</script>
Peut-être en modifiant cette fonction Data : en lui ajoutant un paramètre qui serait le numéro de la Valeur à afficher : 1 , 2 ou 3 dans ce cas.

D'avance merci.
Fichiers joints
CustomPage.jpg
CustomPage.jpg (383.48 Kio) Vu 374 fois

Keros
Messages : 3782
Enregistré le : 23 juil. 2019, 20:57

Modération

Message par Keros »

Sujet déplacé dans la section dédiée aux custom pages.

Répondre