It is currently June 24th, 2019, 2:23 pm

Looking to be pointed in the right direction

Help with creating, editing & fixing problems with skins
Ferbstorm
Posts: 36
Joined: March 9th, 2019, 12:50 am

Looking to be pointed in the right direction

Ferbstorm » March 11th, 2019, 4:12 am

Hello all. i'm new to this, and have no experience in coding, and am having a really hard time getting started. I've been reading the manual that's on the site, trying to get my bearings, and I've also been opening the text files of basic skins to try and suss things out for myself, but it's really not clicking with me.

What I'm hoping for is that there's a sort of basic tutorial that someone would recommend. More specifically, something that goes from the beginning to the end of a simple skin creation, as what I'm struggling with the most is understanding how anything interacts with anything else. I can look at explanations of the different Bangs all day long, but I don't understand how they fit in to anything.

I'm honestly starting to think that this might be a great deal more effort than it's worth, particularly since it's pretty murky whether or not Rainmeter can actually do what I'm looking for. I'm hoping that once the basics start to click, then the rest will flow easily.

For a little extra info on what I'm after (you can stop reading now if you don't care about the details of what I'm trying to do), my computer is hooked to a wall mounted tv in my living room. This has worked for me for a while, however due to a new and improved layout of the room, the computer functions much more as a media center than something you'd do work at. As such, I'm looking to create a nice 10ft User Interface for myself, one that will open my different media programs, and ideally one that will respond to a gaming controller or a remote control. Originally I was just going to use someone else's skin, or at least frankenstein some skins together to do what I want, but most everything I've been finding has been either nice minimalist stuff that's basically just a clock and some shortcuts, or something so overcomplicated I don't know how anyone could make sense of it. Both things, despite clearly being well crafted, have been of little help to me.

I've already been advised that this https://forum.rainmeter.net/viewtopic.php?f=127&t=18849 plugin might be able to help me out on the remote control front, as mine appears to just clone certain keyboard strokes. Since this is questionable, anyone who can say with certainty whether or not this will work will also be very appreciated. I'm fundamentally lazy, and would love to be saved all this hassle if what I want isn't even possible.

The UI I'm looking for would actually be relatively simple. All I want is four options:
-Power, which would just be a small drop down menu of shut down, restart, etc
-Steam
-Kodi, which already functions with my remote
-And Musicbee, which I'm working on making compatible with the remote as well

In my brain noggin, I'm thinking it would be a toggleable skin. Press a button, and four options come up. Navigate to one of the options with the arrow keys on the remote and press okay. The skin closes, and opens the program in question (or turns off the computer). From what I can tell, the arrow buttons on my remote simply perform like the keyboard's arrow keys, and the OK button just mimics the Enter key. I think my biggest obstacle is maintaining focus on a particular option without having the mouse hovering over it.

I went into as much detail as I could think of in the hopes that it'll help me get to where I need to go faster. Thanks so much in advance, and really any help is appreciated, whether it's to a nice easy tutorial, or if someone has in fact already done all of this and I just haven't been able to find it.

Again, thanks in advance for any help
User avatar
balala
Rainmeter Sage
Posts: 8308
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: Looking to be pointed in the right direction

balala » March 11th, 2019, 2:48 pm

Ferbstorm wrote:
March 11th, 2019, 4:12 am
What I'm hoping for is that there's a sort of basic tutorial that someone would recommend. More specifically, something that goes from the beginning to the end of a simple skin creation, as what I'm struggling with the most is understanding how anything interacts with anything else.
The Getting Started and the upcoming sections in the help, are good points to start with, I think. Also you can come back anytime here on the forum to get specific help anytime you need it or have certain question.
Ferbstorm wrote:
March 11th, 2019, 4:12 am
I'm hoping that once the basics start to click, then the rest will flow easily.
For sure. The more experience are you accumulating, the easier the coding will become. Probably a very good first step is to dissecting a code. The codes posted into the help pages of each meter and measure are probably the best ones to start with. For example to get used how does work a Bar meter, get the sample code posted here and start experimenting with it. Change anything there and continuously read the documentation. You'll get the idea, many people did get it before. After a while you'll see it's getting easier and easier.
Ferbstorm wrote:
March 11th, 2019, 4:12 am
I've already been advised that this https://forum.rainmeter.net/viewtopic.php?f=127&t=18849 plugin might be able to help me out on the remote control front, as mine appears to just clone certain keyboard strokes. Since this is questionable, anyone who can say with certainty whether or not this will work will also be very appreciated. I'm fundamentally lazy, and would love to be saved all this hassle if what I want isn't even possible.
This probably can work if you write a good skin. It's definitely possible. You probably want some assistance with this. No one here on this forum will write the skin for you (the reason), but we are happy to help you to write it.
What would you like to start with?
Yincognito
Posts: 652
Joined: February 27th, 2015, 2:38 pm

Re: Looking to be pointed in the right direction

Yincognito » March 11th, 2019, 11:07 pm

Ferbstorm wrote:
March 11th, 2019, 4:12 am
The UI I'm looking for would actually be relatively simple. All I want is four options:
-Power, which would just be a small drop down menu of shut down, restart, etc
-Steam
-Kodi, which already functions with my remote
-And Musicbee, which I'm working on making compatible with the remote as well
If this is what you want, a "launcher" skin would do the trick. Check out to see a basic example of such a thing here.
Ferbstorm wrote:
March 11th, 2019, 4:12 am
From what I can tell, the arrow buttons on my remote simply perform like the keyboard's arrow keys, and the OK button just mimics the Enter key. I think my biggest obstacle is maintaining focus on a particular option without having the mouse hovering over it.
I used to use a program called Promixis Girder back in the day, and it was getting input from remotes (had lots of plugins made by users for almost every remote out there) and you could assign "commands" to whatever you did with the remote, by building an XML like "command interpreter". You could add conditions and all kinds of stuff to it, even control things by speaking to it, it was great. Something like winlirc, but much nicer and easy to use. The said software is sadly dead nowadays, however.

That being said, you'd need your remote software to mimic mouse movement and/or clicks - and such software exist, maybe even the ones that you're using (after all, if they seem to mimic the keyboard and the Enter key, why not the mouse?). Once you can do this, it becomes very easy to react to those movements and/or clicks in a Rainmeter skin. Bottom line, you'd need a suitable "interface" between your remote and Rainmeter.

Since you mentioned Kodi, would this skin on DeviantArt be something you'd aim, maybe? It seems to work with XBMC/Kodi, apparently. Just trying to get you a starting point in this...
Ferbstorm
Posts: 36
Joined: March 9th, 2019, 12:50 am

Re: Looking to be pointed in the right direction

Ferbstorm » March 14th, 2019, 6:38 pm

Okay, well I went ahead and decided that the best way for me to get really familiar with this is to just build something from scratch, then once I've got a decent idea of what I'm doing I can go ahead and frankenstein and edit whatever I need to make what I want work. So what I did is I sketched out on paper a sort of layout of a few different things that I think would be nice. But I ran into a barrier. What I sketched out was I wanted to have a volume control bar that ran at a diagonal (I'm gonna use it as a divider of sorts in the corner of the screen). But what I can't figure out is how to have Bar Meter run at an angle. Any pointers here?
User avatar
balala
Rainmeter Sage
Posts: 8308
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: Looking to be pointed in the right direction

balala » March 14th, 2019, 6:50 pm

Ferbstorm wrote:
March 14th, 2019, 6:38 pm
What I sketched out was I wanted to have a volume control bar that ran at a diagonal (I'm gonna use it as a divider of sorts in the corner of the screen). But what I can't figure out is how to have Bar Meter run at an angle. Any pointers here?
I'd use a vertical Bar meter and would either rotate, either skew it, with a TransformationMatrix option, added to the Bar meter (note that skewing it is a little bit easier than rotating it, but nor the rotation isn't impossible either).
For specific help, please post the code you have so far.
Ferbstorm
Posts: 36
Joined: March 9th, 2019, 12:50 am

Re: Looking to be pointed in the right direction

Ferbstorm » March 14th, 2019, 7:02 pm

Okay. So this one is not my code, this is something that I downloaded and have been looking at to have an example to look at as I read the help pages. I don't know how you guys are about credit and whatnot, so if anyone cares I'd be happy to go find a link to the person who actually did the work.

But this is the code. So far I've managed to lengthen the whole thing. It used to just have a length of 100.
[Rainmeter]
Update=1000
Backgroundmode=1
MouseActionCursor=0

[Style]
Meter=string
Fontface=#Font#
Fontcolor=237,237,237,100
Fontsize=10
AntiAlias=1
StringAlign=Centercenter

[MVolume]
Measure=Plugin
Plugin=Win7AudioPlugin

[MVolumeP]
Measure=Calc
Formula=MVolume

[BG]
meter=image
solidcolor=40,40,40,220
W=26
H=200
MouseScrollUpAction=[!CommandMeasure "MVolume" "ChangeVolume 5"] [!update] [!redraw]
MouseScrollDownAction=[!CommandMeasure "MVolume" "ChangeVolume -5"] [!update] [!redraw]
rightmouseupaction=[!deactivateconfig "Sevenbark 3.0\Volume" "Volume.ini"] [!Redraw] [!update]

[VolumeBarImage]
Measurename=MVolume
Meter=bar
barcolor=237,237,237,100

W=26
H=200
MouseScrollUpAction=[!CommandMeasure "MVolume" "ChangeVolume 5"] [!update] [!redraw]
MouseScrollDownAction=[!CommandMeasure "MVolume" "ChangeVolume -5"] [!update] [!redraw]

[Volumepercent]
Meter=string
meterstyle=style
measurename=mVolumep
Text=%1
X=13
Y=100
Y=100

[HSUP]
Meter=String
W=26
H=26
Mouseoveraction=[!showmeter UP] [!update] [!redraw]
Mouseleaveaction=[!hidemeter UP] [!update] [!redraw]

[HSDown]
Meter=String
W=26
H=26
Y=174
Mouseoveraction=[!showmeter down] [!update] [!redraw]
Mouseleaveaction=[!hidemeter down] [!update] [!redraw]

[UP]
Meter=image
imagename=#@#images\button.png
imagetint=237,237,237,100
W=26
H=26
LeftmouseUpAction=[!CommandMeasure "MVolume" "ChangeVolume 10"] [!update] [!redraw]
MouseScrollUpAction=[!CommandMeasure "MVolume" "ChangeVolume 5"] [!update] [!redraw]
MouseScrollDownAction=[!CommandMeasure "MVolume" "ChangeVolume -5"] [!update] [!redraw]
ImageRotate=90
hidden=1

[down]
Meter=image
imagename=#@#images\button.png
imagetint=237,237,237,100
W=26
H=26
Y=174
LeftmouseUpAction=[!CommandMeasure "MVolume" "ChangeVolume -10"] [!update] [!redraw]
MouseScrollUpAction=[!CommandMeasure "MVolume" "ChangeVolume 5"] [!update] [!redraw]
MouseScrollDownAction=[!CommandMeasure "MVolume" "ChangeVolume -5"] [!update] [!redraw]
ImageRotate=270
hidden=1

[Icon]
Meter=image
imagename=#@#images\volume.png
Y=200
imagetint=40,40,40,220
Also jesus you're telling me I have to relearn how the hell to use matrices? Come on man I thought when I left high school I could forget about all that
Ferbstorm
Posts: 36
Joined: March 9th, 2019, 12:50 am

Re: Looking to be pointed in the right direction

Ferbstorm » March 14th, 2019, 7:12 pm

I suppose an important thing to mention is that I won't be keeping the buttons for volume change. I'll never use them and frankly, trying to translate those with the meter sounds like a real pain
Ferbstorm
Posts: 36
Joined: March 9th, 2019, 12:50 am

Re: Looking to be pointed in the right direction

Ferbstorm » March 14th, 2019, 7:40 pm

Posted with a question then answered it myself
User avatar
balala
Rainmeter Sage
Posts: 8308
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: Looking to be pointed in the right direction

balala » March 14th, 2019, 8:31 pm

Ferbstorm wrote:
March 14th, 2019, 7:40 pm
Posted with a question then answered it myself
Not sure what do you mean by this.
However, the following code will skew the Bar meter (and its background) with an angle which can be set as the Angle variable in the [Variables] section. Change it to any value you'd like.

Code: Select all

[Rainmeter]
Update=1000
Backgroundmode=1
MouseActionCursor=0
SkinWidth=(26+200*Sin(Rad(#Angle#)))
 
[Variables]
Angle=15

[Style]
Meter=string
Fontface=#Font#
Fontcolor=237,237,237,100
Fontsize=10
AntiAlias=1
StringAlign=Centercenter

[MVolume]
Measure=Plugin
Plugin=Win7AudioPlugin

[MVolumeP]
Measure=Calc
Formula=MVolume

[BG]
meter=image
solidcolor=40,40,40,220
W=26
H=200
MouseScrollUpAction=[!CommandMeasure "MVolume" "ChangeVolume 5"] [!update] [!redraw]
MouseScrollDownAction=[!CommandMeasure "MVolume" "ChangeVolume -5"] [!update] [!redraw]
rightmouseupaction=[!deactivateconfig "Sevenbark 3.0\Volume" "Volume.ini"] [!Redraw] [!update]
TransformationMatrix=1;0;(-Sin(Rad(#Angle#)));1;([BG:H]*Sin(Rad(#Angle#)));0
DynamicVariables=1

[VolumeBarImage]
Measurename=MVolume
Meter=bar
barcolor=237,237,237,100
W=26
H=200
MouseScrollUpAction=[!CommandMeasure "MVolume" "ChangeVolume 5"] [!update] [!redraw]
MouseScrollDownAction=[!CommandMeasure "MVolume" "ChangeVolume -5"] [!update] [!redraw]
TransformationMatrix=1;0;(-Sin(Rad(#Angle#)));1;([BG:H]*Sin(Rad(#Angle#)));0
DynamicVariables=1

[Volumepercent]
Meter=string
meterstyle=style
measurename=mVolumep
Text=%1%
X=(10+(([BG:H]-[#CURRENTSECTION#:Y])*Sin(Rad(#Angle#))))
Y=100
DynamicVariables=1
StringAlign=Center

[HSUP]
Meter=String 
W=26
H=26
Mouseoveraction=[!showmeter UP] [!update] [!redraw]
Mouseleaveaction=[!hidemeter UP] [!update] [!redraw]

[HSDown]
Meter=String 
W=26
H=26
Y=174
Mouseoveraction=[!showmeter down] [!update] [!redraw]
Mouseleaveaction=[!hidemeter down] [!update] [!redraw]

[UP]
Meter=image
imagename=#@#images\button.png
imagetint=237,237,237,100
W=26
H=26
LeftmouseUpAction=[!CommandMeasure "MVolume" "ChangeVolume 10"] [!update] [!redraw]
MouseScrollUpAction=[!CommandMeasure "MVolume" "ChangeVolume 5"] [!update] [!redraw]
MouseScrollDownAction=[!CommandMeasure "MVolume" "ChangeVolume -5"] [!update] [!redraw]
ImageRotate=90
hidden=1

[down]
Meter=image
imagename=#@#images\button.png
imagetint=237,237,237,100
W=26
H=26
Y=174
LeftmouseUpAction=[!CommandMeasure "MVolume" "ChangeVolume -10"] [!update] [!redraw]
MouseScrollUpAction=[!CommandMeasure "MVolume" "ChangeVolume 5"] [!update] [!redraw]
MouseScrollDownAction=[!CommandMeasure "MVolume" "ChangeVolume -5"] [!update] [!redraw]
ImageRotate=270
hidden=1

[Icon]
Meter=image
imagename=#@#images\volume.png
Y=200
imagetint=40,40,40,220
If you want to rotate those elements, instead of skewing them, this is also possible, with a somehow similar option (TransformationMatrix). Let me know if this is what you want.

One comment related to the original code: it is completely useless to use a [!update] and a [!redraw] bang together. When the skin is updated (with the [!update] bang) a redrawn is automatically made, so [!redraw] is useless. I recommend you to remove the [!redraw]s. They are used into different mouse action options of such meters as [HSUP], [HSDown], [UP] or [down].
Ferbstorm
Posts: 36
Joined: March 9th, 2019, 12:50 am

Re: Looking to be pointed in the right direction

Ferbstorm » March 14th, 2019, 9:14 pm

So I've been screwing with this as well, and while yours is much more elegant than mine is, we've both got the same problem going. I want the mouse to be detected over the transformed bar so I can hover over it and change the volume with the mouse wheel. And I'm having the hardest time trying to figure out how to make that happen. I could of course just have the whole background of the image recognize the mouse, but that feels lazy to me. Here's the code I've got worked up so far while I try and go dissect how you made yours so elegant.

For Extra context, this is going to be the top left of my screen, and after this bit I'm going to try and have a power button in the triangle made by the volume bar that opens a drop down menu for shut down, restart, and also open taskmanager if possible. I'll be fine if the mouse wheel operates the volume when in the triangle, but I want to avoid having it operate below the volume bar

P.S. The wonky colors are just so I can clearly visualize things. The red background is going to be transparent for the finished product
[Rainmeter]
Update=1000
Backgroundmode=1
MouseActionCursor=0

[Style]
Meter=string
Fontface=#Font#
Fontcolor=237,237,237,100
Fontsize=10
AntiAlias=1
StringAlign=Centercenter

[MVolume]
Measure=Plugin
Plugin=Win7AudioPlugin

[MVolumeP]
Measure=Calc
Formula=MVolume

[BG]
meter=image
solidcolor=240,40,40,220
W=137
H=380

[VolumeBarImage1]
meter=image
solidcolor=40,40,40,220
W=26
H=400
MouseScrollUpAction=[!CommandMeasure "MVolume" "ChangeVolume 5"] [!update] [!redraw]
MouseScrollDownAction=[!CommandMeasure "MVolume" "ChangeVolume -5"] [!update] [!redraw]
TransformationMatrix=0.93969;.34202;-.34202;.93969;113;-13

[VolumeBarImage2]
Measurename=MVolume
Meter=bar
barcolor=7,237,2,100

W=26
H=400
MouseScrollUpAction=[!CommandMeasure "MVolume" "ChangeVolume 5"] [!update] [!redraw]
MouseScrollDownAction=[!CommandMeasure "MVolume" "ChangeVolume -5"] [!update] [!redraw]
TransformationMatrix=0.93969;.34202;-.34202;.93969;113;-13

[Volumepercent]
Meter=string
meterstyle=style
measurename=mVolumep
Text=%1
X=13
Y=200
TransformationMatrix=0.93969;.34202;-.34202;.93969;113;-13