Play / Pause button transition

Dashboard Design Generic Design Discussion
1

ok, give up.

How is the transition of the image from play to pause icon acheived upon pressing in RD please?

2

Every gauge, including buttons have three stages:

  • Normal
  • Warning
  • Critical

Pretty much any setting in Look’n Feel can be edited separately for each level. Using the music play button as an example:

  • Make a button and go to ‘Input & Values’
  • Link to ‘Song Playing’ and set:
    • range: 0 - 1
    • warning level: 0 - 0.3
    • critical level: 0 - 0.6

Now, when Song Playing input changes to 1, button enters into critical level.

  • Go to Look’n Feel->Images
  • See the ‘Editing Level’ at the left bottom.
  • That allows you to change on what level you are modifying the settings of the gauge.
  • Select button background image for normal level (Song not playing), and then for warning and critical levels (Song Playing).
3

Thanks, i thought it worked this way and spent time going through it on the music player example, but could not see it. The music player seems to use subframes?

4

Yes. Using subframes is an optimization trick that minimizes need for texture changes. Idea is that all indicator images are arranged to a single image, and a subframe is sampled from there.

5

ok, have it working with the error level now.

Subframes seems interesting, is there any info about how to use this?

6

You arrange multiple images into single image. This becomes something known as “image/texture atlas”:

realdash-music-player-buttons

In above example there is 3x2 images arranged to a single image.

Now you can make an Gauge and use a subframe from that image:

  • Create a Gauge
  • Go to Look’n Feel->Images->Background Image and import/select an atlas image.
  • In Look’n Feel->Images->Subframes set the number of X (horizontal) and Y (vertical) subframes. In case of the example image, that is 3 and 2.
  • In same settings, change the ‘Subframe’ value to switch to different parts of the atlas. 1 being the first frame and 6 the last (with our example image)

This technique is especially powerful when lot of small indicator images are used on the dashboard. It significantly reduces load times and makes rendering the Gauges much faster.

4 Likes
7

Thats sweet, have changed my music player buttons to these subframe ones.