• A simple web interface using the ESP8266 as a web server. This example sends the current buttons color to the ESPRUINO PICO and then the pico sends back the other color. (red or green) Changes the buttons color. There is a bunch of extra JSON and this is to represent multiple reads to get all of the JSON.

    <!DOCTYPE html>
    <html>
      <head>
        <title>POST GET EXAMPLE</title>
        <script>
          function response(arr,type){//arr is in JSON
            if(type==="get"){
              document.getElementById("get").style.bac­kgroundColor=arr.color;
            }else{
              document.getElementById("post").style.ba­ckgroundColor=arr.color;
            }
          }
          
          function postServer(color){
            var req = new XMLHttpRequest(),
            obj = {'color':color,'the':'rest','are':'test'­,'Red':'red','Purple':'purple','Green':'­green','Yellow':'yellow'},
            arr;
            req.open("POST","/", true);
            req.setRequestHeader("Content-type", "application/json");
            req.onreadystatechange = function(){
              if(req.readyState === 4){
                var status = req.status;
                if(status>=200 && status <300 || status === 304){
                  arr=req.responseText;
                  arr=JSON.parse(arr);
                  response(arr,"post");
                }else{
                  alert("something bad");
                }
              }
            }
            
            obj=JSON.stringify(obj);
            console.log(obj);
            req.send(obj);
          }
          function postControl(){
            var color = document.getElementById("post").style.ba­ckgroundColor;
            postServer(color);
            
          }
          
          function getServer(color){
            var req=new XMLHttpRequest(),
            arr;
            req.open("GET", "?color="+color, true);
            req.onreadystatechange = function(){
              if(req.readyState === 4){
                var status = req.status;
                if(status>=200 && status <300 || status === 304){
                  arr=req.responseText;
                  arr=JSON.parse(arr);
                  response(arr,"get");
                }else{
                  alert("something bad");
                }
              }
            }
            req.send(null);
          }
          function getControl(){
            var color = document.getElementById("get").style.bac­kgroundColor;
            getServer(color);
          }
        </script>
      </head>
      <body>
        <button style="background-color:red" id="post" type="button" onclick="postControl()">POST</button>
        <button style="background-color:red" id="get" type="button" onclick="getControl()">GET</button>
      </body>
    </html>
    
About

Avatar for Cale @Cale started