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

YouTube-like now-playing lock screen

Skins that control functions in Windows or Rainmeter
User avatar
FuzzyLizard530
Posts: 75
Joined: August 5th, 2014, 2:09 am

YouTube-like now-playing lock screen

Post by FuzzyLizard530 »

So I have this done. I'm trying to make it look like some of those YouTube videos where you have the cover art on the left, and the track info on the right. Additionally, I have a "live time" display (not track time, but I plan on adding that at some point.), and a battery bar with percentage on top of it.

Before I drop the code, I'm wondering if someone could drop some code for the chameleon plugin, to change the tint of a 2- or 3-layered "cloud-like" backdrop that I intend to add in the near future.*

(Spoilered for space)

Code: Select all

[Rainmeter]
Update=100
DynamicWindowSize=1
;MouseOverAction=!Execute [!ShowMeter Up][!UpdateMeter *][!Redraw]
;MouseLeaveAction=!Execute [!HideMeter Up][!UpdateMeter *][!Redraw]

[Metadata]
Name=InfoNoir AIO
Author=FuzzyLizard
Description=NowPlaying/Wifi/Date/Time/Battery InfoBar#CRLF#Inspired by Redsaph's "Noir" Skin
Version=1.0.0
License=Creative Commons BY-NC-SA 3.0

[Variables]
Player=iTunes
BCen=255,255,255,255
BSid=255,64,64,255


[M-Player]
Measure=Plugin
Plugin=NowPlaying.dll
PlayerName=#Player#
PlayerType=TITLE
PlayerPath=
DisableLeadingZero=0
Substitute="":""
; Return value is 1 on error
IfEqualValue=1
IfEqualAction=!Execute [!RainmeterShowMeter ErrorMessage][!RainmeterRedraw]

[M-Artist]
Measure=Plugin
Plugin=NowPlaying.dll
PlayerName=[M-Player]
PlayerType=ARTIST
Substitute="":""

[M-Album]
Measure=Plugin
Plugin=NowPlaying.dll
PlayerName=[M-Player]
PlayerType=ALBUM
Substitute="":""

[M-Art]
Measure=Plugin
Plugin=NowPlaying.dll
PlayerName=[M-Player]
PlayerType=Cover
Substitute="":""

;===============

[BG]
Meter=Image
X=0
Y=0
W=#SCREENAREAWIDTH#
H=#SCREENAREAHEIGHT#
SolidColor=128,128,128,225
DynamicVariables=1

