<html><head><meta http-equiv="Content-Type" content="text/html charset=utf-8"></head><body style="word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space;" class="">To all, <div class=""><div class=""><br class=""></div><div class="">I have been heads down for the last month finishing a project that I have put off for some time. I have enjoyed building my trail sensors and using them to collect data in our Raleigh area parks. What I had neglected we writing the software that could upload those datapoints to my laptop and perform the analysis. I knew I was going to have to learn some new language(s) and, for some reason, a pure software project is just not as appealing as writing embedded code. Well, I finally bit the bullet and wanted to share a few things I learned and ask for a little help as well.</div><div class=""><br class=""></div><div class="">First, here is what I wanted to accomplish:</div><div class=""><span class="Apple-tab-span" style="white-space:pre"> </span>- Build a web-facing application that anyone who uses my sensors could access</div><div class=""><span class="Apple-tab-span" style="white-space:pre"> </span>- Provide a clean, simple interface that would not require much hand-holding</div><div class=""><span class="Apple-tab-span" style="white-space:pre"> </span>- Upload a text file with a specific format defined by the firmware on the sensor (5 line header and each row holding a date/time value)</div><div class=""><span class="Apple-tab-span" style="white-space:pre"> </span>- Parse the file and find the last recoded data set</div><div class=""><span class="Apple-tab-span" style="white-space:pre"> </span>- Preview the file so folks could see what was in it and allow for trimming to take out “noise” from placing and retrieving the sensor</div><div class=""><span class="Apple-tab-span" style="white-space:pre"> </span>- Refine the results with the ability to add historical weather data (rain can cause false datapoints) and some basic filters for “noise”</div><div class=""><span class="Apple-tab-span" style="white-space:pre"> </span>- Produce a report that the user could print or store </div><div class=""><br class=""></div><div class="">After some false starts (Ruby on Rails - too painful) I decided to use the current favorite - JavaScript / HTML / CSS. I used <a href="http://www.codecademy.com/learn" class="">CodeAcademy</a> - an awesome free service - to learn these languages. I learned that I also needed a framework to simplify making a professional page, the CodeAcademy courses use the <a href="http://getbootstrap.com/" class="">Bootstrap</a> framework (free thanks to Twitter) and an extension to JavaScript called <a href="https://jquery.com/" class="">Jquery</a>. There are a huge number of frameworks and JavaScript extensions out there and I looked at many of them but, I can recommend this as a solid combination.</div><div class=""><br class=""></div><div class="">If you have ever taken a CodeAcademy course, you will come to love their interactive interface. I wanted to use something similar in my development work. I wasted a fair bit of time looking at professional tools such as Eclipse, WebStorm, Sublime - all great for some folks but I wanted that integrated and real time experience and found JSBin. Here is a <a href="http://jsbin.com/lozudo/3/edit?html,css,js,output" class="">simple example </a>that you can play with showing how JavaScript, HTML and CSS work together to create an interactive site. There are others such as JSFiddle but JSBin is the only one I found that includes a console (where error messages go) and I planned to make a lot of mistakes. </div><div class=""><br class=""></div><div class="">There are a number of non-intuitive things about JavaScript and the CodeAcademy courses got me started but, more often than not, I would run into a problem and need a specific answer. That is where <a href="http://stackoverflow.com" class="">StackOverflow</a> came to the rescue over and over again. Their process helps float credible and relevant answers to the top of the heap. I owe the folks who volunteer their expertise to this site a huge debt and I hope to provide answers to questions there myself someday (once I am allowed to - you have to earn that right by building your reputation). </div></div><div class=""><br class=""></div><div class="">Also, there are a ton of free and open APIs that make things like getting historical weather (<a href="http://www.wunderground.com/weather/api/" class="">WeatherUnderground</a>) and tables and charts (<a href="https://developers.google.com/chart/interactive/docs/index" class="">Google charts visualization</a>) as well as methods for file upload and parsing. I took full advantage of these in this project.</div><div class=""><br class=""></div><div class="">JSBin has a method to “host” your site and I wanted to ask a favor. If you have a few minutes, could you please try the following exercise?</div><div class=""><span class="Apple-tab-span" style="white-space:pre"> </span>- Download a sample data set from <a href="http://triembed.org/blog/?attachment_id=1059" class="">here</a>.</div><div class=""><span class="Apple-tab-span" style="white-space:pre"> </span>- Using Chrome or Safari (not sure if Firefox will work), Go to <a href="http://chipmc.jsbin.com" class="">this site</a> where I am hosting the application</div><div class=""><span class="Apple-tab-span" style="white-space:pre"> </span>- Find the file on your hard drive (select local time) and see if the flow from preview to refine to repot is intuitive.</div><div class="">All comments on usability, clarity, look and feel are welcome. </div><div class=""><br class=""></div><div class="">I would also be interested in any advice or assistance in looking at my code. I am sure I have done many things wrong in this first project you can see the code behind this project <a href="http://jsbin.com/qidela/1/edit?html,css,js,output" class="">here</a>. Also, if there are any JavaScript gurus or groups I can ask for help, please let me know.</div><div class=""><br class=""></div><div class="">If you made it this far in this long note, thank you. If you can provide me with any feedback, I would very much appreciate it. Now, with this project done, time to get back to something that requires soldering!</div><div class=""><br class=""></div><div class="">Thanks, Chip</div><div class=""><br class=""></div></body></html>