midlet programming part ii l.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
MIDlet Programming: Part II PowerPoint Presentation
Download Presentation
MIDlet Programming: Part II

Loading in 2 Seconds...

play fullscreen
1 / 68

MIDlet Programming: Part II - PowerPoint PPT Presentation


  • 444 Views
  • Uploaded on

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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'MIDlet Programming: Part II' - Mia_John


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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
midlet programming part ii

MIDlet Programming: Part II

Low-level UI

Pinata Winoto

overview
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
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
common components
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
structure

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
overview6
Overview
  • Introduction
  • Canvas (Painting)
  • Graphics (Lines, Rectangles, and Arcs)
  • Fonts and Styles
  • Redrawing and Double-buffering
  • Image and Animation
  • Event Handling
canvas
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();

canvas dimension

Height

Width

Canvas Dimension

Use getWidth()

and getHeight()

default coordinate system
Default Coordinate System
  • Similar to J2SE

(width, 0)

(0, 0)

(width, height)

(0, height)

how the coordinate work
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)

draw background
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);

}

}

what if no background

Paused

Resuming

Show a red rectangle

What If No Background?
  • Overlapping after a Paused!

Background is used to clean any unwanted image…

why paint oo concept
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!
paint properties
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
repaint
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”
overview17
Overview
  • Introduction
  • Canvas (Painting)
  • Graphics (Lines, Rectangles, and Arcs)
  • Fonts and Styles
  • Redrawing and Double-buffering
  • Image and Animation
  • Event Handling
graphics
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
important methods
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.
important methods cont
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)
draw a line w a stroke style
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

set the current color rgb
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 

set the current color grayscale
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! 
draw rectangles
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)
draw rectangles rounded
Draw Rectangles (Rounded)

g.fillRoundRect(10, 10, 100, 100, 100, 20)

Increase arcWidth

Using: (…, 20, 20)

draw arcs

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
draw arcs examples
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)

overview29
Overview
  • Introduction
  • Canvas (Painting)
  • Graphics (Lines, Rectangles, and Arcs)
  • Fonts and Styles
  • Redrawing and Double-buffering
  • Image and Animation
  • Event Handling
fonts styles 1
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
fonts styles 2
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
fonts styles 3
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
fonts styles 4
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);

text position 1
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
text position 2

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:
text position example

g.drawString(“PolyUChess”, 50,10, Graphics.LEFT|Graphics.TOP)

Text Position (Example)

(50, 10) as the TOP|LEFT of the Text

remarks on font styles
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
other methods
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 …..

overview40
Overview
  • Introduction
  • Canvas (Painting)
  • Graphics (Lines, Rectangles, and Arcs)
  • Fonts and Styles
  • Redrawing and Double-buffering
  • Image and Animation
  • Event Handling
repaint41
repaint( )
  • We cannot call paint( ) directly, but we can call repaint( ) to invoke paint( )

publicvoidpaint(Graphicsg) {

……

}

publicvoidrun( ) {

…..

repaint( );

}

example
Example

P3Demo1c.avi

pitfalls
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
flickering tearing

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

double buffering
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

double buffering cont
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 
slide47
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);

}

overview48
Overview
  • Introduction
  • Canvas (Painting)
  • Graphics (Lines, Rectangles, and Arcs)
  • Fonts and Styles
  • Redrawing and Double-buffering
  • Image and Animation
  • Event Handling
images
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
images cont

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);

immutable images
Immutable Images
  • Widely used in Game Programming
  • Easily created by artists (using Photoshop, etc.)
  • Common animation: showing a series of image files within a small time interval
immutable images cont
Immutable Images (cont’)
  • Image file format: Portable Network Graphics (*.png)
  • publicclass MyCanvas extends Canvas {
  • protectedvoid paint(Graphics g) {
  • try {
  • Image myImage =Image.createImage(“/pic/myImg.png”);
    • g.drawImage(myImage, 10, 10,
    • Graphics.VCENTER|Graphics.HCENTER);
  • } catch(Exception e) { }
    • }
    • }
mutable images
Mutable Images
  • Example: our image buffer (double-buffering)

Image imgBuff = Image.createImage(width, height);

  • Creates a new Graphics object that renders to this image:

Graphics getGraphics( )

  • getGraphics() only for mutable image
  • Other use: modify immutable images on the fly

Image imgMutable = Image.createImage(width, height);

Graphics g = imgMutable.getGraphics();

g.drawLine(10, 10, 90, 90);

g.drawRect(0, 0, 100, 100);

copy im mutable images
Copy (Im)mutable Images
  • A mutable image can be copied to an immutable image by:

Image imgImmutable = Image.createImage(imgBuff);

  • An immutable image can be copied to a mutable image by:

Image imgImmutable = Image.createImage(“/pic/myImg.png”);

Image imgMutable = Image.createImage(imgImmutable.getWidth(), imgImmutable.getHeight());

Graphics g = imgMutable.getGraphics();

g.drawImage(imgImmutable, 0, 0, Graphics.TOP|Graphics.LEFT);

mutable image an example
Mutable image: An Example

copy

result

draw

immutable

mutable

mutable

mutable

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

Soft-buttons for commands

(0-9, *, #) for key codes

Action keys (joystick) for game actions

Siemens S65

Event Handling
  • Commands
  • Key Codes
  • Game Actions
  • Pointers
oo paradigm
OO Paradigm 
  • Drawing multiple images and handling multiple events may increase the complexity of our codes
  • It is time for using more classes in our codes
key codes
Key Codes
  • Common Methods:
    • voidkeyPressed(intkeyCode)

Called when a key (keyCode) was pressed

    • voidkeyRepeated(intkeyCode)

Called when a key (keyCode) was held down

    • booleanhasRepeatEvents()

check whether the platform support keyRepeated()

key codes values
Key Codes (Values)
  • KEY_NUM0 == 48
  • KEY_NUM1 == 49
  • KEY_NUM2 == 50
  • KEY_NUM3 == 51
  • KEY_NUM4 == 52
  • KEY_NUM5 == 53
  • KEY_NUM6 == 54
  • KEY_NUM7 == 55
  • KEY_NUM8 == 56
  • KEY_NUM9 == 57
  • KEY_STAR == 42
  • KEY_POUND == 35
game actions
Game Actions
  • Common method: convert a keyCode to a standard game action
    • intgetGameAction(intkeyCode)
  • If no action keys, the same game actions will be mapped to keypads
  • Available values:
    • UP, DOWN, LEFT, RIGHT, FIRE
    • Reserved values:

GAME_A, GAME_B,

GAME_C, GAME_D

game actions example
Game Actions(Example)

protectedvoid keyPressed(intkeyCode) {

switch (getGameAction(keyCode)) {

case Canvas.LEFT:

if (posX >= 0) posX--;

break;

case Canvas.RIGHT:

if (posX <= width) posX++;

break;

case Canvas.UP:

if (posY >= 0) posY--;

break;

case Canvas.DOWN:

if (posY <= height) posY++;

break;

}

repaint();

} ////(using action keys)////

protected void keyPressed(int keyCode){

switch (keyCode){

case Canvas.KEY_NUM4:

if(posX >= 0) posX--;

break;

case Canvas.KEY_NUM6:

if (posX <= width) posX++;

break;

case Canvas.KEY_NUM2:

if (posY >= 0) posY--;

break;

case Canvas.KEY_NUM8:

if (posY <= height) posY++;

break;

}

repaint();

} ////(using keys)////

game actions or keys

Action keys (joystick) for game actions

Siemens S65

Game Actions or Keys?
  • Always map keys to game actions for moving & fire
  • Unless we need key 0, 1, 3, 7, 9, #, *
summary
Summary
  • Introduction
  • Canvas (Painting)
  • Graphics (Lines, Rectangles, and Arcs)
  • Fonts and Styles
  • Redrawing and Double-buffering
  • Image and Animation
  • Event Handling