Image Gauge Effects

Dashboard Design Dashboard animations
1

RealDash version 2.3.9 introduced a new feature of Image Gauge Effects.

We had to create some custom animations for a manufacturer project which required controlling the animation with RealDash inputs. A video was not an option as it is not possible to control the video playback with such a precision. As a solution we created an option to write your own fragment shaders for Image Gauge. Originally we were not about to publish this feature, but as the development was done already we figured why not.

Understanding the background of Image Gauge Effects helps you understand that this is custom- and quite complicated to get working properly. We probably have no resources to help you write custom shaders. But this could be something fun for extreme power users.

How to use

  • Add image gauge and go to Look’n Feel->Special->Effects
  • There are 5 premade example effects to choose from, or alternatively you can use custom file or upload a shader file as an asset to the dashboard.
  • Some of the premade examples are very heavy, especially the ‘Weird Tunnel’ effect. Expect it to pull your framerate down on most devices.

Here is an template shader file:

precision mediump float;

uniform sampler2D rdGaugeTexture;
uniform float rdTime;

// rdValues:
// x = rdGaugeTexture is set
// y = gauge attached value
// z = RPM
// w = vehicle speed
uniform vec4 rdValues;
uniform vec4 rdBackgroundColor;
uniform vec4 rdBlendColor;

varying vec2 rdGaugeTexCoord;

// rdGaugeNormalizedArea: rendering area in normalized -1.0 to 1.0 coordinates.
varying vec2 rdGaugeNormalizedArea;

void main()
{
    gl_FragColor = texture2D(rdGaugeTexture, rdGaugeTexCoord) * rdBlendColor;
}

Version of fragment shader is GLSL ES 1.0. This is required for maximum device compatibility.

Windows version of RealDash is required to use DirectX for graphics rendering by Microsoft Store. Our game engine has automated parser that converts the OpenGL shader code into DirectX HLSL shader. As this was never intended to be a public tool, and therefore has a lot of limitations. Some of the most notable limitations:

  • Shader global variables are not supported.
  • Some constructors does not work, like vec3(val), which needs to be written as vec3(val, val, val).
  • Probably a lot more.

But as said, this may be something fun to experiment with for power users.

2 Likes