Re: [MSEide-MSEgui-talk] Rounded slider button

[Martin Schreiber]

On Friday 07 April 2017 23:02:17 Krzysztof wrote:
> I'm polishing slider button. Made new shape bitmaps with gimp. This time
> gimp created different pixels on each side, some of them have transparency
> (base color was black for circle shape, it is a result of smooth /
> antyalias option). TImagelist size is 7x7 because this is size of top-left,
> bottom-left, bottom-right and top-right corners. For rest edges it is
> enough to have 1px width/height because I can use "stretch" option while
> adding png files into timagelist. Unfortunately these 1 pixel bitmaps have
> transparency. When adding them as stretched, they becomes some kind of
> gradient. Don't know if this is just normal stretch policy (algorithm) or I
> need to check something when exporting to PNG in gimp. Currently my options
> are as on second screenshot. Translation from Polish is "save background
> color" and "save color's values for transparent pixels", compression is set
> to 0. In first screenshot, indexes 1 and 3 are added with stretch mode,
> they sizes are 7x1 and 1x7, just simply one black pixel with transparency
> arround 60%. I can solve this by making these 1x7px bitmaps as 7x7 by
> simply copy and paste in gimp and add without stretch check. That is not a
> problem because size of my slider buttons is fixed. But just wondering if
> it's possible to add such bitmaps as "repeated", not "stretched".
>
Currently there is no such option, I suggest that you extend the MSEgui 
frame-imagelist design tool from Alexandre ("minoshi").

> BTW: How to make transparent colorty at runtime? For example, I would like
> to make shape in gimp with base color stricte black (it may have black
> transparency pixels due to smoothing / antyaliasing). Add it to image list
> as base shape and then manipulate at runtime, for example set color to
> green (or still black) with alpha 50%:
> timagelist.bitmap.init(rgbtocolor(0,127,0,50)). Can't find any rgbtocolor
> related function with alpha param

TMaskBitmap has a separate bitmap for the mask, see TMaskedBitmap.Mask. It can 
be monochrome, gray-scale or RGB with separate opacity values per channel.
There is also TMaskedBitmap.Opacity, a color value which will be combined with 
the mask bitmap if there is one or will be used in order to define the 
opacity of the image bitmap. TColor has no alpha-channel.

Martin


--
Check out the vibrant tech community on one of the world's most
engaging tech sites, Slashdot.org! http://sdm.link/slashdot
___
mseide-msegui-talk mailing list
mseide-msegui-talk@lists.sourceforge.net
https://lists.sourceforge.net/lists/listinfo/mseide-msegui-talk

Re: [MSEide-MSEgui-talk] Rounded slider button

[Krzysztof]

I'm polishing slider button. Made new shape bitmaps with gimp. This time
gimp created different pixels on each side, some of them have transparency
(base color was black for circle shape, it is a result of smooth /
antyalias option). TImagelist size is 7x7 because this is size of top-left,
bottom-left, bottom-right and top-right corners. For rest edges it is
enough to have 1px width/height because I can use "stretch" option while
adding png files into timagelist. Unfortunately these 1 pixel bitmaps have
transparency. When adding them as stretched, they becomes some kind of
gradient. Don't know if this is just normal stretch policy (algorithm) or I
need to check something when exporting to PNG in gimp. Currently my options
are as on second screenshot. Translation from Polish is "save background
color" and "save color's values for transparent pixels", compression is set
to 0. In first screenshot, indexes 1 and 3 are added with stretch mode,
they sizes are 7x1 and 1x7, just simply one black pixel with transparency
arround 60%. I can solve this by making these 1x7px bitmaps as 7x7 by
simply copy and paste in gimp and add without stretch check. That is not a
problem because size of my slider buttons is fixed. But just wondering if
it's possible to add such bitmaps as "repeated", not "stretched". If not
then it could be cool feature, for example make small pattern in gimp which
is repeated and looks uniformly, like grip in splitters.

