Wikia

Planet JFX

RolloverGrid

118pages on
this wiki
Talk1

Summary Edit

See this thread in the mailing lists.

RolloverGrid is a grid of black squares that glow red when you move the cursor over them. As you scrub the cursor they will slowly fade back to black, creating an interesting effect.

RolloverGrid

Code (Preview SDK) Edit

package javafxapplication1;

import javafx.ui.*;
import javafx.ui.canvas.*;
import javafx.ui.filter.*;
import java.lang.System;
import javafx.animation.Interpolator;
import javafx.animation.Timeline;
import javafx.animation.KeyFrame;


class CellModel
{
    attribute opacity:Number = 0.0;
    attribute color:Color;
    attribute anim =
        
        Timeline {
            repeatCount: 1
    
              // Key Frames
              var begin = at (0s) {
                   opacity => 1.0 tween Interpolator.LINEAR;
                   color => Color{red: 1.0 , green:0, blue:0, opacity: bind opacity}; 
              }

              var mid = at (0.5s) {
                    opacity => 0.5 tween Interpolator.LINEAR;
                    color => Color{red: 1.0 , green:0, blue:0, opacity: bind opacity};
              }

              var end = at (1s) {
                 opacity => 0.0 tween Interpolator.LINEAR;
                 color => Color{red: 1.0 , green:0, blue:0, opacity: bind opacity}; 
              }

              keyFrames: [begin,mid,end]
        }//Timeline;*/
}


class Cell extends Rect {
    
  attribute cellModel:CellModel;

   override attribute fill = bind cellModel.color;
  
   override attribute onMouseEntered =  function (e: CanvasMouseEvent){
       cellModel.anim.start();
       System.out.println("Test {cellModel.opacity}");
       
     }
}


class RolloverGrid extends CompositeNode { 
    function composeNode() {
        var cells: Cell[];

        for(j in [0..10]) {
            for(i in [0..30]) {
                var cellModel = CellModel {}
                insert Cell { x: i * 21, y: j * 21, width:20, height:20,  cellModel: bind cellModel} into cells;
            }
        }
        return Group{ content: [Rect { x: 0, y: 0, width: 31 * 21, height: 11 * 21, fill: Color.BLACK},cells] };
    }
}

Frame {
    content:
        Canvas { content: RolloverGrid { } }
    visible: true
}

==

Headline text Edit

==

Around Wikia's network

Random Wiki