1. -Sai Phalgun Tatavarthy

2. Outline What is a “Graphing Calculator”? Graphics, Graphics2D classes Methods of Graphics object Custom Painting The paintComponent() method

3. What is Graphing Calculator? Calculators capable of - plotting graphs - solving simultaneous equations - programmable for using customized functions - multi-line texts and more memory - some can draw 3D shapes - some of them can be connected to pH meters, voltage meters for logging data and plotting graphs.

4. Graphics and Graphics2D Class Hierarchy java.lang.Object java.awt.Graphics java.awt.Graphics2D

5. Graphics and Graphics2D provides both a context for painting and methods for performing the painting. passed as argument to the paintComponent – method public abstract class Graphics extends Object public abstract class Graphics2D extends Graphics Graphics class is the abstract class for all graphic contexts

6. Graphics and Graphics2D Graphics class encapsulates state information needed for the basic rendering operations that Java supports. State information includes properties like Component object on which to draw, translation of origin, current clip, current color, current font. All operations are drawn with a pixel-sized pen. All drawing or writing is done in the current color, using the current paint mode, and in the current font.

7. Graphics and Graphics2D All coordinates that appear as arguments are considered relative to the translation origin of this Graphics. Rendering operations modify only pixels which lie within the area bounded by the current clip, which is specified by a Shape in user space and is controlled by the program using the Graphics object. Graphics2D has rendering attributes like pen style(solid,dotted,dashed),Fill,Transforming(shear,rot ate,translate,scale),clip area,font.

8. Graphics co-ordinates (0,0) x y width height

9. Methods of Graphics object clearRect(int x, int y, int width, int height) - clears the Rectangular area by filling with current color dispose() - Disposes of this graphics context and releases any system resources that it is using. drawArc(int x, int y, int width, int height, int startAngle, int arcAngle) - Draws an arc drawLine(int x1, int y1, int x2, int y2) - Draws a line, using the current color, between the points (x1, y1) and (x2, y2) in this graphics context's coordinate system. drawOval(int x, int y, int width, int height) - Draws the outline of an oval.

10. Methods of Graphics object drawPolygon(int[] xPoints, int[] yPoints, int nPoints) - Draws a closed polygon defined by arrays of x and y coordinates. drawRect(int x, int y, int width, int height) - Draws the outline of the specified rectangle. fillRect(int x, int y, int width, int height) - Fills the specified rectangle fillOval(int x, int y, int width, int height) - Fills an oval bounded by the specified rectangle with the current color. fillPolygon(int[] xPoints, int[] yPoints, int nPoints) - Fills a closed polygon defined by arrays of x and y coordinates translate(int x, int y) - Translates the origin of the graphics context to the point (x, y) in the current coordinate system.

11. Custom Painting We have to decide which class to use JPanel : Generating and displaying graphs in top of a blank or transparent background- In Swing a JPanel is used instead of a Canvas to be the target for drawing graphics objects. JLabel: Painting on top of an image JButton: custom button design..so on Every class derived from JComponent can be used for custom drawing ! Most recommended and flexible to use is JPanel

12. The “paintComponent” method Inherited to all subclasses, e.g. JPanel, JButton,… The argument is Graphics or Graphics2D object The place where all custom painting belongs ! Invoked by the event-scheduler or by the repaint() – method Always call super.paintComponent() before performing custom drawing If drawing is complex use repaint(Rectangle r) that paints only particular area instead of repaint() which draws whole thing.

13. The “paintComponent” method Every Swing component uses a paint( ) method to draw the component. Swing's default paint( ) method calls three other methods to paint different parts of the component: paintComponent( ) paints the component's background and intrinsic shapes (like a checkbox or button) paintBorder( ) paints the border around the component paintChildren( ) paints the component's children To add a custom background, override the paintComponent( ) method and draw whatever you like. Method of class JComponent

14. -Sai Phalgun Tatavarthy

15. Outline What is a Graphing Calculator Program Design - MVC Code Conclusions

16. What is Graphing Calculator? Calculators capable of - plotting graphs - solving simultaneous equations - programmable for using customized functions - multi-line texts and more memory

17. What is Graphing Calculator? - some can draw 3D shapes - some of them can be connected to pH meters, voltage meters for logging data and plotting graphs. - As we are simply designing the program on computer its easy to modify/add some functionality based on our requirement.

