Hologram Logo

Weather

The weather API allows you to display weather information in your widget.

Getting Weather Data

Weather data is retrieved using Hologram's get method:

Hologram.get(this, 'weather', (weather) => {
    console.log(weather)
})

The callback returns an object with weather information, described below.


Weather Object Overview

The weather object returned by the weather callback contains three child objects:

current:

Contains the current weather information. Since Hologram throttles all weather API requests to a max of one request per hour, the current object will always be accurate to one hour or less.

weather.current.key
// For example, to show the temperature you use
// weather.current.temperature

daily:

Contains 8 child objects, representing the weather forecast for the next 7 days. The zero index represents today. The 1 index represents tomorrow, and so forth.

weather.daily.[n].key
// For example, to show the projected wind speed for tomorrow you use
// weather.daily[1].windSpeed

hourly:

Contains 48 child objects, representing the weather forecast for the next 48 hours. The zero index represents the current hour. The 1 index represents the hour after that, and so on.

weather.hourly.[n].key
// For example, to show the projected humidity two hours from now use
// weather.hourly[2].humidity

An example of the weather object is found below.


Weather Placeholder

Because weather data is fetched asynchronously, we recommend you use the weather placeholder object within your widget. That way, if the widget loads before the weather is available it will show valid data types and not null.

Hologram.weather.placeholder

See usage example below.


Simple Weather Widget Example

Here's a simple widget that displays the weather.

{
    extends: HologramWidget,
    data() {
        return {
            // When defining the initial value for weather,
            // use the weather placeholder
            weather: Hologram.weather.placeholder
        }
    },
    mounted() {
        // Load the weather when the widget is created
        Hologram.get(this, 'weather', (weather) => {
            this.weather = weather
        })
    },
    methods: {
        // Create a wrapper function so we can format
        // temps in our template variables
        formatTemp(temp) {
            return Hologram.util.formatTemp(temp)
        }
    },
    template: `
        <div>
            The weather is {{ weather.current.description }}<br>
            The temperature is {{ formatTemp(weather.current.temperature) }}
        </div>
    `
}

Weather Object Prototype

This is an example of the weather object returned by Hologram:


 {
    "status": 1, // 0: Weather data not available. 1: Weather data available

    "current": {
        "isNight": true,
        "sunrise": 1602940608, // Unix timestamp
        "temperature": 48
        "temperatureMax": 55, // Max daily temperature
        "temperatureMin": 44, // Min daily temperature
        "date": 1602984072,
        "dewPoint": 19.24,
        "uvi": 3.68,
        "sunset": 1602980282,
        "pressure": 1015, // Atmospheric pressure in hPa
        "rain": 0, // Rain volume in the last hour in mm
        "visibility": 10000, // In meters
        "clouds": 20, // Percentage of cloudiness
        "feelsLike": 34,
        "windDeg": 280, // Wind direction in degrees
        "windDir": "W", // Wind compass direction
        "windGust": 0,
        "windSpeed": 16.11,
        "humidity": 29, // Humidity percentage
        "icon": "clouds-few",
        "description": "Few Clouds",
    },

    "daily": [{
        "isNight": false,
        "date": 1602957600,
        "sunrise": 1602940608,
        "sunset": 1602980282,
        "windSpeed": 30.53,
        "windDeg": 268,
        "windDir": "SW",
        "rain": 0, // Rain volume in the last hour in mm
        "clouds": 74, // Percentage of cloudiness
        "humidity": 38,
        "pressure": 1009,
        "dewPoint": 25,
        "temperatureDay": 55,
        "temperatureNight": 46,
        "temperatureMin": 44,
        "temperatureMax": 55,
        "feelsLikeDay": 34,
        "feelsLikeNight": 36,
        "feelsLikeMorn": 32,
        "feelsLikeEve": 30,
        "uvi": 3.68,
        "icon": "clouds-broken",
        "description": "Broken Clouds"
    }, {
        "isNight": false,
        "date": 1603044000,
        "sunrise": 1603027076,
        "sunset": 1603066591,
        "feelsLikeEve": 37,
        "feelsLikeMorn": 31,
        "feelsLikeDay": 30,
        "feelsLikeNight": 34
        "dewPoint": 27,
        "windSpeed": 23.67,
        "rain": 0, // Rain volume in the last hour in mm
        "pressure": 1016,
        "windDeg": 256,
        "windDir": "SW",
        "clouds": 100,  // Percentage of cloudiness
        "uvi": 3.74,
        "temperatureDay": 47,
        "temperatureNight": 45,
        "temperatureMin": 35,
        "temperatureMax": 50,
        "humidity": 51,
        "icon": "clouds-overcast",
        "description": "Overcast Clouds",
    },
    {
     // Etc.
    }],


    "hourly": [{
        "isNight": true,
        "date": 1602982800,
        "temperature": 48
        "clouds": 20,
        "pressure": 1015,
        "windDir": "W",
        "windDeg": 295,
        "windSpeed": 14.61,
        "dewPoint": 19.24,
        "feelsLike": 34,
        "humidity": 29,
        "icon": "clouds-few",
        "description": "Few Clouds",

    }, {
        "isNight": true,
        "date": 1602986400,
        "temperature": 46
        "feelsLike": 36,
        "dewPoint": 25.92,
        "clouds": 56,
        "humidity": 43,
        "pressure": 1015,
        "windDir": "W",
        "windDeg": 285,
        "windSpeed": 9.91,
        "icon": "clouds-broken",
        "description": "Broken Clouds",
    },
    {
        // Etc.
    }],
}

Weather Icon Codes

The weather object always returns a weather icon name corresponding to the weather condition. Below is a list of all possible icon names in the event you wish to create your own icon set. The list below contains only the day states. The weather object returns "isNight", which allows for a night state icon if you are so inclined.

not-available // Icon code returned when weather status = 0

clear-sky
clouds-few // 10-25% sky covered
clouds-scattered // 25-50% sky covered
clouds-broken // 50-85% sky covered
clouds-overcast // 85-100% sky covered

// The weather object does not currently return wind icon states
// but for future use we've reserved the following wind states:
wind-clear
wind-few
wind-scattered
wind-broken
wind-overcast

rain-drizzle
rain-light
rain-moderate
rain-heavy

rain-freezing
sleet

thunderstorms
thundershowers

snow-light
snow-moderate
snow-heavy

dust
haze
mist
fog
smoke
volcano
tornado
squall
hurricane
tropical-storm

// The weather object does not return these icon names, but
// we include them since they can be useful.
sunrise
sunset
hot
cold