It is currently March 28th, 2024, 8:56 pm

Need Help with Mouse control on Shapes.

Get help with creating, editing & fixing problems with skins
User avatar
KryptOnyx
Posts: 19
Joined: July 28th, 2021, 10:18 am

Need Help with Mouse control on Shapes.

Post by KryptOnyx »

Hi Everyone, this is my first attempt at a Launcher Skin, and to make it flexible for Users, I want to make a Configurator variant so people can arrange the Tiles in their own pattern/sequence.
It should be simple...a stack of Tile (Shape Meters) are sitting off-skin at -100,-100 and when the Left Mouse is clicked on the Canvas (a Screen sized Rectangle Shape), the first Tile is placed at that location.
A Counter is then increased so the next Tile will be moved if Mouse Clicked on another spot.
Clicking a Tile reduces the Counter, because it was increased when each Tile is placed, and that Tile number is moved back to the Stack.
Only it's not happening smoothly.
Any suggestions would be appreciated.
Here is the Code. There are only 6 Tiles so more LMB clicks may crash Rainmeter...

Code: Select all

[Rainmeter]
Update=100
AccurateText=1
DynamicWindowSize=1
; Use Current Monitor for Skin Calcs
OnRefreshAction=[!AutoSelectScreen "1" "#CURRENTCONFIG#"]
; ====== ====== ====== ====== ====== ====== ====== ====== ====== ====== ====== ======
[Variables]
; Hex Degree Constants
SIN30COS60=0.5
COS30SIN60=0.8660254
; --==>> Hex Variables <<==--
; Grid Hex Point Radius : Center-to-Point distance.
Hex_Radius=40
; Hex Tile Gap : The space between Hex BORDERS.
Tile_Gap=5
; Hex Tile Outline Thickness : The Thickness of the Hex BORDER.
Tile_Border_Width=3
; Init Mouse coords.
MouseX=0
MouseY=0
; --==>> Counters <<==--
; Sequence is to track how many Tiles are used.
Sequence=0
; --==>> Hex Grid Point Calcs <<==--
; Right Hex Point = Hex_Radius and negative for Left Point
; Hex Grid Point X Offset for Upper Right, Lower Right, and negative for Upper Left, Lower Left
[Hex_Point_X]
Measure=Calc
Formula=(#SIN30COS60# * #Hex_Radius#)

; Hex Grid Point Y Offset for Lower Left, Lower Right, and negative for Upper Left, Upper Right
[Hex_Point_Y]
Measure=Calc
Formula=(#COS30SIN60# * #Hex_Radius#)

; Because Grid Coords are X,Y they are essentially a 1x1 Square Grid.
; Hex Grids expressed as XY Grids are NOT square...they are Rectangular.
; Grid Cell Radius : The X width of the Grid Cells.
; Grid Cell Height uses Hex_Point_Y.
[Grid_Cell_Radius]
Measure=Calc
Formula=(#COS30SIN60# * [Hex_Point_Y])
DynamicVariables=1

; Tile Radius : The Radius that accommodates the Gap between Tile Borders.
[Tile_Radius]
Measure=Calc
Formula=(#Hex_Radius#-((#Tile_Gap#/2)/#SIN30COS60#))

; Tile Point X : Offset from Hex Center for Upper Right, Lower Right, and negative for Upper Left, Lower Left
[Tile_Point_X]
Measure=Calc
Formula=(#SIN30COS60# * [Tile_Radius])
DynamicVariables=1

; Tile Point Y : Offset from Hex Center for Lower Left, Lower Right, and negative for Upper Left, Upper Right
[Tile_Point_Y]
Measure=Calc
Formula=(#COS30SIN60# * [Tile_Radius])
DynamicVariables=1

; --==>> Grid Cells Calcs for Background<<==--
[MaxCell_X]
Measure=Calc
Formula=(Floor(#WORKAREAWIDTH#/Floor(((#Hex_Radius#*2)+([Hex_Point_X] * 2))/2))-2)
DynamicVariables=1

[MaxCell_Y]
Measure=Calc
Formula=(Floor(#WORKAREAHEIGHT#/([Hex_Point_Y] * 2))-1)
DynamicVariables=1

; Calc Grid Cell X and Grid Cell Y based on Mouse click.
[Mouse_Cell_X]
Measure=Calc
Formula=(Floor(#MouseX#/([Grid_Cell_Radius] * 2)))
DynamicVariables=1

[Mouse_Cell_Y]
Measure=Calc
Formula=(Floor((#MouseY#-([Hex_Point_Y]*([Mouse_Cell_X]%2)))/([Hex_Point_Y] * 2)))
DynamicVariables=1

[Tile_Center_X]
Measure=Calc
Formula=(([Mouse_Cell_X] * [Grid_Cell_Radius] * 2) + #Hex_Radius#+2)
DynamicVariables=1

[Tile_Center_Y]
Measure=Calc
Formula=(([Mouse_Cell_Y] * [Hex_Point_Y] * 2) + [Hex_Point_Y] + ([Hex_Point_Y] * ([Mouse_Cell_X] % 2))+2)
DynamicVariables=1

; Set a Shape to be the Background.
[Background_Canvas]
Meter=Shape
Shape=Rectangle 2,2,(([MaxCell_X] * [Grid_Cell_Radius] * 2) + (#Hex_Radius# * 2)+1),(([MaxCell_Y] * [Hex_Point_Y] * 2) + ([Hex_Point_Y] * 2)+1) | StrokeWidth 2 | Stroke Color 224,224,224,255 | Fill Color 200,200,200,128
LeftMouseUpAction=[!SetVariable MouseX "$MouseX$"][!SetVariable MouseY "$MouseY$"][UpdateMeasure Mouse_Cell_X][UpdateMeasure Mouse_Cell_Y][!SetOption Hex_Tile_#Sequence# X [Tile_Center_X]][!SetOption Hex_Tile_#Sequence# Y [Tile_Center_Y]][!UpdateMeter *][!Redraw][!SetVariable Sequence (#Sequence#+1)]
DynamicVariables=1

[HEX_COMMON]
Shape=Path HexTile | StrokeWidth #Tile_Border_Width# | Stroke Color 224,224,224,255 | Fill Color 100,120,220,255 | StrokeLineJoin Round
HexTile=[Tile_Point_X],-[Tile_Point_Y] | LineTo [Tile_Radius],0 | LineTo [Tile_Point_X],[Tile_Point_Y] | LineTo -[Tile_Point_X],[Tile_Point_Y] | LineTo (-[Tile_Radius]),0 | LineTo -[Tile_Point_X],-[Tile_Point_Y] | ClosePath 1
LeftMouseUpAction=[!SetVariable Sequence (#Sequence#-1)][!SetOption Hex_Tile_#Sequence# X -100][!SetOption Hex_Tile_#Sequence# Y -100][!Redraw]
DynamicVariables=1

[HEX_LABEL]
FontColor=0,0,0,255
StringAlign=CenterCenter
StringStyle=Bold
StringEffect=Border
FontEffectColor=200,200,0,255
ClipString=1
ClipStringW=48
ClipStringH=48

[Hex_Tile_0]
Meter=Shape
X=-100
Y=-100
MeterStyle=HEX_COMMON

[Hex_Tile_1]
Meter=Shape
X=-100
Y=-100
MeterStyle=HEX_COMMON

[Hex_Tile_2]
Meter=Shape
X=-100
Y=-100
MeterStyle=HEX_COMMON

[Hex_Tile_3]
Meter=Shape
X=-100
Y=-100
MeterStyle=HEX_COMMON

[Hex_Tile_4]
Meter=Shape
X=-100
Y=-100
MeterStyle=HEX_COMMON

[Hex_Tile_5]
Meter=Shape
X=-100
Y=-100
MeterStyle=HEX_COMMON

[Hex_Label_0]
Meter=String
X=[Hex_Tile_0:X]
Y=[Hex_Tile_0:Y]
MeterStyle=HEX_LABEL
Text=0
DynamicVariables=1

[Hex_Label_1]
Meter=String
X=[Hex_Tile_1:X]
Y=[Hex_Tile_1:Y]
MeterStyle=HEX_LABEL
Text=1
DynamicVariables=1

[Hex_Label_2]
Meter=String
X=[Hex_Tile_2:X]
Y=[Hex_Tile_2:Y]
MeterStyle=HEX_LABEL
Text=2
DynamicVariables=1

[Hex_Label_3]
Meter=String
X=[Hex_Tile_3:X]
Y=[Hex_Tile_3:Y]
MeterStyle=HEX_LABEL
Text=3
DynamicVariables=1

[Hex_Label_4]
Meter=String
X=[Hex_Tile_4:X]
Y=[Hex_Tile_4:Y]
MeterStyle=HEX_LABEL
Text=4
DynamicVariables=1

[Hex_Label_5]
Meter=String
X=[Hex_Tile_5:X]
Y=[Hex_Tile_5:Y]
MeterStyle=HEX_LABEL
Text=5
DynamicVariables=1

Everything happens for a Reason, and could Not happen any other way.
User avatar
death.crafter
Rainmeter Sage
Posts: 1399
Joined: April 24th, 2021, 8:13 pm

Re: Need Help with Mouse control on Shapes.

Post by death.crafter »

KryptOnyx wrote: August 9th, 2021, 9:27 am Hi Everyone, this is my first attempt at a Launcher Skin, and to make it flexible for Users, I want to make a Configurator variant so people can arrange the Tiles in their own pattern/sequence.
It should be simple...a stack of Tile (Shape Meters) are sitting off-skin at -100,-100 and when the Left Mouse is clicked on the Canvas (a Screen sized Rectangle Shape), the first Tile is placed at that location.
A Counter is then increased so the next Tile will be moved if Mouse Clicked on another spot.
Clicking a Tile reduces the Counter, because it was increased when each Tile is placed, and that Tile number is moved back to the Stack.
Only it's not happening smoothly.
Any suggestions would be appreciated.
Here is the Code. There are only 6 Tiles so more LMB clicks may crash Rainmeter...
You probably need something like this:

Code: Select all

[Rainmeter]
Update=-1
AccurateText=1

[Variables]
Radius=30
Width=3
StartAngle=-90
Sequence=0

[Hex]
Shape=Path MyPath | StrokeWidth #Width# | StrokeColor 255,0,0
MyPath=(#Radius#+#Width#/2+#Radius#*cos(rad(#StartAngle#+0))),(#Radius#+#Width#/2+#Radius#*sin(rad(#StartAngle#+0))) | LineTo (#Radius#+#Width#/2+#Radius#*cos(rad(#StartAngle#+60))),(#Radius#+#Width#/2+#Radius#*sin(rad(#StartAngle#+60))) | LineTo (#Radius#+#Width#/2+#Radius#*cos(rad(#StartAngle#+120))),(#Radius#+#Width#/2+#Radius#*sin(rad(#StartAngle#+120))) | LineTo (#Radius#+#Width#/2+#Radius#*cos(rad(#StartAngle#+180))),(#Radius#+#Width#/2+#Radius#*sin(rad(#StartAngle#+180))) | LineTo (#Radius#+#Width#/2+#Radius#*cos(rad(#StartAngle#+240))),(#Radius#+#Width#/2+#Radius#*sin(rad(#StartAngle#+240))) | LineTo (#Radius#+#Width#/2+#Radius#*cos(rad(#StartAngle#+300))),(#Radius#+#Width#/2+#Radius#*sin(rad(#StartAngle#+300))) | ClosePath 1
Hidden=1
DynamicVariables=1

[Disabler]
Measure=Calc
IfCondition=#Sequence#=6
IfTrueAction=[!DisableMouseAction Shape "LeftMouseUpAction"]
DynamicVariables=1

[Shape]
Meter=Shape
Shape=Rectangle 0,0,600,500 | Fill Color 255,255,255,100 | StrokeWidth 0
LeftMouseUpAction=[!SetOption "S#Sequence#" X "(Clamp($MouseX$-#Radius#, -#Width#, [#CURRENTSECTION#:W]-(2*#Radius#)))"][!SetOption "S#Sequence#" Y "(Clamp($MouseY$-#Radius#, 0, [#CURRENTSECTION#:H]-(2*#Radius#+#Width#)))"][!SetOption "S#Sequence#" Hidden 0][!UpdateMeter "S#Sequence#"][!Redraw][!SetVariable Sequence ([#Sequence]+1)][!UpdateMeasure Disabler][!UpdateMeter #CURRENTSECTION#]
DynamicVariables=1

[S0]
Meter=Shape
MeterStyle=Hex

[S1]
Meter=Shape
MeterStyle=Hex

[S2]
Meter=Shape
MeterStyle=Hex

[S3]
Meter=Shape
MeterStyle=Hex

[S4]
Meter=Shape
MeterStyle=Hex

[S5]
Meter=Shape
MeterStyle=Hex
from the Realm of Death
User avatar
Yincognito
Rainmeter Sage
Posts: 7027
Joined: February 27th, 2015, 2:38 pm
Location: Terra Yincognita

Re: Need Help with Mouse control on Shapes.

Post by Yincognito »

death.crafter wrote: August 9th, 2021, 1:04 pmYou probably need something like this [...]
Nice one, but I think he wants them "toggleable", i.e. you click on an empty space and you're less than 6 with the counter, draw the hex at mouse cursor and increment the counter; you click on an already drawn hex, "erase" that hex and decrement the counter.
Profiles: Rainmeter ProfileDeviantArt ProfileSuites: MYiniMeterSkins: Earth
User avatar
death.crafter
Rainmeter Sage
Posts: 1399
Joined: April 24th, 2021, 8:13 pm

Re: Need Help with Mouse control on Shapes.

Post by death.crafter »

Yincognito wrote: August 9th, 2021, 5:57 pm Nice one, but I think he wants them "toggleable", i.e. you click on an empty space and you're less than 6 with the counter, draw the hex at mouse cursor and increment the counter; you click on an already drawn hex, "erase" that hex and decrement the counter.
It's a lot of work :rolmfao:

I mean he just wanted it to be smooth. I think he can figure the rest out. I am always here anyway.
from the Realm of Death
User avatar
Yincognito
Rainmeter Sage
Posts: 7027
Joined: February 27th, 2015, 2:38 pm
Location: Terra Yincognita

Re: Need Help with Mouse control on Shapes.

Post by Yincognito »

death.crafter wrote: August 9th, 2021, 8:27 pm It's a lot of work :rolmfao:

I mean he just wanted it to be smooth. I think he can figure the rest out. I am always here anyway.
Ah, ok. :D I'm all for figuring things out, I just feel the need to toggle those little hexes around like crazy... 8-)
Profiles: Rainmeter ProfileDeviantArt ProfileSuites: MYiniMeterSkins: Earth
Judian81
Posts: 180
Joined: May 6th, 2021, 2:57 pm

Re: Need Help with Mouse control on Shapes.

Post by Judian81 »

KryptOnyx wrote: August 9th, 2021, 9:27 am

Code: Select all

SIN30COS60=0.5
COS30SIN60=0.8660254

why are thouse two needed for. no i am serious i want to learn some.
User avatar
death.crafter
Rainmeter Sage
Posts: 1399
Joined: April 24th, 2021, 8:13 pm

Re: Need Help with Mouse control on Shapes.

Post by death.crafter »

Judian81 wrote: August 9th, 2021, 9:18 pm why are thouse two needed for. no i am serious i want to learn some.
Those are values of the variable names:

SIN(60)=COS(30)=0.8660254
SIN(30)=COS(60)=0.5

He's probably multiplying them somewhere, and didn.t know about sin(), cos() function in Rainmeter.)
from the Realm of Death
User avatar
Yincognito
Rainmeter Sage
Posts: 7027
Joined: February 27th, 2015, 2:38 pm
Location: Terra Yincognita

Re: Need Help with Mouse control on Shapes.

Post by Yincognito »

death.crafter wrote: August 9th, 2021, 10:15 pm Those are values of the variable names:

SIN(60)=COS(30)=0.8660254
SIN(30)=COS(60)=0.5

He's probably multiplying them somewhere, and didn.t know about sin(), cos() function in Rainmeter.)
Actually, he's trying to make a hexagonal lattice, where hex tiles "touch" each other (with and adjustable gap in between). The hexes are in fact NOT to be placed at mouse position, but rather at the corners of the gray rhombus / primitive cell from the right bottom figure from the link above, obviously extended / repeated to the whole screen work area.

Normally, it isn't that hard to figure out where the hexes centers would be, since that rhombus has 120,60,120,60 degrees angles from the top clockwise, and a side of (r*2+gap), where gap = gap between the sides of two adjacent hexagons and r = radius of the inscribed circle, aka inradius, of the hexagon = (Cos(Rad(30))*#Radius#) = #Radius#*Sqrt(3)/2 in your implementation. Your #Radius# is naturally the circumradius, aka the radius of the circumscribed circle for the hexagon, which is equal to the length of a hexagon side.

The problem - besides the minor sequence number and toggling on and off the hexes - is identifying which hexagon "slot" in the overall tile system has been clicked on, and place the hexagon there. Basically, it's not about placing the hex centered at $MouseX$,$MouseY$, but rather placing it at the center of the tiled hexagon's inscribed circle that contains the $MouseX$,$MouseY$ point.

I'm sure this is doable from a mathematical point of view, but to do so would be a bit overkill, IMHO - it would be simpler to just draw all the hex tiles over all the screen's work area with a 0,0,0,1 color, and then set them to the desired color/fill and store the coordinates somewhere when clicked on.
Profiles: Rainmeter ProfileDeviantArt ProfileSuites: MYiniMeterSkins: Earth
User avatar
death.crafter
Rainmeter Sage
Posts: 1399
Joined: April 24th, 2021, 8:13 pm

Re: Need Help with Mouse control on Shapes.

Post by death.crafter »

Yincognito wrote: August 9th, 2021, 11:26 pm
Actually, he's trying to make a hexagonal lattice, where hex tiles "touch" each other (with and adjustable gap in between). The hexes are in fact NOT to be placed at mouse position, but rather at the corners of the gray rhombus / primitive cell from the right bottom figure from the link above, obviously extended / repeated to the whole screen work area.

Normally, it isn't that hard to figure out where the hexes centers would be, since that rhombus has 120,60,120,60 degrees angles from the top clockwise, and a side of (r*2+gap), where gap = gap between the sides of two adjacent hexagons and r = radius of the inscribed circle, aka inradius, of the hexagon = (Cos(Rad(30))*#Radius#) = #Radius#*Sqrt(3)/2 in your implementation. Your #Radius# is naturally the circumradius, aka the radius of the circumscribed circle for the hexagon, which is equal to the length of a hexagon side.

The problem - besides the minor sequence number and toggling on and off the hexes - is identifying which hexagon "slot" in the overall tile system has been clicked on, and place the hexagon there. Basically, it's not about placing the hex centered at $MouseX$,$MouseY$, but rather placing it at the center of the tiled hexagon's inscribed circle that contains the $MouseX$,$MouseY$ point.

I'm sure this is doable from a mathematical point of view, but to do so would be a bit overkill, IMHO - it would be simpler to just draw all the hex tiles over all the screen's work area with a 0,0,0,1 color, and then set them to the desired color/fill and store the coordinates somewhere when clicked on
.
Ohh I see. I gave the wrong solution lmao. You should have told in the first place😂🤣
from the Realm of Death
User avatar
Yincognito
Rainmeter Sage
Posts: 7027
Joined: February 27th, 2015, 2:38 pm
Location: Terra Yincognita

Re: Need Help with Mouse control on Shapes.

Post by Yincognito »

death.crafter wrote: August 9th, 2021, 11:35 pm Ohh I see. I gave the wrong solution lmao. You should have told in the first place😂🤣
Well, I tried to put it in a way that you (and the OP) would understand in case you or him thought about adjusting the solution (in case I don't do it till then), and not to hurt your ego in the process... :D
Profiles: Rainmeter ProfileDeviantArt ProfileSuites: MYiniMeterSkins: Earth