CISC124 Quiz 3 marking underway, still. Assn 5 due Friday, still. Fall 2018 CISC124 2/16/2019 CISC124 Quiz 3 marking underway, still. Assn 5 due Friday, still. Office hours are done, but: Email me anytime, Exam Prep Tutorial? Notices will be sent out via onQ, as usual. Fall 2018 CISC124 - Prof. McLeod Prof. Alan McLeod

Today Leftover from last time: Spinners and Sliders. FYI: Drawing to a Canvas node. JavaFX Animation. Oracle JavaFX Demos. What did we not discuss this term? Fall 2018 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 2018 CISC124 - Prof. McLeod

Spinners and Sliders, Cont. For Spinners, you must set min, max and initial values in fxml file yourself: initialValue="0" max="20" min="-20“ Use change listeners with .valueProperty() to detect changes in slider or listener positions. Note how spinner works with arrow keys or mouse click. Fall 2018 CISC124 - Prof. McLeod

Canvas Control See: http://docs.oracle.com/javafx/2/canvas/jfxpub-canvas.htm Canvas is a Node, 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 2018 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 2018 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 2018 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 2018 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 2018 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 2018 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 2018 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 2018 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 2018 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 2018 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 2018 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 2018 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 2018 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 2018 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 2018 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 2018 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 2018 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 2018 CISC124 - Prof. McLeod

JavaFX Timeline Animation Demo Borrowed (shamelessly!) and slightly modified from Oracle: See the TimelineDemo project. Has a filled oval and a text label in a StackPane that increments the count in the label using an AnimationTimer. The oval continuously grows and shrinks and then translates every 2 seconds. Fall 2018 CISC124 - Prof. McLeod

JavaFX Timeline Animation Demo The label counts up to about 235, so the AnimationTimer handle method is being invoked about 117 times per second or at the rate of 117 Hz. Impressive, but is this necessary? What is the highest animation fps that you can hope for? Fall 2018 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 2018 CISC124 - Prof. McLeod

Imitating javax.swing.Timer This class creates its own thread and fires an event at specified intervals. JavaFX does not “like” this separate timer thread since it already has its own animation thread running. You can use a Timeline object to imitate a Timer object in JavaFX. Build the object using only two KeyFrame objects: Fall 2018 CISC124 - Prof. McLeod

Imitating javax.swing.Timer, Cont. Timeline timeline = new Timeline( new KeyFrame(Duration.ZERO, actionEvent -> drawFireworks()), new KeyFrame(Duration.millis(1000 / desiredFrameRate))); timeline.setCycleCount(Timeline.INDEFINITE); If desiredFrameRate is 60 then, this timeline object will invoke the drawFireworks() method every 17 milliseconds. Fall 2018 CISC124 - Prof. McLeod

Oracle Demos See: Xylophone Demo – 3D drawing, and sound effects. A larger demo: Tree Animation – All drawn shapes, animated, transparent, non-rectangular window, … Also, download the new JavaFX “Demos and Samples” zip file from Oracle. See “Ensemble8”, for example. Fall 2018 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 2018 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 2018 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 2018 CISC124 - Prof. McLeod