Skip to content

New drawing features #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
bleveque wants to merge 22 commits into
base: master
Choose a base branch
from
Open

New drawing features #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
c516af1
added code to drawing tools to take border offset into account
bleveque Feb 11, 2013
e6eea38
users can input stroke and fill colors for rects and ellipses
bleveque Feb 11, 2013
5b93df7
fixed a position bug in dtools.js and added a Clear All button
bleveque Feb 12, 2013
be88934
Created a new html file (alt.html) allowing for multiple shapes and o…
bleveque Feb 19, 2013
bcd4e54
added pen/erase functionality to alt.html
bleveque Feb 24, 2013
9d41f9a
added basic marquee functionality
bleveque Feb 24, 2013
4b30eeb
marquees with fill colors
bleveque Feb 24, 2013
0791e95
fixed marquee rectangles
bleveque Feb 24, 2013
11e22c4
color options added
bleveque Feb 24, 2013
a0f6000
modified the readme
bleveque Feb 26, 2013
02db1df
get attributes in a string to export
bleveque Feb 26, 2013
c4b54db
put javascript in alt.js, css in alt.css, and added functionality to …
bleveque Feb 27, 2013
4d56038
added ink loading functionality to the inkAuthoring class
bleveque Feb 27, 2013
4cc625e
added an easy way to load Inks (could be helpful for UI)
bleveque Feb 28, 2013
ef01cea
added getters, setters, and pretty simple UI interaction
bleveque Feb 28, 2013
39641e3
to add to code base
bleveque Mar 2, 2013
306ed60
fixed some color parameter bugs
bleveque Mar 2, 2013
e249949
up to date for demo
bleveque Mar 4, 2013
8b39d9e
added relative size functionality
bleveque Mar 19, 2013
0cec3c4
refactored canv --> inkCanv
bleveque Mar 19, 2013
b288017
added resizing and dragging functionality, similar to marquee.html
bleveque Mar 20, 2013
4b335df
fixed path loading
bleveque Mar 23, 2013
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 10 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,4 +11,13 @@ This is a drawing tool I created for LADS, a project I was working on with the B
## Todo
- Allow resizing of shapes
- Better layer manipulation
- More drawing options
- More drawing options

# alt.html README
=================
The alt.html file contains modified drawing tools. Drawing is not done in layers, so arbitrary numbers
of rectangles and ellipses are allowed. Shapes can be dragged and resized (by dragging the lower right corner
of the shape). Similar to the marquee.html file, there is a marquee tool. Marquees can be manipulated in the
same way as rectangles and ellipses. Multiple marquees can be applied, but since marquees completely cover
the canvas, it is impossible to manipulate any but the most recent. The settings for the drawing tools are
provided by the user.
171 changes: 171 additions & 0 deletions alt.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,171 @@
#inkCanv
{
position:absolute;
left:10px;
top:25px;
height:500px;
width:500px;
border:1px solid blue;
z-index:0
}
#clear_button
{
position:absolute;
top:500px;
left:550px;
width:80px;
height:40px;
}
.color_option
{
margin:5px;
width:50px;
}
.color_options
{
position:absolute;
top:530px;
left:700px;
}
#draw_options
{
position:absolute;
top:120px;
left:550px;
}
#ellipse_button
{
position:absolute;
top:20px;
left:690px;
width:80px;
height:40px;
}
#eraser_button
{
position:absolute;
top:70px;
left:550px;
padding-top:4px;
padding-left:3px;
width:40px;
height:40px;
}
#info_panel
{
position:absolute;
top:150px;
left:960px;
}
#update_info_panel
{
position:absolute;
top:210px;
left:960px;
}
#ink_to_load
{
position:absolute;
top:470px;
left:550px;
width:250px;
height:20px;
}
#load_input_ink
{
position:absolute;
top:470px;
left:810px;
width:80px;
height:25px;
}
#manip_canvas_button
{
position:absolute;
top:70px;
left:960px;
padding-top:4px;
padding-left:3px;
width:170px;
height:40px;
}
#manip_marquee_button
{
position:absolute;
top:70px;
left:780px;
padding-top:4px;
padding-left:3px;
width:170px;
height:40px;
}
#manip_shapes_button
{
position:absolute;
top:70px;
left:600px;
padding-top:4px;
padding-left:3px;
width:170px;
height:40px;
}
#marquee_button
{
position:absolute;
top:20px;
left:780px;
width:80px;
height:40px;
}
#mode_div
{
position:absolute;
top:550px;
left:400px;
}
.options
{
position:absolute;
top:600px;
left:600px;
}
#pen_button
{
position:absolute;
top:20px;
left:550px;
padding-top:4px;
padding-left:3px;
width:40px;
height:40px;
}
#rect_button
{
position:absolute;
top:20px;
left:600px;
width:80px;
height:40px;
}
#show_datastring_button
{
position:absolute;
top:420px;
left:550px;
width:80px;
height:40px;
}
#test_layers_div
{
position:absolute;
top:580px;
left:20px;
}
#toggle_marquees_button
{
position:absolute;
top:20px;
left:870px;
width:80px;
height:40px;
}
108 changes: 108 additions & 0 deletions alt.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,108 @@
<!DOCTYPE html>
<html lang="en">
<title>Drawing Tool</title>
<head>
<meta charset="utf-8">
<script src="jquery.js"></script>
<script src="raphael.js"></script>
<script src="jquery-ui/js/jquery-ui-1.8.18.custom.min.js"></script>
<script src="alt2.js"></script>
<link rel="stylesheet" type="text/css" href="alt.css" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
</head>

