Paint act: Difference between revisions

From OLPC
Jump to navigation Jump to search
No edit summary
 
(26 intermediate revisions by 18 users not shown)
Line 1: Line 1:
{{Activity migrated to sl.o
| download=http://activities.sugarlabs.org/en-US/sugar/addon/4082
| git=http://git.sugarlabs.org/projects/paint
| homepage=http://wiki.sugarlabs.org/go/Activities/Paint
}}

{{Translations}}
{{Translations}}
{{Olpcboxtop|toptext=[[{{PAGENAME}}|Draw]]}}
{{Olpcboxtop|toptext=[[{{PAGENAME}}|Draw]]}}
Line 10: Line 16:
{{Olpcboxbottom}}
{{Olpcboxbottom}}


== Draw: A collaborative space for creation ==
== Paint: A collaborative space for creation ==


[[Image:Oficina.jpg|200px|right|User interface]]
[[Image:Oficina.jpg|200px|right|User interface]]


'''Draw''' is being developed and adapted to the XO using Python for the team [[NATE-LSI]] (Integrated Systems Laboratory), in the [[Escola Politécnica|Polytechnical School]] at [[Universidade de São Paulo|University of São Paulo]], Brazil.
'''Oficina''' (the Paint Activity) was developed and adapted to the XO using Python for the team [[NATE-LSI]] (Integrated Systems Laboratory), in the [[Escola Politécnica|Polytechnical School]] at [[Universidade de São Paulo|University of São Paulo]], Brazil.

Its interface already is translated into diverse languages: Portuguese, English, French, Spanish, German, Chinese, Korean, Arab and Greek.


Its interface has been translated into many languages: Portuguese, English, French, Spanish, German, Chinese, Korean, Arabic and Greek.


==Goals==
==Goals==


[[Image:activity_paint_tools.jpg|right|200px|thumb|Draw activity]]
[[Image:activity_paint_tools.jpg|right|200px|thumb|Paint activity UI mockup]]


The Draw activity will provide a canvas for an individual or a group of children to express themselves creatively through drawing.
The Draw activity will provide a canvas for an individual or a group of children to express themselves creatively through drawing.
Line 30: Line 35:
'''Drawing'''
'''Drawing'''


The paintbrush and the pencil will be the primary freeform drawing tools. The eraser will also come in handy as well. Brush and eraser sizes, shapes, and parameters may be adjusted via their secondary palettes.
The paintbrush, pencil, and eraser are the primary freeform drawing tools. The sizes and shapes of the brush and eraser may be adjusted via their secondary palette, which is shown by hovering your mouse on the tool icon.


''''Selection''''
''''Selection''''


Selecting portions of the canvas with the rectangular marquee tool allows you to move and delete rectangular portions of your painting.
The Draw activity will support various selection styles. The simplest of these are the square and circular selection tools, whose behavior follows from their description. A unique approach to freeform selection will take the place of both the lasso and the polygon select tools we are familiar with. While in freeform selection mode, single clicks will create new points in the freeform shape, just as a polygon selection tool would. However, when the mouse button is held down, a freeform curve will be created. These two techniques can be used independently or in conjunction for creating complex selections shapes. Finally, we will support a very simple smart selection tool, akin to the magic wand in Photoshop.


'''Shapes'''
'''Shapes'''


The Draw activity escalates the idea of shapes to a level that most other drawing applications don't. Instead of a supporting a few shapes hidden among the other tools, the Draw activity will have a toolbar dedicated to them. By clicking and dragging, a child can create an instance of the currently selected shape at any size she chooses. The interactive placement system makes the shape too even more powerful. Additionally, each shape will have a secondary palette which allows various parameters to be set, such as the number of edges on a polygon, the number of points on a star, or the angles of a triangle.
The Paint Activity has a toolbar dedicated to shape drawing. By clicking and dragging, you can create an instance of the currently selected shape and expand it to the size of your choosing. The interactive placement system makes the shape too even more powerful. Each shape has a secondary palette which allows various parameters to be set, such as the number of edges on a polygon, the number of points on a star, or the angles of a triangle.


