Coffeejolts: August 2008 Archives

After playing around with the modification I made im my previous post to MediaView, I was able to come up with a solution that works for any Node you pass in. The class is called FXContainer. Its purpose it to scale its contents to whatever width & height you specify, while maintaining the aspect ratio of the original.

By default, this results in the "black bar" effect that you've probably seen used to maintain aspect ratio in movies. That is usually appropriate, but there are also times when you may want the content expanded to fit the FXContainer, while still respecting the aspect ratio. For example, you may want a background image to fill the entire frame, but not become distorted. That is what the fillDimensions attribute does.

Here are screenshots demonstating the FXContainer:
 
Here is the source code.

/* * FXContainer.fx * * Created on Aug 4, 2008, 10:02:32 PM * * This class provides a container that can scale and * center its contents while maintaining the aspect * ratio of the original */ package org.coffeejolts.javafx.tests; import javafx.scene.*; import javafx.application.*; import javafx.scene.transform.*; /** * @author coffeejolts */ public class FXContainer extends CustomNode{ attribute fillDimensions:Boolean = false; attribute content:Node; attribute width:Integer; attribute height:Integer; private attribute group:Group = Group{ content: bind content transform: bind [translate, scale] } private attribute sf:Number = bind getScale(width,height,content.getBoundsWidth(),content.getBoundsHeight(),fillDimensions); private attribute scale:Scale = Scale{ x: bind sf; y: bind sf; }; private attribute translate:Translate = Translate{ x: bind getTranslation(width, content.getBoundsWidth() * sf); y: bind getTranslation(height, content.getBoundsHeight() * sf); }; private function getTranslation(a1:Number, a2:Number):Integer{ return ( a1 - a2) / 2.0 as Integer; } private function getScale(vw:Number, vh:Number, sw:Number, sh:Number, fullscreen:Boolean):Number{ var ar_v:Number = vw / vh; var ar_s:Number = sw / sh; var arViewLower:Boolean = ar_v < ar_s; if( fullscreen){ arViewLower = not arViewLower; } if( arViewLower){ return vw / sw; } return vh / sh; } function create():Node{ return group; } }

You can run the demo via webstart below. I have pack200 enabled, which will greatly reduce the download size for those of you using the Java 1.6.10 beta.

Since the JavaFX Preview SDK was released, I have been toying around with its video support. Overall, it is really, really good. I'm impressed and I've only hit the tip of the iceberg. Of course, there is room for improvement. For example, the current MediaView class does not have any concept of width nor height, whereas the ImageView class does. I was able to fix that with this amazingly short piece of code.

package org.coffeejolts.javafx.tests; /* * BetterMediaView.fx * * adds width, height, and surrounding bar color to * MediaView.fx */ import javafx.scene.media.MediaView; import javafx.scene.paint.Color; import javafx.lang.*; /** * @author coffeejolts */ public class ImprovedMediaView extends MediaView{ attribute fill:Color = Color.BLACK on replace{ myJPanel.setBackground(fill.getAWTColor()); }; attribute width:Integer on replace{ sgc.setSize(width, height); }; attribute height:Integer on replace{ sgc.setSize(width, height); }; }

Yes, that is really it. To use it, just swap out ImprovedMediaView for MediaView, and set your width, height, and fill like this...

package org.coffeejolts.javafx.tests; var frame:Frame = Frame { title: "ImprovedMediaView Test" width: 430 height: 360 closeAction: function() { java.lang.System.exit( 0 ); } visible: true stage: Stage { content:[ Rectangle{ x: 10, y: 10 width: bind frame.stage.width - 20 height: bind frame.stage.height - 20 fill: Color.DARKGRAY }, ImprovedMediaView{ width: bind frame.stage.width - 40 height: bind frame.stage.height - 40 translateX: 20 translateY: 20 fill: Color.BLACK clipAntialiased: true mediaPlayer: MediaPlayer{ autoPlay: true repeatCount: MediaPlayer.REPEAT_FOREVER media: Media{ source: "file:/C:/media/movie.avi"; } } } ] } }

The result looks like this: