Segmented Display Editor

A web application to make it easier to design segmented displays

Vercel

Introduction

This is a companion tool made for a project that will be published a bit later. It's goal was to design 4 segment display using ML. Early in the development I ran into a problem of trying out the design in action or modifying it, thus this tool was made to make my life easier.

[!NOTE] Contributions to this repository are welcome, you are free to improve the tool or add new segmented display presets. More about how to contribute on the development guide page.

How to use

User interface

Designing truth table

On the main page you will see presets dropdown. This is a good place to start - each preset loads JSON file with app settings. This presets file includes number of segments, segment dimensions in pixels as well as truth table: any character to number array mapping. Character can be any Unicode string and array of numbers should always be same length as the number of segments. 1 on index n means segment n is activated for that character and 0 means it is deactivated.

{
    "numSegments": 4,
    "segmentWidth": 7,
    "segmentHeight": 10,
    "truthTable": {
        "0": [1, 1, 1, 0],
        "1": [0, 1, 0, 0],
        "2": [0, 0, 1, 0],
        "3": [1, 0, 1, 0],
        "4": [0, 0, 0, 1],
        "5": [0, 0, 1, 1],
        "6": [0, 1, 1, 1],
        "7": [1, 0, 0, 0],
        "8": [1, 1, 1, 1],
        "9": [1, 0, 1, 1]
    },
    "baseUrl": "<this project's website>",
    "source": {
        "author": "<author name>",
        "url": "<source url>"
    }
}

[!TIP] You are free to modify the settings JSON right on the website, but for more flexibility I recommend using VSCode or Vim/Emacs - way easier to edit arrays of numbers there.

Designing segments

When you are done with number of segments, their dimensions and the character truth table you can start designing segments themselves.

On the top of the page you can see 0...n segments being displayed. You can draw on each segment with left mouse button (tap on phone) and you can clear pixels using right mouse button (hold on phone). Changes will automatically appear on the map output for all the characters you added to the truth table.

Settings JSON is getting validated:

it checks that all number arrays are of same length as numSegments parameter
it checks that there are no similar rows - meaning no two characters have same truth table

Colors get assigned automatically by evenly rotating hue in HSV color space and are purely visual.

Check table This is a simple helper function. It is possible that your truth table contains segments that activate in identical patterns, meaning when one is activated, other one is activated too, same for deactivation. You can safely join those segments into single one and decrement segment count.

Exporting

You can export settings via "Export settings" button, that will download JSON file with all the data including your segments encoded as base64 strings. If you'd like to import your saved settings back you can just paste in JSON file contents into app settings text area.

As for segments and map as image files, just right click on them and click "Save as.."

Generating a font

If you click "Export Yal Settings" button it will download yal-settings.json and character-map.png files. They are meant to be imported on the Yal pixel font website.

[!WARNING] I have no relation to the Yal website - if API changes or the site goes down, you will loose font generation feature.

After clicking the button you will be redirected to the Yal website. Click "Menu" button and then "Import settings" and choose downloaded yal-settings.json file. Next click "Pick image" button and choose character-map.png file. Now you can edit some metadata and generate the font in TTF or OTF formats.

Misc

Favicon gets updated dynamically to display all your segments overlaid in additive blend mode.

Examples

You will see terms disconnected and overlap in the brackets next to segmented display names. Disconnected means that at least one of the segments has a disconnected piece (by Chebyshev distance of more than 1). Overlap means that segments overlap and may be impossible to wire in real life without physically adding another segment where two segments overlap.

4 segment display A (disconnected)

4 segment display B (disconnected, overlap)

4 segment display C
Author: Mogi Mogi

4 segment display D
Author: Mogi Mogi

5 segment display A
Author: Posy

6 segment display A

6 segment display B
Author: Yenji Jem

6 segment display C
Author: Serjão

7 segment display A

8 segment display A

8 segment display B

8 segment display C (disconnected)

9 segment display A

10 segment display A (overlap)
If you have more segments than you have characters you may as well just assign each character it's own segment without any compromises.

11 segment display A

12 segment display A

13 segment display A (disconnected)

15 segment display A

18 segment display A
Author: Posy

Setup with Node.js

# Install Node.js (v20+ recommended)
sudo apt update
sudo apt install -y curl
curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
sudo apt install -y nodejs
# https://nodejs.org/en/download/ on Windows

# Install Yarn globally via npm
npm install --global yarn

# Clone the repository and navigate into it
git clone https://github.com/ebolblga/segmented-display-editor.git
cd segmented-display-editor

# Install all dependencies
yarn

# Start the project in development mode
yarn dev

# Format with Prettier
yarn format

# Lint with ESlint
yarn lint

Contributors

License

This program is licensed under the MIT License. Please read the License file to know about the usage terms and conditions.