Forem: Kamil Trusiak

Side Projects: React Digital Display - The End

Kamil Trusiak — Mon, 11 Aug 2025 12:50:00 +0000

Thank you for following along!

Unfortunately, as I am focusing on other topics, I don’t have time to finish this series. If you enjoyed the idea and would like to contribute to the library development, please leave a message.

That said, I have a few ideas for shorter write-ups coming up, so stay tuned!

Modernizing Your Codebase with Lebab

Kamil Trusiak — Mon, 29 May 2023 11:55:37 +0000

Originally published in 2017

Why walk if you can take a bus? Why rewrite old ES5 code manually if you can use some program to do that for you? But first, let me introduce ECMAScript 6 to you – the best thing that has ever happened to JavaScript. However, as same as all innovations, that standard also has many problems.

One of them is browser support. It’s steadily improving, but it’s not like everyone is keeping software up to date on their computers. Transpilers, like Babel and Traceur, come to the rescue. Thanks to them we can use most of the new functions. On that website, we can check which ones are supported.

The second problem is the opposite of the first one. Existing scripts contain millions of lines of code written in ES5. If, as the authors, you want to start using the newest version of that standard, rewriting everything is pretty time-consuming. Is it possible to correct that? Can we, in a fast and pleasure way, from that code

var $ = require('jquery');

$('.menu-element').each(function() {
    var list = $(this).attr('data-list').split(',');

    for (var i = 0; i < list.length; i++) {
        var item = list[i];
        $(this).append('<div>' + item + '</div>');
    }
});

get such a code?

import $ from 'jquery';

$('.menu-element').each(function() {
    const list = $(this).attr('data-list').split(',');

    list.forEach(item => {
        $(this).append(`<div>${item}</div>`);
    });
});

The answer is yes. And I will show you how to do that.

What we need is Lebab. It works inversely as Babel, and it’s transpiling code fragments written in ES5 to their counterparts in ES6. Lebab is still in a development phase, but just now its capabilities are great. You can find the actual list of its functions on GitHub.

Lebab is available as a package in npm repository, so its installation requires one, simple command:

npm install -g lebab

Then we can start to work. Example Lebab call looks like that:

lebab input-es5.js -o output-es6.js --transform <transform-name>

We put required conversion type instead of <transform-name>. There are many types, e.g. commonjs, which transforms CommonJS modules into ES6 version, including require and module.exports calls.

Unfortunately, that approach has one disadvantage – we can’t use many conversions at the same time. To transform whole code, we need to call Lebab few or even dozen times.

We can also add Lebab to a script and run it in Node.JS. It allows giving transformation table to executing, and it requires just two lines of code.

import lebab from 'lebab';
const { code, warnings } = lebab.transform('var f = function(){};', ['let', 'arrow']);

Code variable contains generated code, and warnings variable contains a table with possible errors.

Is Lebab actually good at transpiling code? I will try to answer that question by presenting few examples.

Let’s start with a simple code, which sums up even elements of Fibonacci code, smaller than 300. Here is a code written in old JavaScript:

var fibonacci = [];
for (var oi = 0, i = 1; i < 300; i) {
    fibonacci.push(i);
    var temp = oi;
    oi = i;
    i = i + temp;
}

console.log(fibonacci);

var sum = 0;
fibonacci.forEach(function(item) {
    var isEven = !(item % 2);
    if (isEven) {
        sum = sum + item;
    }
});

console.log(sum);

Now we run Lebab:

lebab e1.es5.js -o e1.arrow.js --transform arrow

And let’s check the result code:

var fibonacci = [];
for (var oi = 0, i = 1; i < 300; i) {
    fibonacci.push(i);
    var temp = oi;
    oi = i;
    i = i + temp;
}

console.log(fibonacci);

var sum = 0;
fibonacci.forEach(item => {
    var isEven = !(item % 2);
    if (isEven) {
        sum = sum + item;
    }
});

console.log(sum);

As we can see, a function was transpiled into arrow function. Unfortunately, it’s the only thing that has been changed. Let’s add a variable transformation to that. It’s marked as Unsafe, which means that it may not work properly, but in example file, it should work.

lebab e1.arrow.js -o e1.es6.js --transform let

The result code looks like that:

