Getting HTML, CSS & Java out of the Prop , and on a Server and make Net Connected

Igor_Rast

Here we go again ,

Hello Fellow Form Members . On the project of creating a webased controller , with the proppeller + wiznet + temp&humidity sensor .
I just had to start a new tread to keep it a little on target sorry for that . Anyway .

So far, The webserver . (DHCP + Netbios + Basic Authentication + Multisocketserver) is working pretty nice .
the Long version of that story found HERE.

It became clear that it was a good idea to get the html page out of the propeller eerprom and on a webserver . saving some valueable memory space . and giving some more possibilities .

wat the idea is to be able to get the interface running in the 2 possible senarios .
I thouth I nice sketch of whats next is the best way to brainstorm with you for the best solution
the 2 main issues 1. Cross domain xml 2. the Login page (basic Authentication) 3. new login page
So bare with me and here it comes.

Senario 1 (local access)
The propeller gets connected to the local network , wich has internet access. and nothing is further done ( no changes in modem/hub)

1. On a computer/laptop/smartphone you open a brouwser.
2. in the adress bar you type the hostname (or ip if you know it) of the propeller to get accec to the controller (my case http://px-210/)
3. The propeller reacts to you calling the interface, opening up the lets call it for now the redirect_to_login_page ( html page that will still be stored on the eerprom)
4. The Redirect page That is on the propeller redirects you to the Loginpage on the webserver
5. The Login Page opens Up in you brouwser Asking 1. Login Name
2. Login Password
3. Chose option box ( 1. Local / 2. Netconnected.)
6. Here we type in the login name and password . and we set the optionbox to 1 because secario 1 is localy connected to the same network as the propeller.
7. On pressing Login , The username and password get cheched (?? DATABASE/ or Basic Authentication ??)
8. If All Ok (username and password matches), the interfacepage gets called up , This one is also stored on the server ( interfacepage - full HTML page).
9. After that communication stays active , sending & reciving the xml from the propeller to the brouwser thats local.


Senario 2 (Internet access)
The propeller gets connected to the local network , wich has internet access. .In your modem/hub you port forward the propellers ip to the outsideworld. so you can reach it from the net

1. On a computer/laptop/smartphone you open a brouwser.
2. in the brouwser you go to my webpage . and click on the link to go to your interface page .
3. This opens up the Same loginpage as before . But with entering the name+pass data you select the second option that is internet acces .
4. second option selected , an extra inputbox pops on page , asking you to put in you ISP ip adress.
5. On pressing Login , The username and password get cheched (?? DATABASE/ or Basic Authentication ??)
6. If All Ok (username and password matches), the interfacepage gets called up , This one is also stored on the server ( interfacepage - full HTML page).
7. After that communication stays active , sending & reciving the xml from the propeller - modem - Net- You (anywhere on the internet )

This is the main idea.
Implementing it I came accross a few cross brouwser issues , They can be resolved with a proxy ,calling the external page .
Mike give me a verry good one , But implementin it now I came to the problem I think the basic authentication used is bothering it.
this is what i get when I follow Mike G last post . the proxy wil work with a page not saved on the propeller , but when retreving the xml from the prop i get the next screen .

Hoping to get it working ,
And thinking about the possibilities of creating a database orso , to hold the usernames ,
current status : each propeller has a root username and password saved in the eerprom . (not changable)
ideal : Each controller has a root username and passowrd, saved in the eerprom or database / dont know whats best .
if in eerprom , this username sould also get acces to the database online, so the user can create a new username and password , to login with its controller .
maybe comparing the new username and password online and if there is a match still use the root username+pass values to send out to connect to the prop.

database - I have a mysql database running with a phpmyadmin interface to it , maybe usefull in creatin the login page and making it funtion


Hoping to get some good advie and guidance on completing this .

seeing my fromer post also beeing vieuwd alot hope its usefull .
Anything not clear , Just ask . and ill do my best to explain

Mike G

But implementin it now I came to the problem I think the basic authentication used is bothering it.
this is what i get when I follow Mike G last post . the proxy wil work with a page not saved on the propeller , but when retreving the xml from the prop i get the next screen .

Cool the Basic Authentication is pretty solid.

Two thing come to mind. 1) Move the authentication to Apache/PHP/MySQL box. 2) Add the authentication header to the proxy. Both solution are very easy!

Since the Prop/W5200 is behind your router, you can remove the basic authentication from the Prop/W5200 without too much worry.

database - I have a mysql database running with a phpmyadmin interface to it , maybe usefull in creatin the login page and making it funtion

