Character Reference Variables

[jsmorley]

Often you will want to use a symbol in your skin design, perhaps for a media player like ▶ or ⏸, a language character like ඌ or 乫, or other UI elements like ↻ or ☑ or even just a degree symbol like °.

These can be hard to code into your skin, as while the font you are using in your skin may support all of them, your text editor may well not, which can make things confusing and annoying.

In addition, using icons from specialized fonts like FontAwesome was difficult to impossible to use in your skins.

We have added new inline Character Reference Variables, which will allow you to create plain-text references to the Unicode values for these symbols and icons.

In short, you simply find the numeric (hex or decimal) Unicode value for the character you want, and code it as:

[\x2622] : hexadecimal Unicode value. Allowed range is x0-xFFFE.
[\9762] : decimal Unicode value. Allowed range is 0-65536.
In this example, either variant will produce the ☢ character.

Details at Character Reference Variables.

Note that these are designed with the [] "Nested Variables" syntax, as all future new variable types will be, to enable nesting with other variables.

So Text=[\x[#SomeVariable]] or Text=[\[&MeasureName]] will work.

[raiguard]

I believe I have discovered a bug. If you set the value of a standard variable to a CR variable, then reference it using the alternative syntax, the character variable does not get translated to the actual character. See this example:

Code: Select all

[Rainmeter]
MiddleMouseDownAction=[!Refresh]
AccurateText=1

[Variables]
degreeSign=[\176]

[StyleString]
FontFace=Roboto
FontSize=10
FontColor=240,240,240
X=7
Y=3R
Antialias=1

[Background]
Meter=Shape
Shape=Rectangle 2,2,100,50,1 | Fill Color 15,15,15 | Stroke Color 50,50,50 | StrokeWidth 1

[MeterStandardString]
Meter=String
MeterStyle=StyleString
Y=5
Text="Standard#degreeSign#C"

[MeterNestedString]
Meter=String
MeterStyle=StyleString
Text="Nested[#degreeSign]C"

2017-09-25 21_38_35-Program Manager.png

I set the value of the 'degreeSign' variable as the reference variable for a degree sign. When used with the original syntax, everything is fine, but when referenced using the new variable syntax, it fails.

[Brian]

I believe I have discovered a bug.

Thank you for reporting this bug. This has been fixed for the next beta.

-Brian

[raiguard]

Thank you for reporting this bug. This has been fixed for the next beta.

-Brian

[kyriakos876]

...

Details at Character Reference Variables.

...

I downloaded:

Google Material Icons
Download site: https://github.com/google/material-design-icons/tree/master/iconfont
Reference site: https://material.io/icons/

but codes do not seem to work... According to wikipedia,

fontex.png

#5107B is the code for play symbol, but when I try this:

Code: Select all

[MeterChars]
Meter=String
FontSize=20
FontWeight=500
FontColor=255,255,255,255
SolidColor=47,47,47,255
Padding=5,5,5,5
AntiAlias=1
FontFace=MaterialIcons-Regular
Text=[#5107B]

It does not work... I tried [\#5107B] as well but nothing. What am I doing wrong?

NOTE: I have included the font in #@#Fonts

[jsmorley]

I downloaded:

Google Material Icons
Download site: https://github.com/google/material-design-icons/tree/master/iconfont
Reference site: https://material.io/icons/

but codes do not seem to work... According to wikipedia, fontex.png

#5107B is the code for play symbol, but when I try this:

Code: Select all

[MeterChars]
Meter=String
FontSize=20
FontWeight=500
FontColor=255,255,255,255
SolidColor=47,47,47,255
Padding=5,5,5,5
AntiAlias=1
FontFace=MaterialIcons-Regular
Text=[#5107B]

It does not work... I tried [\#5107B] as well but nothing. What am I doing wrong?

NOTE: I have included the font in #@#Fonts

You use hex values in Character Reference Variables as:

[\xe037]

Never use the # character in them. Without the x you are referencing the decimal value, and with x you are referencing the hex value.

Now about that value... Neither [\x5107B] or [\5107B] are valid Unicode characters. In any case, if you are using the Material Icons font from Google, you don't use a number that references a standard character supported by Unicode. The way these icon fonts work is that they "replace" a codepoint, one of the characters in the Unicode Basic Multilingual Plane, with their own glyph. So you need to use a reference to the icon in Material Icons, get the numeric codepoint value, and use that in conjunction with using the font in FontFace= or Inline Setting=Face.

Looks like Google has made it a bit harder to find those numeric codes than they used to, as they are focusing their support on using the font in a browser, where you can just use the string "name" or "ligature" of the character. Sigh... to find the right numeric value, get the "name" from https://material.io/tools/icons/ and then go here:

https://github.com/google/material-design-icons/blob/master/iconfont/codepoints

That is a reference to the numeric codepoints based on the "name".

So the "name" of the character you want is play_arrow, and the numeric codepoint is e037.

NOTE: The "Preferred Family Name" of the font face is FontFace=Material Icons, NOT FontFace=MaterialIcons-Regular. That is the name of the font "file", and has nothing to do with it.

2.png

Code: Select all

[Rainmeter]
Update=1000
DynamicWindowSize=1
AccurateText=1

[Variables]

[MeterOne]
Meter=String
FontFace=Material Icons
FontSize=20
FontWeight=400
FontColor=255,255,255,255
SolidColor=47,47,47,255
Padding=5,5,5,5
AntiAlias=1
Text=[\xe037]

1.png

[kyriakos876]

...
So the "name" of the character you want is play_arrow, and the numeric codepoint is e037.
...

Oh I tried [play_arrow] and [play_arrow e037] but didn't think of [\xe037] at all... no I see that I need x as well...

...
NOTE: The "Preferred Family Name" of the font face is FontFace=Material Icons, NOT FontFace=MaterialIcons-Regular. That is the name of the font "file", and has nothing to do with it.
...

Oh I see... I got it now. Thanks!

[jsmorley]

Oh I tried [play_arrow] and [play_arrow e037] but didn't think of [\xe037] at all... no I see that I need x as well...


Oh I see... I got it now. Thanks!

Yes, Google only provides the numeric codepoints in hex, which in this case is e037, or [\xe037]. In decimal it would be 57399 or [\57399], but there is no advantage at all to using decimal in these things.

[jsmorley]

So some common "media player" characters using Material Icons might be:

Code: Select all

[Rainmeter]
Update=1000
DynamicWindowSize=1
AccurateText=1

[Variables]

[MeterOne]
Meter=String
FontFace=Material Icons
FontSize=20
FontWeight=400
FontColor=255,255,255,255
SolidColor=47,47,47,255
Padding=5,5,5,5
AntiAlias=1
Text=[\xe044] [\xe045] [\xe01f] [\xe020] [\xe037] [\xe034] [\xe047] [\xe04f] [\xe04e] [\xe04d] [\xe050] [\xe255]

1.png

[jsmorley]

I really can't recommend enough that you consider using the free dp4 Font Viewer utility to manage all this...

https://us.fontviewer.de/

1.png

It gives you one, simple, consistent way to find the hex codepoint values for any glyph in any font. Every one of these "icon fonts" have their own "references" to the value for the glyphs, and they are all different, and some easier to use than others. Google's Material Icons is actually a bit of a pain in the ass...