'''Text'''
'''Text'''


Simple text support will allow children to include typographic language within their drawings. This support will include fonts, colors, size, and placement of the type.
Simple text support allows you to include typographic language within your drawing.


'''Image'''
'''Image'''


From within the "Image" tab, you may import images from the Journal into your drawing. Clicking the "Insert Image" icon on the left, you can choose an item from your Journal to put into Paint.
Children may import images into their drawing as well. They will have the option to paste an image and place it interactively, or turn the image into a stamp. As a stamp, it is effectively a brush that they can paint with as they please.

===Interactive Placement===

Although the Draw activity will be in raster format in its early iterations, it will have a powerful interactive placement system which prevents this from limiting creative output. Whenever a shape, image, textbox, or pasted graphic is created, it will live within a layer above the drawing. Here it will sport manipulation handles, allowing the child to resize it, rotate it, and move it around before committing it (destructively) to the raster image below. This second step will become part of the undo stack, so that the child can easily pluck the shape back out of the image and reposition it without having to draw it again.

To understand the usefulness of this feature, consider attempting to draw an ice cream cone. You can select a triangle shape, but by default the triangle is equilateral and sits on its base. With interactive placement mode, a child may create the triangle, rotate it 180 degrees, stretch it vertically, and then proceed to draw some spherical scoops of ice cream on top.

===Tablet Support===

The resistive tablet feature distinguishes our laptops from many others. We aim to take full advantage of this within the Draw activity. A single touch to the tablet area with a stylus will reveal an outline on screen mapping the tablet to the drawing canvas with absolute positioning. This outline will remain visible while drawing in order to provide visual feedback. Furthermore, anytime the stylus touches the tablet (but hasn't yet made a stroke), the cursor can be drawn at the location to indicate where the drawing will begin when the stylus begins moving; if the stylus leaves the tablet without moving, no mark will be made. When the stylus leaves the tablet, the outline will dim, becoming mostly transparent, allowing the child to view their new strokes as part of the bigger whole while hinting at position so that she may resume drawing again at the point she desires. After a period of time without any tablet input, this guide will disappear completely, eliminating the distraction when the trackpad (or mouse) resumes control.

While still using the stylus, the child will be able to scroll the underlying canvas (as opposed to making marks on it) by holding down the grab key and dragging the canvas with the motion of the stylus. By allowing the field to scroll beyond the edges of the canvas, the child may place any portion of their painting beneath the tablet outline without ever needing to reposition the outline itself, which will remain fixed in the middle of the screen. This approach is taken to prevent the need to move both the canvas and the tablet outline independently, which couldn't be accomplished naturally without requiring the child to switch between stylus and finger repetitively while working.

For more information about tablet support, see [[PenTablet support]]. For a discussion of other proposed user interfaces for drawing, see [[PenTablet UI]].

===Behavior Brushes, Shapes, and Filters===

Behavior tools are an extensible feature which allow children to create and share their own individual brushes, shapes and filters. When viewing a behavior palette, a child will see the name of the selected behavior, its parameters, and a script window that defines the behavior in code. She may adjust the parameters as with any other tool, but she may also add new parameters, edit the script, or create new behaviors from scratch. The activity will automatically expose the appropriate events for the various behaviors (such as start, draw, stop - roughly mapping to mouseDown, enterFrame, mouseUp), including timer events for behaviors that require continuous input. In addition to these events, a list of exposed properties (such as mouse position and velocity) and methods (such as drawing tools) would also be available.

As an example, a "Mirror" behavior may be a standard behavior brush. It might have a parameters defining the angle at which to mirror. The start event would then set up the axis at the specified angle through the cursor's position. Subsequent draw events would then draw lines as usual, but also mirror them across this axis. This would make drawing all nature of symmetric shapes a breeze.

These behaviors would be treated as objects within the Journal, and would be passed around and modified. This feature will not make it into the early iterations of Draw, but we hope to add it later.

===Collaboration===

===Visual Design===


====Media====
====Media====
Line 79: Line 58:
!style="background:#cccccc;"|Document!!style="background:#cccccc;"|Description
!style="background:#cccccc;"|Document!!style="background:#cccccc;"|Description
|-
|-
|[[Media:activity_paint.ai.zip|Activity Mockup (196KB)]] [[:image:activity_paint.ai.zip| <font color='gray'>history</font>]]||Adobe Illustrator file containing mockups for each toolbar
|[[Media:activity_paint.ai.zip|Activity Mockup (196KB)]]| <font color='gray'>history</font>]]||Adobe Illustrator file containing mockups for each toolbar
|}
|}


