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

## 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>
	<!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>°F
	</div>
	<div>
	<i class="fas fa-tint"></i>
	<span name="active.humidity"></span>%
	</div>
	<div><i class="fas fa-clock"></i> <span id="time"></span></div>
	</div>
	</body>
	</html>