Configure Photon via local html file

Firmware
1

Hi guys,
Im trying to control my photon from a local html file. I already have a solution to use an html file and access the cloud via post requests. But what I need is a local way without the cloud to interact with my photon. I think TCPClient/Server would be a good approach to that, but I didn't really find a matching example. I want s.th. like enter the Photon's IP in a web browser and make some configurations.
What do I have to change in my html file to achieve that? It currently uses post methods like this:

function turnLEDOn() {
var requestURL = "https://api.particle.io/v1/devices/" + deviceID + "/" + func2call + "/";
$.post( requestURL, { params: "on", access_token: accessToken });
}
function turnLEDOff() {
var requestURL = "https://api.particle.io/v1/devices/" + deviceID + "/" + func2call + "/";
$.post( requestURL, { params: "off", access_token: accessToken });
}
function getValue() {
var requestURL = "https://api.particle.io/v1/devices/" +deviceID + "/" + var2get + "/?access_token=" + accessToken;
$.getJSON(requestURL, function(json) {
$("#amount").text(json.result);
});
}

2

Is your issue that this is in an environment without an internet connection? If so I suppose you don’t have to worry about the security parts of using just raw TCP or HTTP without encryption.

You should be able to create a TCP server and then use HTML5 WebSockets to send data back and forth.

I would recommend using json formatted strings as your communication data and appropriate libraries to unpack on both ends. Then you just need to create your own protocol eg

// turns LED on
{
    "type": "fn",
    "fn": "led",
    "val": true
}
// turns LED on
{
    "type": "fn",
    "fn": "led",
    "val": false
}
// data request
{
    "type": "req",
    "fn": "var_id"
}
// data request
{
    "type": "resp",
    "fn": "var_id",
    "val": <var_value>
}
3

Thanks for your answer.
I want to stay in my local wifi network behind the firewall, so I don’t have to take care of security aspects. What I don’t really understand is how I connect my file.html, where I can make my configuration and which I want to access over the Photon’s IP, to my Photon. I found a lot of TCP examples but none of them really helped me out. Could you give ma a little example how this might work out? Ive been stuck for a while solving this the right way.

4

Actually, this looks like the simplest way to do this, since you have to have some protocol over the raw TCP connection. Look up websocket servers in general - plenty of people have done this on Particle devices.

Web App Side:

<!DOCTYPE HTML>

<html>
   <head>
      
      <script type = "text/javascript">
         function WebSocketTest() {
            
            if ("WebSocket" in window) {
               alert("WebSocket is supported by your Browser!");
               
               // Let us open a web socket
               var ws = new WebSocket("ws://192.168.2.8:2525/");  // or whatever your IP / port combo is you set on your Photon in WiFi and TCPServer
				
               ws.onopen = function() {
                  
                  // Web Socket is connected, send data using send()
                  ws.send("Message to send");  // send either a string cmd or a JSON encoded string cmd here
                  // also call this same code from your onClick event or however you want to trigger this.
                  alert("Message is sent...");
               };
				
               ws.onmessage = function (evt) { 
                  var received_msg = evt.data;  // parse either a string response or a JSON encoded string response here
                  alert("Message is received...");
               };
				
               ws.onclose = function() { 
                  
                  // websocket is closed.
                  alert("Connection is closed..."); 
               };
            } else {
              
               // The browser doesn't support WebSocket
               alert("WebSocket NOT supported by your Browser!");
            }
         }
      </script>
		
   </head>
   
   <body>
      <div id = "sse">
         <a href = "javascript:WebSocketTest()">Run WebSocket</a>
      </div>
      
   </body>
</html>
1 Like
5

If there is an HTTP server library available for particle, use that. If not then try this approach may be useful. Note that I haven’t implemented this in the particle platform, but I have done it on many others over the years.

First you need to use a TCP server library, which I believe is available. Listen on port 80 for connection requests.

Your browser will connect to the IP address of the Photon, which defaults to port 80. It will ask for the index file for the “site”. Your code will have to decode the GET request and determine which file is requested (in this case index.html). You then need to reply to the request with the proper HTTP header and data. Typically, for a configuration application this would be an HTML form containing the configuration settings pre-loaded with current or default data.

The browser user will fill out the form and click the submit button. The browser will then connect again to your Photon with a POST containing the header and data for the form results. Your code will have to decode this data and store the results in non-volatile data and then return another form to the browser. This would typically be the original form with the new data.

It is a pretty straight forward approach, but the building of your forms, and decoding of the HTML can be tricky. This should be a starting point for what you want to accomplish, unless I completely misunderstood what you asked for. Good luck.

2 Likes