The Web UI

Fancygotchi web UI

---

The theme manager is divided into different key parts.

Menu system (1.)

• The menu system commands are available in the plugin page.
  • Shutdown
  • Reboot
  • Restart in Manu mode
  • Restart in Auto mode

Second screen menu (2.)

• The second screen menu can switch between the two different display.

Pwnagotchi live view (3.)

• The central part is the pwnagotchi live view that is offering an easy way to see the UI changes.
• The second part is second screen view. If the theme.options.second_screen_webui is enabled, and the second screen is active, the second screen will be prompted on the web UI.

Submenu (4.)

Fancygotchi web user interface is divided into different pages accessible with the submenu.

• Theme Manager: Navigate to the Theme Manager page to select your Pwnagotchi's appearance.

• Configuration: This section is actually a work in progress. The Configuration page will give you a way to adjust settings and preferences for your Fancygotchi theme.

• Theme Editor: This section is not actually available. but this will be a visual Theme Editor page to create or modify themes for your Pwnagotchi.

Theme manager

---

• The first section is the Theme manager section.

Theme selector (5.)

• Theme: Choose from available themes. The default and active themes cannot be deleted.
• Adjust the rotation settings for selected themes.
  • Horizontal Mode: 0 or 180 degrees
  • Vertical Mode: 90 or 270 degrees
• Select theme: The button will apply the selected theme.
• Copy theme: The button will copy the selected theme folder.
• Rename theme: the button will open a pop-up to ask for the new name for the selected theme.
• Delete theme: the button will delete the selected theme.
• Theme export: the selected theme folder can be exported into a zip format, this file can be used with the uploader.

Theme description (6.)

• Interactive description that updates based on the selected theme.

Theme uploader (7.)

• Upload Theme Zip File: Upload a new theme in ZIP format for installation.

zip file
└── theme folder name (e.g.: cyber)
    ├── config folder
    │   ├── [config-h.toml] or [config.toml]
    │   ├── [config-v.toml]
    │   └── resolutions folder (e.g.: 320x240)
    │       ├── [config-h.toml]
    │       └── [config-v.toml]
    ├── img folder
    │   ├── bg folder 
    │   │   ├── [background images files]
    │   │   ├── [animated background gif images files]
    │   │   └── [foreground images files]
    │   ├── boot folder
    │   │   └── [boot animation images file]
    │   ├── face folder 
    │   │   └── [face images files]
    │   ├── friend_face folder 
    │   │   └── [friend face images files]
    │   ├── menu folder 
    │   │   └── [menu images files]
    │   ├── widgets folder 
    │   │   └── widget folder (e.g.: bluetooth)   
    │   │       └── [widget images files]
    │   └── icons folder
    │       └── [favicon.png]
    ├── fonts folder
    │   └── [fonts files]
    ├── script folder
    │   └── [scripts files .py or .sh]
    ├── [style.css]
    └── [info.json]

Create New Theme (8.)

• The theme creator will create a basic default theme will all the active widget. You can choose two options for the config system:
  • The Resolution system: This will save the config file inside a resolution folder e.g: /themes/theme_name/config/230x240/config.toml.
  • The Orientation system: This will create two configuration file for both orientation, vertical and horizontal (config-h.toml or config-v.toml).
  • If no option is selected, the configuration file will be at the configuration folder root /themes/theme_name/config/.

FancyServer (9.)

• This option will enable the menu system and the additional terminal commands.

Theme configuration

---

Configuration path (10.)

• This is the active configuration path for the configuration file.

Theme options configuration (11.)

• This section contain all the general theme options. They can't be deleted.

Widget options (12.)

• This section contain all the widget options. They have a delete button to remove them.

Add widget option button (13.)

• This button is used to add a new widget option field. The key is the reference for the theme dictionary and there is another entry to add the related value (14.).

CSS path (15.)

• This is the theme CSS used by the web UI.

CSS editor (16.)

• This is the editor to edit the theme CSS used by the web UI.

Info path (17.)

• This file is used by Fancygotchi web UI theme manager to prompt info about the selected theme.

Info editor (18.)

• This is the editor to edit the info.json file used by Fancygotchi web UI theme manager to prompt info about the selected theme.

Reset pwnagotchi core CSS (19.)

• This button will reset the original system css file. Sometimes, some bad system communication can lead to a css corruption.

Save button (20.)

• This button will save the theme configuration (config.toml, config-h.toml or config-v.toml), the style.css and the info.json.

Theme editor (N/A)

---

coming soon