S60 5th Edition: Mobile Paint Example
-------------------------------------------------------------------------------
This C++ code example demonstrates drawing and other touch UI features of S60 5th Edition with direct manipulation using, for example, CCoeControl::EnableDragEvents(). The application provides a number of drawing options that can be selected from a toolbar. There are two toolbar options, CAknToolbar and a custom floating toolbar. All application graphics have been implemented as Scalable Vector Graphics Tiny (SVGT) icons. The example application has been developed for S60 5th Edition and touch UI.
-------------------------------------------------------------------------------
PREREQUISITES
- Symbian OS key concepts
--------------------------------------------------------------------------------
IMPORTANT CLASSES
MobilePaintAppView.h : Main application view (CCoeControl) that handles image buffering.
CToolbarControl.h : Custom toolbar UI control derived from CCoeControl.
CSvgHandler.h : Loads all graphics for the application.
CDrawingEngine.h : All user-actioned drawing is handled here.
CSplashScreenDialog.h : Custom dialog that acts as application splash screen. Dialog hides itself automatically after 2 seconds.
Classes: CCoeControl, MTouchFeedback, CFbsBitmap, CFbsBitGc, CFbsBitmapDevice, CAknToolbar, CAknToolbarExtension, MAknToolbarObserver
--------------------------------------------------------------------------------
TOUCH UI SUPPORT
Dragging is enabled in MobilePaintAppView::ConstructL() with CCoeControl::EnableDragEvents().
Listening for pointer events is implemented in MobilePaintAppView::HandlePointerEventL().
In this kind of custom control the base class virtual method has to be implemented
to receive pointer events. AVKON-based controls have implemented this method
and they receive and handle pointer events. CToolbarControl listens for its own
pointer events in CToolbarControl::HandlePointerEventL().
MTouchFeedback is touch feedback for the user. It is used to vibrate the device
when the user taps the toolbar control.
In the example application, the toolbar is implemented by default as a floating custom component (CToolbarControl) to provide fully optimized size and features. Note that there is also a similar S60 component, CAknToolbar, available that is easier to use but has limited possibilities for optimization. It can be enabled by uncommenting the ENABLE_AVKON_TOOLBAR flag in the MobilePaint.mmp file.
For more information on the S60 Toolbar API, see the documentation in the S60 5th Edition C++ Developer’s Library: http://library.forum.nokia.com/topic/S60_5th_Edition_Cpp_Developers_Library/GUID-B05B61B8-1217-441F-BAFA-C209C8F123C5.html
--------------------------------------------------------------------------------
CUSTOM TOOLBAR IMPLEMENTATION
A custom CToolbarControl (used by default in the application) is derived from CCoeControl. It is a child UI control of MobilePainAppView. MobilePaintAppView redirects pointer events to the toolbar if it is tapped and the toolbar must handle these events. The toolbar calculates the location of the buttons in CToolBarControl:SizeChanged() and draws the buttons as CFbsBitmap in CToolBarControl::Draw(). The toolbar can also handle dragging events in CToolBarControl::HandlePointerEvents() if the user wants change its location. The tool selection is saved in the memory.
--------------------------------------------------------------------------------
RUNNING THE EXAMPLE
Drawing can be done with a finger or stylus (for more accurate drawing).
By default, the application provides a floating custom toolbar with various drawing options: pencil, line, rectangle, circle, line width, colour, undo (one step back), and an empty board. The toolbar location can be changed by dragging it.
If CAknToolbar is used, the position of the toolbar is fixed. The toolbar is also bigger and thus has fewer buttons. See the Touch UI Support section of this release note for more information on how to take CAknToolbar into use.
The Options menu provides the saving option for the current drawing. The image
is saved in JPEG format into c:\data\images.
The example application does not support picture browsing. Browsing pictures from the c:\data\images folder can be done with any image viewer application (for example, the ImageConverter Example, available for download at:
--------------------------------------------------------------------------------
BUILD & INSTALLATION INSTRUCTIONS
MOBILE DEVICE
------------------
Go to /MobilePaintExample/group
bldmake bldfiles
abld build gcce urel
Go to /MobilePaintExample/sis
Edit the MobilePaintExample_S60_5_0_v_1_0_0.pkg's paths to match those on your system.
makesis MobilePaintExample_S60_5_0_v_1_0_0.pkg
Sign the SIS package:
Sign the sis file (find out more about signing the sis file and
developer certificate at www.symbiansigned.com):
signsis MobilePaintExample_S60_5_0_v_1_0_0.sis MobilePaint_S60_5_0_v_1_0_0_selfs.sis YourCertificate.cer YourKey.key YourPassword
Install the signed .sis file to an S60 5th Edition device.
EMULATOR
------------------
Go to /MobilePaintExample/group
bldmake bldfiles
abld build wins udeb
Start the emulator.
--------------------------------------------------------------------------------
COMPATIBILITY
S60 5th Edition
TESTED WITH Nokia 5800 XpressMusic
Created / tested with S60 5th Edition SDK.
--------------------------------------------------------------------------------
VERSION HISTORY
1.0 First release.
--------------------------------------------------------------------------------
EVALUATE THIS RESOURCE
Please spare a moment to help us improve documentation quality and recognise
the examples you find most valuable, by rating this resource.