kashyapp/README.md

## README.md

      
    Raw
  

              README.md
            
          
    A scaling 7 segment lcd display

An html/js implementation to the LCD Display problem on UVA.
Instructions

Should be self explanatory but the number field takes digits and the hyphen(-) character. And then there's the scale.
Demo

http://bl.ocks.org/4386850

  
## index.html
<!doctype html>
<html>
  <head>
    <script src='lcd.js'></script>
    <style>
      body {
        background-color: black;
        color: green;
        font-family: menlo, monaco, monospace;
        font-size: 150%;
      }
      #lcd {
        font-weight: bold;
        text-align: center;
        color: #6F6;
        text-shadow: 0.3ex 0.3ex 0.2ex #6F6, -0.3ex 0.3ex 0.2ex #9F9, 0.3ex -0.3ex 0.2ex #9F9, -0.3ex -0.3ex 0.2ex #9F9, 0.7ex 0.7ex 1.9ex #9F9, 0.7ex 0.7ex 1.9ex #9F9, 0.7ex 0.7ex 1.9ex #9F9;
        margin: 50px;
      }
      input {
        font-family: inherit;
        background-color: green;
        color: black;
        font-weight: inherit;
        font-size: inherit;
        border: 2px solid #000;
      }
      input:focus {
        border: 2px dotted #0F0;
      }
      #myform {
      }
    </style>
  </head>
  <body>
    <form onsubmit="return false;" id="myform">
      number: <input type="text" value="29-08-1765" id="txt" name="txt" tabindex=1/>
      /
      scale: <input type="text" value="2" id="scale" name="scale" size="2" tabindex=2/>
    </form>
    <pre id="lcd">
    <pre>
  </body>
</html>

## lcd.js
var digits={
  0: ['-', '|', '|', ' ', '|', '|', '-'],
  1: [' ', ' ', '|', ' ', ' ', '|', ' '],
  2: ['-', ' ', '|', '-', '|', ' ', '-'],
  3: ['-', ' ', '|', '-', ' ', '|', '-'],
  4: [' ', '|', '|', '-', ' ', '|', ' '],
  5: ['-', '|', ' ', '-', ' ', '|', '-'],
  6: ['-', '|', ' ', '-', '|', '|', '-'],
  7: ['-', ' ', '|', ' ', ' ', '|', ' '],
  8: ['-', '|', '|', '-', '|', '|', '-'],
  9: ['-', '|', '|', '-', ' ', '|', '-'],
  '-': [' ', ' ', ' ', '-', ' ', ' ', ' '],
};

function space(scale) {
  var s = '';
  scale = 1;
  for(var i=0; i < scale; i++) {
    s += ' ';
  }
  return s;
}

function r(rid, number, scale) {
  var s="";
  for(var ni=0; ni < number.length; ni++) {
    var digit = number[ni];

    s += ' ';
    for(var i=0; i < scale; i++) {
      s+=digits[digit][rid];
    }
    s += ' ';

    s += space(scale);
  }
  s += '\n';

  return s;
}

function c(cid, number, scale) {
  var s="";
  for(var i=0; i < scale; i++) {
    for(var ni=0; ni < number.length; ni++) {
      var digit = number[ni];

      s+=digits[digit][cid];
      for(var j=0; j < scale; j++) {
        s+=' ';
      }
      s+=digits[digit][cid+1];

      s += space(scale);
    }
    s+='\n';
  }
  return s;
}

function lcd(number, scale) {
  return r(0, number, scale) +
    c(1, number, scale) +
    r(3, number, scale) +
    c(4, number, scale) +
    r(6, number, scale) ;
}

function refresh(event) {
  var pre = document.getElementById('lcd');
  var text = document.getElementById('txt').value;
  var scale = document.getElementById('scale').value;
  pre.textContent = lcd(text, scale);
  return false;
}

function refresh2(event) {
  refresh();
  return true;
}

