Creating a Mechanical Counter look with QtQuick/QML

Question

I'am trying to replicate the look of mechanical counter with QtQuick. (Image below is from http://en.wikipedia.org/wiki/Counter#Mechanical_counters) The counter value is a floating point number and 8.5 might show a counter wheel showing the bottom of the 8 and the top of the 9.

For the individual wheels I thought of displaying shifting excerpts of graphic strips. The following graphics shall illustrate this. My QML component should display the digits in the blue rectangle, the rest (blurred in the image below) shall not be visible.

My question is what would be the best approach to construct the view and update the counter display?

• Have a small Canvas element for each digit, then draw an excerpt of the graphic strip into it?
• Use a small Flickable with the whole graphic strip as a child and then pan the graphic strip? But I don't want the counter view to be mutable by the user, i.e. it should not accept mouse or touch events to pan the view.
• Any other approaches?

Answer 1

If you want the items to wrap around, use several PathViews, whose models are the literal 10:

model: 10

You can set interactive to false for each view to disable user interaction.

Each view is in a Row. Set the preferredHighlightBegin/end properties both to 0.5, so that the current item is always centred.

Then, enclose all of that within an Item whose width is equal to the implicitWidth of the row, and whose height is equal to whatever height you want (probably the height of one item delegate). Set clip to true to hide the items that shouldn't be visible. You can then centre the contents (row) in the item.