How to Show Value Popup with Script Look And Feel
-
I have tried
const var s = Content.addKnob("Knob1", 10, 10); s.set("showTextBox", false); s.set("style", "Knob"); s.set("height", 50); s.set("width", 50); const var laf = Content.createLocalLookAndFeel(); const var vp = Content.createPath(); const var ARC_POS = 2.4; /** This function is called from the broadcaster whenever the slider value changes. */ inline function updateSliderPath(component, value) { // We can reuse the same path since it is not stored as reference. */ vp.clear(); vp.startNewSubPath(0.0, 0.0); vp.startNewSubPath(1.0, 1.0); vp.addArc([0.1, 0.1, 0.8, 0.8], -1.0 * ARC_POS, -1.0 * ARC_POS + 0.2 + component.getValueNormalized() * (2.0 * ARC_POS - 0.2)); // We want it to render the "outline" of the arc so we need to transform it to a // stroked path local sp = vp.createStrokedPath(0.2, []); // Now we pass in the stroked path using the "path" conversion type to create a Base64 // string that is stored to the stylesheet of the component. // Note that this must not use laf.setStyleSheetProperty() because that would send the path // to all registered sliders! component.setStyleSheetProperty("valuePath", sp, "path"); } // Now we add the broadcaster and attach it to our slider. const var sliderPathUpdater = Engine.createBroadcaster({ "id": "sliderPathUpdater", "args": ["component", "value"] }); // If you want more sliders, just pass them into this array here sliderPathUpdater.attachToComponentValue(["Knob1"], ""); sliderPathUpdater.addListener(0, "\"update the slider path\"", updateSliderPath); laf.setInlineStyleSheet(" .scriptslider { color: white; vertical-align: bottom; font-size: 0.8em; } /** Draw the circle in the middle. */ .scriptslider::after { content: ''; /** Needs to set to absolute so that the area won't be sliced away from the normal slider area which prevents the text from showing up. */ position: absolute; border-radius: 50%; margin: 15px; background: #555; } /** Draw the value path that we calculated in HISE script. */ .scriptslider::before { content: ''; position: absolute; background-color: #555; /** Use the path from HISE script as background shape. */ background-image: var(--valuePath); margin: 4px; } .scriptslider::before:hover { background: #666; } .scriptslider::before:active { background: linear-gradient(to bottom, #777, #666); } "); s.setLocalLookAndFeel(laf);
From https://docs.hise.dev/ui-components/plugin-components/knob.html
( However I didn't find it on HISE Docs)
But the above example doesn't show Value Popup. How can I do it ?