Displaying sync delay time properly

pcs800

I had posted about this months ago, but it didn't get resolved, and David mentioned that it is something Christoph needs to fix in Hise.

Video here

HISEnberg

@pcs800 Actually I think you were touching on the solution in the video already. Typically what you would do is map the value to a new set of values. In this case though it looks like the function is already built into the Engine API as Engine.getTempoName();

Here's an example:

HiseSnippet 1039.3ocsV08aaaCDmxIJnwaoXEn+AH3mTFLBjcRlWPvvbi+XyXMoFydAa6k.ZRZahPQJPQ0XuhBz+j6a6wsiRxVJ0YooFX5AAce+i2w6NMTqHr3XkF4Tc7xHFx4qcGsTZl2YNlKQC5hbdt6k3XCS6kw5hkQ33XFE43ryOYY3r+tnzmO9iWfEXIgUvBgtVwIrWyC4lBtCa+KbgnOlxFyCKo8IsGPTxNJgJAvyNtAnHL4V7L1UXqZUbQ+LNdNx4acCXSlPmN43yXMazn4YmFbZqIMAVGyH3lSacRifVm1p4Y.H2qGkaT5QFrgECN8BEc4n4p6jYA3ZdLehfYIZfFAQNiMpybtfNbUxIFgb1cXQpZmrT0KcujS4q4Wjx9lTAdEVTNo4T4wfTiu.H4TBR6lAoW3Nhn4QlBIV77UtCjPEbJFpMkgRltnJ+cE2NJPCo4nP7sr9ZfXsE9GGDT2Cdc34UqB0mXi2awZuakStYLKLR48CdqLdFyzQArj.ges0ZTCrrvvHo3lt73HAd4+ookzwZb0pZ1LORhVCRSc4.Iks.LO.DxkBtj4MMQRLbkzSIWGYq20JgOYkqqCPPjvNr56p5AOOjKSU37TwkfwQZVDTdM9.bde0pqivQwVfmFkNXgXBbg0eS.XOCkcFXzPq29UUhAvt+Jr6OaExrYJLfFybdrM47ZEAKtPkHow91JwJcL1nX6O.c6ImANyp83Ub823Dlaa5qYYn21u4Grne9StFoB6qrkiov6Z08ZFrVDUiu6UB9LIiNlsv3uFF08v08pQfPpYTas68GddoJyUJC6MRe6obeHO58ohlN8AkkmFEL8CJ1NFQ+XF5KSBmvzkp9oJBsM2uWbumVuHI6RaIEUxARt4MQrb59JA01iY+dyNWT9sdaObNBAUMocvOOuCdjfSYZDmZaeWeeBkd.JFY9x1neaPWrAuxUfWgHEwzFt8.4zk8VX.b1vg8c6xhu0nhfYoqa1PNO6IE3EEAcb6kED+Q6PNkJXCUwbaRuPRs1vZinQ7+hUdGQHtjmZ1NTQY1.kFDXyCwlbVCs8xf1AqlpgkLQJxNvsT6TIr8gqKgsOLs8cbpA1X35r.nmy3ylarT+Y5ZnMldBysUzDA1b+g410b4BrGvxSPsSIkvAeY4i3WvD9fGcB+SEhuvcH2Pl+vXrxCfQ31x+GXLeu3At8lNkQLE.bW29+91tD7yD9rQnytDazb3df6UIgif4YDFDcIbcI1VuqX64xnCrz1LvHljlR7OvStvFVZmbgMVIDEhIZ0MjrNU6l2mkxAvjL8OS1G9EIf1qwm1dhPPyA+FB49tZCCatsFd71Z3IaqgmtsF9caqgs1VC+9Oug1+S6UIFUXVaCBc4vdoiScb5IwvMvzaqn+E2LpIuB

Content.makeFrontInterface(300, 300);

const var knb_Tempo = Content.getComponent("knb_Tempo");
const var pnl_Display = Content.getComponent("pnl_Display");


reg currentTempoIndex = 0;

