Skip to content

Instantly share code, notes, and snippets.

@kd7lxl

kd7lxl/mcuflash.html

Created July 27, 2011 16:47
Show Gist options
  • Save kd7lxl/1109791 to your computer and use it in GitHub Desktop.
Save kd7lxl/1109791 to your computer and use it in GitHub Desktop.
Download ZIP
Light based implementation of SPI in Javascript
Raw
mcuflash.html
<html>
<head>
<style>
.flasher {
font-weight: bold;
text-align: center;
color: #888888;
width: 200px;
height: 200px;
background-color: black;
float: left;
-webkit-transform: translateZ(0);
border-right-style:dotted;
border-color:#888888;
border-width:1px;
}
</style>
<script type="text/javascript">
/* Copyright 2011, Tom Hayward <tom@tomh.us>, MIT License */
var ms = 100,
bytes = 0,
leftblock = null,
rightblock = null,
statustext = null;
function sendBit(bit) {
// data on
if (bit) {
rightblock.style.backgroundColor = 'white';
}
else {
rightblock.style.backgroundColor = 'black';
}
// clock on
leftblock.style.backgroundColor = 'white';
setTimeout(function() {
// clock off, data off
leftblock.style.backgroundColor = 'black';
rightblock.style.backgroundColor = 'black';
}, ms);
}
function sendByte(byte) {
var bits = 8;
setTimeout(function() {
var timer = setInterval(function() {
bits--;
//console.log(byte >> bits & 1);
sendBit(byte >> bits & 1);
if (bits == 0) {
clearInterval(timer);
return;
}
}, ms * 2);
}, ms * 2 * bits * bytes++);
}
function sendData() {
var button = document.getElementById('sendnow'),
byte1 = parseInt(document.getElementById('b1').value),
byte2 = parseInt(document.getElementById('b2').value),
checksum = byte1 ^ byte2;
leftblock = document.getElementById('leftblock');
rightblock = document.getElementById('rightblock');
statustext = document.getElementById('status');
bytes = 0; // reset byte counter
document.getElementById('b3').value = checksum;
button.disabled = true;
statustext.innerHTML = "Writing data...";
sendByte(byte1);
sendByte(byte2);
sendByte(checksum);
setTimeout(function() {
statustext.innerHTML = "done";
button.disabled = false;
}, ms * 2 * 8 * bytes);
}
</script>
</head>
<body>
<h1>PC/MCU Flasher Interface</h1>
<code>
Byte 1: <input id="b1" type="text" name="b1" size="3" value="255" /> <br>
Byte 2: <input id="b2" type="text" name="b2" size="3" value="0" /> <br>
CHKsum: <input id="b3" type="text" name="b3" size="3" value="" disabled="disabled" /> <br>
<br>
<input id="sendnow" type="button" value="SEND NOW" onClick="javascript:sendData();" />
<br><br><br>
<p>Status: <span id="status"></span></p>
</code>
<div id="leftblock" class="flasher">&nbsp;CLOCK</div>
<div id="rightblock" class="flasher">&nbsp;DATA</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment