Change color based on a condition#

Let’s say that you want to change the color of a Shape based on the status of the battery, so, for example, you want a shape to be yellow when the battery is discharging and green when charging, this can be done in many ways, so let’s start for the simplest example.

Simple color change#

• Open the Advanced Editor and Create a Shape using the “+” on the top right
• Change the Shape aspect according to your needs
• Go in the “Paint” section and select the color preference
• On the top bar the “formula” icon will appear, select it
• Now the preference has been switched to a “Formula” preference so it’s now controlled by an expression rather than a simple value, click the preference to edit the Formula
• Type $if(bi(charging) = 0, #FFFF00, #00FF00)$ and press the “ok” button on top right
• Done! Your shape will be #FFFF00 when battery is discharging and #00FF00 (green) otherwise

Color change with globals#

What if you want to change the color based on the battery status but also keep it easy to change those colors using the picker? Well, in this case you need to introduce the Globals, so:

Crescent Moon Shape#

This recipe explains how to combine formulas and paths to create a dynamic shape in Kustom

Step 1: Create a new Shape Module#

In your Kustom editor, create a new Shape module. You can do this by:

1. Tapping the “+” button
2. Selecting “Shape”

In the shape module, select “Path” as the shape type. This will allow you to define a custom shape using SVG path commands.

Step 2: Define the Path#

Here comes the crucial part. You need to define the path that forms the shape of the crescent moon. Given Kustom’s viewport of 100x100, we can use the following path:

Get a random image on click#

Flows can react to different things including clicks, in this example we will see how to trigger a Flow by clicking an item and making the flow pick a random file from a folder and show the image on the widget

Tutorial#

Get title and image from a JSON API every hour#

Kustom Flows can chain events and store data into files that can be used later in formulas. In this example we will get some data from an external API (the NASA daily picture API) and store the results locally, we will finally use that data to display the image and its title

Tutorial#

Random image from Unsplash on click#

In this simple example #CraftMath downloads a random image JSON from Unsplash using their APIs updating it everything time a click is triggered

Tutorial#

Video#

Steps#

First of all add a Widget (or a wallpaper or any other Kustom item), then:

• Register Unsplash account and request an API key
• Store API key as a “secret” or normal global, name it “key”
• Create a new text global, name it “json”
• Go to Flows, add a new Flow
• Add a “manual trigger” this will trigger the flow manually via touch
• Add an Action of type WebGet and use “https://api.unsplash.com/photos/random?client_id=$gv(key)$" as URL
• Add an action to store to a Global, select “json” as the global, flow will download the JSON file and assign the global to the local JSON file path (unless you switch “store file content not path” which will intead store the file content in the global)
• Finally add an image, switch “Bitmap” to a formula and use $wg(gv(json), json, .urls.raw)$ to use the image url from the json
• You are done

Random wallpaper daily from reddit.com/r/EarthPorn#

Lets say you want to get a nice random image from the wonderful sub reddit at https://reddit.com/r/EarthPorn

Nothing easier:

• Start a blank preset
• Go to the background tab
• Select the bitmap property
• Switch to a formula
• Enter this formula: $tv(reg, wg("https://www.reddit.com/r/EarthPorn/.rss?refresh="+df(D), url, "i.redd.it", 0), "&.*", "")$

Save and done!

You can update this more frequently by changing for example df(D) to df(H) and it will be updated at the hour (if content changed)

Read past values of a global with GH#

A global normally holds one value, the current one. Every time the preset is saved Kustom also keeps the old value in a small history, and $gh()$ is how you read it back. This is what you use to show a trend, a delta, or a small chart of how a value moved over time.

Send a message to Kustom via HTTP POST#

Starting from version 3.70 you can send variables from the Internet directly to Kustom via HTTP POST. This could be useful in many situations like:

Send a Variable from KLWP to KWGT#

You can share data between Kustom apps using the Send Data action in a KLWP flow and the $br() function. This allows you to trigger changes or display dynamic data in, for example, KWGT directly from KLWP.

KLWP Setup#

1. Create a new Flow in KLWP.
2. Add a Trigger (e.g., on touch, time, or event).
3. Add a Send Data action to the flow.
4. In the Send Data action:
   • Set Target to KWGT
   • Set Variable Name to foo
   • (Optional) Set the value as needed, for example Hello KWGT!

KWGT Setup#

1. Add a new Text item in your KWGT widget.

Multiple TZ clocks#

In Kustom every layer can have a different location or timezone, changing this parameter affects all the items inside the layer. If you change the location both weather, location, air quality and time data will change, if you just change the timezone only the clock will be modified. You can change default locations in the app settings

Tutorial#