<body>
<div id="inkCanv"></div>

<div id="info_panel"></div>
<div id="update_info_panel"></div>

<button id="pen_button" class="tool_button" type="button"
onclick="set_mode(1)">pen</button>

<button id="rect_button" class="tool_button" type="button"
onclick="add_rectangle()">+ rect</button>

<button id="ellipse_button" class="tool_button" type="button"
onclick="add_ellipse()">+ ellipse</button>

<button id="marquee_button" class="tool_button" type="button"
onclick="add_marquee()">+ marquee</button>

<button id="toggle_marquees_button" class="tool_button" type="button"
onclick="toggle_marquees()">toggle marquees</button>


<button id="manip_shapes_button" class="tool_button" type="button"
onclick="set_mode(0)">manipulate shapes</button>

<button id="manip_marquee_button" class="tool_button" type="button"
onclick="set_mode(3)">manipulate marquee</button>

<button id="eraser_button" class="tool_button" type="button"
onclick="set_mode(2)">erase</button>

<button id="manip_canvas_button" class="tool_button" type="button"
onclick="manipCanvas()">manipulate canvas</button>

<div id="draw_options">
Pen color:
<input id="pen_color" class="color_input" type="text" onchange="iA.updatePenColor('pen_color')"
value="000000" />
<br />
Pen opacity:
<input id="pen_opacity" class="color_input" type="text" onchange="iA.updatePenOpacity('pen_opacity')"
value="1" />
<br />
Pen width:
<input id="pen_width" class="color_input" type="text" onchange="iA.updatePenWidth('pen_width')"
value="10" />
<br />
Eraser width:
<input id="eraser_width" class="color_input" type="text" onchange="iA.updateEraserWidth('eraser_width')"
value="5" />
<br />
Shape stroke width:
<input id="shape_stroke_width" class="color_input" type="text" onchange="iA.updateShapeStrokeWidth('shape_stroke_width')"
value="3" />
<br />
Shape stroke color:
<input id="shape_stroke_color" class="color_input" type="text" onchange="iA.updateShapeStrokeColor('shape_stroke_color')"
value="000000" />
<br />
Shape stroke opacity:
<input id="shape_stroke_opacity" class="color_input" type="text" onchange="iA.updateShapeStrokeOpacity('shape_stroke_opacity')"
value="1" />
<br />
Shape fill color:
<input id="shape_fill_color" class="color_input" type="text" onchange="iA.updateShapeFillColor('shape_fill_color')"
value="ffff00" />
<br />
Shape fill opacity:
<input id="shape_fill_opacity" class="color_input" type="text" onchange="iA.updateShapeFillOpacity('shape_fill_opacity')"
value="0" />
<br />
Marquee fill:
<input id="marq_color" class="color_input" type="text" onchange="iA.updateMarqueeColor('marq_color')"
value="222222" />
<br />
Marquee opacity:
<input id="marq_opacity" class="color_input" type="text" onchange="iA.updateMarqueeOpacity('marq_opacity')"
value=".8" />
</div>

<div id="mode_div">mode: shapes</div>

<button id="show_datastring_button" type="button"
onclick='update_datastring()'>Show Data</button>

<input id="ink_to_load" type="text" placeholder="paste ink data string here" />
<button id="load_input_ink" type="button"
onclick='load_ink()'>Load Ink</button>

<button id="clear_button" type="button"
onclick='remove_all()'>Clear All</button>

<div id="test_layers_div"><div>
</body>
</html>
Loading