Topic: Surf conditions script?

[K6GKM]

Hello all,

I'm wondering if anyone has developed or found a script that processes and shows local surf conditions that they'd be willing to share?  My site serves a surf community and, if I can, I'd like to create a section catering to those folks.

Thanks,
Grant

[SoMDWx]

https://www.surf-forecast.com/pages/configure_widget

[ConligWX]

windfinder or windguru should help you.

Sent from my GM1913 using Tapatalk

[K6GKM]

Thanks for the great suggestions.  Went with surf-forecast.com and their widget.  Added a little php/javascript spice and I've got a basic surf forecast page going now covering 30 different locations along the Ventura County coast.  The result is at CamWX.com/wxsurf.php. I'm attaching the script I pieced together.  Calling myself a novice at coding would be generous and I would very much appreciate any feedback or suggestions you all have.  I did reference some of Ken's work in the other Saratoga package scripts.

Thanks again.

-Grant


UPDATE: XHTML validation!  Important!  Lol.  Spent some time this morning cleaning up the XHTML errors the checker pointed out.  Include won't work, since the css link in the surf widget has to go in the head, so here's the entire wxsurf page instead.

[JupiterJoe]

Thanks man! This will be cool for my area as well, even though we don’t get very exciting waves. 😂

[the beteljuice]

beteljuice make-over in pure javascript (stops having to recall the holding page)

NOTE: In your php if( statements you have allocated La Conchita Beach twice, missing Little Rincon !

Code: [Select]

<div id="main-copy">

<h1>Ventura County Local Surf Conditions and Forecast</h1>

<script type="text/javascript">
  <!--
// not part of surf code !!
  function menu_goto( menuform ){
   selecteditem = menuform.logfile.selectedIndex ;
   logfile = menuform.logfile.options[ selecteditem ].value ;
   if (logfile.length != 0) {
    location.href = logfile ;
   }
  }
  //-->
</script>
<form>
<p><select name="s" onchange="surf_up(this.value)">
<option value=""> - Select Location - </option>
<option value="1">Arnold</option>
<option value="2">County Line</option>
<option value="3">Deadman's</option>
<option value="4">Deer Creek</option>
<option value="5">Emma Wood State Beach</option>
<option value="6">Faria</option>
<option value="7">Hobson County Park</option>
<option value="8">Hobson's</option>
<option value="9">Hollywood Beach</option>
<option value="10">La Conchita Beach</option>
<option value="11">Little Rincon</option>
<option value="12">Mondos</option>
<option value="13">Murphy's</option>
<option value="14">New Jetty/South Jetty</option>
<option value="15">Ormond Beach</option>
<option value="16">Oxnard Shores</option>
<option value="17">Pitas Point</option>
<option value="18">Point Mugu</option>
<option value="19">Port Hueneme Beach Park</option>
<option value="20">Rincon - Indicator</option>
<option value="21">Rincon - Rivermouth</option>
<option value="22">Rincon - The Cove</option>
<option value="23">San Buenaventura State Beach</option>
<option value="24">Santa Clara Rivermouth</option>
<option value="25">Silver Strand</option>
<option value="26">Solimar Reef</option>
<option value="27">Staircase Beach</option>
<option value="28">Super Tubes</option>
<option value="29">Ventura Overhead</option>
<option value="30">Ventura Point</option>
</select></p>

</form>

<div class="wf-width-cont surf-fc-widget" style="width: 100%">
<div class="widget-container">
<div class="external-cont">
<iframe id="frame" class="surf-fc-i" src="https://www.surf-forecast.com/breaks/Arnold/forecasts/widget/a" scrolling="no" frameborder="0" marginwidth="0" marginheight="0"></iframe>
<div class="footer">
<a class="logo" href="https://www.surf-forecast.com/"><img src="//www.surf-forecast.com/images/widget.png" alt="Widget" width="1" height="1" /></a>
<div class="about" id="cmt">
More <a id="cmt-1" href="https://www.surf-forecast.com/breaks/Arnold">Detailed Surf Conditions &amp; Webcams for&nbsp;<span id="cmt-2">Arnold</span></a> <span style="white-space:nowrap">at&nbsp;<a href="//www.surf-forecast.com/">surf-forecast.com</a></span>.
</div>
</div>
</div>
</div>
</div>
<small>Data courtesy of and &copy; Copyright <a href="https://surf-forecast.com" target="_blank" title="surf-forecast.com">Surf-Forecast.com</a>.</small>
</div><!-- end main-copy -->

<script>
surf_loc =[
[null,null], // (0) ['link_text', 'local description'],
['Arnold', 'Arnold'], // (1)
['County-Line-Yerba-Buena-Beach','County Line Yerba, Buena Beach'], // (2) etc.
['Deadman-s-3', 'Deadman&#39;s'],
['Deer-Creek','Deer Creek'],
['Emma-Wood-State-Beach','Emma Wood State Beach'],
['Faria','Faria'],
['Hobson-County-Park','Hobson County Park'],
['Hobson-s','Hobson&#39;s'],
['Hollywood-Beach','Hollywood Beach'],
['La-Conchita-Beach','La Conchita Beach'], // (10)
['Little-Rincon','Little Rincon'],
['Mondos','Mondos'],
['Murphy-s','Murphy&#39;s'],
['New-Jetty-South-Jetty','New Jetty / South Jetty'] // NO , (comma) after last data pair
];


function surf_up(which){
part = "https://www.surf-forecast.com/breaks/"+surf_loc[which][0];
document.getElementById('frame').src = part+"/forecasts/widget/a";
  document.getElementById('cmt-1').href = part;
  document.getElementById('cmt-2').innerHTML = surf_loc[which][1];
}


</script>NOTE: I finished the 'look-up' array early 

[K6GKM]

Very Cool beteljuice.  Yeah, I caught the La Conchita duplicate shortly after posting this, never updated the code here tho.   

I'm toying around with making the script a little more distribution-friendly, creating an array at the top a-la settings so people can just punch in the locations they want into the array and the script does the heavy lifting, but like I said above, me trying to write php and javascript code is about as effective as a monkey trying to do long division... it may take some time but I'm sure I'll figure it out.

Thanks for the input.

-Grant

[the beteljuice]

@Grant ..

me trying to write php and javascript code is about as effective as a monkey trying to do long division... it may take some time but I'm sure I'll figure it out.

There is always more than one solution, and it is said that an infinite numbers of monkeys on typewriters etc. etc.

Can be done by php, js or a mix.

Just add another field to the defining array for display true / false.
use array to create the drop-down.
Do a lot of swearing ...
Publish ...
... and wait for all the "I want ...." 

[the beteljuice]

@Grant ...

Knock, knock ... did you get my PM ?

[K6GKM]

@Grant ...

Knock, knock ... did you get my PM ?

Yes, I did!  Sorry I haven't responded, but I've been on vacation away from my computer.  I'll take a look at it.

-G