Probably dumb question with clock

MIT App Inventor Help
1

Hello, im trying to output 2 value collected from webviewstring(assigned via clock) in 2 separate div but im getting a strange error, 90% of the time the value is the same (the 2nd assigned "mlml2") for both text and water text, anyone have an idea why this is happening? thanks in advande and sorry for the bad english im not a native speaker.

Here is the block im using:

0ROecN
0ROecN1103×604 56.2 KB

And here the js code:

        function myFunction_test(a) {
            var r = document.querySelector(':root'); // css variable root
            var prop_selector = null; //initialize var
            var suffix_selector = null;
            var div_selector = null;
            switch (a) {
                case 'temp':
                    prop_selector = '--temp_val'; //css variable
                    suffix_selector = '%'; // suffix for css value
                    div_selector = 'temp_textdiv'; //selected div for text output
                    break;
                case 'water':
                    prop_selector = '--changes';
                    suffix_selector = 'px';
                    div_selector = 'water_textdiv';
                    break;
                case 'light':
                    break;
            }
            var webString = window.AppInventor.getWebViewString(); //get value  webviewstring
            var rs = getComputedStyle(r); // for css var 
            var rsc = rs.getPropertyValue(prop_selector); //css get css property value
            r.style.setProperty(prop_selector, webString + suffix_selector); //set new property value
            document.getElementById(div_selector).innerHTML = webString + div_selector; //output value
        }

example:
correct:(10% of the time)

11
11315×680 51.2 KB

incorrect:(90% of the time)

22
22331×680 52 KB

2

What is the clock timer interval ?

3

i tried with either 3000 or 5000.
in the example was set to 5000

4

Just built an example, which appears to be reliable

image
image840×661 64.6 KB 

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

<head>
	<title>Time JS</title>
	
</head>

<body>
	<h2>Get Values</h2>
	<p id="water">Water: 0</p>
	<p id="light">Light: 0</p>
	
	
	<script>
	
	function setValues() {
		var wl = window.AppInventor.getWebViewString().split(",");
		document.getElementById("water").innerHTML = "Water: " + wl[0];
		document.getElementById("light").innerHTML = "Light: " + wl[1];
	}
	
	</script>
</body>

</html>

Might help to combine the values in the webviewstring to reduce the number of calls ...?

You could also try using setInterval(setValues(),3000); in the script, to run a timer in your html (then you do not have to send javascript), just change webviewstring values in your app.

1 Like
5

Thank you very much, any idea why the other one isn't ?

6

Probably a timing issue (not to do with the clock, but the blocks)

7

Have you seen this WebViewer event block?
component_event

It guarantees completion of the Javascript, unlike the Clock.

To do multiple runs, use lists for the input values and deplete them as you go.

1 Like