WidgetTx Studio

Documentation

Learn how to use WidgetTx Studio to create, browse, and customize EdgeTX widgets.

Getting Started

WidgetTx Studio is a visual designer for creating EdgeTX radio widgets without writing code. You can browse existing widgets, customize them, or create your own from scratch.

Quick Start

  1. Browse the Widget Gallery
  2. Find a widget you like and click to view details
  3. Download directly or Fork to customize
  4. Install on your EdgeTX radio

User Guide

WidgetTx Studio provides a complete workflow for widget creation and sharing:

🎨 Create

Design widgets visually with drag-and-drop components

📤 Publish

Share your widgets with the community

🔍 Browse

Explore widgets created by others

🔀 Fork

Customize existing widgets to fit your needs

Browse Widgets

The Widget Gallery shows all public widgets. You can:

  • Search - Use the search bar to find widgets by name
  • Sort - Order by newest, most popular, or most forked
  • Filter - Browse widgets by category or creator
  • Preview - See widget thumbnails before clicking

Click any widget card to view its full details, download, or fork it.

Widget Details

Each widget has a dedicated page showing:

  • Preview - Full-size widget preview
  • Description - What the widget does and how to use it
  • Creator - Who made the widget
  • Statistics - Download count and fork count
  • Related Widgets - Similar widgets you might like
  • README - Detailed documentation (if provided)

Download Widget

To download a widget for your EdgeTX radio:

  1. Navigate to the widget detail page
  2. Click the Download button
  3. A ZIP file will be downloaded containing:
    • main.lua - The widget code
    • img/ - Any images used by the widget
    • icons/ - Dynamic icons (if any)
  4. Extract the ZIP to your SD card's /WIDGETS/ folder

Fork Widget

Forking creates a copy of a widget that you can customize:

  1. Sign in to your account
  2. Navigate to any public widget
  3. Click the Fork button
  4. A copy is created in your dashboard
  5. Open the forked widget in the Designer to customize
  6. Save and export when done

Note: Forked widgets are linked to the original. The original creator can see how many times their widget has been forked.

Create Widget

To create a new widget from scratch:

  1. Sign in to your account
  2. Go to your Dashboard
  3. Click New Widget
  4. Use the Designer to add components
  5. Bind telemetry data to labels, gauges, etc.
  6. Save your widget (private by default)
  7. Make it public to share with the community

Designer Tool

The Designer is a visual canvas for building widgets:

Canvas

480×272 pixel canvas matching EdgeTX color LCD resolution. Zoom in/out for precise alignment.

Component Panel

Drag components from the left sidebar: Labels, Rectangles, Images, Arcs, Buttons, Icons, etc.

Properties Panel

Configure selected component: position, size, colors, text, telemetry bindings.

Page Management

Create multi-page widgets with tab bars or navigation buttons.

Basic Components

Fundamental building blocks for widget design:

Label

Display text with custom font size and color. Can be bound to telemetry for dynamic values.

lcd.drawText(x, y, "Hello", MIDSIZE + lcd.RGB(255, 255, 255))

Rectangle

Filled rectangle for backgrounds and panels. Supports corner radius, stroke, and custom colors.

lcd.drawFilledRectangle(x, y, w, h, color)

Image

Display PNG/BMP images. Supports contain, cover, and stretch fit modes with opacity control.

lcd.drawBitmap(Bitmap.open(path), x, y)

Polygon

Custom polygon shapes with vertex editing. Supports gradients (vertical, horizontal, diagonal), color thresholds, and visibility binding.

lcd.drawFilledTriangle(x1, y1, x2, y2, x3, y3, color)

Arc

Circular arc for progress indicators. Configure start/end angles, line width, and track color.

lcd.drawAnnulus(cx, cy, innerR, outerR, start, end, color)

Display Components

Specialized displays for telemetry visualization:

7-Segment Display

Digital numeric display like an LCD clock. Configurable options:

  • • Digit count: 1-6 digits
  • • Decimal places: 0-3 decimal points
  • • Segment styling: Thickness, spacing, slant angle
  • • Leading zeros: Show "007" vs " 7"
  • • Telemetry binding: Display live sensor values

Gauge

Speedometer-style arc display with needle. Three visual styles:

  • • Classic: Full gauge with outer ring, ticks, labels, and needle
  • • Minimal: Clean arc with just track and fill
  • • Segmented: Discrete segments instead of continuous arc

Configure: arc geometry, value range, tick intervals, needle style, center labels.

Slider

Visual progress bar bound to telemetry values. Horizontal or vertical orientation with optional knob.

Icon (Dynamic)

Image that changes based on telemetry thresholds. Configure multiple states with different images for value ranges (e.g., battery icons that change with charge level).

Static Icon

Fixed icon from the built-in icon gallery. Add optional background with padding, border radius, and shadow for button-like appearance.

Specialized Components

Advanced components for specific use cases:

Artificial Horizon