[AlbumArt]
Meter=Image
MeasureName=M-Art
H=(#SCREENAREAHEIGHT#*(8/10))
X=(#SCREENAREAHEIGHT#*(1/10))
Y=(#SCREENAREAHEIGHT#*(1/10))
PreserveAspectRatio=1


[Text]
Meter=String
MeasureName=M-Artist
MeasureName2=M-Player
MeasureName3=M-Album
X=(([AlbumArt:W])+(#SCREENAREAHEIGHT#*(1/10)))r
Y=([AlbumArt:H]/2)r
FontFace=Segoe UI
FontSize=24
FontColor=255,255,255,255
StringAlign=LeftCenter
StringEffect=Border
FontEffectColor=0,0,0,196
Text=%1#CRLF#%2#CRLF#%3
y=(#SCREENAREAHEIGHT#-[Text:H])
DynamicVariables=1
AntiAlias=1

;======Center======

;======Right======

[MeasureBatteryLeft]
Measure = Plugin
Plugin = PowerPlugin
PowerState = Percent

[LeftStyle]
DynamicVariables=1
AntiAlias=1

[BattW]
Meter=STRING
FontColor=0,0,0,1
Text="100%"
AntiAlias=1
ClipString=1
DynamicVariables=1
AntiAlias=1
FontFace=Segoe UI
FontSize=16
StringAlign=Right

[BattBar]
MeasureName = MeasureBatteryLeft
Meter = BAR
; Toggle the line below: comment for top display, uncomment for bottom
; Y=(#SCREENAREAHEIGHT#-[MeterSecs:H])
W = [BattW:W]
H = [BattW:H]
SolidColor=128,0,0,255
BarColor=0,128,0,255
BarOrientation=Vertical
BarBorder = 0
DynamicVariables=1

[BattTxt]
Meter=STRING
MeasureName=MeasureBatteryLeft
MeterStyle=BattW
X=([BattBar:X]+[BattBar:W])
Y=r
FontColor=255,255,255,255
Text="%1%"

[MeasureTime]
Measure=Time
Format=%H:%M

[MeasureSec]
Measure=Time
Format=%S

; METERS *****************************************
[RightStyle]
Meter=String
DynamicVariables=1
AntiAlias=1
FontFace=Segoe UI
FontSize=64
StringAlign=Center
ClipString=1
StringEffect=Border
FontEffectColor=0,0,0,196

[MeterTime]
Meter=STRING
MeterStyle=RightStyle
MeasureName=MeasureTime
X=(#SCREENAREAWIDTH#/2)
Y=-25
FontColor=#BCen#
Text="%1"
*As an aside, does anyone know how I could get either a live-rendered, or pre-rendered, (prefer the former, will settle for the latter) backdrop for the above mentioned background, or could you suggest some psychedelic-looking alternative. The only other thing I could come up with for this would be to run winamp with the MilkDrop plugin, but then I'd have to figure out how to hide all my skins while the one above was active. Any ideas?
I may or may not have a signature in this, very location...
User avatar
eclectic-tech
Rainmeter Sage
Posts: 5384
Joined: April 12th, 2012, 9:40 pm
Location: Cedar Point, Ohio, USA

Re: YouTube-like now-playing lock screen

Post by eclectic-tech »

@ FuzzyLizard530

Added chameleon measures and also smurfier's colorchanger lua.

For testing, just put the images and the lua code in the same folder as the NPLock.ini. Added mouse scroll up to switch between the 3 background types:
  • The plasma cloud image is tiled, uses colors from the cover image, and tints it using Smurfier's lua code.
  • It is less resource hungry than the second background of fog, which is a 1920x1080 image, with colors driven by lua.
  • Finally, a gradient using chameleon colors from the cover image.
You asked for some code, so here is what I was using... :D

NPLock.ini

Code: Select all

[Rainmeter]
Update=100
DynamicWindowSize=1
;MouseOverAction=!Execute [!ShowMeter Up][!UpdateMeter *][!Redraw]
;MouseLeaveAction=!Execute [!HideMeter Up][!UpdateMeter *][!Redraw]
MouseScrollUpAction=[!HideMeterGroup BG][!WriteKeyValue Variables CurrentBG ((#CurrentBG#+1)%3)][!Refresh]

[Metadata]
Name=InfoNoir AIO
Author=FuzzyLizard
Description=NowPlaying/Wifi/Date/Time/Battery InfoBar#CRLF#Inspired by Redsaph's "Noir" Skin
Version=1.0.0
License=Creative Commons BY-NC-SA 3.0

[Variables]
Player=WinAmp
BCen=255,255,255,255
BSid=255,64,64,255
Color1=0,0,255
Color3=0,255,0
Color2=255,0,0
CurrentBG=0

[mCPU]
Measure=CPU

[M-Player]
Measure=Plugin
Plugin=NowPlaying.dll
PlayerName=#Player#
PlayerType=TITLE
PlayerPath=
DisableLeadingZero=0
Substitute="":""
; Return value is 1 on error
IfEqualValue=1
IfEqualAction=!Execute [!RainmeterShowMeter ErrorMessage][!RainmeterRedraw]

[M-Artist]
Measure=Plugin
Plugin=NowPlaying.dll
PlayerName=[M-Player]
PlayerType=ARTIST
Substitute="":""

[M-Album]
Measure=Plugin
Plugin=NowPlaying.dll
PlayerName=[M-Player]
PlayerType=ALBUM
Substitute="":""

[M-Art]
Measure=Plugin
Plugin=NowPlaying.dll
PlayerName=[M-Player]
PlayerType=Cover
Substitute="":""

[MeasureAudioRaw]
Measure=Plugin
Plugin=AudioLevel
Type=RMS

[Lua]
Measure=Script
ScriptFile=colorchanger.lua
Colors=#Color1#|#Color2#|#Color3#
MeasureName=MeasureAudioRaw

;; Chameleon stuff!
[ChameleonAA]
Measure=Plugin
Plugin=Chameleon
DynamicVariables=1
Type=File
Path=[M-Art]
Format=Dec

[caaBG1]
Measure=Plugin
Plugin=Chameleon
Parent=ChameleonAA
Color=Background1
Format=Dec

[caaBG2]
Measure=Plugin
Plugin=Chameleon
Parent=ChameleonAA
Color=Background2
Format=Dec

[caaFG1]
Measure=Plugin
Plugin=Chameleon
Parent=ChameleonAA
Color=Foreground1
Format=Dec

[caaFG2]
Measure=Plugin
Plugin=Chameleon
Parent=ChameleonAA
Color=Foreground2
Format=Dec

;===============

; Cloud image with lua modified colors of chameleon colors
[BGPlasma]
Meter=Image
ImageName=plasma1
;fog1920
X=0
Y=0
W=#SCREENAREAWIDTH#
H=(#SCREENAREAHEIGHT#-1)
Tile=1
ImageTint=[Lua]
SolidColor=[caaBG1]
SolidColor2=[caaFG1]
DynamicVariables=1
Group=bg
Hidden=(#CurrentBG#<>0)?

; 1920x108 image with lua modified colors
[BGFog]
Meter=Image
ImageName=fog1920
X=0
Y=0
W=#SCREENAREAWIDTH#
H=(#SCREENAREAHEIGHT#-1)
ImageTint=[Lua]
DynamicVariables=1
Group=bg
Hidden=(#CurrentBG#<>1)?

; 90 degree gradient using chameleon cover colors
[BGGradient]
Meter=Image
X=0
Y=0
W=#SCREENAREAWIDTH#
H=(#SCREENAREAHEIGHT#-1)
SolidColor=[caaFG1]
SolidColor2=[caaBG1]
GradientAngle=90
DynamicVariables=1
Group=bg
Hidden=(#CurrentBG#<>2)?

[AlbumArt]
Meter=Image
MeasureName=M-Art
H=(#SCREENAREAHEIGHT#*(8/10))
X=(#SCREENAREAHEIGHT#*(1/10))
Y=(#SCREENAREAHEIGHT#*(1/10))
PreserveAspectRatio=1


[Text]
Meter=String
MeasureName=M-Artist
MeasureName2=M-Player
MeasureName3=M-Album
X=(([AlbumArt:W])+(#SCREENAREAHEIGHT#*(1/10)))r
Y=([AlbumArt:H]/2)r
FontFace=Segoe UI
FontSize=24
FontColor=255,255,255,255
StringAlign=LeftCenter
StringEffect=Border
FontEffectColor=0,0,0,196
Text=%1#CRLF#%2#CRLF#%3
y=(#SCREENAREAHEIGHT#-[Text:H])
DynamicVariables=1
AntiAlias=1

;======Center======

;======Right======

[MeasureBatteryLeft]
Measure = Plugin
Plugin = PowerPlugin
PowerState = Percent

[LeftStyle]
DynamicVariables=1
AntiAlias=1

[BattW]
Meter=STRING
FontColor=0,0,0,1
Text="100%"
AntiAlias=1
ClipString=1
DynamicVariables=1
AntiAlias=1
FontFace=Segoe UI
FontSize=16
StringAlign=Right

[BattBar]
MeasureName = MeasureBatteryLeft
Meter = BAR
; Toggle the line below: comment for top display, uncomment for bottom
; Y=(#SCREENAREAHEIGHT#-[MeterSecs:H])
W = [BattW:W]
H = [BattW:H]
SolidColor=128,0,0,255
BarColor=0,128,0,255
BarOrientation=Vertical
BarBorder = 0
DynamicVariables=1

[BattTxt]
Meter=STRING
MeasureName=MeasureBatteryLeft
MeterStyle=BattW
X=([BattBar:X]+[BattBar:W])
Y=r
FontColor=255,255,255,255
Text="%1%"

[MeasureTime]
Measure=Time
Format=%H:%M

[MeasureSec]
Measure=Time
Format=%S

; METERS *****************************************
[RightStyle]
Meter=String
DynamicVariables=1
AntiAlias=1
FontFace=Segoe UI
FontSize=64
StringAlign=Center
ClipString=1
StringEffect=Border
FontEffectColor=0,0,0,196

[MeterTime]
Meter=STRING
MeterStyle=RightStyle
MeasureName=MeasureTime
X=(#SCREENAREAWIDTH#/2)
Y=-25
FontColor=#BCen#
Text="%1"
Smurfier's
colorchanger.lua

Code: Select all

-- ColorChanger v1.3 by Smurfier (smurfier20@gmail.com)
-- This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 License.

PROPERTIES={Colors='';MeasureName='';MinimumValue=0;MaximumValue=1;}

function Initialize()
   MinValue,Colors,Measure=tonumber(PROPERTIES.MinimumValue),{},SKIN:GetMeasure(PROPERTIES.MeasureName)
   for a=1,4 do Colors[a]={} end
   if string.len(PROPERTIES.Colors)==0 or not string.match(PROPERTIES.Colors,'%d+%s-,%s-%d+%s-,%s-%d+') then
      print('ColorChanger: Invalid color string')
   elseif not Measure then
      print('ColorChanger: Cannot retrieve Measure '..PROPERTIES.MeasureName)
   else
      for a in string.gmatch(PROPERTIES.Colors,'[^%|]+') do
         local b={}
         for c in string.gmatch(a,'[^,]+') do table.insert(b,tonumber(c)) end
         for d=1,4 do table.insert(Colors[d],b[d] and b[d] or 255) end
      end
      Divider=math.ceil((tonumber(PROPERTIES.MaximumValue)-MinValue)/(#Colors[1]-1))
   end
end

function Update()
   if #Colors[1]<2 or not Measure then
      return #Colors[1]==1 and string.gsub(PROPERTIES.Colors,'|','') or '255,255,255,255'
   else
      local rValue,uColor=Measure:GetValue()-MinValue,{}
      Num=math.floor(rValue/Divider)
      for i=1,4 do table.insert(uColor,Average(Colors[i][Num+1],Colors[i][Num+2],rValue%Divider,Divider)) end
      return table.concat(uColor,',')
   end
end

function Average(a,b,c,d) return (a*(d-c)+(b and b or 0)*c)/d end
plasma1.png
plasma1.png
fog1920.png
fog1920.png
You do not have the required permissions to view the files attached to this post.
User avatar
winterwulf
Posts: 94
Joined: August 17th, 2016, 1:48 am
Location: São Paulo - Brazil

Re: YouTube-like now-playing lock screen

Post by winterwulf »

Would you pack the .rmskin I found it interesting :)
User avatar
eclectic-tech
Rainmeter Sage
Posts: 5384
Joined: April 12th, 2012, 9:40 pm
Location: Cedar Point, Ohio, USA

Re: YouTube-like now-playing lock screen

Post by eclectic-tech »

NPLock RMSkin:
NPLock_0.2016.10.10.rmskin
I haven't really look at much of the original code in so far as to whether any other changes are needed... just played with adding the chameleon colors and other possible effects that FuzzyLizard530 mentioned. :welcome:
You do not have the required permissions to view the files attached to this post.
User avatar
winterwulf
Posts: 94
Joined: August 17th, 2016, 1:48 am
Location: São Paulo - Brazil

Re: YouTube-like now-playing lock screen

Post by winterwulf »

eclectic-tech wrote:NPLock RMSkin: NPLock_0.2016.10.10.rmskin

I haven't really look at much of the original code in so far as to whether any other changes are needed... just played with adding the chameleon colors and other possible effects that FuzzyLizard530 mentioned. :welcome:
Thanks buddy, gonna check it out :)
User avatar
FuzzyLizard530
Posts: 75
Joined: August 5th, 2014, 2:09 am

Re: YouTube-like now-playing lock screen

Post by FuzzyLizard530 »

I've been tinkering with this a bit, and I really like how this looks! I have to admit, I was expecting something considerably different when I suggested a plasma background, but this is pretty nice, too! I'd put my code up, but I'm on my phone right now, and it's a pain to transfer everything, open it in the right text editor, copy, paste, and comment all from my phone, but I'll add it first chance I get.

In the meantime, does anyone know how to center the [text] output on screen when the album art is not present AND back when it is?

The way I have it set up is sorta like this:

Code: Select all

[TextRightArt]
Settings= move text left of art
Etc..

[NoArt-center]
Settings= centered on screen
Etc.

[Text]
MeterStyle=[Text right of art] ; default setting
IfCondition= AlbumArt:W = 0
IfTrueAction=[!SetOption Text MeterStyle NoArt-center]
IfFalseAction=[!SetOption Text MeterStyle TextRightArt]

 
I've tried a few different versions/variations of this, but once I have an album art on screen, it sticks to the [TextRightArt] settings. Any one got an idea?
Last edited by FuzzyLizard530 on October 13th, 2016, 7:04 am, edited 1 time in total.
I may or may not have a signature in this, very location...
User avatar
eclectic-tech
Rainmeter Sage
Posts: 5384
Joined: April 12th, 2012, 9:40 pm
Location: Cedar Point, Ohio, USA

Re: YouTube-like now-playing lock screen

Post by eclectic-tech »

IfCondition and IfMatch only work in MEASURES...

Rather than creating 2 styles, I would just set the X option of the meter based on the [M-Art] string value using IfMatch...

Code: Select all

[M-Art]
Measure=Plugin
Plugin=NowPlaying.dll
PlayerName=[M-Player]
PlayerType=Cover
Substitute="":""
IfMatch=^$
IfMatchAction=[!SetOption Text X "((#SCREENAREAHEIGHT#*(1/10)))"][!UpdateMeter Text][!Redraw]
IfNotMatchAction=[!SetOption Text X "(([AlbumArt:W])+(#SCREENAREAHEIGHT#*(1/10)))r"][!UpdateMeter Text][!Redraw]
IfMatchMode=1

User avatar
FuzzyLizard530
Posts: 75
Joined: August 5th, 2014, 2:09 am

Re: YouTube-like now-playing lock screen

Post by FuzzyLizard530 »

eclectic-tech wrote:IfCondition and IfMatch only work in MEASURES...
Well that explains why it wasn't working! LOL! Many thanks! "Final" code or .RMSkin to follow soon!
I may or may not have a signature in this, very location...
User avatar
FuzzyLizard530
Posts: 75
Joined: August 5th, 2014, 2:09 am

Re: YouTube-like now-playing lock screen

Post by FuzzyLizard530 »

So Here it is. it is a 2-part skin. There's the above mentioned lock screen, and an All-In-One InfoBar. I do want to mention that the info bar is set up for the taskbar to be at the top of the screen [It just seems more intuitive to me that way]. If you have your TBar at the bottom, just delete

Code: Select all

[!Move "0" "30"]
from the [Rainmeter] section, or change it to

Code: Select all

[!Move "0" "0"]
Lock Screen Preview
screenshot.1476312707.png
All-In-One Bar Preview
screenshot.1476312611.png
Download[G-Drive link, too big?]
You do not have the required permissions to view the files attached to this post.
I may or may not have a signature in this, very location...