How to resolve the algorithm Cistercian numerals step by step in the JavaScript programming language

Problem Statement
Step by Step Solution
Sourcecode

Problem Statement

Cistercian numerals were used across Europe by Cistercian monks during the Late Medieval Period as an alternative to Roman numerals. They were used to represent base 10 integers from 0 to 9999. All Cistercian numerals begin with a vertical line segment, which by itself represents the number 0. Then, glyphs representing the digits 1 through 9 are optionally added to the four quadrants surrounding the vertical line segment. These glyphs are drawn with vertical and horizontal symmetry about the initial line segment. Each quadrant corresponds to a digit place in the number: Please consult the following image for examples of Cistercian numerals showing each glyph: [1] Due to the inability to upload images to Rosetta Code as of this task's creation, showing output here on this page is not required. However, it is welcomed — especially for text output.

Let's start with the solution:

Step by Step solution about How to resolve the algorithm Cistercian numerals step by step in the JavaScript programming language

Overview

This JavaScript code displays a seven-segment LED/LCD display that represents the value of a given number. It allows users to enter a four-digit number and shows its representation on the canvas.

HTML Structure

The code starts by writing HTML markup to the document:

A paragraph with an input field (<input id="num" type="number" min="0" max="9999" value="0">) for the user to enter a number.
Another paragraph with a canvas element (<canvas id="cist" width="200" height="300">) to display the seven-segment display.
An additional paragraph (for example purposes only) with buttons to set different numbers (can be removed).

Initial Setup

The canvas variable references the canvas element from the DOM.
The cx variable is the canvas's context object for drawing.

`showCist()` Function

This function is responsible for drawing the seven-segment display:

Clears the canvas.
Sets the stroke width to SW (defined as 10).
Draws a vertical line segment from (100, 0) to (100, 300) as the central separator.
Converts the input number num to a string and pads it with leading zeros if needed to ensure it's a four-digit number.

Seven-Segment Display Points

The code defines 12 points (a, b, ..., l) that represent the vertices of each segment in the display:

 a --- b --- c
 |     |     |
 d --- e --- f
 |     |     |
 g --- h --- i
 |     |     |
 j --- k --- l

Drawing Functions

The code uses draw() helper function to draw line segments between a series of points:

function draw() {
 let x = 1;
 cx.beginPath();
 cx.moveTo(arguments[0][0], arguments[0][1]);
 while (x < arguments.length) {
   cx.lineTo(arguments[x][0], arguments[x][1]);
   x++;
 }
 cx.stroke();
}

Number Representation

For each digit (1000s, 100s, 10s, 1s), the code uses switch statements to draw the appropriate segments based on the corresponding digit in the input number num.

For example, for 1000s, if the digit is:

1: Draws line segments j and k (representing the bottom horizontal segment).
2: Draws line segments g and h (representing the vertical right segment).
... and so on for other digits.

Similar logic is applied for 100s, 10s, and 1s digits.

User Interaction

When the user changes the value of the input number field, the showCist() function is called to update the display.
The example buttons can be used to set different numbers for demonstration purposes (can be removed for normal use).

Source code in the javascript programming language

// html
document.write(`
  <p><input id="num" type="number" min="0" max="9999" value="0" onchange="showCist()"></p>
  <p><canvas id="cist" width="200" height="300"></canvas></p>
  <p> <!-- EXAMPLES (can be deleted for normal use) -->
    <button onclick="set(0)">0</button>
    <button onclick="set(1)">1</button>
    <button onclick="set(20)">20</button>
    <button onclick="set(300)">300</button>
    <button onclick="set(4000)">4000</button>
    <button onclick="set(5555)">5555</button>
    <button onclick="set(6789)">6789</button>
    <button onclick="set(Math.floor(Math.random()*1e4))">Random</button>
  </p>
`);

// to show given examples
// can be deleted for normal use
function set(num) {
  document.getElementById('num').value = num;
  showCist();
}

const SW = 10; // stroke width
let canvas = document.getElementById('cist'),
    cx = canvas.getContext('2d');

function showCist() {
  // reset canvas
  cx.clearRect(0, 0, canvas.width, canvas.height);
  cx.lineWidth = SW;
  cx.beginPath();
  cx.moveTo(100, 0+.5*SW);
  cx.lineTo(100, 300-.5*SW);
  cx.stroke();

  let num = document.getElementById('num').value;
  while (num.length < 4) num = '0' + num;  // fills leading zeros to $num

  /***********************\
  |        POINTS:        |
  | ********************* |
  |                       |
  |     a --- b --- c     |
  |     |     |     |     |
  |     d --- e --- f     |
  |     |     |     |     |
  |     g --- h --- i     |
  |     |     |     |     |
  |     j --- k --- l     |
  |                       |
  \***********************/
  let
  a = [0+SW,   0+SW],   b = [100,   0+SW],   c = [200-SW,   0+SW],
  d = [0+SW,    100],   e = [100,    100],   f = [200-SW,    100],
  g = [0+SW,    200],   h = [100,    200],   i = [200-SW,    200],
  j = [0+SW, 300-SW],   k = [100, 300-SW],   l = [200-SW, 300-SW];

  function draw() {
    let x = 1;
    cx.beginPath();
    cx.moveTo(arguments[0][0], arguments[0][1]);
    while (x < arguments.length) {
      cx.lineTo(arguments[x][0], arguments[x][1]);
      x++;
    }
    cx.stroke();
  }

  // 1000s
  switch (num[0]) {
    case '1': draw(j, k);       break;       case '2': draw(g, h);    break;
    case '3': draw(g, k);       break;       case '4': draw(j, h);    break;
    case '5': draw(k, j, h);    break;       case '6': draw(g, j);    break;
    case '7': draw(g, j, k);    break;       case '8': draw(j, g, h); break;
    case '9': draw(h, g, j, k); break;
  }
  // 100s
  switch (num[1]) {
    case '1': draw(k, l);       break;       case '2': draw(h, i);    break;
    case '3': draw(k, i);       break;       case '4': draw(h, l);    break;
    case '5': draw(h, l, k);    break;       case '6': draw(i, l);    break;
    case '7': draw(k, l, i);    break;       case '8': draw(h, i, l); break;
    case '9': draw(h, i, l, k); break;
  }
  // 10s
  switch (num[2]) {
    case '1': draw(a, b);       break;       case '2': draw(d, e);    break;
    case '3': draw(d, b);       break;       case '4': draw(a, e);    break;
    case '5': draw(b, a, e);    break;       case '6': draw(a, d);    break;
    case '7': draw(d, a, b);    break;       case '8': draw(a, d, e); break;
    case '9': draw(b, a, d, e); break;
  }
  // 1s
  switch (num[3]) {
    case '1': draw(b, c);       break;       case '2': draw(e, f);    break;
    case '3': draw(b, f);       break;       case '4': draw(e, c);    break;
    case '5': draw(b, c, e);    break;       case '6': draw(c, f);    break;
    case '7': draw(b, c, f);    break;       case '8': draw(e, f, c); break;
    case '9': draw(b, c, f, e); break;
  }
}

You may also check:How to resolve the algorithm N-queens problem step by step in the UNIX Shell programming language
You may also check:How to resolve the algorithm Visualize a tree step by step in the ALGOL 68 programming language
You may also check:How to resolve the algorithm Arrays step by step in the SmallBASIC programming language
You may also check:How to resolve the algorithm Bitmap/PPM conversion through a pipe step by step in the Standard ML programming language
You may also check:How to resolve the algorithm Find the last Sunday of each month step by step in the J programming language