Edit or create color pattern

Ron Zellner · Post by **Ron Zellner** » Fri Aug 28, 2009 3:31 pm

Is there an easy way to edit the pattern icons? For example, I have a rectangular graphic and I want to select the diagonal line pattern (186) for Fill but I want the lines to be red, not black.

malte · Post by **malte** » Fri Aug 28, 2009 3:41 pm

Hey Ron,

if you are using Rev 3 or higher, you could look at gradients. They are a tad bit difficult to handle, but one can do impressive patterns with them.

All the best,

Malte

BvG · Post by **BvG** » Fri Aug 28, 2009 4:47 pm

theoretically you can set the imagesource of an image to the pattern (watch out tho, it needs to be the same size as the original), then edit it with the paint tools. But that's not exactly easy

there's supposedly to be new overlay stuff in rev 4, using that you could make a colour overlay, and using the right mask, it would change the black lines to red (for example). I do use that often myself in photoshop to make the same icon with various colours.

Ron Zellner · Post by **Ron Zellner** » Fri Aug 28, 2009 4:59 pm

My problem is that I am changing the size and location of the graphic based on data (creating a type of chart) so I can't use any direct editing.

bn · Post by bn » Fri Aug 28, 2009 6:00 pm

Ron,

create graphic (any type, any shape, any size)
make a button:

Code: Select all

on mouseUp
   set the opaque of grc 1 to true
   put the loc of graphic 1  into tLocFrom
   put tLocFrom into tLocVia
   add 20 to item 1 of tLocVia
   add 20 to item 2 of tLocVia
   put tLocFrom into tLocTo
   subtract 30 from item 1 of tLocTo -- change for number of stripes e.g 10 many small, 50 fewer 
   
   set the fillgradient["from"] of graphic 1 to tLocFrom
   set the fillgradient["via"] of graphic 1 to tLocVia
   set the fillgradient["to"] of graphic 1 to tLocTo
   
   put "0.25,255,255,255" & cr & "0.5,255,0,0" & cr & "0.75,255,255,255" into tmyRamp
   set the fillgradient["Ramp"] of graphic 1 to tmyRamp  
   
   set the fillgradient["Wrap"] of graphic 1 to "true" 
   set the fillgradient["mirror"] of graphic 1 to "false" 
   set the fillgradient["Repeat"] of graphic 1 to "3"
   set the fillgradient["type"] of graphic 1 to "linear"     
end mouseUp

of course you can edit the gradient in the properties inspector manually. With this button you always revert to a baseline. As Malte puts it masterly

They are a tad bit difficult to handle, but one can do impressive patterns with them

if you want the stripes the other way around just replace the pertinenet lines in above script with

Code: Select all

put tLocFrom into tLocVia
   add 20 to item 1 of tLocVia
   subtract 20 from item 2 of tLocVia
   put tLocFrom into tLocTo
   add 22 to item 1 of tLocTo -- change for number of stripes e.g 10 many small, 50 fewer

to change the location of the "handles" of the graphic

regards
Bernd[/quote]

SparkOut · Post by **SparkOut** » Fri Aug 28, 2009 6:46 pm

If you make an 8 x 8 pixel file (at 96 ppi) in a picture editor, then you can produce your own tiled background images.
Just import the newly made image as a control, hide it and use that as the backgroundPattern (in the image chooser, select from image library: This Stack).
In this case the tiling is done by having the pixels as (where 0 = white and X = red)

Code: Select all

I've put a copy here

for you to use - you should be able to see it's easy enough to make your own, even if not so easy to edit the built-in ones.

Ron Zellner · Post by **Ron Zellner** » Fri Aug 28, 2009 11:54 pm

Yes, setting the gradient properties does the trick! I hadn't used that before. When I played with it I saw how to edit with the gradient edit controls & options to manually create the displays I want and then adjust your code to match.
Didn't have much luck with your file, SparkOut- got very big, pixelated stripes- must be a problem with the resolution of the graphic when it gets imported into my stack- it is very large.

Thanks again.

SparkOut · Post by **SparkOut** » Sat Aug 29, 2009 12:12 am

When you import it it will be set to the standard size of an empty image object I think - if you select it and go to the size options in the property inspector and click fit content for both size and width so it's 8 x 8 pixels then it should be just what you had for the diagonally striped tile, only red lines. Gradients are very snazzy though!

bn · Post by bn » Sat Aug 29, 2009 11:45 am

Sparkout,
at 8 by 8 Pixels your image works very well as a bg pattern, even at 72 dpi screen resolution (Mac), thanks. For many things it is the way to go.

Gradients offer more in terms of color change, and so on, and if you need that amount of control (animation comes to mind) or 3-D effects they are very handy.
I have posted 2 stacks on the new RevOnline (=>3.5) make color balls and beachball that show some gradient stuff. Not as brilliant as what Scott Rossi does though, more like examples.

To read out the current properties of a fillgradient just issue a

Code: Select all

on mouseUp
    put the fillgradient of graphic 1 into tfillProp
    combine tfillProp using return and colon
    put tfillProp
end mouseUp

so in combination with the code to set the gradients and you then tweak them manually you can get the properties and incorporate them into a script.
regards
Bernd

SparkOut · Post by **SparkOut** » Sat Aug 29, 2009 5:31 pm

Well the dpi is probably irrelevant - it just happened that's the setting that was carried over when I pasted the source image. If it's 8 x 8 (or the same size as the original sample image) it should tile just the same. (Repeating the steps below to double check, the graphic I got was 72 dpi too.)

To use the original RunRev icons as the starting point, you can turn on the option to show Rev UI Elements In Lists in the IDE View menu.

In the appliction browser, find the stack "revIcons" and find the icon you need in one of the substacks. In this case the pattern id 186 is on the substack "revCompatibilityPatterns1", card id 1246, holding the image "pat49" which has id 186.

Select the image you want, choose copy and then just paste it into an image editor. You can then change the colours and/or pattern using the original as your starting point. Save the image from the editor and import it to your project, resize it to fit content (as noted above - it will probably import at the wrong basic dimensions) and then use it as a backgroundPattern as you will.

On the other hand, gradients are (as I mentioned) very snazzy and worth investigating. (I haven't got very far myself so far, but I've played and got some nice "trial and error" results.) Can you say what tags there are on the samples you have in the RevOnline store please? That way I can find them a bit easier than spending 200 years scrolling through all the pages in RevOnline (since you can't filter by author...) Thanks!

bn · Post by bn » Sat Aug 29, 2009 6:11 pm

Sparkout,

search for Bernd
it is the "Beachballs" and the "make a color ball" stack.
Or just search for the stack names.

regards
Bernd

bn · Post by bn » Sat Aug 29, 2009 6:31 pm

Scott Rossi posted to the List a link to a stack he made which is called gradient explorer. That stack illustrates very well the parameters of a gradient. Scott does amazing things with gradients and all the other graphical features of Rev.

His announcement:
http://www.nabble.com/-ANN--Gradient-Ex ... 80719.html

the link to the stack:
http://www.tactilemedia.com/site_files/ ... er.rev.zip

My feeling is that gradients are underestimated, and a bit underdocumented. And they are complex, but if you get the idea of what parameters do what you can do a lot. For example Jim Hurley a while ago did a Kaleidoscope stack. He wanted the Kaleidoscope rainbow-colored. He did a graphic version with I think 20 graphics. We then set the strokegradient of these 20 graphics as if it were one. And there you had the rainbow colored Kaleidoscope. That would not have been possible without gradients.
put:
go url "http://www.jamesphurley.com/KaleidoscopicRainbow.rev"
into the message box and go to the draw version, card 2, to see the effect

edit:
go url "http://www.jamesphurley.com/KaleidoscopeDeluxe.rev"
this version is a bit more polished

regards
Bernd

SparkOut · Post by **SparkOut** » Sat Aug 29, 2009 8:58 pm

Oh Wow!
Thanks.
1) For pointing out that there is a search box option - so you CAN filter by author name! (Duh me!)
2) These are great stacks to help get to the bottom of settings to be made, with trial and error boosted dramatically.

bn · Post by bn » Mon Aug 31, 2009 8:59 pm

SparkOut,

if you are still interested in gradients you might want to have a look at a stack I posted to the new (>=3.5) Rev Online: EasterEgg. I think EasterEggs in their digital form are not restricted to a season....
And no, it is not one of the hidden features in an application. It is all there right before your eyes, the rest is in the scripts.

regards
Bernd

LiveCode Forums

Edit or create color pattern

Edit or create color pattern

Need to change the graphic

OK, that opens up possibilities