Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Comparing changes

Choose two branches to see what's changed or to start a new pull request. If you need to, you can also compare across forks.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also compare across forks.
base fork: peterjm/web-scratchings
base: 56c114001c
...
head fork: peterjm/web-scratchings
compare: 9ba857ea7b
Checking mergeability… Don't worry, you can still create the pull request.
  • 5 commits
  • 3 files changed
  • 0 commit comments
  • 1 contributor
Showing with 59 additions and 30 deletions.
  1. +6 −1 lineset.js
  2. +43 −25 views/drawing.js.ejs
  3. +10 −4 web.js
View
7 lineset.js
@@ -36,7 +36,7 @@ LineSet.prototype.append = function(vals) {
that.clear_line();
}
else {
- that.redis.rpush(that.key, vals);
+ that.redis.rpush(that.key, vals, LineSet.printError);
}
return this;
};
@@ -73,5 +73,10 @@ LineSet.all = function(n, redis, callback) {
callback(linesets);
});
};
+LineSet.printError = function(err, reply) {
+ if (err) {
+ console.log("LineSet error: "+err);
+ }
+};
exports.LineSet = LineSet;
View
68 views/drawing.js.ejs
@@ -1,19 +1,23 @@
+(function($){
+
var connection,
- context,
oldMouseX = 0,
oldMouseY = 0,
old_points = [],
current_points = [],
new_points = [],
config,
- canvas;
+ canvas,
+ context,
+ old_canvas,
+ old_context;
function to_url(path) {
return 'http://<%= host %>/' + path;
}
function setup() {
- insert_canvas();
+ insert_canvases();
$.ajaxSetup({
xhrFields: { withCredentials: true }
@@ -22,7 +26,7 @@ function setup() {
$.getJSON(to_url('config.json'), function(data) {
if (data) {
config = data;
- setup_canvas();
+ setup_canvases();
$.getJSON(to_url('lines.json'), function(data) {
if (data) {
@@ -40,7 +44,7 @@ function setup() {
var mouseX = event.clientX - canvas.offsetLeft,
mouseY = event.clientY - canvas.offsetTop;
- draw_line(oldMouseX, oldMouseY, mouseX, mouseY, config.current_thickness);
+ draw_line(oldMouseX, oldMouseY, mouseX, mouseY, config.current_thickness, context);
current_points.push(mouseX);
current_points.push(mouseY);
@@ -52,7 +56,7 @@ function setup() {
});
$(window).resize(function(event) {
- setup_canvas();
+ setup_canvases();
redraw();
});
@@ -60,57 +64,69 @@ function setup() {
}
function redraw() {
- draw_all_lines(current_points, config.current_thickness);
+ draw_all_lines(current_points, config.current_thickness, context);
var thickness = config.old_thickness;
for(var i = 0; i < old_points.length; i++) {
if (thickness <= 0) { break; }
- draw_all_lines(old_points[i], thickness);
+ draw_all_lines(old_points[i], thickness, old_context);
thickness -= config.decay;
}
}
-function draw_all_lines(points, thickness) {
+function draw_all_lines(points, thickness, ctxt) {
if (!points.length) { return; }
oldX = points[0];
oldY = points[1];
for(var i = 0; i < points.length; i+=2) {
x = points[i], y = points[i+1]
- draw_line(oldX, oldY, x, y, thickness);
+ draw_line(oldX, oldY, x, y, thickness, ctxt);
oldX = x, oldY = y;
}
}
-function draw_line(x1, y1, x2, y2, thickness) {
+function draw_line(x1, y1, x2, y2, thickness, ctxt) {
if (!valid(x1) || !valid(y1) || !valid(x2) || !valid(y2)) { return; }
var dx = x2 - x1,
dy = y2 - y1,
d = Math.sqrt(dx * dx + dy * dy) * 0.02;
- context.lineWidth = thickness;
- context.strokeStyle = 'rgba(0, 0, 0, ' + (0.7 - d) + ')';
- context.beginPath();
- context.moveTo(x1, y1);
- context.lineTo(x2, y2);
- context.closePath();
- context.stroke();
+ ctxt.lineWidth = thickness;
+ ctxt.strokeStyle = 'rgba(0, 0, 0, ' + (0.7 - d) + ')';
+ ctxt.beginPath();
+ ctxt.moveTo(x1, y1);
+ ctxt.lineTo(x2, y2);
+ ctxt.closePath();
+ ctxt.stroke();
+}
+
+function insert_canvases() {
+ canvas = insert_canvas('canvas');
+ old_canvas = insert_canvas('old-canvas', function($canvas){
+ $canvas.css({'z-index': '-1'});
+ });
}
-function insert_canvas() {
- var $canvas = $('<canvas id="canvas"></canvas>');
+function insert_canvas(id, callback) {
+ var $canvas = $('<canvas id="'+id+'"></canvas>');
$('body').append($canvas);
$($canvas).css({ position: 'fixed', top: 0, left: 0, 'pointer-events': 'none' });
+ if (callback) { callback($canvas); }
- canvas = document.getElementById('canvas');
+ return document.getElementById(id);
}
-function setup_canvas() {
- canvas.width = window.innerWidth;
- canvas.height = window.innerHeight;
+function setup_canvases() {
+ context = setup_canvas(canvas);
+ old_context = setup_canvas(old_canvas);
+}
- context = canvas.getContext('2d');
+function setup_canvas(c) {
+ c.width = window.innerWidth;
+ c.height = window.innerHeight;
+ return c.getContext('2d');
}
function upload_points() {
@@ -129,3 +145,5 @@ function valid(p) {
}
$(function() { setup(); });
+
+})(jQuery);
View
14 web.js
@@ -6,10 +6,16 @@ var ALLOWED_CORS_ORIGINS = [
'http://prtest.quietbabylon.com'
];
var MAX_LINES = 100;
-
var redis;
+
function setup_redis(redis_url) {
- redis = require('redis-url').createClient(redis_url);
+ return require('redis-url').createClient(redis_url);
+ redis.on("error", function(err) {
+ console.log("Redis Error: "+err)
+ }).on("reply error", function(err) {
+ console.log("Redis Reply Error: "+err)
+ });
+ return redis;
}
function current_line_set(session) {
@@ -28,7 +34,7 @@ app.use(express.methodOverride());
app.use(express.cookieParser());
app.configure('development', function() {
- setup_redis('redis://localhost:6379');
+ redis = setup_redis('redis://localhost:6379');
app.use(express.static(__dirname + '/public'));
app.use(express.errorHandler({ dumpExceptions: true, showStack: true }));
@@ -43,7 +49,7 @@ app.configure('development', function() {
});
app.configure('production', function() {
- setup_redis(process.env.REDISTOGO_URL);
+ redis = setup_redis(process.env.REDISTOGO_URL);
var oneYear = 365 * 24 * 3600 * 1000; // milliseconds
app.use(express.static(__dirname + '/public', { maxAge: oneYear }));

No commit comments for this range

Something went wrong with that request. Please try again.