Children's Education App for Measuring with a Ruler

Share tips, tools, and other resources for helping educators bring LiveCode into the classroom

Moderators: FourthWorld, heatherlaine, Klaus, kevinmiller, robinmiller

gshearne
Posts: 36
Joined: Mon Jun 02, 2014 4:41 am

Children's Education App for Measuring with a Ruler

Post by gshearne » Mon Dec 11, 2017 5:01 am

Hi,
Does anyone have any suggestions on where I can find a demo or sample stack that has some type of interactive 'ruler' that the child can use to 'measure' objects on the screen? We are trying to build an education application and one of our curriculum requirements is to teach how to use a ruler. The teachers have told me what they want an it is literally to have a ruler object the child can manipulate to draw lines between dots and to measure in some type of increments.

Any thoughts or suggestions would be greatly appreciated.

Thanks
Greg

richmond62
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 9250
Joined: Fri Feb 19, 2010 10:17 am
Location: Bulgaria

Re: Children's Education App for Measuring with a Ruler

Post by richmond62 » Mon Dec 11, 2017 11:22 am

It would be dead easy to run up a "ruler" that could be dragged around a screen.

It would NOT be easy to then run up a "ruler" combined with something that allowed an end-user
to "draw" dots, lines and so on on the desktop.

Personally I would run up a vertical and a horizontal "ruler" implemented as 2 separate standalone
programs that could be dragged around the screen.

I would then use some sort of screen-draw program that was quite separate from the rulers:

Windows: https://epic-pen.com/

Macintosh: https://itunes.apple.com/us/app/draw-on ... 7879?mt=12

Linux: https://apps.ubuntu.com/cat/applications/ardesia/

richmond62
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 9250
Joined: Fri Feb 19, 2010 10:17 am
Location: Bulgaria

Re: Children's Education App for Measuring with a Ruler

Post by richmond62 » Mon Dec 11, 2017 11:36 am

MyRuler.jpg
Rulers.zip
(218.24 KiB) Downloaded 378 times

gshearne
Posts: 36
Joined: Mon Jun 02, 2014 4:41 am

Re: Children's Education App for Measuring with a Ruler

Post by gshearne » Mon Dec 11, 2017 2:48 pm

Thanks for the ideas. My problem is my teachers want the child to be able to move a single 'ruler' in all directions and angles on the screen. They ask for the 'ruler' will start horizontally and then be both moved and rotated. It would be like taking an image/graphic and changing the rotation angle by dragging one side while the other side remained anchored.
Regards
Greg

richmond62
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 9250
Joined: Fri Feb 19, 2010 10:17 am
Location: Bulgaria

Re: Children's Education App for Measuring with a Ruler

Post by richmond62 » Mon Dec 11, 2017 7:13 pm

Well, then, the first thing you need to lay your hands on is an SVG
greyscale ruler which you can import as a widget . . .

Then set up rotation handed and have the windowshape of the stack
continually changed to one of a series of images with masks.

[-hh]
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 2262
Joined: Thu Feb 28, 2013 11:52 pm
Location: Göttingen, DE

Re: Children's Education App for Measuring with a Ruler

Post by [-hh] » Tue Dec 12, 2017 12:43 am

Interesting problem.

We need more information.

1. Which OS? Which LC version?
2. What means "on the screen": A deliberate desktop image or the stack window?
3. What is the "unit" of the ruler?

From a math point of view, it would be more interesting to explain the concept of a vector (angle and length).
That is, not measuring the distance between two points but starting from one setting the second point.

p.s.
Did any of teachers who made these general requirements ever write a small piece of working code?
shiftLock happens

gshearne
Posts: 36
Joined: Mon Jun 02, 2014 4:41 am

Re: Children's Education App for Measuring with a Ruler

Post by gshearne » Tue Dec 12, 2017 9:23 am

I am using 8.1.6 on Windows and the target is an Android tablet. I am currently working with a desktop image and have experimented a bit with SVGs as suggested. At this point I am not worried about the unit of the 'ruler' but ultimately I will be working in centimeters on a 10" tablet on a 1280x720 screen.

I actually have a whole series of exercises which will use a 'ruler'. The first set of exercises are for First Graders. The first exercise has a several random dots placed on the screen. Three of the dots are in a straight line. The object of the exercise is to line the ruler up so it intersects all three dots. Later exercise involve 'drawing' a line using the 'ruler' and measuring lengths.

The teachers I am working with have no coding experience and very little experience with technology.

Right now I am experimenting with capturing the finger motion of moving an object 'on top' the ruler to a triangular point above the ruler, then changing the rotation of my 'ruler' image. This works after a fashion but the 'ruler' does not move along with the finger motion because I cannot make an action till I receive the mouseUp signal. I would prefer the 'ruler' had touch points on either end and in the center. The center point would be used to move the 'ruler' vertically or horizontally and the end points would change the rotation.

Thanks !!
Greg

bogs
Posts: 5435
Joined: Sat Feb 25, 2017 10:45 pm

Re: Children's Education App for Measuring with a Ruler

Post by bogs » Tue Dec 12, 2017 3:07 pm

I would suspect that for what your talking about, richmond62 is absolutely correct about using window shape, rotation and so forth.

I seem to remember years ago a program that allowed doodling directly on screen, but it wasn't written in Lc, and unfortunately I seem to have lost track of it.

Short of either of those two solutions, I was thinking about a ruler on a regular window, but somehow setting the window transparency itself, so that you only saw the border and would only have to rotate the image. However, with either richmonds window shape or that idea, I believe you need a certain level of graphics card ability, and I am not sure android has it.

