Dot Matrix 8x8 Red LED Module MAX7219
-
RM8.00
- Product Code: Dot Matrix MAX7219
- Availability: In Stock
Product Description
LED Display Control Module Kit
Description:
1. Single module can drive the an 8 * 8 dot matrix common cathode
2. The module Operating voltage: 5 v
3. Dimensions: length 3.2 cm X 3.2 cm wide X 1.3 cm high
4. Holes with four screws, the diameter of 3 mm
5. Modules with input and output interfaces, support for cascading multiple modules
CODE
<!DOCTYPE html>
<html>
<head>
<title>PHPoC Shield - 8x8 LED Matrix for Arduino</title>
<meta name="viewport" content="width=device-width, initial-scale=0.7, maximum-scale=0.7">
<style>
body { font-family: verdana, Helvetica, Arial, sans-serif, gulim; text-align: center; }
h1 { font-weight: bold; font-size: 25pt; }
h2 { font-weight: bold; font-size: 15pt; }
#remote { margin:0 auto; width: 500px; background: #333; border-radius: 2%; }
.cell {
display: inline-block; width: 45px; height: 45px;
background: #eee; margin: 8px; border-radius: 10%;
}
</style>
<script>
var push_info = [];
var ws;
var push_length = 64;
function init()
{
if(ws == null)
{
ws = new WebSocket("ws://<?echo _SERVER("HTTP_HOST")?>/matrix", "text.phpoc");
document.getElementById("ws_state").innerHTML = "CONNECTING";
ws.onopen = ws_onopen;
ws.onclose = ws_onclose;
ws.onmessage = ws_onmessage;
}
else
ws.close();
for(var push_id = 0; push_id < push_length; push_id++)
{
push_info[push_id] = {state:false, identifier:null};
update_push(push_id, false);
}
var remote = document.getElementById("remote");
remote.addEventListener("touchstart", touch_move);
remote.addEventListener("touchmove", touch_move);
remote.addEventListener("mousedown", mouse_down);
remote.addEventListener("mouseover", mouse_down);
}
function connect_onclick()
{
if(ws == null)
{
var ws_host_addr = "<?echo _SERVER("HTTP_HOST")?>";
//var debug = document.getElementById("debug");
if((navigator.platform.indexOf("Win") != -1) && (ws_host_addr.charAt(0) == "["))
{
// network resource identifier to UNC path name conversion
ws_host_addr = ws_host_addr.replace(/[\[\]]/g, '');
ws_host_addr = ws_host_addr.replace(/:/g, "-");
ws_host_addr += ".ipv6-literal.net";
}
//debug.innerHTML = "<br>" + navigator.platform + " " + ws_host_addr;
ws = new WebSocket("ws://" + ws_host_addr + "/remote_push", "text.phpoc");
document.getElementById("ws_state").innerHTML = "CONNECTING";
ws.onopen = ws_onopen;
ws.onclose = ws_onclose;
ws.onmessage = ws_onmessage;
}
else
ws.close();
}
function ws_onopen()
{
document.getElementById("ws_state").innerHTML = "<font color='blue'>CONNECTED</font>";
document.getElementById("bt_connect").innerHTML = "Disconnect";
for(var push_id = 0; push_id < push_length; push_id++)
update_push(push_id, false);
}
function ws_onclose()
{
document.getElementById("ws_state").innerHTML = "<font color='gray'>CLOSED</font>";
document.getElementById("bt_connect").innerHTML = "Connect";
ws.onopen = null;
ws.onclose = null;
ws.onmessage = null;
ws = null;
for(var push_id = 0; push_id < push_length; push_id++)
update_push(push_id, false);
}
function ws_onmessage(e_msg)
{
e_msg = e_msg || window.event; // MessageEvent
alert("msg : " + e_msg.data);
}
function update_push(push_id, state)
{
var button = document.getElementById(push_id);
var push = push_info[push_id];
if(ws && (ws.readyState == 1))
{
if(state)
button.style.backgroundColor = "#7DFF05";
else
button.style.backgroundColor = "grey";
}
else
button.style.backgroundColor = "#555";
push.state = state;
if(!state)
push.identifier = null;
if(ws && (ws.readyState == 1))
{
if(state)
ws.send(Number(push_id) + "\n"); // on
else
ws.send(100+Number(push_id) + "\n"); // off
}
}
function mouse_down(event)
{
//var debug = document.getElementById("debug");
var push_id = event.target.id;
if(event.changedTouches)
{
for(var touch_id = 0; touch_id < event.changedTouches.length; touch_id++)
{
var touch = event.changedTouches[touch_id];
if(push_id < push_length)
{
var push = push_info[push_id];
if(push.state == false)
{
update_push(push_id, true);
push.identifier = touch.identifier;
// debug.innerHTML += ("+" + push_id + "/" + touch.identifier + " ");
}
else
{
update_push(push_id, false);
}
//debug.innerHTML += (push_id + " ");
}
}
}
else
{
if(push_id < push_length)
{
var push = push_info[push_id];
if(push.state == false)
{
update_push(push_id, true);
//debug.innerHTML += ("+" + push_id + "/" + touch.identifier + " ");
}
else
{
update_push(push_id, false);
}
//debug.innerHTML += (push_id + " ");
}
}
event.preventDefault();
}
var origin_push_id = null;
function touch_move(event)
{
var debug = document.getElementById("debug");
var target = document.elementFromPoint(event.changedTouches[0].pageX, event.changedTouches[0].pageY);
//debug.innerHTML += " " + target.id;
var push_id = target.id;
if(origin_push_id != push_id)
{
if(event.changedTouches)
{
for(var touch_id = 0; touch_id < event.changedTouches.length; touch_id++)
{
var touch = event.changedTouches[touch_id];
if(push_id < push_length)
{
var push = push_info[push_id];
if(push.state == false)
{
update_push(push_id, true);
push.identifier = touch.identifier;
// debug.innerHTML += ("+" + push_id + "/" + touch.identifier + " ");
}
else
{
update_push(push_id, false);
}
//debug.innerHTML += (push_id + " ");
}
}
}
else
{
if(push_id < push_length)
{
var push = push_info[push_id];
if(push.state == false)
{
update_push(push_id, true);
//debug.innerHTML += ("+" + push_id + "/" + touch.identifier + " ");
}
else
{
update_push(push_id, false);
}
//debug.innerHTML += (push_id + " ");
}
}
}
origin_push_id = push_id;
event.preventDefault();
}
window.onload = init;
</script>
</head>
<body>
<h1>8x8 LED Matrix</h1>
<br /><br />
<div id="remote">
<?php
for ($i=0; $i<64; $i++)
echo "<div class='cell' id='" . (string) $i . "'></div>";
?>
</div>
<br /><br />
<h2>WebSocket <font id="ws_state" color="gray">CLOSED</font></h2>
<button id="bt_connect" type="button" onclick="connect_onclick();">Connect</button>
<span id="debug"></span>
</body>
</html>
Related Products
