how i do convert an html page with javascript into an app?

Rui Manuel de Oliveira Pereira

unread,

Jan 7, 2017, 11:23:53 AM1/7/17

to MIT App Inventor Forum

Hi there,

(i am new at this)

I would like to convert a html page into an app.

i want to connect to a server in my home (it's an arduino Yun with a web server, in my LAN ) to control the illumination.

I have this html page who does that.

but in order to do an app, i would like to know i do i send a XMLhttpRequest to the server and grab the XMLhttpResponse..

Can anybody point me the the right direction?

thank's in advance....

index.html

1.png

Taifun

unread,

Jan 7, 2017, 12:41:22 PM1/7/17

to MIT App Inventor Forum

use the web component

see also this App Inventor Classic example here http://stackoverflow.com/a/18749952/1545993

Taifun

Trying to push the limits of App Inventor! Snippets, Tutorials and Extensions from Pura Vida Apps by Taifun.

Rui Manuel de Oliveira Pereira

unread,

Jan 7, 2017, 1:40:45 PM1/7/17

to MIT App Inventor Forum

ok, thank's. ;)

i'm gonna see, if i understand it..

the blocks are not the same, but i'm still new at this..

i might need some help with the responsetype and the responsecode...

but i'm gonna watch it first.

and them i will came back here..

Tim Carter

unread,

Jan 7, 2017, 4:34:51 PM1/7/17

to MIT App Inventor Forum

Or it may be possible to just run the html in a webviewer and avoid recoding (unless the objective is to write it all in the app) ?

Rui Manuel de Oliveira Pereira

unread,

Jan 7, 2017, 5:05:05 PM1/7/17

to MIT App Inventor Forum

Tim,

I already have that, i was just trying to convert it, (instead of the html page that i had saved in the android, i was hoping to do the same thing with an app.

(i'm pretty sure, that app inventor allows it, but i'm not very familiarized with app inventor and i dont know witch blocks to use)

i'm looking at the guideline, that taifun gave me.

Tim Carter

unread,

Jan 7, 2017, 7:55:21 PM1/7/17

to MIT App Inventor Forum

In which case either work through all the arduino info and follow the link Taifun offered

or do a hybrid and write most of the code natively in AI2 and then use setwebstring/getwebstring (the send/receive to web page of AI2) to action a cut down version of your html (might be the same thing as the first suggestion?)

Rui Manuel de Oliveira Pereira

unread,

Jan 8, 2017, 7:33:28 PM1/8/17

to MIT App Inventor Forum

Hi again, i adjust my sketch, in the arduino Yun to just receive a "signal" just a URL (i will deal later with interchange of text between the android and the Yun)

I make a few changes, but i'm not there yet. (This must be something simple, i think, but...)

Could you help me?

thx

Rui

Tim Carter

unread,

Jan 9, 2017, 4:12:32 AM1/9/17

to MIT App Inventor Forum

Hi Rui

What is not working?

Why do you need the getFocus? (How does the button get the focus?) You could put all those blocks in the click event? (Although you might need a clock to help with any required delays)

I presume the data back from the Yun will go in the light blue label ?

How are you getting that data (or is that what you need the help with ?) ?

Tim

Rui Manuel de Oliveira Pereira

unread,

Jan 13, 2017, 3:44:58 PM1/13/17

to MIT App Inventor Forum

Hello Tim, :D

It's already working (only the button part)

I make it simpler.

Now, just missing the feedback part...(the httpResponse, in a <div id=estado>) and put it in the Cyan square.

javascript part (the one i want to replace with the app)


<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="author" content="Rui Pereira">
<meta http-equiv="description" content="Controlo Remoto da Casa">
<meta http-equiv="refresh" content="15">
<title>Caldeira</title>
<script language="Javascript">

function xmlhttpPost(strURL) {
	  var xmlHttpReq = false;
	  var self = this;
	  // Mozilla/Safari/firefox/chrome
	  if (window.XMLHttpRequest) {
			self.xmlHttpReq = new XMLHttpRequest();
	  }
	  // Internet Explorer
	  else if (window.ActiveXObject) {
			self.xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
	  }
	  self.xmlHttpReq.open('POST', strURL, true);
	  self.xmlHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
	  self.xmlHttpReq.onreadystatechange = function() { if (self.xmlHttpReq.readyState == 4) { updatepage(self.xmlHttpReq.responseText); }
	  }
	  self.xmlHttpReq.send(getquerystring());
}

function getquerystring() {
	var form     = document.forms['casa'];
	var valor = form.assoalhada.value;
	qstr = 'assoalhada=' + escape(valor);  // NOTE: no '?' before querystring
	return qstr;
}
function updatepage(str){
	document.getElementById("estado").innerHTML = str;
}

html part (the thee buttons)

<input type="button" class="bg-primary" onclick='JavaScript:xmlhttpPost("/arduino/digital/10")' value="Estado">
</span></span>
<td width="41" class="VerdanaRui"><span class="PretoRui"><span class="btn-primary">
<input  type="button" class="btn-danger" onclick='JavaScript:xmlhttpPost("/arduino/digital/10/1")' value="ON">
</span></span>
<td width="45" class="VerdanaRui"><span class="PretoRui"><span class="btn-primary">
<input type="button" class="btn-success" onclick='JavaScript:xmlhttpPost("/arduino/digital/10/0")' value="OFF">
</span></span>

the html slot with the returned value

<tr><div align="left" id="estado"></div>

i've been seeing some videos, do i need to put in the javascript, the appinventor object ?
something like this? i saw it in: http://stackoverflow.com/questions/29292395/getting-app-inventor-2-variable-values-in-an-html-javascript-file

 <script>
    document.write("The value from the app is<br />" + window.AppInventor.getWebViewString());
    window.AppInventor.setWebViewString("hello from Javascript")
  </script>

Thank's in advance for your patience, Tim.
No rush, when you have a little time, i would like to look into it.

regards.

Tim Carter

unread,

Jan 13, 2017, 6:00:18 PM1/13/17

to MIT App Inventor Forum

Yes

In essence you need to

a) send the webviewer a "getwebString" which will set off your javascript scripts

b) set a variable, output by the javascript scripts to the "setWebString" which will be returned to the AI2 app

