It is currently December 6th, 2022, 2:10 pm

## Best way to dynamically create grids?

Get help with creating, editing & fixing problems with skins
Hylia
Posts: 5
Joined: September 20th, 2022, 12:57 am

### Best way to dynamically create grids?

I know the title is confusing, but I couldn't think of a good way to sum up what I'm asking without a little bit of context. Basically, I'm working on a skin that will be a grid of squares. Ideally I would like to have the user define like, say, how many rows and columns the grid has. So the user could define that they want to have a a grid five rows wide and seven rows tall, and the skin would display correctly the squares in that configuration. I've already setup the meters in the code as a style so that they know what to do when placed next to each other, but I'm having trouble figuring out how to best get them to know when they should go down to the next line. Currently I'm thinking that this could be achieved by defining the row and column a square belongs to with a group, and writing a command measure to calculate where it would fall, which would look something like

Code: Select all

``````
[MeasureRow]
Measure =	Calc
Formula	=	(#CURRENTSECTION# + (#Gap# * #CURRENTSECTION#))

[01]
Meter = Shape
MeterStyle = StyleKey
Row = Blank
Column = Blank
Group = Blank
``````
Now I think something along these lines should work in theory, but I'm having trouble wrapping my head around the exact way to write it out. I know that groups don't exactly work like this and neither do calc measures. Furthermore, as I wrote it out above, it runs into the problem of already needing to be assigned a group in order to figure out what group it goes into, but I'm hoping this is something y'all will have some wisdom on how to go about.
SilverAzide
Rainmeter Sage
Posts: 2178
Joined: March 23rd, 2015, 5:26 pm

### Re: Best way to dynamically create grids?

The modulus and division operators are your friends. So is Lua.

I'm just spitballing here, but let's say you have a total of 12 squares (numbered 0 to 11). The grid (rows x columns) can be 1x12, 2x6, 3x4, 4x3, etc.

Assume the user wants a 2x6 grid (2 rows of 6 columns each). So to calculate the row and column for a given square, the modulus/divisor is the number of columns (i.e., 6):

col = (square % number_of_columns)
row = trunc(square / number_of_columns)

So square 0 is (0,0), square 1 is (1, 0), ... to square 5 (5, 0). Square 6 is (0, 1), 7 is (1, 1), ... to square 11 (5, 1).

Multiply the column and row by the width and height (respectively) of each square (in pixels) to calculate to the top left corner of where they go.

Does that work?
Hylia
Posts: 5
Joined: September 20th, 2022, 12:57 am

### Re: Best way to dynamically create grids?

Argh, I was afraid that I would need to dip my toes into lua to achieve this. I knew this idea was brushing up against the limitations of rainmeter script itself, but I was hoping I would be able to keep it within its confines. I'm still very much a novice at rainmeter, having learned what I have so far dissecting other skins to edit them to my liking, and was hoping to avoid learning lua while refining my knowledge of rainmeter simultaneously, but such is life.

As for you example, that looks pretty close to having the functionality that I'm looking for, except for two caveats. I was hoping that the skin would be able to figure out how many squares the grid would have, instead of only being divisible by an arbitrary number. So if I set it to be 2x3, it would be a grid of six, but setting it to 5x5 would result in a 25 square grid, etc. Maybe that's doable by setting the total number of squares as a separate variable that the row and column variables then work with?

The second caveat is definitely where I should have known lua would be needed in hindsight, as I wanted each row and column to be independently editable. Like, if I wanted column 3 to have 5 keys instead of 7, or if I wanted row 2 to curve upwards, etc. Just to clarify the purpose of wanting to do it this way, I'm trying to make a skin that can keep track of keyboard shortcuts assigned to a keypad. I was making it just in the shape of my own keypad with the intention of releasing it for others to use, but then I realized that it would only be useful to those who happened to have the exact same hardware as myself, when surely any keypad user would appreciate such a tool. Instead of making a distinct skin for each possible keypad shape, I'd like to let the user customize it to fit whatever device they use.
Active Colors
Moderator
Posts: 1199
Joined: February 16th, 2012, 3:32 am
Location: Berlin, Germany

### Re: Best way to dynamically create grids?

Can you check this out and see if it applies to your case?
https://forum.rainmeter.net/viewtopic.php?t=22758&start=10#p120134
Hylia
Posts: 5
Joined: September 20th, 2022, 12:57 am

### Re: Best way to dynamically create grids?

Active Colors wrote: November 12th, 2022, 10:25 pm Can you check this out and see if it applies to your case?
https://forum.rainmeter.net/viewtopic.php?t=22758&start=10#p120134
I feel like there is a good chance that this is helpful but my small lizard brain is having trouble deciphering what is going on in that thread. Could you please elaborate on what I should be looking at and how it applies?
eclectic-tech
Rainmeter Sage
Posts: 4885
Joined: April 12th, 2012, 9:40 pm
Location: Cedar Point, Ohio, USA

### Re: Best way to dynamically create grids?

Hylia wrote: November 15th, 2022, 12:48 am I feel like there is a good chance that this is helpful but my small lizard brain is having trouble deciphering what is going on in that thread. Could you please elaborate on what I should be looking at and how it applies?
Okay... I would hope you understood some of what is suggested and will provide a sample skin that uses FreeRaiders basic lua code.

His code will define the image meters in the @Resources\construction\core.inc file and the actions to each of the buttons in the @Resources\settings\timetable.inc file.

I added options as variables in the skin.ini to set the number of columns and rows and added the required meters for a grid up to 4 columns x 4 rows.
I also added the additional buttons defined actions in the timetable.inc file.

Hidden conditional expressions are used to hide undefined blocks. To add more rows will require coding additional meters to each set of 4 column meters and to add more columns would require another set of column meters.
gridtest.gif
Install this 'GRIDTEST' skin package and change the variables for rows and columns in the skin.ini file, refresh the skin to see the new grid.
There are no string meters to define the grid squares, the core.inc file is the 'style' for basic button image, but you would need to add string meters or actual images meters to the skin.ini code to change the appearance.

First, let's see if this grid setup is working for you. Feel free to come back with any questions.
You do not have the required permissions to view the files attached to this post.