HOME > Documentations > Yodeck User Manual > Analog Clock (sample App) Analog Clock (sample App) Posted by Kostas Sveronis on May 13th, 2020 Table of Contents The app’s HTML codeThe app’s json schemaApp creation In this guide, you will build a Custom App, the “digital_clock”. This app displays the player’s local time. The app’s HTML code The following app does the following: creates html svg tags for the clock’s frame and hands. reads the app’s configuration and applies the required CSS for background color, fill color (clock’s face), stroke color (hands and clock frame color). gets and displays the time every second by rotating the clock hands. The app’s json schema we need the declare a schema for the required configuration fields: bgcolor: a color picker field that defines the app’s background color. fill: a color picker field that defines the app’s font color. stroke: a color picker field that defines the app’s font color. fields: a list defining the order of the above fields (json objects have no order) analog clock schema.jsonExpand source { "fields": [ "bgcolor", "fill", "stroke" ], "schema": { "bgcolor": { "title": "Background Color", "type": "SpectrumColorPicker" }, "fill": { "title": "Fill", "type": "SpectrumColorPicker" } "stroke": { "title": "Stroke", "type": "SpectrumColorPicker" } } } 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 analog clock apps with the desired styling/configuration. For any questions you may have, reach out and our dev team can help you out.