Help - DashXL.net

You are not logged in - Log in

Help Tutorial 1

Let's walk you through making a simple skin set.

When you first run SkinXL, you should have a blank skin set with 3 dashboards. For now lets just work on Dashboard1. If you click on that and hit Edit Dashboard, it should open the DashXL editor.

DashXL is not a point-and-click editor like Photoshop, you need to manually enter the coordinates for many things. I'll just show you how to make a simple round gauge. First, right-click on the Background layer > Add Object > Container. Now type a description for your container in the Dashboard Object Properties window. The containers aren't needed, but they really help keep things organized.

Now lets add an ellipse to our container, to serve as the main background for our gauge. This is again done through Add Object > Ellipse. This'll get you a nice, ugly, white, off-center, ellipse. First thing lets do its center it at 50; 50. Its still ugly, so lets go down to the Brush properties and give it a little color. Just to keep it simple, lets set Gradient Point 1 to 40; 40, and Gradient Point 2 to 60; 60. Now change the Gradient Style to Linear, and the Style to Gradient. Lets also set the Pen Style to Transparent to get it out of the way.

Next, we need to change the color of our ellipse. If you hit the ellipsis (...) button next to the Gradient Color Stops, we can edit these to change the colors. The Offset is a percentage of the distance between the 2 Gradient Points, 50 would be right in the middle, 0 would be at point 1, and 100 would be at point 2. You probably know what the rest is already, but notice that it does not automatically update. You need to hit the update button to save your changes for the current color stop.

Now we can start to make our gauge look a little 3D, right-click on the ellipse and hit Copy, and then right click again and hit Paste After Object. Decrease the horizontal radius and vertical radius by 1, and then switch the Gradient Points around so that we have the opposite gradient. Lets now copy this ellipse, and paste it below again. Change the brush style to solid and the color to black. Decrease both the raduis's by 1 again. I don't think you'll need a picture for this one.

We're almost done with our gauge background. We just need 1 more thing -- numbers. Right click on the container, and add a Tick Marks object. Change the center to 50; 50, and the radius to 17, and lets make them a little shorter. Now we just need to edit the Line and Text children objects to have a white brush, and our background will be done.

Now for the foreground, lets add a Needle object to the foreground layer. A needle moves its children objects either in a circle, or in a straight line, depending on PID data. We're using a circular needle so we need to make sure the center point and sweep match up with our tick marks. Change the PID to SAE.VSS (speed PID), and the units to english because I'm in the U.S.

One more thing to do. Add a Line object to our needle, and set the start point for 50; 50, and hit the ellipses button for the endpoint. Click near the start of the first tick, and then change the width to 1,0.25 (starts at 1, drops to 0.25). Set the brush color to a general orange, and try out the needle tester!

You may have noticed that even though the horizontal radius and vertical radius are the same, its really more of an oval than a circle. This is because DashXL is all done as a vector graphic, and so it scales to match the current screen size. If you want to force it to be circlular, you can check the box for Maintain Aspect Ratio on the Dashboard object (you can change the ratio as well). Careful though, with an aspect ratio 100; 100 might not really be the edge, and you can have objects that go offscreen that are normally visible.

If anyone has questions they are welcome, please ask! Click here to download the final DashXL skin set.