Photon 2 Controller

Siren and light controller & passthrough application designed for Photon 2: Emergency Systems Platform.

42

Resources

Photon 2 GitHub

Role

UI/UX

Development

Technology

Electron

Figma

Platform

Windows

Year

2024 — ongoing

Background

Photon 2 is an open-source emergency vehicle lighting, siren and systems platform for Garry's Mod released in early 2024. With the addition of new controls and functionality compared to its predecessor this application was concepted as a way to both control inputs and monitor existing platform states.

By utilizing sockets to communicate directly with the addon this allows the application to ignore altered keybinds, register inputs when the main window isn't in focus, and even allow passthrough controls from the hardware it was modeled after.

Photon 2 Controller wirframe

Skeuomorphic UX

From the very beginning I decided to utlize real-world hardware as the basis for input and indicator displays, allowing users to operate the application utilizing familiarity. The final layout was created using a blend of Federal Signal's Pathfinder® and SS2000 Series controller input placements.

Photon 2 Controller vector inputs

Vector Inputs

Special considerations were made when designing and developing skeumorphic inputs to remove any reliance on raster images. Inputs are entirely composed of HTML, CSS, and SVGs with fully customizable text. Each button state only requires 2 defined colors while the rest of the effect is accomplished using blend modes.

Photon 2 Controller front-end design

Final Design

Finalized front-end design. The only raster images used within development were the application's border with 8 splits created to ensure support for window resizing.

Frontend Demo

Video showcasing most of the application front-end in use. This includes the staging (1 through 3), input toggles, siren switching (hilo/wail/yelp/priority), and LRCO toggle controls (left/right/center out). JavaScript/jQuery was used to set and update control overrides and button toggling.

Future development aims to ensure full keyboard accessibility, screen reader compatibility, and additional accessibility styling for input states.