This is a duplicate post from the skin designer thread that I thought lots of people might want to know about. Basically know for needles/guages you dont have to create a bazillion images at different rotations. Just 1 image and then specify the rotate perameters, and the program will rotate the image and stick it up. You would think that something as simple as rotating an image would be easier in such a high-level language, but as I found out tonight... IT IS NOT!
So, EUREKA on the rotating images.
It works. Of course only on my copy.
But here are some screenshots to hold you over.
Here is the main image that all the needles are rotated from:
And then to answer the previous questions on PNG format, if you look at this picture, the checkerboard is "transparent" underneath it. Now you can see that some pixels have a semi-transparent property meaning you can see that checkerboard in varying amounts for different pixels. For instance outside of the main needle area it is all transparent. Inside the needle completely it is 0% transparent. However right on the edge, some are like 50% some are 60% some are 20% and so on. When that is placed over another image, it will blend what is beneath it into it making it look like it belongs. A gif image must be either 0% or 100% in transparency. So all those values inbetween could not be there and that creates akward little artifacts. Make sense now?
Then the following images are of me manually adjusting the values to different formats. I just used whole numbers, but any decimal will work:
The skin section for that is:
Code:
#ENABLEROTATEMAINS#true
#ROTATESPINPOINT#153,153
#ROTATELOWHIGH#0;5
#ROTATEANGLES#20;300
#ROTATESTEPS#360
Where:
#ENABLEROTATEMAINS# tells the program to rotate the image at #IMAGESTATIC#
#ROTATESPINPOINT#153,153 where
xxx,yyy are the coordinates to rotate around. For instance, the needle itself is 183px long. The circle bubble is 50px by 50px. I want the rotation to occur from the centre of that circle obviously, so 183-(50/2) = 153. And since I have positioned the needle in the centre of the entire 316px by 316px image, it will be symmetric so also 153 from the y direction.
#ROTATELOWHIGH#x;y where
x is the lowest value in the guage and
y. So for a speedometer,
x would be 0 and
y would be the top speed, lets say 200. However for temperature, you might want the lower limit to be 100F and the upper limit to be like 300F. As of now though it cannot accept evaluated data, so you would need to convert 100F and 300F into their repsective voltage numbers such as 2.3 and 3.8 (example only, not actual).
#ROTATEANGLES#20;300 The image will rotate clockwise. So with the picture I have, an angle of 0 is it pointing straight down, an angle of 90 is pointing to the left, an angle of 180 is pointing straight up, an angle of 270 is pointing to the right, and an angle of 360 will point straight down again. As of now there is no looping so any angle over 360 will always act as 360 so straight down. Also negatives are iffy. I havent tested thouroughly yet. Anyways, the
20 in the skin command means that the lowest angle you want is 20degrees clockwise or pointing down and left, and thehighest would be pointing down and to the right, just as a speedometer is. I have never seen a speedometer point vertically down before (without being busted!).
#ROTATESTEPS#360 means that there is a resolution of 360. If that was 4 then the needle would only have 4 positions. If the resolution was 8 then only 8 positions. Obviously the more positions, the less jagged it looks. So the default is set to 360 which is 1 image per angle which is the maximum pretty much because it does integer math to prevent epileptic flashes like on the analogue graphs (I still dunno what to do about that).... You can make it like 10000, but that will just eat up cpu cycles and not look any better.
So there you have it. Needles and any other rotation can now be done. Air pressure, fuel, rpm, anything just like a cluster guage. I will code this into the skin designer and then post both my new designer and main program.
Any suggestions or comments?
Linear Mode
