Remember: The idea is to create a dial that can be filled with any color, size, or scheme, so that we can reuse the image how ever we need. So don’t worry so much about the design feel free to experiment this is a multi - part tutorial in Inkscape, Netbeans, and of course JavaFX. I am looking for any feedback you can provide (as I stated in my “About” page, I am no expert at any of these, so collaboration is always helpful). If you have no interest in learning Inkscape, or you want to compare, feel free to download the dial here.
First, in the pure essence of advocacy you need to download and install Inkscape (http://www.inkscape.org). You can of course use any graphics program to create your control, as long as you have a way to tag the SVG components (in SVG/FX parlance, they really are the groups of SVGPaths). Nevertheless, once you have it installed open it up. Select File, New, and Default. You should have a blank canvas to start from. So to get to this, you really have to assemble three distinct components. The bottom or base of the dial, the top or dial itself, and the pointer. With Inkscape opened I like to start with the base, because it really is going to be the largest piece of the puzzle. To create the base use the Circle object, and don’t worry about the dimensions, the precision here is in the cosmetics (because all it is all scalable). To create the bottom - select the Circle, Ellipse, and Arc tool from the toolbar. While holding the Ctrl and Alt keys, left click drag a line on the canvas. The Ctrl and Alt keys are used to constrain the height and width, thus creating a circle. Now select the whole Ellipse option from the menu bar.
These menu items appear once you have selected the Circle, Ellipses, and Arc tool.
Adding the dimpling
This feature is actually an object replicated along a path.
To create this feature we are going to arbitrarily create a new Circle object.
Once again select the Circle, Ellipse, and Arc tool from the tool bar. Again we want to constrain the height and width for this arc, so hold the Ctrl and Alt keys, and left click drag a small line. Next select the Switch to Arc option from the menu bar, and drag the right handle all the way over to the left handle (creating a half circle). Align the dimple to the right of the circle, just touching it. This is done by selecting the Arrow icon on the tools menu. Now all you have to do is a left click drag so that the arc is only slightly touching the top side of the circle. Holding the shift key select the bottom circle (so that both the dimple and the bottom circle are now selected). Click on the Object menu item, and choose the Align and Distribute option. (This will make the pattern smooth, as you will see in a moment). By default this should create a new menu bar on the right side of the Inkscape window (appropriately titled Align and Distribute Shift+Ctrl+A), with the short cut key you can use to activate this window). Choose the Center on Vertical Access, and make sure that the Arc is still just touching the Circle. (If not just nudge the Arc as needed, by just selecting the Arc and moving it up or down). One cosmetic change, select just the bottom circle, and from the menu bar, select Object, then Fill and Stroke. With the new menu box on the right side of the Window labeled Fill and Stroke (Shift+Ctrl+F), select the Stroke Style tab. Change the Width from 2.00 to “1.00″ px. This will make the inner circle thinner then the dimpling. Now we need to create the effect of the dimpling. If the Circle and Arc are not selected, first click the Arc, and then while holding down the Shift key,
select the bottom circle. Select Effects from the menu bar, Generate from path submenu, and choose the Pattern along Path option. In the new Pattern along Path pop up. Select the following options:
Copies of the pattern: “Repeated, stretched”
Deformation type: “Snake”
Space between copies: “0.0″
Normal Offset: (Leave this we will need to change this to clean up the pattern).
Tangential Offset: “0.0″
and finally select the Live preview check box.
Now to get the arc to sit on the Circle, instead of the Circle intersecting the arc increase the Normal Offset. The bottom is now created, once again select both the arc, and circle. Either click and shift click, or type Ctrl-A. On the menu bar choose Object, and then Group or type Ctrl-G or right click on the new object and select Group. Now lets make them more meaningful, with the new Group selected, Right Click, and select Object properties, or choose Object from the menu and select Object properties, or type Shift+Ctrl+o. For the Id, and label call this object “bottom”, and click the Set button.
Now to create the top
Once again we want a circle, so constrain the height, and width by holding the Ctrl and Alt keys at the same time.
(Don’t forget to select the “Make the shape a whole ellipse …” icon).
The size of this circle should be smaller then the bottom, but size to your own taste. Choose the Arrow icon to select and move the top circle over the bottom, just to get an idea of the size. If the circle isn’t the correct size, select the circle, and while holding the Ctrl and Alt keys again, use any of the diagonal corner arrows to increase or decrease the size. Lets set the stroke on this object. Choose Object from the menu bar, then Fill and Stroke, or the Shift+Crtl+F keys, or right click and choose Fill and Stroke from the popup menu. Click once again on the Stroke style, and set the width to “5.00″. Move the top circle away from the bottom circle.
Creating the pointer
The pointer ultimately will revolve with the top. To create the pointer the easiest tools to use are the guidelines, and create a square the size of the arrow you are looking to create. Accessing the guidelines involves left clicking on the ruler measuring bar on top and pulling it down. This guideline will be useful in creating a box, so pull two down, to have two guidelines, and do the exact same with the vertical ruler measuring bar on the left side. This will allow you to create visual box, to create pointer in. Another option that is helpful is to use the grid.
The grid is located under the View item on the menu bar. (For those that prefer to use accurate measures you can configure the Grid under the File menu item, there is the Document Properties option. In the Document Properties dialog select the Grid tab). If you use the grid, you may need to disable the Snap function, located in the Menu bar under View, and then Snap.
Now the pointer can be created by making a simple triangle.
First click in the top left corner of your box, and meet on the bottom middle of the guideline. Next hold the Shift key, and click top right, and drag to meet the first line. Select the new arrow, and click next to the word Stroke: on the bottom status panel, and the Fill and Stroke panel should open.
Click the Fill tab, and hit the ‘X’ to remove any fill, click the Stroke Paint tab, set it to a solid, and lastly click the Stroke Style, and set the style to something more like “3.0″ px.
Voila, you have an arrow, add it to the top, and you have a dial.
Drag the (just the top not the arrow) over the bottom circle, the align it by holding shift, and selecting the bottom. Choose Object from the menu bar, and then Align and Distribute (or Ctrl + Shift + A). Now select Center on Vertical Axis, and Center on Horizontal Axis (hint: Hover over the icons).
Now add the arrow, drag the arrow to the bottom of the top circle, and then hold shift and select the top circle.
For the last piece of the top, group the top and arrow together, by clicking the Object from the menu bar and select Group (or Ctrl+g).
Now right click on this top object, select Object Properties from this submenu, and enter in the name “top” for both Id and Label, and hit Set.
Now to finish, and keep the top on top, click the menu bar item Layer, and then Layer to top (or Shift+Ctrl+Home).
Whew, that was longer then I expected. If you find it too fast, too slow, let me know. Thanks and keep your eyes open for the next installment.
Part 2. Turning an SVG drawing into a JavaFX Dial next >
- - tekgnu - -
tekgnu General, OpenSource Dial, Inkscape, JavaFX, Tutorial
Now we have leaped forward to version 1.1, ( 
). The 1.1 release is clearly more of a bugfix, and by designed more of a teaser for some of the missing elements. We have the SDK where are the phones? And more importantly to the OS community where is my formal Linux release (fortunately there are work arounds).