<br clear='all'>
<br clear='all'>


====Screenshots====
====UI Mockups====


{|style="border: solid 1px gray; margin: 1em auto 1em; auto"
{|style="border: solid 1px gray; margin: 1em auto 1em; auto"
Line 100: Line 79:
[[Image:activity_paint_image.jpg|300px|thumb|center|Manipulating images]]
[[Image:activity_paint_image.jpg|300px|thumb|center|Manipulating images]]
|}
|}



=== Development ===
=== Development ===
Line 108: Line 86:
Old Version:
Old Version:


http://dev.laptop.org/git.do?p=projects/rgbpaint
http://dev.laptop.org/git?p=projects/rgbpaint
no RPMs or other resources
no RPMs or other resources


New Version:
New Version:


http://dev.laptop.org/git.do?p=projects/paint
http://dev.laptop.org/git?p=projects/oficina
no RPMs or other resources
no RPMs or other resources


Line 120: Line 98:




== Tabs ==


The navigation through tabs facilitates the localization of the diverse available tools for category.

Below, there are each tab and the tools that contain.


==== Tab Activity ====

<table border = "1">
<tr>
<td><b>Tool</b></td>
<td><b>Description</b></td>
<td><b>Status</b></td>
</tr>
<tr>
<td>Share</td>
<td></td>
<td><font color="red">Não Implementado</font></td>
</tr>
<tr>
<td>Stop</td>
<td></td>
<td><font color="green">Implementado</font></td>
</tr>
</table>

==== Tab Edit ====

<table border = "1">
<tr>
<td><b>Tool</b></td>
<td><b>Description</b></td>
<td><b>Status</b></td>
</tr>
<tr>
<td>Undo</td>
<td></td>
<td><font color="green">Implementado</font></td>
</tr>
<tr>
<td>Redo</td>
<td></td>
<td><font color="green">Implementado</font></td>
</tr>
<tr>
<td>Copy</td>
<td></td>
<td><font color="green">Implementado</font></td>
</tr>
<tr>
<td>Paste</td>
<td></td>
<td><font color="green">Implementado</font></td>
</tr>
</table>

==== Tab Tools ====


<table border = "1">
<tr>
<td><b>Tool</b></td>
<td><b>Description</b></td>
<td><b>Status</b></td>
</tr>
<tr>
<td>Pencil</td>
<td></td>
<td><font color="green">Implementado</font></td>
</tr>
<tr>
<td>Brush</td>
<td></td>
<td><font color="green">Implementado</font></td>
</tr>
<tr>
<td>Eraser</td>
<td></td>
<td><font color="green">Implementado</font></td>
</tr>
<tr>
<td>Freeform</td>
<td></td>
<td><font color="green">Implementado</font></td>
</tr>
<tr>
<td>Bucket</td>
<td></td>
<td><font color="green">Implementado</font></td>
</tr>
<tr>
<td>Rectangular Marquee</td>
<td></td>
<td><font color="green">Implementado</font></td>
</tr>
</table>

==== Tab Shapes ====