Flight attitude indicator automatically bound to Pitch and Roll telemetry. Features:

  • • Center reticle: Configurable size
  • • Horizon line: Dashed line showing aircraft attitude
  • • Pitch scale: Optional markers with configurable spacing
  • • Navigation arrows: Optional < > indicators

Button

Interactive button with tap actions. Navigate to specific pages or trigger actions. Full styling control: background, text, border, radius.

Telemetry Bindings

Bind component properties to live telemetry data from your aircraft and radio:

How Bindings Work

Select any component and open the Telemetry panel. Choose a source to bind properties like:

  • • Label text: Show live values (RSSI, altitude, battery voltage)
  • • Arc/Gauge fill: Visualize percentages or ranges
  • • Icon state: Change image based on value thresholds
  • • Visibility: Show/hide components when conditions are met
  • • Color: Dynamic colors based on value ranges
-- Standard sensor
local rssi = getValue("RSSI")

-- Timer
local t = model.getTimer(0)
local timer = string.format("%02d:%02d", math.floor(t.value / 60), t.value % 60)

-- Clock
local dt = getDateTime()
local clock = string.format("%02d:%02d", dt.hour, dt.min)

Telemetry Categories

WidgetTx supports 13 telemetry categories with 100+ data sources:

📻 Radio

TX Battery, Clock, Date, Model Name, Session Time

⏱️ Timers

Timer 1, Timer 2, Timer 3 (MM:SS format)

🕹️ Inputs

Aileron, Elevator, Throttle, Rudder stick values

⚖️ Trims

Rudder, Elevator, Throttle, Aileron, T5, T6 trims

🎛️ Controls

Pots (S1, S2), Sliders (LS, RS), 6-Position Switch

🔘 Switches

Switch A through H positions

📤 Channels

Output channels Ch1-Ch16

📊 Global Variables

GV1-GV9 model variables

🔋 Battery

RxBt, VFAS, Current, Capacity, Fuel %

📶 Signal

RSSI, RQly, TQly, SNR, TX Power, RF Mode

✈️ Flight

Altitude, VSpd, Heading, RPM, Pitch, Roll, Yaw, Speed

🛰️ GPS

Coordinates, Satellites, Distance from home

Advanced Features

Widget Grouping

Select multiple widgets and group them for unified movement and resizing. Groups appear in the Layers panel and can be expanded/collapsed.

Group Conditional Logic

Apply telemetry-based rules to entire groups:

  • • Change opacity when RSSI drops below threshold
  • • Show/hide groups based on flight mode
  • • Up to 5 rules per group with operators: >, ≥, <, ≤, =, ≠

Color Thresholds

Define value ranges that change component colors dynamically. Example: battery voltage coloring (green above 3.7V, yellow 3.5-3.7V, red below 3.5V).

Visibility Bindings

Show or hide components based on telemetry conditions. Operators: ≥, ≤, =, ≠. Useful for conditional warnings or mode-specific displays.

Gradient Fills

Apply gradient backgrounds to polygons with three directions: vertical, horizontal, or diagonal. Define start and end colors.

Canvas Features

Smart Alignment Guides

Automatic snap guides appear when moving components near edges or centers of other elements.

Alignment Toolbar

Select multiple components to access alignment options: align left/center/right, top/middle/bottom, and distribute evenly.

Preview Mode

Test your widget with simulated telemetry values and navigation between pages.

Keyboard Shortcuts

  • • Delete/Backspace - Delete selected
  • • Ctrl/Cmd + G - Group selected
  • • Ctrl/Cmd + Z - Undo
  • • Ctrl/Cmd + Shift + Z - Redo
  • • Arrow keys - Nudge position

Zoom Controls

Zoom in/out on the canvas for precise alignment. Use scroll wheel or zoom buttons.

Code Generation

When you export a widget, WidgetTx generates EdgeTX-compatible Lua code:

  1. Canvas State → JSON structure
  2. Widget Definition → Standardized format
  3. TypeScript → Generated with EdgeTX APIs
  4. Lua → Transpiled via TypeScript-to-Lua
  5. ZIP → Packaged with images
-- Generated widget structure
local name = "MyWidget"
local options = {}

local function create(zone, options)
  local wgt = { zone = zone, options = options, components = {} }
  -- Component initialization...
  return wgt
end

local function refresh(wgt, event, touchState)
  lcd.clear(lcd.RGB(26, 26, 26))
  -- Render components...
end

return { name = name, create = create, refresh = refresh, ... }

Installation

  1. Download the widget ZIP file
  2. Connect your EdgeTX radio via USB
  3. Extract ZIP to SD card's /WIDGETS/ folder
  4. On radio: Model Setup → Widgets
  5. Select a zone and choose your widget

Supported Devices

WidgetTx widgets are optimized for color LCD radios running EdgeTX:

  • RadioMaster TX16S / TX16S MKII
  • RadioMaster TX12 MKII
  • FrSky Horus X10S / X12S
  • Jumper T16 / T18
  • Flysky PL18 / EL18
  • Any EdgeTX radio with 480×272 or 320×480 color LCD