[TUTORIAL] Custom Android widgets/dashboard using API Builder app, Tasker & KWGT

In this tutorial, I’ll show you how you can build custom widgets on your Android phone using Homey + API Builder app, Tasker and KWGT.

Demo on what easily can be done

API Builder: API Builder App för Homey | Homey
Tasker: https://play.google.com/store/apps/details?id=net.dinglisch.android.taskerm
KWGT Kusom Widget Maker: https://play.google.com/store/apps/details?id=org.kustom.widget

Start by installing the API Builder app and follow the instructions in the app settings on how to get your unique internet-exposed URL.

When you’re done and you’ve got a unique URL in the app settings, it’s time to create your first endpoint!

To do this, create a new flow.
Add the endpoint trigger in the “When” section.
Method can be either GET or POST. Data can optionally be sent in with the request as body and then used with the “Body data” tag.

Add a response in the “Then” section. This is the flow card that returns the response to the requester with data. Here you can ender any valid JSON you want.

Save the flow.

Let’s test our endpoint!
Copy your unique url and paste it in your browser. Add the endpoint to it and the api_key parameter including your API key aswell.
Example: https://5c13b342210a4b650.itconnects.se/getTemp?api_key=sub_RfHilhtTYeb1LQBJYGYlaqw

The results should show your response like below:

Let’s head over to Tasker to get that data every time we unlock our phone and send it to our custom widget!

Open up Tasker and go to “Tasks” tab and press Add (+) att the bottom. Name the task whatever you want and save.

Now add a new action. Add Net → HTTP Request.
Select Method: GET
URL: Add your full url here including endpoint and api key (like above).
Press Back button to save and exit.

Add another action Plugin → Kustom Widget → KWGT Send Variable
Edit the Configuration like below and save and then press Back button to save and exit.

Press play button at the bottom left to test that it works.

It should show green dots at each action if successfull.

Go back to “Profiles” tab. Create a new profile.
Choose Event → Display → Display Unlocked
Priority can stay as Normal
Press back button to save.
Select “Temp” in the dropdown that appears and then save by pressing the checkmark in the top right.

Now we’re done in Tasker, let’s create our widget!

Start by adding a Kustom Widget on your homescreen. Select 1x1 widget.

Then press the widget to edit it. Press “Create” to start edit the widget.

We won’t go into details here since designing widgets can be as advanced as you’d like it to be. There are many guides on the internet on how to do this, so I’ll just show how you can add your data to text for now.

Press the + at the top right and add Text.

Then press the text layer to edit it

Press Text

In the Formel field, type below to fetch the data from Tasker
$br(tasker, temp)$°C
If successful, the value will show up in realtime in “Results”-field. Press save.

Press the disc in the top right to save the widget.

Done! Head back to your homescreen to see the results.
The value will be updated each time you unlock your phone!

Now go ahead and improve the design and add more endpoints/data to your homescreen.

9 Likes

How do I make a widget which I can click so it changes something. Let’s say I want to controll a light. When the light is off the widget background is gray, and when I click the widget (or the light is turned on by any other thing) the background of the widget turns yellow.