1 / 23

Cosc 4755

Cosc 4755. Low-level GUI APIs. Low-Level API. Composed of Canvas and Graphics classes GameCanvas will be covered later on Canvas is an abstract class, where you must write your paint(Graphics g) method. There are numerous draw methods But we are “rolling our own” for most everything else.

elmer
Download Presentation

Cosc 4755

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. Cosc 4755 Low-level GUI APIs

  2. Low-Level API • Composed of Canvas and Graphics classes • GameCanvas will be covered later on • Canvas is an abstract class, where you must write your paint(Graphics g) method. • There are numerous draw methods • But we are “rolling our own” for most everything else.

  3. Canvas • Canvas is a displayable object. So we extend a canvas class and implement the required abstract class paint(Graphics g). • The simplest example is to draw something on the “screen”, known as the canvas

  4. Simple Canvas example import javax.microedition.midlet.*; import javax.microedition.lcdui.*; public class LowLevel extends MIDlet{ private Display display; // The display for this MIDlet private myCanvasmyCan; public LowLevel() { display = Display.getDisplay(this); myCan = new myCanvas(); } public void startApp() { display.setCurrent(myCan); //Canvas is a displayable object, like other screen objects myCan.repaint(); //force a redraw. } public void pauseApp() {} public void destroyApp(boolean unconditional) { } } class myCanvas extends Canvas { public void paint(Graphics g) { g.setColor(0,0,255); //set color to blue g.drawString("Hello World!",0,0,0); g.drawRect(getWidth()/2 -10, getHeight()/2 – 10, 20, 20); //draw square centered, with length of 20. } }

  5. Drawing Methods • Graphics has the following methods • DrawArc Draws an elliptical arc • DrawChar Draws a character • DrawImage Draws a specified image • DrawLine Draws a line • DrawRect Draws an outline of rectangle • DrawRoundRec Draws a outline of rectangle with rounded corners • DrawString Draws a specified string of characters.

  6. Drawing Methods (2) • And set of “fill” draw methods. • fillArc, fillRect, fillRoundRect • Also a fillTraingle, which doesn’t have a draw method. • Color • getColor() • Returns an int RGB 0x00RRGGBB • Or getRedComponent, Green, and Blue • SetColor(int red, int green, int blue) • Or SetColor(int RGB) • Fonts (Note there may only be one system font) • SetFont(Font font) • getFont() which returns a Font

  7. Drawing Methods (3) • From the canvas method, two very important methods: • getHeight() • getWidth() • You will need to know the pixel height and width of the “screen” you are working with. • Every phone screen is likely to be a little different and your app will have to deal with it. • Default emulators: ClamShell 170x220px, Msa 240x320px (one the examples pics are from).

  8. Examples of drawing • First for the rest of the example, assume the following class exists, declared as myColor Color = new myColor(); class myColor { //color in RGB format, so I don't have to remember them. int WHITE = 0x00FFFFFF; int BLACK = 0x00000000; int BLUE = 0x000000FF; int RED = 0x00FF0000; int GREEN = 0x0000FF00; int GRAY = 0x007F7F7F; }

  9. Drawing Example 1 • Extending the basic example before, class myCanvas extends Canvas { Image myImage; public myCanvas() { try { myImage = Image.createImage("/pic.jpg"); } catch (Exception e) { myImage = null;} } public void paint(Graphics g) { //clear the screen to white g.setColor(Color.WHITE); g.fillRect(0,0, getWidth(), getHeight()); //now draw some stuff g.setColor(Color.BLUE); g.drawString("Hello World!",0,0,0); g.setColor(Color.BLACK); g.drawRect(getWidth()/2 -10, getHeight()/2 – 10, 20, 20); g.setColor(Color.GREEN); g.fillRect(20, 20, 20, 20); g.setColor(Color.RED); g.fillRoundRect(15, 55, myImage.getWidth() +10, myImage.getHeight()+10, 10, 10); g.drawImage(myImage, 20, 60, 0); //put image over rounded rectangle g.setColor(Color.GRAY); g.drawString("Triangle", 100, 75, 0); g.fillTriangle(100, 100, 120, 100, 110, 110); //attempt a circle. g.setColor(Color.RED); g.drawString("Circle!", 100, 35, 0); g.fillArc(100, 50, 20, 20, 0, 360); } }

  10. Event key actions. • There are three empty methods that can be subclassed to handle key events. • keyPressed(intKeyCode) • keyRepeated(intKeyCode) • keyReleased(intKeyCode) • And the following KeyCodes are defined as constants • KEY_NUM0, KEY_NUM1, KEY_NUM2, KEY_NUM3, KEY_NUM4, KEY_NUM5, KEY_NUM6, KEY_NUM7, KEY_NUM8, KEY_NUM9, KEY_STAR, and KEY_POUND.

  11. Event Key actions (2) • For “full keyboards”, with keycode to find out what the key pressed was • If (keycode >0) {char ch = (char)keyCode;} • Using the getGameAction(intKeyCode) with can also use the following constants • UP, DOWN, LEFT, RIGHT, FIRE, GAME_A, GAME_B, GAME_C, and GAME_D. • But you will have to figure out where the keys were map too.

  12. Example 2 class myCanvas extends Canvas { myColor Color = new myColor(); int x, y; public myCanvas() { x = getWidth()/2; y = getHeight()/2; } public void paint(Graphics g) { //clear the screen to white g.setColor(Color.WHITE); g.fillRect(0,0, getWidth(), getHeight()); g.setColor(Color.RED); g.drawString("Press a key to move the ball",0,0,0); g.fillArc(x-5, y-5, 10, 10, 0, 360); } public void keyPressed(intkeyCode){ // what game action does this key map to? intgameAction = getGameAction(keyCode); if(gameAction == RIGHT) { x += 5; } else if(gameAction == LEFT) {x -= 5; } else if(gameAction == UP) {y -= 5; } else if(gameAction == DOWN) {y += 5; } repaint(); // make sure to repaint } }

  13. Example 3 class myCanvas extends Canvas { myColor Color = new myColor(); char c; public myCanvas() { c = '?'; } public void paint(Graphics g) { //clear the screen to white g.setColor(Color.WHITE); g.fillRect(0,0, getWidth(), getHeight()); g.setColor(Color.RED); if (c == '?') { g.drawString("Press any key",0,0,0); } else { g.drawString("You Pressed:"+c,0,0,0); } } public void keyPressed(intkeyCode){ if (keyCode >0) { c = (char)keyCode; } else { c = '?'; } // make sure to repaint repaint(); } } Only the number keys worked with this emulator

  14. Adding Commands • Commands can be added just like in MIDlets. • This example, adds menus to change between the last 3 examples. • See website for complete code: LowLevel.zip private Command done, ex1, ex2, ex3; public LowLevel() { display = Display.getDisplay(this); myCan = new myCanvas(); done = new Command("Exit", Command.EXIT,0); ex1 = new Command("Example1", Command.ITEM, 1); ex2 = new Command("Example2", Command.ITEM, 1); ex3 = new Command("Example3", Command.ITEM, 1); myCan.addCommand(done); myCan.addCommand(ex1); myCan.addCommand(ex2); myCan.addCommand(ex3); myCan.setCommandListener(this); } … public void commandAction(Command c, Displayable s) { if (c == done) { destroyApp(false); notifyDestroyed(); } else if (c == ex1) { myCan.switchEx(1); } else if (c == ex2){ myCan.switchEx(2); } else if (c == ex3){ myCan.switchEx(3); } }

  15. Adding Commands (2) Note the different placement of the Menu items, between the 2 emulators.

  16. Fonts and Anchor Points • DrawString(“Text”, int x, int y, int anchor) • Drawing the text is based on “anchor points”, which are used to minimize the amount of computation required to place text. • Anchor points are defined by • 1. horizontal (LEFT, HCENTER, RIGHT) • 2. vertical (TOP, BASELINE, BOTTOM) • Using a bitwise OR • TOP|LEFT which also results in zero.

  17. Font placement Example Font f = g.getFont(); String str = "Hello World"; x = getWidth()/2; y =0; g.drawString(str,x, y, g.TOP |g.LEFT); y += f.getHeight(); g.drawString(str, x, y, g.TOP|g.HCENTER); y += f.getHeight(); g.drawString(str, x, y, g.TOP|g.RIGHT); y += f.getHeight(); //The next three should look the same g.drawString(str,x, y, g.TOP |g.LEFT); y += f.getHeight(); g.drawString(str, x + f.stringWidth(str)/2, y, g.TOP|g.HCENTER); y += f.getHeight(); g.drawString(str, x + f.stringWidth(str), y, g.TOP|g.RIGHT);

  18. Changing the font • In the graphics, there is a setfont method. • SetFont(Font f); • You can use Font.getFont to get the font you want to set. • There are a couple of constants for getFont • Font.FACE_SYSTEM (system font) • Font.FACE_MONOSPACE • Font.FACE_PROPORTIONAL • Size is either SMALL, MEDIUM, or LARGE

  19. Changing the font (2) • And last is the style • STYLE_PLAIN, STYLE_BOLD, STYLE_ITALIC, and STYLE_UNDERLINED • Font.getFont(Font.FACE_SYSTEM, Font.STYLE_BOLD, Font.SIZE_MEDIUM) • Returns the font, that is medium size, system, bold. • NOTE: if you request a font that is not supported, it returns the standard system font.

  20. Font Example g.setFont(Font.getFont(Font.FACE_SYSTEM, Font.STYLE_PLAIN, Font.SIZE_LARGE)); g.drawString("System Large Font", 0, 0, g.LEFT | g.TOP); g.setFont(Font.getFont(Font.FACE_SYSTEM, Font.STYLE_PLAIN, Font.SIZE_MEDIUM)); g.drawString("System Medium Font", 0, 15, g.LEFT | g.TOP); g.setFont(Font.getFont(Font.FACE_SYSTEM, Font.STYLE_PLAIN, Font.SIZE_SMALL)); g.drawString("System Small Font", 0, 30, g.LEFT | g.TOP); g.setFont(Font.getFont(Font.FACE_SYSTEM, Font.STYLE_BOLD, Font.SIZE_MEDIUM)); g.drawString("Bold Style", 0, 45, g.LEFT | g.TOP); g.setFont(Font.getFont(Font.FACE_SYSTEM, Font.STYLE_ITALIC, Font.SIZE_MEDIUM)); g.drawString("Italic Style", 0, 60, g.LEFT | g.TOP); g.setFont(Font.getFont(Font.FACE_SYSTEM, Font.STYLE_UNDERLINED, Font.SIZE_MEDIUM)); g.drawString("Underlined Style", 0, 75, g.LEFT | g.TOP); g.setFont(Font.getFont(Font.FACE_MONOSPACE, Font.STYLE_PLAIN, Font.SIZE_MEDIUM)); g.drawString("System Monospace", 0, 90, g.LEFT | g.TOP); g.setFont(Font.getFont(Font.FACE_PROPORTIONAL, Font.STYLE_PLAIN, Font.SIZE_MEDIUM)); g.drawString("System Pproportional", 0, 105, g.LEFT | g.TOP); Note: System font Large, medium and small are the same, because small and large are not supported in this emulator.

  21. Touch events • Supported in the Canvas class • First you can check to see if the phone has touchevents with • boolhasPointerEvents() • boolhasPointerMotionEvents() • A Note, a big in emulators for SDK 3.0, These always come back true.

  22. Touch events (2) • three method are provided, there are empty by default. you will need to override the methods with your own code • protected void pointerPressed(int x, int y) • Called when the touch/pointer is pressed. • protected void pointerReleased(int x, int y) • Called when the touch/pointer is released. • protected void pointerDragged(int x, int y) • called when each time the pointer is moved. • so as you slide your finger across the screen, it called every time your finger moves.

  23. Q A &

More Related