It is currently December 5th, 2021, 2:25 am

Sliding Sidebar

Help with creating, editing & fixing problems with skins
User avatar
Alloutofmercy
Posts: 26
Joined: November 17th, 2021, 5:51 am

Sliding Sidebar

Post by Alloutofmercy »

I have never seen a sidebar opening when hovered or toggled. But I managed to make this white thing using action plugin. Is there a way I could convert my sidebar to the one on the left ? Here is the code for my still in progress sidebar

Code: Select all

[Rainmeter]
Update=1000
AccurateText=1
DynamicWindowSize=1
[Metadata]
Name=
Author=
Information=
Version=
License=Creative Commons Attribution - Non - Commercial - Share Alike 3.0

[Variables]
red=224,0,45,150
Lightblue=0,191,255,100
Pirategold=255,187,95,255
Puregold=255,161,0,500
@include=variables.inc
Aqua=0,197,205,250
Plum=202,49,110,150
@includeVariables=#@#WeatherComJSONVariables.inc
@IncludeLanguageVariables="#@#WeatherComJSONLanguage.inc"
@includeVariables=#@#WeatherComJSONVariables.inc
@IncludeLanguageVariables="#@#WeatherComJSONLanguage.inc"
Greengrass=153,237,77,255
Mountainblue=55,90,209,150
Love=255,61,139,255
BackgroundMode=2
SolidColor=80,80,80,220
SkinWidth=290
SkinHeight=45
Gold=235, 175, 95,150
Autumn=227, 100, 75,250
Seared=198, 34, 48,150
Piratepink=217, 64, 97,250
Piratebrown=74, 34, 34,250
U=[!UpdateMeasureGroup Sliders][!UpdateMeterGroup Sliders][!Redraw]
W=1
Offset=-190
SlideAmount=10


[MeasureSlider]
Measure=Plugin
Plugin=ActionTimer
Group=Sliders
ActionList1=Repeat Right,#W#,20
ActionList2=Repeat Left,#W#,20
Right=[!SetVariable Offset "(Clamp(#Offset#+#SlideAmount#,-190,0))"]#U#
Left=[!SetVariable Offset "(Clamp(#Offset#-#SlideAmount#,-190,0))"]#U#
IfCondition=#Offset# = -190
IfTrueAction=[!SetOption MeterPanel LeftMouseUpAction """[!CommandMeasure MeasureSlider "Stop 2"][!CommandMeasure MeasureSlider "Execute 1"]"""]
IfCondition2=#Offset# = 0
IfTrueAction2=[!SetOption MeterPanel LeftMouseUpAction """[!CommandMeasure MeasureSlider "Stop 1"][!CommandMeasure MeasureSlider "Execute 2"]"""]
DynamicVariables=1







[Profilebar]
Meter=Shape 
Shape=Rectangle 0,0,300,150,10 | Fill color #Autumn# |  StrokeWidth 0
Group=Sidebar

[Appsbar3]
Meter=shape
shape=Rectangle 0,160,300,300,10 | Fill Color #Piratepink# | StrokeWidth 0
Group=Sidebar


[Treasurebar]
Meter=shape
shape=Rectangle 0,470,300,200,10 | Fill color #Seared#| Strokewidth 0
Group=Sidebar


[MeasureTimeOfDay]
Measure=Time
Format="%H"
Substitute=#TimeOfDay#
Group=Sidebar

[WelcomeMessage]
Meter=String
MeasureName=MeasureTimeOfDay
StringAlign=Left
StringCase=Upper
FontSize=15
FontFace=Pieces of Eight
FontColor=white
Text="%1"
AntiAlias=1
X=120
Group=Sidebar
Y=38
[MeterCaptain]
Meter=string
fontface=Pieces of Eight
fontsize=17
fontcolor=#Pirategold#
text="Captain_"
X=120
Y=80
 Group=Sidebar
 
 
 [Meterimage]
 Meter=image
 Imagename=#@#\Images\Sparrowskull.png
 X=0
 Y=10
 W=130
Group=Sidebar

[MeasureUser]
Measure=Plugin
Plugin=SysInfo
SysInfoType=USER_NAME
UpdateDivider=-1
Group=Sidebar

[UserText]
Meter=String
MeasureName=MeasureUser
StringAlign=Left
StringCase=Upper
FontFace=Think smart
FontColor=0,0,0
FontSize=20
Text="%1"
AntiAlias=1
X=210
Y=80
W=350
Group=Sidebar


[MeterShortcuts]
Meter=string
FontColor=white
FontFace=Pieces of Eight
FontSize=23
Group=Sidebar

!Underlinetext
X=50
Y=170
text="Shortcuts ! Cap'n"





X---Programs---X 



[Appchrome]
Meter=image
Imagename=#@#\Icons\icons8-chrome-48.png
X=30
Y=220
W=30
LeftMouseUpAction=["Chrome.exe"]
Group=Sidebar

[Youtube]
Meter=Image
Imagename=#@#\Icons\Youtube.png
X=100r
Y=220
W=30
LeftMouseUpAction=!execute [https://www.youtube.com]
Group=Sidebar

[Insta]
Meter=Image
Imagename=#@#\Icons\icons8-instagram-96.png
X=100r
Y=220
W=35
LeftMouseUpAction= !execute [https://www.instagram.com]
Group=Sidebar

[Twitter]
Meter=image
Imagename=#@#\Icons\4362955_twitter_logo_social media_icon.png
Imagetint=255,255,255,255
X=30
Y=280
W=35
LeftMouseUpAction= !execute [https://twitter.com]
Group=Sidebar
[Deviantart]
Meter=image
Imagename=#@#\Icons\1632501_art_circle_deviantart_round icon_icon.png
X=100r
Y=280
W=35
LeftMouseUpAction= !execute [https://www.deviantart.com]
Group=sidebar
[Rainmeterfourums]
Meter=image
Imagename=#@#\Icons\icons8-rainmeter-32.png
X=100r
Y=280
W=35
LeftMouseUpAction= !execute [https://forum.rainmeter.net/index.php]
Group=Sidebar



[MeasureBatteryACLine]
Measure=Plugin
Plugin=PowerPlugin
PowerState=ACLine
IfEqualValue=1
IfEqualAction=[!HideMeterGroup Discharging][!HideMeterGroup TimeRemaining][!HideMeter Remaining][!ShowMeter ChargingStatus][!HideMeter ChargedStatus][!ShowMeterGroup BatteryCharging][!HideMeter Calculating]
IfBelowValue=1
IfBelowAction=[!ShowMeterGroup Discharging][!HideMeter ChargingStatus][!HideMeter ChargedStatus][!HideMeterGroup BatteryCharging][!ShowMeter Calculating]


[MeasureBatteryPercent]
Measure=Plugin
Plugin=PowerPlugin
PowerState=Percent
OnChangeAction=[!UpdateMeasure MeasureBatteryBarCharging][!UpdateMeter MeterBatteryBarDischarging][!UpdateMeter MeterBatteryBarCharging][!UpdateMeter MeterBatteryPercent][!UpdateMeter Remaining]
IfCondition=(MeasureBatteryPercent=100) && (MeasureBatteryACLine=1)
IfTrueAction=[!HideMeterGroup Discharging][!HideMeterGroup TimeRemaining][!HideMeter ChargingStatus][!ShowMeter ChargedStatus][!ShowMeterGroup BatteryCharging][!ShowMeterGroup BatteryChargingAntiAlias]
IfCondition2=(MeasureBatteryPercent<10) && (MeasureBatteryACLine=1)
IfTrueAction2=[!HideMeterGroup BatteryChargingAntiAlias]
IfCondition3=(MeasureBatteryPercent>=10) && (MeasureBatteryACLine=1)
IfTrueAction3=[!ShowMeterGroup BatteryChargingAntiAlias]
IfConditionMode=1

[MeasureBatteryHours]
Measure=Plugin
Plugin=PowerPlugin
PowerState=Lifetime
Substitute="Unknown":"-1","":"-1"
Format=%#H
OnChangeAction=[!UpdateMeter MeterBatteryHours]
IfMatch=^1$
IfMatchAction=!SetVariable hrS ""
IfNotMatchAction=!SetVariable hrS "s"
IfMatch2=^0$
IfMatchAction2=[!HideMeter MeterBatteryHours]
IfCondition=([MeasureBatteryHours] > 0)
IfTrueAction=[!ShowMeter MeterBatteryHours][!ShowMeter Remaining][!HideMeter Calculating]]
IfCondition2=([MeasureBatteryHours] < 0)
IfTrueAction2=[!HideMeter MeterBatteryHours][!HideMeter Remaining]
DynamicVariables=1
IfConditionMode=1

[MeasureBatteryMinutes]
Measure=Plugin
Plugin=PowerPlugin
PowerState=Lifetime
Substitute="Unknown":"-1","":"-1"
Format=%#M
OnChangeAction=[!UpdateMeter MeterBatteryMinutes]
IfMatch=^1$
IfMatchAction=!SetVariable minS ""
IfNotMatchAction=!SetVariable minS "s"
IfMatch2=^0$
IfMatchAction2=[!HideMeter MeterBatteryMinutes]
IfCondition=([MeasureBatteryMinutes] > 0)
IfTrueAction=[!ShowMeter MeterBatteryMinutes][!ShowMeter Remaining][!HideMeter Calculating]
IfCondition2=([MeasureBatteryMinutes] < 0)
IfTrueAction2=[!HideMeter MeterBatteryMinutes][!HideMeter Remaining]
DynamicVariables=1
IfConditionMode=1


[MeasureBatteryBarCharging]
Measure=Calc
Formula=((MeasureBatteryPercent/100)*#BatteryBarWidth#)
OnChangeAction=[!UpdateMeter MeterBatteryBarCharging1][!UpdateMeter MeterBatteryBarCharging2][!UpdateMeter MeterBatteryBarCharging3][!UpdateMeter MeterBatteryBarCharging4]
UpdateDivider=-1


[BatteryPinIcon]
Meter=Image
X=67
Y=534
W=5
H=7
SolidColor=#Pirategold#
UpdateDivider=-1
Group=Sidebar


[Powermeter]
Meter=string
FontColor=#Aqua#
Fontface=Pieces of Eight
FontSize=20
Text="POWER"
X=90
Y=480
AntiAlias=1
Group=Sidebar



[StringStyle]
FontColor=220,220,220
FontSize=8
FontFace=Segoe UI
StringStyle=BOLD
AntiAlias=1
Text=%1
Group=Sidebar

[MeasurePercent]
Measure=Plugin
PlugIn=PowerPlugin
PowerState=PERCENT

[MeasureStatus]
Measure=Plugin
PlugIn=PowerPlugin
PowerState=STATUS
Substitute="0":"NO BATTERY","1":"CHARGING","2":"CRITICAL","3":"LOW","4":"ABOVE LOW"

[MeasureACLine]
Measure=Plugin
PlugIn=PowerPlugin
PowerState=ACLINE
Substitute="0":"BATTERY","1":"PLUGGED"
IfCondition=(#CURRENTSECTION#=0)
IfTrueAction=[!SetOption MeterStatusLifetime MeasureName "MeasureLifetime"][!UpdateMeasure "MeterStatusLifetime"]
IfFalseAction=[!SetOption MeterStatusLifetime MeasureName "MeasureStatus"][!UpdateMeasure "MeterStatusLifetime"]

[MeasureLifetime]
Measure=Plugin
PlugIn=PowerPlugin
PowerState=LIFETIME
Format=%#Hh %Mm


[MeterBatteryBar]
MeasureName=MeasurePercent
Meter=BAR
X=20
Y=527
W=45
H=18
BarColor=#Puregold#
SolidColor=0,154,180,0
BarOrientation=Horizontal
Group=Sidebar



[BatteryTopBorder]
Meter=Image
X=-4r
Y=-4r
W=48
H=2
SolidColor=#Pirategold#
UpdateDivider=-1
Group=Sidebar

[BatteryLeftBorder]
Meter=Image
X=0r
Y=0r
W=2
H=24
SolidColor=#Pirategold#
UpdateDivider=-1
Group=Sidebar

[BatteryBottomBorder]
Meter=Image
X=0r
Y=547
W=48
H=2
SolidColor=#Pirategold#
UpdateDivider=-1
Group=Sidebar

[BatteryRightBorder]
Meter=Image
X=64
Y=523
W=2
H=25
SolidColor=#Pirategold#
UpdateDivider=-1
Group=Sidebar



[MeterBatteryPercent]

Meter=String
Fontface=Pieces of Eight
FontColor=#Puregold#
Fontsize=25
MeasureName=MeasureBatteryPercent
X=15
Y=550
Text="%1"
UpdateDivider=-1
Group=Sidebar

[Percent]

Meter=String
Fontface=Segoe UI Bold
FontColor=#Pirategold#
Fontsize=20
X=50
Y=550
Text="%"
UpdateDivider=-1
Group=Sidebar

[MeterBatteryHours]
Meter=String
Fontcolor=#Pirategold#
Fontface=Pieces of Eight
Fontsize=17
MeasureName=MeasureBatteryHours
X=80
Y=520
Group=TimeRemaining
Text="%1 hour#hrS#"
DynamicVariables=1
UpdateDivider=-1
Group=Sidebar

[MeterBatteryMinutes]
Meter=String
Fontcolor=#Pirategold#
Fontface=Pieces of Eight
Fontsize=17
MeasureName=MeasureBatteryMinutes
X=160
Y=0r
Group=TimeRemaining
Text="%1 minute#minS#"
DynamicVariables=1
UpdateDivider=-1
Group=Sidebar

[Remaining]
Meter=String
Fontcolor=#Pirategold#
Fontface=Pieces of Eight
Fontsize=20
X=[MeterBatteryHours:X]
Y=20r
Text="remaining"
DynamicVariables=1
UpdateDivider=-1
Group=Sidebar

[ChargingStatus]
Meter=String
FontColor=#Pirategold#
Fontface=Pieces of Eight
FontSize=17
X=80
Y=525
Text="Charging your Battery,Sir"
UpdateDivider=-1
Group=Sidebar

[ChargedStatus]
Meter=String
FontColor=#Pirategold#
Fontface=Pieces of Eight
FontSize=17
X=100
Y=200
Text="Fully charged"
UpdateDivider=-1
Group=Sidebar

[Calculating]
Meter=String
FontColor=#Pirategold#
Fontface=Pieces of Eight
FontSize=17
X=100
Y=525
Text="Calculating..."
UpdateDivider=-1
Group=Sidebar

You do not have the required permissions to view the files attached to this post.
User avatar
CodeCode
Posts: 797
Joined: September 7th, 2020, 2:24 pm
Location: QLD, Australia

Re: Sliding Sidebar

Post by CodeCode »

Not sure, what you mean by like the left. It seems to work fine, does it not?

Unless you want another one on the right?

Short version (for on the right option)
Create a new meter with unique name.
Copy everything into that meter.
Change all of the X values to be subtracting rather than adding.

But from the video clip it looks like there are two boxes that expand - your white one, and then the red one?

Is there anything less general about what's troubling you?
Nice job with the action timer. That one kills everyone, in some small way but frustrating. You beat that hurdle pretty good.
ƈǟռ'ȶ ʄɨӼ ɨȶ ɨʄ ɨȶ ǟɨռ'ȶ ɮʀօӄɛ - ʊռʟɛֆֆ ɨȶ ɨֆ ɨռ ƈօɖɛ.
User avatar
balala
Rainmeter Sage
Posts: 13516
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: Sliding Sidebar

Post by balala »

Alloutofmercy wrote: November 21st, 2021, 6:47 am I have never seen a sidebar opening when hovered or toggled. But I managed to make this white thing using action plugin. Is there a way I could convert my sidebar to the one on the left ? Here is the code for my still in progress sidebar
Same way as CodeCode, I also am not sure what you mean by "sidebar opening" or by "convert my sidebar to the one on the left". The code provided creates a completely static skin. Doesn't slide out, doesn't move at all, not even if I manually execute any of the two actions of the ActionTimer plugin measure (the plugin is ActionTimer, not Action, but this is justa detail). So not sure what you want, please give us a few details. If it would move definitely was possible to move from the other side, if this is your intention, but so far am not sure about your intention.
User avatar
Alloutofmercy
Posts: 26
Joined: November 17th, 2021, 5:51 am

Re: Sliding Sidebar

Post by Alloutofmercy »

Ok so the one on the right, [the completete skin] dosent move, But the one on the right does. Is there any way I could integrate my skin into the one on the left ? More like enigma sidebar. In enigma sidebar, I think they are all seperate skins but I'd rather have it all in one piece.
User avatar
balala
Rainmeter Sage
Posts: 13516
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: Sliding Sidebar

Post by balala »

Alloutofmercy wrote: November 21st, 2021, 5:52 pm Ok so the one on the right, [the completete skin] dosent move, But the one on the right does. Is there any way I could integrate my skin into the one on the left ? More like enigma sidebar. In enigma sidebar, I think they are all seperate skins but I'd rather have it all in one piece.
Definitely can't follow you. The provided code is the code of which skin? The one on left or the one on right?
User avatar
Alloutofmercy
Posts: 26
Joined: November 17th, 2021, 5:51 am

Re: Sliding Sidebar

Post by Alloutofmercy »

Code is for the one on the right. All I wanted to ask was if there was a way to make my sidebar [Pirate]skin like the one on the left without rewriting it completely. Make it slide or something when I hover over it or set up a toggle button. Just like the enigma sidebar
You do not have the required permissions to view the files attached to this post.
User avatar
death.crafter
Rainmeter Sage
Posts: 1205
Joined: April 24th, 2021, 8:13 pm

Re: Sliding Sidebar

Post by death.crafter »

Alloutofmercy wrote: November 22nd, 2021, 4:39 am Code is for the one on the right. All I wanted to ask was if there was a way to make my sidebar [Pirate]skin like the one on the left without rewriting it completely. Make it slide or something when I hover over it or set up a toggle button. Just like the enigma sidebar
While you can, they won't perform well. It's better to just integate all your skins to a sidebar and make use of containers to make the animations. Would be a hell lot easier.
from the Realm of Death
User avatar
Alloutofmercy
Posts: 26
Joined: November 17th, 2021, 5:51 am

Re: Sliding Sidebar

Post by Alloutofmercy »

Can you tell me how to do it
User avatar
eclectic-tech
Rainmeter Sage
Posts: 4498
Joined: April 12th, 2012, 9:40 pm
Location: Cedar Point, Ohio, USA

Re: Sliding Sidebar

Post by eclectic-tech »

Alloutofmercy wrote: November 22nd, 2021, 11:15 am Can you tell me how to do it
Without using a container, you can show/hide groups of skins by use a skin group to identify every skin you want to be part of the sidebar.

Decide on a name for the group, let's name it 'PirateSidebar'. You add a skin to this group by adding Group=PirateSidebar to the [Rainmeter] section of each skin.

To control them use skin group bangs in another skin; !ToggleGroup PirateSidebar.

This will show/hide/toggle every skin in that group. It is not an animated slide bar, but it is how Enigma does it.

Using a container is going to be more difficult since you are working with individual skins, not meters in a single skin. It could probably be done...
User avatar
death.crafter
Rainmeter Sage
Posts: 1205
Joined: April 24th, 2021, 8:13 pm

Re: Sliding Sidebar

Post by death.crafter »

Alloutofmercy wrote: November 22nd, 2021, 11:15 am Can you tell me how to do it
If you are ready to start over, I am all for it. Lemme know.
from the Realm of Death