const fibonacci = [];
for (let oi = 0, i = 1; i < 300; i) {
    fibonacci.push(i);
    const temp = oi;
    oi = i;
    i = i + temp;
}

console.log(fibonacci);

let sum = 0;
fibonacci.forEach(item => {
    const isEven = !(item % 2);
    if (isEven) {
        sum = sum + item;
    }
});

console.log(sum);

It looks like that the code has been transpiled in a pretty good way. But a limitation of one transformation per call makes the whole work laborious.

Let’s try the second approach, which I have mentioned before. A source file will be more complicated this time. A code consists of two classes, and one of them inherits after the second one through prototyping:

function Car(brand, model, color) {
    color = color || 'black';

    this.brand = brand;
    this.model = model;
    this.color = color;
}

Car.prototype.drive = function() {
    console.log('Driving...');
};
Car.prototype.getInfo = function() {
    console.log('This is', this.color, this.brand, this.model);
};

function Truck(brand, model, color, capacity) {
    Car.call(this, brand, model, color);

    this.capacity = capacity;
    this.currentLoad = 0;
}

Truck.prototype = Object.create(Car.prototype);
Truck.prototype.constructor = Truck;

Truck.prototype.load = function(volume) {
    console.log('Loading', volume);
    var newLoad = this.currentLoad + volume;
    this.currentLoad = Math.min(this.capacity, newLoad);
};
Truck.prototype.unload = function(volume) {
    console.log('Unloading', volume);
    var newLoad = this.currentLoad - volume;
    this.currentLoad = Math.max(0, newLoad);
};
Truck.prototype.getInfo = function() {
    Car.prototype.getInfo.call(this);

    console.log('Capacity:', this.capacity);
};

var ford = new Car('Ford', 'Focus', 'silver');
ford.getInfo();
ford.drive();

var kamaz = new Truck('Kamaz', '55111', 'white', 13000);
kamaz.getInfo();
kamaz.load(500);
kamaz.drive();

Now we’re preparing a script, which will be responsible for reading our source code, converting it and saving it to a new file.

let lebab = require('lebab');
let fs = require('fs');

let filename = 'e2.es5.js';

fs.readFile(filename, function(err, data) {
    let source = data.toString();
    const { code, warnings } = lebabThis(source);

    if (warnings.length) {
        console.log(warnings);
    }
    fs.writeFile('e2.es6.js', code, () => {
        console.log('Written');
    });
});

function lebabThis(source) {
    return lebab.transform(source, [
        'let',
        'class',
        'default-param',
    ]);
}

After running the script in Node.js, we receive an object code:

class Car {
    constructor(brand, model, color = 'black') {
        this.brand = brand;
        this.model = model;
        this.color = color;
    }

    drive() {
        console.log('Driving...');
    }

    getInfo() {
        console.log('This is', this.color, this.brand, this.model);
    }
}

class Truck extends Car {
    constructor(brand, model, color, capacity) {
        super(brand, model, color);

        this.capacity = capacity;
        this.currentLoad = 0;
    }

    load(volume) {
        console.log('Loading', volume);
        const newLoad = this.currentLoad + volume;
        this.currentLoad = Math.min(this.capacity, newLoad);
    }

    unload(volume) {
        console.log('Unloading', volume);
        const newLoad = this.currentLoad - volume;
        this.currentLoad = Math.max(0, newLoad);
    }

    getInfo() {
        super.getInfo();

        console.log('Capacity:', this.capacity);
    }
}

const ford = new Car('Ford', 'Focus', 'silver');
ford.getInfo();
ford.drive();

const kamaz = new Truck('Kamaz', '55111', 'white', 13000);
kamaz.getInfo();
kamaz.load(500);
kamaz.drive();

Lebab also dealt with that case. If you want more examples of different transformations, take a look at GitHub.

Although Lebab is still in development phase, we can use it to boost migration to the newer code. Of course, it’s not an ideal tool. The creators of ES6 recommend using only one transformation at a given moment and checking if everything went as planned.

In the future, aside from adjustments of a conversion for the sixth edition of ECMAScript, it will also be a support for ES7. Will it be enough for Lebab to become popular? Time will show.

Photo by Blake Connally on Unsplash

How to rehydrate typed data?

Kamil Trusiak — Thu, 26 May 2022 12:02:33 +0000

The problem

I have a simple blog with JSON file used as database. I would like to get all posts and display them in a list.

Below you can see my Post interface:

interface Post {
  authorId: number;
  title: string;
  tags: string[];
  content: string;
  state: 'draft' | 'published';
  createdAt: Date;
  modifiedAt: Date;
  publishedAt: Date | null;
}

And this is database representation in JSON:

{
  "posts": [{
    "authorId": 7,
    "title": "My first post",
    "tags": [],
    "content": "Hello world!",
    "state": "draft",
    "createdAt": "2022-05-20T17:21:34.000Z",
    "modifiedAt": "2022-05-23T18:45:17.000Z",
    "publishedAt": null
  }]
}

When I parse this with JSON.parse, I get type mismatch on createdAt, modifiedAt and publishedAt since they are all strings instead of Date objects.

The question is: how can I fix this mismatch?

The Solution

The first idea that comes to mind is to map over the list and manually convert to proper objects

const parsedData = JSON.parse(jsonData);

const data = {
  posts: parsedData.posts.map((post) => {
    return {
      ...post,
      createdAt: new Date(post.createdAt),
      modifiedAt: new Date(post.modifiedAt),
      publishedAt: post.publishedAt ? new Date(post.publishedAt) : null
    };
  })
};

This solution works, but has one issue: I need to repeat this conversion every time I want to get Post objects. Additionally, after making changes to Post interface, I need to reflect them in all places.

Let's improve this a little.

Creating a function

I am going to extract conversion code to functions for reducing repetition. It will also make maintenance easier.

function parsePost(post) {
  return {
    ...post,
    createdAt: new Date(post.createdAt),
    modifiedAt: new Date(post.modifiedAt),
    publishedAt: post.publishedAt ? new Date(post.publishedAt) : null
  };
}

function parsePosts(list) {
  return list.map(parsePost);
}

I can freely use this function as needed:

const parsedData = JSON.parse(jsonData);
const data = {
  posts: parsePosts(parsedData.posts)
};

Using a library

Although the current solution works, is simple and reusable, I can go one step further.

Some time ago, I found an interesting library, that allows to serialize JS objects and save information about its type. It was a few years old, so I decided to create a modern version of it.

Let me present to you: hydration-next.

At the beginning, I need to add type info to my post. For this, I can use dehydrate function. It returns an object with additional _types field. There is also a stringify function, which is a shortcut for JSON.stringify(dehydrate(data)).

Here you can see how my JSON looks now:

{
  "authorId": "7",
  "title": "My first post",
  "tags": {},
  "content": "Hello world!",
  "state": "draft",
  "createdAt": 1653067294000,
  "modifiedAt": 1653331517000,
  "publishedAt": "",
  "_types": {
    "authorId": "number",
    "title": "string",
    "tags": "array",
    "content": "string",
    "state": "string",
    "createdAt": "Date",
    "modifiedAt": "Date",
    "publishedAt": "null"
  }
}

I can safely store it in file, local storage or elsewhere.

For the other way, I can use hydrate function. Similarly, there is a parse function, which is a shortcut for hydrate(JSON.parse(data)).

Primitive data types (string, boolean, number, null) are supported out-of-the-box, as well as arrays, objects, Date, RegExp and Buffer. You are also able to add custom types and define functions to hydrate and dehydrate them.

Here you can see a previous example, this time with hydration-next:

import { parse } from 'hydration-next';

// ...

const data = parse(jsonData);

The End

I hope you enjoyed this post. If you decide to use my package and find any issues with it, please let me know. I would like to make it as good as possible.

See you next time!

How to get class fields of a given type?

Kamil Trusiak — Thu, 14 Apr 2022 07:18:46 +0000

The Problem

I have a class with several methods that make requests to the API. I would like to be able to display a loading indicator for each of these calls independently. I don't want to add new class field for each loading status indication property, and use one big object instead.

The question is: what type should I use for isLoading in my class definition?

export class LibraryStore {
  authors: Author[] = [];
  books: Book[] = [];

  isLoading: any /* ? */ = {};

  fetchAuthors() {
    this.isLoading.fetchAuthors = true;

    try {
      // ...
    } catch (e) {
      // ...
    } finally {
      this.isLoading.fetchAuthors = false;
    }
  }

  fetchBooks() {
    // ...
  }
}

The Solution

The easiest and most obvious way to make it work is to use Record<string, boolean>. But this type allows any string, not only methods' names.

