Crooked Bay Weather Widgets

Tempest

Tempest Weather System

Live weather widgets powered by the Wawautosa Marina Tempest station. These can be embedded on any page using the code below each example. The iframe widget will work on any website, if you would like to use any of the javascript options, contact me and I will add your website to an "allow list".

iframe Widget (Works everywhere)

<iframe 
  src="https://mcox.ca/weather/waw-widget"
  style="width:100%; height:260px; border:0;">
</iframe>

Full Widget (javascript)

<div id="waw-weather-full"></div>
<script>
(async function () {
  const el = document.getElementById('waw-weather-full');
  if (!el) return;

  try {
    const res = await fetch('https://mcox.ca/weather/waw.json');
    const wx = await res.json();

    el.innerHTML = `
      <div style="background:#0f3b69;color:#fff;padding:16px;border-radius:8px;font-family:sans-serif;">
        <div style="font-size:12px;opacity:0.7;">Weather</div>
        <div style="font-size:22px;font-weight:800;margin-bottom:10px;">Current Conditions</div>
        <div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;">
          <div>Temp<br><strong>${wx.temp_c ?? '--'}°C</strong></div>
          <div>Wind<br><strong>${wx.wind_kmh ?? '--'} km/h</strong></div>
          <div>Gust<br><strong>${wx.gust_kmh ?? '--'} km/h</strong></div>
          <div>Rain<br><strong>${wx.rain_mm ?? '--'} mm</strong></div>
        </div>
      </div>
    `;
  } catch (e) {
    el.textContent = 'Weather unavailable';
  }
})();
</script>

Compact Widget (javascript)

<div id="waw-weather-compact"></div>
<script>
(async function () {
  const el = document.getElementById('waw-weather-compact');
  if (!el) return;

  try {
    const res = await fetch('https://mcox.ca/weather/waw.json');
    const wx = await res.json();

    el.innerHTML = `
      <div style="background:#0f3b69;color:#fff;padding:12px;border-radius:6px;font-family:sans-serif;">
        <strong>${wx.temp_c ?? '--'}°C</strong>  
        Wind ${wx.wind_kmh ?? '--'} km/h  
        Rain ${wx.rain_mm ?? '--'} mm
      </div>
    `;
  } catch (e) {
    el.textContent = 'Weather unavailable';
  }
})();
</script>

Inline Text (javascript)

<div id="waw-weather-inline"></div>
<script>
(async function () {
  const el = document.getElementById('waw-weather-inline');
  if (!el) return;

  try {
    const res = await fetch('https://mcox.ca/weather/waw.json');
    const wx = await res.json();

    el.textContent = `Current weather at Wawautosa: ${wx.temp_c ?? '--'}°C, wind ${wx.wind_kmh ?? '--'} km/h, rain ${wx.rain_mm ?? '--'} mm.`;
  } catch (e) {
    el.textContent = 'Weather unavailable';
  }
})();
</script>