The best place to start is a great website called codepen.io. This website has thousands of HTML based components you can search for and use, and the graphics can be great.
So lets get started. A common widget that people like to display on their screen is a digital/analog clock. No need to create one from scratch. Open the codepen.io website and search for an analog clock. Here is one example:
Now lets “send” this clock to your screen. On a separate browser tab go to the WhizScreen DIY web console (https://app.whizscreen.com). After login, click the “Add a Widget” tab and give your new widget a name (for example name it “Analog Clock”).
Switch back to the codepen website and copy paste the content of the HTML section into the “HTML Code or Picture URL or Page URL” text area. Now, add the following tag <style> before the pasted code. Copy paste the content of the CSS section from the codepen website after the <style> tag and add another </style> tag at the end of the pasted code.
Click the “submit” button to save your work.
Now open the “Widget” tab in the WhizScreen console, choose 1 as the Tile and set Room Name to the same room your WhizScreen DIY app is set to (the default is Living Room).
In the “Widget Type to Use” choose the widget you have just created (i.e. “Analog Clock”). Scroll down and click the “Send to WhizScreen” button.
Look at your WhizScreen (i.e. your WhizScreen DIY app has to run on your tablet and you must be logged in with the same user as the one you use in the web console). You should see the Analog Clock presented on the screen.
TIP: The “API call” text box will show the API command that you can manually use to send this widget to your screen.