Category Archives: Design

JavaFX 2.0 – NodeCodeEditor

As I previously said I am working on a Software Component Editor. Transforming my inkscape visual prototype to my FX Application was quiet easy thanks to JavaFX SVGPath. At least for the shape contour, but I had another problem to solve to manage gradient.

So I started groping around JavaFx Gradient paint (RadialGradient and LinearGradient). Modifying and launching again and again to adjust my gradient attributes change. And then I get bored… I mean, It was about to take me a whole life making theses adjustments !

Thinking about it I remembered the way prototypes are built in my company, using SmallTalk language and performing changes on code on the editor that is taken into account as soon as they are “accepted”. Well I can do that too ! Thanks to Eclipse IDE debug mode. The only constraint was to have no structural change in my code and finding a way to have a loop that will take into account all changes on my JavaFX graphical Application.

Please welcome my little NodeEditionVisualizer ! It is simply a JavaFX Application that loop on a method call that draw a user created Node continuously. It has to be launched in debug mode so that changes are taken into account when you save. It is composed of an X/Y axis and a user created Node that can be changed dynamically.

protected ScheduledThreadPoolExecutor executor = new ScheduledThreadPoolExecutor(1);
 
public static void main(String[] args) {
	NodeEditionVisualizer.launch(args);
}
@Override
	public void start(final Stage primaryStage) throws Exception {
		final Group pane = new Group();
		pane.translateXProperty().set(50);
		pane.translateYProperty().set(50);
 
		Scene scene = new Scene(pane);
		scene.setFill(Color.BLACK);
 
		primaryStage.setScene(scene);
		primaryStage.setWidth(550);
		primaryStage.setHeight(550);
		primaryStage.setX(0);
		primaryStage.setY(0);
		primaryStage.setTitle("C3 Shape Editor");
		primaryStage.show();
 
		final Path axis = PathBuilder.create().elements(
			new MoveTo(0, 0),
			new LineTo(0, 100),
			new LineTo(-10, 90),
			new MoveTo(0, 100),
			new LineTo(10,90),
			new MoveTo(0, 100),
			new LineTo(0, 3000),
 
			new MoveTo(0, 0),
			new LineTo(100, 0),
			new LineTo(90, -10),
			new MoveTo(100, 0),
			new LineTo(90, 10),
			new MoveTo(100, 0),
			new LineTo(3000, 0)).stroke(Color.WHITE).build();
 
		final Text origin = TextBuilder.create()
		.text("(0,0)").fill(Color.WHITE).x(-10).y(-5)
		.build();
 
		final Text x = TextBuilder.create()
		.text("X Axis").fill(Color.WHITE).x(50).y(-5)
		.build();
 
		final Text y = TextBuilder.create()
		.text("Y Axis").fill(Color.WHITE).x(-25).y(70).rotate(-90)
		.build();
 
		this.executor.scheduleAtFixedRate(new Runnable(){
			@Override
			public void run() {
				Platform.runLater(new Runnable(){
					@Override
					public void run() {
						pane.getChildren().clear();
 
						Node dut = createShape();
 
						pane.getChildren().addAll(dut, axis, origin, x, y);
					}
				});
			}
		}, 200, 200, TimeUnit.MILLISECONDS);
 
		primaryStage.setOnCloseRequest(new EventHandler() {
 
			@Override
			public void handle(WindowEvent paramT) {
				executor.shutdownNow();
			}
		});
	}
 
	public Node createShape(){
		Rectangle rectangle = RectangleBuilder.create()
                .x(50).y(100).width(250).height(100).fill(Color.RED).stroke(Color.BLACK)
                .build();
 
                Circle circle = CircleBuilder.create()
                .centerX(150).centerY(100).fill(Color.BLUE).radius(200)
                .build();
 
                return new Group(circle, rectangle);
	}
}

As usual, code is available in a jar on download page.

Feel free to reuse this code ! If you have some suggestions, I would be glad to take them into account !

LoNee

JavaFx – Exciting 2.0

Yesterday I received an e-mail from javafx4you with the following title : “JavaFx 2.0 beta is now available for download”. I had only a few moment to process this information because I already had plans, but I take time to download the beta version and install it on my computer.

After 2 minutes of coding I wrote a simple Stage just to see it running before leaving, but unfortunately my JDK version (64bit) did not fit the JavaFx jar (only 32 bit available for now). So I Took some time to download the 32 bit version of the last JDK… and Yes, the code did work !

So I go on and took time to write the full demo code availabe here.

The result is a cool cicle animation and blur effect stage. It seems to be very powerfull as the animation are really easy to describe and run… And graphical effects seem to be easy to compose.

I then tried to play with the event and add a mouseEnter mouseExited listener on each circle of the scene. The API is very close to Swing listeners, swing guy will not be very surprise, except that it seems to be the same approach than Android API, it is not a addMouseListener() method but a setOnMouseEntered(). So not a list of observer but a single observer ? I tried to add two different listener, and only the second one was called !

Moreover, JavaFx follow the same Single Threading rule than Swing. When in swing you use SwingUtilities.invokeLater() you shall now use Platform.runLater() for JavaFx. Swing/JavaFx integration seems to be managed through the javafx.embed.JFXPanel component that is a swing component. So integrating JavaFx into Swing is done ! Don’t forget to transfer event from Swing Thread to JavaFx Thread to respect the coding rule !

Now new experience can start, with easier graphic manipulation. I hope I will have time to try things again.

LoNee

Design – Inkscape #2

Today an other drawing that is a realization of a great tutorial that is very well explained. I’m glad to discover Inkscape capabilities like filters, dynamic offsets, circular gradient effects… If you want to discover some inkscape tricks, try this tut !

Contrary to the previous Design post this realization is done from scratch, no input images. I might find time to propose an other little draw soon. I’m currently working at a small well known card game on Android platform. Coming soon !

LoNee

Design – Inkscape

At work one of the new activity is to propose new design innovation (and more) to customer for next HMI oriented application. I’ve always been impressed by design art. I decided to try drawing and doing design myself. Today I post my first design activity, using Inkscape. Inkscape is an Open Source vector graphics editor.

After a first step learning how to use Inkscape basic functions (many thanks to PLA for the short morning lessons…), I decided to try doing more complete tutorials. So the result I present here is an Inkscape version of the photoshop tutorial you can find here. I did not want to insert the woman in my version because this photo is copyrighted…

I will go on trying to do some design, tutorial to learn but own creations as well… My next work may be to propose a new skin for this blog !

LoNee