Getting data from a website into a ESP2866 - JQuery

Projects Networking, Protocols, and Devices
1

Hi all,

I'm trying to get data from a website to then display it on an analog gauge. The bit of data i'm most keen on is surf rating and tide infomation form swellmap.co.nz This site seems to be one of the most accurate for surf rating.

I'm using a ESP2866 and have got similar projects working when the website has a simple API, but Im a bit stuck whit this one.

Does anyone have any ideas on how to get data from this site in the ESP2866? I'm pretty new to code and Arduino..

http://www.swellmap.co.nz/surfing/nz/manu-

http://www.swellmap.co.nz/info/forecastplugins

thanks

Mark

2

Does anyone have any ideas on how to get data from this site in the ESP2866?

What have you tried? What happened?

3

I trying to find a starting point. I have been looking for examples of other projects but haven't been able to find anything similar to adapt yet!

4

thecusen:
Hi all,

I'm trying to get data from a website to then display it on an analog gauge. The bit of data i'm most keen on is surf rating and tide infomation form swellmap.co.nz This site seems to be one of the most accurate for surf rating.

I'm using a ESP2866 and have got similar projects working when the website has a simple API, but Im a bit stuck whit this one.

Does anyone have any ideas on how to get data from this site in the ESP2866? I'm pretty new to code and Arduino..

http://www.swellmap.co.nz/surfing/nz/manu-

http://www.swellmap.co.nz/info/forecastplugins

thanks

Mark

You are going to have to interpret the web page and pull out the data you want.
I think that data you want is in this table:

from:
http://www.swellmap.co.nz/surfing/new-south-wales/austinmer-beach

//snippet of page source

 <table class="table table-striped table-condensed table-center">

<thead><tr class="dheads head rounded"><th class="day" rowspan="2"><a class="wtlink" name="#Wed" id="Wed">Wed 25 May</a></th><th>Rating <i class="icon-question-sign rating-label-table" data-original-title="Ratings"></i></th><th>Summary <i class="icon-question-sign help-label-table" data-content="A summary of the predicted weather for that 6 hourly time slot." data-original-title="Summary"></i></th><th>Swell <i class="icon-question-sign help-label-table" data-content="Height of the swell before the wave has broken." data-original-title="Swell (m)"></i></th><th>Wave <i class="icon-question-sign help-label-table" data-content="Height of the waves. This is the swell height plus the chop height. The nearer this height is to the swell height, the less chop, meaning a cleaner swell!" data-original-title="Wave (m)"></i></th><th>Set face <i class="icon-question-sign help-label-table" data-content="Predicted height of the wave face as it breaks." data-original-title="Set face (m)"></i></th><th>Period <i class="icon-question-sign help-label-table" data-content="The time between set waves. A longer period generally indicates a better quality swell. Look for jumps in the period to indicate new swells." data-original-title="Period (s)"></i></th><th>Swell dir <i class="icon-question-sign help-label-table" data-content="The origin direction of the swell." data-original-title="Swell dir (&#xb0;)"></i></th><th>Wind <i class="icon-question-sign help-label-table" data-content="Wind speed where direction is from the origin." data-original-title="Wind (kts)"></i></th><th>Gusts <i class="icon-question-sign help-label-table" data-content="The strongest speed of the wind." data-original-title="Gusts (kts)"></i></th><th></th></tr><tr class="dunits head"><th></th><th></th><th>m</th><th>m</th><th>m</th><th>s</th><th>&#xb0;</th><th>kts</th><th>kts</th><th></th></tr></thead><tr class="Wed 4h"><td class="time">4h</td><td class="rating"><span class='badge badge-warning' alt='Average conditions' title='Average conditions'>5</span></td><td class="summary"><img class='wx-summary' src='http://www.swellmap.co.nz/style/img/weathericons/nsun.png'  title='Clear skies' /></td><td class="hs_sw">1.1</td><td class="hs">1.4</td><td class="wface">1.5</td><td class="tp">11</td><td class="dpm"><span class='139'>SE</span></td><td class="windma"><span class='15 253'>W:15</span></td><td class="gstma">17</td></tr><tr class="Wed 10h"><td class="time">10h</td><td class="rating"><span class='badge badge-warning' alt='Average conditions' title='Average conditions'>6</span></td><td class="summary"><img class='wx-summary' src='http://www.swellmap.co.nz/style/img/weathericons/suncloud.png'  title='Sunny with some cloud' /></td><td class="hs_sw">1.1</td><td class="hs">1.3</td><td class="wface">1.6</td><td class="tp">11</td><td class="dpm"><span class='137'>SE</span></td><td class="windma"><span class='9 241'>SW:9</span></td><td class="gstma">10</td></tr>

You are going to have to read through the webpage source until you find this marker, then start digesting the actual table data.
Chuck.