Sugar Labs - User contributions [en]

User:Bcjordan/Parasite

2009-03-07T05:26:44Z

Bjordan:

[http://chipx86.github.com/gtkparasite/ Parasite] is a "[http://getfirebug.com/ firebug for gtk]".

:git clone git://github.com/chipx86/gtkparasite.git
:sudo apt-get install autoconf libtool automake make

User:Bcjordan/Parasite

2009-03-07T04:57:32Z

Bjordan: New page: [http://chipx86.github.com/gtkparasite/ Parasite] is a "[http://getfirebug.com/ firebug for gtk]". :git clone git://github.com/chipx86/gtkparasite.git :sudo apt-get install autoconf libto...

[http://chipx86.github.com/gtkparasite/ Parasite] is a "[http://getfirebug.com/ firebug for gtk]".

:git clone git://github.com/chipx86/gtkparasite.git
:sudo apt-get install autoconf libtool automake

Activity Team/How to migrate from OLPC

2009-02-27T22:29:19Z

Bjordan: /* Set up SugarLabs services */ correct link

== Migrate the code ==
* If you are not the author of the activity, '''query''' the author to let them know about the move.
* '''Create''' an account on http://git.sugarlabs.org and '''log in'''. Add your public SSH key to [http://git.sugarlabs.org/account your account].
* '''Create a new project''' (http://git.sugarlabs.org, projects, new). Make your project name lowercase, e.g. pippy, turtleart, paint. Put it in '''category "activities"'''.
* '''Clone''' your activity from [http://dev.laptop.org/git dev.laptop.org].
git clone git://dev.laptop.org/projects/pippy-activity
* '''If''' you want to migrate a non-master branch...
git remote show origin
git checkout -b sucrose-0.82 origin/sucrose-0.82
* '''Push''' to git.sugarlabs.org with something like:
git push gitorious@git.sugarlabs.org:sugar/mainline.git --mirror
* '''Clone''' the project from the new repository in order to be able to push your changes. You'll need to do a git clone into an empty directory, using the same URL you used with your previous push:
git clone gitorious@git.sugarlabs.org:sugar/mainline.git sugar
If you're getting a message saying '''fatal: The remote end hung up unexpectedly''' that probably means that this URL is incorrect.

== Set up SugarLabs services ==
* '''Add''' the pootle user as a committer (from the "add committer" link on the mainline page) and send mail to [[User:SayaminduDasgupta|Sayamindu]] to point pootle to new remote.
* '''Upload a xo bundle''' to [http://addons.sugarlabs.org/ addons.sugarlabs.org]. Be sure to include a couple of screenshots of your activity in action.
* If your activity is part of Fructose, '''upload a .tar.bz2''' to [http://download.sugarlabs.org/ download.sugarlabs.org]. Request a shell account from the [[InfrastructureTeam]] if you don't have one already.
* '''Update the OLPC wiki page''' for the Activity, noting the migration. Use the [http://wiki.laptop.org/go/Template:Migrated_to_sl.o Migrated to sl.o] template.
* '''Change sugar-jhbuild''' to point to the new repository if this activity was included in sugar-jhbuild (enter a ticket in http://dev.sugarlabs.org if you have no access).
* Ask an [[ActivityTeam/Contacts|ActivityTeam Coordinator]] to create a '''Trac component''' for your activity.

== Notify the community ==
* '''Notify''' [http://lists.sugarlabs.org/listinfo/sugar-devel sugar-devel] and [http://lists.laptop.org/listinfo/devel OLPC devel] about the move.
* Transfer or resolve '''existing tickets''' related to the code in the [http://dev.laptop.org/query?status=assigned&status=new&status=reopened&component=acoustic-measure-activity&order=priority&col=id&col=summary&col=status&col=owner&col=type&col=milestone OLPC Trac].
* Update pages on wiki.laptop.org that contain '''stale links''' to the OLPC repo and latest bundle. (e.g. Activities/All , the OBX box on the activity homepage, etc.) See [[olpc:Maintaining activity web information#Migrating activities to SugarLabs]]
* '''Tag''' the activity at [[ActivityTeam/ActivityStatus]] as '''migrated'''.

[[Category:Activity]]

Activity Team/How to migrate from OLPC

2009-01-14T02:36:10Z

Bjordan: trac link emphasizing choice of activity component

== Migrating activities from dev.laptop.org ==

* If you are not the author of the activity, '''query''' the author to let them know about the move.
* '''Create''' an account on http://git.sugarlabs.org and '''log in'''. Add your public SSH key to [http://git.sugarlabs.org/account your account].
* '''[http://git.sugarlabs.org/projects/new Create a new project]''' (http://git.sugarlabs.org, projects, new). Make your project name lowercase, e.g. pippy, turtleart, paint. Put it in '''category "activities"'''.
* '''Clone''' your activity from [http://dev.laptop.org/git dev.laptop.org].
git-clone git://dev.laptop.org/projects/pippy-activity
* '''If''' you want to migrate a non-master branch...
git remote show origin
git checkout -b sucrose-0.82 origin/sucrose-0.82
* '''Push''' to git.sugarlabs.org with something like:

git push gitorious@git.sugarlabs.org:sugar/mainline.git --mirror

* '''Add''' the pootle user as a committer (from the "add committer" link on the mainline page) and send mail to [[User:SayaminduDasgupta|Sayamindu]] to point pootle to new remote.
* '''Upload''' xo bundles and .tar.bz2 files to download.sugarlabs.org.
* '''Notify''' [http://lists.sugarlabs.org/listinfo/sugar-devel sugar-devel] and [http://lists.laptop.org/listinfo/devel OLPC devel] about the move.
* '''Make sure''' that sugar-jhbuild points to the new repository (enter a ticket in http://dev.sugarlabs.org if you have no access)
* Transfer or resolve '''existing tickets''' related to the code in the [http://dev.laptop.org/query?status=assigned&status=new&status=reopened&component=acoustic-measure-activity&order=priority&col=id&col=summary&col=status&col=owner&col=type&col=milestone OLPC Trac].
* Update any pages on wiki.laptop.org that may contain '''stale links''' to OLPC repo. (e.g. Activities/All , the OBX box on the activity homepage, etc.)

Activity Team/How to migrate from OLPC

2009-01-14T02:28:46Z

Bjordan:

== Migrating activities from dev.laptop.org ==

* If you are not the author of the activity, '''query''' the author to let them know about the move.
* '''Create''' an account on http://git.sugarlabs.org and '''log in'''. Add your public SSH key to [http://git.sugarlabs.org/account your account].
* '''[http://git.sugarlabs.org/projects/new Create a new project]''' (http://git.sugarlabs.org, projects, new). Make your project name lowercase, e.g. pippy, turtleart, paint. Put it in '''category "activities"'''.
* '''Clone''' your activity from [http://dev.laptop.org/git dev.laptop.org].
git-clone git://dev.laptop.org/projects/pippy-activity
* '''If''' you want to migrate a non-master branch...
git remote show origin
git checkout -b sucrose-0.82 origin/sucrose-0.82
* '''Push''' to git.sugarlabs.org with something like:

git push gitorious@git.sugarlabs.org:sugar/mainline.git --mirror

* '''Add''' the pootle user as a committer (from the "add committer" link on the mainline page) and send mail to [[User:SayaminduDasgupta|Sayamindu]] to point pootle to new remote.
* '''Upload''' xo bundles and .tar.bz2 files to download.sugarlabs.org.
* '''Notify''' [http://lists.sugarlabs.org/listinfo/sugar-devel sugar-devel] and [http://lists.laptop.org/listinfo/devel OLPC devel] about the move.
* '''Make sure''' that sugar-jhbuild points to the new repository (enter a ticket in http://dev.sugarlabs.org if you have no access)
* Transfer or resolve '''existing tickets''' related to the code in the [http://dev.laptop.org/query?status=assigned&status=new&status=reopened&component=analyze-activity&order=priority&col=id&col=summary&col=status&col=owner&col=type&col=milestone OLPC Trac].
* Update any pages on wiki.laptop.org that may contain '''stale links''' to OLPC repo. (e.g. Activities/All , the OBX box on the activity homepage, etc.)

User:Bjordan

2009-01-13T16:21:50Z

Bjordan:

Hi. I'm a member of the [[ActivityTeam]], and have a special interest in [[Scratch]], [[TurtleArt]], [[Pippy]] and [[Paint]].
:I've started a wish list for some help with [[Talk:ActivityTeam|Turtle Art]]. Let me know if any of these projects may be of interest. --[[User:Walter|Walter]] 03:31, 12 January 2009 (UTC)

== RSA Key ==
Available here: http://dev.laptop.org/~bjordan/id_rsa.pub

Activity Team/TODO

2009-01-12T23:44:45Z

Bjordan: /* Development Tasks */

<noinclude>{{ GoogleTrans-en | es =show | bg =show | zh-CN =show | zh-TW =show | hr =show | cs =show | da =show | nl =show | fi =show | fr =show | de =show | el =show | hi =show | it =show | ja =show | ko =show | no =show | pl =show | pt =show | ro =show | ru =show | sv =show }}
{{TeamHeader|ActivityTeam}}</noinclude>

When you plan to take a task from the list, please sign and date it using four tildes.
<pre>* task name &tilde;&tilde;&tilde;&tilde;</pre>

When a task is complete, strike it out.
<pre><strike>task name</strike></pre>

==High Impact Tasks==
These are tasks which will have a big impact on Sugar deployments. This is your chance to affect hundreds, if not thousands of children in the developing world! This section will be updated frequently to feature the most urgent work the Activity Team has to do.

====Labyrinth====
Labyrinth is a mind mapping activity. [[User:garycmartin|Gary C Martin]] is currently leading the port of this PyGTK program to Sugar. Mind mapping software has been specifically requested by teachers at deployments. Labyrinth needs help improving and extending the user interface, so PyGTK skills would be important. Or, collaboration would be a great addition!
::I'm making good progress here, main issues resolve around whether I treat this as a fork, there seems a lot of changes needed deeper down in the Labyrinth code to make this really novice user friendly, lot's of stray code and odd behaviours floating around once you start digging. -[[User:Garycmartin|Garycmartin]] 23:23, 12 January 2009 (UTC)

====Typing Turtle====
Typing Turtle is a touch typing activity with a turtle mascot. We are developing activity this with the Nepal and Afganistan deployments. Peru has also requested this activity as a high priority. TT is in pre-alpha but is close to its first release. Help is mostly needed testing and fixing the activity for use with foreign languages, and developing the lesson builder script. GUI programming experience is not critical, but Python skills and i18n knowledge, as well as the ability to work in a language other than English would be very useful.

====Math====
A request by the Peru deployment is simple math games. I have started working on some math puzzles with Peter Moxhay, based a suite of Java lessons he wrote in the past. These are very early in development but there are a lot of games to write. Also, examples are available, so it's really just porting and the work goes quickly. [[User:Ysun|Ysun]] 19:50, 12 January 2009 (UTC)ysun

====Maze collaboration====
Maze is currently the most addictive multiplayer game on the XO, and it needs a further dusting of crack, including better statistics, handicaps, etc.

====Speak collaboration====
This has the potential to be an awesome communication method; not only a chat option for the blind but a way of teaching specific words, and a fun way to engage small clusters of people around an XO: sound carries well to people who aren't currently reading the screen.

====SWF activity launcher====
The Nepal deployment have created a suite of Flash based learning activities but are currently having to jump through many hoops to package them correctly. We would like to have a launcher which creates an activity window and launches Gnash in it, with a .SWF file. This launcher would then be used to easily make activity bundles out of SWF files.

====Web activity launcher & framework====
Other deployments are using HTML+CSS+Javascript to make learning activities, but they currently have to be installed using the Library Collection feature of Sugar which is not well developed. We would like to build a 'web-activity' launcher script which allows Web based activities to be first class activities with icons on the home screens. This would involve making a new framework out of the source code to the Browse activity and submitting it upstream to the DevelopmentTeam, in addition to writing the launcher script.

==Community Tasks==
* <strike>Announce availability of ATeam contacts page to mailing lists. [[User:Wade|Wade]] 17:26, 12 January 2009 (UTC)</strike>
* Query ATeam members about skills, interest, time commitment. [[User:Wade|Wade]] 17:26, 12 January 2009 (UTC)
* Look for at least one additional coordinator.
* Contact former + current activity developers. [[User:Wade|Wade]] 17:26, 12 January 2009 (UTC)
** Ask about moving activities to git.sugarlabs.org (or mirroring).
** Ask about joining the ActivityTeam or coming to meetings.

==Infrastructure Tasks==
* Make activities.sugarlabs.org (or addons.sugarlabs.org) work.
* Bug IT to get us admin accounts for SL services.
** Downloads
** Trac (component creation etc)
* Ask IT about activity repository mirroring. A read-only Git repository on SL which automatically pulls from a remote repository.
* Flesh out structure for ActivityTeam wiki.
** Where does the Activities list from the SL home page go?
** How should development information be structured?
** In the (temporary) absence of activities.sugarlabs.org, should we create per-activity Wiki pages? Should we anyway?
*** I think we need these pages any way, to cover development issues [[User:alsroot|alsroot]] Mon Jan 12 21:21:51 UTC 2009
* Bug IT to add helpful "git-clone" hints like on: http://dev.laptop.org/git?p=activities/help;a=summary and/or instructions for developing within sugar like:
<pre>
git clone git://dev.laptop.org/users/wadeb/math
cd math
./setup.py dev
<Ctrl-Alt-Erase>
</pre>
* create activities@sugarlabs.org mailing list
** or rather, migrate http://lists.laptop.org/listinfo/activities over to SL mailman
* move "Some Sugar Activities" from main page to ActivityTeam/
** and add text (with link to ActivityTeam/) to main page (in addition to left-sidebar's link)

==Development Tasks==
* Move projects owned by ATeam members over to git.sugarlabs.org and downloads.sugarlabs.org -- [[ActivityTeam/How_to_migrate_from_OLPC|how to migrate]]
** <strike>Log [[User:Wade|Wade]] 19:22, 12 January 2009 (UTC)</strike>
** Bounce
** Colors
** Typing Turtle
** Math
** Finance
** Pippy
** Paint
** Add all activities here, then strike them out when moved!
* Help SoaS and other distro packagers to get as many activities as possible working on plain Sugar (outside the XO software environment).
** Log
** Bounce
** Colors
** Typing Turtle
** Math
** Finance
** Add all activities here, strike them out when tarballs released and tested!
* Clean up activities ecosystem. Bring .POT files up to date, check MANIFEST is correct, publish latest version to downloads.sugarlabs.org.
** Log
* Build a list of "Rescue" activities: Ones which have not been worked on in a while but are close to being usable.
* Build a list of "Help Wanted" activities: Great ideas or existing projects which need to be sugarized.
* Generate spec for Web, SWF activities and deliver to DevelopmentTeam.

==Activity Feature Requests==
This section is for feature requests for specific activities. As requests, there can be no guarantee as to the order in which we will process them, but we will do our best.

If you are a new activity developer, there are many small tasks here which would be a great way to get introduced to the project.

===Turtle Art===
* move the show/hide blocks, erase, and stop buttons to the toolbar
* add run and step buttons to the same toolbar
* reconfigure audio initialization so that it only happens when TA starts up or gets sent to the background
* don't let bricks get lost off the screen
* add a special stack "hat" for "main" (tied to the run button above)

Activity Team/TODO

2009-01-12T23:39:06Z

Bjordan: /* Development Tasks */

<noinclude>{{ GoogleTrans-en | es =show | bg =show | zh-CN =show | zh-TW =show | hr =show | cs =show | da =show | nl =show | fi =show | fr =show | de =show | el =show | hi =show | it =show | ja =show | ko =show | no =show | pl =show | pt =show | ro =show | ru =show | sv =show }}
{{TeamHeader|ActivityTeam}}</noinclude>

When you plan to take a task from the list, please sign and date it using four tildes.
<pre>* task name &tilde;&tilde;&tilde;&tilde;</pre>

When a task is complete, strike it out.
<pre><strike>task name</strike></pre>

==High Impact Tasks==
These are tasks which will have a big impact on Sugar deployments. This is your chance to affect hundreds, if not thousands of children in the developing world! This section will be updated frequently to feature the most urgent work the Activity Team has to do.

====Labyrinth====
Labyrinth is a mind mapping activity. [[User:garycmartin|Gary C Martin]] is currently leading the port of this PyGTK program to Sugar. Mind mapping software has been specifically requested by teachers at deployments. Labyrinth needs help improving and extending the user interface, so PyGTK skills would be important. Or, collaboration would be a great addition!
::I'm making good progress here, main issues resolve around whether I treat this as a fork, there seems a lot of changes needed deeper down in the Labyrinth code to make this really novice user friendly, lot's of stray code and odd behaviours floating around once you start digging. -[[User:Garycmartin|Garycmartin]] 23:23, 12 January 2009 (UTC)

====Typing Turtle====
Typing Turtle is a touch typing activity with a turtle mascot. We are developing activity this with the Nepal and Afganistan deployments. Peru has also requested this activity as a high priority. TT is in pre-alpha but is close to its first release. Help is mostly needed testing and fixing the activity for use with foreign languages, and developing the lesson builder script. GUI programming experience is not critical, but Python skills and i18n knowledge, as well as the ability to work in a language other than English would be very useful.

====Math====
A request by the Peru deployment is simple math games. I have started working on some math puzzles with Peter Moxhay, based a suite of Java lessons he wrote in the past. These are very early in development but there are a lot of games to write. Also, examples are available, so it's really just porting and the work goes quickly. [[User:Ysun|Ysun]] 19:50, 12 January 2009 (UTC)ysun

====Maze collaboration====
Maze is currently the most addictive multiplayer game on the XO, and it needs a further dusting of crack, including better statistics, handicaps, etc.

====Speak collaboration====
This has the potential to be an awesome communication method; not only a chat option for the blind but a way of teaching specific words, and a fun way to engage small clusters of people around an XO: sound carries well to people who aren't currently reading the screen.

====SWF activity launcher====
The Nepal deployment have created a suite of Flash based learning activities but are currently having to jump through many hoops to package them correctly. We would like to have a launcher which creates an activity window and launches Gnash in it, with a .SWF file. This launcher would then be used to easily make activity bundles out of SWF files.

====Web activity launcher & framework====
Other deployments are using HTML+CSS+Javascript to make learning activities, but they currently have to be installed using the Library Collection feature of Sugar which is not well developed. We would like to build a 'web-activity' launcher script which allows Web based activities to be first class activities with icons on the home screens. This would involve making a new framework out of the source code to the Browse activity and submitting it upstream to the DevelopmentTeam, in addition to writing the launcher script.

==Community Tasks==
* <strike>Announce availability of ATeam contacts page to mailing lists. [[User:Wade|Wade]] 17:26, 12 January 2009 (UTC)</strike>
* Query ATeam members about skills, interest, time commitment. [[User:Wade|Wade]] 17:26, 12 January 2009 (UTC)
* Look for at least one additional coordinator.
* Contact former + current activity developers. [[User:Wade|Wade]] 17:26, 12 January 2009 (UTC)
** Ask about moving activities to git.sugarlabs.org (or mirroring).
** Ask about joining the ActivityTeam or coming to meetings.

==Infrastructure Tasks==
* Make activities.sugarlabs.org (or addons.sugarlabs.org) work.
* Bug IT to get us admin accounts for SL services.
** Downloads
** Trac (component creation etc)
* Ask IT about activity repository mirroring. A read-only Git repository on SL which automatically pulls from a remote repository.
* Flesh out structure for ActivityTeam wiki.
** Where does the Activities list from the SL home page go?
** How should development information be structured?
** In the (temporary) absence of activities.sugarlabs.org, should we create per-activity Wiki pages? Should we anyway?
*** I think we need these pages any way, to cover development issues [[User:alsroot|alsroot]] Mon Jan 12 21:21:51 UTC 2009
* Bug IT to add helpful "git-clone" hints like on: http://dev.laptop.org/git?p=activities/help;a=summary and/or instructions for developing within sugar like:
<pre>
git clone git://dev.laptop.org/users/wadeb/math
cd math
./setup.py dev
<Ctrl-Alt-Erase>
</pre>
* create activities@sugarlabs.org mailing list
** or rather, migrate http://lists.laptop.org/listinfo/activities over to SL mailman
* move "Some Sugar Activities" from main page to ActivityTeam/
** and add text (with link to ActivityTeam/) to main page (in addition to left-sidebar's link)

==Development Tasks==
* Move projects owned by ATeam members over to git.sugarlabs.org and downloads.sugarlabs.org -- [[ActivityTeam/How_to_migrate_from_OLPC|how to migrate]]
** <strike>Log [[User:Wade|Wade]] 19:22, 12 January 2009 (UTC)</strike>
** Bounce
** Colors
** Typing Turtle
** Math
** Finance
** Add all activities here, then strike them out when moved!
* Help SoaS and other distro packagers to get as many activities as possible working on plain Sugar (outside the XO software environment).
** Log
** Bounce
** Colors
** Typing Turtle
** Math
** Finance
** Add all activities here, strike them out when tarballs released and tested!
* Clean up activities ecosystem. Bring .POT files up to date, check MANIFEST is correct, publish latest version to downloads.sugarlabs.org.
** Log
* Build a list of "Rescue" activities: Ones which have not been worked on in a while but are close to being usable.
* Build a list of "Help Wanted" activities: Great ideas or existing projects which need to be sugarized.
* Generate spec for Web, SWF activities and deliver to DevelopmentTeam.

==Activity Feature Requests==
This section is for feature requests for specific activities. As requests, there can be no guarantee as to the order in which we will process them, but we will do our best.

If you are a new activity developer, there are many small tasks here which would be a great way to get introduced to the project.

===Turtle Art===
* move the show/hide blocks, erase, and stop buttons to the toolbar
* add run and step buttons to the same toolbar
* reconfigure audio initialization so that it only happens when TA starts up or gets sent to the background
* don't let bricks get lost off the screen
* add a special stack "hat" for "main" (tied to the run button above)

Activity Team/TODO

2009-01-12T23:38:33Z

Bjordan: /* Development Tasks */

<noinclude>{{ GoogleTrans-en | es =show | bg =show | zh-CN =show | zh-TW =show | hr =show | cs =show | da =show | nl =show | fi =show | fr =show | de =show | el =show | hi =show | it =show | ja =show | ko =show | no =show | pl =show | pt =show | ro =show | ru =show | sv =show }}
{{TeamHeader|ActivityTeam}}</noinclude>

When you plan to take a task from the list, please sign and date it using four tildes.
<pre>* task name &tilde;&tilde;&tilde;&tilde;</pre>

When a task is complete, strike it out.
<pre><strike>task name</strike></pre>

==High Impact Tasks==
These are tasks which will have a big impact on Sugar deployments. This is your chance to affect hundreds, if not thousands of children in the developing world! This section will be updated frequently to feature the most urgent work the Activity Team has to do.

====Labyrinth====
Labyrinth is a mind mapping activity. [[User:garycmartin|Gary C Martin]] is currently leading the port of this PyGTK program to Sugar. Mind mapping software has been specifically requested by teachers at deployments. Labyrinth needs help improving and extending the user interface, so PyGTK skills would be important. Or, collaboration would be a great addition!
::I'm making good progress here, main issues resolve around whether I treat this as a fork, there seems a lot of changes needed deeper down in the Labyrinth code to make this really novice user friendly, lot's of stray code and odd behaviours floating around once you start digging. -[[User:Garycmartin|Garycmartin]] 23:23, 12 January 2009 (UTC)

====Typing Turtle====
Typing Turtle is a touch typing activity with a turtle mascot. We are developing activity this with the Nepal and Afganistan deployments. Peru has also requested this activity as a high priority. TT is in pre-alpha but is close to its first release. Help is mostly needed testing and fixing the activity for use with foreign languages, and developing the lesson builder script. GUI programming experience is not critical, but Python skills and i18n knowledge, as well as the ability to work in a language other than English would be very useful.

====Math====
A request by the Peru deployment is simple math games. I have started working on some math puzzles with Peter Moxhay, based a suite of Java lessons he wrote in the past. These are very early in development but there are a lot of games to write. Also, examples are available, so it's really just porting and the work goes quickly. [[User:Ysun|Ysun]] 19:50, 12 January 2009 (UTC)ysun

====Maze collaboration====
Maze is currently the most addictive multiplayer game on the XO, and it needs a further dusting of crack, including better statistics, handicaps, etc.

====Speak collaboration====
This has the potential to be an awesome communication method; not only a chat option for the blind but a way of teaching specific words, and a fun way to engage small clusters of people around an XO: sound carries well to people who aren't currently reading the screen.

====SWF activity launcher====
The Nepal deployment have created a suite of Flash based learning activities but are currently having to jump through many hoops to package them correctly. We would like to have a launcher which creates an activity window and launches Gnash in it, with a .SWF file. This launcher would then be used to easily make activity bundles out of SWF files.

====Web activity launcher & framework====
Other deployments are using HTML+CSS+Javascript to make learning activities, but they currently have to be installed using the Library Collection feature of Sugar which is not well developed. We would like to build a 'web-activity' launcher script which allows Web based activities to be first class activities with icons on the home screens. This would involve making a new framework out of the source code to the Browse activity and submitting it upstream to the DevelopmentTeam, in addition to writing the launcher script.

==Community Tasks==
* <strike>Announce availability of ATeam contacts page to mailing lists. [[User:Wade|Wade]] 17:26, 12 January 2009 (UTC)</strike>
* Query ATeam members about skills, interest, time commitment. [[User:Wade|Wade]] 17:26, 12 January 2009 (UTC)
* Look for at least one additional coordinator.
* Contact former + current activity developers. [[User:Wade|Wade]] 17:26, 12 January 2009 (UTC)
** Ask about moving activities to git.sugarlabs.org (or mirroring).
** Ask about joining the ActivityTeam or coming to meetings.

==Infrastructure Tasks==
* Make activities.sugarlabs.org (or addons.sugarlabs.org) work.
* Bug IT to get us admin accounts for SL services.
** Downloads
** Trac (component creation etc)
* Ask IT about activity repository mirroring. A read-only Git repository on SL which automatically pulls from a remote repository.
* Flesh out structure for ActivityTeam wiki.
** Where does the Activities list from the SL home page go?
** How should development information be structured?
** In the (temporary) absence of activities.sugarlabs.org, should we create per-activity Wiki pages? Should we anyway?
*** I think we need these pages any way, to cover development issues [[User:alsroot|alsroot]] Mon Jan 12 21:21:51 UTC 2009
* Bug IT to add helpful "git-clone" hints like on: http://dev.laptop.org/git?p=activities/help;a=summary and/or instructions for developing within sugar like:
<pre>
git clone git://dev.laptop.org/users/wadeb/math
cd math
./setup.py dev
<Ctrl-Alt-Erase>
</pre>
* create activities@sugarlabs.org mailing list
** or rather, migrate http://lists.laptop.org/listinfo/activities over to SL mailman
* move "Some Sugar Activities" from main page to ActivityTeam/
** and add text (with link to ActivityTeam/) to main page (in addition to left-sidebar's link)

==Development Tasks==
* Move projects owned by ATeam members over to git.sugarlabs.org and downloads.sugarlabs.org -- [[http://sugarlabs.org/go/ActivityTeam/How_to_migrate_from_OLPC|how to migrate]]
** <strike>Log [[User:Wade|Wade]] 19:22, 12 January 2009 (UTC)</strike>
** Bounce
** Colors
** Typing Turtle
** Math
** Finance
** Add all activities here, then strike them out when moved!
* Help SoaS and other distro packagers to get as many activities as possible working on plain Sugar (outside the XO software environment).
** Log
** Bounce
** Colors
** Typing Turtle
** Math
** Finance
** Add all activities here, strike them out when tarballs released and tested!
* Clean up activities ecosystem. Bring .POT files up to date, check MANIFEST is correct, publish latest version to downloads.sugarlabs.org.
** Log
* Build a list of "Rescue" activities: Ones which have not been worked on in a while but are close to being usable.
* Build a list of "Help Wanted" activities: Great ideas or existing projects which need to be sugarized.
* Generate spec for Web, SWF activities and deliver to DevelopmentTeam.

==Activity Feature Requests==
This section is for feature requests for specific activities. As requests, there can be no guarantee as to the order in which we will process them, but we will do our best.

If you are a new activity developer, there are many small tasks here which would be a great way to get introduced to the project.

===Turtle Art===
* move the show/hide blocks, erase, and stop buttons to the toolbar
* add run and step buttons to the same toolbar
* reconfigure audio initialization so that it only happens when TA starts up or gets sent to the background
* don't let bricks get lost off the screen
* add a special stack "hat" for "main" (tied to the run button above)

Activity Team/How to migrate from OLPC

2009-01-12T23:35:02Z

Bjordan: New page: == Migrating activities from dev.laptop.org == * '''Create''' an account on http://git.sugarlabs.org and '''log in'''. Add your public SSH key to [http://git.sugarlabs.org/account your ac...

== Migrating activities from dev.laptop.org ==

* '''Create''' an account on http://git.sugarlabs.org and '''log in'''. Add your public SSH key to [http://git.sugarlabs.org/account your account].
* '''[http://git.sugarlabs.org/projects/new Create a new project]''' (http://git.sugarlabs.org, projects, new). Make your project name lowercase, e.g. pippy, turtleart, paint. Put it in '''category "activities"'''.
* '''Clone''' your activity from [http://dev.laptop.org/git dev.laptop.org].
git-clone git://dev.laptop.org/projects/pippy-activity
* '''If''' you want to migrate a non-master branch...
git remote show origin
git checkout -b sucrose-0.82 origin/sucrose-0.82
* '''Push''' to git.sugarlabs.org with something like:

git push gitorious@git.sugarlabs.org:sugar/mainline.git --mirror

* '''Add''' the pootle user as a committer (from the "add committer" link on the mainline page) and send mail to [[User:SayaminduDasgupta|Sayamindu]] to point pootle to new remote.
* '''Notify''' [http://lists.sugarlabs.org/listinfo/sugar-devel sugar-devel] and [http://lists.laptop.org/listinfo/devel OLPC devel] about the move.
* '''Make sure''' that sugar-jhbuild points to the new repository (ask someone to do it for you if you have no access)

Activity Team/Git Migration

2009-01-12T23:22:17Z

Bjordan:

== Import a module from dev.laptop.org ==

* '''Create''' an account on http://git.sugarlabs.org
* '''Log in''' and [http://git.sugarlabs.org/projects/new create a new project] from the projects page (please use '''only lower case''', e.g. sugar, turtleart, sugar-toolkit).
* '''Clone''' your git module from dev.laptop.org, e.g.
git-clone git://dev.laptop.org/projects/pippy-activity
* '''See''' all the remote branches with:
git remote show origin
* '''Check out''' the remote branches you want to migrate, e.g.
git checkout -b sucrose-0.82 origin/sucrose-0.82
* '''Push''' it to git.sugarlabs.org with something like:

git push gitorious@git.sugarlabs.org:sugar/mainline.git --mirror

* '''Add''' the pootle user as a committer (from the "add committer" link on the mainline page) and send mail to [[User:SayaminduDasgupta|Sayamindu]], to point pootle to new remote.
* '''Notify''' [http://lists.sugarlabs.org/listinfo/sugar-devel sugar-devel] about the move.
* '''Make sure''' that sugar-jhbuild points to the new repository (ask someone to do it for you if you have no access)

== Clone a module from git.sugarlabs.org ==
Instructions on how to clone a project from the git repositories of sugarlabs.org can be found at the project's repos/mainline page, for example for [http://git.sugarlabs.org/projects/sugar-jhbuild/repos/mainline sugar-jhbuild]. And here is an example:

git clone git://git.sugarlabs.org/sugar-jhbuild/mainline.git sugar-jhbuild

Activity Team/Git Migration

2009-01-12T23:21:22Z

Bjordan:

== Import a module from dev.laptop.org ==

* '''Get''' an account on http://git.sugarlabs.org
* '''Log''' in and [http://git.sugarlabs.org/projects/new create a new project] from the projects page (please use '''only lower case''', e.g. sugar, turtleart, sugar-toolkit).
* '''Clone''' your git module from dev.laptop.org, e.g.
git-clone git://dev.laptop.org/projects/pippy-activity
* '''See''' all the remote branches with:
git remote show origin
* '''Check''' out the remote branches you want to migrate, e.g.
git checkout -b sucrose-0.82 origin/sucrose-0.82
* '''Push''' it to git.sugarlabs.org with something like:

git push gitorious@git.sugarlabs.org:sugar/mainline.git --mirror

* '''Add''' the pootle user as a committer (from the "add committer" link on the mainline page) and send mail to [[User:SayaminduDasgupta|Sayamindu]], to point pootle to new remote.
* '''Notify''' [http://lists.sugarlabs.org/listinfo/sugar-devel sugar-devel] about the move.
* '''Make sure''' that sugar-jhbuild points to the new repository (ask someone to do it for you if you have no access)

== Clone a module from git.sugarlabs.org ==
Instructions on how to clone a project from the git repositories of sugarlabs.org can be found at the project's repos/mainline page, for example for [http://git.sugarlabs.org/projects/sugar-jhbuild/repos/mainline sugar-jhbuild]. And here is an example:

git clone git://git.sugarlabs.org/sugar-jhbuild/mainline.git sugar-jhbuild

Activity Team/Git Migration

2009-01-12T23:19:46Z

Bjordan:

== Import a module from dev.laptop.org ==

* ''Get'' an account on http://git.sugarlabs.org
* ''Log'' in and [http://git.sugarlabs.org/projects/new create a new project] from the projects page (please use '''only lower case''', e.g. sugar, turtleart, sugar-toolkit).
* ''Clone'' your git module from dev.laptop.org, e.g.
git-clone git://dev.laptop.org/projects/pippy-activity
* ''See'' all the remote branches with:
git remote show origin
* ''Check'' out the remote branches you want to migrate, e.g.
git checkout -b sucrose-0.82 origin/sucrose-0.82
* ''Push'' it to git.sugarlabs.org with something like:

git push gitorious@git.sugarlabs.org:sugar/mainline.git --mirror

* ''Add'' the pootle user as a committer (from the "add committer" link on the mainline page) and send mail to [[User:SayaminduDasgupta|Sayamindu]], to point pootle to new remote.
* ''Notify'' [http://lists.sugarlabs.org/listinfo/sugar-devel sugar-devel] about the move.
* ''Make sure'' that sugar-jhbuild points to the new repository (ask someone to do it for you if you have no access)

== Clone a module from git.sugarlabs.org ==
Instructions on how to clone a project from the git repositories of sugarlabs.org can be found at the project's repos/mainline page, for example for [http://git.sugarlabs.org/projects/sugar-jhbuild/repos/mainline sugar-jhbuild]. And here is an example:

git clone git://git.sugarlabs.org/sugar-jhbuild/mainline.git sugar-jhbuild

Activity Team/Contacts

2009-01-12T20:37:06Z

Bjordan: Username change

User:Bjordan

2009-01-12T20:36:16Z

Bjordan: User:Bcjordan moved to User:Bjordan: "Changing" username (few edits on Bcjordan)

Development Team/Almanac/Making Icons

2008-07-15T16:48:33Z

Bjordan:

{{TOCright}}

Save yourself some time. Don't make the mistake I made. Before you make an icon, see if it's already on the laptop!

/usr/share/icons/sugar/scalable on the laptop contains a bunch of icons for your use. Also, [[Svg-grabber.py|svg-grabber]] is a python script that will download ~800 non-sugar svg's for you to work from.

--[[User:Bjordan|Bjordan]] 16:48, 15 July 2008 (UTC)

==Icon Format==

====Scalable Vector Graphics====

Icons designed for Sugar should have the [http://www.w3.org/Graphics/SVG/ SVG] file format. This Scalable Vector Graphic format allows Sugar to dynamically scale and color the icons without any degradation in quality. Thus, variably sized representations of particular icons may exist depending on their context in the interface. Additionally, this provides support for dynamic coloring of activity and object icons based upon a child's chosen XO colors, [[OLPC_Human_Interface_Guidelines/The_Sugar_Interface/Colors#Imbuing%20Color%20with%20Meaning|imbuing them with identity]].

====Defining Entities====

To aid in the dynamic colorization of sugar icons, we take advantage of [http://xmlwriter.net/xml_guide/entity_declaration.shtml entitites] within the [http://wiki.svg.org/Doctype DOCTYPE] declaration. The inserted entities act like variables whose values are inserted at any location in the SVG where the entity is referenced. Making sure that these entities are inserted correctly is essential to creating proper icons for use in Sugar.

The two entities required for Sugar icons are:

# <tt>stroke_color</tt>
# <tt>fill_color</tt>

To see an example of the XML format used to define these entities, please refer to the section below on [[#Defining_Entities_2 | hacking]] Sugar icons by hand.

==Getting Started==

====Finding an SVG Editor====

In order to create icons in the SVG format, you'll need to get your hands on a suitable editor. There are a number of [http://en.wikipedia.org/wiki/List_of_vector_graphics_editors options] available, and you are free to choose any that suits your particular needs. One of the most commonly used is [http://www.inkscape.org/ Inkscape], an open source vector graphics editor with a comprehensive toolset and WC3 and CSS standards compliance. In addition, Inkscape has a commitment to multilingual support and maintains ongoing translation efforts.

There are also a number of [http://en.wikipedia.org/wiki/List_of_vector_graphics_editors#Commercial_software commercial editors] which you are welcome to use as well, should you have access to such resources.

Unfortunately, no suitable vector editing tools are available as activities for the XO laptops at present. We acknowledge this omission, and hope to provide a vector-based "Draw" activity (to supplement the bitmap-based "Paint" activity) in order to provide the proper tools for icon generation on the laptops themselves in the future.

Kidscape aka inkscape child friendly version(olpc): https://bugs.launchpad.net/inkscape/+bug/170488 please cc yourself to this bug, and comment as appropriate.

====Templates====

To make it simpler to create new icons for use in Sugar, we've created some template SVGs. Though any of these template files should be editable with your choice of SVG editor, those with specific affiliations have been tweaked to make their presentation in their associated editors more natural, and their interaction with our scripts much cleaner. The third template is an extremely minimal example which is designed for those who wish to edit SVGs manually, or for those that wish to use other editors.

=====Downloads=====
These are pointers to the wiki pages for the template icons. Click through to these pages (don't "save as", yet!)
* [[:image: icon_template.inkscape.svg | icon_template.inkscape.svg]]
* [[:image: icon_template.illustrator.svg | icon_template.illustrator.svg]]
* [[:image: icon_template.generic.svg | icon_template.generic.svg]]

=====Guide=====

The non-generic template files have some extra elements within them that may make things easier for you as you create your icons. For instance, they have a guide layer which clearly denotes both the recommended (45px) and maximum (55px) areas that your icon must fit within. This layer may also be useful for previewing your icons against a dark background while editing them.

=====Swatches=====

They also contain a swatches layer which offers some small squares in all possible combinations of the default stroke and fill colors. In Illustrator you can paint a shape in your icon by selecting it, then pressing 'i' to select the Eyedropper tool, and finally clicking on the swatch of your choice to automatically apply both the stroke and fill properties of the swatch to the selection, adding or removing the stroke or fill completely as necessary.

You can accomplish something somewhat similar in Inkscape by selecting the eyedropper tool (F7). With the tool selected, you can click on a color to set the fill, or shift-click to set the stroke. Unfortunately, there doesn't seem to be a way to set both stroke and fill from a swatch with one click, nor is there a way to remove a stroke or fill by clicking on a swatch without those properties. You can, however, add strokes and fills via this method when the selected shape has none; you may also remove a stroke or a fill by checking the "pick alpha" checkbox and then clicking outside of the canvas area with or without shift, respectively.

====Designing Icons====

Sugar icons should all follow the [[OLPC_Human_Interface_Guidelines/The_Sugar_Interface/Icons | icon design guidelines]] set forth in the Sugar Human Interface Guidelines. For information about the various types of icons and their appearances including size, colors, and layout, please refer to the HIG.

=====Default Colors=====

COMING SOON...

=====Visual Weight=====

COMING SOON...

=====Strokes and Fills=====

COMING SOON...

==Sugarizing Icons==

===The Script===

In order to streamline the process of creating sugar compatible icons, we provide the [[media: sugar-iconify.py | sugar-iconify]] script. This script takes an SVG file as input and outputs a new SVG (or SVGs) containing the proper entity definitions. It offers a number of command-line flags for performing variations on this process to fit smoothly into your workflow. You can view all of the available options by running <tt>sugar-iconify -h</tt> from the command line, or by viewing the dedicated [[Sugar-iconify | usage page]]. Some specific examples and use cases are illustrated below in more detail.

=====Download=====

* [[media: sugar-iconify.py | sugar-iconify.py]]

===Basic Conversion===

COMING SOON...

===Icon Sets===

http://www.openicon.org is a search engine for svg icons.
please add any icon sets using the validator.

==Hacking by Hand==

SVG adheres to the common [http://www.w3.org/XML/ XML] format, and as such may be edited within any standard text editor. For those that are interested in the internal details, don't have access to visual editing tools, or simply like the thrill of crafting their icons by hand, with the associated control, please enjoy this section.

====A Simple SVG====

You're free to examine the [http://www.w3.org/TR/SVG/ SVG 1.1 specification] in order to create icons of any complexity you desire. For the purposes of demonstrating the conversion of a standard SVG into the format Sugar expects, let's consider a really simple SVG. We define the width and height of the canvas to be 55px, which is the maximum size for "standard" icons, and the required canvas size. The recommended size for icons is 45px, which is the area we fill with the rect. By defining the 55px rect for the icon, we naturally define some padding, which gives you as the icon designer the ability to position the icon within the 55px canvas to give it proper "visual weight". In other words, it should ''appear'' to be centered within the padded 55px region, even if it technically is not.

<nowiki>
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" width="55" height="55">
<rect x="5" y="5" width="45" height="45" stroke="#666666" fill="#FFFFFF" stroke-width="3.5"/>
</svg>
</nowiki>

''Note: If you wish to use Inkscape to create your icons, and subsequently insert the entities by hand, we recommend using the "Save As" command and choosing the "Plain SVG" file format to produce more readable SVGs.''

====Defining Entities====

To prepare our SVG for use in Sugar, we need to define the entities which Sugar expects. To do this, we add an entity declaration block inside the DOCTYPE. For clarity, we'll define them to have the same colors as the SVG we started with, which also happens to have the recommended default colors for activity icons. Additions and changes are highlighted in green:

<nowiki>
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"</nowiki><font color='#009900'><nowiki> [
<!ENTITY stroke_color "#666666">
<!ENTITY fill_color "#FFFFFF">
]</nowiki></font><nowiki>>
<svg xmlns="http://www.w3.org/2000/svg" width="55" height="55">
<rect x="5" y="5" width="45" height="45" stroke="#666666" fill="#FFFFFF" stroke-width="3.5"/>
</svg>
</nowiki>

====Inserting Entity References====

Next, we have to make use of the defined entities by replacing all occurrences of those colors within the body of the SVG. Entity references begin with an ampersand (&) an end with a semi-colon (;), with their name in the middle (eg. <tt>&stroke_color;</tt>). Note that if we had a more complex SVG, it may be appropriate to set some fills to the stroke color, and some strokes to the fill color, within the rules set forth in the HIG for [[OLPC_Human_Interface_Guidelines/The_Sugar_Interface/Icons#Strokes_.26_Fills | strokes and fills]]

<nowiki>
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
<!ENTITY stroke_color "#666666">
<!ENTITY fill_color "#FFFFFF">
]>
<svg xmlns="http://www.w3.org/2000/svg" width="55" height="55">
<rect x="5" y="5" width="45" height="45" stroke="</nowiki><font color='#009900'><nowiki>&stroke_color;</nowiki></font><nowiki>" fill="</nowiki><font color='#009900'><nowiki>&fill_color;</nowiki></font><nowiki>" stroke-width="3.5"/>
</svg>
</nowiki>

== See also ==
*[[OLPC Human Interface Guidelines/The Sugar Interface/Icons]]
*[[Svg-grabber.py|Download .svg collection]] (~800 non-sugar svg's)

[[Category:Sugar]]
[[Category:HowTo]]

Development Team/Almanac/Making Icons

2008-07-15T16:33:06Z

Bjordan: /* Downloads */

{{TOCright}}

==Icon Format==

====Scalable Vector Graphics====

Icons designed for Sugar should have the [http://www.w3.org/Graphics/SVG/ SVG] file format. This Scalable Vector Graphic format allows Sugar to dynamically scale and color the icons without any degradation in quality. Thus, variably sized representations of particular icons may exist depending on their context in the interface. Additionally, this provides support for dynamic coloring of activity and object icons based upon a child's chosen XO colors, [[OLPC_Human_Interface_Guidelines/The_Sugar_Interface/Colors#Imbuing%20Color%20with%20Meaning|imbuing them with identity]].

====Defining Entities====

To aid in the dynamic colorization of sugar icons, we take advantage of [http://xmlwriter.net/xml_guide/entity_declaration.shtml entitites] within the [http://wiki.svg.org/Doctype DOCTYPE] declaration. The inserted entities act like variables whose values are inserted at any location in the SVG where the entity is referenced. Making sure that these entities are inserted correctly is essential to creating proper icons for use in Sugar.

The two entities required for Sugar icons are:

# <tt>stroke_color</tt>
# <tt>fill_color</tt>

To see an example of the XML format used to define these entities, please refer to the section below on [[#Defining_Entities_2 | hacking]] Sugar icons by hand.

==Getting Started==

====Finding an SVG Editor====

In order to create icons in the SVG format, you'll need to get your hands on a suitable editor. There are a number of [http://en.wikipedia.org/wiki/List_of_vector_graphics_editors options] available, and you are free to choose any that suits your particular needs. One of the most commonly used is [http://www.inkscape.org/ Inkscape], an open source vector graphics editor with a comprehensive toolset and WC3 and CSS standards compliance. In addition, Inkscape has a commitment to multilingual support and maintains ongoing translation efforts.

There are also a number of [http://en.wikipedia.org/wiki/List_of_vector_graphics_editors#Commercial_software commercial editors] which you are welcome to use as well, should you have access to such resources.

Unfortunately, no suitable vector editing tools are available as activities for the XO laptops at present. We acknowledge this omission, and hope to provide a vector-based "Draw" activity (to supplement the bitmap-based "Paint" activity) in order to provide the proper tools for icon generation on the laptops themselves in the future.

Kidscape aka inkscape child friendly version(olpc): https://bugs.launchpad.net/inkscape/+bug/170488 please cc yourself to this bug, and comment as appropriate.

====Templates====

To make it simpler to create new icons for use in Sugar, we've created some template SVGs. Though any of these template files should be editable with your choice of SVG editor, those with specific affiliations have been tweaked to make their presentation in their associated editors more natural, and their interaction with our scripts much cleaner. The third template is an extremely minimal example which is designed for those who wish to edit SVGs manually, or for those that wish to use other editors.

=====Downloads=====
These are pointers to the wiki pages for the template icons. Click through to these pages (don't "save as", yet!)
* [[:image: icon_template.inkscape.svg | icon_template.inkscape.svg]]
* [[:image: icon_template.illustrator.svg | icon_template.illustrator.svg]]
* [[:image: icon_template.generic.svg | icon_template.generic.svg]]

=====Guide=====

The non-generic template files have some extra elements within them that may make things easier for you as you create your icons. For instance, they have a guide layer which clearly denotes both the recommended (45px) and maximum (55px) areas that your icon must fit within. This layer may also be useful for previewing your icons against a dark background while editing them.

=====Swatches=====

They also contain a swatches layer which offers some small squares in all possible combinations of the default stroke and fill colors. In Illustrator you can paint a shape in your icon by selecting it, then pressing 'i' to select the Eyedropper tool, and finally clicking on the swatch of your choice to automatically apply both the stroke and fill properties of the swatch to the selection, adding or removing the stroke or fill completely as necessary.

You can accomplish something somewhat similar in Inkscape by selecting the eyedropper tool (F7). With the tool selected, you can click on a color to set the fill, or shift-click to set the stroke. Unfortunately, there doesn't seem to be a way to set both stroke and fill from a swatch with one click, nor is there a way to remove a stroke or fill by clicking on a swatch without those properties. You can, however, add strokes and fills via this method when the selected shape has none; you may also remove a stroke or a fill by checking the "pick alpha" checkbox and then clicking outside of the canvas area with or without shift, respectively.

====Designing Icons====

Sugar icons should all follow the [[OLPC_Human_Interface_Guidelines/The_Sugar_Interface/Icons | icon design guidelines]] set forth in the Sugar Human Interface Guidelines. For information about the various types of icons and their appearances including size, colors, and layout, please refer to the HIG.

=====Default Colors=====

COMING SOON...

=====Visual Weight=====

COMING SOON...

=====Strokes and Fills=====

COMING SOON...

==Sugarizing Icons==

===The Script===

In order to streamline the process of creating sugar compatible icons, we provide the [[media: sugar-iconify.py | sugar-iconify]] script. This script takes an SVG file as input and outputs a new SVG (or SVGs) containing the proper entity definitions. It offers a number of command-line flags for performing variations on this process to fit smoothly into your workflow. You can view all of the available options by running <tt>sugar-iconify -h</tt> from the command line, or by viewing the dedicated [[Sugar-iconify | usage page]]. Some specific examples and use cases are illustrated below in more detail.

=====Download=====

* [[media: sugar-iconify.py | sugar-iconify.py]]

===Basic Conversion===

COMING SOON...

===Icon Sets===

http://www.openicon.org is a search engine for svg icons.
please add any icon sets using the validator.

==Hacking by Hand==

SVG adheres to the common [http://www.w3.org/XML/ XML] format, and as such may be edited within any standard text editor. For those that are interested in the internal details, don't have access to visual editing tools, or simply like the thrill of crafting their icons by hand, with the associated control, please enjoy this section.

====A Simple SVG====

You're free to examine the [http://www.w3.org/TR/SVG/ SVG 1.1 specification] in order to create icons of any complexity you desire. For the purposes of demonstrating the conversion of a standard SVG into the format Sugar expects, let's consider a really simple SVG. We define the width and height of the canvas to be 55px, which is the maximum size for "standard" icons, and the required canvas size. The recommended size for icons is 45px, which is the area we fill with the rect. By defining the 55px rect for the icon, we naturally define some padding, which gives you as the icon designer the ability to position the icon within the 55px canvas to give it proper "visual weight". In other words, it should ''appear'' to be centered within the padded 55px region, even if it technically is not.

<nowiki>
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" width="55" height="55">
<rect x="5" y="5" width="45" height="45" stroke="#666666" fill="#FFFFFF" stroke-width="3.5"/>
</svg>
</nowiki>

''Note: If you wish to use Inkscape to create your icons, and subsequently insert the entities by hand, we recommend using the "Save As" command and choosing the "Plain SVG" file format to produce more readable SVGs.''

====Defining Entities====

To prepare our SVG for use in Sugar, we need to define the entities which Sugar expects. To do this, we add an entity declaration block inside the DOCTYPE. For clarity, we'll define them to have the same colors as the SVG we started with, which also happens to have the recommended default colors for activity icons. Additions and changes are highlighted in green:

<nowiki>
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"</nowiki><font color='#009900'><nowiki> [
<!ENTITY stroke_color "#666666">
<!ENTITY fill_color "#FFFFFF">
]</nowiki></font><nowiki>>
<svg xmlns="http://www.w3.org/2000/svg" width="55" height="55">
<rect x="5" y="5" width="45" height="45" stroke="#666666" fill="#FFFFFF" stroke-width="3.5"/>
</svg>
</nowiki>

====Inserting Entity References====

Next, we have to make use of the defined entities by replacing all occurrences of those colors within the body of the SVG. Entity references begin with an ampersand (&) an end with a semi-colon (;), with their name in the middle (eg. <tt>&stroke_color;</tt>). Note that if we had a more complex SVG, it may be appropriate to set some fills to the stroke color, and some strokes to the fill color, within the rules set forth in the HIG for [[OLPC_Human_Interface_Guidelines/The_Sugar_Interface/Icons#Strokes_.26_Fills | strokes and fills]]

<nowiki>
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
<!ENTITY stroke_color "#666666">
<!ENTITY fill_color "#FFFFFF">
]>
<svg xmlns="http://www.w3.org/2000/svg" width="55" height="55">
<rect x="5" y="5" width="45" height="45" stroke="</nowiki><font color='#009900'><nowiki>&stroke_color;</nowiki></font><nowiki>" fill="</nowiki><font color='#009900'><nowiki>&fill_color;</nowiki></font><nowiki>" stroke-width="3.5"/>
</svg>
</nowiki>

== See also ==
*[[OLPC Human Interface Guidelines/The Sugar Interface/Icons]]
*[[Svg-grabber.py|Download .svg collection]] (~800 non-sugar svg's)

[[Category:Sugar]]
[[Category:HowTo]]

Development Team/Almanac/Making Icons

2008-07-15T16:32:22Z

Bjordan: /* Downloads */

{{TOCright}}

==Icon Format==

====Scalable Vector Graphics====

Icons designed for Sugar should have the [http://www.w3.org/Graphics/SVG/ SVG] file format. This Scalable Vector Graphic format allows Sugar to dynamically scale and color the icons without any degradation in quality. Thus, variably sized representations of particular icons may exist depending on their context in the interface. Additionally, this provides support for dynamic coloring of activity and object icons based upon a child's chosen XO colors, [[OLPC_Human_Interface_Guidelines/The_Sugar_Interface/Colors#Imbuing%20Color%20with%20Meaning|imbuing them with identity]].

====Defining Entities====

To aid in the dynamic colorization of sugar icons, we take advantage of [http://xmlwriter.net/xml_guide/entity_declaration.shtml entitites] within the [http://wiki.svg.org/Doctype DOCTYPE] declaration. The inserted entities act like variables whose values are inserted at any location in the SVG where the entity is referenced. Making sure that these entities are inserted correctly is essential to creating proper icons for use in Sugar.

The two entities required for Sugar icons are:

# <tt>stroke_color</tt>
# <tt>fill_color</tt>

To see an example of the XML format used to define these entities, please refer to the section below on [[#Defining_Entities_2 | hacking]] Sugar icons by hand.

==Getting Started==

====Finding an SVG Editor====

In order to create icons in the SVG format, you'll need to get your hands on a suitable editor. There are a number of [http://en.wikipedia.org/wiki/List_of_vector_graphics_editors options] available, and you are free to choose any that suits your particular needs. One of the most commonly used is [http://www.inkscape.org/ Inkscape], an open source vector graphics editor with a comprehensive toolset and WC3 and CSS standards compliance. In addition, Inkscape has a commitment to multilingual support and maintains ongoing translation efforts.

There are also a number of [http://en.wikipedia.org/wiki/List_of_vector_graphics_editors#Commercial_software commercial editors] which you are welcome to use as well, should you have access to such resources.

Unfortunately, no suitable vector editing tools are available as activities for the XO laptops at present. We acknowledge this omission, and hope to provide a vector-based "Draw" activity (to supplement the bitmap-based "Paint" activity) in order to provide the proper tools for icon generation on the laptops themselves in the future.

Kidscape aka inkscape child friendly version(olpc): https://bugs.launchpad.net/inkscape/+bug/170488 please cc yourself to this bug, and comment as appropriate.

====Templates====

To make it simpler to create new icons for use in Sugar, we've created some template SVGs. Though any of these template files should be editable with your choice of SVG editor, those with specific affiliations have been tweaked to make their presentation in their associated editors more natural, and their interaction with our scripts much cleaner. The third template is an extremely minimal example which is designed for those who wish to edit SVGs manually, or for those that wish to use other editors.

=====Downloads=====
These are pointers to the wiki pages for the icons. Click through to these pages (don't "save as", yet!)
* [[:image: icon_template.inkscape.svg | icon_template.inkscape.svg]]
* [[:image: icon_template.illustrator.svg | icon_template.illustrator.svg]]
* [[:image: icon_template.generic.svg | icon_template.generic.svg]]

=====Guide=====

The non-generic template files have some extra elements within them that may make things easier for you as you create your icons. For instance, they have a guide layer which clearly denotes both the recommended (45px) and maximum (55px) areas that your icon must fit within. This layer may also be useful for previewing your icons against a dark background while editing them.

=====Swatches=====

They also contain a swatches layer which offers some small squares in all possible combinations of the default stroke and fill colors. In Illustrator you can paint a shape in your icon by selecting it, then pressing 'i' to select the Eyedropper tool, and finally clicking on the swatch of your choice to automatically apply both the stroke and fill properties of the swatch to the selection, adding or removing the stroke or fill completely as necessary.

You can accomplish something somewhat similar in Inkscape by selecting the eyedropper tool (F7). With the tool selected, you can click on a color to set the fill, or shift-click to set the stroke. Unfortunately, there doesn't seem to be a way to set both stroke and fill from a swatch with one click, nor is there a way to remove a stroke or fill by clicking on a swatch without those properties. You can, however, add strokes and fills via this method when the selected shape has none; you may also remove a stroke or a fill by checking the "pick alpha" checkbox and then clicking outside of the canvas area with or without shift, respectively.

====Designing Icons====

Sugar icons should all follow the [[OLPC_Human_Interface_Guidelines/The_Sugar_Interface/Icons | icon design guidelines]] set forth in the Sugar Human Interface Guidelines. For information about the various types of icons and their appearances including size, colors, and layout, please refer to the HIG.

=====Default Colors=====

COMING SOON...

=====Visual Weight=====

COMING SOON...

=====Strokes and Fills=====

COMING SOON...

==Sugarizing Icons==

===The Script===

In order to streamline the process of creating sugar compatible icons, we provide the [[media: sugar-iconify.py | sugar-iconify]] script. This script takes an SVG file as input and outputs a new SVG (or SVGs) containing the proper entity definitions. It offers a number of command-line flags for performing variations on this process to fit smoothly into your workflow. You can view all of the available options by running <tt>sugar-iconify -h</tt> from the command line, or by viewing the dedicated [[Sugar-iconify | usage page]]. Some specific examples and use cases are illustrated below in more detail.

=====Download=====

* [[media: sugar-iconify.py | sugar-iconify.py]]

===Basic Conversion===

COMING SOON...

===Icon Sets===

http://www.openicon.org is a search engine for svg icons.
please add any icon sets using the validator.

==Hacking by Hand==

SVG adheres to the common [http://www.w3.org/XML/ XML] format, and as such may be edited within any standard text editor. For those that are interested in the internal details, don't have access to visual editing tools, or simply like the thrill of crafting their icons by hand, with the associated control, please enjoy this section.

====A Simple SVG====

You're free to examine the [http://www.w3.org/TR/SVG/ SVG 1.1 specification] in order to create icons of any complexity you desire. For the purposes of demonstrating the conversion of a standard SVG into the format Sugar expects, let's consider a really simple SVG. We define the width and height of the canvas to be 55px, which is the maximum size for "standard" icons, and the required canvas size. The recommended size for icons is 45px, which is the area we fill with the rect. By defining the 55px rect for the icon, we naturally define some padding, which gives you as the icon designer the ability to position the icon within the 55px canvas to give it proper "visual weight". In other words, it should ''appear'' to be centered within the padded 55px region, even if it technically is not.

<nowiki>
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" width="55" height="55">
<rect x="5" y="5" width="45" height="45" stroke="#666666" fill="#FFFFFF" stroke-width="3.5"/>
</svg>
</nowiki>

''Note: If you wish to use Inkscape to create your icons, and subsequently insert the entities by hand, we recommend using the "Save As" command and choosing the "Plain SVG" file format to produce more readable SVGs.''

====Defining Entities====

To prepare our SVG for use in Sugar, we need to define the entities which Sugar expects. To do this, we add an entity declaration block inside the DOCTYPE. For clarity, we'll define them to have the same colors as the SVG we started with, which also happens to have the recommended default colors for activity icons. Additions and changes are highlighted in green:

<nowiki>
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"</nowiki><font color='#009900'><nowiki> [
<!ENTITY stroke_color "#666666">
<!ENTITY fill_color "#FFFFFF">
]</nowiki></font><nowiki>>
<svg xmlns="http://www.w3.org/2000/svg" width="55" height="55">
<rect x="5" y="5" width="45" height="45" stroke="#666666" fill="#FFFFFF" stroke-width="3.5"/>
</svg>
</nowiki>

====Inserting Entity References====

Next, we have to make use of the defined entities by replacing all occurrences of those colors within the body of the SVG. Entity references begin with an ampersand (&) an end with a semi-colon (;), with their name in the middle (eg. <tt>&stroke_color;</tt>). Note that if we had a more complex SVG, it may be appropriate to set some fills to the stroke color, and some strokes to the fill color, within the rules set forth in the HIG for [[OLPC_Human_Interface_Guidelines/The_Sugar_Interface/Icons#Strokes_.26_Fills | strokes and fills]]

<nowiki>
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
<!ENTITY stroke_color "#666666">
<!ENTITY fill_color "#FFFFFF">
]>
<svg xmlns="http://www.w3.org/2000/svg" width="55" height="55">
<rect x="5" y="5" width="45" height="45" stroke="</nowiki><font color='#009900'><nowiki>&stroke_color;</nowiki></font><nowiki>" fill="</nowiki><font color='#009900'><nowiki>&fill_color;</nowiki></font><nowiki>" stroke-width="3.5"/>
</svg>
</nowiki>

== See also ==
*[[OLPC Human Interface Guidelines/The Sugar Interface/Icons]]
*[[Svg-grabber.py|Download .svg collection]] (~800 non-sugar svg's)

[[Category:Sugar]]
[[Category:HowTo]]

Development Team/Almanac/Making Icons

2008-07-15T16:32:06Z

Bjordan: /* Downloads */

{{TOCright}}

==Icon Format==

====Scalable Vector Graphics====

Icons designed for Sugar should have the [http://www.w3.org/Graphics/SVG/ SVG] file format. This Scalable Vector Graphic format allows Sugar to dynamically scale and color the icons without any degradation in quality. Thus, variably sized representations of particular icons may exist depending on their context in the interface. Additionally, this provides support for dynamic coloring of activity and object icons based upon a child's chosen XO colors, [[OLPC_Human_Interface_Guidelines/The_Sugar_Interface/Colors#Imbuing%20Color%20with%20Meaning|imbuing them with identity]].

====Defining Entities====

To aid in the dynamic colorization of sugar icons, we take advantage of [http://xmlwriter.net/xml_guide/entity_declaration.shtml entitites] within the [http://wiki.svg.org/Doctype DOCTYPE] declaration. The inserted entities act like variables whose values are inserted at any location in the SVG where the entity is referenced. Making sure that these entities are inserted correctly is essential to creating proper icons for use in Sugar.

The two entities required for Sugar icons are:

# <tt>stroke_color</tt>
# <tt>fill_color</tt>

To see an example of the XML format used to define these entities, please refer to the section below on [[#Defining_Entities_2 | hacking]] Sugar icons by hand.

==Getting Started==

====Finding an SVG Editor====

In order to create icons in the SVG format, you'll need to get your hands on a suitable editor. There are a number of [http://en.wikipedia.org/wiki/List_of_vector_graphics_editors options] available, and you are free to choose any that suits your particular needs. One of the most commonly used is [http://www.inkscape.org/ Inkscape], an open source vector graphics editor with a comprehensive toolset and WC3 and CSS standards compliance. In addition, Inkscape has a commitment to multilingual support and maintains ongoing translation efforts.

There are also a number of [http://en.wikipedia.org/wiki/List_of_vector_graphics_editors#Commercial_software commercial editors] which you are welcome to use as well, should you have access to such resources.

Unfortunately, no suitable vector editing tools are available as activities for the XO laptops at present. We acknowledge this omission, and hope to provide a vector-based "Draw" activity (to supplement the bitmap-based "Paint" activity) in order to provide the proper tools for icon generation on the laptops themselves in the future.

Kidscape aka inkscape child friendly version(olpc): https://bugs.launchpad.net/inkscape/+bug/170488 please cc yourself to this bug, and comment as appropriate.

====Templates====

To make it simpler to create new icons for use in Sugar, we've created some template SVGs. Though any of these template files should be editable with your choice of SVG editor, those with specific affiliations have been tweaked to make their presentation in their associated editors more natural, and their interaction with our scripts much cleaner. The third template is an extremely minimal example which is designed for those who wish to edit SVGs manually, or for those that wish to use other editors.

=====Downloads=====
These are pointers to the wiki pages on the icons. Click through to these pages (don't "save as", yet!)
* [[:image: icon_template.inkscape.svg | icon_template.inkscape.svg]]
* [[:image: icon_template.illustrator.svg | icon_template.illustrator.svg]]
* [[:image: icon_template.generic.svg | icon_template.generic.svg]]

=====Guide=====

The non-generic template files have some extra elements within them that may make things easier for you as you create your icons. For instance, they have a guide layer which clearly denotes both the recommended (45px) and maximum (55px) areas that your icon must fit within. This layer may also be useful for previewing your icons against a dark background while editing them.

=====Swatches=====

They also contain a swatches layer which offers some small squares in all possible combinations of the default stroke and fill colors. In Illustrator you can paint a shape in your icon by selecting it, then pressing 'i' to select the Eyedropper tool, and finally clicking on the swatch of your choice to automatically apply both the stroke and fill properties of the swatch to the selection, adding or removing the stroke or fill completely as necessary.

You can accomplish something somewhat similar in Inkscape by selecting the eyedropper tool (F7). With the tool selected, you can click on a color to set the fill, or shift-click to set the stroke. Unfortunately, there doesn't seem to be a way to set both stroke and fill from a swatch with one click, nor is there a way to remove a stroke or fill by clicking on a swatch without those properties. You can, however, add strokes and fills via this method when the selected shape has none; you may also remove a stroke or a fill by checking the "pick alpha" checkbox and then clicking outside of the canvas area with or without shift, respectively.

====Designing Icons====

Sugar icons should all follow the [[OLPC_Human_Interface_Guidelines/The_Sugar_Interface/Icons | icon design guidelines]] set forth in the Sugar Human Interface Guidelines. For information about the various types of icons and their appearances including size, colors, and layout, please refer to the HIG.

=====Default Colors=====

COMING SOON...

=====Visual Weight=====

COMING SOON...

=====Strokes and Fills=====

COMING SOON...

==Sugarizing Icons==

===The Script===

In order to streamline the process of creating sugar compatible icons, we provide the [[media: sugar-iconify.py | sugar-iconify]] script. This script takes an SVG file as input and outputs a new SVG (or SVGs) containing the proper entity definitions. It offers a number of command-line flags for performing variations on this process to fit smoothly into your workflow. You can view all of the available options by running <tt>sugar-iconify -h</tt> from the command line, or by viewing the dedicated [[Sugar-iconify | usage page]]. Some specific examples and use cases are illustrated below in more detail.

=====Download=====

* [[media: sugar-iconify.py | sugar-iconify.py]]

===Basic Conversion===

COMING SOON...

===Icon Sets===

http://www.openicon.org is a search engine for svg icons.
please add any icon sets using the validator.

==Hacking by Hand==

SVG adheres to the common [http://www.w3.org/XML/ XML] format, and as such may be edited within any standard text editor. For those that are interested in the internal details, don't have access to visual editing tools, or simply like the thrill of crafting their icons by hand, with the associated control, please enjoy this section.

====A Simple SVG====

You're free to examine the [http://www.w3.org/TR/SVG/ SVG 1.1 specification] in order to create icons of any complexity you desire. For the purposes of demonstrating the conversion of a standard SVG into the format Sugar expects, let's consider a really simple SVG. We define the width and height of the canvas to be 55px, which is the maximum size for "standard" icons, and the required canvas size. The recommended size for icons is 45px, which is the area we fill with the rect. By defining the 55px rect for the icon, we naturally define some padding, which gives you as the icon designer the ability to position the icon within the 55px canvas to give it proper "visual weight". In other words, it should ''appear'' to be centered within the padded 55px region, even if it technically is not.

<nowiki>
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" width="55" height="55">
<rect x="5" y="5" width="45" height="45" stroke="#666666" fill="#FFFFFF" stroke-width="3.5"/>
</svg>
</nowiki>

''Note: If you wish to use Inkscape to create your icons, and subsequently insert the entities by hand, we recommend using the "Save As" command and choosing the "Plain SVG" file format to produce more readable SVGs.''

====Defining Entities====

To prepare our SVG for use in Sugar, we need to define the entities which Sugar expects. To do this, we add an entity declaration block inside the DOCTYPE. For clarity, we'll define them to have the same colors as the SVG we started with, which also happens to have the recommended default colors for activity icons. Additions and changes are highlighted in green:

<nowiki>
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"</nowiki><font color='#009900'><nowiki> [
<!ENTITY stroke_color "#666666">
<!ENTITY fill_color "#FFFFFF">
]</nowiki></font><nowiki>>
<svg xmlns="http://www.w3.org/2000/svg" width="55" height="55">
<rect x="5" y="5" width="45" height="45" stroke="#666666" fill="#FFFFFF" stroke-width="3.5"/>
</svg>
</nowiki>

====Inserting Entity References====

Next, we have to make use of the defined entities by replacing all occurrences of those colors within the body of the SVG. Entity references begin with an ampersand (&) an end with a semi-colon (;), with their name in the middle (eg. <tt>&stroke_color;</tt>). Note that if we had a more complex SVG, it may be appropriate to set some fills to the stroke color, and some strokes to the fill color, within the rules set forth in the HIG for [[OLPC_Human_Interface_Guidelines/The_Sugar_Interface/Icons#Strokes_.26_Fills | strokes and fills]]

<nowiki>
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
<!ENTITY stroke_color "#666666">
<!ENTITY fill_color "#FFFFFF">
]>
<svg xmlns="http://www.w3.org/2000/svg" width="55" height="55">
<rect x="5" y="5" width="45" height="45" stroke="</nowiki><font color='#009900'><nowiki>&stroke_color;</nowiki></font><nowiki>" fill="</nowiki><font color='#009900'><nowiki>&fill_color;</nowiki></font><nowiki>" stroke-width="3.5"/>
</svg>
</nowiki>

== See also ==
*[[OLPC Human Interface Guidelines/The Sugar Interface/Icons]]
*[[Svg-grabber.py|Download .svg collection]] (~800 non-sugar svg's)

[[Category:Sugar]]
[[Category:HowTo]]