BTW: How to make transparent colorty at runtime? For example, I would like
to make shape in gimp with base color stricte black (it may have black
transparency pixels due to smoothing / antyaliasing). Add it to image list
as base shape and then manipulate at runtime, for example set color to
green (or still black) with alpha 50%:
timagelist.bitmap.init(rgbtocolor(0,127,0,50)). Can't find any rgbtocolor
related function with alpha param
--
Check out the vibrant tech community on one of the world's most
engaging tech sites, Slashdot.org! http://sdm.link/slashdot___
mseide-msegui-talk mailing list
mseide-msegui-talk@lists.sourceforge.net
https://lists.sourceforge.net/lists/listinfo/mseide-msegui-talk

Re: [MSEide-MSEgui-talk] Rounded slider button

[Krzysztof]

2017-04-04 8:01 GMT+02:00 Martin Schreiber :

> Set scrollbar.face1.framei_right and scrollbar.face2.framei_left to -8, see
> attachment.
>

Excellent! Attached final result. Cool. I have to fix shape in gimp because
this was on quick but even now it looks very fancy. Thanks a lot!
--
Check out the vibrant tech community on one of the world's most
engaging tech sites, Slashdot.org! http://sdm.link/slashdot___
mseide-msegui-talk mailing list
mseide-msegui-talk@lists.sourceforge.net
https://lists.sourceforge.net/lists/listinfo/mseide-msegui-talk

Re: [MSEide-MSEgui-talk] Rounded slider button

[Martin Schreiber]

On Tuesday 04 April 2017 01:05:40 Krzysztof wrote:
> Perfect! See attached result :) . Corner masks are amazing. But there is
> one cosmetic thing. See screen2.png and screen3.png. "Inner" fade color is
> nicely blended with frame shape transparency pixels but it is not possible
> with face1 and face2 because they are outside of the button. Is there any
> easy trick for this?. Attached demo

Set scrollbar.face1.framei_right and scrollbar.face2.framei_left to -8, see 
attachment.

Martin 
--
Check out the vibrant tech community on one of the world's most
engaging tech sites, Slashdot.org! http://sdm.link/slashdot___
mseide-msegui-talk mailing list
mseide-msegui-talk@lists.sourceforge.net
https://lists.sourceforge.net/lists/listinfo/mseide-msegui-talk

Re: [MSEide-MSEgui-talk] Rounded slider button

[Krzysztof]

Perfect! See attached result :) . Corner masks are amazing. But there is
one cosmetic thing. See screen2.png and screen3.png. "Inner" fade color is
nicely blended with frame shape transparency pixels but it is not possible
with face1 and face2 because they are outside of the button. Is there any
easy trick for this?. Attached demo


slider.7z
Description: application/7z-compressed
--
Check out the vibrant tech community on one of the world's most
engaging tech sites, Slashdot.org! http://sdm.link/slashdot___
mseide-msegui-talk mailing list
mseide-msegui-talk@lists.sourceforge.net
https://lists.sourceforge.net/lists/listinfo/mseide-msegui-talk

Re: [MSEide-MSEgui-talk] Rounded slider button

[Martin Schreiber]

On Monday 03 April 2017 00:19:47 Krzysztof wrote:
> So it is ok or not? Because I'm confused, I thought that I have to set
> timagelist3 in faceSlider.template.frameimage_list, not in
> frameSlider.template.frameimage_list.

The mouse and client area clipping mask is defined by frameimage_list, it can 
be an empty imagelist with only width, height and cornermask set.
git master a0889c966fc5a792d180ca6dc3468af99931e35c also clips fade and image 
of TFace by TFace.Framei_ImageList.CornerMask.

> I'm not sure how to make it working 
> now, I don't even see green fade color :)

Please try again with git master a0889c966fc5a792d180ca6dc3468af99931e35c, I 
accidentally changed drawing order of scrollbar.color and button background, 
sorry.