this may help

http://ai2.appinventor.mit.edu/reference/components/userinterface.html#WebViewer

Reply all

Reply to author

Forward

<html>
	<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<meta http-equiv="author" content="Rui Pereira">
	<meta http-equiv="description" content="Controlo Remoto da Casa">
	<meta http-equiv="refresh" content="15">
	<title>Caldeira</title>
	<script language="Javascript">

	function xmlhttpPost(strURL) {
	var xmlHttpReq = false;
	var self = this;
	// Mozilla/Safari/firefox/chrome
	if (window.XMLHttpRequest) {
	self.xmlHttpReq = new XMLHttpRequest();
	}
	// Internet Explorer
	else if (window.ActiveXObject) {
	self.xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
	}
	self.xmlHttpReq.open('POST', strURL, true);
	self.xmlHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
	self.xmlHttpReq.onreadystatechange = function() { if (self.xmlHttpReq.readyState == 4) { updatepage(self.xmlHttpReq.responseText); }
	}
	self.xmlHttpReq.send(getquerystring());
	}

	function getquerystring() {
	var form = document.forms['casa'];
	var valor = form.assoalhada.value;
	qstr = 'assoalhada=' + escape(valor); // NOTE: no '?' before querystring
	return qstr;
	}
	function updatepage(str){
	document.getElementById("estado").innerHTML = str;
	}

<input type="button" class="bg-primary" onclick='JavaScript:xmlhttpPost("/arduino/digital/10")' value="Estado">
	</span></span>
	<td width="41" class="VerdanaRui"><span class="PretoRui"><span class="btn-primary">
	<input type="button" class="btn-danger" onclick='JavaScript:xmlhttpPost("/arduino/digital/10/1")' value="ON">
	</span></span>
	<td width="45" class="VerdanaRui"><span class="PretoRui"><span class="btn-primary">
	<input type="button" class="btn-success" onclick='JavaScript:xmlhttpPost("/arduino/digital/10/0")' value="OFF">
	</span></span>