Skip to content

Instantly share code, notes, and snippets.

@rwaldron

rwaldron/complete-character-set.js

Last active October 23, 2021 02:07
Show Gist options
  • Star 12 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save rwaldron/0dd696800d2a09786ec2 to your computer and use it in GitHub Desktop.
Save rwaldron/0dd696800d2a09786ec2 to your computer and use it in GitHub Desktop.
Download ZIP
Character set: 0-9, A-Z, a-z for seven segment displays
Raw
complete-character-set.js
{
"0": 0x7E,
"1": 0x30,
"2": 0x6D,
"3": 0x79,
"4": 0x33,
"5": 0x5B,
"6": 0x5F,
"7": 0x70,
"8": 0x7F,
"9": 0x7B,
" ": 0x00,
"A": 0x77,
"a": 0x7D,
"B": 0x7F,
"b": 0x1F,
"C": 0x4E,
"c": 0x0D,
"D": 0x7E,
"d": 0x3D,
"E": 0x4F,
"e": 0x6f,
"F": 0x47,
"f": 0x47,
"G": 0x5E,
"g": 0x7B,
"H": 0x37,
"h": 0x17,
"I": 0x30,
"i": 0x10,
"J": 0x3C,
"j": 0x38,
"K": 0x37,
"k": 0x17,
"L": 0x0E,
"l": 0x06,
"M": 0x55,
"m": 0x55,
"N": 0x15,
"n": 0x15,
"O": 0x7E,
"o": 0x1D,
"P": 0x67,
"p": 0x67,
"Q": 0x73,
"q": 0x73,
"R": 0x77,
"r": 0x05,
"S": 0x5B,
"s": 0x5B,
"T": 0x46,
"t": 0x0F,
"U": 0x3E,
"u": 0x1C,
"V": 0x27,
"v": 0x23,
"W": 0x3F,
"w": 0x2B,
"X": 0x25,
"x": 0x25,
"Y": 0x3B,
"y": 0x33,
"Z": 0x6D,
"z": 0x6D,
}
@mathiasbynens
Copy link

Demo: http://jsbin.com/conax/4

@nelup305
Copy link

nelup305 commented Apr 11, 2018 •
edited

Hello,

I would have some improvement of html code with my characters. The segments are in the order a, b, c, d, e, f, g, dp:

<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf8">
<meta name="robots" content="noindex">
<title>MY 7-Segment Characters</title>

<style id="jsbin-css">
#upper, #lower {
  height: 50px;
  width: 50px;
}
#dot {
  height: 8px;
  width: 70px;
}

.border-top {
  border-top: solid 8px #F0F0F0;
}
.border-right {
  border-right: solid 8px #F0F0F0;
}
.border-bottom {
  border-bottom: solid 8px #F0F0F0;
}
.border-left {
  border-left: solid 8px #F0F0F0;
}

.border-top-a {
  border-top: solid 8px red;
}
.border-right-a {
  border-right: solid 8px red;
}
.border-bottom-a {
  border-bottom: solid 8px red;
}
.border-left-a {
  border-left: solid 8px red;
}


</style>
</head>
<body>
<div id="now-showing" style="margin:5px">---</div>
<div id="upper" class="border-top border-right border-bottom border-left"> </div>
<div id="lower" class="border-left border-bottom border-right"> </div>
<div id="dot" class="border-right"> </div>