<table border = "1">
<tr>
<td><b>Tool</b></td>
<td><b>Description</b></td>
<td><b>Status</b></td>
</tr>
<tr>
<td>Ellipse</td>
<td></td>
<td><font color="green">Implementado</font></td>
</tr>
<tr>
<td>Rectangle</td>
<td></td>
<td><font color="green">Implementado</font></td>
</tr>
<tr>
<td>Line</td>
<td></td>
<td><font color="green">Implementado</font></td>
</tr>
<tr>
<td>Polygon</td>
<td></td>
<td><font color="yellow">Em Implementação</font></td>
</tr>
<tr>
<td>Parallelogram</td>
<td></td>
<td><font color="green">Implementado</font></td>
</tr>
<tr>
<td>Arrow</td>
<td></td>
<td><font color="green">Implementado</font></td>
</tr>
<tr>
<td>Star</td>
<td></td>
<td><font color="green">Implementado</font></td>
</tr>
<tr>
<td>Trapezoid</td>
<td></td>
<td><font color="green">Implementado</font></td>
</tr>
<tr>
<td>Triangle</td>
<td></td>
<td><font color="green">Implementado</font></td>
</tr>
<tr>
<td>Heart</td>
<td></td>
<td><font color="red">Não Implementado</font></td>
</tr>
</table>

==== Tab Text ====

<table border = "1">
<tr>
<td><b>Tool</b></td>
<td><b>Description</b></td>
<td><b>Status</b></td>
</tr>
<tr>
<td>Type</td>
<td></td>
<td><font color="green">Implementado</font></td>
</tr>
</table>

==== Tab Image ====

<table border = "1">
<tr>
<td><b>Tool</b></td>
<td><b>Description</b></td>
<td><b>Status</b></td>
</tr>
<tr>
<td>Insert Image</td>
<td></td>
<td><font color="green">Implementado</font></td>
</tr>
<tr>
<td>Rotate Left</td>
<td></td>
<td><font color="yellow">Em Implementação</font></td>
</tr>
<tr>
<td>Rotate Right</td>
<td></td>
<td><font color="yellow">Em Implementação</font></td>
</tr>
</table>

==== Tab Effects ====

<table border = "1">
<tr>
<td><b>Tool</b></td>
<td><b>Description</b></td>
<td><b>Status</b></td>
</tr>
<tr>
<td>Grayscale</td>
<td></td>
<td><font color="green">Implementado</font></td>
</tr>
<tr>
<td>Negative</td>
<td></td>
<td><font color="red">Não Implementado</font></td>
</tr>
</table>


== Characteristics ==
== Characteristics ==
Line 344: Line 106:


=== Related Links ===
=== Related Links ===

* [[NATE LSI-USP]]
* [[LSI]]
* [[LSI]]
* [[FACIL]]
* [[FACIL]]
Line 362: Line 124:


[[Category:Software ideas]]
[[Category:Software ideas]]
{{Activity page
[[Category:OLPC Brazil]]
|icon=Image:drawing.svg
|genre=Drawing, Media Creation
|activity group=Activities/G1G1
|short description=The Paint activity will provide a canvas for an individual or a group of children to express themselves creatively through drawing.
|long description=Paint is being developed and adapted to the XO using Python for the team NATE-LSI (Integrated Systems Laboratory), in the Polytechnical School at University of São Paulo, Brazil.
|contact person=User:Alexandremartinazzo <!-- Manu has not contributed with code in Paint -->
|activity source=http://dev.laptop.org/git?p=projects/oficina
|language=Portuguese, English, French, Spanish, German, Chinese, Korean, Arabic, Greek
|language codes=ar, de, el, en, es, fr, ko, pt, zh
|bundle URL=http://dev.laptop.org/~morgan/bundles/other/Paint-23.xo
|activity version=23
|releases=Candidate
|devel status=6. Mature
}}

Latest revision as of 08:20, 24 April 2012

?Sugar icon}}    This activity is now hosted at the Sugar Activity Library.

The information here is likely to be out-of-date. Consult the new pages for "Paint act" first:

  Please copy/paste "{{Translationlist | xx | origlang=en | translated={{{translated}}}}}" (where xx is ISO 639 language code for your translation) to Paint act/translations HowTo [ID# 269984]  +/-  
TST {{{1}}}
Trac print.png Tickets all - active - new
OlpcProject.png Contact: NATE-LSI —Manusheel Gupta, Walter Bender(Advisor), Eben Eliason (UI Design)

see more templates or propose new

Paint: A collaborative space for creation

User interface

Oficina (the Paint Activity) was developed and adapted to the XO using Python for the team NATE-LSI (Integrated Systems Laboratory), in the Polytechnical School at University of São Paulo, Brazil.

Its interface has been translated into many languages: Portuguese, English, French, Spanish, German, Chinese, Korean, Arabic and Greek.

Goals

Paint activity UI mockup

The Draw activity will provide a canvas for an individual or a group of children to express themselves creatively through drawing.


Drawing Tools

Drawing

The paintbrush, pencil, and eraser are the primary freeform drawing tools. The sizes and shapes of the brush and eraser may be adjusted via their secondary palette, which is shown by hovering your mouse on the tool icon.

'Selection'

Selecting portions of the canvas with the rectangular marquee tool allows you to move and delete rectangular portions of your painting.

Shapes

The Paint Activity has a toolbar dedicated to shape drawing. By clicking and dragging, you can create an instance of the currently selected shape and expand it to the size of your choosing. The interactive placement system makes the shape too even more powerful. Each shape has a secondary palette which allows various parameters to be set, such as the number of edges on a polygon, the number of points on a star, or the angles of a triangle.

Text

Simple text support allows you to include typographic language within your drawing.

Image

From within the "Image" tab, you may import images from the Journal into your drawing. Clicking the "Insert Image" icon on the left, you can choose an item from your Journal to put into Paint.

Media

Document Description
Activity Mockup (196KB)| history]] Adobe Illustrator file containing mockups for each toolbar


UI Mockups

Editing commands
Drawing tools
Creating shapes
Inserting text
Manipulating images

Development

Version History

Source

Old Version: 

http://dev.laptop.org/git?p=projects/rgbpaint
no RPMs or other resources

New Version: 

http://dev.laptop.org/git?p=projects/oficina
no RPMs or other resources

Functional Test

Paint_Activity_Test_Plan



Characteristics

  • Through the simultaneous sending of messages, it allows that users draw in set despite in different computers.
  • It allows to integrate drawing and texts in one same physical space.


Related Links

Source Codes and Projects in Development

Activity Summary

Icon: Sugar icon::Image:drawing.svg
Genre: Activity genre::Drawing, Media Creation
Activity group: ,|x|Activity group::x}}
Short description: Short description::The Paint activity will provide a canvas for an individual or a group of children to express themselves creatively through drawing.
Description: Description::Paint is being developed and adapted to the XO using Python for the team NATE-LSI (Integrated Systems Laboratory), in the Polytechnical School at University of São Paulo, Brazil.
Maintainers: ,|x|Contact person::x}}
Repository URL: Source code::http://dev.laptop.org/git?p=projects/oficina
Available languages: ,|x|Available languages::x}}
Available languages (codes): ,|x|Language code::x}}
Pootle URL:
Related projects: Related projects,|x|Related projects::x}}
Contributors: ,|x|Team member::x}}
URL from which to download the latest .xo bundle Activity bundle::http://dev.laptop.org/~morgan/bundles/other/Paint-23.xo
Last tested version number: Activity version::23
The releases with which this version of the activity has been tested. ,|x|Software release::x}}
Development status: Devel status::6. Mature
Ready for testing (development has progressed to the point where testers should try it out): ,|x|Ready for testing::x}}
smoke tested :
test plan available :
test plan executed :
developer response to testing :
Retrieved from "http://wiki.laptop.org/mediawiki/index.php?title=Paint_act&oldid=269984"