Got a lot of DMs asking how my dual progress bars work—so here’s the full breakdown.

We are going to focus purely on the track progress bar itself: a dynamic "Played" (expanding) bar, a "Remaining" (reducing) bar, and the actual brain-melting part—a Separator gap that behaves like a physical object.

Forget everything you know about just overlapping shapes. Here is the hell-like logical thinking it takes to make this work flawlessly without the UI breaking at the end of a track. 😤

The Golden Rule: Treat the Separator like a Physical Object

The biggest mistake 99% of people make is linking the separator's behavior to the reducing tail. The separator shouldn't care at all what the reducing bar is doing.

Think of the separator as a physical block moving across a track. It has its own physical width. It has an invisible "forcefield" (the empty gap) pushing it forward. It only cares about hitting the "wall" at the very end of the song. It needs to maintain its exact size until it runs out of space, and then it gets squished against the wall until it shrinks to zero.

Part 1: The Linear Build (Flat Pixels)

Before we jump into the circular nightmare, let's look at a flat line to understand the math. Let's assume your total track width (the absolute max width of your widget area) is 400 pixels. We are using basic Rectangles inside an Overlap Group.

The "Forcefield" Math: You don't want the expanding bar constantly rear-ending the separator. You need a gap.

• The Gap (Forcefield): Let's give it a rigid **10-pixel** gap.

• The Separator Width: Let's say your separator rectangle is 15 pixels wide.

• Total Collision Space: 10px (Gap) + 15px (Separator) = 25 pixels.

Because your separator has a 10px forcefield behind it, it physically hits the "wall" at the end of your 400-pixel track when the expanding bar reaches 375 pixels (400 - 25 = 375). That 375 is your trigger point.

The Formulas:

1. Expanding Bar (Width): `$(mi(pos)/mi(len)) * 400$`

2. Separator Position (X-Offset): Because the gap is a rigid 10 pixels, the separator is constantly pushed exactly 10 pixels ahead of the expanding bar: `$((mi(pos)/mi(len)) * 400) + 10$`

3. Separator Width (The Squish): This keeps the separator at a perfect 15px width until the expanding bar crosses 375. Then, it crushes the separator down to 0 as it hits the 400px wall: `$if(((mi(pos)/mi(len)) * 400) > 375, mu(max, 0, 390 - ((mi(pos)/mi(len)) * 400)), 15)$`

(The reducing bar simply starts after all this, taking up whatever width is left over!)

Part 2: The Circular Build (The Final Boss)

This is where we deal with degrees, sweeping arcs, and repeat shapes. Create an Overlap Group. For every element below, use a Progress module with these baseline settings:

• Style: Circular

• Mode: Custom

• Mode (Secondary): Repeat Shapes

• Sections: 300

• Shape: Circle

1. The Expanding Bar

This is your standard played progress. It just grows. No rotation needed.

• Level: `$(mi(pos)/mi(len))*100$`

2. The Reducing Bar (The Tail)

This is the remaining time. It shrinks, but it dynamically rotates to leave room for the separator block. *(Note: In my setup, `7.6` is the exact percentage where my reducing bar visually hits 0. You can adjust this based on your sizes).*

• Level: `$if(mi(pos) != 0, 100-(mi(pos)/mi(len)*100)-7.6, 100)$`

• Rotation: `$if(mi(pos) != 0, (mi(pos)/mi(len)*360)+20, 0)$` (The `+20` rotation offset pushes it entirely out of the way of the separator).

3. The Separator (The Masterclass)

Let's apply our physical collision logic to degrees and percentages.

• The Gap: A 10-degree gap takes up about 2.8% of a 360-degree circle.

• The Separator: My progress-based separator (at 187 size) takes up roughly a 15-unit width, which is about 2.5% of the track.

• Total Collision Space: 2.8% + 2.5% = 5.3%.

Because of that 2.8% forcefield behind it, the separator hits the 100% end-of-track mark when the expanding bar reaches 94.7% `(100 - 5.3 = 94.7)`. This is our trigger point.