Just Google PHP Authentication! There's a lot of information on the web.

Mike G

I said it was easy but that's not a big help.

The code below adds an authentication header to the proxy (found in this post). We can better secure our application with a few lines of PHP and Basic Authentication running on the embedded web server .

[php]
<?php
$url = "http://your.url.or.IP:port/xmltemp";
$auth = 'web:web';

$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_HEADER, 0);

// Create Authorization header
$b64Auth = 'Authorization: Basic ' . base64_encode($auth);
curl_setopt($ch, CURLOPT_HTTPHEADER, array($b64Auth));

curl_exec($ch);

if(!curl_errno($ch))
{
//Content type should be XML
header ('Content-type: text/xml');
}
else
{
echo 'Curl error: ' . curl_error($ch);
}
curl_close($ch);
?>
[/php]

Igor_Rast

Mike I thouth i take you advice and go read and rearch a little more about the PHP Authentication .
So I havent tested it yet.
@UPDATE ,., Tested the new proxy and thatone works fine

But seeing it , im wondering ,about this line

$auth = 'web:web';

1 . is it possible to get to see the data in the php file trou a brouwser ? meaning , can someone sniff the file orso , and see the username and password in it ,


2. The proxy is served on my server , the controllers could be anybody else . How can I set different password then without having to setup alloot of proxy php pages wit the web:web every time different
Looks to me like this solution will need a allot of proxy setups , cause the root login name and pass (web:web) sould be different for every controller build ,
or can anothe php file create the proxy every time depending on the settings put in the login page

Mike G

1 . is it possible to get to see the data in the php file trou a brouwser ? meaning , can someone sniff the file orso , and see the username and password in it ,

Sure it's possible and up to the admin.

2. The proxy is served on my server , the controllers could be anybody else . How can I set different password then without having to setup alloot of proxy php pages wit the web:web every time different
Looks to me like this solution will need a allot of proxy setups , cause the root login name and pass (web:web) sould be different for every controller build ,
or can anothe php file create the proxy every time depending on the settings put in the login page

No, basic authentication, in this case, is between the two servers; embedded(Prop/W5200) and Apache. It has nothing to do with authenticating a user.

User authentication is between the Apache server and the client. If the client credentials are authenticated, the user is allowed to use the proxy's "Basic Authentication" credentials. The concept of authenticating a client is vast and openly published.

Igor_Rast

Ok . So i have done some reading , Found a nice example HERE about the PHP+ Mysql database for user registration.
Implementing it , That part seem to work nice , using the sourcecode found there and changing it just a little
. Here a link to my login page thats suppose to be web connectable from everywhere . And it seems to be workig fine .
give it a try. Ill say .
user (webuser:webuser in the database so you can try it out )

SWEEET

taking some time to build the rest of the proxys to get the buttons working , anyway

One thing that happen , My stylesheet doesnt seem to want to work anymore, just stoped working after a refresh
I tried moving the css file to the html but that didnt seem to let it work. If i follow the source it seem to get it , but not appliening it . strange . any ideas ?
for the rest is seems to be working fine without the css.

One other thing , All exept the proxy for the main page , have an ip set in them . so the propeller is reachable from net ( with port forwarding of course)
example
[HTML]<?php
$url = "http://192.168.2.1/px/xmltemp";
$auth = 'web:web';
[/HTML]
this ip should be configurable
How can I get an inputbox to popup in the loginpage , wher you enter your own isp ip to get connected to your controller.and this sets the right ip in the proxys needing it
like it is now, everybody just connect to my controller.
ill keep on going in the mean time trying to get it how I want

All files hosted on serverpx.zip

I think i have an Ip issue to resolve :frown:

The main page is on my server , so the proxy-html point to my server $url = "http://192.168.2.151/px/px-210"; for you . 86.84.92.99

The xml proxy is also on my server but gets data from you network , so $url = "http://px-210/xmltemp"; called by the hostname ??(netbiosname= px-210)
something not right here , Can i call it by hostname ? Got a feeling i am getting the data direct from the prop . ( localy connected not via net )
I cant realy test net connectivity because if i change the ip to my isp ip , so calling out to net and back , the server never nesolves to the right name. ANybody can tell me wats wrong ? its working fine from another computer on my network , but something telling me thats not the case when netconnected, The set ip sould be different?

Mike G

One thing that happen , My stylesheet doesnt seem to want to work anymore, just stoped working after a refresh
I tried moving the css file to the html but that didnt seem to let it work. If i follow the source it seem to get it , but not appliening it . strange . any ideas ?

