It is currently March 28th, 2024, 12:45 pm

Translucent Taskbar

Skins that control functions in Windows or Rainmeter
Post Reply
arkenthera
Posts: 1
Joined: January 12th, 2017, 7:22 pm

Translucent Taskbar

Post by arkenthera »

This skin uses Win10 API to make the taskbar transparent and blurs behind it like how Windows handles transparency in Start Menu/Notification center etc. Source code for the plugin is available here https://gist.github.com/arkenthera/7a807e04ee8f1d95425f710944667508

Screens:

Image

Image

Image

You can also add a dummy Meter with SolidColor=0,255,150,50 behind the taskbar and slightly change the effect.

Image

Or you can remove the blur effect with AccentState=2 and make it fully clean.

You can download the .rmskin on http://arkenthera.deviantart.com/art/TranslucentTaskbar-1-2-656402039
User avatar
eclectic-tech
Rainmeter Sage
Posts: 5380
Joined: April 12th, 2012, 9:40 pm
Location: Cedar Point, Ohio, USA
Contact:

Re: Translucent Taskbar

Post by eclectic-tech »

Nice Work! 8-)
User avatar
rlyoung04
Posts: 1
Joined: January 14th, 2017, 3:39 pm

Re: Translucent Taskbar

Post by rlyoung04 »

Works great with 3 monitors. :great:
ALink95
Posts: 1
Joined: April 29th, 2017, 8:01 am

Re: Translucent Taskbar

Post by ALink95 »

Hello!
I love your plugin, it's beautiful and works great.
But is it possible to make an option to activate "chameleon" option for the taskbar?
When i use a bright wallpaper, i sometimes can't read hour anymore on my taskbar, or even see white icons, so making an option that change the font color or icons color to match with the background would be great!
vdelica
Posts: 2
Joined: December 27th, 2014, 11:51 am

Re: Translucent Taskbar

Post by vdelica »

Awesome work! I just wanna ask if there's any way to reduce the opacity?? Tried in-app options and editted .ini but got nothing
User avatar
eclectic-tech
Rainmeter Sage
Posts: 5380
Joined: April 12th, 2012, 9:40 pm
Location: Cedar Point, Ohio, USA
Contact:

Re: Translucent Taskbar

Post by eclectic-tech »

vdelica wrote:Awesome work! I just wanna ask if there's any way to reduce the opacity?? Tried in-app options and editted .ini but got nothing
You can add an image meter to the code, set it's height to your taskbar height (usually 40), move it to the same location as the taskbar, to change the opacity.

Code: Select all

[Rainmeter]
Update=16

[Metadata]
Name=TranslucentTaskbar
Author=arkenthera
Information=Translucent Taskbar
Version=1.2
License=Creative Commons Attribution - Non - Commercial - Share Alike 3.0

[Variables]
Alpha=64

[Opacity]
Meter=Image
SolidColor=255,255,255,#Alpha#
W=#ScreenAreaWidth#
H=40
DynamicVariables=1

[TranslucentTaskbar]
 Measure=Plugin
 Plugin=TranslucentTaskbar
 ; To remove blur effect uncomment the next line
 ; AccentState=2
 
Alternately, if you want to match the current Windows Accent color, you can install the SysColor.dll plugin by Brian, and use it to get the accent color chosen by Windows to color the transparency.

Code: Select all

[Rainmeter]
Update=16

[Metadata]
Name=TranslucentTaskbar
Author=arkenthera
Information=Translucent Taskbar
Version=1.2
License=Creative Commons Attribution - Non - Commercial - Share Alike 3.0

[Variables]
Alpha=64

[MeasureColorTrigger]
Measure=Plugin
Plugin=SysColor
ColorType=DWM_COLOR
DisplayType=RGB

[Opacity]
Meter=Image
SolidColor=[MeasureColorTrigger],#Alpha#
W=#ScreenAreaWidth#
H=40
DynamicVariables=1

