It is currently April 30th, 2024, 6:52 pm

Help Creating a Drop Down Menu

Get help with creating, editing & fixing problems with skins
Hootistigglebits
Posts: 7
Joined: April 3rd, 2024, 1:00 am

Help Creating a Drop Down Menu

Post by Hootistigglebits »

I am using the CyberSearch skin found here:
https://www.deviantart.com/cybergen49/art/CyberSearch-for-Rainmeter-826087442

I currently have 5 search bars on my desktop. 2 searches two different places of a local intranet website, 2 opens the Everything app to search the network via explorer, and 1 is for google. I think it would be much cleaner to just have one search bar with a drop down menu on the left side which when clicked allows me choose between the 5 search bars while still retaining search history for each individual search option. Any clue on how I'd go about doing this? The first code is the main file for the skin and the second is for the google search bar settings.

Code: Select all

# This is the template that will be imported by all the parent search bar skins.
# Editing this template will effect all search bars equally.

[Variables]
backgroundLight=ffffff
background2Light=eeeeee
background3Light=dddddd
textC1Light=000000
textC2Light=aaaaaa
backgroundDark=222222
background2Dark=333333
background3Dark=444444
textC1Dark=ffffff
textC2Dark=777777

[SwitchColourMode]
Measure=String
String=#switchMode#.#mode#
IfMatch=1.Light
IfMatchAction=[!WriteKeyValue Variables mode "Dark"][!Refresh]
IfMatch2=1.Dark
IfMatchAction2=[!WriteKeyValue Variables mode "Light"][!Refresh]
DynamicVariables=1

[GetURL]
Measure=String
String=#engineURLQuery#
Substitute="{q}":"#query#"
DynamicVariables=1

[RunSearch]
Measure=Calc
Formula=0
IfCondition=#runSearch#=1
IfTrueAction=["[GetURL]"][!SetVariable runSearch 0][!SetVariable updateHistory 1][!Update]
DynamicVariables=1

[RecallSearch]
Measure=Calc
Formula=0
IfCondition=#recallSearch#=1
IfTrueAction=["https://www.google.com/search?q=#query#"][!SetVariable recallSearch 0][!Update]
DynamicVariables=1

[ShowHistory]
Measure=Calc
Formula=1
IfCondition=#showHistory#=1
IfTrueAction=[!ShowMeterGroup history][!Update]
IfFalseAction=[!HideMeterGroup history][!Update]
DynamicVariables=1

[UpdateHistory]
Measure=String
String=#updateHistory#
IfMatch=1
IfMatchAction=[!SetVariable history5 "#history4#"][!SetVariable history4 "#history3#"][!SetVariable history3 "#history2#"][!SetVariable history2 "#history1#"][!SetVariable history1 "#query#"][!SetVariable starterHistory 0][!SetVariable writeHistory 1][!SetVariable updateHistory 0][!Update]
DynamicVariables=1

[WriteHistory]
Measure=String
String=#writeHistory#
IfMatch=1
IfMatchAction=[!WriteKeyValue Variables history1 "#history1#"][!WriteKeyValue Variables history2 "#history2#"][!WriteKeyValue Variables history3 "#history3#"][!WriteKeyValue Variables history4 "#history4#"][!WriteKeyValue Variables history5 "#history5#"][!WriteKeyValue Variables starterHistory 0][!SetVariable writeHistory 0][!Update]
DynamicVariables=1

[CheckStarterHistory]
Measure=String
String=#starterHistory#
IfMatch=1
IfMatchAction=[!SetOption RecentSearchesHeading Text "Popular searches"][!Update]

[Background]
Meter=Shape
Group=history
Shape=Rectangle 0,0,370,215,20,20 | Fill Color [#background2[#mode]] | StrokeWidth 0
Hidden=1
DynamicVariables=1

[SearchBar]
Meter=Shape
Shape=Rectangle 0,0,370,40,20,20 | Fill Color [#background[#mode]] | StrokeWidth 0
DynamicVariables=1

[TextClickArea]
Meter=Shape
Shape=Rectangle [DefaultText:X],0,[DefaultText:W],[SearchBar:H] | Fill Color 00000001 | StrokeWidth 0
DynamicVariables=1
MouseActionCursorName=Text
LeftMouseUpAction=[!SetVariable showHistory 1][!CommandMeasure SearchInput "ExecuteBatch ALL"][!Update]

[EngineLogo]
Meter=Image
ImageName="#engineIcon#"
X=12
Y=8
W=24
H=24
SolidColor=00000001
TooltipText=Double click me to change the colour mode!#CRLF#(It could take a few seconds)
MouseActionCursor=0
LeftMouseDoubleClickAction=[!SetVariable switchMode 1][!Update]

[DefaultText]
Meter=String
#Text=#query#
Text=Type here to search #engineName#
X=45
Y=20
W=([SearchBar:W]-[DefaultText:X]-20)
FontFace=Segoe UI
FontSize=11
FontColor=[#textC2[#mode]]
StringAlign=LeftCenter
AntiAlias=1
ClipString=1
DynamicVariables=1

[SearchInput]
Measure=Plugin
Plugin=InputText
FocusDismiss=1
X=([DefaultText:X]-3)
Y=[DefaultText:Y]
W=[DefaultText:W]
H=25
SolidColor=[#background[#mode]]
FontFace=Segoe UI
FontSize=11
FontColor=[#textC1[#mode]]
StringAlign=LeftCenter
AntiAlias=1
ClipString=1
DynamicVariables=1
OnDismissAction=[!SetVariable showHistory 0][!Update]
Command1=[!SetVariable query "$UserInput$"][!SetVariable runSearch 1][!SetVariable showHistory 0][!Update]

[RecentSearchesHeading]
Meter=String
Group=history
Text=Recent searches
X=15
Y=50
W=([SearchBar:W]-[DefaultText:X]-20)
FontFace=Segoe UI
FontSize=10
FontColor=[#textC1[#mode]]
InlineSetting=Weight | 700
StringAlign=LeftTop
AntiAlias=1
ClipString=1
DynamicVariables=1
Hidden=1

[InstructionHeading]
Meter=String
Group=history
Text=Press Enter to search
X=355
Y=50
W=([SearchBar:W]-[DefaultText:X]-20)
FontFace=Segoe UI
FontSize=10
FontColor=[#textC2[#mode]]
InlineSetting=Weight | 700
StringAlign=RightTop
AntiAlias=1
ClipString=1
DynamicVariables=1
Hidden=1

[History1]
Meter=String
Group=history
Text=#history1#
X=15
Y=4R
W=320
Padding=10,4,10,4
SolidColor=00000001
FontFace=Segoe UI
FontSize=10
FontColor=[#textC1[#mode]]
StringAlign=LeftTop
AntiAlias=1
ClipString=1
DynamicVariables=1
MouseOverAction=[!SetOption #CURRENTSECTION# SolidColor "[#background3[#mode]]"][!Update]
MouseLeaveAction=[!SetOption #CURRENTSECTION# SolidColor "[#background2[#mode]]"][!Update]
LeftMouseUpAction=[!SetVariable query "#history1#"][!SetVariable recallSearch 1][!Update]
Hidden=1

[History2]
Meter=String
MeterStyle=History1
Text=#history2#
Y=0R
SolidColor=00000001
MouseOverAction=[!SetOption #CURRENTSECTION# SolidColor "[#background3[#mode]]"][!Update]
MouseLeaveAction=[!SetOption #CURRENTSECTION# SolidColor "[#background2[#mode]]"][!Update]
LeftMouseUpAction=[!SetVariable query "#history2#"][!SetVariable recallSearch 1][!Update]

[History3]
Meter=String
MeterStyle=History1
Text=#history3#
Y=0R
SolidColor=00000001
MouseOverAction=[!SetOption #CURRENTSECTION# SolidColor "[#background3[#mode]]"][!Update]
MouseLeaveAction=[!SetOption #CURRENTSECTION# SolidColor "[#background2[#mode]]"][!Update]
LeftMouseUpAction=[!SetVariable query "#history3#"][!SetVariable recallSearch 1][!Update]

[History4]
Meter=String
MeterStyle=History1
Text=#history4#
Y=0R
SolidColor=00000001
MouseOverAction=[!SetOption #CURRENTSECTION# SolidColor "[#background3[#mode]]"][!Update]
MouseLeaveAction=[!SetOption #CURRENTSECTION# SolidColor "[#background2[#mode]]"][!Update]
LeftMouseUpAction=[!SetVariable query "#history4#"][!SetVariable recallSearch 1][!Update]

[History5]
Meter=String
MeterStyle=History1
Text=#history5#
Y=0R
SolidColor=00000001
MouseOverAction=[!SetOption #CURRENTSECTION# SolidColor "[#background3[#mode]]"][!Update]
MouseLeaveAction=[!SetOption #CURRENTSECTION# SolidColor "[#background2[#mode]]"][!Update]
LeftMouseUpAction=[!SetVariable query "#history5#"][!SetVariable recallSearch 1][!Update]1

Code: Select all

[Rainmeter]
Update=-1
AccurateText=1
RightMouseUpAction=[!SkinCustomMenu]
ContextTitle=Edit
ContextAction=["#CONFIGEDITOR#" "#CURRENTPATH##CURRENTFILE#"]
ContextTitle2=-
ContextAction2=[]
ContextTitle3=Reload skin
ContextAction3=[!Refresh]
ContextTitle4=Unload Skin
ContextAction4=[!DeactivateConfig]
ContextTitle5=-
ContextAction5=[]
ContextTitle6=Standard context menu
ContextAction6=[!SkinMenu]

[Metadata]
Name=Search Bar
Author=CyberOfficial
Information=A straightforward search bar with search history. Customizable to your website of choice.
Version=1.0
License=Creative Commons Attribution - Non - Commercial - Share Alike 3.0

[Variables]
# Search settings
engineName=Google
engineIcon=#@#google.png
# "{q}" (without quotes) will be replaced with the user's input.
engineURLQuery=https://www.google.com/search?q={q}

# History storage
history1=fdsgfd
history2=dd
history3=hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhgggggggggggggggggg
history4=disney plus
history5=hurricane dorian
starterHistory=0

# Color mode: Type "Light" or "Dark" (without quotation marks) after mode=
mode=Dark

# Search bar template import
# Don't change anything after this line!
@include=#@#searchBarTemplate.ini
You do not have the required permissions to view the files attached to this post.
RicardoTM
Posts: 271
Joined: December 28th, 2022, 9:30 pm
Location: México

Re: Help Creating a Drop Down Menu

Post by RicardoTM »

I would make them variants. Each variant would have the name of the engine. Google.ini| Schematics.ini, etc.

Then, simply move the whole [rainmeter] section to the searchBarTemplate.ini file and set the context menu to switch between them by simply activating them using the [!ActivateConfig "config" "file"] bang, since they're variants, one would unload to load the other automatically.

Since each history is stored on its own engine file, it would show the correct history automatically.

So, just do this: rename each search.ini file to the name of the engine as I described above and move them to the root folder (CyberSearch).

Open any of the files and cut the whole [rainmeter] section and paste it on searchBarTemplate.ini file.

Modify the contextTitle and contextAction options like this:

Code: Select all

ContextTitle=Google
ContextAction=[!ActivateConfig "CyberSearch" "Google.ini"]
ContextTitle2=Schematics
ContextAction2[!ActivateConfig "CyberSearch" "Schematics.ini"]
And so on.

Finally delete the [Rainmeter] section on all 5 bar skins, so all of them use the [Rainmeter] section you just added to searchBarTemplate.ini

And that's it. Now just refresh rainmeter, then load google.ini then right click on it and it should switch when you select the correct option.
ezgif.com-video-to-gif-converter (12).gif
You do not have the required permissions to view the files attached to this post.
User avatar
Yincognito
Rainmeter Sage
Posts: 7185
Joined: February 27th, 2015, 2:38 pm
Location: Terra Yincognita

Re: Help Creating a Drop Down Menu

Post by Yincognito »

Excellent idea from RicardoTM - and easy to apply. :thumbup:

For the sake of completeness, here's a very basic, general drop down sample (this assumes you have Icon 1.png to Icon 5.png in the @Resources folder of the skin):

Code: Select all

[Variables]
Icon1=#@#Icon 1.png
Icon2=#@#Icon 2.png
Icon3=#@#Icon 3.png
Icon4=#@#Icon 4.png
Icon5=#@#Icon 5.png
Text1=Type here to search Instructions
Text2=Type here to search Parts
Text3=Type here to search Schematics
Text4=Type here to search
Text5=Type here to search Google
History1=fdsgfd
History2=dd
History3=hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhgggggggggggggggggg
History4=disney plus
History5=hurricane dorian
Index=1

[Rainmeter]
Update=1000
AccurateText=1
DynamicWindowSize=1 

---Meters---

[Back]
Meter=Shape
Shape=Rectangle 0,0,370,40,20,20 | Fill Color 32,32,32,255 | StrokeWidth 0
DynamicVariables=1

[Icon]
Meter=Image
X=8
Y=8
W=24
H=24
SolidColor=0,0,0,1
ImageName=[#Icon[#Index]]
MouseScrollUpAction=[!SetVariable Index (Clamp(#Index#-1,1,5))][!UpdateMeter *][!Redraw]
MouseScrollDownAction=[!SetVariable Index (Clamp(#Index#+1,1,5))][!UpdateMeter *][!Redraw]
LeftMouseUpAction=[!ToggleMeterGroup Menu][!Redraw]
DynamicVariables=1

[Text]
Meter=String
X=12R
Y=0r
SolidColor=0,0,0,1
FontColor=255,255,255,255
FontEffectColor=0,0,0,255
StringEffect=Shadow
FontFace=Segoe UI
FontSize=11
AntiAlias=1
Text=[#Text[#Index]]
TooltipText=[#History[#Index]]
DynamicVariables=1

[Menu]
Group=Menu
Hidden=1
Meter=Shape
Y=([Back:H]+8)
Shape=Rectangle 0,0,40,200,20,20 | Fill Color 32,32,32,255 | StrokeWidth 0
DynamicVariables=1

[Set1]
Group=Menu
Hidden=1
Meter=Image
X=8
Y=8r
W=24
H=24
SolidColor=0,0,0,1
ImageName=#Icon1#
LeftMouseUpAction=[!SetVariable Index 1][!UpdateMeter *][!HideMeterGroup Menu][!Redraw]
DynamicVariables=1

[Set2]
Group=Menu
Hidden=1
Meter=Image
X=8
Y=16R
W=24
H=24
SolidColor=0,0,0,1
ImageName=#Icon2#
LeftMouseUpAction=[!SetVariable Index 2][!UpdateMeter *][!HideMeterGroup Menu][!Redraw]
DynamicVariables=1

[Set3]
Group=Menu
Hidden=1
Meter=Image
X=8
Y=16R
W=24
H=24
SolidColor=0,0,0,1
ImageName=#Icon3#
LeftMouseUpAction=[!SetVariable Index 3][!UpdateMeter *][!HideMeterGroup Menu][!Redraw]
DynamicVariables=1

[Set4]
Group=Menu
Hidden=1
Meter=Image
X=8
Y=16R
W=24
H=24
SolidColor=0,0,0,1
ImageName=#Icon4#
LeftMouseUpAction=[!SetVariable Index 4][!UpdateMeter *][!HideMeterGroup Menu][!Redraw]
DynamicVariables=1

[Set5]
Group=Menu
Hidden=1
Meter=Image
X=8
Y=16R
W=24
H=24
SolidColor=0,0,0,1
ImageName=#Icon5#
LeftMouseUpAction=[!SetVariable Index 5][!UpdateMeter *][!HideMeterGroup Menu][!Redraw]
DynamicVariables=1
This has no container meter to be able to add unlimited "sets" and navigate through them while masking those outside the visible menu area, but it's enough to notice the main idea: nested indexed variables, just like already used in the original code. Adapting such a system to a code with input texts or physically written histories is a matter of storing the "action bangs" for each case in similar indexed variables in [Variables] and using some escaping when needed, e.g. Bang1=[!Log "[#*History1*]"] then "running the bang" at the desired time via [#Bang1] and such (or, you can leave things in measures like they already are, and update the corresponding measures when needed, to avoid the escaping hassle).
Profiles: Rainmeter ProfileDeviantArt ProfileSuites: MYiniMeterSkins: Earth
Hootistigglebits
Posts: 7
Joined: April 3rd, 2024, 1:00 am

Re: Help Creating a Drop Down Menu

Post by Hootistigglebits »

Thanks so much both of you. So I have my search engine variants in the resources folder and changed the template folder to what Yincognito suggested then moved it to the cybersearch root folder. I'm getting the pop up menu now, but when I click on the search bar to stop typing nothing happens. What did I do wrong?

SearchBarTemplate.ini

Code: Select all

[Variables]
Icon1="C:\Users\jeple\OneDrive\Documents\Rainmeter\Skins\New folder\@Resources\Work Instructions.png"
Icon2="C:\Users\jeple\OneDrive\Documents\Rainmeter\Skins\New folder\@Resources\Schematics.png"
Icon3="C:\Users\jeple\OneDrive\Documents\Rainmeter\Skins\New folder\@Resources\Parts.png"
Icon4="C:\Users\jeple\OneDrive\Documents\Rainmeter\Skins\New folder\@Resources\BOM.png"
Icon5="C:\Users\jeple\OneDrive\Documents\Rainmeter\Skins\New folder\@Resources\google.png"
Text1=Type here to search Work Instructions
Text2=Type here to search MAX Parts
Text3=Type here to search Schematics
Text4=Type here to search Flat Bom
Text5=Type here to search Google
History1=fdsgfd
History2=dd
History3=hhhhhhhh
History4=disney plus
History5=hurricane dorian
Index=1

[Rainmeter]
Update=1000
AccurateText=1
DynamicWindowSize=1 

---Meters---

[Back]
Meter=Shape
Shape=Rectangle 0,0,370,40,20,20 | Fill Color 32,32,32,255 | StrokeWidth 0
DynamicVariables=1

[Icon]
Meter=Image
X=8
Y=8
W=24
H=24
SolidColor=0,0,0,1
ImageName=[#Icon[#Index]]
MouseScrollUpAction=[!SetVariable Index (Clamp(#Index#-1,1,5))][!UpdateMeter *][!Redraw]
MouseScrollDownAction=[!SetVariable Index (Clamp(#Index#+1,1,5))][!UpdateMeter *][!Redraw]
LeftMouseUpAction=[!ToggleMeterGroup Menu][!Redraw]
DynamicVariables=1

[Text]
Meter=String
X=12R
Y=0r
SolidColor=0,0,0,1
FontColor=255,255,255,255
FontEffectColor=0,0,0,255
StringEffect=Shadow
FontFace=Segoe UI
FontSize=11
AntiAlias=1
Text=[#Text[#Index]]
TooltipText=[#History[#Index]]
DynamicVariables=1

[Menu]
Group=Menu
Hidden=1
Meter=Shape
Y=([Back:H]+8)
Shape=Rectangle 0,0,40,200,20,20 | Fill Color 32,32,32,255 | StrokeWidth 0
DynamicVariables=1

[Set1]
Group=Menu
Hidden=1
Meter=Image
X=8
Y=8r
W=24
H=24
SolidColor=0,0,0,1
ImageName=#Icon1#
LeftMouseUpAction=[!SetVariable Index 1][!UpdateMeter *][!HideMeterGroup Menu][!Redraw]
DynamicVariables=1

[Set2]
Group=Menu
Hidden=1
Meter=Image
X=8
Y=16R
W=24
H=24
SolidColor=0,0,0,1
ImageName=#Icon2#
LeftMouseUpAction=[!SetVariable Index 2][!UpdateMeter *][!HideMeterGroup Menu][!Redraw]
DynamicVariables=1

[Set3]
Group=Menu
Hidden=1
Meter=Image
X=8
Y=16R
W=24
H=24
SolidColor=0,0,0,1
ImageName=#Icon3#
LeftMouseUpAction=[!SetVariable Index 3][!UpdateMeter *][!HideMeterGroup Menu][!Redraw]
DynamicVariables=1

[Set4]
Group=Menu
Hidden=1
Meter=Image
X=8
Y=16R
W=24
H=24
SolidColor=0,0,0,1
ImageName=#Icon4#
LeftMouseUpAction=[!SetVariable Index 4][!UpdateMeter *][!HideMeterGroup Menu][!Redraw]
DynamicVariables=1

[Set5]
Group=Menu
Hidden=1
Meter=Image
X=8
Y=16R
W=24
H=24
SolidColor=0,0,0,1
ImageName="C:\Users\jeple\OneDrive\Documents\Rainmeter\Skins\New folder\@Resources\google.png"
LeftMouseUpAction=[!SetVariable Index 5][!UpdateMeter *][!HideMeterGroup Menu][!Redraw]
DynamicVariables=1
Google.ini

Code: Select all

[Metadata]
Name=Search Bar
Author=CyberOfficial
Information=A straightforward search bar with search history. Customizable to your website of choice.
Version=1.0
License=Creative Commons Attribution - Non - Commercial - Share Alike 3.0

[Variables]
# Search settings
engineName=Google
engineIcon=#@#google.png
# "{q}" (without quotes) will be replaced with the user's input.
engineURLQuery=https://www.google.com/search?q={q}

# History storage
history1=fdsgfd
history2=dd
history3=hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhgggggggggggggggggg
history4=disney plus
history5=hurricane dorian
starterHistory=0

# Color mode: Type "Light" or "Dark" (without quotation marks) after mode=
mode=Dark

# Search bar template import
# Don't change anything after this line!
@include=#@#searchBarTemplate.ini
RicardoTM
Posts: 271
Joined: December 28th, 2022, 9:30 pm
Location: México

Re: Help Creating a Drop Down Menu

Post by RicardoTM »

Honestly you are over-complicating it with that many variables, needed variables are already on each search.ini file, including the image names. Give me a minute while I explain it in more detail:

We have 1 file that is included on every search bar skin: searchBarTemplate.ini This file will contain our Custom Context Menu:

@resources\searchBarTemplate.ini

Code: Select all

[Rainmeter]
Update=-1
AccurateText=1
RightMouseUpAction=[!SkinCustomMenu]
ContextTitle=Everything
ContextAction=[!activateconfig CyberSearch "Everything.ini"]
ContextTitle2=Google
ContextAction2=[!activateconfig CyberSearch "Google.ini"]
ContextTitle3=Refresh
ContextAction3=[!Refresh]
ContextTitle4=Unload Skin
ContextAction4=[!DeactivateConfig]
ContextTitle5=-
ContextAction5=[]
ContextTitle6=Standard context menu
ContextAction6=[!SkinMenu]

# This is the template that will be imported by all the parent search bar skins.
# Editing this template will effect all search bars equally.

[Variables]
backgroundLight=ffffff
background2Light=eeeeee
background3Light=dddddd
textC1Light=000000
textC2Light=aaaaaa
backgroundDark=222222
background2Dark=333333
background3Dark=444444
textC1Dark=ffffff
textC2Dark=777777

[SwitchColourMode]
Measure=String
String=#switchMode#.#mode#
IfMatch=1.Light
IfMatchAction=[!WriteKeyValue Variables mode "Dark"][!Refresh]
IfMatch2=1.Dark
IfMatchAction2=[!WriteKeyValue Variables mode "Light"][!Refresh]
DynamicVariables=1

[GetURL]
Measure=String
String=#engineURLQuery#
Substitute="{q}":"#query#"
DynamicVariables=1

[RunSearch]
Measure=Calc
Formula=0
IfCondition=#runSearch#=1
IfTrueAction=["[GetURL]"][!SetVariable runSearch 0][!SetVariable updateHistory 1][!Update]
DynamicVariables=1

[RecallSearch]
Measure=Calc
Formula=0
IfCondition=#recallSearch#=1
IfTrueAction=["https://www.google.com/search?q=#query#"][!SetVariable recallSearch 0][!Update]
DynamicVariables=1

[ShowHistory]
Measure=Calc
Formula=1
IfCondition=#showHistory#=1
IfTrueAction=[!ShowMeterGroup history][!Update]
IfFalseAction=[!HideMeterGroup history][!Update]
DynamicVariables=1

[UpdateHistory]
Measure=String
String=#updateHistory#
IfMatch=1
IfMatchAction=[!SetVariable history5 "#history4#"][!SetVariable history4 "#history3#"][!SetVariable history3 "#history2#"][!SetVariable history2 "#history1#"][!SetVariable history1 "#query#"][!SetVariable starterHistory 0][!SetVariable writeHistory 1][!SetVariable updateHistory 0][!Update]
DynamicVariables=1

[WriteHistory]
Measure=String
String=#writeHistory#
IfMatch=1
IfMatchAction=[!WriteKeyValue Variables history1 "#history1#"][!WriteKeyValue Variables history2 "#history2#"][!WriteKeyValue Variables history3 "#history3#"][!WriteKeyValue Variables history4 "#history4#"][!WriteKeyValue Variables history5 "#history5#"][!WriteKeyValue Variables starterHistory 0][!SetVariable writeHistory 0][!Update]
DynamicVariables=1

[CheckStarterHistory]
Measure=String
String=#starterHistory#
IfMatch=1
IfMatchAction=[!SetOption RecentSearchesHeading Text "Popular searches"][!Update]

[Background]
Meter=Shape
Group=history
Shape=Rectangle 0,0,370,215,20,20 | Fill Color [#background2[#mode]] | StrokeWidth 0
Hidden=1
DynamicVariables=1

[SearchBar]
Meter=Shape
Shape=Rectangle 0,0,370,40,20,20 | Fill Color [#background[#mode]] | StrokeWidth 0
DynamicVariables=1

[TextClickArea]
Meter=Shape
Shape=Rectangle [DefaultText:X],0,[DefaultText:W],[SearchBar:H] | Fill Color 00000001 | StrokeWidth 0
DynamicVariables=1
MouseActionCursorName=Text
LeftMouseUpAction=[!SetVariable showHistory 1][!CommandMeasure SearchInput "ExecuteBatch ALL"][!Update]

[EngineLogo]
Meter=Image
ImageName="#engineIcon#"
X=12
Y=8
W=24
H=24
SolidColor=00000001
TooltipText=Double click me to change the colour mode!#CRLF#(It could take a few seconds)
MouseActionCursor=0
LeftMouseDoubleClickAction=[!SetVariable switchMode 1][!Update]

[DefaultText]
Meter=String
#Text=#query#
Text=Type here to search #engineName#
X=45
Y=20
W=([SearchBar:W]-[DefaultText:X]-20)
FontFace=Segoe UI
FontSize=11
FontColor=[#textC2[#mode]]
StringAlign=LeftCenter
AntiAlias=1
ClipString=1
DynamicVariables=1

[SearchInput]
Measure=Plugin
Plugin=InputText
FocusDismiss=1
X=([DefaultText:X]-3)
Y=[DefaultText:Y]
W=[DefaultText:W]
H=25
SolidColor=[#background[#mode]]
FontFace=Segoe UI
FontSize=11
FontColor=[#textC1[#mode]]
StringAlign=LeftCenter
AntiAlias=1
ClipString=1
DynamicVariables=1
OnDismissAction=[!SetVariable showHistory 0][!Update]
Command1=[!SetVariable query "$UserInput$"][!SetVariable runSearch 1][!SetVariable showHistory 0][!Update]

[RecentSearchesHeading]
Meter=String
Group=history
Text=Recent searches
X=15
Y=50
W=([SearchBar:W]-[DefaultText:X]-20)
FontFace=Segoe UI
FontSize=10
FontColor=[#textC1[#mode]]
InlineSetting=Weight | 700
StringAlign=LeftTop
AntiAlias=1
ClipString=1
DynamicVariables=1
Hidden=1

[InstructionHeading]
Meter=String
Group=history
Text=Press Enter to search
X=355
Y=50
W=([SearchBar:W]-[DefaultText:X]-20)
FontFace=Segoe UI
FontSize=10
FontColor=[#textC2[#mode]]
InlineSetting=Weight | 700
StringAlign=RightTop
AntiAlias=1
ClipString=1
DynamicVariables=1
Hidden=1

[History1]
Meter=String
Group=history
Text=#history1#
X=15
Y=4R
W=320
Padding=10,4,10,4
SolidColor=00000001
FontFace=Segoe UI
FontSize=10
FontColor=[#textC1[#mode]]
StringAlign=LeftTop
AntiAlias=1
ClipString=1
DynamicVariables=1
MouseOverAction=[!SetOption #CURRENTSECTION# SolidColor "[#background3[#mode]]"][!Update]
MouseLeaveAction=[!SetOption #CURRENTSECTION# SolidColor "[#background2[#mode]]"][!Update]
LeftMouseUpAction=[!SetVariable query "#history1#"][!SetVariable recallSearch 1][!Update]
Hidden=1

[History2]
Meter=String
MeterStyle=History1
Text=#history2#
Y=0R
SolidColor=00000001
MouseOverAction=[!SetOption #CURRENTSECTION# SolidColor "[#background3[#mode]]"][!Update]
MouseLeaveAction=[!SetOption #CURRENTSECTION# SolidColor "[#background2[#mode]]"][!Update]
LeftMouseUpAction=[!SetVariable query "#history2#"][!SetVariable recallSearch 1][!Update]

[History3]
Meter=String
MeterStyle=History1
Text=#history3#
Y=0R
SolidColor=00000001
MouseOverAction=[!SetOption #CURRENTSECTION# SolidColor "[#background3[#mode]]"][!Update]
MouseLeaveAction=[!SetOption #CURRENTSECTION# SolidColor "[#background2[#mode]]"][!Update]
LeftMouseUpAction=[!SetVariable query "#history3#"][!SetVariable recallSearch 1][!Update]

[History4]
Meter=String
MeterStyle=History1
Text=#history4#
Y=0R
SolidColor=00000001
MouseOverAction=[!SetOption #CURRENTSECTION# SolidColor "[#background3[#mode]]"][!Update]
MouseLeaveAction=[!SetOption #CURRENTSECTION# SolidColor "[#background2[#mode]]"][!Update]
LeftMouseUpAction=[!SetVariable query "#history4#"][!SetVariable recallSearch 1][!Update]

[History5]
Meter=String
MeterStyle=History1
Text=#history5#
Y=0R
SolidColor=00000001
MouseOverAction=[!SetOption #CURRENTSECTION# SolidColor "[#background3[#mode]]"][!Update]
MouseLeaveAction=[!SetOption #CURRENTSECTION# SolidColor "[#background2[#mode]]"][!Update]
LeftMouseUpAction=[!SetVariable query "#history5#"][!SetVariable recallSearch 1][!Update]
Notice I added the [Rainmeter] section with the new activateconfig bangs on the context menu actions.

It's important to understand that this file is shared between all search bars, that means that all search bars will have the same context menu (or drop down menu if you prefer).

Now, normally, inside the CyberSearch folder you have subfolders named after each bar name, and those subfolders contain a search.ini file:
Search.ini

Code: Select all

[Metadata]
Name=Search Bar
Author=CyberOfficial
Information=A straightforward search bar with search history. Customizable to your website of choice.
Version=1.0
License=Creative Commons Attribution - Non - Commercial - Share Alike 3.0

[Variables]
# Search settings
engineName=Everything
engineIcon=#@#Everything.ico
# "{q}" (without quotes) will be replaced with the user's input.
engineURLQuery="C:\Users\user\Documents\Everything64.exe" -s "{q}"

# History storage
history1=test
history2=hola
history3=blabla
history4=brbrbr
history5=rrraaa
starterHistory=1

# Colour mode (Light or Dark)
# Tip: You can easily change this by double-clicking the search bar icon.
mode=Dark

# Search bar template import
# Don't change anything after this line!
@include=#@#searchBarTemplate.ini
Notice I deleted the [rainmeter] section that was on the first lines. This file already contains all variables needed, engineName and engineicon, as well as the engineURLQuery variable. Which I assume you already had correctly configured as you have 5 search bars already. It also contains the History variables. So, in this file, I only removed the whole [Rainmeter] section, and left everything else as I configured it previously.

So, now we move this search.ini file outside its folder, to CyberSearch folder, then rename it from search.ini to Everything.ini (in my case). And then we do the same with our second bar, the google one.

So the CyberSearch folder ends up looking like this (in my case):
Captura de pantalla 2024-04-11 185344.jpg
It's important to understand that the variables inside each of these files belong only to that particular search bar. This means that, even though all files have the same variables, these variables have different values, values that only enter in action when that particular search bar is active.

And that's it, no need to create more variables nor anything. Only rename each file, put in on CyberSearch folder and then add it to the CustomContextMenu bangs on searchBarTemplate.ini

You can add as many bars as you want (up to 16 I think).

This would be yours, according to the bar names on the image you shared on your first post:

searchBarTemplate.ini:

Code: Select all

[Rainmeter]
Update=-1
AccurateText=1
RightMouseUpAction=[!SkinCustomMenu]
ContextTitle=Instructions
ContextAction=[!activateconfig CyberSearch "Instructions.ini"]
ContextTitle2=Parts
ContextAction2=[!activateconfig CyberSearch "Parts.ini"]
ContextTitle3=Schematics
ContextAction3=[!activateconfig CyberSearch "Schematics.ini"]
ContextTitle4=Search
ContextAction4=[!activateconfig CyberSearch "Search.ini"]
ContextTitle5=Google
ContextAction5=[!activateconfig CyberSearch "Google.ini"]
ContextTitle6=Refresh
ContextAction6=[!Refresh]
ContextTitle7=Unload Skin
ContextAction7=[!DeactivateConfig]
ContextTitle8=-
ContextAction8=[]
ContextTitle9=Standard context menu
ContextAction9=[!SkinMenu]


;Everything else [....]
So again, in case it's still not clear. You only need the 5 search.ini files re-named after your search engines inside the CyberSearch folder, then add those file names to each activateconfig bang on [Rainmeter] section in searchBarTemplate.ini

So, inside CyberSearch folder you would have Instructions.ini, Parts.ini, Schematics.ini, Search.ini and Google.ini files. and inside @Resources folder you would have the 5 images that correspond to each search engine. Finally inside the searchBarTemplate.ini file you would have a [Rainmeter] section with 5 ContextTitle and ContextAction that activate each bar.

As simple as that.

Edit: Your 4th search bar (the one with the image of what I think is a clipboard) only says: Type here to search " " It doesn't have a name I guess, so the "Search.ini" bar I mentioned 2 paragraphs above (the one next to schematics.ini) may have another name in your case. Also, make sure any image, file or folder name has spaces to avoid weird bugs. So, rename your "Work Instructions.png" image to "WorkInstructions.png"

"For the sake of completeness":
Original CyberSearch, modified to use variants:
CyberSearch_1.1.rmskin
Finished version here: https://forum.rainmeter.net/viewtopic.php?p=223117#p223128
You do not have the required permissions to view the files attached to this post.
Last edited by RicardoTM on April 15th, 2024, 10:37 pm, edited 1 time in total.
User avatar
Yincognito
Rainmeter Sage
Posts: 7185
Joined: February 27th, 2015, 2:38 pm
Location: Terra Yincognita

Re: Help Creating a Drop Down Menu

Post by Yincognito »

Hootistigglebits wrote: April 12th, 2024, 12:14 am So I have my search engine variants in the resources folder and changed the template folder to what Yincognito suggested then moved it to the cybersearch root folder.
It was actually RicardoTM who suggested that, by the way (though the code you posted was mine). I advise you to try his easier method first (don't mind the longer explanation), and see if you're OK with it. My alternative was more literal, but it involves adapting your code to it (since I didn't bother to add the input text and the other particularities of your skin), so it's a bit more work than moving some files and folders like he suggested for his.
Profiles: Rainmeter ProfileDeviantArt ProfileSuites: MYiniMeterSkins: Earth
Hootistigglebits
Posts: 7
Joined: April 3rd, 2024, 1:00 am

Re: Help Creating a Drop Down Menu

Post by Hootistigglebits »

Thanks. Seems to be working great, but I do have an additional question. How do I change the look of the context menu so that it matches the search bar? Also as a second option how would I go about making the icon on the search bar scrollable when the mouse cursor is over it so that I can use the mouse wheel to select the search engine of choice?
You do not have the required permissions to view the files attached to this post.
User avatar
eclectic-tech
Rainmeter Sage
Posts: 5407
Joined: April 12th, 2012, 9:40 pm
Location: Cedar Point, Ohio, USA

Re: Help Creating a Drop Down Menu

Post by eclectic-tech »

Hootistigglebits wrote: April 13th, 2024, 6:46 pm Thanks. Seems to be working great, but I do have an additional question. How do I change the look of the context menu so that it matches the search bar? Also as a second option how would I go about making the icon on the search bar scrollable when the mouse cursor is over it so that I can use the mouse wheel to select the search engine of choice?
The color of the context menu is controlled by your current Windows theme. You could create meters that simulate that menu and hide/show them OR look at death.crafter's post on how to create custom context menus.

To add scroll down change to the logo, you need to add a variable to each search engine skin [Variables] section: CurrentEngine=0 to Google.ini,
CurrentEngine=1 to Youtube.ini, and
CurrentEngine=2 to Reddit.ini.

Then in the searchbartemplate.ini [Variables] section, add 3 new variables:

Code: Select all

Engine0=Google
Engine1=Youtube
Engine2=Reddit
Finally, in the searchbartemplate.ini modify the [EngineLogo] section:

Code: Select all

[EngineLogo]
Meter=Image
ImageName="#engineIcon#"
X=12
Y=8
W=24
H=24
SolidColor=00000001
TooltipText=Double click me to change the colour mode!#CRLF#(It could take a few seconds)
MouseActionCursor=0
LeftMouseDoubleClickAction=[!SetVariable switchMode 1][!Update]
MouseScrollDownAction=[!SetVariable CurrentEngine ((#CurrentEngine#+1)%3)][!ActivateConfig "CyberSearch" "[#Engine[#CurrentEngine]].ini"]
DynamicVariables=1
Save and refresh to allow you to scroll down on the logo and switch through each search engine.
RicardoTM
Posts: 271
Joined: December 28th, 2022, 9:30 pm
Location: México

Re: Help Creating a Drop Down Menu

Post by RicardoTM »

eclectic-tech wrote: April 14th, 2024, 2:01 am The color of the context menu is controlled by your current Windows theme.
Is it? I'm on dark mode (windows 10) and rainmeter doesn't show black context menus.
Hootistigglebits wrote: April 13th, 2024, 6:46 pm How do I change the look of the context menu so that it matches the search bar?
Here's a plugin you could try (I haven't tried it): https://forum.rainmeter.net/viewtopic.php?t=33028
Hootistigglebits
Posts: 7
Joined: April 3rd, 2024, 1:00 am

Re: Help Creating a Drop Down Menu

Post by Hootistigglebits »

electric-tech, that worked. When I select a different search engine the bar quickly fades out and then back in again. How do I force it to not fade in and out like that?

I just noticed an issue. If I click on the history of any search bar it defaults to searching that item in google. How do I make the history open up to the correct search engine?
You do not have the required permissions to view the files attached to this post.