Check your links! The style sheet has always existed on the Apache web server. I'd suggest using relative links not absolute ie. http:\\ 192. 168 .1 . 100\stylesheet.css

this ip should be configurable
How can I get an inputbox to popup in the loginpage , wher you enter your own isp ip to get connected to your controller.and this sets the right ip in the proxys needing it
like it is now, everybody just connect to my controller.

Create a database table to hold the user profile. Create web pages and CRUD (Create, Retrieve, Update, Delete) logic to handle user profiles.

Is your plan to sell the temperature/humidity device and provide hosting services for the users?

Igor_Rast

Ill look into the stylesheets , in a sec .

Link ?? is the link to my login page not working at all ??. it works fine for me if i change the ip to my local ip . could you let me wat does happen
about the database. There is a part (Members page)where you edit your profile , think its best ill go add those detail there somewhere and let the database holde tha values orso .
I think some more time to understand all thats going on ,

Mike , I would say the plan was to sell the temperture/humidity device . But its now almost 1.5 years later . and still not realy ready to be foolproof
If a succesfull market can be targeted for this controller , and it wil comply with all those rules they have here . That will definitly be what i wil try to do next.
About the hosting , This was not intentionaly the idea . But als you know . 1 thing led to another . and here we are using a server as part of the project. so yes . there is probably gonna be some hosting . Currently on my own computer , but if it succeds , ill go find a good webhost to garantee avaiability. I also have a website that Im working on as part of that project. so il be needing Hosting space anyway. Think its a good idea ?? . sugestions ? remarks ?

Mike G

Link ?? is the link to my login page not working at all ??. it works fine for me if i change the ip to my local ip . could you let me wat does happen
about the database. There is a part (Members page)where you edit your profile , think its best ill go add those detail there somewhere and let the database holde tha values orso .
I think some more time to understand all thats going on ,

You are trying to do too many things at once. If you are trying to test connectivity from the internet then setup a simple test case and execute.

Open your router configuration and forward port 8080 traffic to your T/H (Temperature/Humidity) device IP. Then try to hit the device using the ISP assigned IP.

http://123.456.789.123:8080/xmltemp

Once that works, do the same with your web server. I'm guessing the web server is not configured to to serve up the graph application by default or there is a configuration issue.

Igor_Rast

Mike maybe your right doing to many things at ones :P
ill go step by step .
I made a hello word test . This one is accecable , by my pc on the network , pc were server is , and on a telefone internet connection it works ,. so first proxy up . TEST

Contiuing with the XMl I came to the conclusion that my modem doesnt allow me to port forward more than 1 port , So ther is no way that I wil be getting both (server + propeller) connected to the net, without changing the ip , every time ,
Have to figure out another aproach , think ill go to the neigbours to ark to borrow ther wifi .

Mike G

Contiuing with the XMl I came to the conclusion that my modem doesnt allow me to port forward more than 1 port , So ther is no way that I wil be getting both (server + propeller) connected to the net, without changing the ip , every time ,
Have to figure out another aproach , think ill go to the neigbours to ark to borrow ther wifi .

That does not make sense. You do not need to forward two ports only one - the web server. Both the web server and W5200 are internal. There's no reason to call the W5200 directly. The Web server calls the W5200! That was the whole reason for the proxy!

Igor_Rast

Mike G wrote: »

That does not make sense. You do not need to forward two ports only one - the web server. Both the web server and W5200 are internal. There's no reason to call the W5200 directly. The Web server calls the W5200! That was the whole reason for the proxy!

Mike Correct me if im wrong ,
The situation you stated does work. for me than , and everybody joining in to watch wat my controller is doing ,

But if let say a customer got one , He doesnt have the server , So the only ip he needs to forward , is the ip of the controller to the net ..
after that he sets his IP, in the loginpage to retreve the xml from his location . that will work fine i think

But I have the server (ip. 192.168.2.151) thats also a pc , that I need to forward to the net , so everybody can get to it , to open the page,
and the second portforward would be to forward the ip of the propeller to the net . ( orelse everybody would be listening in on my controller )
So I can also connect from everywhere , and if I want Ill put another ip to get to another controller.

[HTML]<?php
$url = "http://px-210/xmltemp";
$auth = 'web:web';[/HTML]
In the xml-proxy is where it comes to confusion .
setInterval("getRequest('http://192.168.2.151/px/xml-proxy', 'placeholder')", 1000);

If I let it like its above, I can connect and see tha values in another laptop on my network , .
if I use the pc that gots the server on it , it wont work ,
for it to work on that pc , I need to change the request statenet to the one below
[HTML]setInterval("getRequest('xml-proxy', 'placeholder')", 1000);[/HTML]. and then i will work on both computers , But inside the network.
Outside the network , the page seems to open up , But cant see the xmls. Maybe the phone just to old, but I cant test anyway else on this.
taking a break I think, get something to eat , and get to it at night again , to solve the hole thing

Igor_Rast

short anwser first : I have done that allready but then , on the server pc it wont work , but on another pc connected to my network it does,
To keep it working on both the pc (wired & wireless) I have to use the hostname (px-210) or it wil not work on both.
But this is testing stage and not final solution so 2 version to work with is not that big of a deal. .

But before I find the solution to it , I thouth it was a good idea to take a pen and paper ant draw the hole thing , so you , others reading, and most importantly I , to userstand how fist then wat to do.
So ill post it up in few minute .

Igor_Rast

Ok , so Here My shot to explain .
drawing 1 is the current setup senario working with .(testsenario)

So In my setup . I have .
1 Ubuntu pc with apache2 server installed connected hardwire to modem
2.Laptop wireless dhcp ip connected to modem ,
3 . the old blackberry smartphone ( does not support html5 ) so the graph will never open

Localy I can acces the prop directly by hostname , or by ip.
it goes like this

