It is currently April 16th, 2024, 4:18 pm

Creating Buttons

Tips and Tricks from the Rainmeter Community
User avatar
jsmorley
Developer
Posts: 22629
Joined: April 19th, 2009, 11:02 pm
Location: Fort Hunt, Virginia, USA

Re: Creating Buttons

Post by jsmorley »

A button is a three "image" bitmap. As much animation as you can achieve in three images is the extent that you can have things appear to "move".
Nightglow
Posts: 10
Joined: June 14th, 2010, 6:50 pm

Re: Creating Buttons

Post by Nightglow »

hi all~ So I have 6 images in this skin im working on and im trying to figure out how to make a singe button that will cycle the current image being displayed to the next one in order 1-6 then go back to first one again. The only way i can figure how to do this is just assign each one to a button and then toggle which button that's available after each click. I think there's a better way to do this tho, can I get some help? =)
User avatar
smurfier
Moderator
Posts: 1931
Joined: January 29th, 2010, 1:43 am
Location: Willmar, MN

Re: Creating Buttons

Post by smurfier »

Ok, so to get this straight, you want a button that will cycle another image between six possible images?

Code: Select all

[Variables]
Img.Num=1

[msButNum]
Measure=Calc
Formula=#Img.Num#+1>6?1:#Img.Num#+1
DynamicVariables=1

[msImgName]
Measure=Calc
Formula=-#Img.Num#
Substitute="-1":"ImgOne","-2":"ImgTwo","-3":"ImgThree","-4":"ImgFour","-5":"ImgFive","-6":"ImgSix"
DynamicVariables=1

[mtButton]
Meter=Button
ButtonImage=Image.png
ButtonCommand=!RainmeterSetVariable Img.Num [msButNum]
DynamicVariables=1

[mtImage]
Meter=Image
MeasureName=msImgName
ImageName=%1.png
GitHub | DeviantArt | Tumblr
This is the song that never ends. It just goes on and on my friends. Some people started singing it not knowing what it was, and they'll continue singing it forever just because . . .
Nightglow
Posts: 10
Joined: June 14th, 2010, 6:50 pm

Re: Creating Buttons

Post by Nightglow »

Don't think im applying this properly so maybe you can tell me what to fix. >.<

Code: Select all

 [Rainmeter]
BackgroundMode=1
AppVersion=14000

[Variables]
Img.Num=1

;= Character (position)=================

[msButNum]
Measure=Calc
Formula=#Img.Num#+1>6?1:#Img.Num#+1
DynamicVariables=1

[msImgName]
Measure=Calc
Formula=-#Img.Num#
Substitute="-1":"Char1","-2":"Char2","-3":"Char3","-4":"Char4","-5":"Char5","-6":"Char6"
DynamicVariables=1

[Char1]
Meter=IMAGE
X=195
Y=0
ImageName="002.png"
MeasureName=msImgName
Hidden=0

[Char2]
Meter=IMAGE
X=177
Y=0
ImageName="001.png"
MeasureName=msImgName
Hidden=1

[Char3]
Meter=IMAGE
X=70
Y=0
ImageName="3s.png"
MeasureName=msImgName
Hidden=1

[Char4]
Meter=IMAGE
X=194
Y=0
ImageName="004.png" 
MeasureName=msImgName
Hidden=1

[Char5]
Meter=IMAGE
X=194
Y=0
ImageName="5.png"
MeasureName=msImgName
Hidden=1

[Char6]
Meter=IMAGE
X=194
Y=0
ImageName="6.png"
MeasureName=msImgName
Hidden=1

;==== Buttons =====================

[Button01]
Meter=Button
X=65
Y=286
ButtonImage=Anchor.png
ButtonCommand=!RainmeterSetVariable Img.Num [msButNum]
DynamicVariables=1
User avatar
JamesAC
Developer
Posts: 318
Joined: July 14th, 2009, 5:57 pm

Re: Creating Buttons

Post by JamesAC »

You are nearly there i think.

You only need one meter to show the image, but your images need to be named char1.png, char2.png etc.

Also, the current button/counting combination will not increase the value by 1 each time you click it, it will increase every second then when you click will set that image to show.

I think that should do it but I havnt tested it at all.

Code: Select all

[Rainmeter]
BackgroundMode=1
AppVersion=14000

[Variables]
Img.Num=1
Switch=2

;= Character (position)=================

[msButNum]
Measure=Calc
Formula=#Img.Num#+1>12?1:#Img.Num#+2
DynamicVariables=1
Disabled=1

[Switch]
Measure=CALC
Formula=#Switch#
IfAboveValue=0
IfAboveAction=!execute [!RainmeterToggleMeasure msButNum][!RainmeterSetVariable Switch (#Switch#-1)]
IfEqualValue=0
IfEqualAction=!execute [!RainmeterDisableMeasure Switch][!RainmeterSetVariable Img.Num [msButNum]]
DynamicVariables=1
Disabled=1

[msImgName]
Measure=Calc
Formula=-#Img.Num#
Substitute="-1":"Char1","-3":"Char2","-5":"Char3","-7":"Char4","-9":"Char5","-11":"Char6"
DynamicVariables=1

[Char]
Meter=IMAGE
X=195
Y=0
ImageName=[msImgName].png
DynamicVariables=1
Hidden=0

;==== Buttons =====================

[Button01]
Meter=Button
X=65
Y=286
ButtonImage=Anchor.png
ButtonCommand=!execute [!RainmeterEnableMeasure Switch]
DynamicVariables=1
+++ Divide By Cucumber Error. Please Reinstall Universe And Reboot +++
Quis custodiet ipsos custodes?
User avatar
smurfier
Moderator
Posts: 1931
Joined: January 29th, 2010, 1:43 am
Location: Willmar, MN

Re: Creating Buttons

Post by smurfier »

There is no reason to use dynamicvariables in the image meter.

[mtImage]
Meter=Image
MeasureName=SomeMeasure
ImageName=%1.png

This works just fine, I've used it more than once and learned it from JsMorley.

Now, if you want it to automatically start cycling through through your images when you press the button, then my original code needs to be altered. If you want it cycle from one image to the next only when you press the button, my original code will work just fine if you put the image names in the substitute string, put the appropriate image name into the button, and then put in the x and y values.
GitHub | DeviantArt | Tumblr
This is the song that never ends. It just goes on and on my friends. Some people started singing it not knowing what it was, and they'll continue singing it forever just because . . .
User avatar
JamesAC
Developer
Posts: 318
Joined: July 14th, 2009, 5:57 pm

Re: Creating Buttons

Post by JamesAC »

smurfier wrote:There is no reason to use dynamicvariables in the image meter.
Fair enough, I wasnt sure about that one.
smurfier wrote:Now, if you want it to automatically start cycling through through your images when you press the button, then my original code needs to be altered. If you want it cycle from one image to the next only when you press the button, my original code will work just fine if you put the image names in the substitute string, put the appropriate image name into the button, and then put in the x and y values.
Apologies, I did not read your code correctly, what you had should work fine. I misread your calculation as setting the variable one higher each update when it doesn't. :Embarrassed:
+++ Divide By Cucumber Error. Please Reinstall Universe And Reboot +++
Quis custodiet ipsos custodes?
Nightglow
Posts: 10
Joined: June 14th, 2010, 6:50 pm

Re: Creating Buttons

Post by Nightglow »

ok currently this cycles through all 6 images forever after pushing the button so i think i missed a line that tells it to stop. However they're all in the same spot, i couldn't figure out where to put the cordinates.

Substitute="-1":"Char1" X=195 Y=0,"-2":"Char2" X=177 Y=0,"-3":"Char3" X=70 Y=0,"-4":"Char4" X=194 Y=0,"-5":"Char5" X=194 Y=0,"-6":"Char6" X=194 Y=0
yeah this didn't display anything since i guess i killed the image reference.

Code: Select all

[Rainmeter]
BackgroundMode=1
AppVersion=14000

[Variables]
Img.Num=1

;= Character (position)=================

[msButNum]
Measure=Calc
Formula=#Img.Num#+1>6?1:#Img.Num#+1
DynamicVariables=1

[msImgName]
Measure=Calc
Formula=-#Img.Num#
Substitute="-1":"Char1","-2":"Char2","-3":"Char3","-4":"Char4","-5":"Char5","-6":"Char6"
DynamicVariables=1

;==== Buttons =====================

[Button01]
Meter=Button
X=65
Y=286
ButtonImage=Anchor.png
ButtonCommand=!RainmeterSetVariable Img.Num [msButNum]
DynamicVariables=1

[mtImage]
Meter=Image
MeasureName=msImgName
ImageName=%1.png
User avatar
smurfier
Moderator
Posts: 1931
Joined: January 29th, 2010, 1:43 am
Location: Willmar, MN

Re: Creating Buttons

Post by smurfier »

I think you need to tell us exactly what you want with as much detail as possible.
GitHub | DeviantArt | Tumblr
This is the song that never ends. It just goes on and on my friends. Some people started singing it not knowing what it was, and they'll continue singing it forever just because . . .
Nightglow
Posts: 10
Joined: June 14th, 2010, 6:50 pm

Re: Creating Buttons

Post by Nightglow »

I want a button that changes the displayed side image of the skin im attempting to make. There's a total of 6 images and the 1st one will be default shown upon load of the skin/rainmeter. When you click the button it will hide the 1st image then load the 2nd image and stop. Continuing to click the button will make the current image hide and show the next # image. After the 6th image, when pressed again the button will loop back to the 1st default image. The button must be pressed otherwise the image should not change.
Due to the shape and slight size differences between the images each one will need its own x,y coordinates for best display. So when the button is pushed the coordinates change to the respected # image assigned.

I apologize if this is a hassle, but I really do appreciate the help. =)
I've tried looking at the rainmeter manual but i just get more confused so most of what I've done is referenced from other code that I know works after seeing their example. But I've not seen any code for single button cycling through multiple images until this thread.
Last edited by Nightglow on June 16th, 2010, 12:52 am, edited 1 time in total.