1 / 68

MIDlet Programming: Part II

MIDlet Programming: Part II Low-level UI Pinata Winoto Overview Introduction Canvas (Painting) Graphics (Lines, Rectangles, and Arcs) Fonts and Styles Redrawing and Double-buffering Image and Animation Event Handling Why Low-level UI? Higher flexibility in UI design

Mia_John
Télécharger la présentation

MIDlet Programming: Part II

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. MIDlet Programming: Part II Low-level UI Pinata Winoto

  2. Overview • Introduction • Canvas (Painting) • Graphics (Lines, Rectangles, and Arcs) • Fonts and Styles • Redrawing and Double-buffering • Image and Animation • Event Handling

  3. Why Low-level UI? • Higher flexibility in UI design • Higher artistic value (colors and palettes) • Better event handling (pointer or keys) • Fit game-design requirement • Drawbacks: • more complex programming! • More device dependent

  4. Common Components • Package javax.microedition.lcdui.* • Canvas • Low-level control over the display • No title (unlike a screen) • Graphics • Provides methods to draw lines, rectangles, images, etc. to a Canvas or an Image. • Use a Canvas method paint(Graphics g) to render • Images • Artistic features in Portable Network Graphics format

  5. Show to the display Draw shapes Identify what we can use Graphics: drawLine() drawRect() Etc. Canvas: paint() repaint() Display: isColor() numColors() Retrieve and draw images Canvas Canvas: getWidth() getHeight() isDoubleBuffered() Etc. Graphics: drawImage() Image: createImage() Structure

  6. Overview • Introduction • Canvas (Painting) • Graphics (Lines, Rectangles, and Arcs) • Fonts and Styles • Redrawing and Double-buffering • Image and Animation • Event Handling

  7. Canvas • Create a class by extending Canvas class publicclass MyCanvas extends Canvas { protectedvoid paint(Graphics g) { } ……. } • Instantiate our canvas myCanvas = new MyCanvas(); myDisplay.setCurrent(myCanvas); myCanvas.repaint();

  8. Height Width Canvas Dimension Use getWidth() and getHeight()

  9. Default Coordinate System • Similar to J2SE (width, 0) (0, 0) (width, height) (0, height)

  10. How the Coordinate Work • Coordinate determine the upper-left position of the pixel --- NOT the position of the pixel • If we draw a line from (0, 0) to (3, 3) the result are 4 pixels, which can be shown as follow: (0, 0) (3, 3)

  11. Draw Background publicclass MyCanvas extends Canvas { protectedvoidpaint(Graphics g) { intwidth = getWidth(); intheight = getHeight(); //// draw a black background (default color of paint) //// g.fillRect(0, 0, width, height); } }

  12. Paused Resuming Show a red rectangle What If No Background? • Overlapping after a Paused! Background is used to clean any unwanted image…

  13. Why paint()? (OO concept ) • Both Canvas and Screen are subclasses of Displayable (remember that?) • paint( ) is the abstract method defined in the class Displayable! • Screen has implemented paint() (we don’t need to care of it!) • paint() in Canvas is still an abstract method, we need to implement it!

  14. paint() Properties • The destination is the display or back buffer (if we use double-buffering which will be explained later) • The clip region must at least one pixel • The Canvas default color is black • Default font will be used • Solid stroke will be used • The default coordinate system is in effect • The Canvas is visible

  15. repaint() • The method paint() is never to be called directly! • Use repaint() to update the display • finalvoidrepaint() --- request the canvas to be repainted • finalvoidrepaint(intx, inty, intwidth, intheight) --- request a specified region to be repainted • Will discuss it in “Redrawing and Double-buffering”

  16. Overview • Introduction • Canvas (Painting) • Graphics (Lines, Rectangles, and Arcs) • Fonts and Styles • Redrawing and Double-buffering • Image and Animation • Event Handling

  17. Graphics • A class for drawing objects/shapes into a Canvas • Not extendable! • Two ways to instantiate it • paint(Graphics g) • To paint on the Canvas • Lifetime: until the painting end • Graphics g = Image.getGraphics() • To draw on the top of a mutable image (will be explained later) • Lifetime: until the lifetime of the image

  18. Important Methods • Draw a line: • drawLine(intx1, inty1, intx2, inty2) • Set stroke style: • setStrokeStyle(intstyle) • Set the current color: • setColor(intred, intgreen, intblue) • setGrayScale(intscale), etc.

  19. Important Methods (cont’) • Draw a rectangle: • drawRect(int x, int y, int width, int height) • drawRoundRect(int x, int y, int width, int height, int arcWidth, int arcHeight) • fillRect(int x, int y, int width, int height) • fillRoundRect(int x, int y, int width, int height, int arcWidth, int arcHeight) • Draw an arc: • drawArc(int x, int y, int width, int height, int startAngle, int arcAngle) • fillArc(int x, int y, int width, int height, int startAngle, int arcAngle)

  20. Draw a Line w/ a Stroke Style • Default coordinate system • drawLine(intx1, inty1, intx2, inty2) • Draw a line from (x1, y1) to (x2, y2) • setStrokeStyle(intstyle) • SOLID (default) or DOTTED • Affect Arcs, Lines, Rectangles, Rounded Rectangles

  21. Set the Current Color (RGB) • 24 bits RGB (8 bits each), range: 0 – 255 each • setColor(255, 0, 0) • Strong red, no green and blue • setColor(0, 255, 0) • Strong green, no red and blue • setColor(0, 0, 255) • Strong blue, no red and green • setColor(0, 200, 255) • Light blue • setColor(255, 255, 255) or setColor(0, 0, 0) • Pure white or black If the device does not support 24 bits color, then the Java machine will map the RGB color to the closest color 

  22. Set the Current Color (Grayscale) • 8 bits grayscale: 0 – 255 • setGrayScale(0) • Pure black • setGrayScale(255) • Pure white • May not appear correctly in a color display! 

  23. Draw Rectangles • Border only: • drawRect(int x, int y, int width, int height) • drawRoundRect(int x, int y, int width, int height, int arcWidth, int arcHeight) • Filled: • fillRect(int x, int y, int width, int height) • fillRoundRect(int x, int y, int width, int height, int arcWidth, int arcHeight)

  24. Draw Rectangles (Examples)

  25. Draw Rectangles (Rounded) g.fillRoundRect(10, 10, 100, 100, 100, 20) Increase arcWidth Using: (…, 20, 20)

  26. g.drawArc(20, 20, 150, 150, 0, 270) Draw Arcs • drawArc(int x, int y, int width, int height, int startAngle, int arcAngle) • fillArc(int x, int y, int width, int height, int startAngle, int arcAngle) • Inside a rect (x, y, width, height) • startAngle: 0o (3:00), 90o(12:00), 180o (9:00), etc. • arcAngle: counter-clockwise

  27. Draw Arcs (Examples) g.fillArc(20, 20, 150, 150, 0, 360) g.fillArc(20, 20, 150, 100, 45, 270) g.fillArc(20, 20, 150, 150, 0, 225)

  28. Overview • Introduction • Canvas (Painting) • Graphics (Lines, Rectangles, and Arcs) • Fonts and Styles • Redrawing and Double-buffering • Image and Animation • Event Handling

  29. Fonts & Styles (1) • Request a default font: • static Font getDefaultFont( ) • Request a new font: • static Font getFont(intface, intstyle, intsize) • Face: • 0 or FACE_SYSTEM • 32 or FACE_MONOSPACE • 64 or FACE_PROPORTIONAL

  30. Fonts & Styles (2) • Style: • 0 or STYLE_PLAIN • 1 or STYLE_BOLD • 2 or STYLE_ITALIC • 4 or STYLE_UNDERLINED • Size: • 8 or SIZE_SMALL • 0 or SIZE_MEDIUM • 16 or SIZE_LARGE

  31. Fonts & Styles (3) • Both face and size can only have a single value • Style can have multiple value, using OR (|) Font font = Font.getFont( Font.FACE_SYSTEM, Font.STYLE_BOLD | Font.STYLE_ITALIC, Font.SIZE_LARGE); • If no such a font, system will return the closest one

  32. Fonts & Styles (4) • Set a font: • voidsetFont(Font font) • Example: Font myfont = Font.getFont(Font.FACE_SYSTEM, Font.STYLE_BOLD, Font.SIZE_LARGE); g.setFont(myfont);

  33. Text Position (1) • drawString(String str, int x, int y, int anchor) • drawChar(char chr, int x, int y, int anchor) • x and y are the Anchor coordinate of the text • The available positions of the Anchor are • LEFT / HCENTER / RIGHT for x • TOP / BASELINE / BOTTOM for y

  34. HCENTER|TOP RIGHT|TOP LEFT|TOP PolyUChess LEFT|BASELINE RIGHT|BASELINE RIGHT|BOTTOM LEFT|BOTTOM HCENTER|BOTTOM g.drawString(“PolyUChess”, 50,10, Graphics.LEFT|Graphics.TOP) HCENTER|BASELINE Text Position (2) • The combinations of the Anchor positions • Example:

  35. g.drawString(“PolyUChess”, 50,10, Graphics.LEFT|Graphics.TOP) Text Position (Example) (50, 10) as the TOP|LEFT of the Text

  36. Fonts & Styles (Example)

  37. Remarks on Font Styles • STYLE_PLAIN is superseded by other STYLE • We can have BOLD and ITALIC at the same time • PLAIN and ITALIC = ITALIC

  38. Other Methods • int getFace( ), int getStyle( ), int getSize( ) • boolean isPlain( ), boolean isBold( ), boolean isItalic( ), boolean isUnderlined( ) • drawSubstring(String str, int offset, int length, int x, int y, int anchor) • drawChars(char[ ] data, int offset, int length, int x, int y, int anchor) • Etc. You may learn them later …..

  39. Overview • Introduction • Canvas (Painting) • Graphics (Lines, Rectangles, and Arcs) • Fonts and Styles • Redrawing and Double-buffering • Image and Animation • Event Handling

  40. repaint( ) • We cannot call paint( ) directly, but we can call repaint( ) to invoke paint( ) publicvoidpaint(Graphicsg) { …… } publicvoidrun( ) { ….. repaint( ); }

  41. Example P3Demo1c.avi

  42. Pitfalls • Asynchronous call! • A repaint( ) may run before another repaint( ) finished rendering the display • Solutions: • serviceRepaint( ) --- protect a repaint( ) until it finished the rendering • callSerially( ) --- using “serial queue” (in multithreading) • Flickering • Solutions: Double-buffering

  43. Potential flickering Flickering (Tearing) • Flickering may appears when multiple things are animated simultaneously Source of problem: Low computational speed and high speed of the updating of display memory What we want in the display Frame 1 Frame 2 What we get Frame 1 transition frame Frame 2

  44. Double Buffering • Double-buffering is a common method to solve flickering --- render the display at once Frame 1 Frame 2 What in display Show it at once What in the buffer memory Frame 1 transition frame Frame 2

  45. Double Buffering (cont’) • Some (old) devices do not support double-buffering • How to check: use method isDoubleBuffering( ) • Solution: create your own double-buffering mechanism (you need an image buffer for it) • Should we write it by ourselves? YES • Flickering could be a serious problem in games (source of epilepsy seizure!) • Good programming practice! • More codes 

  46. publicclass MyCanvas extends Canvas { protected Image imgBuff; int width = getWidth(); int height = getHeight(); boolean dblBuff = true; MyCanvas( ) { //// constructor: create imgBuff if no DoubleBuffered //// if (!isDoubleBuffered( )) { dblBuff = false; imgBuff = Image.createImage(width, height); } } protectedvoidpaint(Graphics gReal) { Graphics g; //// use original graphic if it is DoubleBuffered, otherwise use imgBuff //// g = (dblBuff)? gReal : imgBuff.getGraphics( ); g.fillRect(0, 0, width, height); g.setColor(255, 0, 0); g.fillRect(10 + counter, 10 + counter, 10, 10); if (!dblBuff) //// copy to original graphic if not DoubleBuffered //// gReal.drawImage(imgBuff, 0, 0, Graphics.TOP|Graphics.LEFT); }

  47. Overview • Introduction • Canvas (Painting) • Graphics (Lines, Rectangles, and Arcs) • Fonts and Styles • Redrawing and Double-buffering • Image and Animation • Event Handling

  48. Images • Immutable images: • You cannot draw on an immutable image • Loaded from an image file using Image.createImage(Stringname) or Image.createImage(Imageimage) • Mutable images: • You can draw on a mutable image • Created using Image.createImage(intwidth, intheight) • However…. • We can copy an immutable image to a mutable image, and vice versa

  49. HCENTER|TOP RIGHT|TOP LEFT|TOP LEFT|VCENTER RIGHT|VCENTER Unlike in texts, we have VCENTER instead of BASELINE for anchor RIGHT|BOTTOM LEFT|BOTTOM HCENTER|BOTTOM HCENTER|VCENTER For image anchor Images (cont’) • Draw it to a Canvas using method: g.drawImage(Image imgName, intx, inty, intanchor);

More Related