Skip to content

4.User Interface Layout

ZhuElly edited this page Apr 21, 2026 · 6 revisions

Layout Guide

There are 4 windows

Websocket Setting

Guide

Websocket

Let's adding a server first, You need to open a server in the background first. Adding Server

By the way you could using these 4 hotkey to send the global command to all connected server

Hotkey

Okay, Now we have connected server, let's go ahead to the camera viewer

To Camera Viewer

Camera

Currently i have 3 items in here.

Viewer Demo

Here is the item design

You could see most of the setting on this look.

Camera Item

  • Center = Protune
    • Camera name
    • S: Shutter Speed + EV
    • I: ISO (min, max)
    • White Balance | Sharpness | Color
  • Top left = SD card
    • Used space
  • Top right = Battery
    • C means charging. (In case it's not obvious)
  • Bottom left = Preset (Pick first letter of each word)
    • V: Video
    • PS: Photo Single
    • PB: Photo Burst
    • etc...
  • Bottom right = Setting
    • Mode
    • Resolution | FPS | Lens

When selected, the inspector window will update, and showing the current selected item's information and action controller

To Inspector

Inspector

By the way if you don't have cameras show in here even if you connect camera already, just click these button here to add them.

Camera Action

GoPro have mdns service built-in so you can click "camera scan" automatically catch it.

Most of the inspector page have 2 layer tab system.

2 Layers

Camera setting page

Camera Setting

Clone this wiki locally