Let's find out how to restrict this.

Step 1. `KeyOfType`

export type KeyOfType<Type, ValueType> = keyof {
  [Key in keyof Type as Type[Key] extends ValueType ? Key : never]: any;
};

The above code shows a generic type that extracts keys from Type, where Type[Key] is of type ValueType or a derivative thereof.

class SomeObject {
  a = 1;
  b = 'foo';
  c = 'bar';
  d = true;
}

const foobar: KeyOfType<SomeObject, string>; // 'b' | 'c'

And that's it. KeyOfType is an answer to the question in title.

But let's take it a little bit further.

Step 2. `ClassMethods`

This is a simple type, which extracts fields that are functions.

export type ClassMethods<T> = KeyOfType<T, Function>;

Step 3. `IsLoadingRecord`

Take a look at the code below:

export type IsLoadingRecord<Type> = Partial<Record<ClassMethods<Omit<Type, 'isLoading'>>, boolean>>;

This is final type I use for isLoading field.

export class LibraryStore {
  authors: Author[] = [];
  books: Book[] = [];

  isLoading: IsLoadingRecord<LibraryStore> = {};

  fetchAuthors() {
    this.isLoading.fetchAuthors = true;

    try {
      // ...
    } catch (e) {
      // ...
    } finally {
      this.isLoading.fetchAuthors = false;
    }
  }

  fetchBooks() {
    // ...
  }
}

Let me explain how it works.

ClassMethods<Omit<Type, 'isLoading'>>

ClassMethods type returns all methods from Type, except for isLoading. You may ask, why?

If isLoading is not omitted, using it inside Type (like in example above) would end with TypeScript error:

TS2502: 'isLoading' is referenced directly or indirectly in its own type annotation.

Next, I use Record with booleans as values

Record<ClassMethods<Omit<Type, 'isLoading'>>, boolean>

And finally, not all methods will use loading indicator, so I wrap it in Partial

Partial<Record<ClassMethods<Omit<Type, 'isLoading'>>, boolean>>

Now I can use properly typed isLoading field with autocomplete.


Code editor shows proper autocomplete hints

The End

Hope you enjoyed this quick journey. If you have any problem I could help you with, please leave a comment.

See you next time!

Side Projects: React Digital Display - Part 2

Kamil Trusiak — Thu, 07 Apr 2022 14:20:00 +0000

In the first part of this series, we addressed the requirements and delved a bit into theory. After that, we looked at implementing the 7-segment display module component. Hold on tight this time, because we are going to use it and display some text.

First, we need to create a ReactDigitalDisplay component. It will use the props interface that we declared earlier.

export const ReactDigitalDisplay = ({
  text,
  module,
  size,
  height,
  unknownCharacterMode = 'omit',
}: ReactDigitalDisplayProps) => {
  return (
    <div>
      <h1>Welcome to ReactDigitalDisplay!</h1>
    </div>
  );
}

As you may recall, our text is entered as string | string[]. Let's normalize it. We'll use array, which will enable us to easily map the characters.

const textArray = useMemo(
  () => (typeof text === 'string' ? text.split('') : text),
  [text]
);

Now we are going to render characters. Since JSX requires the component names to be capitalized, we will make a small change in the component definition.

