Seven-segment display

Simulated seven-segment display and BCD.

by Tracy-Gregory Gilmore

HTML

<h1>
Simulated Seven-Segment Display (7SD) and Binary-Coded-Decimal (BCD) module
</h1>
<main>
  <section>
    <label for="decimal">Decimal</label>
    <select id="decimal">
      <option>0</option>
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
      <option>6</option>
      <option>7</option>
      <option>8</option>
      <option>9</option>
    </select> 
  </section>
  <section class="seven-segment">
    <div class="segment" id="seg_a"></div>
    <div class="segment" id="seg_b"></div>
    <div class="segment" id="seg_c"></div>
    <div class="segment" id="seg_d"></div>
    <div class="segment" id="seg_e"></div>
    <div class="segment" id="seg_f"></div>
    <div class="segment" id="seg_g"></div>
  </section>
</main>

CSS

section {
  width: 50%;
  float: left;
}

.seven-segment {
  background-color: #777;
  width: 120px;
  height: 180px;
  position: relative;
}

.segment {
  border: 10px solid #999;
  width: 0;
  height: 46px;
  position: absolute;
  box-sizing: border-box;
}

.segLit {
  border-color: yellow;
}

.segment::before,
.segment::after {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px;
  border-color: transparent;
  position: absolute;
  content: '';
}

#seg_c::before, #seg_f::before, #seg_g::before {
  border-left-width: 0;
  border-right-color: inherit;
  top: -10px;
  left: -20px;
}

#seg_c::after, #seg_f::after, #seg_g::after {
  border-right-width: 0;
  border-left-color: inherit;
  top: -10px;
  right: -20px;
}

#seg_a::before, #seg_b::before, #seg_d::before, #seg_e::before {
  border-top-width: 0;
  border-bottom-color: inherit;
  top: -20px;
  left: -10px;
}

#seg_a::after, #seg_b::after, #seg_d::after, #seg_e::after {
  border-bottom-width: 0;
  border-top-color: inherit;
  bottom: -20px;
  left: -10px;
}

#seg_c, #seg_f, #seg_g {
  width: 56px;
  height: 0;
}

#seg_a, #seg_b {
  right: 10px;
}

#seg_c, #seg_f, #seg_g {
  left: 32px;
}

#seg_d, #seg_e {
  left: 10px;
}

#seg_g {
  top: 80px;
}

#seg_c {
  bottom: 10px;
}

#seg_f {
  top: 10px;
}

#seg_a, #seg_e {
  top: 32px;
}

#seg_b, #seg_d {
  bottom: 32px;
}

JavaScript

const inputLines = [
  '0000', '0001', '0010', '0011', '0100', 
  '0101', '0110', '0111', '1000', '1001' 
];
const outputLines = [
  '1111110', '1100000', '1011011', '1110011', '1100101',
  '0110111', '0111111', '1100010', '1111111', '1110111' 
];
const sevenSegmentDisplayWires = getSevenSegmentDisplayWires();

const decimalSelection = 
// mk1 - attachDecimalChangeEvent(simulatedBCD_Presentation, outputLines);
// mk2 - attachDecimalChangeEvent(simulatedMappedBCD, inputLines)
// mk3 - 
attachDecimalChangeEvent(simulatedLogicalBCD, inputLines)


// mk 1 - direct BCD output wires to simulated 7SD
function simulatedBCD_Presentation(outputWires) {
  sevenSegmentDisplayWires.a(outputWires[0]);
	sevenSegmentDisplayWires.b(outputWires[1]);
	sevenSegmentDisplayWires.c(outputWires[2]);
	sevenSegmentDisplayWires.d(outputWires[3]);
	sevenSegmentDisplayWires.e(outputWires[4]);
	sevenSegmentDisplayWires.f(outputWires[5]);
	sevenSegmentDisplayWires.g(outputWires[6]);
}


// mk 2 - mapping to BCD input lines to output lines
function simulatedMappedBCD(inputWires) {
	const outputWires = outputLines[inputLines.indexOf(inputWires)];
	simulatedBCD_Presentation(outputWires);
}


// mk 3 - simulated BCD logic
function simulatedLogicalBCD(inputWires) {
  const [A,B,C,D] = [...inputWires].map(wire => wire === "1");
  const booleanLogic = [
    A || !B || ((C || !D) && (!C || D)),
    A || B || !C || D,
    A || ((B || C || !D) && (!B || ((C || D) && !(C && D)))),
    !(((A || (B && !(B && C))) && (!A || B || C)) || D),
    A || ((B || ((C || !D) && (!C || D) && !(C && D))) &&
      !(B && C && D)),
    A || C || ((B || !D) && (!B || D)),
    A || ((B || C) && !(B && C && D))
  ];
  const outputWires = booleanLogic.map(flag => `${+flag}`);
  simulatedBCD_Presentation(outputWires);
}


// Utilities
function getSevenSegmentDisplayWires() {
	return [...document.getElementsByClassName('segment')]
  	.reduce((interface, domSeg) => 
    	({
      	...interface,
       ...