<script>
var chars = {
  " ": 0x00,   //0x20 ' '
  "!": 0x86,   //0x21 '!'
  "\"": 0x22,   //0x22 '"'
  "#": 0x7E,   //0x23 '#' ?
  "$": 0x2D,   //0x24 '$' ?
  "%": 0xD2,   //0x25 '%' ?
  "&": 0x7B,   //0x26 '&' ?
  "'": 0x20,   //0x27 '''
  "(": 0x39,   //0x28 '('
  ")": 0x0F,   //0x29 ')'
  "*": 0x63,   //0x2A '*' ?
  "+": 0x00,   //0x2B '+' ?
  ",": 0x10,   //0x2C ','
  "-": 0x40,   //0x2D '-'
  ".": 0x80,   //0x2E '.'
  "/": 0x52,   //0x2F '/' ?
  //30-3F
  "0": 0x3F,   //0x30 '0'
  "1": 0x06,   //0x31 '1'
  "2": 0x5B,   //0x32 '2'
  "3": 0x4F,   //0x33 '3'
  "4": 0x66,   //0x34 '4'
  "5": 0x6D,   //0x35 '5'
  "6": 0x7D,   //0x36 '6'
  "7": 0x07,   //0x37 '7'
  "8": 0x7F,   //0x38 '8'
  "9": 0x6F,   //0x39 '9'
  ":": 0x09,   //0x3A ':' ?
  ";": 0x0D,   //0x3B ';' ?
  "<": 0x58,   //0x3C '<' ?
  "=": 0x48,   //0x3D '='
  ">": 0x4C,   //0x3E '>' ?
  "?": 0xD3,   //0x3F '?' ?
  //40-4F
  "@": 0x5F,   //0x40 '@' ?
  "A": 0x77,   //0x41 'A'
  "B": 0x7C,   //0x42 'B'
  "C": 0x39,   //0x43 'C'
  "D": 0x5E,   //0x44 'D'
  "E": 0x79,   //0x45 'E'
  "F": 0x71,   //0x46 'F'
  "G": 0x3D,   //0x47 'G'
  "H": 0x76,   //0x48 'H'
  "I": 0x30,   //0x49 'I'
  "J": 0x1E,   //0x4A 'J'
  "K": 0x75,   //0x4B 'K' ?
  "L": 0x38,   //0x4C 'L'
  "M": 0x37,   //0x4D 'M'
  "N": 0x54,   //0x4E 'N'
  "O": 0x3F,   //0x4F 'O'
  //50-5F
  "P": 0x73,   //0x50 'P'
  "Q": 0x67,   //0x51 'Q' ?
  "R": 0x50,   //0x52 'R'
  "S": 0x6D,   //0x53 'S'
  "T": 0x78,   //0x54 'T'
  "U": 0x3E,   //0x55 'U'
  "V": 0x1C,   //0x56 'V' ? (u)
  "W": 0x2A,   //0x57 'W' ?
  "X": 0x76,   //0x58 'X' ? (like H)
  "Y": 0x6E,   //0x59 'Y'
  "Z": 0x5B,   //0x5A 'Z' ?
  "[": 0x39,   //0x5B '['
  "\\": 0x64,   //0x5C '\' ?
  "]": 0x0F,   //0x5D ']'
  "^": 0x23,   //0x5E '^' ?
  "_": 0x08,   //0x5F '_'
  //60-6F
  "`": 0x02,   //0x60 '`' ?
  "a": 0x77,   //0x61 'a'
  "b": 0x7C,   //0x62 'b'
  "c": 0x58,   //0x63 'c'
  "d": 0x5E,   //0x66 'd'
  "e": 0x79,   //0x65 'e'
  "f": 0x71,   //0x66 'f'
  "g": 0x3D,   //0x67 'g'
  "h": 0x74,   //0x68 'h'
  "i": 0x10,   //0x69 'i'
  "j": 0x1E,   //0x6A 'j'
  "k": 0x75,   //0x6B 'k' ?
  "l": 0x38,   //0x6C 'l'
  "m": 0x37,   //0x6D 'm'
  "n": 0x54,   //0x6E 'n'
  "o": 0x5C,   //0x6F 'o'
  //70-7F
  "p": 0x73,   //0x70 'p'
  "q": 0x67,   //0x71 'q'
  "r": 0x50,   //0x72 'r'
  "s": 0x6D,   //0x73 's'
  "t": 0x78,   //0x74 't'
  "u": 0x3E,   //0x77 'u' ? (like U)
  "v": 0x1C,   //0x76 'v' ? (like u)
  "w": 0x2A,   //0x77 'w' ?
  "x": 0x76,   //0x78 'x' ? (like H)
  "y": 0x6E,   //0x79 'y'
  "z": 0x5B,   //0x7A 'z' ?
  "{": 0x46,   //0x7B '{' ?
  "|": 0x30,   //0x7C '|'
  "}": 0x70,   //0x7D '}' ?
  "~": 0x01,   //0x7E '~' ?
  "DEL": 0x00,   //0x7F 'DEL'
};

