image rotation

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

Post Reply
yeldarb
Posts: 43
Joined: Thu Dec 14, 2017 5:39 pm

image rotation

Post by yeldarb » Sat Jan 06, 2018 8:05 pm

Hi, I'm making a clock app, and of course I need to rotate the hands of the clock (it's a retro clock app). So the hands have to rotate around a point that is not their exact center.

I've been able to create a png that is almost twice the length of the actual hand, so that the rotation point is at the base of the hand.

However, other tools I've worked with (e.g. Flash) allowed me to set the registration point of the image, which it would then rotate around. Does LC have any similar capability? It would make the project easier.

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

Re: image rotation

Post by richmond62 » Sat Jan 06, 2018 9:38 pm

You can make a clock out of a series of layered SVG widgets.

This stack of mine will import monochrome SVG images from Inkscape into the LiveCode SVG widget:
SVG Importer.livecode.zip
(72.66 KiB) Downloaded 232 times

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

Re: image rotation

Post by dunbarx » Sat Jan 06, 2018 9:42 pm

Hi.

Two things.

1- Widgets.

2- In LC "proper", you might create a line graphic, and remember line 1 of the points. That will be your rotation center. Then you can set the endPoint (line 2 of the points) to a series of either predetermined or calcualted points, all lying on the circumference of a circle of whatever readius you like.

Craig Newman

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

Re: image rotation

Post by richmond62 » Sat Jan 06, 2018 10:04 pm

Yo.png
VREME.livecode.zip
(4.2 KiB) Downloaded 240 times
Something to play with 8)

yeldarb
Posts: 43
Joined: Thu Dec 14, 2017 5:39 pm

Re: image rotation

Post by yeldarb » Sat Jan 06, 2018 10:13 pm

Hmm... thanks, I like the idea of using an SVG for scalability, but I don't see a way to have a drop shadow with it, is that possible?

yeldarb
Posts: 43
Joined: Thu Dec 14, 2017 5:39 pm

Re: image rotation

Post by yeldarb » Sat Jan 06, 2018 10:30 pm

So I was able to save an SVG from Affinity Designer, open the doc in TextEdit, and . paste the raw SVG path into the "iconPath" field in LC, et voila, instant SVG. I then put it in a group, and added the dropshadow to the group, and now I have an SVG clock hand with a drop shadow!

BUT... (and as Peewee Herman says, "Everybody's got a big 'BUT'"), when I rotate the SVG, it scales to fit in the bounding box--which is looks very strange (and obviously isn't the look I was going for ;-)

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

Re: image rotation

Post by richmond62 » Sun Jan 07, 2018 12:05 am

There is a way to stop that bounding box scaling, but I cannot remember what it is:

Klaus ?

Jacque ?

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

Re: image rotation

Post by richmond62 » Sun Jan 07, 2018 12:06 pm

Probably the best way to circumvent this problem (no pun intended) is to "embed" your
clock hands inside a thin circle.

As making these artefacts is a "right fiddle" I've made some for you :D
VREME.png
VREME2.livecode.zip
(125.47 KiB) Downloaded 253 times
NOT perfect, but a lot better than a poke in the face with a large stick!

yeldarb
Posts: 43
Joined: Thu Dec 14, 2017 5:39 pm

Re: image rotation

Post by yeldarb » Sun Jan 07, 2018 3:43 pm

richmond62 wrote:
Sun Jan 07, 2018 12:06 pm
Probably the best way to circumvent this problem (no pun intended) is to "embed" your
clock hands inside a thin circle.
Ha! I was thinking along the same lines, wondering if it would be possible to define a path that describes an object 0 px wide, or something like that, so as to offset the hand itself.

Thanks, I'll continue to mess with it!

capellan
Posts: 654
Joined: Wed Aug 15, 2007 11:09 pm

Re: image rotation

Post by capellan » Thu Jan 11, 2018 12:45 am

yeldarb wrote:
Sat Jan 06, 2018 8:05 pm
Hi, I'm making a clock app, and of course I need to rotate the hands of the clock (it's a retro clock app). So the hands have to rotate around a point that is not their exact center.
Hi yeldarb,