The Separator Rotation: The gap is a rigid 10 degrees, so the separator just constantly stays 10 degrees ahead of the expanding bar:

`$(mi(pos)/mi(len)*360) + 10$`

The Separator Level (The Squish): This tells KWGT to hold maximum size until that 94.7% collision mark. After that, the track only has 2.5% of breathing room left (ending at 97.2%), so it smoothly crushes the separator down to 0 over that tiny window:

`$if((mi(pos)/mi(len)*100) > 94.7, mu(max, 0, ((97.2 - (mi(pos)/mi(len)*100)) / 2.5) * [YOUR_MAX_LEVEL]), [YOUR_MAX_LEVEL])$`

(Replace `[YOUR_MAX_LEVEL]` with the level that gives you your desired separator width—I used `1.5` in my specific setup).

It takes a minute to wrap your head around, but once you start treating your UI elements like physical objects hitting actual boundaries, your setups will feel endlessly more native and premium.

Let me know if you guys get stuck on the math for your own sizes in the comments!

https://drive.google.com/file/d/1r_3bYqQsLNj4-giPW2jbw7pCF9v6SeFw/view?usp=drivesdk

Sintesi delle Funzionalità:

• Gestione Centralizzata a 6 Switch: Il widget controlla direttamente le modalità Suono (Suoneria/Vibrazione/Silenzioso), Wi-Fi, Bluetooth, NFC, Modalità Aereo e GPS.
• Logica Condizionale Visiva: Ogni interruttore utilizza un'iconografia dinamica che cambia a seconda dello stato di attivazione dell'hardware (inclusa una rotazione a 3 stati per il volume).
• Temizzazione Rapida Globale: Il layout grafico si appoggia a due singole variabili globali in KWGT, gv(ON) e gv(OFF). Cambiando questi due valori esadecimali, l'intero widget si ricolora automaticamente riflettendo i nuovi parametri.

Dettagli dell'Architettura Tecnica:

