Display slider value with custom font, size, and position

[Yinxi]

Hi,

I’m trying to display the value of a slider (for example, the gain of the "Simple Gain1" module) in the interface. I would also like to be able to change the font, size, and position of the displayed value.

I’ve tried to find a solution, but I’m a bit overwhelmed by all the information. I imagine I need to use a panel script and paintRoutine for LAF to draw the value of the gain, and retrieve the gain value with a function, but this is beyond my current level in HISE.

If anyone has a working example or guidance on how to display a slider value like this with customizable appearance, it would be really helpful.

Thanks in advance.

[HISEnberg]

@Yinxi David's videos are the best place to get started, as well as just diving into the documentation and examples found here on the forum:

https://www.youtube.com/watch?v=3VVknix6-cY
https://www.youtube.com/watch?v=PykrsXv8aqg

This is probably worth looking into as well:
https://www.audiodevschool.com/courses/hise-bootcamp/

[It_Used]

@Yinxi create visual mockup your idea, and i maybe implement this!

[Yinxi]

@It_Used said in Display slider value with custom font, size, and position:

@Yinxi create visual mockup your idea, and i maybe implement this!

Reply

I was thinking something like this : .

And when I change the slider value it will also change the value at the top left

[It_Used]

@Yinxi get resault.

Update:

• Changed visibible values after comma/dot for knob and label (from 1 to 2).
• Some comments have a more nfo.
  

Snippet (Copy and paste in Hise by shortcut Ctrl + Shift + V):

HiseSnippet 1757.3oc0W0saaaCEVJIpK1XsncqO.DFX.xCdpxw4mlELrzDmz40lFi5ztsqJnknh4hDofDUR7Jx6VtbW0mkcytt6PRoHYGmzrrshUiDXyCOGxuy+G1Og6QRS4IFl0OXbLwv7ysFLlIFs8HLkYzqqg48r1CmJHIHMosFGiSSI9Flly+TIAyZKXn97Ge+V3PLyiTRxv30bpG44zHpnjZ+MeFMLbWrO4.ZTEtWdyddb117PdFfm4sbMhwdGgOj7Brjs4rL9Ab5HCyu1psWvJsWcIuNsW0a0.+0Wcs06r7vgAqE3hwqgWY3Zq7308bcMLuyN9TAOYf.KHovgtE2e7fQ7SX5K30zT5vPhbQaiAvMqIar8HZne+BiSpgg4B8KMUyqMUOzZOpO8B5klr6q1.UJQUil4bWGjZWERtWOjLq.oEzP5AVC7Rnwhxcj34KyoVhn1S.I8tFy8UKZ8nGg1CeDA8pdN02lyDDlvIBHraBrnGrNI.6QrWw0sEpsqayMpWGDoKwKDmPPQ5HEOok.QBBHdBjc.OAQNEGEGRZ5TG7voBzw3DjL5A8cHU3lygDwNJ9saHo2XpC9PIuGw3CAfgj3JgGFRRJNtiXCyOsBLi88eFvtci7sZzBsjq7+7Cd.QT4PiS3wjDAkjVp0oDoULmLn9Q+3f8eQ0y6s0aH.idiuE0Pa.GDR8IIMZUuA0WR8BVq23TXMb+0aLt3GohwgJYkvTxRD02OjzmmRETNC14aZujilSR7.5uoX10wsMb0fBbvHZJJFm.oFJSt1ljhXYQCIIoHbflbTD9Q9bQKDM.Mlmg.0BIlTVAG45zFgY9nSRnBBbyq6rbavIElAK.1ILDXpfuQ7Lg5X.+klMWjs56lZ1cjJhF8ttJ3GgkJu92oYAAT4xFZknmFSLBwGERYDHpveqV4nXDAb79a4f5xQLtPFUwNjncXQbeRKsd.+4gYngDDNNNbLBCG2gXA8XRQDnL.LMhyEiXPvuTMhbPuJkfzvAYmqaPjs.QExSLlmJfsf30F.tNh3e.WiZPGfT0WKU0973rXI0sHg7SJ15.xohs3RcL.GlR.pDFFxmkUDdNnfrhcNapPbs01mlFGhGiBwCIgEg2gCCU2XWXyIiwetjM6FUYPEoOcn9LNbYjffxN7CGxO0oeo3dEHJC6yXTFDCiCoP4EIYAXRjg.ZWdtsNSjAJ8TQh4NRsm1GMbLRbBAeTYlpSQpzD4RA.9k8Hj29Kw+pOHNc1YISd9R4bzhmmfAQxt2.ASAUCwCJN.BTPW5iq3zyh8gx66f8F8LhDmhjLRtoP2fCns7Rq2dsk6rbmGe1UVtyCGFND5B5TmxjYHfgi4IKPf3r75K4kCsgb8XNC7iszt6l0ea8Z0qkGAn84x62AYuOSVYHlFBIQwgYGB2Vp.mHxh0djKtj7TpLAOBRojfY7EUR7ySKSHflJK.4qpbkBIM0pFxHCqr0AAsP6vfKi33yy.60A7AhDHDzVgWHjsYyMjF+YxjtJgLWNuVG5XcmxqpjWQIKccIzITwHY0KHA+Dhp9kRUU6BkqVCJko9r9JcVE7JK4Tw3o7G402pIs4Rc5IB.WCyDDa2BK9FfLmswE4SvkrcgSoryQSov4Nssycu1S6MatQEG8K3Bx9LasC8r5no2JHXl6U1mblaKG9J45DzVaXmHbBXDF1XxIXrt5IXpNTkm1pTgQNqGToX+XR95KOiiQtoTNsSNp.VEpYctmU01tFTXTlZV4VQCEjyGs77+bTmyMdUutXAt3ffyrrTGPqK4XXPU8PT0r5RRORvigYNuv+ACHeCt1SgE24g4y9Nt5hIauWNzq84QUGh9WNG5WVc.5Ia2XX9YVp1MFU50.d.SIqS0nofrwk0g6ZUoxsREtmU0TVsd76yROJqfIo9t28t2KoVTAFtAqhJvFE0UKUmNaVTpr.bSTmTRzL+NLLWzROGB7fgKMmKLgM2OKDKlbraoOHeCoQt5LtxYWYfweb0Gr7u1r32TH9.q9Tg2nYiw4lAFg30+KvX9KXtqkdn6R.tf0t+7Ggmqr3EO1jJeWvSKt96nbgW0iLUIxcIvHLUMP+D0WLpRFzly3Yn8XGCo584P20oMuyei0u+FuP75iATuU4eRb5B2Lmvt7Pe4odE0Vug38KrTl7Ok.rJj3SG.eeq93+ODP7RX9HXRq8vvfMxtJuHKZ.Tn2i.PkwHgxd8lyI6nnW6VTEe.g4qV7d3S9lsKplK2rcwleTtiHrWB+MEOIFRMWTQAzalpGUMq8jqQsmXLgh1zz234M4QcIAW51JXmaqfKeaEbkaqfqdaEbsaqfO9CKnb3lmj+ZDHOwvXu96nFqyzbG0zOpTFi+BXhPCHN

