here's a canvas app!
ansuz
9 years ago
parent
41276fffb5
commit
7c4b334ad3
@ -0,0 +1,73 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta content="text/html; charset=utf-8" http-equiv="content-type"/>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||||
|
<script data-main="main" src="/bower_components/requirejs/require.js"></script>
|
||||||
|
<style>
|
||||||
|
html, body{
|
||||||
|
padding: 0px;
|
||||||
|
margin: 0px;
|
||||||
|
overflow: hidden;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
textarea{
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
max-width: 100%;
|
||||||
|
max-height: 100vh;
|
||||||
|
|
||||||
|
font-size: 18px;
|
||||||
|
background-color: #073642;
|
||||||
|
color: #839496;
|
||||||
|
|
||||||
|
overflow-x: hidden;
|
||||||
|
|
||||||
|
/* disallow textarea resizes */
|
||||||
|
resize: none;
|
||||||
|
}
|
||||||
|
canvas {
|
||||||
|
border: 5px solid black;
|
||||||
|
}
|
||||||
|
#clear {
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
|
#colors {
|
||||||
|
z-index: 100;
|
||||||
|
border: 3px solid black;
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
span.palette {
|
||||||
|
height: 50px;
|
||||||
|
width: 50px;
|
||||||
|
display: inline-block;
|
||||||
|
margin: 5px;
|
||||||
|
border: 2px solid black;
|
||||||
|
}
|
||||||
|
#controls {
|
||||||
|
display: block;
|
||||||
|
position: relative;
|
||||||
|
border: 3px solid black;
|
||||||
|
}
|
||||||
|
#width, #colors {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<canvas id="canvas" width="600" height="600" ></canvas>
|
||||||
|
|
||||||
|
<h2>Welcome to CryptCanvas!</h2>
|
||||||
|
<h3>Zero Knowledge Realtime Collaborative Canvas Editing</h3>
|
||||||
|
|
||||||
|
<div id="controls">
|
||||||
|
<button id="clear">Clear</button>
|
||||||
|
<input id="width" type="number" value="5"></input>
|
||||||
|
<div id="colors"> </div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
@ -0,0 +1,108 @@
|
|||||||
|
require.config({ paths: {
|
||||||
|
'json.sortify': '/bower_components/json.sortify/dist/JSON.sortify'
|
||||||
|
}});
|
||||||
|
|
||||||
|
define([
|
||||||
|
'/api/config?cb=' + Math.random().toString(16).substring(2),
|
||||||
|
'/common/RealtimeTextarea.js',
|
||||||
|
'/common/messages.js',
|
||||||
|
'/common/crypto.js',
|
||||||
|
'/common/TextPatcher.js',
|
||||||
|
'/bower_components/fabric.js/dist/fabric.min.js',
|
||||||
|
'json.sortify',
|
||||||
|
'/bower_components/jquery/dist/jquery.min.js',
|
||||||
|
'/customize/pad.js'
|
||||||
|
], function (Config, Realtime, Messages, Crypto, TextPatcher, Fabric, JSONSortify) {
|
||||||
|
var module = window.APP = { };
|
||||||
|
var $ = module.$ = window.jQuery;
|
||||||
|
var Fabric = module.Fabric = window.fabric;
|
||||||
|
|
||||||
|
$(window).on('hashchange', function() {
|
||||||
|
window.location.reload();
|
||||||
|
});
|
||||||
|
if (window.location.href.indexOf('#') === -1) {
|
||||||
|
window.location.href = window.location.href + '#' + Crypto.genKey();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Initialize Fabric */
|
||||||
|
var canvas = module.canvas = new Fabric.Canvas('canvas');
|
||||||
|
var $canvas = $('canvas');
|
||||||
|
|
||||||
|
var $width = $('#width');
|
||||||
|
var updateBrushWidth = function () {
|
||||||
|
canvas.freeDrawingBrush.width = Number($width.val());
|
||||||
|
};
|
||||||
|
updateBrushWidth();
|
||||||
|
|
||||||
|
$width.on('change', updateBrushWidth);
|
||||||
|
|
||||||
|
var palette = ['red', 'blue', 'green', 'white', 'black', 'purple', 'gray'];
|
||||||
|
var $colors = $('#colors');
|
||||||
|
$colors.html(function (i, val) {
|
||||||
|
return palette.map(function (c) {
|
||||||
|
return "<span class='palette' style='background-color:"+c+"'></span>";
|
||||||
|
}).join("");
|
||||||
|
});
|
||||||
|
|
||||||
|
$('.palette').on('click', function () {
|
||||||
|
var color = $(this).css('background-color');
|
||||||
|
canvas.freeDrawingBrush.color = color;
|
||||||
|
});
|
||||||
|
|
||||||
|
var setEditable = function (bool) {
|
||||||
|
canvas.isDrawingMode = bool;
|
||||||
|
$canvas.css('border-color', bool? 'black': 'red');
|
||||||
|
};
|
||||||
|
|
||||||
|
var key = Crypto.parseKey(window.location.hash.substring(1));
|
||||||
|
var initializing = true;
|
||||||
|
|
||||||
|
var config = module.config = {
|
||||||
|
websocketURL: Config.websocketURL + '_old',
|
||||||
|
userName: Crypto.rand64(8),
|
||||||
|
channel: key.channel,
|
||||||
|
cryptKey: key.cryptKey
|
||||||
|
};
|
||||||
|
|
||||||
|
var onInit = config.onInit = function (info) { };
|
||||||
|
|
||||||
|
var onRemote = config.onRemote = function () {
|
||||||
|
if (initializing) { return; }
|
||||||
|
var userDoc = module.realtime.getUserDoc();
|
||||||
|
canvas.loadFromJSON(userDoc);
|
||||||
|
canvas.renderAll();
|
||||||
|
};
|
||||||
|
|
||||||
|
var onLocal = config.onLocal = function () {
|
||||||
|
if (initializing) { return; }
|
||||||
|
var content = JSONSortify(canvas.toDatalessJSON());
|
||||||
|
module.patchText(content);
|
||||||
|
};
|
||||||
|
|
||||||
|
var onReady = config.onReady = function (info) {
|
||||||
|
var realtime = module.realtime = info.realtime;
|
||||||
|
module.patchText = TextPatcher.create({
|
||||||
|
realtime: realtime
|
||||||
|
});
|
||||||
|
|
||||||
|
setEditable(true);
|
||||||
|
initializing = false;
|
||||||
|
onRemote();
|
||||||
|
};
|
||||||
|
|
||||||
|
var onAbort = config.onAbort = function (info) {
|
||||||
|
setEditable(false);
|
||||||
|
window.alert("Server Connection Lost");
|
||||||
|
};
|
||||||
|
|
||||||
|
var rt = Realtime.start(config);
|
||||||
|
|
||||||
|
canvas.on('mouse:up', onLocal);
|
||||||
|
|
||||||
|
$('#clear').on('click', function () {
|
||||||
|
canvas.clear();
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
});
|
||||||
Loading…
Reference in New Issue