18. Program Design Adopted MVC architecture. Model – CalcModel (implements Calc) The model part holds the current state of Graphing Calculator, that includes parameters and corresponding functions like depictGraphType(), getEquation(), setEquation(), getCurrentGraph() View – CalcView This is the part of the program that has our “Custom Component” for overriding the paintComponent() method of JPanel – has CalcModel as a member variable

19. Program Design CalcController –Controller of the program, has actionCommand depending on the event that occurred from the View. Has a constructor that sets the member variables of model, custom component and the JTextField. The GUI – CalcGUI packs all required GUI components like buttons, our custom component(CalcView) and the input JTextField for entering the equation.

20. CalcModel public void clearGraph() ; public void setGraphicEnabled(boolean graphicView) ; public boolean isGraphicEnabled() ; public void setCurrentOperation(String currentOpern) ; public String getCurrentOperation(); public void setResult(float res) ; public float getResult() ; public void setCurrentGraph(String grph) ; public String getCurrentGraph() ;

21. CalcModel public void setEquation(String eqn) ; public String getEquation() ; public void setXYCoords(int xCord1,int yCord1, int xCord2,int yCord2) ; public int getX1() ; public int getY1() ; public int getX2() ; public int getY2() ; public void setWidth(int w) ; public void setHeight(int h) ; public int getWidth() ; public int getHeight() ; public void depictGraphType () ;

22. CalcModel The main method of is depictGraph() where the type of graph(like circle or a line) is depicted and also the x and y coordinates are set for a line and height and width are set for a circle. This uses the input equation from the view to do all the calculations and views.

23. CalcView CalcView – It has the core code that actually pens down and draws the graph required, has the custom component that has a custom paint method. The custom paint method inquires model on which graph to draw and the parameters depending on the state. The view part contains the actual GUI for Graphing Calculator and the main custom component on which we draw the graphs The view asks model and draws which graph to draw depending on current state of Graphing Calculator. The view also gives the shape of Graphing Calculator and arranges buttons and other components.

24. Code - View import java.awt.Graphics for the usage of Graphics object. class CalcGUIFrame extends JFrame implements ActionListener The main method instantiates CalcGUIFrame that has the core code. The GUI contains buttons labelled 0-9 and normal “C” button for cancelling or clearing the equation or graph respectively.

25. Code - View It has a the custom component which extends a JPanel and has a custom paint method for drawing our graphs. Every component by default has a method called paint() that draws it’s shape on screen. Similarly a JPanel has it. We try to override the paint method of JPanel. The paint() method has inturn 3 methods which are called subsequently.

26. Code - View The paintComponent() method is the one that we override for drawing our graphs. We have to first call super.paintComponent() which draws the actual shape of the component and on which we draw our custom paintings. We first try to get the height and width of the panel(as we may resize the panel frequently ) depending on which we translate to origin to centre of panel. getHeight() for getting height of component and getWidth() for getting width of the component.

27. Code - View translate(int x,int y) for translating origin to (x,y) x and y are obtained using x=height of panel/2 and y=width of panel/2 It first sets the color of the “pen” to blue using which we draw the X and Y Axes. The method used is Graphicsobject.setColor(Color abc) The Axes are drawn using drawLine method i.e drawLine(int x1, int x2, int y1, int y2)

28. Code - View It then asks model to which graph to draw. For example if the getGraphType returns a Line, view uses a method called drawLine(int x1, int y1, int x2, int y2) that draws a line from (x1,y1) to (x2,y2). We have to take care while drawing as the Y-axis is negative upwards by default in the paint graph context. So we negate the Y-coordinates in order to draw the correct graph in which Y-Axis is positive upwards. X-coordinates can be taken directly as it is same by default in painting context also.

29. Controller CalcController – is the controller part of the program and depending on the action commands it repaints the panel so that the graph will be visible depending on the input equation.

30. Conclusion If the equations are little bit more complex a method that takes x values from 1 to certain upper limit and then calculating y values and then drawing points depending on x and y coordinates can be used to draw the graphs. The program can be still more expanded so that we can include our own custom functionalities.

31. Conclusion So the implementation of GraphingCalculator program serves as a good example for the custom components that uses a paint routines. The program gives examples of various painting routines and methods that are methods of the Graphics objects. The future scope is to implement other functionalities like trigonometric and parabolic functions.

32. Thank You