Hourly Weather widget

The widget’s HTML code

Here is the zip with the required code:

yodeck_hourly_widget.zip

The widget’s JSON schema

We need the declare a schema for the required configuration fields:

hourly weather schema.jsonExpand source

{
  "styleSettings": [
    "theme",
    "font",
    "forecast",
    "time_format",
    "maincolor",
    "secondarycolor",
    "textcolor"
  ],
  "fields": [
    "auto_detect",
    "location_data",
    "location_text",
    "forecast",
    "temprature",
    "time_format",
    "lang",
    "style_seperator",
    "theme",
    "maincolor",
    "secondarycolor",
    "textcolor",
    "font",
    "advanced_seperator"
  ],
  "meta": {
    "defaultRegion": {
      "width": 1920,
      "top": 1560,
      "height": 360,
      "left": 0
    },
    "description": "Display the weather forecast in three-hour increments using data from OpenWeather. Choose the location you want by simply clicking.",
    "group": 3,
    "details": "Display weather in a 3-hour forecast. <hr> <span style=\"font-size:12px; font-style: italic\">NOTE: Widget will automatically reload the data every 10 minutes </span>",
    "name": "Hourly Weather"
  },
  "supportLiveUpdate": true,
  "data": {
    "lang": "en",
    "hourly": true,
    "font": "Verdana",
    "time_format": "12",
    "daily": false,
    "forecast": 6,
    "current": false,
    "theme": "light",
    "auto_detect": true,
    "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": "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": "se",
          "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": "fontSelector",
      "options": [
        {
          "group": "System Fonts",
          "options": [
            {
              "val": "Arial",
              "label": "Arial"
            },
            {
              "val": "Courier",
              "label": "Courier"
            },
            {
              "val": "Comic Sans MS",
              "label": "Comic Sans MS"
            },
            {
              "val": "Georgia",
              "label": "Georgia"
            },
            {
              "val": "Times New Roman",
              "label": "Times New Roman"
            },
            {
              "val": "Trebuchet MS",
              "label": "Trebuchet MS"
            },
            {
              "val": "Verdana",
              "label": "Verdana"
            }
          ]
        },
        {
          "group": "Google Fonts",
          "options": [
            {
              "val": "Roboto",
              "label": "Roboto"
            },
            {
              "val": "Roboto Condensed",
              "label": "Roboto Condensed"
            },
            {
              "val": "Open Sans",
              "label": "Open Sans"
            },
            {
              "val": "Open Sans Condensed",
              "label": "Open Sans Condensed"
            },
            {
              "val": "Montserrat",
              "label": "Montserrat"
            },
            {
              "val": "Oswald",
              "label": "Oswald"
            },
            {
              "val": "Raleway",
              "label": "Raleway"
            },
            {
              "val": "Raleway Dots",
              "label": "Raleway Dots"
            },
            {
              "val": "Poppins",
              "label": "Poppins"
            },
            {
              "val": "Ubuntu",
              "label": "Ubuntu"
            },
            {
              "val": "Merriweather",
              "label": "Merriweather"
            },
            {
              "val": "Playfair Display",
              "label": "Playfair Display"
            },
            {
              "val": "Fira Sans",
              "label": "Fira Sans"
            },
            {
              "val": "Anton",
              "label": "Anton"
            },
            {
              "val": "Lobster",
              "label": "Lobster"
            },
            {
              "val": "Pacifico",
              "label": "Pacifico"
            }
          ]
        }
      ],
      "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"
    },
    "forecast": {
      "title": "No of Hours For Forecast",
      "type": "Select",
      "options": [
        {
          "val": 3,
          "label": "3"
        },
        {
          "val": 6,
          "label": "6"
        }
      ],
      "validators": [
        "required"
      ]
    },
    "time_format": {
      "title": "Time Format",
      "type": "Select",
      "options": [
        {
          "val": "12",
          "label": "12"
        },
        {
          "val": "24",
          "label": "24"
        }
      ],
      "validators": [
        "required"
      ]
    },
    "theme": {
      "type": "Select",
      "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"
              ]
            }
          ]
        }
      ],
      "title": "Color Theme"
    },
    "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"
    },
    "maincolor": {
      "title": "Primary Color",
      "type": "SpectrumColorPicker",
      "styleClass": "col-sm-6 left"
    },
    "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"
    },
    "secondarycolor": {
      "title": "Secondary Color",
      "type": "SpectrumColorPicker",
      "styleClass": "col-sm-6 right"
    },
    "textcolor": {
      "type": "SpectrumColorPicker",
      "title": "Text Color"
    },
    "temprature": {
      "type": "Select",
      "options": [
        {
          "val": 0,
          "label": "Celsius"
        },
        {
          "val": 1,
          "label": "Fahrenheit"
        },
        {
          "val": 2,
          "label": "Kelvin"
        }
      ],
      "title": "Show Temprature In "
    }
  }
}

Widget creation

In the upload widget 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.