DP Meter Pro Skinning help

Official support for: bluecataudio.com
Post Reply New Topic
RELATED
PRODUCTS

Post

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.

Post

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!

Post

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!
Thank you! It works out perfectly.

Post

Great! Feel free to post screenshots of your skin if you are happy with the result :-)

Post

This is what I got so far, he wanted a minimal and vertical skin.

Image Image

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.

Post

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):

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>
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!

Post

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):

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>
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!
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.

Post

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.

Post Reply

Return to “Blue Cat Audio”