SpatialTimes Weather Sample GUI

Spatial Times Weather Sample GUI using results from a Dark Sky weather request

by Bryan McIntosh

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/skycons/1396634940/skycons.min.js"></script>
<div id="container">
  <div>
    <canvas id="wIcon" width="128" height="128"></canvas>
  </div>
  <div id="wSummary"></div>
  <div id="geoLoc"></div>
  <div id="temperatureGroup">
    <span id="wTemp"></span><span>&deg;</span>
  </div>
</div>

CSS

#container {
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
}
#wSummary {
  font-size: 1.7em;
}
#geoLoc {
  color: grey; font-size: 0.7em;
}
#temperatureGroup {
  padding-top: 20px; font-size: 2.6em;
}

JavaScript

var skycons = new Skycons({
  "color": "blue"
});
var outJson = {
  "latitude": 43.642567,
  "longitude": -79.387054,
  "timezone": "America/Toronto",
  "currently": {
    "time": 1547392180,
    "summary": "Partly Cloudy",
    "icon": "partly-cloudy-day",
    "nearestStormDistance": 63,
    "nearestStormBearing": 201,
    "precipIntensity": 0,
    "precipProbability": 0,
    "temperature": -9.58,
    "apparentTemperature": -16.19,
    "dewPoint": -12.04,
    "humidity": 0.82,
    "pressure": 1032.43,
    "windSpeed": 14.97,
    "windGust": 31.87,
    "windBearing": 62,
    "cloudCover": 0.47,
    "uvIndex": 1,
    "visibility": 14.08,
    "ozone": 353.26
  },
  "offset": -5
}

skycons.add("wIcon", outJson.currently.icon);
$("#wSummary").text(outJson.currently.summary);
$("#geoLoc").text(outJson.latitude + "," + outJson.longitude);
$("#wTemp").html(String(outJson.currently.temperature));