var keys = Object.keys(chars);
var upper = document.getElementById("upper");
var lower = document.getElementById("lower");
var dot = document.getElementById("dot");
var showing = document.getElementById("now-showing");
//segments: a, b, c, d, e, f, g, dp
var classes = ["top", "right", "right", "bottom", "left", "left", "bottom","right"];

function element(position) {
  switch (position) {
    default:
    case 0:
    case 1:
    case 5:
    case 6:
      return(upper);
    case 2:
    case 3:
    case 4:
      return(lower);
    case 7:
      return(dot);
  }
}

setInterval(function() {
  var char = keys.shift();
  var bits = chars[char];
  
  upper.className = "";
  lower.className = "";  
  dot.className = "";  

  showing.textContent = "'" + char + "' [0x" + bits.toString(16) + "]";
  
  for (var i=0; i<8; i++) {
    if (bits & (1<<i)) {
      element(i).classList.add("border-" + classes[i] + "-a");
    }
    else {
      element(i).classList.add("border-" + classes[i]);
    }
  }

  if (!keys.length) {
    keys = Object.keys(chars);
  }
}, 1000);
</script>


</body></html>

nelup

@nelup305
Copy link

nelup305 commented Apr 11, 2018 •
edited

One more improvement. Listing all characters:

<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf8">
<meta name="robots" content="noindex">
<title>List of 7-Segment characters</title>

<style id="jsbin-css">
.char {
  display: inline-block; 
  border: 1px solid #A0A0A0; 
  margin:1px;
  padding: 5px 5px 5px 14px;
}

.label {
  padding: 0px 0px 5px 0px;
}
.upper {
  height: 40px;
  width: 40px;
}
.lower {
  height: 40px;
  width: 40px;
}
.dot {
  height: 8px;
  width: 60px;
}

.border-top {
  border-top: solid 8px #F0F0F0;
}
.border-right {
  border-right: solid 8px #F0F0F0;
}
.border-bottom {
  border-bottom: solid 8px #F0F0F0;
}
.border-left {
  border-left: solid 8px #F0F0F0;
}

.border-top-a {
  border-top: solid 8px red;
}
.border-right-a {
  border-right: solid 8px red;
}
.border-bottom-a {
  border-bottom: solid 8px red;
}
.border-left-a {
  border-left: solid 8px red;
}


