2.5+ design (work in progress)

Locked
admin
Site Admin
Posts: 294
Joined: Sat Jul 20, 2013 12:41 am

2.5+ design (work in progress)

Post by admin »

Starting with 2.5 ARM has changed the way it renders the players data on its window. Now you can fully customize how you want it to look and what to display, as well as having various configurations ready to switch with a click, i.e an interface dedicated to PVP instances, another just to display healing (coming in 2.6), a very simple basic display..

Some examples:

ImageImage
Image

update: made a video showing the basics on how to do all this: https://www.youtube.com/watch?v=GLsLvGBSRwI

To edit these styles or make your own, take a look at the xml files under C:\Users\{user}\AppData\Roaming\Aion RainMeter\UI\default styles
Any xml files inside UI or any subfolders will be parsed by ARM when it starts and add them to the UI menu. You can also supply your own set of class images. The style files are basically a list of elements rendered in order, each with a few settings and condition checks to decide whether they will be drawn; there are also a few text variables to render the dmg, dps etc. Let's check the main default style in main.xml:
Click to show:
// basic settings
<ui type="settings" id="armdefault90328498324309" uiname="PVE + PVP dmg" iconfolder="defaulticons" width="215" height="30" bgColor32="clBlack,255" colorIdle="clWhite" colorSlow="clAqua" colorActive="clLime">

