The Widget-List portal is where you start running Widget-List Widgets. You can search for widgets or add a URL of a Widget that's not listed in the portal yet.

View Portal

or text this url link to yourself and view on Apple Watch
https://portal.widget-list.com/

 

Hello World

Nothing in the coding world is more iconic than the ages old "hello world" app, so we had to make something to represent that within our framework. We were able to get this done in 5 minutes, including testing and deployment.

 

List Items

List Items is a very simple Widget UI wise. It's pretty much a set of table rows each with a single line of text. All the data entries are stored using localStorage on the Apple Watch itself, so it can even be run without a network connection. Enhancements could include a sync to an external data source, but this shows how easy it is to add a few rows of text themed like a native Apple Watch App.

 

Lotto

This is a great example of how the simplicity of a single "TableView" row entry can contain a lot of information, built with the simplicity of HTML5. This shows lottery results, but also demonstrates that it's easy to create multiple labels on each row to convey multiple data points. Much easier than having to tap a single row to get to those same details.

 

UI Demos

Being able to construct just about any UI element for Apple Watch has it's place, but why re-invent the wheel? It's also possible to use native input metaphors for common input data types to make using your Widget even more useful, engaging and interesting. You can see here native input controls for date, time and numeric data types.

 

Solar Info

Solar tracker is an example of calling a web service (from the Apple Watch itself) parses the JSON response and then adds rows to represent each of data returned by the service. It also uses a couple DIV's and a gradient background to show a nice looking bar graph of the solar energy harvested. This demonstrates how to have a row template and then use that to build and populate as many rows as needed.

 

Timer

Timer is a Widget that allows you to show a simple circular-themed timer on an Apple Watch. It's a simple implementtion of SVG and dynamically updates every second. It only shows seconds on the circular ring, but it would be a fairly simple enhancement to add in minutes or even hours in concentric rings.

 

Binary Clock

Binary Clock uses multiple circular DIV's to simulate electronic LED's to show the time in binary. As with other Widgets, this is a very simple widget to implement and just a few lines of Javascript to get the current time (from the device) and translate that into the appropriate LED's in the appropriate rows.