Download the svg clock stack attached to this forum thread:
http://forums.livecode.com/viewtopic.php?f=10&t=29999

Before opening the stack, compile and install Peter Thirkell's widget: Multicolor SVG
http://forums.livecode.com/viewtopic.ph ... 30#p154437

Write again if you have any problem opening this stack or compiling the Multicolor widget.

Al

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

Re: image rotation

Post by bogs » Thu Jan 11, 2018 11:18 am

yeldarb wrote:
Sun Jan 07, 2018 3:43 pm
Ha! I was thinking along the same lines, wondering if it would be possible to define a path that describes an object 0 px wide, or something like that, so as to offset the hand itself.

Thanks, I'll continue to mess with it!
Actually that is quite possible, it is just slightly more complicated than just doubling the size of the hand image and rotating it on center.

The reason doubling is easier in all ways is that if your going for an analog clock face (circle, square, whatever), you already take up the space you need for doubling the hand size.

Image
Image

yeldarb
Posts: 43
Joined: Thu Dec 14, 2017 5:39 pm

Re: image rotation

Post by yeldarb » Mon Feb 12, 2018 10:00 pm

"Write again if you have any problem opening this stack or compiling the Multicolor widget."

Al, thanks so much for that! I've never messed with LCB, I was able to get the widget installed. I'm not sure where the API dictionary gets installed.

The SVG rotates without scaling, which is exactly what I need! However, I have a fairly complex vector and cutting and pasting the SVG data (from Affinity Designer) doesn't work for that. Not sure why, it works for a simpler vector.

yeldarb
Posts: 43
Joined: Thu Dec 14, 2017 5:39 pm

Re: image rotation

Post by yeldarb » Wed Feb 21, 2018 2:41 pm

Thanks for your help. I've attached a screen shot of the first card of my app. As you can see, I've got four hands: seconds, minutes, hours, and days. The moon phase is also active, but it's a png. The other hands are all SVGs using the SVG Color widget.

Here's how I created them:

1. I created the vector artwork in Affinity Designer.
2. In AD I added a circle the radius of the bounding (square) artboard, selected on export but with no fill or stroke, so not visible (exports as "<circle cx="300" cy="300" r="300" style="fill:none;"/>"). This enables the SVG to rotate perfectly in the LC bounding box (otherwise the "maintainAspectRatio" would force it to expand to the bounding box"). I also had to reverse the curve on one of the open areas; otherwise LC didn't render it as an opening in the graphic.
3. I exported from AD as an SVG with the "Flatten Transforms" option on.
4. I opened the SVG in TextEdit.
5. I copied the path data and used an online regex editor to remove the fractional pixel values. (https://regexr.com/ /\.\d*/g) This reduced the path text by half, with no detectable loss in detail. Not required, but made working with the paths a bit easier.
6. I had to add fill info to the path I created since Designer didn't do it for some reason: style="fill:rgb(0,0,0)". Here's an example of the entire iconPathsTagData:

Code: Select all

<circle cx="300" cy="300" r="300" style="fill:none;"/>
<path d="M299,554C278,528 280,491 292,462C292,462 292,399 292,323C273,315 273,287 292,279C292,212 292,145 292,78C292,53 292,44 295,19C295,15 297,5 300,1L300,1C302,5 304,15 304,19C307,44 307,53 307,78C307,145 307,212 307,279C326,287 326,315 307,323C307,399 307,462 307,462C319,491 321,528 300,554L299,554" style="fill:rgb(0,0,0)"/>
The hands now rotate perfectly, and scale to whatever size. Thanks for your help!
Attachments
Screen Shot 2018-02-21 at 8.21.06 AM.jpg

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

Re: image rotation

Post by bogs » Wed Feb 21, 2018 3:11 pm

Looks very nice, great job.
Image

Post Reply

Return to “Getting Started with LiveCode - Experienced Developers”