Integrated drawing software.

[xyzrpg]

I request, or at least inquire about the possibility of, a plugin that integrates drawing software into post writing.

For example, clicking an 'add drawing' button, similar to the 'add poll' or 'add attachment' buttons-- then opening a popup with simple drawing tools and a color selector. Not necessarily something fancy.

A possible feature would be the ability to specify what boards the tool is available in.

Is this a possibility? Is there any interest in such a thing? I have no experience scripting and do not have the time right now-- but it would be useful to me, and potentially others.

[Wormopolis]

wouldnt making a drawing in Paint and then attaching it to the post not be the same thing?

[xyzrpg]

It would be the same thing, just with an added step. I do not deny this.

[Wormopolis]

ok. just making sure you dont get your hopes too high on this one. the magnitude of a project like this is outstanding.. and if someone does attempt to make something like this (ignoring the fact that you can attach a paint file to a post), it likely wont be something they do for free. just let that stew for a bit.

[xyzrpg]

My hopes would normally be tarnished, but I enjoy stew.

[Wormopolis]

who doesnt?

[Todge]

So long as it's chicken or vegetable, I do..

[Peter]

I know this request is nearly a month old, but I was browsing the board to see if there were any good ideas, and this was one of them.

So, I created a quick prototype just to see how well it would work.  Screen shots show you my results so far.

A long way from being completed, as I have to add some drawing tools, colours etc.

[Wormopolis]

Well Peter outshines us all...

[Peter]

May 7, 2013 11:46:39 GMT -8 Wormopolis said:

Well Peter outshines us all...

It's actually pretty simple, here's the code so you can see how easy it is (note: it doesn't add to the message automatically yet, I tested the base64 string manually in a post)...

// Live Drawing prototype
// Not finished, or optimised.
// http://flashcanvas.net << May look at it so we we can support IE

$(function(){
(function(){

return {

canvas: null,
context: null,
data_image: new Image(),
data: "",

mouse: {
x: -1,
y: -1
},

started: false,

images: {},

init: function(){
this.setup();

if(yootil.location.check.posting()){
this.create_canvas();
this.add_drawing_button();
}

if(yootil.location.check.thread()){
this.convert_canvas_data();
}
},

setup: function(){
var plugin = proboards.plugin.get("pixeldepth_live_drawing");
var settings = (plugin && plugin.settings)? plugin.settings : false;

if(settings){
this.images = plugin.images;
}
},

create_canvas: function(){
this.canvas = $("<canvas height='235' width='520px' style='border: 1px solid #000' id='pd_canvas'></canvas>");
this.context = this.canvas.get(0).getContext("2d");
this.context.save();
},

add_drawing_button: function(){
var self = this;

$(".controls").find(".bbcode-editor, .visual-editor").ready(function(){
var img = $("<img />").attr({
src: self.images.live_drawing,
title: "Draw A Picture"
}).click($.proxy(self.show_drawing_window, self));

$(".controls").find(".bbcode-editor, .visual-editor").find(".group:last ul:last").append($("<li>").addClass("button").append(img));
});
},

show_drawing_window: function(){
var self = this;
var draw_wrapper = $("<div title='Draw A Picture' style='text-align: center'></div>").append($(this.canvas));

$(draw_wrapper).dialog({
modal: true,
height: 350,
width: 600,
resizable: false,
draggable: false,
dialogClass: "live_drawing_dialog",
open: $.proxy(this.init_canvas, this),

buttons: {

Cancel: function(){
self.context.setTransform(1, 0, 0, 1, 0, 0);
self.context.clearRect(0, 0, self.canvas.get(0).width, self.canvas.get(0).height);
self.context.restore();
$(this).dialog("close");
},

"Add To Post": function(){
console.log(self.canvas.get(0).toDataURL());
$(this).dialog("close");
}

}

}).attr("title", "Draw A Picture");
},

init_canvas: function(){
var self = this;

this.canvas.mousedown(function(e){
self.context.beginPath();
self.context.moveTo(self.mouse.x, self.mouse.y);
self.started = true;
});

this.canvas.mouseup(function(e){
self.started = false;
});

this.canvas.mousemove(function(e){
self.mouse.x = (e.pageX - self.canvas.offset().left);
self.mouse.y = (e.pageY - self.canvas.offset().top);

if(self.started){
self.context.lineTo(self.mouse.x, self.mouse.y);
self.context.stroke();
}
});
},

convert_canvas_data: function(){
var datas = $("td.content div.message div[title*=data\\:image]");

datas.each(function(){
var data = this.title.split(";base64,")[1];

// Reg. found on StackOverflow to check for a base64 encoded string

if(data.match(/^([0-9a-zA-Z+/]{4})*(([0-9a-zA-Z+/]{2}==)|([0-9a-zA-Z+/]{3}=))?$/)){
var img = document.createElement("img");

img.src = this.title;

this.title = "";
this.appendChild(img);
}
});
}

};

})().init();
});

[Peter]

support.proboards.com/thread/463190/live-drawing-prototype