Code:

// Make UI.
Content.makeFrontInterface(500, 100);

// Declare master chain effect (for example).
const var Gain = Synth.getEffect("Gain");

// Declare gain knob UI Controller.
const knbGain = Content.addKnob("knbGain", 20, 20);

// Set gain knob properties.
Content.setPropertiesFromJSON("knbGain", {
"type": "ScriptSlider",
"id": "knbGain",
"x": 20,
"y": 20,
"style": "Knob",
"middlePosition": -12.0,
"stepSize": "0.01", // This parameter controls numbers after comma/dot, if you set this parameter to 0.1 and write -19.41 value - then in the out you get -19.40 (-19.4) value.
"min": -100.0,
"max": 0.0,
"suffix": "", // If you need linear dB, write here dB. Do not change knob mode, this is can be apply a negative effect for smoothness them. Use suffix (in the fact it is postfix).
"linkedTo": "",
"showValuePopup": "Below",
"showTextBox": false,
"enableMidiLearn": false});

// Declare value display label.
const lblValueDisp = Content.addLabel("lblValueDisp", 200, 20);

// Set value display label settings.
Content.setPropertiesFromJSON("lblValueDisp", {
"type": "ScriptLabel",
"id": "uninitialised",
"text": 0, // In the future this parameter can be changed by tweak gain knob.
"x": 200,
"y": 20,
"fontName": "Rajdhani", // This parameter can be changed font.
"fontSize": 19.0, // This parameter can be changed sise of font.
"editable": false,
"updateEachKey": true,
"textColour": 4291743438});

// Declare gain knob callback.
inline function onknbGainControl(component, value)
{
	
	// Set label text. (On compile, plugin startup this function apply automatically, if you do not create conditions).
	lblValueDisp.set("text", Engine.doubleToString(value, 2)); // Engine.doubleToString need for control visible numbers after comma/dot in the value. without it we get this value: -7.400000095367432.
	
	// Set gain value.
	Gain.setAttribute(0, value);
	
};
Content.getComponent("knbGain").setControlCallback(onknbGainControl);

[Yinxi]

@It_Used wow thanks that’s awesome ! I’ll be able to dig into all of this.