inline function onknb_TempoControl(component, value)
{
    currentTempoIndex = value;
    pnl_Display.repaint();
}

knb_Tempo.setControlCallback(onknb_TempoControl);

pnl_Display.setPaintRoutine(function(g)
{
    var a = this.getLocalBounds(0);
    var tempoName = Engine.getTempoName(currentTempoIndex);
    
    g.setColour(0xFFFFFFFF);
    g.setFont("font", 20);
    g.drawAlignedText(tempoName, a, "centred");
});

pcs800

@HISEnberg Thanks for the code.
I am trying it in my project but am getting an error saying Unknown Function "setPaintRoutine"

HiseSnippet 2950.3oc2Z07aabbEeosWGKZmX6fDjbo.aE5Ap.YYt7CI4ZDnUjhThwRVrhJ10HHHY3tCIm5k6tY2YsjZpQzkBza4OgFfdom5+BUWJ5o.XfdnGquFzKFEnmaeyLKImghzhRVQQ1DBhbey7l4M+du48wrS8PeabTjenVpzauW.VK00zarmGsS4NHhmVsUzR8V5qfcQ6oUZu.TTD1QKUpKtJqwTScIM9mWrTIjKxyFOfjl1C7I130IcIzATqacOhqaUjCdaRWodWvplsuWYeW+XPPtndVs.j8iQsw2Gw51Ez0VCE0QK0GoWLWd6BNK3jKWw6LuMZd7cZgZ0xLuSgByu3cLyeGTgEmGmsnVpKWwgP8CaPQTbjVpKUx2YuFc72wSLAOfDQZ5hYOXp0.lYA4p9tNrkHipV4NDWm58PnHMsT50GfWWTfWum9FDGRe5CvsavavX.Gx.XpKnJdWTQ7LkEurRh2HDoTRhzkDhzM0aXGRBnCZgIOWUulGEG1BA5IYQQzWsK7elRurOzCO5bcQOFWMDdnOGYJrvhyZ.f9L2McZhmKwCazJ1ylR78LB8i8bLyr6Lo+5zFvmPLMNzyXCDsyb71xrqwGYXlcFiaC++toeZZ3ysusQcjG1MJMn5inFOAEZ3PhB.SMNcSCiO1nm.0FSK62Mv2CdHyzh1mFDkQyZtif0bim0BGAqEFOqEOBVKpx5877aZNVN3sxXHcHtsgcbXHPdaLzdMOG7t.eYGghv2iyGaHC8cyX2a7lElQ2XbO8ynFNdGtKuYA7NWHN.LkoYlgqv3C7bQLgjO3kQttMgMoYTmSlDmvOz25rAXK+XJHkY5IkYZ2SNXv.BlaZGRDa8utuMxsDyfIJS1Yta+9PYBJyU.z2JdsgAi06s6QMygVOI7x+WagPybsjI6tUS9jzCdiU8YHdK3+SCl3Y62jSHZmkcIs8vNai2klouXLqAZViosgoLD6vTROksrAC5acqaYvcVZZjg+8LLRRJ8jFYVJburr0QkVsv1f.HZS0HoAoafKl4scLLI5fAuGbyEksPuLcfw.c.n6gwNYWrPLXywxTZHoYLECJCY7JALEeEMm8dHuCCmOJ1XUePwZa7o0LZf6RZBdVA70r3biGgAAYViOK6rFve8LJdHwg1IyLCHrFlztCXV94GVGbnEOKLSXeS09qdXwKFtA13FifeJJTLBYJlcXrM2oE1l60PrM2qH1l6kisEOsv14mgG2Al.CX24xQQwcIdsM5R10fDYjctr2xbtrutA9EeEA+hubvuvIA7k7SopAx+Zn0cgWQ.tvv.rT7466SwaBCCDAbJHrpwvM0p0HaKI5pKLfipYwT8RXLiWb2l3Po7.3cDxXTMMT8wmFpbVx1hbVj5nuWMOBcy.r23xcVKIQGHk02JQpftR4Ir9NIIr1vk3fC0HNrpN3oUnwE39UJr+NVZSLy4FhYsO7XvbdEl2+iS+OWZxYtnByO+OE78SDySwYd85UGRv+C+CqIm80ND6P4Uik8RwTpuWB6hGFFyYe9zZqfnHV0FIZQPyFfCoDlQSpUvOAp0ST6wTP0hQOl5Gnk586mOKfKho8sSl1Zcgh63y5Uz4+1TaW4IbO4G1gsOtOgm+TqN78w8ojMvpEwMoVwet9WWeqM+jJk29Kpt45qTYqm5vBLXTZUH0t4B7ZyLD6KVWilTCmPrp55i.Wds2FFNtzcccYREjERSqAB49qZkfKBP355KG6P7W1C4tWDncZ1tWssSomOewhEJjWi.oS1i50zMytvBEMKXledoFxw5egBKj+N4JnQA2bxUHyUHoVWm4Qd59azp4L8uzX5dSr4zyxZkmSLPOG+InDWW+cdne3iifprw.8VH2Hb5mpMDtdvWZoB8Z+NKYv6lG4lWI3ZII35feESg0MBBRDHrDR8yNjZqLDbvL2hbUVD3ng4luj+thEO3NqAi6nASvvBqUigsSzZXE3FCkOTGEB1JPksBSlapuNtEUjatA+fIHQ0U6nvoVWzfEj02Z0k333hq6GQXNaGzx2XEQwAMH+Vr7QjDLPEwr5EoqnEzaFpws13TYh.Shz5pdHKGGrOmL1Gb9E6eW8sX86XB9ZOZjP7XTHLDPF7APSppIUU.3DL4nrT.+GcfL3+NGYrCI6jlmeA+qKL7qhwNrrbFGxOAVtuiduAIwvczJhmuzwAFKJaCuy4WXTWeCxtuBfmf+ICythZbz0QMwtIwQ4+VwmaEILSqoEKBhVpKqucsMpnwNtCg3eE8s7a5S84jZP2ikt2kgDAccFJxq1FVGGQQ1EzysGsnTckR26LPTj2P9rfQIJ550W99mARhrM8yhGsjrxVO5TPRt5wJ0FYDZ+O4.I4JyAJo1bC8xwQT+tMvTFuQR41bM8B4VXQy6jM6hYURugsiSIql94ubgeSJQBLqDRdBNrWtH77TDYUpPZyXZPLUgTo3VsvgrHAJjafXd32BppQg7pt9MQtkpugZmgJAQrSFXCemgFFajKtJxFJQBnSCiEj4uaik6B09R2H1kRBbICI7kcwnP14+Wt7HjK1Acx1kOz5sY7gkfOMByppZ00GmbsNIhgHeFuvXy4xNaxOxUr2uJBe+4P5cplKG3Lr+s8WSw.5xplx7RaSLkEGPlrqlpxlx0FxU59exgbkN+wZpTxlw4G0oRNG+mK6pX+S8oR1WvA67JspduInlRobRZKMYeW6yffo6W5PKfRmhIiCEHOtjw+1iNYbccF7nDRFhLEh+J0b.WwJZvtN43yL.4ArRlq6GDGvXlmDjCtEBbN7fQTJ+Dq2VSQuojH+aB5s0+9wo2d9ueRzaqMI5sBSpd6sD0hLZEm3PTl337JtQjKA3K6zONOyp6jDmu7wRRlWRRpGNZIYsyDIYAII461az497vJaeJj6ykmfC4RR+njGFwZBRY+p57W1Xi87rYn5vu.9anCwwicQT06C.qdyjFX15xuDd1KZ2C1Crmr09o1kDXREwapWmPs6LZY7BiPF0z9QQFStZEust30bNP.ujd0e8OR2iB4q1wUEyeua9Bal6aGHO6pGWizgT2ugsTcdBIJIWmrzgK2i9gXXc+cpCSH2ulf7A+2+bEq0HCQk6hhUHozgNOvHUVicwIFxLe4ZLwKHp8FHHJBLu52GBn.I3aiAElG6pc.zRcAleBwyYYOyKjF64ve3+AeRZzj8bpjFM60nrUwU5eAk5+1l3plgNOmweOkfX3b8oDgGp5FABuM7MY5Csp4AklPq66hBG13+zBJScoIdGJaIYbt1Kx6J1pbdWH4p9y2B4MXEJ7SjHdFu4VW.Co06+RSD2Ys9uJCk09fp9Gr3OvpdH9ID7NIuHpDx2v50VGdo68J0JGG9DbkuhCIh7FkACPJpRbgLSh5MhkP7oiCAe4e71+s+JifobQHLB4RHXkO++dIFg7pWoSOmBJQtptcEOD.Th.uugApqc7.0u4u+uVRETgnuxfpweY0e3HA0WrzaHf5GH.0qp+PzSv7KoFGVee9ys7C6ZrJ1CGx7t8xBP+rI8hDGLwWj3MsofHrcHxKJvOBaJOxrKWx1PICQJTGhibijibpYUPi8TGZAIkdwfhp.TH0uqX0iXNYhfSekACdVYjFjkGuNVgATCLrxc1LxF.FjRktuXo5wtQXd7NSYFGPNmL40PgNGURiWZxrLOhqS8kO2ccpeMnXNka78T8jQQJvUfTUc8AJ8xCieRF8npt0aCeO+fN9dDEE8VXviQ61XE6mQtfVlRYuzv9TdOqsvtXTjz1weg05DO1Ag66fOgXg4w91uOR80GpKDW9QSY75aQ3W7M5hvm7cefKvy2ZwOPGbEmyfqJM9oQWdVjCvYwbzEYG5+E1havFaS+U3Tf0sG+TBmReC1yFi3hq0EBY7E11pC0gXL2Ikw7mTFKbRYr3Ikw4OoLtvIkwEOZFYQzWNl52Ur2.xrodEw8ZKkTVwZ+ejQpviA