1. brouwser--input--hostname/ip--Modem direct to --Prop.
2. then Prop directly Redirects brouwser to loginpage , served from sever. (http://192.168.2.151/px/px-210--PROXY)
3. login page opens . do the login thing.
4. authentic ? open the interface page served from server . (http://192.168.2.151/px/px-210--PROXY)
5. start xml from controller -- modem-- brouwser (http://px-210/xmltemp--PROXY)

This is how its currently set. and working. half ( NO CSS, NO XML FROM OUTSIDE CONNECTION)
my isp ip(http://84.86.92.99/) redirect to http://192.168.2.151/ So when you type my isp ip or . www.ice-control.nl ( wich is also mine redirect to my isp) to get to the loginpage . thats located at http://192.168.2.151/px/index.

For a till now not known reason(for me ) if i use the ip that the propeller has in the proxy(e.g. http://192.168.2.2/xmltemp. the xml will work on all pc localy exept the one that has the server on it ,there it will not get them. If I use http://px-210/xmltemp then it works on all.

From outside , if i understand from mike , its not working , So somthing there to solve . to Better understand , we go to drawing 2.

¨ Let me know what it does. Test . http://86.84.92.99/px/proxy-html.php ¨

o just before , I have a hallo word also hosten tru a proxy on my server ,
because its a simple page i can let my smartphone open it tru the internet .
and this is working on all my local computers . wired or wireless. and via the internet ,
so its definitly only with the full

test it , http://86.84.92.99/px/hello.php
.
Update , its working via WWW and local now with last mods .

ill continu in a minute to explain the needed senarion for it to work wit let call them customers with there propeller.

drawing 2 explains when normal operation of the controller , Because of the issue with the page not opening via web and localy has been solved , I wil contineu on the difference in the cenario.
going the 5 steps from before . at the last step 5
when sending the requests , the right ip has to be set to get to your own controller..

Senario 1
In the situation that you are localy connected to the propeller via you modem , then with option local selected at login ,
the xml-proxy , should get the url set to the hostname of the propeller $url = "http://px-210/xmltemp";

why by hostname (http://px-210/xmltemp) and not by ip adres(http://192.168.2.1/xmltemp - Wel because if I use the hostname , There is no need for you to go and find out first what ip the propeller got assignd tru DHCP to connect to it localy .
Localy connected its just that easy.

Senario 2
If you want to connect to your controller from elsewhere , than you wil have to set the ip wile setting the username and password,
and that ip will have to replace the hostname for it to your own controller
Not forgetting to port forward or it wil not work

So far so good
Continuing with the options to add the ip inputbox , and make the value replaxe the one in the xml-proxy.php file .
thats some more reading

and still allitle bit confused if it wil realy work that way. Ill just have to find out

Mike G

Let me know what it does. Test . http://86.84.92.99/px/proxy-html.php ¨

Replace the absolute references in the HTML source with relative references. I suggested this once before...

Anyway, the local IP, 92.168.2.151, can NOT resolve from the Internet. This is a configuration issue.

[php]

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'&gt;
<html xmlns='http://www.w3.org/1999/xhtml'&gt;
<head><meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<meta name='HandheldFriendly' content='tru'>
<meta name='viewport' content='width=device-width, user-scalable=no'>
<meta name='description' content='An ICE Control Production.' >
<title>PX-210</title>
<link rel='stylesheet' href='http://192.168.2.151/px/demo.css' type='text/css' media='screen' />
<link rel='stylesheet' href='http://192.168.2.151/px/style2.css' type='text/css' media='screen' />
<link rel='stylesheet' href='http://192.168.2.151/px/style.css' type='text/css' media='screen' />
<link rel='stylesheet' href='http://192.168.2.151/px/graph-style.css' type='text/css' media='screen' />
<script type='text/javascript' src='http://192.168.2.151/px/graph.js'></script&gt;
<script type='text/javascript' src='http://192.168.2.151/px/function.js'></script&gt;



<header id='headerbar' class='bar'>
<h1><a href='http://www.ice-control.nl/index.php' target='_blank'>ICE-Control.nl</a></h1>
<p class='copyright'>© 2012</p>
</header>
<div id='logo1'><img src='http://192.168.2.151/px/Logo_website.jpg' alt='logo' width='100%' height='100%' title='ICE Control Logo'/>
</div>
<div id='graph1'>
<article id='post' role='main'>
<div><canvas id='firstgraph' width='940' height='200'></canvas>
</div>
</div>
<div id='graph2'>
<article id='post' role='main'>
<div><canvas id='secondgraph' width='940' height='400'></canvas>
</div>
</div>
<div id='graphpanel1'>
<table>
<tr>
<tr> <td rowspan='2'> <div><span id='tmax'></span> C</div> </td></tr>
<td><div><span id='placeholder'></span> C</div> </td>
</tr>
<tr>
<td><div><span id='tmin'></span> C</div></td>
</tr>
</table>
</div>
<div id='graphpanel2'>
<table>
<tr>
<tr> <td rowspan='2'> <div><span id='lvmax'></span> %</div> </td></tr>
<td><div><span id='placeholder2'></span> %</div> </td>
</tr>
<tr>
<td><div><span id='lvmin'></span> %</div></td>
</tr>
</table>
</div>
<div id='interface-buttons1'>
<div><span id='setpoint_1'></span></div>
<div><span id='offset_1'></span></div>
<div><span id='function_1'></span></div>
</div>
<div id='interface-buttons2'>
<p >
<a onclick="setpoint_1min()" class='a_demo_two'>-</a>
<a onclick="setpoint_1Var()" class='a_demo_two'>setpoint_1</a>
<a onclick="setpoint_1plus()" class='a_demo_two'>+</a></p>
</div>
<div id='interface-buttons3'>
<p>
<a onclick="offset_1min()" class='a_demo_two'>-</a>
<a onclick="offset_1Var()" class='a_demo_two' style='padding-left:21px;padding-right:21px;'>offset_1</a>
<a onclick="offset_1plus()" class='a_demo_two'>+</a></p>
</div>
<div id='interface-buttons4'>
<p>
<a onclick="funtion_to_1()" class='a_demo_two'>1</a>
<a onclick="funtion_to_2()" class='a_demo_two'>2</a>
<a onclick="funtion_to_3()" class='a_demo_two'>3</a>
<a onclick="funtion_to_4()" class='a_demo_two'>4</a></p>
</div>
<header id='bottom-bar' class='bar1'>

</header>
</body>
</html>

[/php]

I imagine you want...
[php]
<link rel='stylesheet' href='px/demo.css' type='text/css' media='screen' />
[/php]

Igor_Rast

Mike G wrote: »

I imagine you want...
[php]
<link rel='stylesheet' href='px/demo.css' type='text/css' media='screen' />
[/php]

Yes you already mentiond it , but it got me a little bit more confused before ,was reading about it , the example cleared all doubts .
before I thout you meant the / tur to a \ . . seem to doesnt matter with html , but javascript or the php wil not run wit \ . anyway

turn out that I needed to remve the px/ to . found out with the debug terminal from chrome. see whats happening ,

[php]
<link rel='stylesheet' href='demo.css' type='text/css' media='screen' />
[/php]

So i went everywere modifiing , and now it works on all my pc and also via net , chek it out
it sould work now ,

Ill have to fix the rest of the buttons in a sec, now only the setpoint + works ,

the css is not showing up still, I did the relative thing , in the debug terminal I can see that its retreaved it , but its not doing anything with it

if i remove the stylesheet completly , everythings get realy messed up . So I suspect I must have accedently changed something in it , just cant find it.

UPDATE , OK i have to admit , The css was fine all the time , I was just using an old unmodified version , had e full computer install again, and somehow got the outdated one, thats behind then