[TranslucentTaskbar]
 Measure=Plugin
 Plugin=TranslucentTaskbar
 ; To remove blur effect uncomment the next line
 ; AccentState=2
 
Have fun! :welcome:
etl
Posts: 8
Joined: July 28th, 2019, 5:40 pm

Re: Translucent Taskbar

Post by etl »

Noticed a bug where occasionally, pressing the Windows key to open/close the start menu will cause the translucent taskbar to disappear briefly. It basically flickers off for a fraction of a second, revealing the system taskbar underneath, before reappearing.
Igni
Posts: 1
Joined: August 25th, 2019, 4:28 am

Re: Translucent Taskbar

Post by Igni »

eclectic-tech wrote: July 25th, 2018, 5:52 pm You can add an image meter to the code, set it's height to your taskbar height (usually 40), move it to the same location as the taskbar, to change the opacity.

Code: Select all

[Rainmeter]
Update=16

[Metadata]
Name=TranslucentTaskbar
Author=arkenthera
Information=Translucent Taskbar
Version=1.2
License=Creative Commons Attribution - Non - Commercial - Share Alike 3.0

[Variables]
Alpha=64

[Opacity]
Meter=Image
SolidColor=255,255,255,#Alpha#
W=#ScreenAreaWidth#
H=40
DynamicVariables=1

[TranslucentTaskbar]
 Measure=Plugin
 Plugin=TranslucentTaskbar
 ; To remove blur effect uncomment the next line
 ; AccentState=2
 
Alternately, if you want to match the current Windows Accent color, you can install the SysColor.dll plugin by Brian, and use it to get the accent color chosen by Windows to color the transparency.

Code: Select all

[Rainmeter]
Update=16

[Metadata]
Name=TranslucentTaskbar
Author=arkenthera
Information=Translucent Taskbar
Version=1.2
License=Creative Commons Attribution - Non - Commercial - Share Alike 3.0

[Variables]
Alpha=64

[MeasureColorTrigger]
Measure=Plugin
Plugin=SysColor
ColorType=DWM_COLOR
DisplayType=RGB

[Opacity]
Meter=Image
SolidColor=[MeasureColorTrigger],#Alpha#
W=#ScreenAreaWidth#
H=40
DynamicVariables=1

[TranslucentTaskbar]
 Measure=Plugin
 Plugin=TranslucentTaskbar
 ; To remove blur effect uncomment the next line
 ; AccentState=2
 
Have fun! :welcome:
How come this method just spawns a partially transparent horizontal colored bar across the top of my screen? How do I change it to be vertical? Is it supposed to just be a static skin that doesn't move with the rest of the taskbar if the auto-hide option is initialized? Currently just commenting out the custom code in favor of coloring the animated taskbar.
User avatar
eclectic-tech
Rainmeter Sage
Posts: 5380
Joined: April 12th, 2012, 9:40 pm
Location: Cedar Point, Ohio, USA
Contact:

Re: Translucent Taskbar

Post by eclectic-tech »

Igni wrote: August 27th, 2019, 10:05 pm How come this method just spawns a partially transparent horizontal colored bar across the top of my screen? How do I change it to be vertical? Is it supposed to just be a static skin that doesn't move with the rest of the taskbar if the auto-hide option is initialized? Currently just commenting out the custom code in favor of coloring the animated taskbar.
Because that is all it does... it is a static skin that does not move with changes to the taskbar.

You would need to drag this skin to your taskbar location so it appears behind it and adds the effect.
Once you position the skin, Rainmeter will remember that position and load it there every time.

If you have a vertical taskbar, or change the taskbar size, you would need to adjust the width and height of the meter to match.
This will not respond to auto-hiding the taskbar. it will always be visible.

This was offered a year ago for a specific case. It will work for any taskbar, but must be modified to match. :)
User avatar
ikarus1969
Posts: 571
Joined: February 28th, 2011, 3:20 pm
Location: Vienna, Austria

Re: Translucent Taskbar

Post by ikarus1969 »

You can automatically move the meter (for opacity) to the right position and set its width/height by watching the builtin-variables #SCREENAREA...# and #WORKAREA...#.
I also added an UpdateDivider=-1 to the opacity meter because it's updated by the measure Measure_Check_TaskbarPosition.
(the UpdateDivider=31 on the measure Measure_Watch is used to have an update rate of half a second with the Update=16 in the rainmeter-section. adapt it to your needs.)

I admit i don't want to install the plugin but i tested a skin with only the opacity-meter, which follows the taskbar.

Code: Select all

[Rainmeter]
Update=16

[Metadata]
Name=TranslucentTaskbar
Author=arkenthera
Information=Translucent Taskbar
Version=1.2
License=Creative Commons Attribution - Non - Commercial - Share Alike 3.0

[Variables]
Alpha=64

[Measure_Watch]
Measure=STRING
String=#WORKAREAX##WORKAREAY##WORKAREAWIDTH##WORKAREAHEIGHT#
OnChangeAction=[!UpdateMeasure "Measure_Check_TaskbarPosition"]
DynamicVariables=1
UpdateDivider=31

[Measure_Check_TaskbarPosition]
Measure=CALC
Formula=0
IfConditionMode=1
IfCondition=(#SCREENAREAHEIGHT# > #WORKAREAHEIGHT#) && (#SCREENAREAY# = #WORKAREAY#)
IfTrueAction=[!SetOption "Opacity" "W" "#SCREENAREAWIDTH#"][!SetOption "Opacity" "H" "(#SCREENAREAHEIGHT# - #WORKAREAHEIGHT#)"][!UpdateMeter "Opacity"][!Redraw][!Move "#SCREENAREAX#" "(#WORKAREAY# + #WORKAREAHEIGHT#)" "#CURRENTCONFIG#]
IfCondition2=(#SCREENAREAHEIGHT# > #WORKAREAHEIGHT#) && (#SCREENAREAY# < #WORKAREAY#)
IfTrueAction2=[!SetOption "Opacity" "W" "#SCREENAREAWIDTH#"][!SetOption "Opacity" "H" "(#SCREENAREAHEIGHT# - #WORKAREAHEIGHT#)"][!UpdateMeter "Opacity"][!Redraw][!Move "#SCREENAREAX#" "#SCREENAREAY#" "#CURRENTCONFIG#]
IfCondition3=(#SCREENAREAHEIGHT# = #WORKAREAHEIGHT#) && (#SCREENAREAX# = #WORKAREAX#)
IfTrueAction3=[!SetOption "Opacity" "W" "(#SCREENAREAWIDTH# - #WORKAREAWIDTH#)"][!SetOption "Opacity" "H" "#SCREENAREAHEIGHT#"][!UpdateMeter "Opacity"][!Redraw][!Move "(#WORKAREAX# + #WORKAREAWIDTH#)" "#SCREENAREAY#" "#CURRENTCONFIG#]
IfCondition4=(#SCREENAREAHEIGHT# = #WORKAREAHEIGHT#) && (#SCREENAREAX# < #WORKAREAX#)
IfTrueAction4=[!SetOption "Opacity" "W" "(#SCREENAREAWIDTH# - #WORKAREAWIDTH#)"][!SetOption "Opacity" "H" "#SCREENAREAHEIGHT#"][!UpdateMeter "Opacity"][!Redraw][!Move "#SCREENAREAX#" "#SCREENAREAY#" "#CURRENTCONFIG#]
DynamicVariables=1
UpdateDivider=-1

[Opacity]
Meter=Image
SolidColor=255,255,255,#Alpha#
W=#ScreenAreaWidth#
H=40
DynamicVariables=1
UpdateDivider=-1

[TranslucentTaskbar]
 Measure=Plugin
 Plugin=TranslucentTaskbar
 ; To remove blur effect uncomment the next line
 ; AccentState=2
 
Post Reply