DP Meter Pro Skinning help
-
- KVRian
- 811 posts since 2 Aug, 2013
Hello, I'm helping my friend on skinning DP Meter Pro since I have some basic xml knowledge and he doesn't.
What I need help on is this.
<CHANNEL_TEXT string_id="channel1_name" width="24" h_align="left" text_h_align="left" id="ch1_non_clipped_text"/>
<CHANNEL_TEXT string_id="channe2_name" width="24" h_align="left" text_h_align="left" id="ch2_non_clipped_text"/>
- this displays if the two channels are left, right, mid or side in text form.
CHANNEL_TEXT is defined:
<IF_STEREO>
<DEFINE>
<CHANNEL_TEXT base_type="TEXT"/>
</DEFINE>
</IF_STEREO>
<IF_NOT_STEREO>
<DEFINE>
<CHANNEL_TEXT base_type="TEXT_FIELD" cursor="system::Ibeam"/>
</DEFINE>
</IF_NOT_STEREO>
So instead of it displaying text, I would like it to display images instead. So instead of displaying the text "left,right,mid or side", I would like it to display "left.png,right.png,mid.png or side.png" I tried changing the base_type to "IMAGE" and adding an image path and including "images_count="4"". That didn't seem to work.
I tried looking into the skinning manual but couldn't find anything helpful.
Any help would be appreciated.
What I need help on is this.
<CHANNEL_TEXT string_id="channel1_name" width="24" h_align="left" text_h_align="left" id="ch1_non_clipped_text"/>
<CHANNEL_TEXT string_id="channe2_name" width="24" h_align="left" text_h_align="left" id="ch2_non_clipped_text"/>
- this displays if the two channels are left, right, mid or side in text form.
CHANNEL_TEXT is defined:
<IF_STEREO>
<DEFINE>
<CHANNEL_TEXT base_type="TEXT"/>
</DEFINE>
</IF_STEREO>
<IF_NOT_STEREO>
<DEFINE>
<CHANNEL_TEXT base_type="TEXT_FIELD" cursor="system::Ibeam"/>
</DEFINE>
</IF_NOT_STEREO>
So instead of it displaying text, I would like it to display images instead. So instead of displaying the text "left,right,mid or side", I would like it to display "left.png,right.png,mid.png or side.png" I tried changing the base_type to "IMAGE" and adding an image path and including "images_count="4"". That didn't seem to work.
I tried looking into the skinning manual but couldn't find anything helpful.
Any help would be appreciated.
-
Blue Cat Audio Blue Cat Audio https://www.kvraudio.com/forum/memberlist.php?mode=viewprofile&u=39981
- KVRAF
- 6349 posts since 8 Sep, 2004 from Paris (France)
It would probably be easier to replace directly the CHANNEL_TEXT inside the skin instead of changing the DEFINE. Also, an image component will only display one single image. You could replace it like this for example:
<IMAGE image="left.png"/>
...
<IMAGE image="right.png"/>
If you need to change the images to mid/side when Mid/Side mode is on, you will need to use 4 images instead of two and link the visible attributes like this:
<LAYER_STACK>
<IMAGE image="left.png" id="left_image"/>
<IMAGE image="mid.png" id="mid_image"/>
<PARAM_LINK from="$stereo_mode$" to="left_image.visible" reverse="true"/>
<PARAM_LINK from="$stereo_mode$" to="mid_image.visible" />
</LAYER_STACK>
...
<LAYER_STACK>
<IMAGE image="right.png" id="right_image"/>
<IMAGE image="side.png" id="side_image"/>
<PARAM_LINK from="$stereo_mode$" to="right_image.visible" reverse="true"/>
<PARAM_LINK from="$stereo_mode$" to="side_image.visible" />
</LAYER_STACK>
Hope this helps!
<IMAGE image="left.png"/>
...
<IMAGE image="right.png"/>
If you need to change the images to mid/side when Mid/Side mode is on, you will need to use 4 images instead of two and link the visible attributes like this:
<LAYER_STACK>
<IMAGE image="left.png" id="left_image"/>
<IMAGE image="mid.png" id="mid_image"/>
<PARAM_LINK from="$stereo_mode$" to="left_image.visible" reverse="true"/>
<PARAM_LINK from="$stereo_mode$" to="mid_image.visible" />
</LAYER_STACK>
...
<LAYER_STACK>
<IMAGE image="right.png" id="right_image"/>
<IMAGE image="side.png" id="side_image"/>
<PARAM_LINK from="$stereo_mode$" to="right_image.visible" reverse="true"/>
<PARAM_LINK from="$stereo_mode$" to="side_image.visible" />
</LAYER_STACK>
Hope this helps!
-
- KVRian
- Topic Starter
- 811 posts since 2 Aug, 2013
Thank you! It works out perfectly.Blue Cat Audio wrote:It would probably be easier to replace directly the CHANNEL_TEXT inside the skin instead of changing the DEFINE. Also, an image component will only display one single image. You could replace it like this for example:
<IMAGE image="left.png"/>
...
<IMAGE image="right.png"/>
If you need to change the images to mid/side when Mid/Side mode is on, you will need to use 4 images instead of two and link the visible attributes like this:
<LAYER_STACK>
<IMAGE image="left.png" id="left_image"/>
<IMAGE image="mid.png" id="mid_image"/>
<PARAM_LINK from="$stereo_mode$" to="left_image.visible" reverse="true"/>
<PARAM_LINK from="$stereo_mode$" to="mid_image.visible" />
</LAYER_STACK>
...
<LAYER_STACK>
<IMAGE image="right.png" id="right_image"/>
<IMAGE image="side.png" id="side_image"/>
<PARAM_LINK from="$stereo_mode$" to="right_image.visible" reverse="true"/>
<PARAM_LINK from="$stereo_mode$" to="side_image.visible" />
</LAYER_STACK>
Hope this helps!
-
Blue Cat Audio Blue Cat Audio https://www.kvraudio.com/forum/memberlist.php?mode=viewprofile&u=39981
- KVRAF
- 6349 posts since 8 Sep, 2004 from Paris (France)
Great! Feel free to post screenshots of your skin if you are happy with the result 
-
- KVRian
- Topic Starter
- 811 posts since 2 Aug, 2013
This is what I got so far, he wanted a minimal and vertical skin.

