CISC124 Quiz 3 grading underway, still... Assn 5 due tomorrow. Fall 2017 CISC124 9/16/2018 CISC124 Quiz 3 grading underway, still... Assn 5 due tomorrow. COMPSA will be holding an exam prep tutorial. Time and location TBA. Fall 2017 CISC124 - Prof. McLeod Prof. Alan McLeod

Today Three other useful dialogs. Sliders, Spinners and progress bars. The Canvas node. The Fireworks Case Study. Animation? Oracle Demos? What’s left in JavaFX and Java to discover? Fall 2017 CISC124 - Prof. McLeod

Other Built-In Windows FileChooser: http://docs.oracle.com/javafx/2/ui_controls/file-chooser.htm ColorPicker: http://docs.oracle.com/javafx/2/ui_controls/color-picker.htm DatePicker: http://docs.oracle.com/javase/8/javafx/user-interface-tutorial/date-picker.htm So easy to use! See FXFileAndColor project. Fall 2017 CISC124 - Prof. McLeod

Spinners and Sliders (And Progress Bars!) See FXSliderSpinner For Sliders, using SceneBuilder: Set vertical or horizontal orientation. Set min, max and initial value. Choose major and minor tick units and which to label. Can choose “Snap To Ticks”. Fall 2017 CISC124 - Prof. McLeod

Spinners and Sliders, Cont. Use change listeners with .valueProperty() to detect changes in slider or listener positions. Note how spinner works with arrow keys or mouse click. Fall 2017 CISC124 - Prof. McLeod

Canvas Control See: http://docs.oracle.com/javafx/2/canvas/jfxpub-canvas.htm Canvas is a Node and is not visible by itself, but is not a Pane type Node so it cannot contain other nodes. Hint: Make sure the Canvas has a size and is where you think it is – otherwise you will not see anything! Fall 2017 CISC124 - Prof. McLeod

Canvas Control, Cont. All drawing to the Canvas will take place through its GraphicsContext object: Canvas canvas = new Canvas(300, 250); // width, height GraphicsContext gc = canvas.getGraphicsContext2D(); (Also has an empty, default constructor.) Draw by setting colours first using: gc.setFill(Color.RED); // The fill colour gc.setStroke(Color.BLUE); // The line colour Fall 2017 CISC124 - Prof. McLeod

Canvas Control, Cont. Set the line thickness using: gc.setLineWidth(5); // 5 pixels See the GraphicsContext API docs for all the drawing methods. A method starting with “stroke…” draws the outline of the shape. Starting with “fill…” draws a filled shape. Fall 2017 CISC124 - Prof. McLeod

Canvas Control, Cont. For example: To draw a line from (x1, y1) to (x2, y2) in pixels as doubles: gc.strokeLine(x1, y1, x2, y2); Don’t forget that the (0, 0) pixel position of a Canvas is the top, left corner of the canvas. Fall 2017 CISC124 - Prof. McLeod

Canvas Control, Cont. A filled oval: gc.fillOval(x, y, width, height); (x, y) is the upper left corner of a rectangle enclosing the oval of size width by height. (For a circle, width==height…) Fall 2017 CISC124 - Prof. McLeod

Canvas Control, Cont. You can draw many other shapes and curves including Bezier curves. Can also draw text. Effects such as linear and radial colour gradients can be applied by supplying LinearGradient and RadialGradient objects to the setStroke and setFill objects instead of just a single colour. The Canvas object itself can be translated, rotated and otherwise transformed in any way you can imagine. Fall 2017 CISC124 - Prof. McLeod

Canvas Control, Cont. Display images using .drawImage() – takes an Image object. Images can be in .bmp, .jpg, .gif or .png formats. You can load an image from a local file or from a URL. Use .getPixelWriter to obtain an object that will allow you to edit individual pixels. Fall 2017 CISC124 - Prof. McLeod

Canvas Control, Cont. Drawings are often built and edited in layers. Each layer can be a separate Canvas object. Layer them using StackPane or just Pane. Draw to each layer using individual GraphicsContext objects. Use a method like .toFront() on the Canvas layer to move it to the top. Fall 2017 CISC124 - Prof. McLeod

Canvas Control, Cont. Mouse/cursor interaction by adding an event handler to the Canvas object and listening for a MouseEvent: canvas.addEventHandler(MouseEvent.MOUSE_PRESSED, new EventHandler<MouseEvent>() { @Override public void handle(MouseEvent e) { gc.fillOval(e.getX(),e.getY(),20,20); } }); Fall 2017 CISC124 - Prof. McLeod

Fireworks Case Study Use of a canvas, spinners, drawing and animation. Linked to the course web site as the “Fireworks Case Study”. Fall 2017 CISC124 - Prof. McLeod

JavaFX Animation Lots of videos and tutorials “out there”. A couple of links to use as a starting point: http://docs.oracle.com/javafx/2/animations/basics.htm#CIHDHJHC and: http://www.java2s.com/Tutorials/Java/JavaFX/1010__JavaFX_Timeline_Animation.htm Fall 2017 CISC124 - Prof. McLeod

JavaFX Transition Animation Transitions can be used to animate single nodes or many nodes in parallel. A property (color, rotation, position, etc.) is changing from a start value to an end value over a specified length of time. Fairly easy to set up and useful for simpler node animations. See a code “snippet” on the next slide that moves a red rectangle 300 pixels in the x direction over 3 seconds, and back and forth, forever… Fall 2017 CISC124 - Prof. McLeod

JavaFX Transition Animation, Cont. Rectangle rect = new Rectangle(10, 10, 100, 100); rect.setFill(Color.RED); TranslateTransition translate = new TranslateTransition(Duration.millis(3000), rect); translate.setFromX(10); translate.setToX(310); translate.setAutoReverse(true); translate.setCycleCount(Timeline.INDEFINITE); translate.play(); Fall 2017 CISC124 - Prof. McLeod

JavaFX Transition Animation, Cont. See FXSimpleAnimation. Many other transitions are possible – fades, scaling, rotations, movement along a specific path, etc: FadeTransition ScaleTransition RotateTransition PathTransition FillTransition StrokeTransition TranslateTransition ParallelTransition (plays transitions at the same time) SequentialTransition (plays transitions one after the other) Fall 2017 CISC124 - Prof. McLeod

JavaFX Timeline Animation Used in the Fireworks Case Study. Timeline animations are better suited for more complex animation. A Timeline object is constructed with a series of KeyFrame objects that are individual frame specifications along the animation. A KeyFrame is constructed using at a minimum a Duration object and at least two KeyValue objects. Optionally, an EventHandler object can be used to execute some code when the KeyFrame is finished. Fall 2017 CISC124 - Prof. McLeod

JavaFX Timeline Animation, Cont. A KeyValue object consists of a single state for a mutable node property value. You can also add an Interpolator object, which specifies how you interpolate between KeyValues. The default Interpolator is Interpolator.LINEAR. You can specify others or define your own, which is handy for specifying a specific path if your property is a position. Fall 2017 CISC124 - Prof. McLeod

JavaFX AnimationTimer An AnimationTimer object can be created if you wish to trigger an event every time a frame is drawn to the screen. Not directly associated with the Timeline. This is an abstract class, so you need to implement the void handle(long now) method, where now is the timestamp in nanoseconds. This method will be called at the beginning of every frame refresh. Not to be confused with the javax.swing.Timer class! Fall 2017 CISC124 - Prof. McLeod

JavaFX Timeline Animation, Cont. Start a Timeline by invoking .play() or even better .playFromStart(), which stops the current animation, if running, and re-starts it from the beginning. Stop a Timeline by invoking .stop(). (Platform.exit() will stop all running threads including the Timeline thread.) Start an AnimationTimer using .start() and stop it using .stop(). Fall 2017 CISC124 - Prof. McLeod

Aside – Maximum Frame Rate Common monitor refresh rates are 60 Hz, for example. There is no point in trying to update frames at any rate higher than this! So, the lowest time between frames would be: 1000 / 60 or about 17 milliseconds. A gamer would be very happy if his game updated at 60 fps. What is a more realistic expectation? How slow can an animation get before it gets “choppy”? Fall 2017 CISC124 - Prof. McLeod

Two Oracle Demos See: Xylophone Demo – 3D drawing, and sound effects. A larger demo: Tree Animation – All drawn shapes, animated, transparent, non-rectangular window, music… Fall 2017 CISC124 - Prof. McLeod

Other JavaFX Topics Packaging, Deployment & Distribution. Web page embedded, stand-alone, etc. 3D graphics. Images and image manipulation. 2D and 3D Animation. Lots of other controls! Charts. Visual effects and transformation. Media (sound and video) playback. Multi-threading. Coding for Mobile Devices and Touchscreens. Fall 2017 CISC124 - Prof. McLeod

Other Java Topics Other Collection Types. Iterators. Streams. Sockets. Internet streams and web pages. Regular expressions. Working with databases. Security. Multi-threading (different than when using JavaFX!) JDBC, JSP, JMX, JNDI, JAXP, JAXB, RMI, … Fall 2017 CISC124 - Prof. McLeod

More Acronyms! Java Database Connectivity Java Server Pages Java Management Extensions Java Naming and Directory Interface Java API for XML Processing Java Architecture for XML Binding Remote Method Invocation Look for ‘Specialized Trails and Lessons’ in the Java Tutorial. Fall 2017 CISC124 - Prof. McLeod