Background Gradient Fill

Got a LiveCode personal license? Are you a beginner, hobbyist or educator that's new to LiveCode? This forum is the place to go for help getting started. Welcome!

Moderators: FourthWorld, heatherlaine, Klaus, kevinmiller

Post Reply
saratogacoach
Posts: 87
Joined: Thu Jul 17, 2008 8:42 pm

Background Gradient Fill

Post by saratogacoach » Sat Jun 20, 2009 4:58 pm

Hi,

I am trying to figure out how to create a background gradient fill that would apply to all cards in a stack:

linear or circular, start color (RGB): 242,126,10 and end color: 255,183,69

A beginner, I am not sure how to set gradient fill for stacks, cards, objects.

Any references, suggestions, basic sample stacks would be appreciated.

Thanks for your help.

Kind Regards,
saratogacoach
LiveCode 4.6.0, Windows 7 Home Premium 64 bit, Core i7 2.80, 8G RAM, ATI Radeon HD5770

Mark
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 5150
Joined: Thu Feb 23, 2006 9:24 pm
Contact:

Post by Mark » Sat Jun 20, 2009 5:34 pm

Hi sara,

Create a new rectangular graphic and add the gradients to it. Group this graphic and place the new background on all cards. If you want, you can set the backgroundBehavior of it to true, to make it appear automatically on new cards.

Best,

Mark
The biggest LiveCode group on Facebook: https://www.facebook.com/groups/livecode.developers
The book "Programming LiveCode for the Real Beginner"! Get it here! http://tinyurl.com/book-livecode

saratogacoach
Posts: 87
Joined: Thu Jul 17, 2008 8:42 pm

Post by saratogacoach » Sat Jun 20, 2009 5:41 pm

Hi Mark,

Thanks for your reply. I'm still at the elementary level, so when you say "add the gradients to it" I'm afraid I don't yet know how to do that in script. :?

Is there any sample showing a basic circular or linear gradient using a start and end RGB color?

Kind Regards,
saratogacoach
LiveCode 4.6.0, Windows 7 Home Premium 64 bit, Core i7 2.80, 8G RAM, ATI Radeon HD5770

Mark
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 5150
Joined: Thu Feb 23, 2006 9:24 pm
Contact:

Post by Mark » Sat Jun 20, 2009 5:47 pm

Hi sara,

You don't do that by script, you use the property inspector. Just figure it out.

Btw if you have a resizable window, you should write a brief script that sets the rect of the graphic to the card rect in the resizeStack handler.

Best,

Mark
The biggest LiveCode group on Facebook: https://www.facebook.com/groups/livecode.developers
The book "Programming LiveCode for the Real Beginner"! Get it here! http://tinyurl.com/book-livecode

saratogacoach
Posts: 87
Joined: Thu Jul 17, 2008 8:42 pm

Post by saratogacoach » Sat Jun 20, 2009 6:10 pm

Hi Mark,

OK. I appreciate your encouragement. Once I inserted a rectangle graphic instead of the wrong object (it had an image name instead: at the bottom left of the palette), I was able to locate the gradient in the rectangle's property inspector and create the correct settings. Set it to the bottom layer, which for now, seems to create it as background.

I'm experimenting with setting the stack's background property to true for the rectangle, so I can more easily get it to appear as the background. I tried this script in the stack, but so far didn't succeed:

Code: Select all

on preOpen
   set backgroundBehavior of graphic "Rectangle1" to true
end preOpen
I'll keep experimenting.

Again, thanks.

Kind Regards,
saratogacoach
LiveCode 4.6.0, Windows 7 Home Premium 64 bit, Core i7 2.80, 8G RAM, ATI Radeon HD5770

Klaus
Posts: 14194
Joined: Sat Apr 08, 2006 8:41 am
Contact:

Post by Klaus » Sun Jun 21, 2009 1:18 pm

Hi Coach,

it is always a GOOD idea to check the terms in the docs!

This way you would have found out that "backgroundbehavior" is a property of a GROUP and not of a graphic.


Best

Klaus

saratogacoach
Posts: 87
Joined: Thu Jul 17, 2008 8:42 pm

Post by saratogacoach » Sun Jun 21, 2009 3:18 pm

Hi Klaus,

Thanks for your suggestion. Checking the docs is becoming a valuable routine for me and reading them carefully.

(Part of my difficulty finding the gradient in the object's property inspector was that I had accidentally added the wrong object. Once I added a rectangle, the gradient was easy enough to find and set.) :oops:

Kind Regards,
saratogacoach
LiveCode 4.6.0, Windows 7 Home Premium 64 bit, Core i7 2.80, 8G RAM, ATI Radeon HD5770

marksmithhfx
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 931
Joined: Thu Nov 13, 2008 6:48 am

Re:

Post by marksmithhfx » Sun Oct 25, 2020 5:46 pm

Mark wrote:
Sat Jun 20, 2009 5:47 pm
Btw if you have a resizable window, you should write a brief script that sets the rect of the graphic to the card rect in the resizeStack handler.
So I thought I would give this a go. But the following does not cause the graphic to resize. What am I doing wrong?

on resizeStack
set the rect of graphic "Rectangle" to the formattedRect of card "test"
end resizeStack

Thanks
Mark
macOS 12.6.5 (Monterey), Xcode 14.2, LC 10.0.0, iOS 15.6.1
Targets: Mac, iOS

FourthWorld
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 10049
Joined: Sat Apr 08, 2006 7:05 am
Contact:

Re: Background Gradient Fill

Post by FourthWorld » Sun Oct 25, 2020 6:05 pm

The rect is the full bounds of the card. The formattedRect is the bounds of controls on the card.
Richard Gaskin
LiveCode development, training, and consulting services: Fourth World Systems
LiveCode Group on Facebook
LiveCode Group on LinkedIn

marksmithhfx
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 931
Joined: Thu Nov 13, 2008 6:48 am

Re: Background Gradient Fill

Post by marksmithhfx » Mon Oct 26, 2020 12:00 pm

FourthWorld wrote:
Sun Oct 25, 2020 6:05 pm
The rect is the full bounds of the card. The formattedRect is the bounds of controls on the card.
Ah, thanks. That did it. Also, I did not have the script in the right place (could have checked the Dictionary for that). I put it in the graphic and not the card. (There is an object model in my head that does not fit exactly with the way LC works. For example, I tend to think in this situation the graphic needs resizing, not the card, so the message to resize should go to the graphic.) In fact, looking back at this thread, I had a horrible time setting the gradient on this graphic. Every time I added a gradient, the color (background color) disappeared, and every time I added a background color the gradient disappeared. I am seriously in need of finding a tutorial that explains graphic fundamentals in LC (LoL, suggestions always welcome but I am sure a google search will find one quickly enough).

Cheers and thanks,
Mark
macOS 12.6.5 (Monterey), Xcode 14.2, LC 10.0.0, iOS 15.6.1
Targets: Mac, iOS

Post Reply