I know when I first looked at windows shape stuff, I kept seeing the regular window without the transparent areas because my graphics card was using the opensource drivers instead of the proprietary ones in Linux, which I find a lot less troubling. They however were not up to the task of displaying transparency in a window, and I don't know enough about android to say one way or the other.

You could try a simple test window and find out, there are worse ways to spend the morning :)
Image

Newbie4
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 327
Joined: Sun Apr 15, 2012 1:17 am
Location: USA
Contact:

Re: Children's Education App for Measuring with a Ruler

Post by Newbie4 » Tue Dec 12, 2017 6:17 pm

One of these may be a good starting point. Add a ruler object and the logic to control it
https://sites.google.com/a/pgcps.org/li ... wingsimple
Or
https://sites.google.com/a/pgcps.org/li ... g-programs

Will this work for you? Is this what you had in mind?
Cyril Pruszko
https://sites.google.com/a/pgcps.org/livecode/
https://sites.google.com/a/setonhs.org/app-and-game-workshop/home
https://learntolivecode.com/

[-hh]
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 2262
Joined: Thu Feb 28, 2013 11:52 pm
Location: Göttingen, DE

Re: Children's Education App for Measuring with a Ruler

Post by [-hh] » Tue Dec 12, 2017 11:10 pm

Greg,

this is interesting and I tried to create a stack that is *as simple as possible* to have the tasks you described. Here is a stack that uses only graphics (polygons and ovals) and will run down to LC 5.5 (save as stackfileversion 5.5 for that). Nothing else needed.

This "ruler" covers, TMHO, the most important things according to the tasks you described.

• You can select a grid-unit (say 40px). Then a grid with that unit is generated and all points and ruler movements snap to that grid. By that your points have integer values *in that units*.
For example a point (3,4) means:
Go three squares to the right and 4 squares down starting from (0,0) at topleft (you have to decide whether you use the flipped coordinates of devices.)

• All points show on mouseEnter their coordinates in current gridUnits.

• You can drag the ruler at both sides and it snaps to that grid, showing you the length/distance between the red handles while dragging and eventually on mouseUp. (Uses one decimal place for the length to always memorize, that lengths are usually not integer valued. The kids should only know that 5.x is 'more than 5 and less than 6).

• You can add and delete (blue) points by rightClicking.

All important scripts are in the card's script.

HTH, Hermann

Attachments removed. See enhanced stack below.
Last edited by [-hh] on Wed Dec 13, 2017 6:36 pm, edited 1 time in total.
shiftLock happens

richmond62
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 9250
Joined: Fri Feb 19, 2010 10:17 am
Location: Bulgaria

Re: Children's Education App for Measuring with a Ruler

Post by richmond62 » Wed Dec 13, 2017 10:06 am

Hermann, your stack is very clever.

The only problem, as far as I read the original post, is that instead of a solid line the
specifications call for a ruler with measurable units along it.

gshearne
Posts: 36
Joined: Mon Jun 02, 2014 4:41 am

Re: Children's Education App for Measuring with a Ruler

Post by gshearne » Wed Dec 13, 2017 1:43 pm

Hermann,
Your stack is great! I need to experiment now putting it into our lesson framework. I may also try adding a center control which allows vertical ad horizontal motion.

This really helps a lot.
Thank you.
Regards,
Greg

[-hh]
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 2262
Joined: Thu Feb 28, 2013 11:52 pm
Location: Göttingen, DE

Re: Children's Education App for Measuring with a Ruler

Post by [-hh] » Wed Dec 13, 2017 6:35 pm

@Richmond.
It is not hard to add ticks on the line (see attachment). My proposal is to leave them out: How do you tell a child who can count integers only to set a length of sqrt(2)? Setting integers lengths doesn't usually end in a valid point (if not vertical or horizontal), even if you go down to a unit of 1 pixel...

@Greg
All points are draggable (and snap after drag to the grid). So I don't understand what you mean with "vertical/horizontal movements": What should be moved with that central control?

The attached stack removes a small bug with pointsSize and adds optionally ticks to the line in "ruler"-gridUnits.
Attachments
rulerBasic89.livecode.zip
RulerBasic for LC 8/LC 9
(4.28 KiB) Downloaded 386 times
rulerBasic89.png
Shows "ticks" in gridUnits
shiftLock happens

bogs
Posts: 5435
Joined: Sat Feb 25, 2017 10:45 pm

Re: Children's Education App for Measuring with a Ruler

Post by bogs » Wed Dec 13, 2017 9:56 pm

Perhaps this may be of some help to you (generally speaking, not as a complete solution). He shows how to make an animated window shape that has transparent regions, grab handles, etc.

Most of what he talks about is changing the ws to different images, so doing that part sounds like it would work for 'rotating the ruler' as it were. You may even be able to put the 'dots' right on the ruler using a drawing routine.
Image

gshearne
Posts: 36
Joined: Mon Jun 02, 2014 4:41 am

Re: Children's Education App for Measuring with a Ruler

Post by gshearne » Wed Mar 14, 2018 12:39 pm

Thanks everyone for the help on this problem. I have been able to use the grid and line segment to create what I call an 'articulating straight edge". I fix the length of the line segment and can move the entire line segment or move the either side of the segment in an arc with the opposite side staying fixed.

I still have a big problem though. My line segment does not look like a ruler. I cannot make it look like a ruler and duplicate the line segment behavior that I require. And now I have a request to make a carpenters 'level'. The line segment and the math behind it work for the level too but the same problem exists. My object looks like a line segment and not a carpenters level.

I did receive a suggestion that perhaps a widget could be created. I am lost here though. Does anyone know of an example widget that can be moved in all manners around the screen?

Thanks
Greg

Post Reply

Return to “Educational Outreach”