Skip to content

Instantly share code, notes, and snippets.

@Visible-Radio

Visible-Radio/14-segment-display-print-out-text.markdown

Created September 28, 2020 20:01
Show Gist options
  • Save Visible-Radio/7949e9478c3720a7bea908b8f710f207 to your computer and use it in GitHub Desktop.
Save Visible-Radio/7949e9478c3720a7bea908b8f710f207 to your computer and use it in GitHub Desktop.
Download ZIP
14 segment display print out text
Raw
14-segment-display-print-out-text.markdown
Raw
index.html
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="retromultiple.css">
<link rel="stylesheet" media="screen" href="https://fontlibrary.org/face/dseg14" type="text/css" />
</head>
<body>
<div>
<table class="display_container">
<tr class="display_container">
<td class="display_container">
<table class="display module">
<tr>
<td>
<div class="ground">
<span>~</span>
<div id="0" class="off">
<div class="layer layer-1">
R
</div>
<div class="layer layer-2">
R
</div>
<div class="layer layer-3">
R
</div>
<div class="layer layer-4">
R
</div>
</div>
</div>
</td>
</tr>
</table>
<table class="display module">
<tr>
<td>
<div class="ground">
<span>~</span>
<div id="1" class="off">
<div class="layer layer-1">
R
</div>
<div class="layer layer-2">
R
</div>
<div class="layer layer-3">
R
</div>
<div class="layer layer-4">
R
</div>
</div>
</div>
</td>
</tr>
</table>
<table class="display module">
<tr>
<td>
<div class="ground">
<span>~</span>
<div id="2" class="off">
<div class="layer layer-1">
R
</div>
<div class="layer layer-2">
R
</div>
<div class="layer layer-3">
R
</div>
<div class="layer layer-4">
R
</div>
</div>
</div>
</td>
</tr>
</table>
<table class="display module">
<tr>
<td>
<div class="ground">
<span>~</span>
<div id="3" class="off">
<div class="layer layer-1">
R
</div>
<div class="layer layer-2">
R
</div>
<div class="layer layer-3">
R
</div>
<div class="layer layer-4">
R
</div>
</div>
</div>
</td>
</tr>
</table>
<table class="display module">
<tr>
<td>
<div class="ground">
<span>~</span>
<div id="4" class="off">
<div class="layer layer-1">
R
</div>
<div class="layer layer-2">
R
</div>
<div class="layer layer-3">
R
</div>
<div class="layer layer-4">
R
</div>
</div>
</div>
</td>
</tr>
</table>
<table class="display module">
<tr>
<td>
<div class="ground">
<span>~</span>
<div id="5" class="off">
<div class="layer layer-1">
<span>R</span>
</div>
<div class="layer layer-2">
R
</div>
<div class="layer layer-3">
R
</div>
<div class="layer layer-4">
R
</div>
</div>
</div>
</td>
</tr>
</table>
<table class="display module">
<tr>
<td>
<div class="ground">
<span>~</span>
<div id="6" class="off">
<div class="layer layer-1">
R
</div>
<div class="layer layer-2">
R
</div>
<div class="layer layer-3">
R
</div>
<div class="layer layer-4">
R
</div>
</div>
</div>
</td>
</tr>
</table>
<table class="display module">
<tr>
<td>
<div class="ground">
<span>~</span>
<div id="7" class="off">
<div class="layer layer-1">
R
</div>
<div class="layer layer-2">
R
</div>
<div class="layer layer-3">
R
</div>
<div class="layer layer-4">
R
</div>
</div>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
<div class="input_section">
<form>
<table style="margin-left: 1vw;"><tr><td>
<input class="input_section" type="text" id="input_text">
<button class="input_section" type="button" onclick="clear_tron(); write_to_tron(document.querySelector('#input_text').value);"> INPUT</button>
</table></td></tr>
</form>
</div>
<table class="display_container">
<tr class="display_container">
<td class="display_container">
<table class="display module">
<tr>
<td>
<div class="ground">
<span>~</span>
<div id="8" class="on">
<div class="layer layer-1">
R
</div>
<div class="layer layer-2">
R
</div>
<div class="layer layer-3">
R
</div>
<div class="layer layer-4">
R
</div>
</div>
</div>
</td>
</tr>
</table>
<table class="display module">
<tr>
<td>
<div class="ground">
<span>~</span>
<div id="9" class="on">
<div class="layer layer-1">
R
</div>
<div class="layer layer-2">
R
</div>
<div class="layer layer-3">
R
</div>
<div class="layer layer-4">
R
</div>
</div>
</div>
</td>
</tr>
</table>
<table class="display module">
<tr>
<td>
<div class="ground">
<span>~</span>
<div id="10" class="on">
<div class="layer layer-1">
R
</div>
<div class="layer layer-2">
R
</div>
<div class="layer layer-3">
R
</div>
<div class="layer layer-4">
R
</div>
</div>
</div>
</td>
</tr>
</table>
<table class="display module">
<tr>
<td>
<div class="ground">
<span>~</span>
<div id="11" class="on">
<div class="layer layer-1">
R
</div>
<div class="layer layer-2">
R
</div>
<div class="layer layer-3">
R
</div>
<div class="layer layer-4">
R
</div>
</div>
</div>
</td>
</tr>
</table>
<table class="display module">
<tr>
<td>
<div class="ground">
<span>~</span>
<div id="12" class="on">
<div class="layer layer-1">
R
</div>
<div class="layer layer-2">
R
</div>
<div class="layer layer-3">
R
</div>
<div class="layer layer-4">
R
</div>
</div>
</div>
</td>
</tr>
</table>
<table class="display module">
<tr>
<td>
<div class="ground">
<span>~</span>
<div id="13" class="on">
<div class="layer layer-1">
R
</div>
<div class="layer layer-2">
R
</div>
<div class="layer layer-3">
R
</div>
<div class="layer layer-4">
R
</div>
</div>
</div>
</td>
</tr>
</table>
<table class="display module">
<tr>
<td>
<div class="ground">
<span>~</span>
<div id="14" class="on">
<div class="layer layer-1">
R
</div>
<div class="layer layer-2">
R
</div>
<div class="layer layer-3">
R
</div>
<div class="layer layer-4">
R
</div>
</div>
</div>
</td>
</tr>
</table>
<table class="display module">
<tr>
<td>
<div class="ground">
<span>~</span>
<div id="15" class="on">
<div class="layer layer-1">
R
</div>
<div class="layer layer-2">
R
</div>
<div class="layer layer-3">
R
</div>
<div class="layer layer-4">
R
</div>
</div>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
<br>
<table class="display_container">
<tr class="display_container">
<td class="display_container">
<table class="display module">
<tr>
<td>
<div class="ground">
<span>~</span>
<div id="16" class="on">
<div class="layer layer-1">
R
</div>
<div class="layer layer-2">
R
</div>
<div class="layer layer-3">
R
</div>
<div class="layer layer-4">
R
</div>
</div>
</div>
</td>
</tr>
</table>
<table class="display module">
<tr>
<td>
<div class="ground">
<span>~</span>
<div id="17" class="on">
<div class="layer layer-1">
R
</div>
<div class="layer layer-2">
R
</div>
<div class="layer layer-3">
R
</div>
<div class="layer layer-4">
R
</div>
</div>
</div>
</td>
</tr>
</table>
<table class="display module">
<tr>
<td>
<div class="ground">
<span>~</span>
<div id="18" class="on">
<div class="layer layer-1">
R
</div>
<div class="layer layer-2">
R
</div>
<div class="layer layer-3">
R
</div>
<div class="layer layer-4">
R
</div>
</div>
</div>
</td>
</tr>
</table>
<table class="display module">
<tr>
<td>
<div class="ground">
<span>~</span>
<div id="19" class="on">
<div class="layer layer-1">
R
</div>
<div class="layer layer-2">
R
</div>
<div class="layer layer-3">
R
</div>
<div class="layer layer-4">
R
</div>
</div>
</div>
</td>
</tr>
</table>
<table class="display module">
<tr>
<td>
<div class="ground">
<span>~</span>
<div id="20" class="on">
<div class="layer layer-1">
R
</div>
<div class="layer layer-2">
R
</div>
<div class="layer layer-3">
R
</div>
<div class="layer layer-4">
R
</div>
</div>
</div>
</td>
</tr>
</table>
<table class="display module">
<tr>
<td>
<div class="ground">
<span>~</span>
<div id="21" class="on">
<div class="layer layer-1">
R
</div>
<div class="layer layer-2">
R
</div>
<div class="layer layer-3">
R
</div>
<div class="layer layer-4">
R
</div>
</div>
</div>
</td>
</tr>
</table>
<table class="display module">
<tr>
<td>
<div class="ground">
<span>~</span>
<div id="22" class="on">
<div class="layer layer-1">
R
</div>
<div class="layer layer-2">
R
</div>
<div class="layer layer-3">
R
</div>
<div class="layer layer-4">
R
</div>
</div>
</div>
</td>
</tr>
</table>
<table class="display module">
<tr>
<td>
<div class="ground">
<span>~</span>
<div id="23" class="on">
<div class="layer layer-1">
R
</div>
<div class="layer layer-2">
R
</div>
<div class="layer layer-3">
R
</div>
<div class="layer layer-4">
R
</div>
</div>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table class="display_container">
<tr class="display_container">
<td class="display_container">
<table class="display module">
<tr>
<td>
<div class="ground">
<span>~</span>
<div id="24" class="on">
<div class="layer layer-1">
R
</div>
<div class="layer layer-2">
R
</div>
<div class="layer layer-3">
R
</div>
<div class="layer layer-4">
R
</div>
</div>
</div>
</td>
</tr>
</table>
<table class="display module">
<tr>
<td>
<div class="ground">
<span>~</span>
<div id="25" class="on">
<div class="layer layer-1">
R
</div>
<div class="layer layer-2">
R
</div>
<div class="layer layer-3">
R
</div>
<div class="layer layer-4">
R
</div>
</div>
</div>
</td>
</tr>
</table>
<table class="display module">
<tr>
<td>
<div class="ground">
<span>~</span>
<div id="26" class="on">
<div class="layer layer-1">
R
</div>
<div class="layer layer-2">
R
</div>
<div class="layer layer-3">
R
</div>
<div class="layer layer-4">
R
</div>
</div>
</div>
</td>
</tr>
</table>
<table class="display module">
<tr>
<td>
<div class="ground">
<span>~</span>
<div id="27" class="on">
<div class="layer layer-1">
R
</div>
<div class="layer layer-2">
R
</div>
<div class="layer layer-3">
R
</div>
<div class="layer layer-4">
R
</div>
</div>
</div>
</td>
</tr>
</table>
<table class="display module">
<tr>
<td>
<div class="ground">
<span>~</span>
<div id="28" class="on">
<div class="layer layer-1">
R
</div>
<div class="layer layer-2">
R
</div>
<div class="layer layer-3">
R
</div>
<div class="layer layer-4">
R
</div>
</div>
</div>
</td>
</tr>
</table>
<table class="display module">
<tr>
<td>
<div class="ground">
<span>~</span>
<div id="29" class="on">
<div class="layer layer-1">
R
</div>
<div class="layer layer-2">
R
</div>
<div class="layer layer-3">
R
</div>
<div class="layer layer-4">
R
</div>
</div>
</div>
</td>
</tr>
</table>
<table class="display module">
<tr>
<td>
<div class="ground">
<span>~</span>
<div id="30" class="on">
<div class="layer layer-1">
R
</div>
<div class="layer layer-2">
R
</div>
<div class="layer layer-3">
R
</div>
<div class="layer layer-4">
R
</div>
</div>
</div>
</td>
</tr>
</table>
<table class="display module">
<tr>
<td>
<div class="ground">
<span>~</span>
<div id="31" class="on">
<div class="layer layer-1">
R
</div>
<div class="layer layer-2">
R
</div>
<div class="layer layer-3">
R
</div>
<div class="layer layer-4">
R
</div>
</div>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>
</html>
Raw
script.js
/*
*/
function next_char(string_index, data_string, length) {
if (data_string[string_index] != " ") {
return string_index;
} else {
string_index++;
next_char(string_index);
}
}
write_to_tron("_ high voltage analog is better _");
function write_to_tron(data_string) {
clear_tron();
let l = data_string.length;
if (l < 1) {
return;
}
var row_heads = [0, 8, 16, 24];
let string_index = 0;
for (let i = 0; i < 32; i++) {
let layer_group = document.getElementById(i);
var layers = layer_group.querySelectorAll(".layer");
if (row_heads.includes(i) && data_string[string_index] === " ") {
// are we about to write a space at the head of a row?
// then call our function to return the next string index where the char is not a space
string_index = next_char(string_index + 1, data_string);
}
if (
data_string[string_index] === " " ||
data_string[string_index] === "." ||
data_string[string_index] === "!"
) {
document.getElementById(i).className = "off";
layers[0].innerHTML = "~";
layers[1].innerHTML = "~";
layers[2].innerHTML = "~";
layers[3].innerHTML = "~";
string_index++;
} else {
document.getElementById(i).className = "on";
layers[0].innerHTML = data_string[string_index];
layers[1].innerHTML = data_string[string_index];
layers[2].innerHTML = data_string[string_index];
layers[3].innerHTML = data_string[string_index];
string_index++;
}
if (string_index >= l) {
break;
}
}
}
function clear_tron() {
for (let i = 0; i < 32; i++) {
let layer_group = document.getElementById(i);
var layers = layer_group.querySelectorAll(".layer");
document.getElementById(i).className = "off";
}
}
function sleep(milliseconds) {
const date = Date.now();
let currentDate = null;
do {
currentDate = Date.now();
} while (currentDate - date < milliseconds);
}
Raw
style.css
/*
background: #1d2024
cell bg #121317
border color: #333641
unlit leds: #1d2024
text input not focused: #251518
text input focused: #511716
button: #7b0100
button text: #440403
gold main text: #a79059
@font-face {
font-family: 'DSEG14ClassicRegular';
src: url('DSEG14Classic-Regular.ttf')
}
*/
body {
margin: 0;
padding: 0;
/*
*/
display: inline-block;
justify-content: center;
align-items: center;
height: 90vmin;
background: grey;
background: #251518;
font-family: "DSEG14ClassicRegular";
font-size: 7vw;
}
.display_container {
display: flex;
margin: 0px 0px 0px 0px;
border: 0;
padding: 0;
background-color: #251518;
/*
background-color: #161a2b;
border: 0.06em solid #333641;
padding: 0.03em;
*/
}
table {
float: left;
margin: 0px 0px 0px 0px;
border: 0.06em solid #333641;
padding: 0.01em;
background-color: #121317;
}
td {
border: 0.04em solid #333641;
padding: 0.03em;
background-color: #121317;
text-align: center;
vertical-align: middle;
}
.layer {
position: absolute;
}
/*
JS to control class stauts of each character
.off turns oppacity to 0 for all layers except the background 14 seg layer.
.on will run the animation for the display powering on
"" - neutral, the strip the container div of it's class to have the layers default to their assigned settings
*/
.off > div {
animation: power_off 1s ease-out 1;
animation-fill-mode: forwards;
}
@keyframes power_off {
0% {
opacity: 0.25;
}
100% {
opacity: 0;
}
}
.on > div {
animation: glow 2s ease-out 1;
animation-fill-mode: forwards;
}
@keyframes glow {
0%,
100% {
color: #fff, #a79059;
opacity: 0, 0.75;
text-shadow: 0 0 0px #a79059, 0 0 2vw #a79059;
}
0% {
color: #fff;
opacity: 0;
text-shadow: none;
}
20% {
color: #ffa;
opacity: 0.9;
text-shadow: 0 0 3vw #a79059;
}
50% {
color: #a79059;
opacity: 0.9;
text-shadow: 0 0 2vw #a79059;
}
}
.layer-1 {
top: 0;
color: #a79059;
font-family: "DSEG14ClassicRegular";
text-shadow: 0 0 0.25vw #b9d467;
}
.layer-2 {
top: 0;
color: #b9d467;
opacity: 0.5;
mix-blend-mode: overlay;
font-family: "DSEG14ClassicLight";
}
.layer-3 {
top: 0;
color: #ec8427;
opacity: 0.5;
mix-blend-mode: hard-light;
text-shadow: 0 0 0.75vw #b9d467;
font-family: "DSEG14ClassicLight";
font-size: 95%;
}
.layer-4 {
top: 5px;
left: 5px;
color: #ec8427;
opacity: 0.8;
mix-blend-mode: overlay;
font-family: "DSEG14ClassicLight";
font-size: 98%;
}
.ground {
position: relative;
color: #1d2024;
font-family: "DSEG14ClassicLight";
}
.input_section {
display: flex;
margin-left: 0;
margin-right: 0;
vertical-align: top;
}
input {
float: none;
display: flex;
height: 3vw;
width: 30vw;
font-size: 2vw;
margin-bottom: 0;
background-color: #2d0a09;
color: #170505;
opacity: 0.5;
font-family: "DSEG14ClassicRegular";
outline: none;
}
input[type="text"]:focus {
background-color: #521716;
color: #8a1312;
opacity: 0.8;
}
button {
float: none;
display: flex;
height: 3vw;
width: 30.5vw;
margin-top: 0.5vw;
background-color: #7b0100;
color: #440403;
font-size: 2vw;
outline: none;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment