Transparent app's background

Find quick help here to get you started with Hollywood

Transparent app's background

Postby Ferin » Fri Jan 05, 2018 2:41 am

Hi chaps and dames,
Is it possible to make window of an app's fully transparent? Lets say i want to make clock app that shape isn't rectangular,
if i make my clock's dial circular i'll get nastily looking corners. Any chance there is a proper Hollywood's way of doing it,
i even don't mind using some dirty tricks, if there are any ;p.
Thanks.
Ferin
 
Posts: 3
Joined: Fri May 26, 2017 12:41 am

Re: Transparent app's background

Postby airsoftsoftwair » Sat Jan 06, 2018 1:19 pm

Not sure I understand this question but why do you say you get "nastily looking corners" when using circular-shaped window? Using alpha channel transparency your windows can have any shape you like and there should be no nastily looking corners or there's something wrong. Have you checked out the AlphaApple example that is shipped with Hollywood?
User avatar
airsoftsoftwair
 
Posts: 2283
Joined: Fri Feb 12, 2010 3:33 pm
Location: Germany

Re: Transparent app's background

Postby jPV » Sat Jan 06, 2018 1:41 pm

Ferin wrote:Is it possible to make window of an app's fully transparent? Lets say i want to make clock app that shape isn't rectangular,
if i make my clock's dial circular i'll get nastily looking corners. Any chance there is a proper Hollywood's way of doing it,
i even don't mind using some dirty tricks, if there are any ;p.


If you mean by "nastily looking corners" the OS window borders, those can be hidden by using "Borderless" window.

Or if you get black background instead of transparent area on "corners" around the circular clock image, then you are running the program on a screen which doesn't support alpha transparency. For example, on Amiga compatible systems you need to have 32bit screen with compositing mode turned on. I have no idea about other platforms though... but if this is your problem, you can do some kind of dirty software hack to get it look transparent.

Here's one example for the latter case:

Code: Select all
@DISPLAY {Hidden = True, Borderless = True}
@BRUSH 1, "ram:analogclockbg.png", {LoadAlpha=True}

EscapeQuit(True)

; The display should be transparent and drawn by hardware, if you have alpha transparent bgimage
; and run it on a suitable screen mode (32bit and hw accelerated).
; If you move the window or other windows beneath it, everything should update automatically.
BrushToBGPic(1,1)
DisplayBGPic(1, {X = #KEEPPOSITION, Y = #KEEPPOSITION})
OpenDisplay(1)

WaitLeftMouse

; Let's do the transparency with a software rendering hack instead:

; Let's grab the underlying area of the screen by hiding our window first.
HideDisplay()
Wait(10)
GrabDesktop(2,{X=GetAttribute(#DISPLAY,0,#ATTRXPOS) ,Y=GetAttribute(#DISPLAY,0,#ATTRYPOS) ,Width=GetAttribute(#DISPLAY,0,#ATTRWIDTH) ,Height=GetAttribute(#DISPLAY,0,#ATTRHEIGHT)})
; ...and draw our own graphics over it
SelectBrush(2, #SELMODE_COMBO, 2)
DisplayBrush(1,0,0)
EndSelect()
; ...and then use the resulting image as a new bgpic
BrushToBGPic(2,1)
DisplayBGPic(1, {X = #KEEPPOSITION, Y = #KEEPPOSITION})
; Now we can bring the window visible again. Note that transparent areas in this bgpic won't update automatically,
; and you might want to check if window has moved/resized and draw it again then etc.
ShowDisplay()

WaitLeftMouse
User avatar
jPV
 
Posts: 92
Joined: Sat Mar 26, 2016 11:44 am
Location: RNO

Re: Transparent app's background

Postby Ferin » Wed Jan 10, 2018 12:21 am

My apologies for long delay and not being more specific in asking questions.

Generally speaking, I was wondering if i can make background of my app 100% transparent when running it on WB's screen.
jPV answered already, and it works well, thanks a lot, but i have more questions.

Here we go:
Example with brush with transparent regions works when we load bg picture,what in case i want to display just some text,
lets say with TextOut(), is there anyway to make background 100% transparent and dipslay text only without any bg picture?
For example i want to make digital clock, window size will be 200x200 pixels, i want to make it fully transparent, so
it looks like digits of the clock sit on WB backdrop or menu top bar. As i understand to get that effect user gonna need to
switch composition on. But how it's going to look in Morphos and AROS, or even windows, macosx?

Next case, i want to make some kind of glow effect around object, text or/and brush, that blends nicely in WB's screen.
How to achieve that, is it possible at all?
Apart from that setting bg picture determines the dimensions of our app's window, even if i set width and height attributes
of DISPLAY function, is there anyway of overriding that 'feature' without resizing background picture and still have transparent
area beyond pictures bondaries? To be precise, i have 100X100 background and want my window to be 200x200. Background's
picture has an irregular shape with transparent pixels around it and i need 50 pixels transparent 'frame' around it.
I hope i've expressed my needs more precise ths time.

Regarding software hack version. Would it work on AOS3.x with Planamarama plugin?
And how to make it 'flush' background every set amount of time in most efficient way?
I mean how often should i clear background and what functions/loops use for it.

Thank you very much for you help so far and ask for more ; ).
Ferin
 
Posts: 3
Joined: Fri May 26, 2017 12:41 am

Re: Transparent app's background

Postby jPV » Wed Jan 10, 2018 7:39 pm

Ferin wrote:Example with brush with transparent regions works when we load bg picture,what in case i want to display just some text,
lets say with TextOut(), is there anyway to make background 100% transparent and dipslay text only without any bg picture?

I haven't found a way to render something directly over transparent bgpic, but you can first create an alpha transparent brush and then draw the text into the brush (SelectBrush with a suitable combo mode), and then use that brush as a new bgpic (BrushToBGPic). Then you can have your text or other graphics over a transparent display.


For example i want to make digital clock, window size will be 200x200 pixels, i want to make it fully transparent, so
it looks like digits of the clock sit on WB backdrop or menu top bar. As i understand to get that effect user gonna need to
switch composition on. But how it's going to look in Morphos and AROS, or even windows, macosx?

Actually, I think that constantly updating program (clock) is harder to make with hardware compositing mode, because if you do it like I said above (BrushToBGPic), you are likely to see glitches when the bgpic gets changed. So it doesn't look good when updated once per second or not even once per minute.

But if you use software rendering hack mentioned in previous posts, then you can have screengrab as the bgpic and draw other things over it normally. I think that would work well, but the downside is of course if you want to move the window, it will need manual re-drawing then.


Next case, i want to make some kind of glow effect around object, text or/and brush, that blends nicely in WB's screen.
How to achieve that, is it possible at all?
Apart from that setting bg picture determines the dimensions of our app's window, even if i set width and height attributes
of DISPLAY function, is there anyway of overriding that 'feature' without resizing background picture and still have transparent
area beyond pictures bondaries? To be precise, i have 100X100 background and want my window to be 200x200. Background's
picture has an irregular shape with transparent pixels around it and i need 50 pixels transparent 'frame' around it.

That's easy with the previously mentioned ways. Create a brush with size 200x200 (make it transparent or use screengrab depending if doing hw or sw rendering), render your own 100x100 background with glow effects you want in the middle of it, and use the result as a new bgpic.

I've used this method in my RNOWidgets program when creating automatic drop shadows for widgets. If you have access to a MorphOS machine, have a test run with it. You can enable/disable compositing mode and enable/disable dropshadows from the settings etc. Here is one image where you can see the shadows in action.


Regarding software hack version. Would it work on AOS3.x with Planamarama plugin?

I still haven't had time to check the plugin and have no idea how it works, but why not?


And how to make it 'flush' background every set amount of time in most efficient way?
I mean how often should i clear background and what functions/loops use for it.

I wouldn't like to do it time based, because most of the updates would be unnecessary, and when you have moved the window, updating wouldn't probably hit in the right time either.

I made it (in RNOWidgets) so that background is refreshed only when window gets deactivated and it has been moved (user has moved the window and then clicks somewhere else and our window gets deactivated). I do it by installing InactiveWindow and MoveWindow event handlers, and in move window function I only set a variable which tells if the window has been moved, if it hasn't it's useless to re-draw the background. Then the inactive window function re-draws the background only if the move variable is set.
User avatar
jPV
 
Posts: 92
Joined: Sat Mar 26, 2016 11:44 am
Location: RNO


Return to Newbie questions

Who is online

Users browsing this forum: No registered users and 1 guest

cron