Skip to content

In‐depth use of JukaGUI

Jump to bottom
AndreiM edited this page Sep 1, 2025 · 1 revision

JukaGUI Generator - Complete Guide

Overview

JukaGUI Generator is a web-based tool for creating retro handheld device GUI configurations.
This tool allows you to design interfaces visually and export them as jukaconfig.json files that can be used with the JukaApp runtime.

Quick Start

1. Download the Runtime

Get the pre-packaged JukaApp runtime from:
https://github.com/jukaLang/JukaGUI/releases

  • Available for Windows x64 and Linux/RetroHandheld Aarch64
  • No additional dependencies needed (SDL2 is already included)

2. Design Your Interface

  1. Open index.html in a web browser
  2. Drag elements from the left sidebar to the canvas
  3. Configure properties in the right sidebar
  4. Set up triggers and variables as needed

3. Export and Run

  1. Click Download to generate jukaconfig.json
  2. Place the file in your JukaApp directory
  3. Run the application:
    • Windows: Double-click jukaapp.exe
    • Linux: Execute ./jukaapp

Using the Web Generator

Interface Overview

The generator has three main sections:

Left Sidebar - UI Elements

  • Button: Interactive elements
  • Label: Text display
  • Image: Picture elements
  • Input: Text input fields
  • Menu: Navigation bar (automatically added to scenes)
  • Dynamic List: Populated from external commands

Center Canvas - Design Area

  • Drag and drop elements from the sidebar
  • Double-click to edit text
  • Right-click and drag to resize
  • Click to select and configure properties

Right Sidebar - Properties Panel

  • Position and size controls
  • Color pickers for text and background
  • Font size selection
  • Opacity adjustment
  • Trigger configuration

Step-by-Step Guide

1. Set Up App Information

  • Click the App Info tab
  • Fill in title, author, and description
  • Select device resolution (or set custom)
  • Upload background image if desired
  • Configure font sizes

2. Design Your Scenes

  • Use Add Scene to create multiple screens
  • Switch between scenes using the dropdown
  • Each scene gets an automatic menu bar

3. Add and Configure Elements

  • Drag elements from the sidebar to the canvas
  • Select elements to configure their properties
  • Use position controls for precise placement
  • Set colors and fonts to match your theme

4. Create Variables

  • Click the + button in the Variables section
  • Name your variables and set initial values
  • Reference variables in text using $variableName

5. Set Up Triggers

Select interactive elements (buttons/inputs) and choose trigger types:

  • Change Scene: Navigate between screens
  • External App: Launch other programs
  • Set Variable: Modify variable values
  • Play Video/Image: Display media
  • Exit: Close the application

6. Test and Export

  • Review your design
  • Click Download to save jukaconfig.json
  • Place the file in your JukaApp directory

Mobile Design Tips

On mobile devices:

  • Use the + button to add elements
  • Tap elements to select and edit properties
  • Use drag handles to reposition elements
  • The properties panel appears at the bottom

Advanced Features

Dynamic Lists

Create lists that populate from external commands:

  1. Add a Dynamic List element
  2. Set the command path to an executable
  3. Specify a variable to store the results
  4. The command should return JSON data

Multi-Scene Applications

  • Use the scene controls to add/manage scenes
  • Set Change Scene triggers on buttons
  • The menu bar automatically updates with scene navigation

Variable System

  • Create variables in the Variables panel
  • Reference them in text with $variableName syntax
  • Modify values with Set Variable triggers

Runtime Controls

Keyboard

  • Arrow keys: Navigate
  • Enter/Space: Select
  • Q/E: Previous/next scene (menu navigation)

Gamepad

  • D-pad: Navigate
  • A/B buttons: Select
  • Shoulder buttons: Previous/next scene

Mouse/Touch

  • Click/tap to select elements
  • Menu buttons for scene navigation

Troubleshooting

Common Issues

Elements not appearing correctly

  • Check font files are in the runtime directory
  • Verify image paths are correct

Videos not playing

  • Ensure FFmpeg/FFplay is available in the system PATH

External apps not launching

  • Verify application paths are correct

Performance issues

  • Reduce image/video resolutions
  • Simplify complex scenes

Resources

Support

Need help? Join our community:

Want to contribute? Visit our GitHub repository to submit improvements and bug fixes.

JukaGUI website: https://generate.jukalang.com

Clone this wiki locally