As the title says... Chat on...

User avatar
By Apothus
#26140 I have gotten my ESP-01 up and running, serving the basic "hello world" web page as well.

However I am struggling to make the next step by trying to serve a larger web page

This is the page I want to display https://jsfiddle.net/te4LLbx3/
Code: Select all<!doctype html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>
   <meta http-equiv'+content-type' content='text/html; charset=utf-8' />
   <meta name='description' content='' />
   <meta name='keywords' content='' />
   <meta name='author' content='' />
   <!--link rel='stylesheet' type='text/css' href='css\style.css' media='screen' /-->
   
   <script type='text/javascript' src='https://code.jquery.com/jquery-2.1.4.min.js'></script>   
</head>
<body>
   <h1 align='center'> Clicky Clacky </h1>
   <table style='width:10%' align='center'>
      <tr>
         <td colspan = '2' align = 'center'><h2> AC Supply </h2></td>
      </tr>
      <tr>
         <td>State </td>
         <td id='ACstate'>Unknown</td>
      </tr>
      <tr>
         <td>Current </td>
         <td id='ACcurrent'>Unknown</td>
      </tr>
      <tr>
         <td colspan='2' align='center'><b>Switch</b></td>
      </td>
      <tr>
         <td><input type='Button' id='ACoff' value='OFF' style='background-color:green;color:white;margin-left:auto;margin-right:auto;display:block;margin-top:0%;margin-bottom:0%'></td>
         <td><input type='Button' id='ACon' value='ON'   style='background-color:red;color:white;margin-left:auto;margin-right:auto;display:block;margin-top:0%;margin-bottom:0%'></td>
      </tr>
      <tr>
      <!-- SPACER -->
   </table>
   <br>
   <table style='width:10%' align='center'>
      <tr>
         <td colspan = '2' align = 'center'><h2> DC Supply </h2></td>
      </tr>
      <tr>
         <td>State </td>
         <td id='DCstate'>Unknown</td>
      </tr>
      <tr>
         <td>Current </td>
         <td id='DCcurrent'>Unknown</td>
      </tr>
      <tr>
         <td colspan='2' align='center'><b>Switch</b></td>
      </td>
      <tr>
         <td><input type='Button' id='DCoff' value='OFF' style='background-color:green;color:white;margin-left:auto;margin-right:auto;display:block;margin-top:0%;margin-bottom:0%'></td>
         <td><input type='Button' id='DCon' value='ON'   style='background-color:red;color:white;margin-left:auto;margin-right:auto;display:block;margin-top:0%;margin-bottom:0%'></td>
      </tr>
   </table>
   <br>
   <table style='width:10%' align='center'>
      <tr>
         <td colspan= '2' align='center'> <h2>Temperature</h2> </td>
      </tr>
      <tr>
         <td colspan= '2' align='center' id='temp'> Unkown </td>
   <script>
   function updateEvent() {
      
      $.getJSON('data.JSON', null, function(data) {
         document.getElementById('ACstate').innerHTML = data.ACstate;
         document.getElementById('DCstate').innerHTML = data.DCstate;
         document.getElementById('ACcurrent').innerHTML = data.ACcurrent/100;
         document.getElementById('DCcurrent').innerHTML = data.DCcurrent/100;   
         document.getElementById('temperature').innerHTML = data.temp;         
      });
      setTimeout(updateEvent , 1000);
   }
   
   $('#ACoff').click(function() {
      console.log('ACoff');
   });
   
   $('#ACon').click(function() {
      console.log('ACon');
   });
   
   $('#DCoff').click(function() {
      console.log('DCoff');
   });
   
   $('#DCon').click(function() {
      console.log('DCon');
   });
   
   $(document).ready(function() {
      updateEvent();
   });
   </script>
</body>


I am having trouble learning how to use lua on the esp8266, or even lua in general. Most of the examples I have seen simply provide a "use this and host a web page" with little description on what each line means or is doing.

My plan is to try and include a seperate file for the html content on the eps some how and then serve it something like this

Code: Select allconn:on("sent",function(conn)
    if file.open(url, "r") then           
        file.seek("set", DataToGet)
            local line=file.read(512)
            file.close()
            if line then
                conn:send(line)
                DataToGet = DataToGet + 512   
                if (string.len(line)==512) then
                    return
            end
        end
    end       
end


Am i going along the right track? Is there any useful resources for learning how to setup an esp8266 that detail what is happening in the lua code a little more?