HISEnberg

@pcs800 You're referencing the panel like this:

const var displayPanel1  = Content.getComponent("Panel1");

But you are assigning it incorrectly:

Panel1.setPaintRoutine(function(g)

And then later you have a second paint routine which would just overwrite it anyways

displayPanel1.setPaintRoutine(function(g) {

Also you have a bunch of timers set to the panels to repaint them which isn't really the most efficient. It would be better to use the knob's control callback to repaint them like I do in my example.

Probably worth looking into the examples here a bit:
https://docs.hise.dev/scripting/scripting-in-hise/scriptpanel.html#the-paint-routine

pcs800

@HISEnberg Changing to displayPanel1.setPaintRoutine has of course, fixed that error.
I then commented out the second paint routine for Panel1, but the display just says 1/1 and does not change.
Video here

HISEnberg

@pcs800 Pretty similar issue. You are calling the repaint incorrectly here:

inline function onKnob1Control(component, value)
{
    currentTempoIndex = value;
    Panel1.repaint();
}

Knob1.setControlCallback(onKnob1Control);

So now you need to change Panel1 to displayPanel1 here and call the repaint on the control callback. This also means you will no longer need the timer on this panel since it will be your knob that is updating the panel, so you can remove this:

displayPanel1.setTimerCallback(function() { this.repaint(); });
displayPanel1.startTimer(50);

However there is one other thing important to understand. If you want to assign a knob callback with script, than you cannot use the property editor to assign the control anymore (the property editor is going to overwrite anything you are doing in the script).

So if you want the knob to control the delay time still you are going to need to do that in the inline function:

inline function onKnob1Control(component, value)
{
    currentTempoIndex = value;
    displayPanel1.repaint(); // Fixed
   // Assign to the Delay knob
}

Knob1.setControlCallback(onKnob1Control);

I think @d-healey ''s video here covers this but maybe there is another one I don't know about:

https://www.youtube.com/watch?v=1rs0w4MDNA0

Displaying sync delay time properly

16

2.0k

12.7k

110.5k