Select Page

Have you heard of BloomSky?

Up until a month ago, I hadn’t heard of them either until my brother clued me in to their existence. The tl;dr is that BloomSky is a solar-powered weather station that connects to the web and updates weather data for your station. There is a cool mobile app where you can view your weather information and see other stations around you. For people like me who love hyperlocal weather forecasting, this was an awesome gadget to get!

I set mine up a few weeks ago and loved watching the data stream over to my phone, but I was really upset that there wasn’t an API that I could tap into to get my info. That is, until last week, where BloomSky  released their API for developers!

I immediately went about putting together a demo – the beauty of the API is that it outputs data in JSON format, which means that it can be easily parsed by most programming languages.

However, one snag I ran into was that in order for it to return the data, you need to pass along an authentication header with your API key. I ran into a lot of cross-domain issues when trying to do this through Javascript, so I decided that the best way to get the info was to create a PHP file that would act as a proxy and make the JSON data accessible for consumption by my front-end script.

Here’s the code:

PHP

<?php
header('Content-Type: application/json');

$api = "xxxxxxxxxxxxxxxxxxxxxx"; //your API key from BloomSky
$url = "https://api.bloomsky.com/api/skydata";

// Create a stream
$opts = array(
'http'=>array(
'method'=>"GET",
'header'=>"Authorization: ".$api."\r\n"
)
);
$context = stream_context_create($opts);
// Open the file using the HTTP headers set above
$file = file_get_contents($url, false, $context);
echo $file;
?>

With a PHP proxy in place and the headers correctly being sent, I’m now getting my data back from my station (or, ya know, the database where my station is transmitting data).

All that’s left is my front-end script

Javascript/jQuery

//function to convert celsius to farenheit
function convertTemp(temp){
return Math.round(temp * 9/5 + 32);
}

$.ajax({
url: "data.php",
}).done(function(data){
//set variable data
var obj = data[0];
console.log(obj);
var date = moment.unix(obj.Data.TS).fromNow();
var img = obj.Data.ImageURL;
var temp = convertTemp(obj.Data.Temperature)+"&deg;";
var location = obj.FullAddress;
var humidity = obj.Data.Humidity;
var rain = obj.Data.Rain;
var pressure = obj.Data.Pressure;
var night = obj.Data.Night;
var uv = obj.Data.UVIndex;
var voltage = obj.Data.Voltage;
var video = obj.VideoList[4];
//write to page
$("#station_image").css("background-image","url("+img+")");
$("#temp").html(temp);
$("#location").html(location);
$("#date").html(date);
$("#humidity").html("Humidity: "+humidity+"%");
$("#rain").html("Rain: "+rain);
$("#pressure").html("Pressure: "+pressure+"bar");
$("#uv").html("UV: "+uv);
$("#voltage").html("Unit Voltage: "+voltage+"mv");
$("#video").html("<a href='"+video+"' target='_blank'>Yesterday's Timelapse</a>");
});
});


And that’s all you need to do! Now you can get your station data and do all sorts of cool stuff. I’ve been running a cron job that checks hourly for weather data and updates it in a SQL database so I can plot the weather over time. I’m also working on building in weather data from Open Weather Map so I can have a cool little widget that I can use to see what my local weather is going to be like. The possibilities are limited to whatever you can imagine. I’m already thinking of ideas of how to incorporate this into a possible campaign for a client at work. Thanks BloomSky!

View Demo

NOTE:

The API seems to be going through incremental changes – I’ve noticed that the values being returned used to be metric, and now they are imperial, I’m not sure if this a regional thing, but it’s the behavior I’ve observed. I will try to keep this code updated as changes are made and note the differences when possible.