</style>
</head>
<body>
<h1>List of some 7-segment ASCII characters</h1>
<script>
var ctable = [
  0x00,   //0x20 ' '
  0x86,   //0x21 '!'
  0x22,   //0x22 '"'
  0x7E,   //0x23 '#' ?
  0x2D,   //0x24 '$' ?
  0xD2,   //0x25 '%' ?
  0x7B,   //0x26 '&' ?
  0x20,   //0x27 '''
  0x39,   //0x28 '('
  0x0F,   //0x29 ')'
  0x63,   //0x2A '*' ?
  0x00,   //0x2B '+' ?
  0x10,   //0x2C ','
  0x40,   //0x2D '-'
  0x80,   //0x2E '.'
  0x52,   //0x2F '/' ?
  //30-3F
  0x3F,   //0x30 '0'
  0x06,   //0x31 '1'
  0x5B,   //0x32 '2'
  0x4F,   //0x33 '3'
  0x66,   //0x34 '4'
  0x6D,   //0x35 '5'
  0x7D,   //0x36 '6'
  0x07,   //0x37 '7'
  0x7F,   //0x38 '8'
  0x6F,   //0x39 '9'
  0x09,   //0x3A ':' ?
  0x0D,   //0x3B ';' ?
  0x58,   //0x3C '<' ?
  0x48,   //0x3D '='
  0x4C,   //0x3E '>' ?
  0xD3,   //0x3F '?' ?
  //40-4F
  0x5F,   //0x40 '@' ?
  0x77,   //0x41 'A'
  0x7C,   //0x42 'B'
  0x39,   //0x43 'C'
  0x5E,   //0x44 'D'
  0x79,   //0x45 'E'
  0x71,   //0x46 'F'
  0x3D,   //0x47 'G'
  0x76,   //0x48 'H'
  0x30,   //0x49 'I'
  0x1E,   //0x4A 'J'
  0x75,   //0x4B 'K' ?
  0x38,   //0x4C 'L'
  0x37,   //0x4D 'M'
  0x54,   //0x4E 'N'
  0x3F,   //0x4F 'O'
  //50-5F
  0x73,   //0x50 'P'
  0x67,   //0x51 'Q' ?
  0x50,   //0x52 'R'
  0x6D,   //0x53 'S'
  0x78,   //0x54 'T'
  0x3E,   //0x55 'U'
  0x1C,   //0x56 'V' ? (u)
  0x2A,   //0x57 'W' ?
  0x76,   //0x58 'X' ? (like H)
  0x6E,   //0x59 'Y'
  0x5B,   //0x5A 'Z' ?
  0x39,   //0x5B '['
  0x64,   //0x5C '\' ?
  0x0F,   //0x5D ']'
  0x23,   //0x5E '^' ?
  0x08,   //0x5F '_'
  //60-6F
  0x02,   //0x60 '`' ?
  0x77,   //0x61 'a'
  0x7C,   //0x62 'b'
  0x58,   //0x63 'c'
  0x5E,   //0x66 'd'
  0x79,   //0x65 'e'
  0x71,   //0x66 'f'
  0x3D,   //0x67 'g'
  0x74,   //0x68 'h'
  0x10,   //0x69 'i'
  0x1E,   //0x6A 'j'
  0x75,   //0x6B 'k' ?
  0x38,   //0x6C 'l'
  0x37,   //0x6D 'm'
  0x54,   //0x6E 'n'
  0x5C,   //0x6F 'o'
  //70-7F
  0x73,   //0x70 'p'
  0x67,   //0x71 'q'
  0x50,   //0x72 'r'
  0x6D,   //0x73 's'
  0x78,   //0x74 't'
  0x3E,   //0x77 'u' ? (like U)
  0x1C,   //0x76 'v' ? (like u)
  0x2A,   //0x77 'w' ?
  0x76,   //0x78 'x' ? (like H)
  0x6E,   //0x79 'y'
  0x5B,   //0x7A 'z' ?
  0x46,   //0x7B '{' ?
  0x30,   //0x7C '|'
  0x70,   //0x7D '}' ?
  0x01,   //0x7E '~' ?
  0x00,   //0x7F 'DEL'
];

//segments: a, b, c, d, e, f, g, dp
var classes = ["top", "right", "right", "bottom", "left", "left", "bottom","right"];

function eselect(position, u, l, dp) {
  switch (position) {
    default:
    case 0:
    case 1:
    case 5:
    case 6:
      return(u);
    case 2:
    case 3:
    case 4:
      return(l);
    case 7:
      return(dp);
  }
}

function addchar(c, code)
{
  var elem = document.createElement("div");
  elem.id = "char_" + c;
  elem.innerHTML = "";
  elem.className = "char";
  
  var t = document.createElement("div");
  t.id = "t_" + c;
  t.innerHTML = "'" + c + "' [0x" + code.toString(16) + "]";
  t.className = "label";
  
  var u = document.createElement("div");
  u.id = "u_" + c;
  u.innerHTML = "";
  u.className = "upper";

  var l = document.createElement("div");
  l.id = "l_" + c;
  l.innerHTML = "";
  l.className = "lower";

  var dp = document.createElement("div");
  dp.id = "dp_" + c;
  dp.innerHTML = "";
  dp.className = "dot";
  
  for (var i=0; i<8; i++) {
    if (code & (1<<i)) {
      eselect(i, u, l, dp).classList.add("border-" + classes[i] + "-a");
    }
    else {
      eselect(i, u, l, dp).classList.add("border-" + classes[i]);
    }
  }
  
  elem.appendChild(t);
  elem.appendChild(u);
  elem.appendChild(l);
  elem.appendChild(dp);
  document.body.appendChild(elem);  
}

function addnewline()
{
  var elem = document.createElement("br");
  document.body.appendChild(elem);  
}

function generate()
{
  var i;
  
  for (i=0; i<ctable.length; i++) {
    //line break
    if (i>0 && i%8 == 0) {
      addnewline();
    }
    //add 7-segment char.
    var c = String.fromCharCode(i + 0x20);
    addchar(c, ctable[i]);
  }
}

window.onload = generate;
</script>


</body></html>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment