Mapping Images Like Odometer

[SandyG]

had some time on my hands...

so a metre accurate km odometer.

you can define lots things,number of wheels, colors of wheels etc, font of the odometer
it has various styles for smooth scrolling, semi smooth, snap.
the numbers wheels are created, with bevels, number embossing, dirt.
the actual frames have more rendering and makes the frame look as thoughits on a wheel (curves it),and then renders the lighting.

the setup is in the form unit, the km is updated in a timer,wheels only render when needed,so must be on a persistant canvas,i use tshape in the demo.

It is done with properties,setter/getters so should be easy to convert to a component if needed..

nb tried various ideas, so may have unused code,vars,properties etc,not gone through to check.

That is exactly where I was going with the project, see what happens when a good programmer jumps in 

I have a sheet of paper with most of those options on it. This looks really good. Have to look at the code a bit.

Amazing work

Sandy

[Josh]

just added some comments in unit, so in areas especially the renderto you can see which parts do the work.

added larger pic, so you can see the beveling,dirt, shading,lighting,rounding, occlusion etc more clearly.

[SandyG]

That looks really good.

I have one question, and after playing with it I don't think it will work since the extra digit rendered for the wrapping of the wheel is only a '0' but how hard to make it be able to roll either direction?

The reason is that the display could be useful for many other things besides a rolling odometer.  A single digit building block could be used for a lot of things, I was thinking combination lock (can roll either direction), Volume control spinner,  other things like that.

The wheel Idea that I was working towards was pretty generic, then build from that. The ultimate would be either numbers/font selection or provide a bitmap, count of images, and have it do the automatic wrap images on to the big bitmap strip. That is what I was kinda hacking around with. Was stuck a bit at the wrap around both directions, but haven't spent much time with it. Let me zip up my hackish code for the rolling display that I have just for fun, it's nothing like what you did, just hacking stuff.

Sandy

[SandyG]

Attached is the hack project I had been working on.

Odo.zip should have all the project files. You, of course, will need BGRA Bitmap package installed.

This is/was the work in progress, but currently I broke the function that rolls things around smoothly, so it will eventually stop drawing. Haven't had time to fix, but the drawing to a cylinder and simple shading seems to be OK. Also this requires slot-machine-three.png as the baseline image loading. Some options for using text instead of an image are commented out.

Sandy

[SandyG]

I used "digital" numbers on the scoreboard in a football simulator I coded.

https://www.youtube.com/watch?v=eP9pUsvDrb8

What I did was find image files online, downloaded them, resized them to the size I wanted using Windows Paint and then loaded them as jpg files, read them from them screen, saved them as sprites and also exported them as constants to be included in a unit. I was using PTCGraph at the time, so I was just dealing with palette colors ranging from 0 to 255 (no colorRef or RGB

This is a bit different since with the rolling you can't pre-compute the fully rendered images. If you didn't warp the images around the cylinder true to life you could just preload the wheel of images (flat) and it would be good. Lot's of tricky stuff to do it for the likes of me, but got pretty far. The code that Josh put up does a crazy good job at what I was trying to get to.

[Josh]

hi
it should scroll the other way,if you decrease the value.
in the project file changing to -1 will decrease
 upodo(Odo4,-1,Frame4,shape5,label10);

note their is no sanity check so if value goes negative it will crash. easily fixed.

the fstrip holds the 10+1 digits, this is generated,but it should be easy to allow you to send your own image as long as it conforms to the dimension h*11,w; obviousley the rendering done to the fstrip on creation would not need to be done.

[SandyG]

Thanks for the tip, I had tried -1 on the increment, but nothing thinking about it I had tried it on the version with 000000 

I'm going to get a bit more familiar with the code, and try to make it a component for starters, then add a few things like bezel/border and simple stuff that I can do 

Let's see how far I get before bugging you...

Again, thanks for the awesome and quick work.

Sandy

[TBMan]

I used "digital" numbers on the scoreboard in a football simulator I coded.

https://www.youtube.com/watch?v=eP9pUsvDrb8

What I did was find image files online, downloaded them, resized them to the size I wanted using Windows Paint and then loaded them as jpg files, read them from them screen, saved them as sprites and also exported them as constants to be included in a unit. I was using PTCGraph at the time, so I was just dealing with palette colors ranging from 0 to 255 (no colorRef or RGB

This is a bit different since with the rolling you can't pre-compute the fully rendered images. If you didn't warp the images around the cylinder true to life you could just preload the wheel of images (flat) and it would be good. Lot's of tricky stuff to do it for the likes of me, but got pretty far. The code that Josh put up does a crazy good job at what I was trying to get to.

Hmm, you could just save as a sprite after full render, but you'd need at least 20 sprites. Easier to render on the fly I suppose.

[SandyG]

If you are bending the image around the wheel you would have to have an image for ever pixel it rolled or you could not pre-render. You can pre-render the text or images in flat form then just render the curved portion. Think like a window viewport with a lens to get the effect of the wheel rolling by with the proper curved image. You can't do that (as far as I could come up with) with pre-rendering the images in the strip. If you don't 'warp' the images you can do a lot less work. Also the rolling around issue gets more complicated as you slow roll. You are not just flipping the digit, so it's a bit more work.

Sandy

[Josh]

converting to a component,should not be too hard, as its structured to aid that.
initial ideawas to allow it tobe used on any canvas, so youcould haveas many as you want on a canvas. and update its value many times and draw as needed.
component wise,need to decide if base controlis tpanel,bcpanel,tbgravirtualscreen, any really that has a redraw/paint event.
decide on additional properties like OdomoeterStyle=Odometer,SlotMachine Odometer works off value, SlotMachine would allow independent position of each wheel.
odometer fixed 10 digits, self generated or user supplied,as a bitmap or imagelist (both these would require resampling to fit component digitheight,digitwidth).
have option for non 10 based, required for a slot machine.

if i get chance during the break i'll knock it up. if you can think of any other options add it in a single reply, as I tend not to check internet much over holidays. (I'll leave a laptop powered up in kitchen, to tinker with when preparing nosh and stuff)

Seasonal Greetings.

[SandyG]

Will Do, and Happy Holidays!

Sandy

[circular]

Happy holidays and happy coding 

[SandyG]

Josh -

Haven't had much time to think of ideas, but here is one that might be useful -

Separator wheel option, for things like Comma/Period/gear graphic, etc. That does not get affected by the rolling (basically static wheel)

Sandy

[SandyG]

Oh totally forgot, bezel, inset, outset, 3d, etc. Possibly lifted from BCPanel, it seems to have a lot of options, and can likely reuse most of the code.

Sandy