CIS 234: Graphics & Applets - PowerPoint PPT Presentation

Cis 234 graphics applets l.jpg
Download
1 / 19

CIS 234: Graphics & Applets Dr. Ralph D. Westfall February, 2002 Graphics back in the "good old days," computers only worked with text no images no input boxes no mouse Palo Alto Research Center (PARC) created first GUI in 1970s, Apple copied it in 1980s, Microsoft copied in 1990s

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

Download Presentation

CIS 234: Graphics & Applets

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


Cis 234 graphics applets l.jpg

CIS 234: Graphics & Applets

Dr. Ralph D. Westfall

February, 2002


Graphics l.jpg

Graphics

  • back in the "good old days," computers only worked with text

    • no images

    • no input boxes

    • no mouse

  • Palo Alto Research Center (PARC) created first GUI in 1970s, Apple copied it in 1980s, Microsoft copied in 1990s


Advantages of graphics l.jpg

Advantages of Graphics

  • easier to work with

    • click "icon" rather than type program name

  • less training required

  • more fun to use programs with graphics

  • more fun to write graphics programs


Java graphics the internet l.jpg

Java Graphics & the Internet

  • can use Java graphics in regular Java applications

    • (may be) easier to start using graphics with Java that runs in a web browser

  • to run in a browser, Java needs to be coded into an Applet that runs in a HTML web page


What is html l.jpg

What Is HTML?

  • Hyper Text Markup Language

    • hyper means much greater

    • hypertext has hotlinks to other material

  • markup language

    • tells computer how/where to display material

    • word processing programs use their own markup languages

      • formerly visible (show codes), now hidden


Html tags l.jpg

HTML Tags

  • markup information is enclosed in angle brackets, such as <p> [paragraph]

    • brackets + content = tag

  • control appearance of page or text

  • not visible in browser

    • can see if use View>Source

  • frequently work in pairs

    • <b> some text etc. </b> [bold]


Java applet l.jpg

Java Applet

  • a Java class that runs in a window in a HTML page in a web browser instead of in a DOS window

  • HTML has special tags for applets

    • also has tags for parameters (arguments) that can be used as inputs to the applet


Java graphics capabilities l.jpg

Java Graphics Capabilities

  • place text on an Applet

  • draw geometric figures: straight line, curve, rectangle, oval, etc.

  • add color to graphic items


Applet graphics methods l.jpg

Applet Graphics Methods

  • applets use an init() method rather than main method at start

    • could be implicit (not visible)

  • in addition to init() etc., all Applets have

    • paint method – puts graphics objects on the Applet

    • repaint method – "refreshes" Applet to reflect any changes (possibly implicit)


Coordinates l.jpg

Coordinates

  • values to identify position on screen

    • x (first) how many pixels to right

    • y (2nd) how many pixels down

    • 0, 0 is upper left corner

    • 800, 600 is toward lower right

      • actual position depends on width/height of screen (e.g., is in middle of 1600 x 1200 screen)


Using java with html l.jpg

Using Java with HTML

  • <applet code = "MyApplet.class" width = 250 height = 200>

  • </applet>

  • displays MyApplet in window in browser

    • window = 250 pixels wide, 200 pixels high

    • can change width and height

    • most screens are 800 x 600 or larger


Drawstring method l.jpg

drawString Method

  • puts a String (text) on Applet

  • 3 arguments: string, x, y (coordinates)

  • can use it in a paint method

  • public void paint(Graphics g)// g

    {g.drawString("Hi", 10, 20);}// g

    • Java automatically supplies a graphics object; can call it g or anything else


Setfont method l.jpg

setFont Method

  • declaring

    • Font myFont = new Font("Helvetica", Font.ITALIC, 24);

      • Courier, Helvetica and TimesRoman

      • BOLD, ITALIC or PLAIN

      • # of points (10 or 12 typical in Word doc)

  • using in a paint method

    • g.setFont(myFont);


Setting colors l.jpg

Setting Colors

  • Color class has 13 constants (p. 160)

    • Color.blue, Color.red, Color.darkGrey, etc.

  • setColor sets foreground color

  • setBackground sets Applet background

  • using in a paint method

    • g.setColor(Color.green); // graphics object

    • this.setBackground(Color. yellow);

    • // this = Applet


Creating a graphics object l.jpg

Creating a Graphics Object

  • paint method automatically gets a graphic object

  • most other methods don't get a graphics object

    • need to use getGraphics method to create graphics object within other methods

    • Graphics g = getGraphics();

      g.drawString("Hello", 5, 50);


Drawline method l.jpg

drawLine Method

  • arguments are 2 pairs of coordinates

    • x, y for 1 point and x, y for other end

  • g.drawLine(10, 10, 40, 10); // ?

  • g.drawLine(10, 10, 10, 40); // ?

  • g.drawLine(10, 10, 40, 40); // ?


Rectangle methods l.jpg

Rectangle Methods

  • arguments are upper left corner coordinates (x, y), and width and height

  • g.drawRect(10, 100, 80, 30); // outline

    • corner = 10, 100; width = 80; height= 30

  • g.fillRect(100,100,30,80); // solid color

  • g.clearRect(105, 105, 20, 70);

    // inside is same color as background


Rounded rectangles l.jpg

Rounded Rectangles

  • takes 6 arguments: corner coordinates, rectangle width and height, plus width and height of corner ovals

    • with larger widths and heights, corners get more rounded

  • g.drawRoundRect(5, 5, 30, 30, 2, 2);

  • g.drawRoundRect(5, 5, 30, 30, 4, 6);


Ovals l.jpg

Ovals

  • oval methods draw ovals that would fit in a rectangle of same size

  • g.drawOval(10, 10, 80, 30); // outline

  • g.fillOval (10, 10, 30, 80); // solid color

  • g.clearOval(10, 10, 80, 30);

    // inside is same color as background


  • Login