Table of Contents
The app’s HTML code
We also include a “js” folder with the jQuery library for easier HTML DOM manipulation.
index.htmlExpand source
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>RSS Feed Widget</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="css/custom.css" type="text/css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/moment.js"></script>
<script type="text/javascript" src="js/parser.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/lib.js"></script>
<!-- Config js files for every widget -->
<script type="text/javascript" src="js/custom.js"></script>
<script type="text/javascript" src="js/al.js"></script>
<script type="text/javascript" src="js/bbc.js"></script>
<script type="text/javascript" src="js/cnn.js"></script>
<script type="text/javascript" src="js/espn.js"></script>
<script type="text/javascript" src="js/google_news.js"></script>
<script type="text/javascript" src="js/google_alerts.js"></script>
</head>
<body>
<div class="main"></div>
<div class="mask">
<div class="lds-grid"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
</div>
<div class="refresh-mask hidden">
<span class="refresh-widget-message"> <i class="fas fa-sync"></i> Reloading widget with updated content </span>
</div>
<div class="error">
<div id="error-page">
<i class="fas fa-wifi" id="error-icon"></i>
<span class="error-message"> <span class="error-header"> </span> <br> <p class="error-text-message"> </p></span>
</div>
</div>
</body>
</html>
The app’s JSON Schema
we need the declare a schema for the required configuration fields:
- number_of_slides: the number of slides that you want to display
- slide_duration: how much time the slide will stay on the screen
- text: information about the RSS feed
- refresh_rate: how often the RSS feed will refresh
- font_size
- font_color
- rgba_color
Custom RSS.jsonExpand source
{
"styleSettings": [
"font_size",
"font_color",
"rgba_color"
],
"fields": [
"rssURL",
"defaultImage",
"number_of_slides",
"slide_duration",
"refresh_rate",
"style_seperator",
"font_size",
"font_color",
"rgba_color",
"advanced_seperator",
"widget"
],
"meta": {
"details": "Display an RSS feed by simply copy and pasting the feed link. Customize font color and size.",
"group": 2,
"description": "Display news from any RSS url",
"name": "Custom RSS"
},
"supportLiveUpdate": true,
"data": {
"widget": "0",
"font_size": 27,
"refresh_rate": 30,
"slide_duration": 10,
"number_of_slides": 10,
"rgba_color": "#444444",
"font_color": "white"
},
"schema": {
"advanced_seperator": {
"border": "bottom",
"type": "Seperator",
"margin": 10,
"template": "<div class=\"form-group field-<%= key %>\"><div class=\"col-sm-10\"><span data-editor></span></div></div>",
"title": "More Settings"
},
"widget": {
"type": "Hidden",
"val": "0"
},
"font_size": {
"title": "Font Size",
"type": "Spinner",
"help": "Set the (text) font size for the widget",
"editorAttrs": {
"max": 100,
"step": 1,
"def": 20,
"min": 8
},
"template": "<div class='form-group field-content.font_size'><label class='col-sm-2 control-label'> Font Size </label> <div class='col-sm-10'> <span data-editor></span> <span class='help-button' data-rel='tooltip' type='text' title='Set the (text) font size for the widget' data-trigger='hover' data-placement='top'> ? </span> <p class='help-block' data-error> </p> </div> </div>"
},
"refresh_rate": {
"type": "Spinner",
"editorAttrs": {
"max": 9999,
"step": 1,
"def": 30,
"min": 1
},
"title": "Refresh rate (minutes)"
},
"slide_duration": {
"template": "<div class='form-group field-content.font_size'><label class='col-sm-2 control-label'> Slide Duration </label> <div class='col-sm-10'> <span data-editor></span> <span class='help-button' data-rel='tooltip' type='text' title='Time (in seconds) to change the news post' data-trigger='hover' data-placement='top'> ? </span> <p class='help-block' data-error> </p> </div> </div>",
"type": "Spinner",
"help": "Time (in seconds) to change the news post",
"editorAttrs": {
"max": 60,
"step": 1,
"def": 10,
"min": 5
},
"title": "Slide Duration"
},
"defaultImage": {
"type": "Text",
"help": "Paste a URL of an image to be displayed when there is no image on the feed. (Optional)",
"title": "Default Image"
},
"number_of_slides": {
"type": "Spinner",
"editorAttrs": {
"max": 30,
"step": 1,
"def": 5,
"min": 1
},
"template": "<div class='form-group field-content.font_size'><label class='col-sm-2 control-label'> Maximum News Posts </label> <div class='col-sm-10'> <span data-editor></span> <span class='help-button' data-rel='tooltip' type='text' title='Set a maximum number of news to show' data-trigger='hover' data-placement='top'> ? </span> <p class='help-block' data-error> </p> </div> </div>",
"title": "Number of slides to show"
},
"rgba_color": {
"title": "Background Color",
"type": "SpectrumColorPicker",
"styleClass": "col-sm-6 right"
},
"font_color": {
"title": "Font Color",
"type": "SpectrumColorPicker",
"styleClass": "col-sm-6 left"
},
"style_seperator": {
"border": "bottom",
"type": "Seperator",
"margin": 10,
"template": "<div class=\"form-group field-<%= key %>\"><div class=\"col-sm-10\"><span data-editor></span></div></div>",
"title": "Style Settings"
},
"rssURL": {
"title": "Put the URL of the RSS feed here.",
"type": "Text",
"validators": [
"required"
]
}
}
}
Complete ZIP Package
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 digital clock apps with the desired styling/configuration.
You can download the complete ZIP file for the App from here:
For any questions, you may have, reach out and our development team can help you out.