Javascript Disabled Detected

You currently have javascript disabled. Several functions may not work. Please re-enable javascript to access full functionality.

« 1 / 5 »

problema receptie posturi

Memorii USB 3.0 merg doar pe port...

Se modifica numerotarea sectoarel...

Daikin, ce model sa aleg...

Conectare 2 PC-uri

Nokia sau Motorola

Nu porneste monitorul iar PC-ul s...

Intrebare centrala Ariston HS Pre...

Mutare contor electric.

Instalare aplicatie speed test pe...

Ce model de cheder este ?

Contract B2B cu relocare in Bruxe...

Intrebare boiler perioada nefolos...

Grupa mijlocie de gradinița,...

Recomandare imprimanta

Sistem de navigatie GPS + DVR PNI...

View New Content

Real time - WebPage

Last Updated: Jun 03 2020 21:28, Started by Qipper , Jun 03 2020 10:56

Please log in to reply

6 replies to this topic

#1
Qipper

Posted 03 June 2020 - 10:56

Junior Member

Grup: Members
Posts: 226
Înscris: 04.07.2017

Salut , lucrez la un proiect pentru care am facut o pagina web  si vreau sa afisez ora si data in timp real adica fara sa dau refresh la pagina . Codul  face parte dintr-un cod ArduinoIDE  , si html-ul acolo e gramada de aia l-am copiat  ca sa intelegeti mai usor  ) .
In pagina am 4 grafice , ele functioneaza in timp real cu datele primite de la cativa senzori .  Dar cu ora si data nu reusesc nici cum sa le afisez dupa simbolul ala de ceas si sa nu imi afecteze restul adica graficele . Ce e scris in cod referitor la ceea ce vreau sa fac , e scris doar asa , ca idee .
Daca ma puteti lumina  , v-as fi  recunoscator.  Va atentionez , daca vedeti ceva scris prost , nu ma blamati , sunt incepator Posted Image

) imi asum asta .
Accept si PM . Bagati codul intr-un Notepad si vedeti cum arata pagina , ca sa intelegeti despre ce vorbesc pentru ca nu am putut uploada aici pagina .

Multumesc!

Spoiler

<!DOCTYPE HTML><html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.highcha...ts.js"</script>
<style>
	body {
	 min-width: 310px;
	 max-width: 1000px;
	 height: 400px;
	 margin: 0 auto;
	}
	h2 {
	 font-family: TimeNewRoman;
	 font-size: 2.5rem;
	 text-align: center;
	}
</style>
</head>
<h2> Welcome !</h2>
	<br>
	 <img src="data:image/png;base64,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" width="20" height="20" align="middle" style="padding-bottom: 12px;">
	 <span style="font-size:1.0rem;">Time </span>
	 <span id="time" style="font-size:1.0rem;"></span>
	 <br>
	 <br>
	<div id="chart-temperature" class="container"></div>
	 <br>
	 <br>
		<br>
		 <br>
	<div id="chart-humidity" class="container"></div>
	<br>
	 <br>
		<br>
		 <br>
<div id="chart-firstsensor" class="container"></div>
	<br>
	 <br>
		<br>
		 <br>
