Yodeck User Manual

Rich Text (Sample App)

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 charset="utf-8"> <title>Digital Signage Widget</title> <link rel="stylesheet" href="css/font-awesome.min.css" type="text/css"> <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"> <link rel="stylesheet" href="css/ace.min.css" type="text/css"> <style type="text/css"> body { -webkit-font-smoothing: antialiased; font: normal 15px/1.5 "Helvetica Neue", Helvetica, Arial, […]

UI Form Definition for Custom Apps

Introduction In order to provide configuration options for your Apps, you need to define your configuration options in a specific syntax. This way, the Yodeck UI can present an input form to the end user so that he or she can properly edit the configuration options. Your configuration options are stored in a single JSON […]

The Simple Clock

In this guide, you will build your first Custom App, a simple digital clock. Create your first index.html file Every App has a single entry point, the ” index.html ” file. The web viewer loads up this HTML file locally from the storage of the Player. Let’s create a sample. Using your favorite editor, create […]

Shedul (sample App)

This app displays graphics from the Shedul Service The app’s Script code Script CodeExpand source type("""input[name="email"]""" , """{{email|default:'a@b.c'|safe|addslashes}}""") type("""input[name="password"]""" , """{{password|default:'password'|safe|addslashes}}""") runScript(""" document.querySelector('input[name="email"]').dispatchEvent(new Event("input", { bubbles: true })) document.querySelector('input[name="password"]').dispatchEvent(new Event("input", { bubbles: true })) """) pause(1) clickAndWait("""button""") repeat(0){ pause({{refresh|default:180}}) refreshAndWait() waitForPageLoad() runScript(""" if(document.querySelector('div[id="react"]')){ var elem = j('div[id="react"]'); j('body').append(elem); j('body>:visible').not(':last').remove(); } """) } The app’s JSON […]

Trello (sample app)

This app displays graphics from the Trello Service The app’s Script code Script CodeExpand source type("""#user""" , """{{email|default:'a@b.c'}}""") type("""#password""" , """{{password|default:'password'}}""") clickAndWait("""#login""") openAndWait("""{{url|default:'https://trello.com/'}}""") repeat(0){ pause({{refresh|default:180}}) refreshAndWait() waitForPageLoad() runScript(""" j('.board-header, #header').hide(); """) } The app’s JSON Schema We need the declare a schema for the required configuration fields: email: the email of the user password: the […]

Player HTTP API

Intro The player offers an HTTP API that custom HTML Apps can use. It provides information about the player and allows requests for proxying, caching, and app storage. The HTTP server is available at the following URL: Remember that the server only serves local connections and doesn’t bind to any public interfaces of the player. […]

Digital Clock (sample App)

This app displays the player’s local time. The app’s HTML code The following app does the following: reads the app’s configuration and applies the required CSS for background color, font color, font family, font style, font weight resizes text to fit the available window gets and displays time every second We also include a “js” […]

Daily Weather

Show the current weather followed by the week’s weather forecast using data from OpenWeather. The app will automatically reload the data every 10 minutes. Creating a Daily Weather app Click on the Daily Weather app within your app gallery to add it, and fill in the app details as follows: Daily Weather app example FAQ […]

Date&Time App Code

The App’s HTML code Date&Time index.htmlExpand source <!DOCTYPE html> <html> <head> <title>DClock</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> html, body { background-color: transparent; font-family: tahoma; font-size: 48px; height: 100%; width: 100%; } * { margin: 0; padding: 0; } #clock { height: 100%; text-align: center; white-space: nowrap; } .clock-container{ display: inline-block } .smaller { […]