Table of Contents
The app’s HTML code
Here is the zip with the required code:
yodeck_current_widget.zip
The app’s JSON schema
We need the declare a schema for the required configuration fields:
current weather schema.jsonExpand source
{
"styleSettings": [
"theme",
"font",
"maincolor",
"textcolor"
],
"fields": [
"auto_detect",
"location_data",
"location_text",
"temprature",
"lang",
"style_seperator",
"maincolor",
"textcolor",
"font",
"advanced_seperator"
],
"meta": {
"description": "Display the current weather data from OpenWeather. Just click to choose the location you want.",
"group": 3,
"details": "Display current weather information in your screens. <hr> <span style=\"font-size:12px; font-style: italic\">NOTE: Widget will automatically reload the data every 10 minutes </span>",
"html_player_support": true,
"name": "Current Weather"
},
"supportLiveUpdate": true,
"data": {
"lang": "en",
"font": "Verdana",
"current": true,
"theme": "custom",
"auto_detect": true,
"maincolor": "#0b5394",
"secondarycolor": "ffffff00",
"textcolor": "#ffffff",
"temprature": 0
},
"schema": {
"advanced_seperator": {
"margin": 10,
"title": "More Settings",
"border": "bottom",
"template": "<div class=\"form-group field-<%= key %>\"><div class=\"col-sm-10\"><span data-editor></span></div></div>",
"type": "Seperator"
},
"lang": {
"type": "Select2",
"options": [
{
"val": "ar",
"label": "Arabic"
},
{
"val": "bg",
"label": "Bulgarian"
},
{
"val": "ca",
"label": "Catalan"
},
{
"val": "cz",
"label": "Czech"
},
{
"val": "da",
"label": "Danish"
},
{
"val": "de",
"label": "German"
},
{
"val": "el",
"label": "Greek"
},
{
"val": "en",
"label": "English"
},
{
"val": "fa",
"label": "Persian (Farsi)"
},
{
"val": "fi",
"label": "Finnish"
},
{
"val": "fr",
"label": "French"
},
{
"val": "gl",
"label": "Galician"
},
{
"val": "hr",
"label": "Croatian"
},
{
"val": "hu",
"label": "Hungarian"
},
{
"val": "it",
"label": "Italian"
},
{
"val": "ja",
"label": "Japanese"
},
{
"val": "kr",
"label": "Korean"
},
{
"val": "la",
"label": "Latvian"
},
{
"val": "lt",
"label": "Lithuanian"
},
{
"val": "mk",
"label": "Macedonian"
},
{
"val": "nl",
"label": "Dutch"
},
{
"val": "pl",
"label": "Polish"
},
{
"val": "pt",
"label": "Portoguese"
},
{
"val": "ro",
"label": "Romanian"
},
{
"val": "ru",
"label": "Russian"
},
{
"val": "sw",
"label": "Swedish"
},
{
"val": "sk",
"label": "Slovak"
},
{
"val": "sl",
"label": "Slovenian"
},
{
"val": "es",
"label": "Spanish"
},
{
"val": "tr",
"label": "Turkish"
},
{
"val": "ua",
"label": "Ukranian"
},
{
"val": "vi",
"label": "Vietnamese"
},
{
"val": "zh_cn",
"label": "Chinese Simplified"
},
{
"val": "zh_tw",
"label": "Chinese Traditional"
}
],
"title": "Language"
},
"font": {
"type": "FontFamily",
"title": "Font"
},
"location_text": {
"type": "Text",
"help": "Leave it blank to apply the location name automatically or type a custom location header",
"title": "Location Header"
},
"location_data": {
"type": "GoogleMapSingleMarker",
"title": "Select Location"
},
"auto_detect": {
"hideOnTrue": [
"location_data"
],
"type": "Boolean",
"help": "Display weather information based on the Player's location or a custom location.",
"title": "Use player's location"
},
"style_seperator": {
"margin": 10,
"title": "Style Settings",
"border": "bottom",
"template": "<div class=\"form-group field-<%= key %>\"><div class=\"col-sm-10\"><span data-editor></span></div></div>",
"type": "Seperator"
},
"maincolor": {
"title": "Primary Color",
"type": "SpectrumColorPicker",
"styleClass": "col-sm-6 left"
},
"textcolor": {
"title": "Text Color",
"type": "SpectrumColorPicker",
"styleClass": "col-sm-6 right"
},
"temprature": {
"type": "Select",
"options": [
{
"val": 0,
"label": "Celsius"
},
{
"val": 1,
"label": "Fahrenheit"
},
{
"val": 2,
"label": "Kelvin"
}
],
"title": "Show Temprature In "
}
}
}
App creation
In the upload app page, we create a new app, upload the attached zip file and enter the schema given above.
After that, we can create Weather apps with the desired configuration.
For any questions, you may have, reach out and our dev team can help you out.