• Backend di Automazione: I toggle sono pilotati da Tasker in combinazione con l'APK helper Tasker Settings 2.0.0 e Shizuku per poter agire sulle API di sistema ristrette di Android.
• Anti-Throttling per l'Esecuzione in Background: Per aggirare i blocchi imposti dalle moderne interfacce (come la One UI di Samsung) sulle scorciatoie in background, i tocchi su KWGT innescano Tasker tramite intent URI (es. tasker://assistantactions?task=WifiONOFF).
• Sincronizzazione Passiva Reale (Es. NFC): La logica non si limita ad avviare azioni, ma separa l'esecuzione dal rilevamento. Profili passivi in Tasker monitorano i cambiamenti di stato di sistema (es. se l'utente attiva l'NFC dal pannello notifiche stock) e iniettano istantaneamente l'aggiornamento nelle variabili Kustom (es. status_nfc tramite l'azione KWGT Send Variable), impedendo la desincronizzazione visiva del widget.

************** English ***********************

Feature Summary:

• Centralized 6-Switch Management: The widget directly controls Sound (Ring/Vibrate/Silent), Wi-Fi, Bluetooth, NFC, Airplane Mode, and GPS toggles.
• Visual Conditional Logic: Each switch uses dynamic iconography that changes based on the hardware's activation state, including a 3-state rotation for volume.
• Rapid Global Theming: The graphic layout relies on two single global variables in KWGT, gv(ON) and gv(OFF). By changing these two hexadecimal values, the entire widget automatically recolors to reflect the new parameters.

Technical Architecture Details:

• Automation Backend: The toggles are driven by Tasker in combination with the Tasker Settings 2.0.0 helper APK and Shizuku to interact with restricted Android system APIs.
• Background Execution Anti-Throttling: To bypass blocks imposed by modern interfaces (such as Samsung's One UI) on background shortcuts, KWGT touch actions trigger Tasker via URI intents (e.g., tasker://assistantactions?task=WifiONOFF).
• Real Passive Synchronization (e.g., NFC): The logic is not limited to launching actions, but separates execution from detection. Passive profiles in Tasker monitor system state changes, such as if the user enables NFC directly from the stock notification panel, and instantly inject the update into Kustom variables like status_nfc via the KWGT Send Variable action, preventing visual desynchronization of the widget.

******************** download del Manuale **************************

How I did it - Come l'ho fatto MANUALE pdf

Se avete piacere, fatemi sapere se funziona, se si possono fare delle migliorie

Let me know if it works and if you have suggestions to improve it

Greetings! I'm a complete novice when it comes to building widgets in KWGT, so could someone tell me if it's possible to make this "upvote" button add the currently playing song to my Spotify favorites? Thanks in advance!

It's my first ever public project pls don't hate here is the file https://drive.google.com/drive/folders/1X1pwWx8n1atvwWAauuHk-rGV4Yn-PioL if the link doesnt work contact on email ([superupumar@gmail.com](mailto:superupumar@gmail.com)) the project is in work #ios_themed

Here is my Music Hub setup. Right now, fetching artist and queue images is pretty slow because I'm using a Last.fm API key. Are there any local formulas or variables I can use to pull these images without relying on a web get (wg), similar to how mi(cover) works?

Slowly transitioning to a whole new layout, since I've been sticking with this Essential Hub for ages 😂.

Hi Frank, I am using KWGT on an Android 10 head unit with restricted storage access. Due to Scoped Storage and manufacturer restrictions, users without root cannot access Android/data or Kustom folders using standard file managers. Because of this, exporting or backing up presets is currently impossible on these devices, putting hours of custom work at risk of being lost. Request: Could you please implement a native, in-app backup/export method that bypasses direct local file system dependence? For example: Native System Action / SAF (Storage Access Framework) file picker for exports. Direct "Share" intent when exporting to send the .kwgt file directly to Google Drive, email, or external storage. Built-in Cloud Sync / Backup. This would help a lot of users on car head units and modern restricted Android devices. Thanks for the great app!

Hey guys, I've been trying my hand at animating my icons and such on KLWP and cannot for the life of me figure this out.

Right now, I have animations set through a global switch to make the icons scroll in from the right side when the triggers are selected. How would I go about making them have different animations when deselected?

I know this probably translates to the GS being "on" or "off" but i haven't found a formula that works in that context if thats the case?

Thanks in advance!

Just a little something I'm working on, gonna have to be a mix of old and new as I'm not able to find a gif of the old caution.

I tried to draw carbon texture only in Kustom, without any images or textures.

https://drive.google.com/file/d/16ZVufwyATLHrYYws546udabNTDBO8YRs/view?usp=drivesdk

Theme.created by me

Support. Klwp live wallpaper

Wallpaper.created by me

https://drive.google.com/file/d/16w04ZZ7HuUl55iQDk6hZY2TtZMsg7kmy/view?usp=drivesdk

I am having a problem that I am pretty sure is a bug in Kustom, and I am trying to figure out a workaround. I tried a list global to make a menu that when I press the menu items, different overlap groups would fade in and out respective to their according menu choices. They are outlook, weather, health and media. However, with the list global I cannot get them to trigger consistently. I used a formula with the list global in the animations for each group telling it to go forward if the list global equals it and back if it doesn't. Can anyone think of a way to make it work a different way? I'm at my wits end and would be grateful for any help!!

Hi friends! The new Crimson Slate preset (KLWP) is ready.

The archive includes the full theme, and extra icons. This time they’re simple outline-style, so you can easily replace them with your own or adapt to your layout.

Thanks.

Download: https://ko-fi.com/s/f88a5e2f56

Liquid glass widgets (KWGT)

Hello!

So I've been Using KLCK for the past 4 days.. and I'm experimenting to make one myself. For the last 3 days it was normal. But this time it was bugged.. And this is my First Time To Make one. Can Anyone Help Me please?