Recreating a Paper Sliding Ruler/Chart

Hi Everyone–I’m a graphic designer and new to Xojo. I’m still working my way through the Xojo documentation and would really appreciate it if someone could point me in the right direction.

I’m working on taking a “slide rule” based calculator/chart and am turning it into an iOS App.

The first photo shows the cut outs:

The second photo shows what it looks like on the sliding sheet:

I originally started with Adobe Flash and got stuck with the way it slides–I’ve tried out LiveCode/Pencil Case–and I got furthest with Pencil Case–it has a way to define out scrolling views:

I’m looking for a way to refine the slider programmatically–by this I mean how far I can pull the slider out or how far I can push it in.

Can anyone point me to which Xojo Example would best help me out for this project? Also any pointers on creating things with overlapping layers with “holes” cut out? Please keep in mind that I’m still trying to wrap my head around the coding aspects–which is why I got a little further with the graphic design based approach–and would like to use Xojo because I’d like to learn how build things from more of a programming perspective :slight_smile:

Thanks so much for your help!

seriously? a toilet count calculator?

I guess I can a need… just…ok

but personally… I’d not use a “sliding” theme… forego what it IS, and use pickers or tableview instead

This shouldn’t be too difficult, really, but it will require a deeper understanding of how Xojo graphics work.

I’d read up on the Canvas and Graphics classes, as those are key. In short:

The Canvas class is a control that you place on a window. It’s a rectangular shape in the IDE, but is invisible – it only displays whatever is drawn within in.

The Graphics class is sort of like a giant page for drawing on. Within the Graphics class there are drawing commands like drawLine and drawRect (which do what you think). A DrawString command draws text in the current font and text size, and so on. There’s even a DrawPicture command which draws an existing picture (like a JPEG), or it can be a picture you create right in Xojo (Picture objects have their own Graphics class, and anything you draw there becomes part of the picture).

Now the cool thing about the Graphics class in relation to your project is that the Graphics class is, for all intents and purposes, infinitely large. That means you could draw your entire chart on it. Don’t worry about “going off the page” since the page is infinitely large. But since your Canvas object is much smaller, it can act as the “window” (the die cut opening of your chart). You can basically scroll the Graphics so just the portion you want is displaying through that opening.

In terms of a practical way of doing this, I’d probably just create a large picture of the chart and display it in the Canvas. By adjusting the scroll position of the picture (the starting drawing position) you can control what is visible through the Canvas opening. (Remember, drawing positions can be negative!)

I’d read up on examples that work with Pictures to learn about how to display and scroll them.

I hope this gets you started. As a fellow graphic designer turned programmer, I think you’ll find learning to program well-worth the effort!

another idea… have 3 TEXT fields (one for each window) and a slider…
as you move the slider, it “rotates” the values in the 3 windows… easy peasy

once you were/are familiar with XOJO, that app shouldn’t take more than an hour to code up (not counting the graphics assuming you want it to LOOK like the paper version)

I would suggest a top level listbox and two text fields below and side-to-side.

As you slide up and down the listbox then change the values in the two text fields.

Will the toilet counter also take into account the number of nearby bushes? :slight_smile:

Put this example together using iOSKit in <10 minutes.

If you’re wanting to reproduce it as a “real” looking/feeling slider, I would suggest looking at the swipeExample project in iOS/Controls.
Add the sliding card as an image, add the front as an image with transparent holes for the numbers to show through (just use a png with transparency).
Add a property (yOffset) to keep track of the position.

In pointerDrag, adjust yOffset by pos.y, unless it is at the end of the card, then call invalidate to make it redraw.
In the paint event of the canvas, you’ll draw the image of the slider (offset by yOffset), then draw the front of the card over the top.

Here’s a quick example… you could optimize the drawing by creating scaled versions of the images in the open event or including images sized for each screen size.

Wow! Thanks so much for your help! That for the binary examples Jason & Jim! The binary examples are mind blowing–and Thanks Marc! I totally need to get some books & back issues!

@Dave–I do admit this is a strange project—I’ve been stumbling across a bunch of these strange sliding charts in the construction industry–I guess back in the day those types of companies handed out these sliding charts out with their mailings or customer visits–these days they have to pay a small fortune to get them printed–surprisingly a of them still use these charts today.