I won't be able to work on it until next month since that's when I'll visit his studio again. I'll happily release it once it's done (whenever that is).
Just a question if you don't mind helping me again. If a button has more than 2 states (the stereo button has 2 states (right-side/left-mid), how would you go about assigning images to those other states? Like the "range" button which has 3 states (30,60db,120db), I'd like it to display a different image at each different state.
<LAYER_STACK>
<IMAGE image="1.png" id="1_image"/>
<IMAGE image="2.png" id="2_image"/>
<IMAGE image="3.png" id="3_image"/>
<PARAM_LINK from="random_param" to="1_image.visible" reverse="true"/>
<PARAM_LINK from="random_param" to="2_image.visible" />
<PARAM_LINK from="random_param" to="3_image.visible" />
</LAYER_STACK>
this isn't working for me.

I won't be able to work on it until next month since that's when I'll visit his studio again. I'll happily release it once it's done (whenever that is).
Just a question if you don't mind helping me again. If a button has more than 2 states (the stereo button has 2 states (right-side/left-mid), how would you go about assigning images to those other states? Like the "range" button which has 3 states (30,60db,120db), I'd like it to display a different image at each different state.
<LAYER_STACK>
<IMAGE image="1.png" id="1_image"/>
<IMAGE image="2.png" id="2_image"/>
<IMAGE image="3.png" id="3_image"/>
<PARAM_LINK from="random_param" to="1_image.visible" reverse="true"/>
<PARAM_LINK from="random_param" to="2_image.visible" />
<PARAM_LINK from="random_param" to="3_image.visible" />
</LAYER_STACK>
this isn't working for me.
-
Blue Cat Audio Blue Cat Audio https://www.kvraudio.com/forum/memberlist.php?mode=viewprofile&u=39981
- KVRAF
- 6349 posts since 8 Sep, 2004 from Paris (France)
Wow! It looks very nice, it's impressive!! 
For the buttons, the preferred way is to use a IMAGE_PARAM_BUTTON widget that includes an film-strip image containing the 3 images.
However if for some reason you really need to use separate images, you can still do the following (previous example worked only for a 2-states boolean parameter):
And you can change values in the formula accordingly.
By the way we are working on a fully redesigned documentation for the KUIML language. I hope it will make writing skins easier!
For the buttons, the preferred way is to use a IMAGE_PARAM_BUTTON widget that includes an film-strip image containing the 3 images.
However if for some reason you really need to use separate images, you can still do the following (previous example worked only for a 2-states boolean parameter):
Code: Select all
<LAYER_STACK>
<IMAGE image="1.png" id="1_image"/>
<IMAGE image="2.png" id="2_image"/>
<IMAGE image="3.png" id="3_image"/>
<PARAM_LINK from="random_param" to="1_image.visible" formula="x==0"/>
<PARAM_LINK from="random_param" to="2_image.visible" formula="x==1"/>
<PARAM_LINK from="random_param" to="3_image.visible" formula="x==2"/>
</LAYER_STACK>By the way we are working on a fully redesigned documentation for the KUIML language. I hope it will make writing skins easier!
-
- KVRian
- Topic Starter
- 811 posts since 2 Aug, 2013
Ah that seems to make more sense, thanks! Also it's great to hear about the redesign, you wouldn't believe how long it took me to wrap my head around how the "flex" mechanic worked.Blue Cat Audio wrote:Wow! It looks very nice, it's impressive!!
For the buttons, the preferred way is to use a IMAGE_PARAM_BUTTON widget that includes an film-strip image containing the 3 images.
However if for some reason you really need to use separate images, you can still do the following (previous example worked only for a 2-states boolean parameter):And you can change values in the formula accordingly.Code: Select all
<LAYER_STACK> <IMAGE image="1.png" id="1_image"/> <IMAGE image="2.png" id="2_image"/> <IMAGE image="3.png" id="3_image"/> <PARAM_LINK from="random_param" to="1_image.visible" formula="x==0"/> <PARAM_LINK from="random_param" to="2_image.visible" formula="x==1"/> <PARAM_LINK from="random_param" to="3_image.visible" formula="x==2"/> </LAYER_STACK>
By the way we are working on a fully redesigned documentation for the KUIML language. I hope it will make writing skins easier!
-
Blue Cat Audio Blue Cat Audio https://www.kvraudio.com/forum/memberlist.php?mode=viewprofile&u=39981
- KVRAF
- 6349 posts since 8 Sep, 2004 from Paris (France)
You should contact us if you have any issue. it would also help us improve the documentation. Flex cells are pretty powerful, and it is not a big deal once you got it, but it may indeed sound confusing at first.