Tag Archives: tutorial

How to: use the shader.xml

How to: use the shader.xml

So after playing with code and research, i now know how a shader actually works.

Shader.xml is a piece of code that can modify the attributes of your icons:

Each line of code says execute, target, mode, value.
basically it says in plain english “this thing, do something to it, this much:

Code:
<exec t="(TargetRegister)(TargetChannel)" m="(Mode)"
v="(InputRegister)(InputChannel or RegisterValue) or (Value)"/>

TargetRegister: (Generally we are executing a line for its output)
O = Output
B = 
I don’t know 

TargetChannel: (This is the colour channel we wish to modify)
A = Alpha (opacity)
R = Red
G = Green
B = Blue

Mode (Mode is the modification we want to make to the colour channel)
W= Write
S = Subtract
M = Multiply
D = Divide
A = Add

Values:

InputRegister = I

InputChannel:
A = Alpha (opacity)
R = Red
G = Green
B = Blue

RegisterValue
I = Intensity (at each pixel)
H = Overall brightness of image
(so a value of “IA” outputs the same value as the alpha channel had on input)

Value = 0 – 255

Ok Sam, all very interesting and technical, how do I use it?

First off, (mostly for noobs) wrap everything else inside this:

Code:
<?xml version="1.0" encoding="utf-8"?>
<shader version="1.0">

<!-- Blah blah blah -->

</shader>

Next the (target)channels need to be written down before anything else.
Tip
Even if you modify one channel only, you still need to ‘write’ them all

Code:
<exec t="OA" m="W" v="IA"/>
<exec t="OR" m="W" v="IR"/>
<exec t="OG" m="W" v="IG"/>
<exec t="OB" m="W" v="IB"/>

In effect this piece of code writes each channel down as it is: “output target is write input channel” (write down what you have) from here you can make modifications.

Now we can modify the parameters, most of these thing happen in 2 or 3 steps,
i’ll start with an easy one bear with me here…

Example A. – Change Alpha levels
Write Channels > make Alpha 75%

My 192 Series themes: 192 Series Colours Plus192 Series Colours Lite are designed around having every icon semi transparent. The alpha level of each icon is 192 (see what i did there?)

I wanted to make the alpha level of any unthemed icon 192.

I know the required output is (up to) 192
I know the input is (up to) 255
Maths tells me thats 75% of the original value, so its easy to Multiply by 0.75

Code:
   <exec t="OA" m="W" v="IA"/>
   <exec t="OR" m="W" v="IR"/>
   <exec t="OG" m="W" v="IG"/>
   <exec t="OB" m="W" v="IB"/>
   <exec t="OA" m="M" v=".75"/>

It is also possible to Divide 255 / 1.33 = 192, or Subtract 255 – 63 = 192

Code:
<exec t="OA" m="D" v="1.33"/>
<exec t="OA" m="S" v="63"/>

Example B – Greyscale
Write channels [Colour neutral/Grey] > make alpha 75%

We know that “II” is “Input Intensity” the below code will write Alpha as it is and the colours neutral – Most people are now familiar with the greyscale code:
Then I Add the Alpha, this works on my 192 Series Black Theme

Code:
   <exec t="OA" m="W" v="IA"/>
   <exec t="OR" m="W" v="II"/>
   <exec t="OG" m="W" v="II"/>
   <exec t="OB" m="W" v="II"/>
   <exec t="OA" m="M" v=".75"/>

Example C – Add Colour
Write channels [Colour neutral/Grey] > make alpha 75% > Colour Red

This will colour every unthemed icon in my 192 Series Red theme, surprisingly enough, red………

Code:
   <exec t="OA" m="W" v="IA"/>
   <exec t="OR" m="W" v="II"/>
   <exec t="OG" m="W" v="II"/>
   <exec t="OB" m="W" v="II"/>
   <exec t="OA" m="M" v=".75"/>
   <exec t="OR" m="A" v="255"/>
   <exec t="OG" m="A" v="0"/>
   <exec t="OB" m="A" v="0"/>

Example D – Contrast
Write channels > Subtract the overall brightness > Multiply each channel by 1.2 > Add the overall brightness back.

Code:
<exec t="OA" m="W" v="IA"/>
<exec t="OR" m="W" v="IR"/>
<exec t="OG" m="W" v="IG"/>
<exec t="OB" m="W" v="IB"/>

<exec t="OR" m="S" v="IH"/>
<exec t="OG" m="S" v="IH"/>
<exec t="OB" m="S" v="IH"/>

<exec t="OR" m="M" v="1.2"/>
<exec t="OG" m="M" v="1.2"/>
<exec t="OB" m="M" v="1.2"/>

<exec t="OR" m="A" v="IH"/>
<exec t="OG" m="A" v="IH"/>
<exec t="OB" m="A" v="IH"/>

Example E – Saturation

Write channels > Subtract Intensity > Multiply each channel by 1.4 > Add Intensity

Code:
<exec t="OA" m="W" v="IA"/>
<exec t="OR" m="W" v="IR"/>
<exec t="OG" m="W" v="IG"/>
<exec t="OB" m="W" v="IB"/>

<exec t="OR" m="S" v="II"/>
<exec t="OG" m="S" v="II"/>
<exec t="OB" m="S" v="II"/>

<exec t="OR" m="M" v="1.4"/>
<exec t="OG" m="M" v="1.4"/>
<exec t="OB" m="M" v="1.4"/>

<exec t="OR" m="A" v="II"/>
<exec t="OG" m="A" v="II"/>
<exec t="OB" m="A" v="II"/>

Example F – Invert

This one’s kind of neat, pretty much says, write 255, then subtract the input value
So what ever you colour channel value is, the will give you the opposite, inverting the icon.

Code:
<exec t="OA" m="W" v="IA"/>
<exec t="OR" m="W" v="255"/>
<exec t="OG" m="W" v="255"/>
<exec t="OB" m="W" v="255"/><exec t="OR" m="S" v="IR"/>
<exec t="OG" m="S" v="IG"/>
<exec t="OB" m="S" v="IB"/>

That should give you all an understanding of how the shader works, specific examples, and the ability to write your own.

Advertisements