j5-rc-receiver
Version:
Nintendo RC Receiver component class plugin for Johnny-Five
150 lines (134 loc) • 3.31 kB
HTML
<html>
<head>
<script src="/socket.io/socket.io.js"></script>
<style>
body {
margin: 0px;
width: 100%;
height: 100%;
background-color: rgb(255, 255, 246);
}
canvas#canvas {
cursor: none;
position: absolute;
top: 64px;
left: 8px;
border: 8px solid gray;
}
.button {
height: 48px;
width: 48px;
position: absolute;
top: 8px;
font-family: sans-serif;
font-size: 24px;
background: rgba(50, 50, 50, 0.9);
color: white;
cursor: pointer;
line-height: 48px;
text-align: center;
}
.button img {
opacity: 0.4;
margin-top: 13px;
width: 24px;
height: 24px;
}
.button img:hover {
opacity: 1;
}
.noselect {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#save {
left: 8px;
}
#clear {
left: 64px;
}
#eraser {
left: 120px;
display: none;
}
</style>
</head>
<body>
<!-- Canvas -->
<canvas id="canvas" class="noselect" width="800" height="700"></canvas>
<!-- Buttons -->
<div id="eraser" class="button noselect"><img src="img/eraser31-white.png"></div>
<div id="clear" class="button noselect"><img src="img/trash29-white.png"></div>
<div id="save" class="button noselect"><img src="img/save8-white.png"></div>
<!--
Icons made by Dave Gandy http://www.flaticon.com/authors/dave-gandy
Licensed by http://creativecommons.org/licenses/by/3.0/, CC BY 3.0
-->
</body>
<script src="ploma.js"></script>
<script>
// This program is a derivative work, originating here:
// https://github.com/evhan55/ploma/blob/master/index.html
;
window.onload = function() {
// Be sure to change this domain accordingly!
// For example, it might be
//
// - http://edison.local:8080 (on Intel Edison)
// -
//
var socket = io.connect("http://127.0.0.1:8080");
var isDrawing = false;
var point = { x: null, y: null };
var offset = { x: -100, y: -100 };
var save = document.getElementById("save");
var clear = document.getElementById("clear");
var canvas = document.getElementById("canvas");
var ploma = new Ploma(canvas);
ploma.clear();
// UI event handlers
save.onclick = function(e) {
window.open(canvas.toDataURL());
};
clear.onclick = function(e) {
ploma.clear();
};
// Drawing from socket data events
socket.on("touch:down", function(data) {
isDrawing = true;
ploma.beginStroke(
data.x + offset.x,
data.y + offset.y,
1
);
});
socket.on("touch:move", function(data) {
if (!isDrawing) {
return;
}
if (point.x !== data.x || point.y !== data.y) {
ploma.extendStroke(
data.x + offset.x,
data.y + offset.y,
1
);
}
point.x = data.x;
point.y = data.y;
});
socket.on("touch:up", function(data) {
isDrawing = false;
ploma.endStroke(
data.x + offset.x,
data.y + offset.y,
1
);
});
};
</script>
</html>