Skip to content

Instantly share code, notes, and snippets.

@abachman

abachman/adafruit-io-data-OBS-browser-source.html

Created April 26, 2020 18:18
Show Gist options
  • Save abachman/f0d82c66af63a913f7c757f9821912d4 to your computer and use it in GitHub Desktop.
Save abachman/f0d82c66af63a913f7c757f9821912d4 to your computer and use it in GitHub Desktop.
Download ZIP
Locally hosted OBS Browser Source html file pulling temp + humidity from my little office weather station
Raw
adafruit-io-data-OBS-browser-source.html
<!DOCTYPE html>
<html>
<head>
<!-- Fontawesome 5! Get it here: https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself -->
<link rel="stylesheet" href="css/all.min.css" />
<style>
body {
background: rgba(0, 0, 0);
color: #ffffff;
font-size: 16px;
font-family: Helvetica, Arial, sans-serif;
font-weight: normal;
height: 24px;
margin: 0;
padding: 0;
}
.values {
display: flex;
align-items: center;
justify-content: space-between;
width: 380px;
height: 24px;
}
</style>
<script>
// retrieving temp + humidity from Adafruit IO: https://io.adafruit.com/api/docs/#get-feed-data
// make sure your feeds are public
const USER = "abachman";
const FEEDS = ["active.temperature", "active.humidity"];
function formatDate(now) {
var format = "{W}, {M} {D} {h}:{m}{ap}";
var Wday = new String();
var Warray = new Array("Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat");
Wday = Warray[now.getDay()];
format = format.replace(/\{W\}/g, Wday);
var Month = new String();
var Marray = new Array(
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec"
);
Month = Marray[now.getMonth()];
format = format.replace(/\{M\}/g, Month);
var Mday = new String();
Mday = now.getDate();
format = format.replace(/\{D\}/g, Mday);
var h = now.getHours();
var ap = new String();
var pm = h > 11 ? true : false;
if (h > 12) {
h -= 12;
}
ap = pm ? "PM" : "AM";
format = format.replace(/\{ap\}/g, ap);
var hh = new String();
hh = h;
format = format.replace(/\{h\}/g, hh);
var mm = new String();
mm = now.getMinutes();
if (mm < 10) {
mm = "0" + mm;
}
return format.replace(/\{m\}/g, mm);
}
function load() {
FEEDS.forEach(function (feed_id) {
const URL = `https://io.adafruit.com/api/v2/${USER}/feeds/${feed_id}/data?limit=1&include=value,created_at`;
console.log("FETCHING", URL);
fetch(URL)
.then(function (response) {
console.log("got response", response);
if (response.status === 200) {
return response.json();
}
})
.then(function (data) {
console.log("got JSON", data);
if (data[0].value) {
document.querySelector(
`[name="${feed_id}"]`
).innerText = parseInt(data[0].value);
let date = new Date(Date.parse(data[0].created_at));
console.log("with date", date);
document.querySelector("#time").innerText = formatDate(date);
}
});
});
setTimeout(load, 30000);
}
load();
</script>
</head>
<body>
<div class="values">
<div>
<i class="fas fa-thermometer-half"></i>
<span name="active.temperature"></span>&#176;F
</div>
<div>
<i class="fas fa-tint"></i>
<span name="active.humidity"></span>&#37;
</div>
<div><i class="fas fa-clock"></i> <span id="time"></span></div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment