Sugar Standard Icons: Difference between revisions

From OLPC
Jump to navigation Jump to search
(→‎Standard Sugar Cursors: Add notes from my tests.)
(update repository links)
 
(4 intermediate revisions by 4 users not shown)
Line 1: Line 1:
<noinclude>
[[Category:Sugar UI]]
</noinclude>
This page is a quick tutorial on how to use the standard icons in your activities.
This page is a quick tutorial on how to use the standard icons in your activities.


Line 4: Line 7:
<div style="float:right">[[Image:Sugar-00.png]]</div>
<div style="float:right">[[Image:Sugar-00.png]]</div>


They are available at [http://dev.laptop.org/git?p=artwork;a=tree;f=cursor/sugar;h=50b23a2a6f6c73089232fd7e9a2e132a67977463;hb=HEAD dev.laptop.org/artwork]
They are available at [http://git.sugarlabs.org/projects/sugar-artwork/repos/mainline/trees/master/cursor/sugar git.sugarlabs.org/projects/sugar-artwork]


=== usage with pygame ===
=== usage with pygame ===
# Download the Sugar-Icons from [http://dev.laptop.org/git?p=artwork;a=blob;f=cursor/sugar/sugar-00.png;h=93552bff2f6960f273a9946dbb8498e51787a240;hb=HEAD here]
# Download the Sugar-Icons from [http://git.sugarlabs.org/projects/sugar-artwork/repos/mainline/blobs/master/cursor/sugar/sugar-00.png here]
# Extract the icon you want to use (36x36 px)
# Extract the icon you want to use (36x36 px)
# Enlarge the canvas to be 40x40px (or any multiple of 8)
# Enlarge the canvas to be 40x40px (or any multiple of 8)
# Save it as an .xbm image (note that if you are using Gimp, choose "Export" and do not choose "X10 Format Bitmap" for the resulting file)
# Save it as an .xbm image (note that if you are using Gimp, choose "Export" and do not choose "X10 Format Bitmap" for the resulting file)
# Create a mask. This is done with the tool [http://www.cit.gu.edu.au/~anthony/icons/support/scripts/xbm-mask xbm-mask]<br>("''xbm-mask my_cursor_file.xbm''" creates a file called "''my_cursor_file_mask.xbm''")
# Create a mask. This is done with the tool [http://www.cit.gu.edu.au/~anthony/icons/support/scripts/xbm-mask xbm-mask]<br>("''xbm-mask my_cursor_file.xbm''" creates a file called "''my_cursor_file_mask.xbm''")






# Now, in pygame you can use this code:
# Now, in pygame you can use this code:
a, b, c, d = pygame.cursors.load_xbm("my_cursor_file.xbm", "my_cursor_file_mask.xbm")
a, b, c, d = pygame.cursors.load_xbm("my_cursor_file.xbm", "my_cursor_file_mask.xbm")
Line 22: Line 31:
*# Remove the black border around the white one
*# Remove the black border around the white one
*# Save and enjoy!
*# Save and enjoy!

=== Pre-converted Examples ===
* [http://dev.laptop.org/git/projects/productive/plain/Productive.activity/data/standardcursor.xbm Arrow Cursor]
* [http://dev.laptop.org/git/projects/productive/plain/Productive.activity/data/standardcursor_mask.xbm Arrow Cursor Mask]
* [http://dev.laptop.org/git/projects/productive/plain/Productive.activity/data/handcursor.xbm Hand Cursor]
* [http://dev.laptop.org/git/projects/productive/plain/Productive.activity/data/handcursor_mask.xbm Hand Cursor Mask]

Latest revision as of 23:11, 6 July 2010


This page is a quick tutorial on how to use the standard icons in your activities.

Standard Sugar Cursors

Sugar-00.png

They are available at git.sugarlabs.org/projects/sugar-artwork

usage with pygame

  1. Download the Sugar-Icons from here
  2. Extract the icon you want to use (36x36 px)
  3. Enlarge the canvas to be 40x40px (or any multiple of 8)
  4. Save it as an .xbm image (note that if you are using Gimp, choose "Export" and do not choose "X10 Format Bitmap" for the resulting file)
  5. Create a mask. This is done with the tool xbm-mask
    ("xbm-mask my_cursor_file.xbm" creates a file called "my_cursor_file_mask.xbm")




  1. Now, in pygame you can use this code:
a, b, c, d = pygame.cursors.load_xbm("my_cursor_file.xbm", "my_cursor_file_mask.xbm")
pygame.mouse.set_cursor(a, b, c, d)
  • To get the white border around the icons, you need to make another mask:
    1. Draw a black line around the white border of the icons
    2. Save it as .xbm (eg. black pointer > white border > black border > transparency)
    3. Create a (and overwrite the old) mask-file again
    4. Remove the black border around the white one
    5. Save and enjoy!

Pre-converted Examples