Slider Puzzle
From WorldWideWorkshop-OLPC wiki
Latest Development Updates
OCTOBER 30, 2007 (CARLOS)
- Bumped version to 3.
- Removed runtime dependency to Creative Center. The code for development still lives there, because it is shared across activities, but the deployed bundle no longer depends on having Creative Center installed.
- New icon as designed by Rich.
OCTOBER 26, 2007 (CARLOS)
- Images where missing from the MANIFEST, and thus the bundle.
- Disabled buttons are now grayed out.
- Improved feedback on buddy state changes.
As usual, don't forget to grab the updated Creative Center.
OCTOBER 17, 2007 (CARLOS)
- Better user feedback on shared mode.
- Full screen interface attempt.
- Made activity visible in the Home activity bar.
- lesson plans where missing from MANIFEST, and thus not included in the bundle.
- Slider integration with the Journal and Mesh collaboration is done.
OCTOBER 04, 2007 (CARLOS)
Changed to support new image loading from Journal.
Beware that as things are, sharing and storing puzzles using images from the Journal does not work. Will have to look into that now.
Don't forget to update the Creative Center too!
SEPTEMBER 17, 2007 (CARLOS)
Just a small bugfix release for a tiny bug that doesn't really get triggered right now, but could be in the future.
SEPTEMBER 10, 2007 (CARLOS)
- Journal integration is back
- Mesh contest mode is working
- Slider is now using the shared code and images from Creative Center
Known issues:
- No real testing has been done on the many ways you can start and use the mesh contest mode.
JULY 20, 2007 (CARLOS): Small updates to 1.2
- Lesson plan tabs now have arrow buttons to navigate the hidden lesson tabs.
- Added thumb for sequencing puzzles.
- Added all available translations on the wiki, and Shannon's Spanish UI translations too.
Known issues:
- I tried to implement a fullscreen mode, but it's just too ugly and pixelized, so I dropped it.
- The lesson plans do have a tendency to kill the activity, but that is derived from the Abiword widget, so since I'm hoping for having time to investigate alternatives/upgrades on this issue, for both Slider and Teacher Center, I don't think it's wise to waste any more time on this right now.
- The extra wide left margin on the lessons are left untouched due to the exact same logic as above.
JULY 16, 2007 (CARLOS): Back to 1.2
- Implemented larger interface, but it is hardly noticeable on the XO.
- Sequencing puzzles are in. The files to create them (both puzzle and thumbnail) and two simple lines of python code, so it's easy to extend.
- Lesson plans updated with new Lesson 6, old 6 moved to 7 and available Spanish and Portuguese translations included.
- Partial mesh support. The contest mode isn't usable in build 432 without major changes that would be thrown away when we update sugar, but the part that handles the image and shuffle state works fine, so if you share your Slider, other users can connect and get your image and state, but only the image you have when remotes connect. Initiator changing images thereafter does not change remote sliders, but they can always close and rejoin to get the updated image.
Known issues:
- We probably need more international friendly sequence puzzles, at least for the alphabet, as not all locales use the same one (Portuguese does not use the K, W and Y letters, for example). I'll need some guidance on this one.
- Only 5 Lesson tabs are fully visible, one is partially hidden and two other are completely unaccessible. I'll have to work on that one later.
- No Spanish translation for the buttons yet. I'll provide the community with a translation file later.
- The Idea Girl callback should not be implemented at this stage, as the way that works on build 432 has already suffered deep changes compared to current Sugar implementations. I'm postponing this one to after we select a newer build for target.
JULY 09, 2007 (CARLOS): 1.3 Draft 2
- Full contest mode should be in place.
- Both bundled and custom images can be used, with the bundled being referenced by name and custom transfered to peers.
- Game starts with the same shuffle state for all peers, even if initiator shares after starting to play.
- Buttons change name and action when in contest mode.
- A buddies panel uses the game area, showing state for all contestants.
- Many parts fairly untested, still alpha quality.
JUNE 19, 2007 (CARLOS): Small fix to 1.1
- Updated the lesson plans to match the ones emailed to me, changing them to the same page and font size that we were using previously.
- Because 'Overview' should come first and 'O' comes after 'L' alphabetically (and I am sorting the lesson entries) we can now use a single digit as prefix to a folder name inside the lesson plans; it will be taken into account while sorting but removed before rendering ('Overview' is inside a folder called '0Overview' now).
JUNE 15, 2007 (CARLOS): Version 1.1 upgraded
- Arrows for image selection changed to the ones supplied by Shannon. This means another redesign for the sizes of things, as it made the buttons taller, and that in turn made the game area have a top and bottom blank area. Now the game area is 520 pixels squared, and since the subject thumb was now smaller that the buttons, I bumped that up to 48 pixels squared, also on the subject selection widget.
- The toolbar title is now resized to fit the text, but I was told by eben that will not be needed in the future, as the toolbar will be greatly enhanced. For now this will do.
- My Own Picture storage changed places. I had to move it away from the activity installation path and into the user home dir (it's now inside "~/.sugar/default/org.worldwideworkshop.olpc.SliderPuzzle.MyOwnPictures"). The reason for this change should have been obvious in the past, as the activity path is not to be writable by the user, but since it actually is in the test environment, I failed to spot it. In the future we should probably use the datastore service for this, but I will need to investigate/ask around first.
- This activity no longer appears in the sugar launcher.
- Lessons had their font size increased.
- If you select a subject with no images (only happens in My Own Pictures) the load picture from file dialog will pop up.
JUNE 12, 2007 (CARLOS): Version 1.1 for show and tell
I'm still making it work correctly on the XO, but these are the changes that will be in today for the Slider:
- Fixed space above and below the game area.
- Fixed width on buttons for selecting the number of slices.
- Fixed width for timer widget.
- Using a darker green on the 'Timer:' text.
- Changed 'Jumble' to 'Shuffle'
- Changed the category header to 'Choose a Subject'
- Changed the category names according to Shannon's email.
- Added My Own Pictures category, that collects all images opened by clicking the 'My Own Picture' button
I'm doing links instead of copying files (in fact I'm using text files with the path to the image). These get checked for existence when the category chooser appears and broken links are removed. The space implications on this approach are minimal, but to make it practical to use, I think we should limit the number of entries, so it doesn't grow forever. I'm open to suggestions as to how many entries we should allow :)
- Lesson plans live inside the folder lessons, each in one subfolder. They are presented in a notebook style with tabs on top, and these tabs are named after the subfolder name (translatable). Inside each subfolder an abiword file (abiword is used in the XO Write activity) called default.abw. You can add translated versions of this file by calling them (lower cased) %locale_id%.abw or %locale_id%_%encoding_id%.abw. Example, pt.abw or pt_br.abw. This is not perfect yet, and the abiword widget doesn't zoom correctly all the time, but it's a good, feature rich, proof of concept.
- Initial Journal integration! You can now resume a game from where you were when the activity was closed, by finding it in the Journal and pressing Resume. Still very untested, but the game image, thumbnail and timer are all put into a state very close to the one stored.
New sizes:
- Game image: 500x500 pixels
- Thumbnail: 180x180 pixels
JUNE 4, 2007 (CARLOS): Last before starting 1.2
Updates:
- Updated the user interface to meet the latest requirements (only the language button lacks the background color, need to look into that one in detail later).
- Broke the images in categories as I saw fit, so please comment and propose changes if needed.
- I was going to resize images so they were all the correct size for the Slider Puzzle, but that increased the file size on disk by almost 300%, so the tradeoff in space vs cpu usage doesn't really pay, I guess. Images are kept as supplied.
- The categories are now shown sorted by name, and the number of images on each one is displayed in front of the name.
- The images are also sorted by name now, so if we want to enforce any particular order we can.
- This design has the language selection in both the game UI and the toolbar. I had a chat with Eben, he's the leader UI designer for Sugar, and he feels that the toolbar is the way to go, and also that I must not change it's color. He also told me that if he had the time he'd build a mock up of the game interface as he envisions it embedded in Sugar. From this I can only ask for you to try and accept moving the language and lesson plan actions to the toolbar, where they belong.
MAY 29, 2007 (CARLOS): Almost on Version 1.1
All features from V1.0 are implemented, although the visual design and user interaction methods were not yet accepted.
New Features implemented since the version emailed on May 24:
- A new icon, between the image selector arrows, shows the current category thumbnail.
- Clicking on that icon shows (and hides) the Category Selector
- Clicking on the image thumbnail jumbles the image with the last selected number of pieces, or 9 if no selection has been done yet.
- English (being the hard coded language) and all found available translation languages will appear in a drop down box in the activity toolbar.
- Flag icons are bundled with the activity for a handful of languages (see i18n.py).
- Selecting a language changes the interface on the fly, but not the toolbar nor any system dialog (like file selection).
- The language selected on start up will depend on the system default locale.
- Shortcuts using the keyboard are available for the full game interface
'1' - select 9 pieces '2' - select 12 pieces '3' - select 16 pieces 'enter' - jumble selected image ',' - show previous image in category '.' - show next image in category '/' - show/hide Category Selector '?' - My Own Picture '=' - Solve 'Escape' or 'q' - end activity
- Images are no longer resized blindly. They are resized keeping the aspect ratio and the center cut the bigger side, if one exists.
- My Own Image button opens a file dialog to select a file based image. This is what we decided before, but will probably have to change once the Journal is feature full and stable. It's part of the interface guidelines not to give access to the filesystem, as activity objects can be found and used from the Journal. But given the Journal's current state, we'll have to use this solution for the time being.
So, the only lacking feature is the lesson plan button, which I will deal with now.
MAY 18, 2007 (CARLOS): Working toward Version 1.0
Let me start by saying I am overwhelmed with the amount of thought put into the design of th XO. It's amazing... I was stunned when I finally saw the translucid/reflective LCD at work.
About our Jumbler:
- Game logic is in, as is the processing of user events during the game (moving the pieces with keys or mouse).
- Any number of pieces can be chosen and the matrix is created from that, giving more columns than rows where a square root is not available.
- Images in all formats supported by gtk can be loaded (which include PNG, GIF, JPEG and TIFF). No resizing is done, or will be done in this version, as we control the images loaded for now.
Still missing:
1. Game end detection and visual clue (show complete image?)
2. Sugar integration (only started).
3. General User Interface:
- image selection
- jumble button
- solve button
- timer
- make things pretty
Now would be a great time to get my hands on the image library to use (or a sample of). Since our screen size is 1200x900, I guess a good image size is 600x600.
I'm attaching a snapshot of the code in development, more for safekeeping than anything else. I'm going to set up an svn repository for this project in my personal server (it's part of my backup strategy)but if you have a versioning system in place, along with the promised wiki, maybe I should just use that. Can you give me an update on that?
You can manually install this bundle on a sugar environment, or you can call the JumblerUI.py directly to see it work, but although a lot is already in place under the hood, it's not showing much yet. Best approach to see the work done is browsing the code.
I have 18 hours of work done so far, so if sugar helps me out (which it hasn't done so far, as it is under heavy development and things break more often than not), this phase will be over soon.
Best regards,
Carlos Neves
cn@sueste.net
Description & Goals
Summary
SLIDER PUZZLE is based on Jumbler, a java application hosted at MaMaMedia.com.
The original Jumbler was written in Java, and tailored to work with the community protocols of the MaMaMedia.com website. This document describes the process involved in producing a similar application called Slider Puzzle specifically tailored to the OLPC Sugar environment.
Because Sugar is itself a pygtk application, it makes sense to rebuild Slider in pygtk too. All the puzzle solving feautres will be re-created in this new version. We also plan to enhance the functionality so kids can incrporate their own drawings and photos as puzzles picutres in the Slider activity, and share puzzles and compete in solving them via the mesh.
Goals
Version 1.0 – Jumbler Puzzle solving activity on XO
Due: May 23, 2007
Description:
- Based on MaMaMedia.com activity “Jumbler”
- Re-written in Python to run locally on the XO laptop
- Full game logic and interface integrated with the OLPC framework
- Puzzle functionality to include number of pieces (9, 12, 16), timer, solve, jumble
- A filesystem based directory structure for image storage, having an intermediate directory for subject grouping
- Fixed set of images, organized by topic.
- Topics and images will be provided by WWW Foundation, as a simple create directory and copy the images effort.
Version 1.1: Turn your own drawing or photo into a puzzle
Due: May 30, 2007
Description:
- New functionality, to be written in Python to run locally on the XO laptop
- Allow user to select an image made with the XO drawing tool or camera and saved locally on the laptop, open it in the Jumbler activity, and solve it as a puzzle.
- Allow use of any image file in a supported format. (Note – let’s create a list of what formats will be allowed)
- - new from original plan - Add multiple translations user selectable on-the-fly.
- - new from original plan - Add button that opens a popup window with a text (for the lesson plan).
- - new from original plan - Add keyboard shortcuts for all game interface buttons.
Version 1.2: Mesh-based sharing of original puzzle images
Due: June 13, 2007
Description:
- New functionality, to be written in Python to run locally on the XO laptop
- Allow for sharing of original locally-stored images with others on the same activity.
- Via Mesh Network, children can find images on one another’s XO laptops or the school’s XO server, then open a friend’s image in the Jumbler puzzle and solve it.
Version 1.3 -- Mesh-based puzzle solving contest
Due: June 27, 2007
Description:
- New functionality, to be written in Python to run locally on the XO laptop
- Allow for “Contest mode” of activity sharing via Mesh Network
- Joining a shared Jumbler in Contest Mode will feed the active image to all contestants.
- Multiple players (limit?) can start with the same image shuffled the exact same way, with synchronized start and timing. The first one to solve the puzzle wins.
Collaboration
- Kids can access and solve one another's locally saved puzzles from their own XOs.
- Kids can participate in a 'contest mode' where multiple users are trying to solve the same puzzle fastest.
Visual Design
Based on the interface designed for the MyGLife.org version of Slider Puzzle (created by WWWF in 2006.) Need to incorporate buttons for "Add My Own Picture" and "Race" and "Open" and "Save" files.
Image Specs
Originally I was aiming for 600x600 pixels, which works great for landscape orientation on the XO. The space used on the left side controls in Portrait mode, on the other hand, take up too much space, so it's either use a smaller image or redesign the left frame.
I'm now using 480x480 for the puzzle and 200x200 for the thumbnail on the image selector, and it works well on both orientations, so if there is no opposition I think we could stick with these values.
Media
| Document | Description |
|---|---|
| SliderPuzzle-5.xo history | Slider Puzzle bundle, updated January 14, 2008. |
| SliderPuzzle-3.xo history | Slider Puzzle bundle, updated October 30, 2007. |
| SliderPuzzle-2.xo history | Slider Puzzle bundle, updated October 26, 2007. |
| SliderPuzzle-2.xo history | Slider Puzzle bundle, updated October 17, 2007. |
| SliderPuzzle-2.xo history | Slider Puzzle bundle, updated October 04, 2007. |
| SliderPuzzle-2.xo history | Slider Puzzle bundle, updated September 17, 2007. |
| SliderPuzzle-2.xo history | Slider Puzzle bundle, updated September 10, 2007. |
| SliderPuzzle-2.xo history | Slider Puzzle bundle, from July 20, 2007. V1.2, just a small update. |
| SliderPuzzle-2.xo history | Slider Puzzle bundle, from July 16, 2007. Back to V1.2, for the next MaMaMedia release. |
| SliderPuzzle-2.xo history | Slider Puzzle bundle, from July 9, 2007. Second alpha with mesh contest support. |
| SliderPuzzle-2.xo history | Slider Puzzle bundle, from July 2, 2007. First alpha with mesh contest support. |
| Slider_Puzzle-1.xo history | Slider Puzzle bundle, from June 20, 2007. Just a maintenance release, no new features. |
| Slider_Puzzle-1.xo history | Slider Puzzle bundle, from June 19, 2007. |
| Slider_Puzzle-1.xo history | Slider Puzzle bundle, from June 15, 2007. |
| Slider_Puzzle-1.xo history | Slider Puzzle bundle, from June 13, 2007, with new logo and lesson plans with a bit bigger text font. |
| Slider_Puzzle-1.xo history | Slider Puzzle bundle, last updated June 12, 2007 (2nd version for the day). |
| Slider_Puzzle-1.xo history | Slider Puzzle bundle, last updated June 12, 2007. |
| Slider_Puzzle-1.xo.zip history | Slider Puzzle bundle, last updated June 4, 2007. |
| Visual_Design_notes_for_MMM_OLPC_Slider.doc history | A write-up with embedded mock up of the design needs for this version of Slider. |
| SliderFlash.zip history | Original .swf and .fla files from our Flash-based version of SLIDER PUZZLE. For the XO, we prefer this interface over the original JUMBLER activity on MMM.com. |
| Jumbler_starter_pics.zip history | Original drawings kids submitted to MaMaMedia; Choose ten (10) to resize and include in Slider for XO |
| Slider_design_PSD.zip history | Updated Interface design for Slider Puzzle on XO |
| GameLogoCharacter.psd history | NEW .psd file for updated MaMaMedia logo and character (to be included on activity interface, as indicated in wireframes |
| Slider Puzzle logo history | NEW .png file for updated MaMaMedia logo and character (to be included on activity interface in upper left) |
| Enlarged Slider Interface history | NEW upload on June 26 - Larger interface layout, to be implemented for v1.2 |
Screenshots
 Category Selector |
 Puzzle solving |
 Graphic Design for interface |
Development
Feature Requests
New features requested include:
- View source button, as requested by Idit's email (2007/05/23).
The Sugar interface already has that functionality in the make. see Special keys in [Sugar interface - Description of keys] or go directly to [OLPC Human Interface Guidelines/The Laptop Experience/View Source]. This is tied up with the Develop activity, and I don't know the current state on this pair but duplicating the effort does not seem worth it.
Implementation Discussion
Activity Bundle Size
I have been asked how many images we should bundle, what is the target bundle size, but having no knowledge of guidelines on the matter, I asked on #sugar and got the following reply:
- As little as possible
- If under 1MB it's OK
- If over 10MB we won't make many friends
The current bundle size, with 49 gifs (albeit smaller than our target size), 2 thumbs and 3 images in vector format, including one translation file and 16 flag icons (and all source code, of course) is just over 400K, meaning we can easily have 10 categories with 10 images each and still be within the 1M boundary. But please experiment with file formats and quality/compression ratios, because the image quality is really not that important when using it in the slider puzzle :)
The image storage system
Images for Slider Puzzle use, in version 1.0, are only those we supply. Storage of these images follows some rules:
- Any format gtk accepts is OK, but obviously smaller is better.
- The Game Area size at present is of 480x480. There is no use in having images bigger than that, and smaller images may loose quality. Also, non square images will get streched to fit the exact size.
- Image categories are stored in the images/ directory inside the activity.
* Each category is a simple directory * Images inside the category must be named image_*, and the format will be auto detected. * The thumbnail shown for each category is the file with a name matching the pattern thumb.*
- If a category does not have a thumb.* file, then the default_thumb.* matching file inside the images/ directory will be used.
- The directory names used for the categories are also translated if the key exists in the language bundles.
Some of the things I feel need to be addressed:
- How will we cut images loaded by the kids? My proposal is fit the smallest direction and cut the edges of the other direction:
* Image = 640x480, will keep the 480 height and use the center of the 640 (cutting 80 pixels on each side) * Image = 240x400, scale to the smalles side (240->480), so we get 480x800. Cut the top and bottom by 160 pixels each. * you get the picture :)
- Should we have a 'Use My Own Picture' instead of 'Add My Own Picture'? The XO has space constraints so maybe a dynamic resize of an external picture every time it is needed is in order. On the other hand, having the category aggregation of images, a category 'My Personal Images' would make sense, even if it wastes space as they will almost always exist somewhere else on the filesystem.
- What is the reasoning behind the 'Save' button? I'm assuming it only makes sense if we have a shared puzzle where we are acting as clients, with an image fed from the initiating laptop.
- I haven't dug into the subject yet, but I guess some of the UI (open and save maybe, share and close for sure) will be placed on the sugar default top toolbar.
- MaMaMedia's jumbler has a timer that can be hidden but not stopped. It kind of defeats the purpose of having a disable function on the timer, imo. So I'll try to do it this way: Hiding the timer actually stops it, and it's up to the player to be honest about it's use. Switching out of of the activity is detectable so the timer will be frozen while the activity is not shown. When we have the contest mode up and running, while in contest the timer will not be frozen, even on activity switch (to keep all timers sync'd). What do you think?
Version History
Source
none available
RPMs
none available
Resources
- Jumbler, a java application hosted at MaMaMedia.com.
- Slider Puzzlea Flash version of Jumbler created in 2006.
- OLPC Wiki
- OLPC Sugar Activities List
- Translating Activities explains how you can add your translated resourses to this (and other) activity.
Lesson Plans
Downloadable Slider Puzzle Lessons Plans (in English)
