Version 2 of the LED scroller ensures the LED stay in place. Thus, th…

…e lights move.
rheh · Jul 10, 2012 · 97b70d1 · 97b70d1
1 parent 52030b6
commit 97b70d1
Show file tree

Hide file tree

Showing 14 changed files with 202 additions and 2 deletions.
diff --git a/flip_clock/flip_clock.psd b/flip_clock/flip_clock.psd
diff --git a/led_scroller/led_scroller.js b/led_scroller/led_scroller.js
@@ -100,10 +100,10 @@ function init() {
 		ctx = canvas.getContext('2d');
 
 		letters_blue = new Image();
-		letters_blue.src = 'letters-blue.jpg';
+		letters_blue.src = 'letters-blue.jpg?v=10';
 
 		letters_pink = new Image();
-		letters_pink.src = 'letters-pink.jpg';
+		letters_pink.src = 'letters-pink.jpg?v=10';
 		letters_pink.onload = startAnim;
 
 	} else {

diff --git a/led_scrollerv2/blue.jpg b/led_scrollerv2/blue.jpg
diff --git a/led_scrollerv2/go.jpg b/led_scrollerv2/go.jpg
diff --git a/led_scrollerv2/html5-canvas.jpg b/led_scrollerv2/html5-canvas.jpg
diff --git a/led_scrollerv2/index.html b/led_scrollerv2/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<title>LED Scroller</title>
+		<script src='led_scroller.js'></script>
+		<link rel="stylesheet" type="text/css" href="led_scroller.css" media="all" />
+	</head>
+	<body onload='init();'>
+		<header>
+			<img src="prompt.jpg" alt='Enter your phrase here'/>
+			<div id='colour_container'>
+				<input type="radio" name="colour" id='pink' value="Pink" checked="checked" />
+				<label for="pink"><img src="pink.jpg" alt='Pink'/></label>
+				<input type="radio" name="colour" id='blue' value="Blue" />
+				<label for="blue"><img src="blue.jpg" alt='Blue'/></label>
+			</div>
+		</header>
+		<div id='container'>
+			<input type="text" id='text' value="There is only one difference between a madman and me. I am not mad." />
+			<a id='imgLink' href="javascript:startAnim();"> <img src="go.jpg" alt='Go'/> </a>
+		</div>
+		<canvas id="led" width="1200" height="350"></canvas>
+		<footer>
+			<img src="html5-canvas.jpg" alt='Drawn using HTML&apost;s canvas'/>
+		</footer>
+	</body>
+</html>
diff --git a/led_scrollerv2/led_scroller.css b/led_scrollerv2/led_scroller.css
@@ -0,0 +1,56 @@
+#text {
+	border: 5px solid #cfcfaa;
+	-webkit-box-shadow: inset 0 0 8px rgba(0,0,0,0.1), 0 0 16px rgba(0,0,0,0.1);
+	-moz-box-shadow: inset 0 0 8px rgba(0,0,0,0.1), 0 0 16px rgba(0,0,0,0.1);
+	box-shadow: inset 0 0 8px rgba(0,0,0,0.1), 0 0 16px rgba(0,0,0,0.1);
+	background: rgba(255,255,255,0.5);
+	margin: 0 0 10px 0;
+	width: 1060px;
+	font-size: 2em;
+	padding: 5px;
+	margin-bottom: 30px;
+	margin-left: 30px;
+	margin-top: 5px;
+	color: #aaa;
+	margin-top: 15px;
+}
+
+canvas {
+	margin-left: 35px;
+	box-shadow: 4px 5px 37px rgba(0, 0, 0, 0.80);
+	-moz-box-shadow: 4px 5px 37px rgba(0, 0, 0, 0.80);
+	-webkit-box-shadow: 4px 5px 37px rgba(0, 0, 0, 0.80);
+}
+
+img {
+	border: 0px;
+}
+
+label {
+	cursor: pointer;
+}
+
+#imgLink {
+	padding-top: 5px;
+	float: right;
+	vertical-align: top;
+}
+
+#colour_container {
+	float: right;
+	margin-right: 0px;
+	margin-top: 5px;
+}
+
+#colour_container input {
+	vertical-align: top;
+	margin-top: 30px;
+}
+
+header, footer, #container {
+	width: 1200px;
+}
+
+footer {
+	margin-top: 25px;
+}
diff --git a/led_scrollerv2/led_scroller.js b/led_scrollerv2/led_scroller.js
@@ -0,0 +1,116 @@
+var letters_pink = null, 
+	letters_blue = null, 
+	sMessage = "", 
+	canvas = null, 
+	ctx = null, 
+	LETTER_HEIGHT = 350, 
+	LETTER_WIDTH = 266.7, 
+	iStep = 0, 
+	iDrawPhase = 0, 
+	job = null, 
+	bPink = true;
+
+function drawLetter(iSpriteRow, iSpriteCol,  iPos) {
+
+	var xPos = (LETTER_WIDTH * iPos) - iStep;
+
+
+	if ((xPos > 0 - LETTER_WIDTH) && (xPos < 1200 + LETTER_WIDTH)) {
+
+
+		bPink = document.getElementById('pink').checked;
+
+		if (bPink === true) {
+
+			ctx.drawImage(letters_pink, iSpriteCol * LETTER_WIDTH, iSpriteRow, LETTER_WIDTH, LETTER_HEIGHT, xPos, 0, LETTER_WIDTH, LETTER_HEIGHT);
+
+		} else {
+
+			ctx.drawImage(letters_blue,  iSpriteCol * LETTER_WIDTH, iSpriteRow, LETTER_WIDTH, LETTER_HEIGHT, xPos, 0, LETTER_WIDTH, LETTER_HEIGHT);
+
+		}
+
+	}
+
+}
+
+function draw() {
+
+	var iCounter = 0, 
+		iCharCode = 0;
+
+	for ( iCounter = 0; iCounter < sMessage.length; iCounter++) {
+
+		iCharCode = sMessage.charCodeAt(iCounter);
+
+		if (iCharCode > 64 && iCharCode < 91) {
+			iSpriteCol = Math.abs(65 - iCharCode) ;
+			iSpriteRow = 0;
+		} else {
+			iSpriteCol = 26;
+			iSpriteRow = 0;	
+		}
+
+console.log("r:" + iSpriteRow + " c:" + iSpriteCol + " p:" + iCounter + " c:" + sMessage.charAt(iCounter));
+
+		drawLetter(iSpriteRow, iSpriteCol, iCounter);
+	}
+
+	iSpriteCol = 1;
+	iSpriteRow = 5;
+
+	for (iCounter; iCounter < sMessage.length + 10; iCounter++) {
+
+		drawLetter(iSpriteCol, iSpriteRow, iCounter);
+	}
+
+	iDrawPhase += 1;
+	iStopPoint = (27 * sMessage.length);
+
+	if (iDrawPhase < iStopPoint) {
+		iStep += 38.2;
+	} else {
+		clearInterval(job);
+	}
+
+}
+
+function startAnim() {
+
+	clearInterval(job);
+	sMessage = document.getElementById('text').value.toUpperCase();
+	iDrawPhase = 0;
+	iStep = 0;
+
+	if (sMessage.length === 0) {
+		sMessage = "Please enter a phrase";
+		document.getElementById('text').value = sMessage;
+	} else {
+
+		// Add 5 spaces padding so the text start off right
+		sMessage = "    " + sMessage;
+		// Start the timer
+		job = setInterval(draw, 100);
+	}
+}
+
+function init() {
+
+	// Grab the clock element
+	canvas = document.getElementById('led');
+
+	// Canvas supported?
+	if (canvas.getContext('2d')) {
+		ctx = canvas.getContext('2d');
+
+		letters_blue = new Image();
+		letters_blue.src = 'letters-blue.jpg?v=1';
+
+		letters_pink = new Image();
+		letters_pink.src = 'letters-pink.jpg?v=5';
+		letters_pink.onload = startAnim;
+
+	} else {
+		alert("Canvas not supported!");
+	}
+}
diff --git a/led_scrollerv2/letters-blue.jpg b/led_scrollerv2/letters-blue.jpg
diff --git a/led_scrollerv2/letters-horizontal.psd b/led_scrollerv2/letters-horizontal.psd
diff --git a/led_scrollerv2/letters-pink.jpg b/led_scrollerv2/letters-pink.jpg
diff --git a/led_scrollerv2/pink.jpg b/led_scrollerv2/pink.jpg
diff --git a/led_scrollerv2/prompt.jpg b/led_scrollerv2/prompt.jpg
diff --git a/led_scrollerv2/sign-handwriting_demo-version.ttf b/led_scrollerv2/sign-handwriting_demo-version.ttf