<div id="chart-secondsensor" class="container"></div>
</body>
<script>
const currentTime = new Date(Date.now()); // UTC
document.write(currentTime.toLocaleTimeString('ro-RO'));
document.write("<BR>");
var offset = new Date().getTimezoneOffset();
document.write(offset);[/b]
[b]var chartT = new Highcharts.Chart({
chart:{ renderTo : 'chart-temperature' },
title: { text: 'Temperatura ' },
series: [{
	showInLegend: false,
	data: []
}],
plotOptions: {
	line: { animation: true,
	 dataLabels: { enabled: true }
	},
	series: { color: '#059e8a' }
},
xAxis: { type: 'datetime',
	dateTimeLabelFormats: { second: '%H:%M:%S' }
},
yAxis: {
	title: {text: 'Temperatura (*C)' }
},
credits: { enabled: false }
});
setInterval(function ( ) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
	if (this.readyState == 4 && this.status == 200) {
	 var x = (new Date()).getTime() + 1000 * 60 * 60 * 3,
		 y = parseFloat(this.responseText);
	 if(chartT.series[0].data.length > 12) {
		chartT.series[0].addPoint([x, y], true, true, true);
	 } else {
		chartT.series[0].addPoint([x, y], true, false, true);
	 }
	}
};
xhttp.open("GET", "/temperature", true);
xhttp.send();
}, 3000 ) ;[/b]
[b]var chartH = new Highcharts.Chart({
chart:{ renderTo:'chart-humidity' },
title: { text: 'Umiditate aer ' },
series: [{
	showInLegend: false,
	data: []
}],
plotOptions: {
	line: { animation: false,
	 dataLabels: { enabled: true }
	}
},
xAxis: {
	type: 'datetime',
	dateTimeLabelFormats: { second: '%H:%M:%S' }
},
yAxis: {
	title: { text: 'Umiditate(%)' }
},
credits: { enabled: false }
});
setInterval(function ( ) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
	if (this.readyState == 4 && this.status == 200) {
	 var x = (new Date()).getTime() + 1000 * 60 * 60 * 3,
		 y = parseFloat(this.responseText);
	 if(chartH.series[0].data.length > 12) {
		chartH.series[0].addPoint([x, y], true, true, true);
	 } else {
		chartH.series[0].addPoint([x, y], true, false, true);
	 }
	}
};
xhttp.open("GET", "/humidity", true);
xhttp.send();
}, 3000 ) ;
var chartA = new Highcharts.Chart({
chart:{ renderTo : 'chart-firstsensor' },
title: { text: 'Umiditate sol ( Senzor 1 ) ' },
series: [{
	showInLegend: false,
	data: []
}],
plotOptions: {
	line: { animation: true,
	 dataLabels: { enabled: true }
	},
	series: { color: '#059e8a' }
},
xAxis: { type: 'datetime',
	dateTimeLabelFormats: { second: '%H:%M:%S' }
},
yAxis: {
	title: { text: 'Umiditate (%)' }
},
credits: { enabled: false }
});
setInterval(function ( ) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
	if (this.readyState == 4 && this.status == 200) {
	 var x = (new Date()).getTime() + 1000 * 60 * 60 * 3,
		 y = parseFloat(this.responseText);
	 if(chartA.series[0].data.length > 12) {
		chartA.series[0].addPoint([x, y], true, true, true);
	 } else {
		chartA.series[0].addPoint([x, y], true, false, true);
	 }
	}
};
xhttp.open("GET", "/firstsensor", true);
xhttp.send();
}, 3000 ) ;
var chartB = new Highcharts.Chart({
chart:{ renderTo:'chart-secondsensor' },
title: { text: 'Umiditate sol ( Senzor 2 ) ' },
series: [{
	showInLegend: false,
	data: []
}],
plotOptions: {
	line: { animation: false,
	 dataLabels: { enabled: true }
	}
},
xAxis: {
	type: 'datetime',
	dateTimeLabelFormats: { second: '%H:%M:%S' }
},
yAxis: {
	title: { text: 'Umiditate(%)' }
},
credits: { enabled: false }
});
setInterval(function ( ) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
	if (this.readyState == 4 && this.status == 200) {
	 var x = (new Date()).getTime() + 1000 * 60 * 60 * 3,
		 y = parseFloat(this.responseText);
	 if(chartB.series[0].data.length > 12) {
		chartB.series[0].addPoint([x, y], true, true, true);
	 } else {
		chartB.series[0].addPoint([x, y], true, false, true);
	 }
	}
};
xhttp.open("GET", "/secondsensor", true);
xhttp.send();
}, 3000 ) ;
</script>
</html>

