PDA

View Full Version : drawing application



mido911
12-27-2010, 06:22 PM
I need to create an application in javascript for drawing flowcharts can anybody help?

djr33
12-27-2010, 09:42 PM
Javascript can't create an "application" because it isn't possible to save anything-- there's no way to have an "export" function or save it to a database. If you involve a serverside language like PHP you could do this. If you just need the interface it's possible, but might become complex.
Someone may have some advice for you, but if you don't know where to start and want someone to create this for you, you will need to repost this as a paid request because this is a major project. We're happy to help for free, but doing an entire project is beyond that.

Also, please post more details. Flowcharts could be very simple or very complex, so what are your needs? Do you have an example? A website? Some code already?

mido911
12-28-2010, 05:16 AM
the application will be some what like this site http://www.lucidchart.com/documents/demo/4d19714e-5b40-4a2e-964b-17d60afcbe04

It will not contain all its features only some features like:

1.drag and drop
2. undo,redo,copy,cut,and paste
3. draw line
4.group and ungrouping
5.zoomin and zoomout
6.save

other functionalities I will disregard but don't know how I can achieve that need help.

mido911
12-28-2010, 08:07 PM
hello again I have achieved some of the functionalities need your help in the zoom part



<!doctype html>
<html>
<head>
<title>Testing</title>

<meta charset="utf-8">
<script type="text/javascript" src="js/jquery-1.4.4.js"></script>
<script type="text/javascript" src="js/jquery.ui.core.js"></script>
<script type="text/javascript" src="js/jquery.ui.widget.js"></script>
<link href="css/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="js/jquery.ui.mouse.js"></script>
<script type="text/javascript" src="js/jquery.ui.draggable.js"></script>
<script type="text/javascript" src="js/jquery.ui.droppable.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>

<link rel="stylesheet" type="text/css" href="stylesheets/style.css" media="all" />

<script type="text/javascript">


$(document).ready(function(){


//Counter
counter = 0;
//Make element draggable
$(".drag").draggable({
helper:'clone',
containment: 'frame',

//When first dragged
stop:function(ev, ui) {
var pos=$(ui.helper).offset();
objName = "#clonediv"+counter
$(objName).css({"left":pos.left,"top":pos.top});
$(objName).removeClass("drag");


//When an existiung object is dragged
$(objName).draggable({
containment: 'parent',
stop:function(ev, ui) {
var pos=$(ui.helper).offset();
//console.log($(this).attr("id"));
//console.log(pos.left)
//console.log(pos.top)
}
});
}
});
//Make element droppable
$("#frame").droppable({
drop: function(ev, ui) {
if (ui.helper.attr('id').search(/drag[0-9]/) != -1){
counter++;
var element=$(ui.draggable).clone();
element.addClass("tempclass");
$(this).append(element);
$(".tempclass").attr("id","clonediv"+counter);
$("#clonediv"+counter).removeClass("tempclass");

//Get the dynamically item id
draggedNumber = ui.helper.attr('id').search(/drag([0-9])/)
itemDragged = "dragged" + RegExp.$1
//console.log(itemDragged)

$("#clonediv"+counter).addClass(itemDragged);
}
}
});





});

</script>
<script>
function loadCanvas() {
var canvas = document.getElementById('canvas');
if(canvas.getContext) {
var context = canvas.getContext('2d');
for (var x = 0; x <= 500; x += 10) {
context.moveTo(x, 0);
context.lineTo(x, 550);
}
for (var y = 0; y <= 550; y += 10) {
context.moveTo(0, y);
context.lineTo(500, y);
}
context.strokeStyle = "#eee";
context.stroke();

context.beginPath();
for (var x = 0; x <= 500; x += 50) {
context.moveTo(x, 0);
context.lineTo(x, 550);
}
for (var y = 0; y <= 550; y += 50) {
context.moveTo(0, y);
context.lineTo(500, y);
}

context.strokeStyle = "#e1e1e1";
context.stroke();
} else {
document.getElementById('canvas').style.display = 'none';
document.getElementById('no-canvas').style.display = 'block';
}


}
</script>


</head>

<body onload="loadCanvas()">

<div id="wrapper">
<div id="options">
<div id="drag1" class="drag"></div> <!-- end of drag1 -->
<div id="drag2" class="drag"></div> <!-- end of drag2 -->
<div id="drag3" class="drag"></div> <!-- end of drag3 -->
<div id="drag4" class="drag"></div> <!-- end of drag4 -->

<div id="drag5" class="drag"></div> <!-- end of drag5 -->
<div id="drag6" class="drag"></div> <!-- end of drag6 -->
</div><!-- end of options -->
<div id="frame">
<canvas id="canvas" width="500" height="550"></canvas>

</div><!-- end of frame -->
</div><!-- end of wrapper -->






</body>
</html>