Martin




--
Check out the vibrant tech community on one of the world's most
engaging tech sites, Slashdot.org! http://sdm.link/slashdot
___
mseide-msegui-talk mailing list
mseide-msegui-talk@lists.sourceforge.net
https://lists.sourceforge.net/lists/listinfo/mseide-msegui-talk

Re: [MSEide-MSEgui-talk] Rounded slider button

[Krzysztof]

I mean, it looks different than I did with scrollbar
--
Check out the vibrant tech community on one of the world's most
engaging tech sites, Slashdot.org! http://sdm.link/slashdot___
mseide-msegui-talk mailing list
mseide-msegui-talk@lists.sourceforge.net
https://lists.sourceforge.net/lists/listinfo/mseide-msegui-talk

Re: [MSEide-MSEgui-talk] Rounded slider button

[Krzysztof]

So it is ok or not? Because I'm confused, I thought that I have to set
timagelist3 in faceSlider.template.frameimage_list, not in
frameSlider.template.frameimage_list. I'm not sure how to make it working
now, I don't even see green fade color :)
--
Check out the vibrant tech community on one of the world's most
engaging tech sites, Slashdot.org! http://sdm.link/slashdot___
mseide-msegui-talk mailing list
mseide-msegui-talk@lists.sourceforge.net
https://lists.sourceforge.net/lists/listinfo/mseide-msegui-talk

Re: [MSEide-MSEgui-talk] Rounded slider button

[Krzysztof]

Sorry for delay. Trying test it today but something is wrong. As always
called pull on git, removed all *.ppu and *.o files, rebuild mymseide.
Opened my test project, added some random corner masks to see how it is
working. Didn't see any change at runtime, compiled project, run and at
runtime everything disappear. At design time everything is fine. Removed
corner masks but still same. Can't tell if it happened after touch corner
mask property or what was a reason. Tried also remove timagelist and readd
bitmaps but still same. See attached. Also attached my demo. It is weird
because also fade color disappear too (fso_flat effect is visible at design
and runtime). Attached also demo


buttonskin.7z
Description: application/7z-compressed
--
Check out the vibrant tech community on one of the world's most
engaging tech sites, Slashdot.org! http://sdm.link/slashdot___
mseide-msegui-talk mailing list
mseide-msegui-talk@lists.sourceforge.net
https://lists.sourceforge.net/lists/listinfo/mseide-msegui-talk

Re: [MSEide-MSEgui-talk] Rounded slider button

[Martin Schreiber]

On Thursday 30 March 2017 14:49:24 Krzysztof wrote:
> Hi Martin,
>
> I know that you are busy lately. I'll just leave here this topic. Answer
> whenever have a time :)
>
> After successfully scrollbar skin I would like to try make rounded slider
> button like on this picture:
> http://cdn.osxdaily.com/wp-content/uploads/2011/08/visible-scroll-bar-mac-o
>sx.jpg
>
> I followed same rules as in scrollbar skinning. Made 8 small pictures for
> each edge and corner in frameface. Set properly button size to make it
> perfect round without stretch. But now I have problem with background.
> Framei offset will not help here because it is rounded too much. Can I
> apply some rounded mask here, for example black filled circle smaller than
> frame circle?

git master 094cfa26fd8b1f3653107e38d516040b21232dfe clips button background 
and face by frame and frame.frameimage_list.cornermask. Cornermask can be 
used to build a round mask, please see the thread about cornermask.
Instead to use the 8 frame images it is also possible to use 
tscrollbar.facebutton.image in order to draw the circle.

Martin

--
Check out the vibrant tech community on one of the world's most
engaging tech sites, Slashdot.org! http://sdm.link/slashdot
___
mseide-msegui-talk mailing list
mseide-msegui-talk@lists.sourceforge.net
https://lists.sourceforge.net/lists/listinfo/mseide-msegui-talk