Edited by MarianG, 03 June 2020 - 13:16.
code, spoiler for string breaking layout

#2
MarianG

Posted 03 June 2020 - 13:19

be that as it may

Grup: Moderators
Posts: 29,368
Înscris: 10.08.2005

Fa o captura cu "ce nu merge bine".

Edited by MarianG, 03 June 2020 - 13:21.

#3
Qipper

Posted 03 June 2020 - 15:44

Junior Member

Grup: Members
Posts: 226
Înscris: 04.07.2017

MarianG, on 03 iunie 2020 - 13:19, said:

Fa o captura cu "ce nu merge bine".

Attached Files

Untitled.jpg 102.19K 18 downloads

#4
MarianG

Posted 03 June 2020 - 18:15

be that as it may

Grup: Moderators
Posts: 29,368
Înscris: 10.08.2005

https://www.w3school...js_timing_clock

#5
Qipper

Posted 03 June 2020 - 20:30

Junior Member

Grup: Members
Posts: 226
Înscris: 04.07.2017

MarianG, on 03 iunie 2020 - 18:15, said:

https://www.w3school...js_timing_clock

Marian , sa-ti dea Dumnezeu sanatate ! Mersi mult , prietene !
Merge impecabil . Daca mai pun si data , ma pot duce sa lucrez la NASA =))

Edited by Qipper, 03 June 2020 - 20:31.

#6
cat79

Posted 03 June 2020 - 21:14

Junior Member

Grup: Junior Members
Posts: 104
Înscris: 23.07.2015

ajax si jquery, cauta tutoriale arduino yun.

#7
Qipper

Posted 03 June 2020 - 21:28

Junior Member

Grup: Members
Posts: 226
Înscris: 04.07.2017

Am rezolvat si cu data . Site-ul https://www.w3schools.com/ e bestial .
Multumesc mult !

Anunturi

Chirurgia spinală minim invazivă

Chirurgia spinală minim invazivă oferă pacienților oportunitatea unui tratament eficient, permițându-le o recuperare ultra rapidă și nu în ultimul rând minimizând leziunile induse chirurgical.

Echipa noastră utilizează un spectru larg de tehnici minim invazive, din care enumerăm câteva: endoscopia cu variantele ei (transnazală, transtoracică, transmusculară, etc), microscopul operator, abordurile trans tubulare și nu în ultimul rând infiltrațiile la toate nivelurile coloanei vertebrale.

www.neurohope.ro

Back to Markup Languages

▶ 0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

© 2001-2023 Softpedia. All rights reserved. Softpedia® and the Softpedia logo are registered trademarks of SoftNews Net SRL.
Ora implicita a Forumului Softpedia este ora standard a Romaniei (GMT+2). Mai multe informatii →
⚠ Postarile afisate pe Forumul Softpedia reprezinta o opinie subiectiva a membrilor care le-au publicat si nu a SoftNews Net SRL.

Real time - WebPage

#1 Qipper Posted 03 June 2020 - 10:56

#2 MarianG Posted 03 June 2020 - 13:19

#3 Qipper Posted 03 June 2020 - 15:44

Attached Files

#4 MarianG Posted 03 June 2020 - 18:15

#5 Qipper Posted 03 June 2020 - 20:30

#6 cat79 Posted 03 June 2020 - 21:14

#7 Qipper Posted 03 June 2020 - 21:28

Anunturi

▶ 0 user(s) are reading this topic

Sign In

#1
Qipper

Posted 03 June 2020 - 10:56

#2
MarianG

Posted 03 June 2020 - 13:19

#3
Qipper

Posted 03 June 2020 - 15:44

#4
MarianG

Posted 03 June 2020 - 18:15

#5
Qipper

Posted 03 June 2020 - 20:30

#6
cat79

Posted 03 June 2020 - 21:14

#7
Qipper

Posted 03 June 2020 - 21:28