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/
<!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
conn: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?