Please help build map control graphic like TickedOff project

[BarrySumpter]

Hi all,
I'd like to work out how to do this in just LiveCode if its possible.

I'm trying to build transparent map controls like the Summer Academy tickedOff project.

The control background color is slightly transparent.
The control forground symbol are opaque.
The control edges are transparent.

You can see my feeble attempts that took hours of trial and error.
I've been using PSP 7 for at least 10 years cause my needs are very seldom.
And PSP is very quick and easy for me to use.

For the really amazing graphical stuff I've been using Xara.
But it takes hours to remember and is completely different from any other graphics app.

Hince the reqest to do this in LC if possible.

Unless there is an existing library of these type of icons I can use.

Any help would be greatly appreciated.


The + and - are from the summer academy
The other two are mine.
They look ok on my HD2s.

[bn]

Hi Barry,

I don't know if there is a library for these symbols.

Here is a stack that does the two symbols you did.

These are made of graphics and you can change some parameters. Then you take a snapshot and you get a PNG that you can scale down. Set the resize quality to best. Scaling down should work quite well.

After digging in the garden until dawn I looked for another pastime...

graphicsForControls.livecode.zip

(121.07 KiB) Downloaded 485 times

Kind regards

Bernd

[BarrySumpter]

OMFG!
Bernd, you absolutely Rock!
I am devistatingly awed at your skill.

Not sure how you even started on this.
So I better have a good look around to see what trouble I can get into.
And see what LC treasures you've maped out for me. Pun intended.

[BarrySumpter]

And snap!
I was working with two graphics.
It didn't come to me to make the background graphic (the grey circle transparent)
then place the top graphic with no transparance on top.

I don't know if I could even do that in my PSP.
I don't know enought about graphics to understand layers etc.
But so nice to see a small example of how somethign like this is done in LC.

I'm wondering how you started with the background circle.
And where you got the symbol for contacts.

Unless you built them from scratch.
Live the Refresh button.

I think I'm catching on.

So the - and the + as well.
I'm getting a pattern here of simple shapes.

[BarrySumpter]

My attempt at more detailed instructions the next time I (ummm I mean anyone) might need it.

[bn]

Hi Barry,

I took your stack and saved in Legacy format so pre 5.5 users can open it.

Furthermore I changed a couple of things that where not quite right in my first version:
removed the round center graphic from the refresh symbol.
Adjusted the groups with the graphics to exact square

Changed the resize quality to good (down from best) it turns out that good is better than best in this case (no flattening of the circle at the top and at the left side)
Furthermore I now set the size of the downsized images to the dimensions of the buttons. To change the downsize image size change the buttons at the lower right of the card. I would keep them square or else you will have a distortion of the circles.

Once you downsize an image and you then code:

Code: Select all

set the imageData of image "myDownSizedImage" to the imageData of image "myDownSizedImage"

you make the new size permanent and there is no need to lock size and position anymore. And you save a little space.

Bildschirmfoto 2012-04-03 um 10.01.25.png (58.69 KiB) Viewed 9987 times

LCBuildGraphicsForTickedPffMapControls_0_0_2.livecode.zip

(133.55 KiB) Downloaded 452 times

Kind regards

Bernd

[BarrySumpter]

Brilliant! Absolutely Brilliant!

Thanks for all the work Bernd.

Every question I had about all the slight variations with the app have been answered.

I recall something about having to lock the size of the resized images.
Else the next time I opened the app the images would return to their original size.
Then the button that uses that image would resize as well.

So nice to have a fresh pair of eyes on a project when I run out of energy.

Thanks again.

[BarrySumpter]

More hints n tips about Image and Graphic Layers:
Layers protocol…
http://forums.runrev.com/viewtopic.php? ... 6&start=30

[BarrySumpter]

Improved image export (4.5)
BMP Export

The export command can now produce Windows BMP format images in the same was at it previously did for gif and png:

export target as bmp

Palette reduction

The export command can now perform color reduction. To support this, the following new forms have been added:

export target as ( gif | png | bmp ) with palette colors

export target as ( gif | png | bmp ) with ( standard | optimized ) palette

export target as ( gif | png | bmp ) with count color optimized palette

The first form allows you to specify a list of up to 256 colors to use in the final palette.

The second form will use either the standard 'websafe' palette, or will compute an optimized palette with at most 256 colors.

The third form allows you to choose the size of the optimized palette to be generated. The number of colors can be at most 256.

If the image has any sort of transparency, then this will utilize one palette entry. (In particular if you ask for a 256 color palette with a transparent image, you may get only 255 colors).

In all cases, optional dithering will be performed as determined by its dontDither property.

Note: It is a (relatively) slow process to compute an optimized palette and then remap an image against it – it should not be considered a real-time operation except for very small images.

Note: There is no support for exporting a JPEG with a reduce palette as this format is for continuous-tone images and as such the notion of palette makes no sense.
Raw data export (experimental)

It is possible to export raw image data using the following forms:

export target as raw with palette colors

export target as raw with ( standard | optimized ) palette

export target as raw with count color optimized palette

export target as raw [ argb | bgra | abgr | rgab ]

The first three of these operate in the same way as for the other formats as described above except that instead of formatted image data you get the raw palette indices packed appropriately depending
on the size of the palette:

<= 2 colors will be 1 bpp

<= 4 colors will be 2 bpp

<= 16 colors will be 4 bpp

<= 256 colors will be 8 bpp

The final form allows export of the full 32-bit data of the image with 8 bits per component. In this case, the components are not pre-multiplied with any alpha channel, and appear ordered in memory
in increasing bytes.
e.g. The argb form will give you:
byte 0 = alpha
byte 1 = red
byte 2 = green
byte 3 = blue

Important: This feature (raw data export) is currently experimental. This means that it may not be complete, or may fail in some circumstances that you would expect it to work. Please do
not be afraid to try it out as we need feedback to develop it further.
Color profile support (4.5)

The engine will now attempt to use any embedded ICC color profile information that is present in JPEGs and PNGs.

If a JPEG contains a color profile then the engine will attempt to use it to translate the image's colors to the default screen color space before display.

When printing JPEGs, the original JPEG data will now be sent to the printer directly whenever possible, In particular, this means that any intermediate color matching for the screen that the engine performs does not affect the printed output.

As an additional side-effect of color profile support, the engine now also supports YCCK and CMYK JPEG images.

Note: Support for color profiles depends on the OS - in particular Windows XP and earlier only support ICC v2 profiles, Vista onwards supports ICC v4.