I have a backyard koi/goldfish pond I like to monitor. I have a raspberry pi doing the monitoring and sending to my website. I am trying to get the csv data to load into my index.html file. I do not need to keep the data. I have index 3 created the parses the data and puts in a table. I am having a hard time understand how to add a variable to a csv field and put that variable in the html file.
<!DOCTYPE html> <body bgcolor="000000"> <center> <p style="color:White; font-size:50px; font-family:Couier;">Pond Temperature & Camera<br></p> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * { box-sizing: border-box; } /* Create three equal columns that floats next to each other */ .column { float: left; width: 30%; padding: 1px; } /* Clear floats after the columns */ .row:after { content: ""; display: table; clear: both; } </style> <div class="row"> <div class="column" style="background-color:#000000; color:white;"> <h2>Bio Falls Temperature</h2> <p> ° F</p> </div> <div class="column" style="background-color:#000000; color:white;"> <h2>Stream Temperature</h2> <p> ° F</p> </div> <div class="column" style="background-color:#000000; color:white;"> <h2>Waterfall Temperature</h2> <p> ° F</p> </div> <div class="column" style="background-color:#000000; color:white;"> <h2>Deep End Temperature</h2> <p> ° F</p> </div> <div class="column" style="background-color:#000000; color:white;"> <h2>Skimmer Temperature</h2> <p> ° F</p> </div> <div class="column" style="background-color:#000000; color:white;"> <h2>Outside Air Temperature</h2> <p> ° F</p> </div> </div> <img id="jpeg_0" width="800" height="600"> <script type="text/javascript"> var camera_0 = { addEvent: function(elem, event, func ){ if (typeof (window.event) != 'undefined') {elem.attachEvent('on' + event, func);} else {elem.addEventListener(event, func, false);} }, initCamera: function(jpeg, serverUrl, token, id, interval){ this.addEvent(jpeg, 'load', function(){setTimeout(function() {camera_0.showJpegFrame(jpeg, serverUrl, token, id);}, interval);}); this.showJpegFrame(jpeg, serverUrl, token, id); }, showJpegFrame: function(jpeg, serverUrl, token, id){ jpeg.src = serverUrl+"/Jpeg/"+id+"?authToken="+token+"&"+new Date().getTime(); } } camera_0.initCamera(jpeg_0, "http://100.6.115.166:8100", "4fbbf273-1691-428d-bd09-6b625aeafe0f", 0, 40); </script> </center> ``` ``` <!DOCTYPE html> <html> <head> <title>Pond Temperature & Camera</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <div class="table-responsive"> <META HTTP-EQUIV="refresh" CONTENT="15"> <h1 align="center">Pond Temperature & Camera</h1> <br /> <br /> <div id="pond_table"> </div> </div> </div> </body> </html> <script> $(document).ready(function(){ $.ajax({ url:"pond_temp.csv", dataType:"text", success:function(data) { var pond_data = data.split(/\r?\n|\r/); var table_data = '<table class="table table-bordered table-striped">'; for(var count = 0; count<pond_data.length; count++) { var cell_data = pond_data[count].split(","); table_data += '<tr>'; for(var cell_count=0; cell_count<cell_data.length; cell_count++) { if(count === 0) { table_data += '<th>'+cell_data[cell_count]+'</th>'; } else { table_data += '<td>'+cell_data[cell_count]+'</td>'; } } table_data += '</tr>'; } table_data += '</table>'; $('#pond_table').html(table_data); } }); }); </script> ``` First probe temp is 66.4 Second probe temp is 66.2 Third probe temp is 65.4 Fourth probe temp is 66.5 Fifth probe temp is 65.5 ``` 
没有评论:
发表评论