onload = function() {
  document.getElementById('txt').focus();
  document.getElementById('txt').onchange = refresh;
  document.getElementById('txt').onkeyup = refresh2;
  document.getElementById('scale').onchange = refresh;
  refresh();
}

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!doctype html>
	<html>
	<head>
	<script src='lcd.js'></script>
	<style>
	body {
	background-color: black;
	color: green;
	font-family: menlo, monaco, monospace;
	font-size: 150%;
	}
	#lcd {
	font-weight: bold;
	text-align: center;
	color: #6F6;
	text-shadow: 0.3ex 0.3ex 0.2ex #6F6, -0.3ex 0.3ex 0.2ex #9F9, 0.3ex -0.3ex 0.2ex #9F9, -0.3ex -0.3ex 0.2ex #9F9, 0.7ex 0.7ex 1.9ex #9F9, 0.7ex 0.7ex 1.9ex #9F9, 0.7ex 0.7ex 1.9ex #9F9;
	margin: 50px;
	}
	input {
	font-family: inherit;
	background-color: green;
	color: black;
	font-weight: inherit;
	font-size: inherit;
	border: 2px solid #000;
	}
	input:focus {
	border: 2px dotted #0F0;
	}
	#myform {
	}
	</style>
	</head>
	<body>
	<form onsubmit="return false;" id="myform">
	number: <input type="text" value="29-08-1765" id="txt" name="txt" tabindex=1/>
	/
	scale: <input type="text" value="2" id="scale" name="scale" size="2" tabindex=2/>
	</form>
	<pre id="lcd">
	<pre>
	</body>
	</html>
	var digits={
	0: ['-', '\|', '\|', ' ', '\|', '\|', '-'],
	1: [' ', ' ', '\|', ' ', ' ', '\|', ' '],
	2: ['-', ' ', '\|', '-', '\|', ' ', '-'],
	3: ['-', ' ', '\|', '-', ' ', '\|', '-'],
	4: [' ', '\|', '\|', '-', ' ', '\|', ' '],
	5: ['-', '\|', ' ', '-', ' ', '\|', '-'],
	6: ['-', '\|', ' ', '-', '\|', '\|', '-'],
	7: ['-', ' ', '\|', ' ', ' ', '\|', ' '],
	8: ['-', '\|', '\|', '-', '\|', '\|', '-'],
	9: ['-', '\|', '\|', '-', ' ', '\|', '-'],
	'-': [' ', ' ', ' ', '-', ' ', ' ', ' '],
	};

	function space(scale) {
	var s = '';
	scale = 1;
	for(var i=0; i < scale; i++) {
	s += ' ';
	}
	return s;
	}

	function r(rid, number, scale) {
	var s="";
	for(var ni=0; ni < number.length; ni++) {
	var digit = number[ni];

	s += ' ';
	for(var i=0; i < scale; i++) {
	s+=digits[digit][rid];
	}
	s += ' ';

	s += space(scale);
	}
	s += '\n';

	return s;
	}

	function c(cid, number, scale) {
	var s="";
	for(var i=0; i < scale; i++) {
	for(var ni=0; ni < number.length; ni++) {
	var digit = number[ni];

	s+=digits[digit][cid];
	for(var j=0; j < scale; j++) {
	s+=' ';
	}
	s+=digits[digit][cid+1];

	s += space(scale);
	}
	s+='\n';
	}
	return s;
	}

	function lcd(number, scale) {
	return r(0, number, scale) +
	c(1, number, scale) +
	r(3, number, scale) +
	c(4, number, scale) +
	r(6, number, scale) ;
	}

	function refresh(event) {
	var pre = document.getElementById('lcd');
	var text = document.getElementById('txt').value;
	var scale = document.getElementById('scale').value;
	pre.textContent = lcd(text, scale);
	return false;
	}

	function refresh2(event) {
	refresh();
	return true;
	}

	onload = function() {
	document.getElementById('txt').focus();
	document.getElementById('txt').onchange = refresh;
	document.getElementById('txt').onkeyup = refresh2;
	document.getElementById('scale').onchange = refresh;
	refresh();
	}