Webviewer +JSON requests for data [basically live javascript] in HTML WEB PAGE

MIT App Inventor Help
, , ,
#1

Hey, I am new to MIT app inventor, and I was working on an app for a project. So I have a website [Not public, sorry!], which I am displaying. The website is linked to an API which has some Arduino data which gets updated live. The JavaScript of the HTML updates the web page every 5 seconds, But I noticed that the app never gets updated. Is there any solution for this.

PS: I am new to the forum too, so If I have not provided any data which might be useful, do ask.

Thanks in advance :smiley: ,
Bumblebee

#2

Your relevant blocks
Your javascript/html
Inevitably, the website would be useful
Does the site with the javascript work in an android Chrome browser (or on a computer) ?

#3

Hi, thanks for your prompt reply.

Here is the data you asked for:

Code of my mit app screen:
It needs a login system, therefore, it has a join block to provide the page with a secret key...

image
image867×287 15.7 KB 

async function doDo() {
	var a = await fetch("<MY LINK HERE>" + localStorage.getItem('sec'))
		.then((response) => response.json())
		.then((data) => {
			document.getElementById("lpg").innerHTML = data.lpg;
			document.getElementById("co2").innerHTML = data.co2;
			document.getElementById("co").innerHTML = data.co;
			document.getElementById("smoke").innerHTML = data.smoke;
			if (parseFloat(data.co2) < 500) {
				document.getElementById("co2box").style.backgroundColor = "#00e400";
			}
			else if (parseFloat(data.co2) < 700) {
				document.getElementById("co2box").style.backgroundColor = "#ffff00";
			}
			else {
				document.getElementById("co2box").style.backgroundColor = "#ff0000";
			}
			if (parseFloat(data.co) < 2) {
				document.getElementById("coBox").style.backgroundColor = "#00e400";
			}
			else if (parseFloat(data.co) < 4) {
				document.getElementById("coBox").style.backgroundColor = "#ffff00";
			}
			else {
				document.getElementById("coBox").style.backgroundColor = "#ff0000";
			}
			if (parseFloat(data.lpg) < 0.2) {
				document.getElementById("lpgBox").style.backgroundColor = "#00e400";
				document.getElementById("smokeBox").style.backgroundColor = "#00e400";
			}
			else if (parseFloat(data.lpg) < 0.4) {
				document.getElementById("lpgBox").style.backgroundColor = "#ffff00";
				document.getElementById("smokeBox").style.backgroundColor = "#ffff00";
			}
			else {
				document.getElementById("lpgBox").style.backgroundColor = "#ff0000";
				document.getElementById("smokeBox").style.backgroundColor = "#ff0000";
			}
			return data;
		});
	if (a.status == "online") {
		document.getElementById("d1").innerHTML = "online";
		document.getElementById("d1").style.color = "#00e400";
		document.getElementById("d2").innerHTML = "online";
		document.getElementById("d2").style.color = "#00e400";
	}
	else {
		document.getElementById("d2").innerHTML = "offline";
		document.getElementById("d2").style.color = "#ff0000";
		document.getElementById("d1").innerHTML = "offline";
		document.getElementById("d1").style.color = "#ff0000";
	}
	//setDial(a.aqi);





}


setInterval(doDo, 5000);

localstorage.getItem is the secret key which it uses to fetch from the api.

#4

The webviewer component does not use local storage.....
You may have to use the webviewstring instead

#5

I uploaded the src on github. This is the source code:

#6

So, Local storage does not work with webviewer?

#7

Thanks so much. I will test without localstorage, and get back.

Thanks again,
Bumblebee.