Table of Contents
The widget’s HTML code
For the ZIP file, reach out to our support.
The widget’s JSON schema
We need to declare a schema for the required configuration fields:
Hourly weather schema.jsonExpand source
{
"meta": {
"name": "Hourly Weather",
"documentationUrl": "/hourly-weather-widget-on-screen/",
"description": "Shows current weather and forecasts in three-hour increments via OpenWeather.",
"details": "Display weather in a 3-hour forecast. <hr> <span style=\"font-size:12px; font-style: italic\">NOTE: App will automatically reload the data every 10 minutes </span>",
"group": "Weather",
"html_player_support": true,
"preview_category": "styling_live"
},
"styleSettings": [
"theme",
"font",
"forecast",
"time_format",
"maincolor",
"secondarycolor",
"textcolor"
],
"supportLiveUpdate": true,
"data": {
"auto_detect": true,
"theme": "light",
"font": "Open Sans",
"temprature": 1,
"lang": "en",
"forecast": 6,
"time_format": "12",
"hourly": true,
"current": false,
"daily": false,
"maincolor": "#076890",
"secondarycolor": "#7ac6e5",
"textcolor": "#ffffff"
},
"fields": [
"auto_detect",
"location_data",
"location_text",
"forecast",
"temprature",
"time_format",
"lang",
"style_seperator",
"theme",
"maincolor",
"secondarycolor",
"textcolor",
"font",
"advanced_seperator"
],
"schema": {
"time_format": {
"type": "Select",
"title": "Time Format",
"options": [
{
"label": "12 hours",
"val": "12"
},
{
"label": "24 hours",
"val": "24"
}
],
"validators": [
"required"
]
},
"location_text": {
"type": "Text",
"title": "Location Header",
"help": "Leave it blank to apply the location name automatically or type a custom location header",
"placeholder": "e.g. Seattle, Centre"
},
"auto_detect": {
"type": "Boolean",
"title": "Use player's location",
"help": "Display weather information based on the Player's location or a custom location.",
"hideOnTrue": [
"location_data"
]
},
"theme": {
"type": "Select",
"title": "Color Theme",
"options": [
{
"options": [
{
"val": "light",
"label": "Light"
},
{
"val": "dark",
"label": "Dark"
},
{
"val": "transparent",
"label": "Transparent"
},
{
"val": "custom",
"label": "Custom"
}
],
"hides": [
{
"fields": [
"maincolor",
"secondarycolor",
"textcolor"
]
},
{
"fields": [
"maincolor",
"secondarycolor",
"textcolor"
]
},
{
"fields": [
"maincolor",
"secondarycolor"
]
},
{
"fields": []
}
],
"shows": [
{
"fields": []
},
{
"fields": []
},
{
"fields": [
"textcolor"
]
},
{
"fields": [
"maincolor",
"secondarycolor",
"textcolor"
]
}
]
}
]
},
"forecast": {
"type": "Select",
"title": "No of Hours For Forecast",
"validators": [
"required"
],
"options": [
{
"label": "3",
"val": 3
},
{
"label": "6",
"val": 6
}
]
},
"location_data": {
"type": "GoogleMapSingleMarker",
"title": "Select Location"
},
"temprature": {
"type": "Select",
"title": "Show Temperature In ",
"options": [
{
"label": "Celsius",
"val": 0
},
{
"label": "Fahrenheit",
"val": 1
},
{
"label": "Kelvin",
"val": 2
}
]
},
"lang": {
"type": "Select2",
"options": [
{
"label": "Arabic",
"val": "ar"
},
{
"label": "Bulgarian",
"val": "bg"
},
{
"label": "Catalan",
"val": "ca"
},
{
"label": "Czech",
"val": "cz"
},
{
"label": "Danish",
"val": "da"
},
{
"label": "German",
"val": "de"
},
{
"label": "Greek",
"val": "el"
},
{
"label": "English",
"val": "en"
},
{
"label": "Basque",
"val": "eu"
},
{
"label": "Persian (Farsi)",
"val": "fa"
},
{
"label": "Finnish",
"val": "fi"
},
{
"label": "French",
"val": "fr"
},
{
"label": "Galician",
"val": "gl"
},
{
"label": "Croatian",
"val": "hr"
},
{
"label": "Hungarian",
"val": "hu"
},
{
"label": "Italian",
"val": "it"
},
{
"label": "Japanese",
"val": "ja"
},
{
"label": "Korean",
"val": "kr"
},
{
"label": "Latvian",
"val": "la"
},
{
"label": "Lithuanian",
"val": "lt"
},
{
"label": "Macedonian",
"val": "mk"
},
{
"label": "Dutch",
"val": "nl"
},
{
"label": "Polish",
"val": "pl"
},
{
"label": "Portoguese",
"val": "pt"
},
{
"label": "Romanian",
"val": "ro"
},
{
"label": "Russian",
"val": "ru"
},
{
"label": "Serbian",
"val": "sr"
},
{
"label": "Swedish",
"val": "sv"
},
{
"label": "Slovak",
"val": "sk"
},
{
"label": "Slovenian",
"val": "sl"
},
{
"label": "Spanish",
"val": "es"
},
{
"label": "Turkish",
"val": "tr"
},
{
"label": "Ukrainian",
"val": "ua"
},
{
"label": "Vietnamese",
"val": "vi"
},
{
"label": "Chinese Simplified",
"val": "zh_cn"
},
{
"label": "Chinese Traditional",
"val": "zh_tw"
}
],
"title": "Language",
"editorClass": "select2container full-size"
},
"font": {
"type": "FontFamily",
"title": "Font",
"editorClass": "select2container full-size"
},
"maincolor": {
"type": "SpectrumColorPicker",
"title": "Primary Color"
},
"secondarycolor": {
"type": "SpectrumColorPicker",
"title": "Secondary Color"
},
"textcolor": {
"type": "SpectrumColorPicker",
"title": "Text Color"
},
"style_seperator": {
"margin-top": 48,
"type": "Seperator",
"title": "Style"
},
"advanced_seperator": {
"type": "Seperator",
"title": "Advanced"
}
}
}
App creation
In the upload App page, we create a new widget, upload the attached zip file and enter the schema given above.
After that, we can create Weather widgets with the desired configuration.
For any questions you may have, reach out and our dev team can help you out.