Here we define the basic configuration of this style, this should be always the first line in the XML, where you define the name, location for the class images, size, background color and status colors. Choose a random ID that will be unique from the other theme files.
<switch name="pvpdmg" desc="Show PVP dmg">
<switch name="godstone" desc="Show my Godstone dmg">
2 display modes the user can select with the small "ui" button
// Rounded box covering all
<ui type="RoundRect" condition="playerIsMe" x="1" y="1" x2offset="1" y2offset="1" FillColor32="clDodgerBlue32,200" OutColor32="clBlack32,50" angle="2" edgeWidth="1" alternateRounding="1">
<ui type="RoundRect" condition="playerIsEnemy" x="1" y="1" x2offset="1" y2offset="1" FillColor32="clPurple32,175" OutColor32="clBlack32,50" angle="2" edgeWidth="1" alternateRounding="1">
<ui type="RoundRect" condition="playerIsDefault" x="1" y="1" x2offset="1" y2offset="1" FillColor32="clLightGray32,100" OutColor32="clBlack32,50" angle="2" edgeWidth="1" alternateRounding="1">
<ui type="RoundRect" condition="playerWarning" x="1" y="1" x2offset="1" y2offset="1" FillColor32="clCrimson32,200" OutColor32="clBlack32,50" angle="2" edgeWidth="1" alternateRounding="1">
<ui type="RoundRect" condition="playerGood" x="1" y="1" x2offset="1" y2offset="1" FillColor32="clLightGreen32,200" OutColor32="clBlack32,50" angle="2" edgeWidth="1" alternateRounding="1">
Now we draw the basic background rectangle. The "condition" variables determines whether it will be drawn or not. In this case we have 5 items, but only 1 will be drawn. If more than 1 condition is met, i.e player has been marked as enemy faction but also has a "good" entry in your players database, both of the items will be processed in order, first the enemy one, then the "good" one, so the later one will prevail.
// Player Name
<ui type="PlayerName" LimitLength="20" FontName="Segoe UI" FontSize="7" FontStyle="Bold" FontAliasing="ClearType" x="23" y="3" x2offset="13" y2="35" align="left" singleLine="1" shadow="1" shadowColor="clBlack">
Basic text with the player name
// Dmg and Dps
<ui type="RoundRect" x="120" y="3" x2offset="5" y2="30" FillColor32="clGray32,75" OutColor32="clWhite32,10" angle="5" edgeWidth="2" alternateRounding="0">
<ui type="text" FontName="Segoe UI" FontSize="8" FontColor="clWhite" FontStyle="" FontAliasing="Draft" x="100" y="3" x2offset="8" y2="18" text="Dmg: $dmg$" align="right" singleline="1" shadow="0" shadowcolor="0">
<ui type="text" condition="filtered" FontName="Segoe UI" FontSize="7" FontColor="clWhite" FontStyle="Italic" FontAliasing="Draft" x="100" y="16" x2offset="8" y2="31" text="dps n/a" align="right" singleline="1" shadow="0" shadowcolor="0">
<ui type="text" condition="notfiltered" FontName="Segoe UI" FontSize="7" FontColor="clWhite" FontStyle="Italic" FontAliasing="Draft" x="100" y="16" x2offset="8" y2="31" text="Dps: $dps$ ($avgdps$)" align="right" singleline="1" shadow="0" shadowcolor="0">
Here we are drawing 2 items: first a different color rectangle that will "hold" the dmg text (it will just be below since it's in that order), and then the dmg/dps text. The first dps text is the damage, while the 2nd and 3rd are the dps (look at the 3rd picture above). The 2nd item will only be rendered if there is currently a filter on (by class, mob or pvp), and the 3rd one when there are no filters on.
// pvp dmg
<ui type="RoundRect" switch="pvpdmg" condition="PVP" x="25" y="16" x2="100" y2="28" FillColor32="clRed32,150" OutColor32="clBlack32,50" angle="2" edgeWidth="1" alternateRounding="1">
<ui type="text" switch="pvpdmg" condition="PVP" FontName="Segoe UI" FontSize="6" FontColor="clWhite" FontStyle="Bold" FontAliasing="ClearType" x="27" y="16" x2="100" y2="28" text="PVP: $pvpdmg$" align="left" singleline="1" shadow="1" shadowcolor="clBlack">
Little rectangle and text for pvp damage. Notice the condition "PVP", if there is no pvp damage from this player then these 2 items won't be displayed. Also the "switch" makes it render only when the user has selected that mode (1st one in order is always defaulted)

Notice the godstone "switch" here, either the PVP or the Godstone damage will be displayed with the last 4 items depending on what the user selected.
(edit: gs removed)
// draw class pic
<ui type="classPic" x="3" y="4">
And finally the class picture which should ideally be on top of all other items. Note that you can draw a transparent box on top of the image and then it will be visible.

Missing the old wow-style with gradients? np, just play with the settings:
<ui type="RoundRect" gradient="1" gradientangle="270" gradientcolors="{$000054A8,255}{$0000408,255}" condition="playerIsDefault" x="1" y="1" x2offset="1" y2offset="1" FillColor32="clGray32,100" OutColor32="clBlack32,50" angle="2" edgeWidth="1" alternateRounding="1">
<ui type="RoundRect" gradient="1" gradientangle="270" gradientcolors="{$0097CBFF,255}{$0076EC,255}" condition="playerIsDefault" FillPercent="1" x="1" y="1" x2offset="1" y2offset="1" FillColor32="clLightGray32,200" OutColor32="clBlack32,50" angle="2" edgeWidth="1" alternateRounding="1">
Image

Switches:

You can add your own "condition" requirements for each element, as a means to offer the user various options/styles they can choose from with your theme, i.e. with this code we register 2 switches: one to show Dmg and one to show AP:
<switch name="showDMG" desc="Show All Dmg">
<switch name="showAP" desc="Show AP">

<ui type="text" switch="showDMG" FontName="Segoe UI" FontSize="8" FontColor="clWhite" FontStyle="" FontAliasing="Draft" x="100" y="3" x2offset="8" y2="18" text="$dmg$ ($perc$%)" align="right" singleline="1" shadow="1" shadowcolor="clBlack">
<ui type="text" switch="showAP" FontName="Segoe UI" FontSize="8" FontColor="clWhite" FontStyle="" FontAliasing="Draft" x="100" y="3" x2offset="8" y2="18" text="AP: $ap$" align="right" singleline="1" shadow="1" shadowcolor="clBlack">
The user will then see 2 options when he clicks on the smaller "ui" button/menu and by clicking on either option will activate the switch and see either the Dmg or the AP displayed.

Image

UI elements and options (some explained further below):

Settings: basic UI settings
Click to show:
uiname = name that appears under UI list
id = unique theme identified, any string that's unlikely to be the same as in other themes
iconfolder = folder under /UI with the class icons
width,height = box size
bgColor32 = 32-bit color value
colorIdle = color when player is idle
colorSlow = color when player is slow or has been inactive for a few seconds
colorActive = color when player is actively dpsing
ThemeStyle = you can force the style to use a specific app theme
ForceAlpha = force transparency level for the entire app (0-255)
ClassPic: class picture
Click to show:
x,y = coords
condition = conditional match requirement to process the item
RankPic: rank picture (star.png)
Click to show:
x,y = coords
condition = conditional match requirement to process the item
RoundRect: filled rounded rectangle
Click to show:
condition = conditional match requirement to process the item
FillPercent = adjust width % according to relative dmg percentage vs the #1 player (see examples 1 and 2 above)
x,y,x2,y2(,x2offset,y2offset) = coordinates
FillColor32 = 32-bit color for the background
OutColor32 = 32-bit color for the outline (for both normal fill and gradient modes)
angle = rounded corners angle
edgeWidth = outline width
alternateRounding = use alternate method for rounding corners
gradient = fill with gradient (FillColor32 becomes irrelevant if this option is on)
gradientangle = gradient angle
gradientcolors = array of 32-bit colors (see below)
PlayerName: Text with the player name
Click to show:
condition = conditional match requirement to process the item
LimitLength = limit text length to x characters
FontName = font name
FontSize = font size
FontStyle = font style
FontAliasing = text anti-aliasing method
x,y,x2,y2(,x2offset,y2offset) = coordinates
align = text alignment
singleLine = text wrapping on/off (1 = off)
shadow = text shadow on/off
shadowColor = text shadow color
Text32: text with 32-bit (alpha) color option
Click to show:
condition = conditional match requirement to process the item
x,y = coordinates
FontName = font name
FontSize = font size
FontStyle = font style
FontAliasing = text anti-aliasing method
Color32 = 32-bit color
text = text
AALevel = anti-aliasing level
Text: simple text with alignment settings
Click to show:
condition = conditional match requirement to process the item
x,y,x2,y2(,x2offset,y2offset) = coordinates
FontName = font name
FontSize = font size
FontStyle = font style
FontColor = color
FontAliasing = text anti-aliasing method
text = text
align = text alignment
singleLine = text wrapping on/off (1 = off)
shadow = text shadow on/off
shadowColor = text shadow color
Rectangle: normal rectangle
Click to show:
condition = conditional match requirement to process the item
x,y,x2,y2(,x2offset,y2offset) = coordinates
Color32 = 32-bit color
AA = Anti-aliasing
AAmode = Anti-aliasing mode
Outline: non-opaque rectangle
Click to show:
condition = conditional match requirement to process the item
x,y,x2,y2(,x2offset,y2offset) = coordinates
Color32 = 32-bit color
AA = Anti-aliasing
AAmode = Anti-aliasing mode

Possible values for each parameter:

* They all have to be inside quotes " ", even the numbers
* In the case of 0/1 parameters, simply not including the parameter is enough and will default to 0


AA (Anti-aliasing on/off):
0,1

AAmode (Anti-aliasing mode):
am32, am16, am8, am4, am2, amNone

bgColor32, FillColor32, OutColor32, Color32
This is an ARGB color (Alpha + RGB) with 2 parts: Color,Alpha.
Color part can be either a 32 or 24-bit hex value like $FF00F2A5 or $00F2A5 or a plain decimal like 123456, and then the alpha value in decimal split by a , (no need if you supply a 32-bit value in hex like $FF0A16C4)
The 32-bit color can also be a preset from one of the list shown further below
Example: $FF0000,200 would be full red with alpha set to 200 (from 0-255) so it will be a little transparent/faded

gradient
0,1

gradientangle
0-360

gradientcolors
array of 32-bit colors inside {.......} (any amount but preferably just 2}
example: {clRed32,200}{clWhite32,125}{$F0D1C4,240}{$FFB1210F}
You can also select one of a few presets i.e {theme:DarkNightBack,255} from this list: (use Fore one for the % bar and Back one for the background)
Click to show:
theme:DesertFore
theme:DesertBack
theme:GrassFore
theme:GrassBack
theme:RoseFore
theme:RoseBack
theme:SilverFore
theme:SilverBack
theme:SkyFore
theme:SkyBack
theme:SunFore
theme:SunBack
theme:HackersFore
theme:HackersBack
theme:NightFore
theme:NightBack
theme:VelvetFore
theme:VelvetBack
theme:MetalFore
theme:MetalBack
theme:VioletFore
theme:VioletBack
theme:ToxicFore
theme:ToxicBack
theme:DarkNightFore
theme:DarkNightBack

Here's a test style you can use to check all the different themes: https://drive.google.com/open?id=0B0Kd3 ... E9mV1dUVTA

Image
angle:
0-359

edgeWidth:
0-100

alternateRounding:
0,1

condition values:
playerIsMe: player box is Me
playerIsEnemy: player box is marked as Enemy (opposing faction)
playerIsDefault: default player box color (neither Me nor Enemy)
playerWarning: player marked as warning (hacker/blacklist/bad)
playerGood: player marked as Good in DB
AP: AP > 0 (only from acquired relics)
filtered: list is filtered (pvp mode/class selected/mob selected)
notfiltered: list is not filtered
PVP: PVP damage > 0
classSorc: player class is a sorc
classSm: ..
classCleric
classChanter
classTemplar
classGladi
classSin
classRanger
classBard
classAT
classGunner
ranked: player ranked above Rank1
classIdentified: class identified

FillPercent:
0,1

FontStyle:
bold, italic, underline, strikeout
this can be a combination, i.e "bold, italic"

FontAliasing:
Default, Draft, Proof, NonAntialiased, Antialiased, ClearType, ClearTypeNatural

align:
left, center, right

singleLine: (word-wrapping off for Text element)
0,1

shadow:
0,1

shadowColor, FontColor:
24-bit color either in hex ($RBG) or a preset

FontName:
Any of the default fonts installed in the system, i.e "Arial", "Segoe UI", "Verdana"..

FontSize:
0..x

Text:
Any text, can include the following variables:
$ap$: Abyss Points (only from acquired relics)
$dmg$: total damage
$dps$: dps
$avgdps$: average dps
$pvpdmg$: PVP damage
$dmgperc$: % damage from the total
$maxhit$: max hit
$peak$: peak dps
$rdmg$: received damage
$pvedmg$: PVE damage
$reldmgperc$: damage % relative to the player in the 1st position
$rank$: player position damage-wise
$exp$: gained EXP
$kinah$: gained Kinah
$hpgp$: Honor/Glory Points (yours)
$kills$: mobs/bosses/pvp kills
$pvprank$: pvp rank (1-star etc)

new:
$heal$
$maxheal$
$healperc$,
$relhealperc$



Coordinates:
x,y,x2,y2: top, left, right, down
optional x2offset,y2offset: offset from "width" setting. i.e if ui width=200 then x2offset=5 will be 195. If these are present, x2 and y2 will be ignored

Decent colors guide: http://www.rapidtables.com/web/color/RGB_Color.htm

24-bit color presets:
Click to show:
clBlack
clMaroon
clGreen
clOlive
clNavy
clPurple
clTeal
clGray
clSilver
clRed
clLime
clYellow
clBlue
clFuchsia
clAqua
clLtGray
clDkGray
clWhite
clMoneyGreen
clSkyBlue
clCream
clMedGray
clWebSnow
clWebFloralWhite
clWebLavenderBlush
clWebOldLace
clWebIvory
clWebCornSilk
clWebBeige
clWebAntiqueWhite
clWebWheat
clWebAliceBlue
clWebGhostWhite
clWebLavender
clWebSeashell
clWebLightYellow
clWebPapayaWhip
clWebNavajoWhite
clWebMoccasin
clWebBurlywood
clWebAzure
clWebMintcream
clWebHoneydew
clWebLinen
clWebLemonChiffon
clWebBlanchedAlmond
clWebBisque
clWebPeachPuff
clWebTan
clWebYellow
clWebDarkOrange
clWebRed
clWebDarkRed
clWebMaroon
clWebIndianRed
clWebSalmon
clWebCoral
clWebGold
clWebTomato
clWebCrimson
clWebBrown
clWebChocolate
clWebSandyBrown
clWebLightSalmon
clWebLightCoral
clWebOrange
clWebOrangeRed
clWebFirebrick
clWebSaddleBrown
clWebSienna
clWebPeru
clWebDarkSalmon
clWebRosyBrown
clWebPaleGoldenrod
clWebLightGoldenrodYellow
clWebOlive
clWebForestGreen
clWebGreenYellow
clWebChartreuse
clWebLightGreen
clWebAquamarine
clWebSeaGreen
clWebGoldenRod
clWebKhaki
clWebOliveDrab
clWebGreen
clWebYellowGreen
clWebLawnGreen
clWebPaleGreen
clWebMediumAquamarine
clWebMediumSeaGreen
clWebDarkGoldenRod
clWebDarkKhaki
clWebDarkOliveGreen
clWebDarkgreen
clWebLimeGreen
clWebLime
clWebSpringGreen
clWebMediumSpringGreen
clWebDarkSeaGreen
clWebLightSeaGreen
clWebPaleTurquoise
clWebLightCyan
clWebLightBlue
clWebLightSkyBlue
clWebCornFlowerBlue
clWebDarkBlue
clWebIndigo
clWebMediumTurquoise
clWebTurquoise
clWebCyan
clWebAqua
clWebPowderBlue
clWebSkyBlue
clWebRoyalBlue
clWebMediumBlue
clWebMidnightBlue
clWebDarkTurquoise
clWebCadetBlue
clWebDarkCyan
clWebTeal
clWebDeepskyBlue
clWebDodgerBlue
clWebBlue
clWebNavy
clWebDarkViolet
clWebDarkOrchid
clWebMagenta
clWebFuchsia
clWebDarkMagenta
clWebMediumVioletRed
clWebPaleVioletRed
clWebBlueViolet
clWebMediumOrchid
clWebMediumPurple
clWebPurple
clWebDeepPink
clWebLightPink
clWebViolet
clWebOrchid
clWebPlum
clWebThistle
clWebHotPink
clWebPink
clWebLightSteelBlue
clWebMediumSlateBlue
clWebLightSlateGray
clWebWhite
clWebLightgrey
clWebGray
clWebSteelBlue
clWebSlateBlue
clWebSlateGray
clWebWhiteSmoke
clWebSilver
clWebDimGray
clWebMistyRose
clWebDarkSlateBlue
clWebDarkSlategray
clWebGainsboro
clWebDarkGray
clWebBlack
32-bit color presets
Click to show:
clBlack32
clDimGray32
clGray32
clLightGray32
clWhite32
clMaroon32
clGreen32
clOlive32
clNavy32
clPurple32
clTeal32
clRed32
clLime32
clYellow32
clBlue32
clFuchsia32
clAqua32
clAliceBlue32
clAntiqueWhite32
clAquamarine32
clAzure32
clBeige32
clBisque32
clBlancheDalmond32
clBlueViolet32
clBrown32
clBurlyWood32
clCadetblue32
clChartReuse32
clChocolate32
clCoral32
clCornFlowerBlue32
clCornSilk32
clCrimson32
clDarkBlue32
clDarkCyan32
clDarkGoldenRod32
clDarkGray32
clDarkGreen32
clDarkGrey32
clDarkKhaki32
clDarkMagenta32
clDarkOliveGreen32
clDarkOrange32
clDarkOrchid32
clDarkRed32
clDarkSalmon32
clDarkSeaGreen32
clDarkSlateBlue32
clDarkSlateGray32
clDarkSlateGrey32
clDarkTurquoise32
clDarkViolet32
clDeepPink32
clDeepSkyBlue32
clDodgerBlue32
clFireBrick32
clFloralWhite32
clGainsBoro32
clGhostWhite32
clGold32
clGoldenRod32
clGreenYellow32
clGrey32
clHoneyDew32
clHotPink32
clIndianRed32
clIndigo32
clIvory32
clKhaki32
clLavender32
clLavenderBlush32
clLawnGreen32
clLemonChiffon32
clLightBlue32
clLightCoral32
clLightCyan32
clLightGoldenRodYellow32
clLightGreen32
clLightGrey32
clLightPink32
clLightSalmon32
clLightSeagreen32
clLightSkyblue32
clLightSlategray32
clLightSlategrey32
clLightSteelblue32
clLightYellow32
clLtGray32
clMedGray32
clDkGray32
clMoneyGreen32
clLegacySkyBlue32
clCream32
clLimeGreen32
clLinen32
clMediumAquamarine32
clMediumBlue32
clMediumOrchid32
clMediumPurple32
clMediumSeaGreen32
clMediumSlateBlue32
clMediumSpringGreen32
clMediumTurquoise32
clMediumVioletRed32
clMidnightBlue32
clMintCream32
clMistyRose32
clMoccasin32
clNavajoWhite32
clOldLace32
clOliveDrab32
clOrange32
clOrangeRed32
clOrchid32
clPaleGoldenRod32
clPaleGreen32
clPaleTurquoise32
clPaleVioletred32
clPapayaWhip32
clPeachPuff32
clPeru32
clPlum32
clPowderBlue32
clRosyBrown32
clRoyalBlue32
clSaddleBrown32
clSalmon32
clSandyBrown32
clSeaGreen32
clSeaShell32
clSienna32
clSilver32
clSkyblue32
clSlateBlue32
clSlateGray32
clSlateGrey32
clSnow32
clSpringgreen32
clSteelblue32
clTan32
clThistle32
clTomato32
clTurquoise32
clViolet32
clWheat32
clWhitesmoke32
clYellowgreen32

If you want to experiment with the colors and settings without having to restart ARM each time, start with a basic style with only the settings line so that it will appear under the UI menu, and then select "Settings/UI debug mode". Doing this will enable an extra option under "Help/UI design 32-bit color guide" and also reload the style files each time you select it from the UI menu, that way you can just make changes to the xml in notepad and then re-select the style in ARM to see the changes right away.

Image
Locked