Simple Clock Widget

Create a new widget from template

Select the menuitem "Create Widget..." from RainWidget's tray menu, it will auto create a new blank widget from template and open the widget's folder ,then you can see all the files of the new widget is "index.html" , "widget.json", we can modify them to build our own widgets.

Modify Widget Information

1. You can modify the widget folder name "NewWidget" to any other you want,for excample "MyClock".

2. Open the widget file "widget.json" with Notepad or Notepad++ , then you can see all the widget information and you can modify the name,author,widget size width/height to any other you want.

Add DateTime Measure

1. Found the "measures" json node in file "widget.json"

2. Add a DateTime Measure node code with this code and save and close this file:

"measures":{  	
  "datetime":{  		
    "name":"datetime1",  //use this name in index.html to get measure data  		
    "title":"Clock",  //this title will display at the widget setting tab page   
    "is12hr":true,  //12HourClock option  	
  }  
}

Modify Widget UI

1. Open the widget file "index.html" with Notepad or Notepad++

2. Modify the text between <div id="widget"> and </div> to " {{ datetime1.timeSec }} " ,the "timeSec" is one of the datetime measure data tags, you can find all the data tag of datetime from here

3. save and close this file

4. Add this widget to your desktop or reload it (Select menuitem "reload" from RainWidget's tray menu), then you can see the widget display current time on your desktop.

<div id="widget"> {{ datetime1.timeSec }} </div>

Using Widget

1. Add this widget to your desktop

2. right click the widget and select menuitem "Settings" to open the widget setting window

3. Switch to the "DateTime" tab page of setting window, config the datetime with 12-Hour-Clock , Zero-Prefix,TimeZone etc...

4. Click "Apply" or "OK" button to save settings, the widget will auto update.