How to constrain position of dragged graphic to path of a circle?

LiveCode is the premier environment for creating multi-platform solutions for all major operating systems - Windows, Mac OS X, Linux, the Web, Server environments and Mobile platforms. Brand new to LiveCode? Welcome!

Moderators: FourthWorld, heatherlaine, Klaus, kevinmiller, robinmiller

dunbarx
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 9567
Joined: Wed May 06, 2009 2:28 pm
Location: New York, NY

Re: How to constrain position of dragged graphic to path of a circle?

Post by dunbarx » Mon Sep 20, 2021 11:41 pm

Ah. i did not see Stam's post. Sorry.

Craig

stam
Posts: 2599
Joined: Sun Jun 04, 2006 9:39 pm
Location: London, UK

Re: How to constrain position of dragged graphic to path of a circle?

Post by stam » Wed Oct 20, 2021 2:59 am

In way of update and to put the original request in context, i used this to create a reusable radial dial (skRadial imaginatively enough) for my projects - this takes much less space than a slider and allows me to tighten the interface up a bit.

Because i need to edit these inside my projects, i've put the functionality to do so in a small plugin - the big dial in the lower half is the 'prototype' to edit and copy into scripts but will also reflect any selected skRadials from any other stacks chosen for editing.
skRadial plugin.jpg
I've shared this on Sample Stacks/LiveCodeShare : http://livecodeshare.runrev.com/stack/1005/SkRadial

Massive thanks to Roger Guay for his excellent stack RadialDialOmatic, which was a huge inspiration for this and to Elanor for her code (although i went about this a little bit differently in the end)
While Roger's stack covers many, many radial display types, skRadial focuses only on a simple radial dial/slider.

Other than tightening up the UI for my needs, so they can be made really quite small (no point in switching to radial sliders if they are larger than an actual slider!), skRadial differs in the following ways:
1. Resizeable - drag to resize and all elements of the group will resize appropriately. Currently i have not implemented any form of text size scaling but may do in the future.

2. API for managing appearance and setting the value in script are included in it's behaviour script:
- setTheValue pValue : sets the skRadial's value in script and updates its display for loading a value - or drag the knob
- setLineSize pSize - change the thickness of the lines used to display the skRadial
- setForeColor pColor - change the color of the lines
- setBackColor pColor - set the backgroundColor, passing empty makes it transparent.

3. skRadial comes as a plugin that can edit existing skRadials in any stack, or can modify a prototype skRadial inside the plugin and copy that for pasting into any stack.

To edit an existing stack, select an existing skRadial in any stack and click 'Edit skRadial'. If no skRadial is selected, then it will set the existing prototype inside the plugin for editing.

The plugin allows setting of:
- Text of the Title displayed in the middle of the skRadial
- Min and Max values of the radial display
- Line and background color, or clear the background so it’s transparent
- Line size (which itself uses an skRadial)

INSTALLATION - works best as a plugin (just drop into your plugins folder and restart LiveCode)

NOTE: Only tested on Mac - let me know if any issues with other platforms...

Download it from liveCodeShare: http://livecodeshare.runrev.com/stack/1005/SkRadial

Hopefully some may find this useful, feel free to feed back...
Stam

RogGuay
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 114
Joined: Fri Apr 28, 2006 12:10 am
Location: Seattle

Re: How to constrain position of dragged graphic to path of a circle?

Post by RogGuay » Wed Oct 20, 2021 10:57 pm

Very nice, Stam. I'm glad my RadialDialOmatic stack was of some use to you. I used my radial dials exclusively in my simulation app Alien Civilization Detection, which I demonstrated on YouTube here: https://www.youtube.com/watch?v=7QhmJKudxGU

Roger

stam
Posts: 2599
Joined: Sun Jun 04, 2006 9:39 pm
Location: London, UK

Re: How to constrain position of dragged graphic to path of a circle?

Post by stam » Wed Oct 20, 2021 11:56 pm

Fascinating video, thanks Roger!
and thanks for the radialDialOmatic stack :)

Post Reply

Return to “Getting Started with LiveCode - Experienced Developers”