It is currently March 29th, 2024, 11:49 am

How to make color transfusion

Get help with creating, editing & fixing problems with skins
User avatar
balala
Rainmeter Sage
Posts: 16110
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: How to make color transfusion

Post by balala »

    dart sinister wrote: April 30th, 2020, 2:46 pm I said that my script did not work with one of the skins. but I understood how to connect. Thanks again
    And is it working now?
    User avatar
    Yincognito
    Rainmeter Sage
    Posts: 7029
    Joined: February 27th, 2015, 2:38 pm
    Location: Terra Yincognita

    Re: How to make color transfusion

    Post by Yincognito »

    Since the OP's problem appears to be solved, according to him, I'll share a way to transition through all the colors from the Color Wheel, exactly as in the preview (not the actual video) of the YouTube video posted by the OP, the vertical bar in RainRGB, and the image below:
    Color Wheel.jpg
    Code:

    Code: Select all

    [Variables]
    FastUpdate=25
    SlowUpdate=1000
    UpdateDivider=(#SlowUpdate#/#FastUpdate#)
    Increment=4
    Direction=1
    StartColor=0
    Quantifier=#StartColor#
    Alternator=0
    
    [Rainmeter]
    Update=#FastUpdate#
    DynamicWindowSize=1
    AccurateText=1
    
    ---Measures---
    
    [Transition]
    Disabled=1
    Measure=Calc
    Formula=((#CURRENTSECTION#+#Increment#)%256)
    RegExpSubstitute=1
    Substitute="^(.*)$":"(255*(1*(1+(#Direction#))/2+#Alternator#*(1-(#Direction#))/2)-((#Direction#)*(\1)*((1-(#Direction#))/2+(#Direction#)*#Alternator#))),0,(255*(1*(1-(#Direction#))/2+#Alternator#*(1+(#Direction#))/2)+((#Direction#)*(\1)*((1+(#Direction#))/2-(#Direction#)*#Alternator#))),255","^((?:[^,]*,){#Quantifier#})((?:[^,]*,)*)(.*)$":"\2\1\3","\\\d":""
    IfCondition=((#CURRENTSECTION#+#Increment#)>=256)
    IfTrueAction=[!SetVariable Alternator (1-#Alternator#)][!SetVariable Quantifier ((3+#Quantifier#+#Direction#*#Alternator#*1)%3)]
    IfConditionMode=1
    DynamicVariables=1
    
    ---Meters---
    
    [Image]
    Meter=Image
    W=300
    H=100
    SolidColor=[Transition]
    LeftMouseUpAction=[!UnpauseMeasure Transition][!ToggleMeasure Transition][!SetVariable Quantifier #StartColor#][!SetVariable Alternator 0][!UpdateMeasure Transition][!UpdateMeter *][!Redraw]
    MiddleMouseUpAction=[!TogglePauseMeasure Transition]
    DynamicVariables=1
    
    [Text]
    Meter=STRING
    X=([Image:W]/2)r
    Y=([Image:H]/2)r
    FontFace=Tahoma
    FontColor=255,255,255,255
    FontSize=10
    FontWeight=700
    AntiAlias=1
    StringAlign=CenterCenter
    StringEffect=Shadow
    StringEffectColor=0,0,0,255
    Text="TRANSITION: Color Wheel#CRLF#DIRECTION: #Direction##CRLF#START COLOR: #StartColor##CRLF#INCREMENT: #Increment#"
    DynamicVariables=1
    
    Preview:
    ezgif.com-optimize.gif
    This is done without any Lua script and without any HSV conversion, only through RGB and Rainmeter code. Left click to reset or start transition, middle click to pause it. The FastUpdate and Increment variables control the speed of the transition. I displayed the formulas as well, for a better understanding of the process.

    EDIT: This code has been updated to reflect the improved version, which handles the starting color (StartColor, valid values: 0, 1, 2) and the direction in which the transition is happening on the color wheel, i.e. counter-clockwise or clockwise (Direction, valid values: -1, 1). The formulas became a bit longer than before (hence they've been removed from being displayed on the image), but neither them nor the substitution are too complicated, after "disecting" everything.
    You do not have the required permissions to view the files attached to this post.
    Last edited by Yincognito on May 1st, 2020, 2:06 pm, edited 1 time in total.
    Profiles: Rainmeter ProfileDeviantArt ProfileSuites: MYiniMeterSkins: Earth
    dart sinister
    Posts: 12
    Joined: April 29th, 2020, 4:57 pm

    Re: How to make color transfusion

    Post by dart sinister »

    balala wrote: April 30th, 2020, 3:05 pm
      And is it working now?
      Yes
      dart sinister
      Posts: 12
      Joined: April 29th, 2020, 4:57 pm

      Re: How to make color transfusion

      Post by dart sinister »

      Yincognito wrote: April 30th, 2020, 7:54 pm Since the OP's problem appears to be solved, according to him, I'll share a way to transition through all the colors from the Color Wheel, exactly as in the preview (not the actual video) of the YouTube video posted by the OP, the vertical bar in RainRGB, and the image below:
      Color Wheel.jpg
      Code:

      Code: Select all

      [Variables]
      FastUpdate=25
      SlowUpdate=1000
      UpdateDivider=(#SlowUpdate#/#FastUpdate#)
      Increment=4
      Quantifier=0
      Alternator=0
      
      [Rainmeter]
      Update=#FastUpdate#
      DynamicWindowSize=1
      AccurateText=1
      
      ---Measures---
      
      [Transition]
      Disabled=1
      Measure=Calc
      Formula=((#CURRENTSECTION#+#Increment#)%256)
      RegExpSubstitute=1
      Substitute="^(.*)$":"(255-\1*#Alternator#),0,(255*#Alternator#+\1*(1-#Alternator#)),255","^((?:[^,]*,){#Quantifier#})((?:[^,]*,)*)(.*)$":"\2\1\3","\\\d":""
      IfCondition=((#CURRENTSECTION#+#Increment#)>=256)
      IfTrueAction=[!SetVariable Alternator (1-#Alternator#)][!SetVariable Quantifier ((#Quantifier#+#Alternator#*1)%3)]
      IfConditionMode=1
      DynamicVariables=1
      
      ---Meters---
      
      [Image]
      Meter=Image
      W=300
      H=100
      SolidColor=[Transition]
      LeftMouseUpAction=[!UnpauseMeasure Transition][!ToggleMeasure Transition][!SetVariable Quantifier 0][!SetVariable Alternator 0][!UpdateMeasure Transition][!UpdateMeter *][!Redraw]
      MiddleMouseUpAction=[!TogglePauseMeasure Transition]
      DynamicVariables=1
      
      [Text]
      Meter=STRING
      X=([Image:W]/2)r
      Y=([Image:H]/2)r
      FontFace=Tahoma
      FontColor=255,255,255,255
      FontSize=10
      FontWeight=700
      AntiAlias=1
      StringAlign=CenterCenter
      StringEffect=Shadow
      StringEffectColor=0,0,0,255
      Text="TRANSITION:#CRLF#Color Wheel#CRLF##CRLF#COLOR:#CRLF#[Transition]"
      DynamicVariables=1
      
      Preview:
      ezgif.com-optimize.gif
      This is done without any Lua script and without any HSV conversion, only through RGB and Rainmeter code. Left click to reset or start transition, middle click to pause it. The FastUpdate and Increment variables control the speed of the transition. I displayed the formulas as well, for a better understanding of the process.
      Good. There will be time, I will try this method
      User avatar
      balala
      Rainmeter Sage
      Posts: 16110
      Joined: October 11th, 2010, 6:27 pm
      Location: Gheorgheni, Romania

      Re: How to make color transfusion

      Post by balala »

      dart sinister wrote: April 30th, 2020, 10:31 pmYes
      Alright, I'm glad. :thumbup:
      GFTs
      Posts: 14
      Joined: June 10th, 2022, 10:47 am

      Re: How to make color transfusion

      Post by GFTs »

      How can i make the clock's color to change itself ? Like the rainbow effect? It's the default rainmeter clock ☹️
      User avatar
      Yincognito
      Rainmeter Sage
      Posts: 7029
      Joined: February 27th, 2015, 2:38 pm
      Location: Terra Yincognita

      Re: How to make color transfusion

      Post by Yincognito »

      GFTs wrote: June 10th, 2022, 10:58 am How can i make the clock's color to change itself ? Like the rainbow effect? It's the default rainmeter clock ☹️
      There are a number of ways you can do it. For example, if I integrate my previous code in it, assuming you're talking about the Illustro Clock:
      Illustro Clock.jpg
      it could turn to something like this - this is by no means perfect, just a sample, but it can be adjusted (I have no idea how you want it to look like):

      Code: Select all

      ; Lines starting ; (semicolons) are commented out.
      ; That is, they do not affect the code and are here for demonstration purposes only.
      ; ----------------------------------
      
      [Rainmeter]
      ; This section contains general settings that can be used to change how Rainmeter behaves.
      Update=#FastUpdate#
      DefaultUpdateDivider=(#SlowUpdate#/#FastUpdate#)
      ;Background=#@#Background.png
      ; #@# is equal to Rainmeter\Skins\illustro\@Resources
      ;BackgroundMode=3
      ;BackgroundMargins=0,34,0,14
      
      [Metadata]
      ; Contains basic information of the skin.
      Name=Clock
      Author=poiru
      Information=Displays the current date and time.
      License=Creative Commons BY-NC-SA 3.0
      Version=1.0.0
      
      [Variables]
      ; Variables declared here can be used later on between two # characters (e.g. #MyVariable#).
      fontName=Trebuchet MS
      textSize=8
      colorBar=235,170,0,255
      colorText=255,255,255,205
      
      FastUpdate=25
      SlowUpdate=1000
      Increment=4
      Direction=1
      StartColor=0
      Quantifier=#StartColor#
      Alternator=0
      
      ; ----------------------------------
      ; MEASURES return some kind of value
      ; ----------------------------------
      
      [Transition]
      Disabled=1
      Measure=Calc
      Formula=((#CURRENTSECTION#+#Increment#)%256)
      RegExpSubstitute=1
      Substitute="^(.*)$":"(255*(1*(1+(#Direction#))/2+#Alternator#*(1-(#Direction#))/2)-((#Direction#)*(\1)*((1-(#Direction#))/2+(#Direction#)*#Alternator#))),0,(255*(1*(1-(#Direction#))/2+#Alternator#*(1+(#Direction#))/2)+((#Direction#)*(\1)*((1+(#Direction#))/2-(#Direction#)*#Alternator#))),255","^((?:[^,]*,){#Quantifier#})((?:[^,]*,)*)(.*)$":"\2\1\3","\\\d":""
      IfCondition=((#CURRENTSECTION#+#Increment#)>=256)
      IfTrueAction=[!SetVariable Alternator (1-#Alternator#)][!SetVariable Quantifier ((3+#Quantifier#+#Direction#*#Alternator#*1)%3)]
      IfConditionMode=1
      UpdateDivider=1
      DynamicVariables=1
      
      [measureTime]
      ; This measure returns the time in a 24-hour format (i.e. HH:MM).
      Measure=Time
      Format=%H:%M
      ; For a 12-hour clock, change the Format option above to: %I:%M %p
      ; Refer to the Rainmeter manual for other format codes.
      
      [measureDate]
      ; Returns the date as DD.MM.YYYY
      Measure=Time
      Format=%d.%m.%Y
      
      [measureDay]
      ; Returns the current day
      Measure=Time
      Format=%A
      
      ; ----------------------------------
      ; STYLES are used to "centralize" options
      ; ----------------------------------
      
      [styleTitle]
      StringAlign=Center
      StringCase=Upper
      StringStyle=Bold
      StringEffect=Shadow
      FontEffectColor=0,0,0,50
      FontColor=#colorText#
      FontFace=#fontName#
      FontSize=10
      AntiAlias=1
      ClipString=1
      
      [styleLeftText]
      StringAlign=Left
      ; Meters using styleLeftText will be left-aligned.
      StringCase=None
      StringStyle=Bold
      StringEffect=Shadow
      FontEffectColor=0,0,0,20
      FontColor=#colorText#
      FontFace=#fontName#
      FontSize=#textSize#
      AntiAlias=1
      ClipString=1
      
      [styleRightText]
      StringAlign=Right
      StringCase=None
      StringStyle=Bold
      StringEffect=Shadow
      FontEffectColor=0,0,0,20
      FontColor=#colorText#
      FontFace=#fontName#
      FontSize=#textSize#
      AntiAlias=1
      ClipString=1
      
      [styleSeperator]
      SolidColor=255,255,255,15
      
      ; ----------------------------------
      ; METERS display images, text, bars, etc.
      ; ----------------------------------
      
      [Image]
      Meter=Image
      ImageName=#@#Background.png
      ;W=210
      ;H=68
      SolidColor=[Transition]
      ;Greyscale=0
      ;ImageTint=[Transition]
      UpdateDivider=1
      LeftMouseUpAction=[!UnpauseMeasure Transition][!ToggleMeasure Transition][!SetVariable Quantifier #StartColor#][!SetVariable Alternator 0][!UpdateMeasure Transition][!UpdateMeter *][!Redraw]
      MiddleMouseUpAction=[!TogglePauseMeasure Transition]
      DynamicVariables=1
      
      [meterTitle]
      Meter=String
      MeterStyle=styleTitle
      ; Using MeterStyle=styleTitle will basically "copy" the
      ; contents of the [styleTitle] section here during runtime.
      MeasureName=measureTime
      X=100
      Y=12
      W=190
      H=18
      Text=%1
      ; %1 stands for the value of MeasureName (measureTime in this case).
      
      [meterDay]
      Meter=String
      MeterStyle=styleLeftText
      MeasureName=measureDay
      X=10
      Y=40
      W=190
      H=14
      Text=%1
      
      [meterDate]
      Meter=String
      MeterStyle=styleRightText
      MeasureName=measureDate
      X=200
      Y=0r
      ; r stands for relative. In this case, the Y postition of meterValueCPU is 0 pixels
      ; below the Y value of the previous meter (i.e it's the same as in meterLabelCPU).
      W=190
      H=14
      Text=%1
      
      [meterSeperator]
      Meter=Image
      MeterStyle=styleSeperator
      X=10
      Y=52
      W=190
      H=1
      Illustro Clock Rainbow.jpg
      If you switch the commenting in the Image meter to something like this:

      Code: Select all

      [Image]
      Meter=Image
      ImageName=#@#Background.png
      ;W=210
      ;H=68
      ;SolidColor=[Transition]
      Greyscale=0
      ImageTint=[Transition]
      UpdateDivider=1
      LeftMouseUpAction=[!UnpauseMeasure Transition][!ToggleMeasure Transition][!SetVariable Quantifier #StartColor#][!SetVariable Alternator 0][!UpdateMeasure Transition][!UpdateMeter *][!Redraw]
      MiddleMouseUpAction=[!TogglePauseMeasure Transition]
      DynamicVariables=1
      
      you'll get a tinted version of it, which in normal circumstances would be what you want (you can set Greyscale=1 to recolor the image instead of tinting it), but because the clock's background image is a semitransparent one, the effect is visible mostly on the borders:
      Illustro Clock Rainbow Tinted.jpg
      Obviously, if you edit the image to make it less transparent, things will be more visible - the visibility of the effect also depends on which wallpaper you put it, probably. I let the mouse actions in the meter unchanged, feel free to do what you want with them, the description of what they do is in my earlier post above.
      You do not have the required permissions to view the files attached to this post.
      Profiles: Rainmeter ProfileDeviantArt ProfileSuites: MYiniMeterSkins: Earth
      GFTs
      Posts: 14
      Joined: June 10th, 2022, 10:47 am

      Re: How to make color transfusion

      Post by GFTs »

      I don't know/use Illustro Clock. On the default clock from rainmeter.ini (the small one) it's a very basic clock, and i managed to input my desired information that i need, like 24h format and date. I just want to know if i can make the color of the clock like the rainbow effect. Should help you answering me if i gave you my code ?
      User avatar
      Yincognito
      Rainmeter Sage
      Posts: 7029
      Joined: February 27th, 2015, 2:38 pm
      Location: Terra Yincognita

      Re: How to make color transfusion

      Post by Yincognito »

      GFTs wrote: June 10th, 2022, 10:58 am How can i make the clock's color to change itself ? Like the rainbow effect? It's the default rainmeter clock ☹️
      Or, a more polished version based on the above code, by replacing the Image meter with a Shape and an Image meter instead, to account for margins and the rounded corners:

      Code: Select all

      [Shape]
      Meter=Shape
      Shape=Rectangle 6,6,196,54,5 | Fill Color [Transition] | StrokeWidth 0 | Stroke Color 0,0,0,255
      UpdateDivider=1
      LeftMouseUpAction=[!UnpauseMeasure Transition][!ToggleMeasure Transition][!SetVariable Quantifier #StartColor#][!SetVariable Alternator 0][!UpdateMeasure Transition][!UpdateMeter *][!Redraw]
      MiddleMouseUpAction=[!TogglePauseMeasure Transition]
      DynamicVariables=1
      
      [Image]
      Meter=Image
      ImageName=#@#Background.png
      
      Illustro Clock Polished 1.jpg
      Alternatively, if you want the borders to be colored as well, using a Rectangle 5,5,198,56,5 above should make it look like this:
      Illustro Clock Polished 2.jpg
      If you want the transition to go on forever and start automatically without user intervention, you can simply comment out the Disabled line in the Transition measure:

      Code: Select all

      [Transition]
      ; Disabled=1
      Measure=Calc
      Formula=((#CURRENTSECTION#+#Increment#)%256)
      RegExpSubstitute=1
      Substitute="^(.*)$":"(255*(1*(1+(#Direction#))/2+#Alternator#*(1-(#Direction#))/2)-((#Direction#)*(\1)*((1-(#Direction#))/2+(#Direction#)*#Alternator#))),0,(255*(1*(1-(#Direction#))/2+#Alternator#*(1+(#Direction#))/2)+((#Direction#)*(\1)*((1+(#Direction#))/2-(#Direction#)*#Alternator#))),255","^((?:[^,]*,){#Quantifier#})((?:[^,]*,)*)(.*)$":"\2\1\3","\\\d":""
      IfCondition=((#CURRENTSECTION#+#Increment#)>=256)
      IfTrueAction=[!SetVariable Alternator (1-#Alternator#)][!SetVariable Quantifier ((3+#Quantifier#+#Direction#*#Alternator#*1)%3)]
      IfConditionMode=1
      UpdateDivider=1
      DynamicVariables=1
      
      and comment out the mouse actions in the Shape meter:

      Code: Select all

      [Shape]
      Meter=Shape
      Shape=Rectangle 5,5,198,56,5 | Fill Color [Transition] | StrokeWidth 0 | Stroke Color 0,0,0,255
      UpdateDivider=1
      ; LeftMouseUpAction=[!UnpauseMeasure Transition][!ToggleMeasure Transition][!SetVariable Quantifier #StartColor#][!SetVariable Alternator 0][!UpdateMeasure Transition][!UpdateMeter *][!Redraw]
      ; MiddleMouseUpAction=[!TogglePauseMeasure Transition]
      DynamicVariables=1
      
      You do not have the required permissions to view the files attached to this post.
      Profiles: Rainmeter ProfileDeviantArt ProfileSuites: MYiniMeterSkins: Earth
      User avatar
      Yincognito
      Rainmeter Sage
      Posts: 7029
      Joined: February 27th, 2015, 2:38 pm
      Location: Terra Yincognita

      Re: How to make color transfusion

      Post by Yincognito »

      GFTs wrote: June 10th, 2022, 12:17 pm I don't know/use Illustro Clock. On the default clock from rainmeter.ini (the small one) it's a very basic clock, and i managed to input my desired information that i need, like 24h format and date. I just want to know if i can make the color of the clock like the rainbow effect. Should help you answering me if i gave you my code ?
      Well, you should have provided the precise information right from the start, because I have absolutely no idea what is for you the "default clock". Of course that providing the code helps, so don't hesitate in posting it (or, alternatively packing the skin, to make sure every related resource is there as well, if there are any). Make sure you don't forget something. ;-)
      Profiles: Rainmeter ProfileDeviantArt ProfileSuites: MYiniMeterSkins: Earth