export const ReactDigitalDisplay = ({
  // ...
  module: ModuleComponent,
  // ...
}: ReactDigitalDisplayProps) => {

We have a component, and text, so we are able to render it. Our ReactDigitalDisplay will have the following return statement:

return (
  <div className={styles.displayContainer}>
    <div className={styles.content}>
      {textArray.map((char) => (
        <ModuleComponent char={char} />
      ))}
    </div>
  </div>
);

Let's use it. For the first test, we're going to display a simple number - "1994".


Component displaying "1994"

This is pretty impressive, but it has a problem. If we try to use characters that are not supported by the module, the entire component crashes. We need to fix that.

Unsupported character handling

To do this, we're going to use the module's charset property to check for unsupported characters and filter them out.

const textToDisplay = useMemo(() => {
  const mappedArray = textArray
    .map((char) => {
      const isUnknownChar = !ModuleComponent.charset[char];

      if (isUnknownChar) {
        if (unknownCharacterMode === 'empty') {
          return SpecialChar.EMPTY;
        }
        if (unknownCharacterMode === 'omit') {
          return null;
        }
      }
      return char;
    })
    .reduce<string[]>(
      (arr, char) => [...arr, ...(char !== null ? [char] : [])],
      []
    );

  return Array.from(
    { ...mappedArray, length: size },
    (v) => v ?? SpecialChar.EMPTY
  );
}, [ModuleComponent.charset, textArray, size, unknownCharacterMode]);

First, we iterate through the text, and check each character. If it's not included in the charset, we replace it with null or EMPTY, based on unknownCharacterMode. At the end, we are filtering out the nulls from our array and fill the array with EMPTY characters, so that its length is equal to size.

I will now show you how it works. This time, I am going to use "S01E07" as the input. I also set the component size to 6.


Rendered text, with `unknownCharacterMode` set to `empty` on left and `omit` on right

Component size

Next, we will scale our text to the specified height. For this we will use the dimensions of the display module.

const dimensions = useMemo(() => {
  const containerHeight = height ?? ModuleComponent.height;
  const scale = containerHeight / ModuleComponent.height;
  const containerWidth = size * ModuleComponent.width * scale;

  return {
    width: containerWidth,
    height: containerHeight,
    scale,
  };
}, [height, ModuleComponent.width, ModuleComponent.height]);

Basically, we determine the dimensions for container with n modules (where n is our size prop), and then calculate the scale factor for the custom height. Next, we use the CSS transform property to apply the proper scale. Finally, we need to set the width and height of the container.

return (
  <div
    className={styles.displayContainer}
    style={{ width: dimensions.width, height: dimensions.height }}
  >
    <div
      className={styles.content}
      style={{ transform: `scale(${dimensions.scale})` }}
    >
      {textToDisplay.map((char) => (
        <ModuleComponent char={char} />
      ))}
    </div>
  </div>
);

This is the result:


Component original size (top) and scaled (bottom)

We have completed our main component. We will create another display module to show the customizability of display.

Second module

To better highlight our best feature, which is the ability to use different components, we will create a dot matrix module. Please note that is supports some letters in addition to digits.

To begin, we are going to define the DataType of the module. It will be a 2-dimensional array of booleans.

type Module5x7MatrixDataType = boolean[][];

We can now start implementing the module, the process of which is similar to the first one. Let's start with an empty component:

export const Module5x7Matrix: DisplayModule<Module5x7MatrixDataType> = ({
  char,
}) => {
  return (
    <div>
      <h1>Welcome to Module5x7Matrix!</h1>
    </div>
  );
};

Our module will consist of 35 dots. We are going to generate divs and use the CSS grid for positioning. This is how the markup looks like:

return (
  <div className={styles.module}>
    {[...Array(7)].map((row, rowIndex) =>
      [...Array(5)].map((column, columnIndex) => (
        <div
          className={clsx(
            styles.dot,
            Module5x7Matrix.charset?.[char]?.[rowIndex]?.[columnIndex] &&
              styles.active
          )}
        />
      ))
    )}
  </div>
);

Here you can see the full CSS code for this module.

Next, we are going to define the module's charset. As I mentioned earlier, it'll be an array of booleans. For demonstration purposes, I have added the digits and letters A-F, so that we can display hexadecimal codes.

export const Module5x7MatrixCharset: Charset<Module5x7MatrixDataType> = {
  [SpecialChar.EMPTY]: [],
  '0': [
    [false, true, true, true, false],
    [true, false, false, false, true],
    [true, false, false, true, true],
    [true, false, true, false, true],
    [true, true, false, false, true],
    [true, false, false, false, true],
    [false, true, true, true, false],
  ],
  // ...
  F: [
    [true, true, true, true, true],
    [true, false, false, false, false],
    [true, false, false, false, false],
    [true, true, true, true, false],
    [true, false, false, false, false],
    [true, false, false, false, false],
    [true, false, false, false, false],
  ],
};

Finally, we assign the charset and dimensions to the module.

Module5x7Matrix.charset = Module5x7MatrixCharset;
Module5x7Matrix.width = 144;
Module5x7Matrix.height = 196;

Let's take a look at the final result. This time the input reads as "9BB901", which is the hex code of the module's background color:


Text displayed using 5x7 dot matrix module

And here goes the same text with 7-segments module for comparison. Note that this module does not support letters and instead displays empty fields.


Text display using 7-segments module

Wrap up

That's it for today. We have created the main component and another display module. The full code is available here. Stay tuned because in the next part, we will add some customization options to our component.

See you next time!

Photo by Donna Elliot on Unsplash

Side Projects: React Digital Display - Part 1

Kamil Trusiak — Tue, 11 Jan 2022 07:20:00 +0000

Think about this for a moment. You can find a great deal of reasons to make side projects – such as learning, having fun or creating something that will be used and appreciated by others. It requires an ample amount of creativity and hard work.

Even though some may disagree, I think that there is way more pros than cons to this. In this series, we are going to write a little bit of code together and see what can be accomplished.

Our first project is called React Digital Display. As the name suggests, it is a React component, which displays text. Although it looks quite simple, we will add one lovely feature: it will be able to take different components as display modules and use them under the hood. For example, it can be a 7-segment module, or a dot matrix, or anything you can imagine. It does not even have to look like LED.


Our component in two versions: 7-segment module and 5x7 dot matrix

Warming Up Before the Main Course

Firstly, let's prepare the necessary list of requirements. Obviously, I have many more ideas in store, but we will start with the basic ones. As far as I can see it, the user should be able to:

Define the text to display
Choose the display module type
Set the display size (how many modules are in a row)
Set the display height
Choose how to proceed if the module does not support certain characters:
- display an empty space
- omit a character and display the next one

Now we can write the first interface that describes the props of the component. It will look like the following:

interface ReactDigitalDisplayProps {
  text: string | string[];
  module: DisplayModule<unknown>;
  size: number;
  height?: number;
  unknownCharacterMode?: UnknownCharacterMode;
}

If you are looking at this, you probably have some questions. Let me explain.

Why are we using string | string[] for text, if there is only one row?

The answer is simple. Module will display "character", but it doesn't need to be defined by single ASCII character. For example, we will use the special EMPTY character to indicate that there is nothing to display. This is useful for unknownCharacterMode.

What is UnknownCharacterMode?

It is a simple union of two strings, which are our methods for handling unsupported characters.

type UnknownCharacterMode = 'omit' | 'empty';

It could be an enum, but in this case it is not necessary.

What is DisplayModule?

The answer to this question is a little more complicated. I will deal with it later in this text.

How to define a module

The display module is a component whose only job is to display the character. We can write a simple interface for it, and any module created by us or anyone else should implement that interface.

interface DisplayModuleProps {
  char: string;
}

Each module needs a list of supported characters and information about how to display them. We will call this a charset, and that's also the name of our interface that describes it. Let us take a quick look at it:

interface Charset<DataType> {
  [SpecialChar.EMPTY]: DataType;
  [key: string | SpecialChar]: DataType;
}

Different modules have different needs, that's why we need to use a generic here. For example, the 7-segment module will use an array of 7 booleans as its DataType, while the dot matrix will require a 2-dimensional array. The only character required is EMPTY, which describes how the empty state of the display module should be represented. I also added the possibility to define other special characters, but this is the only one at the moment.

What exactly is `DisplayModule`?

Our main component will have two responsibilities:

Taking care of unsupported characters
Scaling of the module for a given height

In order to do this, it needs to know what characters are supported and what the dimensions of the module are. And this information must be provided by the module itself. Here you can see how it is done:

export type DisplayModule<DataType> = React.ElementType<DisplayModuleProps> & {
  charset: Charset<DataType>;
  width: number;
  height: number;
};

Basically, it's a React.ElementType (it allows the use of function and class components) with additional static properties for metadata, required by the ReactDigitalDisplay component.

Now we can move on to the more interesting part - writing the actual components.

First module

Before we write the main component, let us create our first module. We will start with 7-segment display. As the name suggests, it consists of seven segments. In real life, these displays also have a dot, but we will leave that out for now. The segments are named from a to g, as shown below:


Source: Wikipedia

To begin, we will define the DataType of the module. As I said before, it will be an array of 7 boolean values and we can use tuple for it. Tuple is a fixed length array where you can define the type for each element. They could be different, but that is not the case. We can also add labels for each element to help us understand the meaning of these booleans. You can read more about tuples here.

type Module7SegmentsDataType = [
  a: boolean,
  b: boolean,
  c: boolean,
  d: boolean,
  e: boolean,
  f: boolean,
  g: boolean
];

Once we have the data type, now we can start creating a module. It will be a DisplayModule with basic markup.

export const Module7Segments: DisplayModule<Module7SegmentsDataType> = ({
  char,
}) => {
  return (
    <div>
      <h1>Welcome to Module7Segments!</h1>
    </div>
  );
};

Before we implement the whole module, we have to create a single segment component. It can be either horizontal or vertical - and we also need its active state. The last property will be className for positioning.

I will not go into the details of full implementation at the moment. In short, the segment is a single div element. We use its :before and :after pseudo-elements to create two halves. After we apply colour to one of the borders and transparency to two others, each half will look like a trapezoid. We just need to position it correctly to make it look like a proper segment.

You can find the full code at this link.

interface SegmentProps {
  type: 'horizontal' | 'vertical';
  isActive: boolean;
  className: string;
}

export const Segment = ({
  type,
  isActive = false,
  className = '',
}: SegmentProps) => {
  return (
    <div
      className={clsx(
        styles.segment,
        {
          [styles.active]: isActive,
          [styles.horizontal]: type === 'horizontal',
          [styles.vertical]: type === 'vertical',
        },
        className
      )}
    />
  );
};

We have segments and we have an empty module component. Let us put this together. We start with a list of segments with key (the same as for the tuple label) and orientation.

const SEGMENTS: { key: string; type: SegmentProps['type'] }[] = [
  { key: 'a', type: 'horizontal' },
  { key: 'b', type: 'vertical' },
  { key: 'c', type: 'vertical' },
  { key: 'd', type: 'horizontal' },
  { key: 'e', type: 'vertical' },
  { key: 'f', type: 'vertical' },
  { key: 'g', type: 'horizontal' },
];

After defining our segments, we can render them and add positoning via CSS. Now our component looks like this:

return (
  <div className={styles.module}>
    <div className={styles.inner}>
      {SEGMENTS.map((segment, index) => (
        <Segment
          key={segment.key}
          type={segment.type}
          isActive={Module7Segments.charset[char][index]}
          className={styles[`segment-${segment.key}`]}
        />
      ))}
    </div>
  </div>
);

Last but not least, we need to define the character set for our display module. Currently it is only the digits 0-9, but in the future it can be extended to other characters. At the end, we need to append the charset to our module so that it is available to the ReactDigitalDisplay component.

const Module7SegmentsCharset: Charset<Module7SegmentsDataType> = {
  [SpecialChar.EMPTY]: [false, false, false, false, false, false, false],
  '0': [true, true, true, true, true, true, false],
  '1': [false, true, true, false, false, false, false],
  '2': [true, true, false, true, true, false, true],
  '3': [true, true, true, true, false, false, true],
  '4': [false, true, true, false, false, true, true],
  '5': [true, false, true, true, false, true, true],
  '6': [true, false, true, true, true, true, true],
  '7': [true, true, true, false, false, false, false],
  '8': [true, true, true, true, true, true, true],
  '9': [true, true, true, true, false, true, true],
};

Module7Segments.charset = Module7SegmentsCharset;

Once the styling is complete, we can calculate the final dimensions of the module in pixels and assign them to the module as static properties.

Module7Segments.width = 164;
Module7Segments.height = 264;

Below you can see what our module looks like.


Final view of 7-segment module

All in a nutshell

That's all for today. We have planned our work and created the first module for our component. The full code is available in this repository. Next time we will implement the main component and use the newly created module to display text.

See you next time!

Photo by Donna Elliot on Unsplash

Forem: Kamil Trusiak

Side Projects: React Digital Display - The End

Modernizing Your Codebase with Lebab

How to rehydrate typed data?

The problem

The Solution

Creating a function

Using a library

The End

How to get class fields of a given type?

The Problem

The Solution

Step 1. KeyOfType

Step 2. ClassMethods

Step 3. IsLoadingRecord

The End

Side Projects: React Digital Display - Part 2

Unsupported character handling

Component size

Second module

Wrap up

Side Projects: React Digital Display - Part 1

Warming Up Before the Main Course

How to define a module

What exactly is DisplayModule?

First module

All in a nutshell

Step 1. `KeyOfType`

Step 2. `ClassMethods`

Step 3. `IsLoadingRecord`

What exactly is `DisplayModule`?