rwaldron/complete-character-set.js

nelup305 · 2018-04-11T12:15:58Z

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>

	{
	"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,
	}

rwaldron/complete-character-set.js

nelup305 commented Apr 11, 2018 • edited Loading

nelup305 commented Apr 11, 2018 •

edited

Loading