DangerousMinds wrote: ↑February 13th, 2023, 5:09 pm
Wow this is awesome!!!! No cutted text anymore. ♥
Ah good to know that the H=#screenheight# was the problem with cutting off the text. I also tried to change that but only with different hights, not with removing it and the other change for the MaxScrollHeight=[Note:H].
I'm testing a lot and that is not my first skin that I change but with this skin there was a lot of new stuff that I didn't have contact before.
It's nice to have you by my side and help me so I can learn new stuff!
I'm curious if you can get the scrollbar draggable and maybe help with the colors for the text.
After a lot of research I couldn't find anything to do what I want. But I'm a totally noob
Would it be only HTML, PHP and CSS it would be no problem.
Can't wait to see what you can do
Okay, here are some changes to get draggable scroll bar and color options for paragraphs.
moxx3.gif
Drag scroll bar indicator
We create a new variable named
YPositionDrag to control the indicator position.
We use the Mouse plugin to detect the Y position of the mouse, however, the scroll indicator starts at 34 pixels from the top of the skin and we want the Y value to be zero there, so we need to subtract that amount from the mouse Y position.
Then set the lower limit to zero and the upper limit to the size of our text box [Box:H] minus the size of the indicator shape.
Code: Select all
[MeasureMouse]
Measure=Plugin
Plugin=Mouse
LeftMouseDragAction=[!SetVariable YPositionDrag "(Clamp($MouseY$-34,0,[Box:H]-20))"][!UpdateMeasure MeasurePercent][!UpdateMeter *][!Redraw]
LeftMouseUpAction=[!CommandMeasure MeasureMouse "Stop"]
RelativeToSkin=1
RequireDragging=1
DynamicVariables=1
To control the text position we set the
YPosition to the negative value of
YPositionDrag variable multiplied by the ratio of #MaxScrollHeight# and [Box:h].
Code: Select all
[MeasurePercent]
Measure=Calc
Formula=#YPositionDrag#
DynamicVariables=1
OnChangeAction=[!SetVariable YPosition "(-(#YPositionDrag# * (#MaxScrollHeight#/[Box:H])))"][!UpdateMeter *][!Redraw]
Those changes will let you drag the scroll indicator. You can still scroll with mouse wheel or click the scroll bar to move the text.
Paragraph Colors
In order to color a paragraph, you need to be able to determine the
start and
end position for Inline pattern recognition.
To do this, in your
note text use a character that is seldom seen in text (I decided to use a tilde
~ character) to denote the start of a colored paragraph and a double period
.. to denote the end.
Knowing this, you can use
multiple tilde characters to start a paragraph and the number of tildes to set a different color for the paragraph. Here is what I set initially:
Code: Select all
; Paragraph colors
; In the note text: Use a number of '~' to start the paragraph and determine its color
; Use a double period to denote the end of the paragraph
; Settings: No tilde = current font color | 1-tilde = Blue | 2 tilde = Green | 3 tilde = red | etc.
InlineSetting=Color | 100,180,240
InlinePattern=(?sU)~.*\.\.
InlineSetting2=Color | 180,240,100
InlinePattern2=(?sU)~~.*\.\.
InlineSetting3=Color | 240,180,100
InlinePattern3=(?sU)~~~.*\.\.
There is also a better way to prevent clipping in the note meters. I removed W and H values in those sections and set
ClipString=2 and set
ClipStringW=274 (the width of your text box).
Here is the complete modified code:
Code: Select all
[Rainmeter]
Update=1000
AccurateText=1
; Author=Albinozz
[Variables]
Note=#SkinsPath#Moxx.Pack\Notes\Notes.txt
ToDo=#SkinsPath#Moxx.Pack\Notes\Notes2.txt
Other=#SkinsPath#Moxx.Pack\Notes\Notes3.txt
ToDoDots=#SkinsPath#Moxx.Pack\Notes\ToDoDots.txt
;------------------Scoll Variables
; Set this to the maximum scrolled text height
MaxScrollHeight=[Note:H]
YPosition=0
YPositionDrag=0
; This will vary depending on the Font used
LineStep=(#MaxScrollHeight#/20)
ScreenHeight=285
;------------------"ScreenHeight2" should be set to 35 more than "ScreenHeight"
ScreenHeight2=320
BoxTransparent=150
;------------------Chose the transparent for the read box 1-255
FontName=Century Gothic
FontColor=255, 255, 255, 255
FontHeight=10
AntiAlias=1
;---------------------------
[MeasureNote]
Measure=Plugin
Plugin=Plugins\QuotePlugin.dll
PathName=#Note#
Disabled=0
Separator=¶
#Subfolders=0
#FileFilter=*.txt
[MeasureToDo]
Measure=Plugin
Plugin=Plugins\QuotePlugin.dll
PathName=#ToDo#
Disabled=0
Separator=¶
#Subfolders=0
#FileFilter=*.txt
[MeasureOther]
Measure=Plugin
Plugin=Plugins\QuotePlugin.dll
PathName=#Other#
Disabled=0
Separator=¶
#Subfolders=0
#FileFilter=*.txt
[MeasureToDoDots]
Measure=Plugin
Plugin=Plugins\QuotePlugin.dll
PathName=#ToDoDots#
Disabled=0
Separator=¶
#Subfolders=0
#FileFilter=*.txt
;--------------------------
[Top]
Meter=IMAGE
ImageName=Top.png
X=0
Y=0
W=295
H=35
AntiAlias=1
[Box]
Meter=IMAGE
SolidColor=0, 0, 0, #BoxTransparent#
X=0
Y=35r
W=295
H=#ScreenHeight#
AntiAlias=1
Hidden=0
[Open]
Meter=IMAGE
ImageName=Bottom.png
X=0
Y=r
W=295
H=20
AntiAlias=1
Hidden=1
LeftMouseDownAction=[!Refresh][!Redraw]
LeftMouseUpAction=[!Redraw]
[OpenArrow]
Meter=IMAGE
ImageName=Open.png
X=130
Y=r
W=15
H=15
AntiAlias=1
Hidden=1
[Close]
Meter=IMAGE
ImageName=Bottom.png
X=0
Y=#ScreenHeight2#
W=295
H=20
AntiAlias=1
Hidden=0
LeftMouseDownAction=[!HideMeterGroup Scrollbar][!Redraw][!HideMeter ToDo][!HideMeter ToDoDots][!HideMeter Other][!HideMeter Note][!HideMeter Box][!HideMeter TabNotes][!HideMeter TabNotesSmall][!HideMeter TabToDo][!HideMeter TabToDoSmall][!HideMeter TabOther][!HideMeter TabOtherSmall][!HideMeter Close][!HideMeter CloseArrow][!HideMeter Back][!ShowMeter Open][!ShowMeter OpenArrow][!Redraw]
LeftMouseUpAction=[!Redraw]
[CloseArrow]
Meter=IMAGE
ImageName=Close.png
X=130
Y=r
W=15
H=15
AntiAlias=1
Hidden=0
;---------------------------
[TabNotesSmall]
Meter=IMAGE
SolidColor=187,0,255
X=300
Y=50
W=10
H=20
AntiAlias=1
Hidden=0
MouseOverAction=[!ShowMeter TabNotes][!HideMeter TabNotesSmall][!Redraw]
MouseLeaveAction=[!Redraw]
[TabNotes]
Meter=IMAGE
ImageName=Tab Notes.png
X=300
Y=50
W=50
H=20
AntiAlias=1
Hidden=1
MouseOverAction=[!Redraw]
MouseLeaveAction=[!ShowMeter TabNotesSmall][!HideMeter TabNotes][!Redraw]
LeftMouseDownAction=[!HideMeter ToDo][!HideMeter Other][!ShowMeter Note]
LeftMouseUpAction=[!SetVariable MaxScrollHeight ([Note:H])][!SetVariable LineStep ([#MaxScrollHeight]/20)][!SetVariable YPosition 0][!UpdateMeter *][!Redraw]
[TabToDoSmall]
Meter=IMAGE
SolidColor=255,48,48
X=300
Y=25r
W=10
H=20
AntiAlias=1
Hidden=0
MouseOverAction=[!ShowMeter TabToDo][!HideMeter TabToDoSmall][!Redraw]
MouseLeaveAction=[!Redraw]
[TabToDo]
Meter=IMAGE
ImageName=Tab ToDo.png
X=300
Y=r
W=50
H=20
AntiAlias=1
Hidden=1
MouseOverAction=[!Redraw]
MouseLeaveAction=[!ShowMeter TabToDoSmall][!HideMeter TabToDo][!Redraw]
LeftMouseDownAction=[!HideMeter Note][!HideMeter Other][!ShowMeter ToDo]
LeftMouseUpAction=[!SetVariable MaxScrollHeight ([ToDo:H])][!SetVariable LineStep ([#MaxScrollHeight]/20)][!SetVariable YPosition 0][!UpdateMeter *][!Redraw]
[TabOtherSmall]
Meter=IMAGE
SolidColor=255,229,61
X=300
Y=25r
W=10
H=20
AntiAlias=1
Hidden=0
MouseOverAction=[!ShowMeter TabOther][!HideMeter TabOtherSmall][!Redraw]
MouseLeaveAction=[!Redraw]
[TabOther]
Meter=IMAGE
ImageName=Tab Other.png
X=300
Y=r
W=50
H=20
AntiAlias=1
Hidden=1
MouseOverAction=[!Redraw]
MouseLeaveAction=[!ShowMeter TabOtherSmall][!HideMeter TabOther][!Redraw]
LeftMouseDownAction=[!HideMeter ToDo][!HideMeter ToDoDots][!HideMeter Note][!ShowMeter Other]
LeftMouseUpAction=[!SetVariable MaxScrollHeight ([Other:H])][!SetVariable LineStep ([#MaxScrollHeight]/20)][!SetVariable YPosition 0][!UpdateMeter *][!Redraw][!Redraw]
;---------------------------
[Back]
Meter=IMAGE
SolidColor=0, 0, 0, 1
X=0
Y=0
W=260
H=#ScreenHeight#
[Title]
Meter=STRING
X=45
Y=6
FontColor=0,204,255
FontSize=15
FontFace=#FontName#
StringAlign=LEFT
Prefix="Notizen & To-Do's"
AntiAlias=1
;--------------------------Scrollable Area
[Note]
Container=Container
Meter=STRING
MeasureName=MeasureNote
X=5
Y=#YPosition#
FontColor=#FontColor#
FontFace=#FontName#
FontSize=#FontHeight#
StringAlign=LEFT
StringStyle=NORMAL
AntiAlias=1
ClipString=2
ClipStringW=274
Hidden=0
DynamicVariables=1
LeftMouseDownAction=["#Note#"][!Redraw]
;--------------------------only for testing
; Paragraph colors
; In the note text: Use a number of '~' to start the paragraph and determine its color
; Use a double period to denote the end of the paragraph
; Settings: No tilde = current font color | 1-tilde = Blue | 2 tilde = Green | 3 tilde = red | etc.
InlineSetting=Color | 100,180,240
InlinePattern=(?sU)~.*\.\.
InlineSetting2=Color | 180,240,100
InlinePattern2=(?sU)~~.*\.\.
InlineSetting3=Color | 240,180,100
InlinePattern3=(?sU)~~~.*\.\.
; Inlinesetting= GradientColor | 180 | 255,0,0 ; 0.1 | 255,154,0 ; 0.2 | 208,222,33 ; 0.3 | 79,220,74 ; 0.4 | 63,218,216 ; 0.5 | 47,201,226 ; 0.6 | 28,127,238 ; 0.7 | 95,21,242 ; 0.8 | 186,12,248 ; 0.9
[ToDo]
Container=Container
Meter=STRING
MeasureName=MeasureToDo
X=15
Y=#YPosition#
FontColor=#FontColor#
FontFace=#FontName#
FontSize=#FontHeight#
StringAlign=LEFT
StringStyle=NORMAL
AntiAlias=1
ClipString=2
ClipStringW=274
Hidden=1
DynamicVariables=1
LeftMouseDownAction=["#Note#"][!Redraw]
;--------------------------only for testing
; Paragraph colors
; In the note text: Use a number of '~' to start the paragraph and determine its color
; Use a double period to denote the end of the paragraph
; Settings: No tilde = current font color | 1-tilde = Blue | 2 tilde = Green | 3 tilde = red | etc.
InlineSetting=Color | 100,180,240
InlinePattern=(?sU)~.*\.\.
InlineSetting2=Color | 180,240,100
InlinePattern2=(?sU)~~.*\.\.
InlineSetting3=Color | 240,180,100
InlinePattern3=(?sU)~~~.*\.\.
[Other]
Container=Container
Meter=STRING
MeasureName=MeasureOther
X=5
Y=#YPosition#
FontColor=#FontColor#
FontFace=#FontName#
FontSize=#FontHeight#
StringAlign=LEFT
StringStyle=NORMAL
AntiAlias=1
ClipString=2
ClipStringW=274
Hidden=1
DynamicVariables=1
LeftMouseDownAction=["#Note#"][!Redraw]
;--------------------------only for testing
; Paragraph colors
; In the note text: Use a number of '~' to start the paragraph and determine its color
; Use a double period to denote the end of the paragraph
; Settings: No tilde = current font color | 1-tilde = Blue | 2 tilde = Green | 3 tilde = red | etc.
InlineSetting=Color | 100,180,240
InlinePattern=(?sU)~.*\.\.
InlineSetting2=Color | 180,240,100
InlinePattern2=(?sU)~~.*\.\.
InlineSetting3=Color | 240,180,100
InlinePattern3=(?sU)~~~.*\.\.
[ToDoDots]
Container=Container
Meter=STRING
MeasureName=MeasureToDoDots
X=5
Y=#YPosition#
W=274
; H=#ScreenHeight#
FontColor=#FontColor#
FontFace=#FontName#
FontSize=#FontHeight#
StringAlign=LEFT
StringStyle=NORMAL
AntiAlias=1
ClipString=1
Hidden=1
DynamicVariables=1
;--------------------------
[ScrollbarTop]
Container=Container
Group=Scrollbar
Meter=Shape
Shape=Rectangle 285,0,11,([Box:H]*0.5) | StrokeWidth 0 | Fill LinearGradient ShapeGradient
ShapeGradient=90 | 255,0,0,140 ; 0.1 | 255,154,0,140 ; 0.2 | 208,222,33,140 ; 0.3 | 79,220,74,140 ; 0.4 | 63,218,216,140 ; 0.5 | 47,201,226,140 ; 0.6 | 28,127,238,140 ; 0.7 | 95,21,242,140 ; 0.8 | 186,12,248,140 ; 0.9
LeftMouseUpAction=[!SetVariable YPosition (Clamp(#YPosition#+#LineStep#,(-#MaxScrollHeight#+#LineStep#),0))][!UpdateMeter *][!Redraw]
DynamicVariables=1
[ScrollbarBottom]
Container=Container
Group=Scrollbar
Meter=Shape
Shape=Rectangle 285,([Box:H]*0.5),11,([Box:H]*0.5) | StrokeWidth 0 | Fill LinearGradient ShapeGradient
ShapeGradient=270 | 255,0,0,140 ; 0.1 | 255,154,0,140 ; 0.2 | 208,222,33,140 ; 0.3 | 79,220,74,140 ; 0.4 | 63,218,216,140 ; 0.5 | 47,201,226,140 ; 0.6 | 28,127,238,140 ; 0.7 | 95,21,242,140 ; 0.8 | 186,12,248,140 ; 0.9
LeftMouseUpAction=[!SetVariable YPosition (Clamp(#YPosition#-#LineStep#,(-#MaxScrollHeight#+#LineStep#),0))][!UpdateMeter *][!Redraw]
DynamicVariables=1
[ScrollbarIndicator]
Container=Container
Group=Scrollbar
Meter=Shape
X=285
Y=0
; The '+0.00001' values prevent division by zero errors
Shape=Rectangle 0,(Abs(#YPosition#)/((#MaxScrollHeight#/([Box:H]+0.00001))+0.00001)),11,20 | StrokeWidth 0 | Fill Color 47,201,226
LeftMouseDownAction=[!CommandMeasure MeasureMouse "Start"]
DynamicVariables=1
[Container]
Meter=Shape
X=0
Y=35
Shape=Rectangle 0,0,295,(Max([Open:H],[Box:H]))
MouseScrollUpAction=[!SetVariable YPosition (Clamp(#YPosition#+#LineStep#,(-#MaxScrollHeight#+#LineStep#),0))][!UpdateMeter *][!Redraw]
MouseScrollDownAction=[!SetVariable YPosition (Clamp(#YPosition#-#LineStep#,(-#MaxScrollHeight#+#LineStep#),0))][!UpdateMeter *][!Redraw]
DynamicVariables=1
[MeasureMouse]
Measure=Plugin
Plugin=Mouse
LeftMouseDragAction=[!SetVariable YPositionDrag "(Clamp($MouseY$-34,0,[Box:H]-20))"][!UpdateMeasure MeasurePercent][!UpdateMeter *][!Redraw]
LeftMouseUpAction=[!CommandMeasure MeasureMouse "Stop"]
RelativeToSkin=1
RequireDragging=1
DynamicVariables=1
[MeasurePercent]
Measure=Calc
Formula=#YPositionDrag#
DynamicVariables=1
OnChangeAction=[!SetVariable YPosition "(-(#YPositionDrag# * (#MaxScrollHeight#/[Box:H])))"][!UpdateMeter *][!Redraw]
And a sample 'Notes.txt'
Code: Select all
Welcome!
~This App is fantastic!
~~ With the three side tab buttons on the right you can chose between three different.txt files.
Which means you can have "notes", "To Do" list and "Other" text.
To edit the .txt files and add new notes or new text, just click the text.
Hide this by clicking the bottom arrow bar.
~~~ With the three side tab buttons on the right you can chose between three different.txt files.
Which means you can have "notes", "To Do" list and "Other" text.
To edit the .txt files and add new notes or new text, just click the text.
Hide this by clicking the bottom arrow bar..
With the three side tab buttons on the right you can chose between three different.txt files.
Which means you can have "notes", "To Do" list and "Other" text.
To edit the .txt files and add new notes or new text, just click the text.
Hide this by clicking the bottom arrow bar..
~ With the three side tab buttons on the right you can chose between three different.txt files.
Which means you can have "notes", "To Do" list and "Other" text.
To edit the .txt files and add new notes or new text, just click the text.
Hide this by clicking the bottom arrow bar..
~~ With the three side tab buttons on the right you can chose between three different.txt files.
Which means you can have "notes", "To Do" list and "Other" text.
To edit the .txt files and add new notes or new text, just click the text.
Hide this by clicking the bottom arrow bar..
~~~ With the three side tab buttons on the right you can chose between three different.txt files.
Which means you can have "notes", "To Do" list and "Other" text.
To edit the .txt files and add new notes or new text, just click the text.
Hide this by clicking the bottom arrow bar..
With the three side tab buttons on the right you can chose between three different.txt files.
Which means you can have "notes", "To Do" list and "Other" text.
To edit the .txt files and add new notes or new text, just click the text.
Hide this by clicking the bottom arrow bar..
Let me know if you have any questions or concerns.
You do not have the required permissions to view the files attached to this post.
Holy shit, this is freaking amazing!!! I absolutely love it!!! ♥ ♥ ♥
