Chris Oliver's Weblog
- All
- F3
- JavaFX
- Programming
- Research
F3 Visual Tools
So far I haven't spent time trying to develop serious visual tools to support F3 development, however once the language and API's have stabilized that's definitely something I want to do.
Useful visual tools include simple color choosers, linear and radial gradient editors, widget layout editors like Matisse, vector drawing tools like Inkscape and Illustrator, and image processing tools like Photoshop.
For each such visual tool, there are programmatic means to achieve the same effect. As a result you have to find a balance between hand crafting graphics in a visual tool and generating them programatically. In some cases the former is the more effective approach, in some cases the latter, or a mixture of both.
I don't have definitive proof yet, but I believe using F3 to develop such tools should make it far easier than what the competitors are doing (with the possible exception of Microsoft Expression), since other than Matisse all of those mentioned above are written in C.
As a partial demonstration, here's a basic F3 implementation of a "Pen Tool", which is a tool for drawing a sequence of connected cubic Bezier curves. I am not an expert or even a regular user of any of the above mentioned tools, so it took me a while to figure out how "Pen Tool" is supposed to work, but once I understood that it was straightforward to implement.
Each time you click on the canvas a new point and two new invisible control points are added to the curve. If you drag the mouse before releasing it you can adjust the tangent of the curve at that point (in effect by changing the values of the control points). If you hover near a point you'll see two small circles connected by a line and a larger circle surrounding the point. Dragging the larger circle moves the point. Dragging the smaller circles adjusts the tangent of the curve at that point (there are tooltips to that effect).
In this demo you can't delete points or insert points in the middle of the curve, however it does have infinite undo/redo with CTRL-z (undo) and CTRL-y (redo).
Here's a link to the source code.
The model of the curve is simply an array of points. The first point is a dummy control point. Following that points are added according to the following pattern: [pt, cp, cp, pt, cp, cp, ...], i.e. a point followed by two control points. For each point its preceding and following control point must be collinear (on the same line) with it. The mouse drag handlers for the control points implement this invariant when you drag one of the them by rotating the corresponding control point around the point.
From the array of points a Path is projected (with the F3 bind operator) having a MoveTo element for the first point, and CurveTo elements for each sequence of [cp, cp, pt] after that, which creates the visual curve. In addition, the circles and lines mentioned above are also projected from and bound to the same points in the array. As a result when the mouse handlers or undo/redo operations add points to the array or modify the coordinates of a point the visual elements (path, circles, lines) are automatically added, moved, or removed accordingly.
Posted at 05:06PM Feb 07, 2007 by Christopher Oliver in F3 | Comments[36]
Posted by Romain Guy on February 07, 2007 at 05:21 PM PST #
Posted by Martin Brehovsky on February 08, 2007 at 01:15 AM PST #
Posted by Adi on February 08, 2007 at 02:47 AM PST #
Posted by pedro on February 08, 2007 at 02:56 AM PST #
Posted by Hervé on February 08, 2007 at 01:24 PM PST #
Posted by Fred on February 08, 2007 at 07:38 PM PST #
Posted by Ivan on February 09, 2007 at 02:01 AM PST #
Posted by Tyler Weir on February 09, 2007 at 06:50 AM PST #
Posted by Ivan on February 09, 2007 at 10:44 AM PST #
Posted by Martin Brehovsky on February 09, 2007 at 12:07 PM PST #
Posted by Fred on February 09, 2007 at 01:04 PM PST #
Personally for example I think that specialized languages have their value, as shown by projects like Ruby on Rails. The good thing about F3 seems to be the amount of power it packs in so few lines, it's elegantly expressive.
On the other hand I have my doubts that any combination of SVG/XUL/ECMAScript will even be powerfull and easy enough to equal let alone beat Flash/Flex at its own game.
Of course I have no idea if F3 could do such a thing either nor if we would even want to but sometimes something completely new is needed to show us the way to go... or not to go.
And in the end here is someone willing to do the work so he gets to decide where to take this project. Nothing prevents you from taking SVG/XUL/ECMAScript and showing the world how things should be done properly :-)
Posted by quintesse on February 09, 2007 at 01:25 PM PST #
Posted by Herve on February 09, 2007 at 01:39 PM PST #
Posted by falcon on February 09, 2007 at 07:04 PM PST #
Posted by evanx on February 10, 2007 at 02:09 PM PST #
On the contrary from my experience the UI designers/Graphic artists are never the bottleneck in the software development process. Rather it's the programmers (and by a large margin).
My primary goal with F3 in its current incarnation is to allow programmers to be more efficient and as a result be able to deliver faithful implementations of UI designs in a short or reasonable amount of time.
Images and vector graphics created in Photoshop, Illustrator, or other third party tools can be easily incorporated into F3 programs and manipulated programmatically.
Although it would be nice to have automated integration between designer and programmer tools, the cost of transfering artifacts between the graphic artist and the programmer is not a significant bottleneck in the overall process either from my observations.
To summarize: the purpose of F3 right now is specifically to improve the efficiency of programmers, not that of designers, and not of the process of integration between programmers and designers.
Posted by Chris Oliver on February 10, 2007 at 03:16 PM PST #
Posted by Fred on February 10, 2007 at 03:51 PM PST #
Posted by Martin Brehovsky on February 11, 2007 at 01:41 AM PST #
Posted by Martin Brehovsky on February 11, 2007 at 01:44 AM PST #
Posted by Martin Brehovsky on February 11, 2007 at 01:44 AM PST #
Posted by Martin Brehovsky on February 11, 2007 at 01:44 AM PST #
Posted by Martin Brehovsky on February 11, 2007 at 01:45 AM PST #
Posted by Martin Brehovsky on February 11, 2007 at 01:46 AM PST #
Posted by Martin Brehovsky on February 11, 2007 at 01:46 AM PST #
Posted by Martin Brehovsky on February 11, 2007 at 01:56 AM PST #
Personally I think Flash is successful in spite of the fact that it uses ECMAScript for example, not because of it. Its strongest point are the easy with which it can be distrubted and the tools that exist for it. I think the fact that an "open/free" version of Flash has never seen the light of day does have to do with that last fact: the lack of tools. And I do think that to be to do what Flash does F3 will need some pretty good tools.
But in the end it's the programmers that have to enable the designers and the artists to do their work (by making those tools) and IMHO the more expressive the language they have to do that, the better are the options they can give to the designers/artists.
Posted by quintesse on February 11, 2007 at 08:32 AM PST #
Posted by Martin Brehovsky on February 11, 2007 at 09:42 AM PST #
Posted by Fred on February 11, 2007 at 10:24 AM PST #
Posted by Curt Cox on February 12, 2007 at 07:49 AM PST #
Posted by Kurtis Williams on February 12, 2007 at 12:14 PM PST #
Posted by me god on February 20, 2007 at 08:47 AM PST #
Posted by Tyler Weir on February 21, 2007 at 06:32 AM PST #
Chris, when can we have it?
Posted by key ödemeleri on September 01, 2008 at 01:27 PM PDT #
Chris, when can we have it?
Posted by chat on September 01, 2008 at 01:28 PM PDT #
I also thought Romain was complaining about F3! Feb is here. Don't make us wait any longer...
Posted by key ödemeleri on October 07, 2008 at 01:56 AM PDT #
Thank you.
Posted by evden eve nakliyat on October 23, 2008 at 03:40 AM PDT #