Application Development for Mobile Devices Lecture7 - Graphics and Multimedia, Study notes of Mobile Computing

Download Application Development for Mobile Devices Lecture7 - Graphics and Multimedia and more Study notes Mobile Computing in PDF only on Docsity!

Lecture 7

Java ME – Graphics and

Multimedia

Markus A. Wolf

1

Application Development

for Mobile Devices

Lecture Overview

Canvas Class for 2D Graphics

Drawing Shapes

Drawing Text

Displaying Images

Multimedia – Mobile Media API (MMAPI)

Sound

Music

Video

Canvas Class

What does the Canvas class offer, that the

Screen subclasses don’t?

Complete control over the screen

Provides low-level access to the device’s screen

and input facilities

Means more control, but also more work, because

we have to produce lower-level code

Canvas Class

Canvas is an abstract class

So it is not possible to directly instantiate it

To use Canvas, create a subclass of it and

implement its abstract method

paint() is the only abstract method in Canvas

Abstract method – only a method signature, no code Implemented method in our subclass

What to Draw?

With the help of the Graphics class, we can draw

the following onto a Canvas:

Shapes

Lines

Rectangles

Straight corners

Rounded corners

Triangles

Arcs

Text

Images

Where to Draw?

Whenever you draw something on a Canvas,

you need to specify coordinates in the Canvas’

coordinate space

The x and y coordinates are specified in pixels

The coordinates start from the top-left corner

x

y

[0,0]

[20,0]

[0,20]

[20,20]

How to Draw?

Use the methods in the Graphics class to draw

shapes. E.g.

drawLine(int x1, int y1, int x2, int y2)

drawRect(int x, int y, int width, int height)

drawArc(int x, int y, int width, int height, int startAngle,

int arcAngle)

First coordinate Second coordinate Number of degrees in the arc – 360° would be a full circle

Drawing Filled Shapes

Graphics also contains a set of methods for

drawing filled shapes

fillTriangle(int x1, int y1, int x2, int y2, int x3, int y3)

fillRect(int x, int y, int width, int height)

Etc.

There is no drawTriangle, so how can we draw triangles?

Graphics Example 1

Menu Draw Lines Draw Rectangle Draw RoundedRectangle Draw Triangle Draw Arc

GraphicsCanvas

import javax.microedition.lcdui.*;

public class GraphicsCanvas extends Canvas {

private int drawingType;

public void paint(Graphics g) {

public void setDrawType(int type) {

this.drawingType = type;

Inherits from Canvas Need to implement the paint() method This property is set from the MIDlet to determine what shape to draw

paint() / 2

else if(drawingType == 2) { // draw rectangle g.drawRect(w / 2, h / 2, 20, 20); g.fillRect((w / 2) - 20, (h / 2) - 20, 20, 20); } else if(drawingType == 3) { // draw rounded rectangle g.drawRoundRect((w / 2) - 50, (h / 2) - 60, 100, 120, 30, 50); } else if(drawingType == 4) { // draw filled triangle g.fillTriangle(0, 0, w / 2, h, w, 0); } else if(drawingType == 5) { // draw arc g.fillArc(w / 2, h / 2, 50, 50, 0, 180); } } Draw an outline and a filled rectangle Three coordinates 180° is half a circle

GraphicsMidlet Class

public class GraphicsMidlet extends MIDlet implements CommandListener {

private GraphicsCanvas gc;

public void startApp() {

public void pauseApp() {}

public void destroyApp(boolean unconditional) {}

public void commandAction(Command c, Displayable s) {

An instance of our Canvas subclass This method will set up the commands and display GraphicsCanvas Depending on the command selected, a different drawing type will be set and the Canvas repainted

commandAction()

public void commandAction(Command c, Displayable s) { if (c.getCommandType() == Command.EXIT) { notifyDestroyed(); } else if(c.getLabel() == "Draw Lines") { gc.setDrawType(1); gc.repaint(); } else if(c.getLabel() == "Draw Rectangle") { gc.setDrawType(2); gc.repaint(); } else if(c.getLabel() == "Draw Rounded Rectangle") { gc.setDrawType(3); gc.repaint(); } else if(c.getLabel() == "Draw Triangle") { gc.setDrawType(4); gc.repaint(); } else if(c.getLabel() == "Draw Arc") { gc.setDrawType(5); gc.repaint(); } } Check what command was selected Set drawing type in the GraphicsCanvas object Call repaint, which means the MIDP implementation will call the paint() method in the GraphicsCanvas object

Colours

It is possible to set the colour used for drawing

We used it in the previous example, for clearing the screen

Colours are set on the Graphics object

Colours are represented as combinations of red, green and

blue

8 bits (256) for each colour component

Colour can be set using:

setColour(int red, int green, int blue)

Not all devices will support the same number of colours, but

you can find out if/how many colours are supported by calling

the isColor() and numColors() methods on the Display

Each colour component has to be between 0 and 255