[feature request] Value edit input widget
-
I'm wanting a widget like the one in the sampler workspace
Has anyone created one with a single panel? @Christoph-Hart Is there a reason why this widget that already exists in HISE isn't available to use for our UIs? Is it a custom control you made?
-
@d-healey My guess is because it warrants a lot of additional look and feel functions while the control itself is relatively easy to recreate using a panel.
You want
All Callbacks
, and create logic for the panel's mouse callback where it increases or decreases the panel's value based onevent.x
orevent.y
, as dictated by your graphic.For a click in the middle, simply call
widget.data.editMode = true; Content.showModalTextInput( { "parentComponent": "", // use an empty string for global coordinates "fontName": , "x": , // these positions are relative to the parentComponent "y": , "width": , "height": , "fontSize": , "alignment": , "fontStyle": "plain", "bgColour":, "textColour": , "text": , }, function[component](ok, input) { if (ok) // parse the input here using parseInt or parseFloat or string operations { } widget.data.editMode = false; });
I use widget.data.editMode to query for edit mode and prevent other stuff from happening while the modalTextInput is open.
Of course you can twist this 20 different ways, e.g. where middle hover changes the mouse cursor, dragging left and right changes the value, and doubleclick is used for value input, etc.etc.
-
@aaronventure Thanks, I'll play around with it!
-
I decided to use a vertical slider within a panel, and child panels for the buttons. Using a slider gives a number of advantages - I can set the step size, store it in preset, drag to change value, and click to enter a value all without any extra work, and I can give it its own callback and set its various other properties.
I'll wrap it all up into a neat package and post it here.
-
@d-healey That's an elegant solution, David. Looks great, too.
-
Here it is. Just add a panel to your UI and pass its ID to the function and the magic will happen. The function includes a broadcaster that watches the panel's
enabled
property and passes it along to the buttons, so disabling the panel will disable (and repaint) the buttons.HiseSnippet 2372.3ocsX0uaaibDmJI5vI2dWyUTDf9OErDn.T0N7jTjiiStbwRhRIJwxlxRwNe.iCqHWIs1TbYIWJYkO9m9z0Gi9Hz2fqytK+Rx1oAF8Lfs4N6ryNyuY1YmYsBn13vPZfRgRCW5iUJ76KNXoGaZqoHhmRWSkB+whyQtQ3td9QrSHNSvLklK8QggXGkBEt8y47UnzcTD+7edVSjKxyFmQRQ4XJwFuOYFgkQ0ZuWQbc6fbvCIyxwc885ZS8ZQcoQfNc6hUT7Q1milfO.wY6VEUJ7MscHLZv.FhgCUJbmlTmkClRW3I4+XRHYjKlOnpx.PPRxcntNbMlSUo0ThqiUhsGp.RwJCItsDI9SE6QbHozyPj6JlPMaE4wiB2ZU061qndUyqdUxodWgJUHmJcGoJ8CEGXGP7YYyv0meWwtdLbvXD.64UEIuJ25e88EaQAN7XFyPmi6D.CRWgdsJU1RE9S4mrwF.zGxT88bkNZ0mpZGfA63XdD.2tz0RmTiu.hmKwCqNNxylQndWhcejG1sqS4M93Fkbo1HWUAEPvIZDHoVzY9TOXPJ6OYiRaTRLvHDyr.fmcDMhAakdxVoOo7Fk.oVZNJPEABjMkDxk197soIMxyITmaTk.QUZBWNxnJc4+BMVPXSa35OEomrTcsQSjypUdK0LpXOD3xbzJq9L0pFUTerZEisKKj8DiwPb7Q7sC6bD1lg7l3h0Q4W9HZfCN3HjCIJTSrrOKsPIhD5RfoyAIHGmW4QGoqct2HM0MUiQEi.ruK2iw8AbED7aUjBRJBtMBShB.gjhoZaolCUyXzhFRD3nDlAEEbqro5kU+Q0GJj8ULQUisyQ+EXxjoL8xqJXcsP1RWLruZGiCXDvD0VmCm.zDSR.V3I+hbl5P.U5hJqOKggm80MesTFRBrbPLjQJ1K+P.lioAp51pDuLKUd3jOZeRH2hAOuM3OlQmyONMyRf45wQa4j+HaP1s8l.QtFxyFMCnHGaTHb7S+iZDGsGqpIjrZRTF.GnfIgvDuWyNmaTyOf5C3zR92hbxZmJBjVY+LPLFxd5PZZDfkbYDbnzWCqN2VIU8jMWcAhYOEGnstbiXLH2.XLu+zLPh.iq7DUh5OoVC92laFejTFWOBlUJBHfNCAknjjkohHnivNQxzGOUsd1j9x3qTojKhS89quTteszHoWeAOdErscE6TLQI+.0syS8BsqHN+9pUqmmINfutl9ip03mLiUQ9n+NfCqRg+68UGshhCzxK50BfGOdmGti8iVgEjqKcQK3uifKBC4trFttpYDxyKCeA2DA+B3XfjUZ1f2k8ZeMHkk7aS3hHMYRC4ht9jqBW4WQ5UAKT3ZZBaIvHOA48Uk4TEwNSgCIA.7TwnV4zY.IItk.fD4LBGnPTDaYj1GiU9GmlXTdBxBw8RaolZOWMCeNU27gwlflvid4zzpscMCVkNFFuqY+OTcyyZsnyIVsZzemkUhZ0dV8W7Hi9dQtyac9tauuk41+it6XsXAi7x3uqZa0zbwgmr4ACGYX7fFlMlLXmCLMLbL5erU8vVset3aGuvfVusVitVC2+UatsUPkG3N05rFcNul0h98GQrLeXzI0rl60oqYcCxG5MbTudGCe27kK6YJzO13KF0pcsfQNwe2v9bOqyZs+Q0D5DMVFK669Ry2Nte8dlnWNcSKy1KuHRneuouY8IUufqeGaloev2VOvLpE8E61pu4lidzCE5Ty9Ra7DqFVlS18cMOb3n2MBcn7aSZz7VRbZQN7q2wuUaqKAsBHr8ICHuN96Fj2cl0vcq2YmXyeXyWXtiUOF8ER3zDIf1562a+DnsqS2twPKMpyjDnc7gUwRnMFNEtmydk290rnQGzRBgCG4R9P72lBWbm2LzIQ02uqgO7svjDzaOqSspsjvrci1F8kxSBKxuEPq.lig1F69lM6Ig1T8C9d5IGMUBsms7CyefUPum+VeqXXV31j1t0Iceo44XVC.lWdQ8twvbF9wg1SEgx7eEmMLhOXX3BWkvu9gGbqmDk+9JmJOVliW9ojqg6pmFmM3qtFob4rtlpjhy9.EIA4chyLHKWJtdIwITg989r0KRdU9zsTQBV+bRsahzT8nQg3jjdY4ovygi8qjqh.EhcQt7Ux62hu4YkKyLDrd3XgoUNW1Bf0AI0E7EDSRICBrdrpTWLB3I5a4RrOmqVkJAneTf75oRBgElj4SxuMmU3h2rJKiyptdBzmpJWfXTFGPQg7L35kyTj+5pR9SeJdky3X3q8urdwManfD+AjOfSttUh.ROSxbZYnjGdgvJ.1iQboOes0ljieyL4+3qim6mxSlojtM+zk0pYD3lLt0kxzOeELgtPq7ks377k5PRjizJyyh8Tnrdri9pAlqU2kiCu3PrGTX2H3VZYTlJu.ddgAZpQ9.q3rx7JkFEmVkGTLRbMdaoJpvKMzNIzQOWsayyT10CEDZInjqokwA99QgS0GIZDA3PhKRn6Ia.TR6li5c.kgOzSWz+FLk55SMd7UNG+93.pqK.EW0z7V9C9RKT2KZ1HbPJHDyHzG7pMWW75atNeu+1xxCxwH0qqGgcnO165dQ.k3ZJ3MhGqU.qLQa3eeba3xnCEhCuGbnYs3mGQnz4e.DkW2kmqMQTqTSNPyDOmXikc3WpnIN7bF0WvabXAHd4F+cI8+y8Uw6aZC4JWjsmc2aY1fg6IqdMixOuWReU.su4Oeu68qbp7DvYT+meZtfZ9tWyjv2tmjN+3ZdSkKCNj92TDUgmM0a2aEC5O7UgjfEUrvcgUuj+AWLhdKUJrQwjNFUlQbbbwIsylsg+6mEqAEKzDFl.AEK7WfQq0j7p33JcmtxdkG0Rr3rqCuZp0xSdF0Az96U7.ZvLDTaB1wBGXCZ.ZBVILZ7XxERzS4xO9ycK1i5D4hXq9VT7GfKdBt5l+Af3OxiGfKKy+.c+e6Ap9ZUwennEAZp7p0wacE5HbN42BcL9Y89thsGOF7sYJ3cJ14M+17FdJxFqlzCwB3d1hGDMa.DSXigc2CNCyygU3V7rMxwURhyGf8bDC9U3m3IqxGWHdxpISpLCYGP+EaYNJ9CG9sBJfN4IdyzRE6wGqV8xIlfyNjew1dUQcoEV6ltvGbSWX8a5B29ltvGdSW3N2zE9n+2Kj+LyMhXzYxiMJJ8rZKtHoPg1xp.3mfT9uXEA7aH
-
I wanted to be able to style the text box and change the mouse sensitivity. So this new one replaces the vertical slider with a rotary one (because the mouse sensitivity doesn't work with the vertical slider). I've also disabled the stock text box of the slider and by use of a mouse listener I've added a custom one that using the modal text input.
It's a bit of longer script than I'd like but it has a lot to do.
HiseSnippet 2767.3ocsYs9aabbD+nsYPnZSQRaQ.5WJ1b.E3Xj7ERZIKK63DQxiLl1hVmjnk7CHDb7tkjq3w6XuGhjNweo+E2O1ukNyt68fOjsqQiAr8syN6ry7amW6Ry.eaZXnefRgR8VLkpT3OV7rEdQiZNxh4ozwPovet30VtwzNdSiitf4LjFozXwTqvPpiRgB29mP9JT5NJ7+7u+wFVtVd1zLRJJm6yroGwlvhxnZd3yXttssbn8XSxw8tG1w12qouqeLnS2tXEkoV1isFRetEx1sJpT3yZ4vh7CNKxJhFpT3NM7cVb1H+YdB9OmEx56RwAUUNCDjfbaeWGTiQpJMGwbcLSr8PEPJlYHwsEHwesXWlCKkdFh7k7IHYqHOdT3VKqd2dI0qZd0qRN0aCpTgbpzcDpzWU7L6.1znrYP84OTriWDMXfE.64UEAuJ25s+khM8AN7hzmXMl1N.FjtBsZUprCA9mxOZqs.nOLhL0yUbPSdLwNfB1w4nG.ZWZpoSphKf44x7njAwd1QLeu0XepkG0siS4s9ksJ45aa4R3T.AmnQfjZ5OYpuGLHk8GsUosJwGnGRiLAfO5T+3HXqzR1Jsgk2pDH0RWaEPr.AFMhEhR6HbaZ3G64DpgFUIPTkFhxQ3UoI9uP8YrnQ0cmNxRKYoZp8GJlUs7NjLpTOK3HyQsL4GIU0qPdHoh9dk4xdn9.vO9Tb6nNmRsir7F5R0rxu799ANzfSsbXwgp7k8NodIfjPWFLeNLwxw4Yd980TG60WkrMQBK5Azot3QFdHfZHbvwsPg.PSDlxJ.DQJjptCIGnlwnoeHiCiBTFzS3TMZjVYx2QtOWxaXhp56ki9SnrgihzJupFDFsvkB6qJZCpqNqSf0PCV.keHhbcNMHhAvvZbldV.py70rSVDcx6a9PHjqGcdTC+4.CCrbConC6RP9QVCxg5BeWt6yQ99iq64zlRc0VVvqMcpj3ROcDbVMjEBwXsS7WQKe1o9QVAKNiyEpVoNy6P76ekzilMfnAizi.0WXhjG+XtMBSVJfFEG3ga1GvqdYQv2.comL3GWQ+.vyhyzH+qA2uuEHUs7x91nJW2kMzi5fXImad0f5g3XgLAGNvcW0Fvv.LHQ5e++.pIbobrhrzESzvFNWZ4MDB3kGKMB7sbrsPDU6WXNOjnJ.QxD+3PzayJXX3CIuQ0NmmuJ8Z7iK4gaaXSzshhrrG0yOMboKJsV3pBk5HHkltL6wgji8bWfBM+FSrw4TymvZkcvw4HzOvCzaU9Rpm54y2LhkHy4.+.BGZITHwozAMuKRpgsCgaV4bV3i04R+ESI+5uJXPO.iO4JOR6aDDCGwFDY.kiV0YByiNMveZH.8nfKsRljGRR0.L5uiiV4cP1lgoGVYRMUNUUAGi3IJViEAYHo5cI6w4KIf+gnuNP3cb8JaU735LO5z3dfojXXLpuquikK5dxaYQiaSY33aRk2kZ9i2gvPlPrfayuuMaE0OKATMdRcb43gw23OlCs4w1kkKu7Hj3MHj1102JRSnCkeDuT06xBfVygBNZDev82PWFMavBxxIK5h.GgdcPtYD.gbQSfPbnt+DS9Yp1Z9q8+HB33hkjTK7Fh3PzFRnyCT3tyqG80eCwclhkwnghBRXra5FoJz5jslLyJxdDDbrpbiihf9W.C4MWlgOLXbkGQXjumTC9us2VF2HpCzGlUHBHPMC73.jjEga5oTmXQf5iI6lM4TQQvTojqrH3VuxR4tB8EdVh3icHGv2IIQYDwNj8xSct5FJFeWR0cyyDB3qpoeGoF17fTEwQeKfCKSA+6cI8WRwAZ4E8JUZGLX+6uu8CVhEKWW+YMg+sOzrdHdjU20kjQHOuXLEvAiWSCJDoZCmtQuXpJT5Q7MlcRlRUrnatAPQT6GtEPNK9vUIXQK.Fwl3tKQz2G22IqDXsxoyLLITsrbFQrLJJlsvS6WjJ+CWoKBSK7TBxYjXOalg2kpaSgwFflfduHM0Z6USOpRac8W23j2Vc6qZNq8ElMqex9KpD2r0jcexCzOwK185liOXuiLM16e1YeyYyhXOU9cUayFFyN9hsedu9552qtQ8gms+yMz0czO4bycCa15m3e63EFz7U0p2wr2QOa68LCpbO2QlWUu83ZlyN4j9LSi6GeQMyq8Z2wXWc1a61qe2tmCe23oK5Zv0unAy62rUsf9NxuqaO1y7plGcZMtN4KkwhSbepwqFbxtcMrd5nsMMZsXdLW+d4IF6Nr5bT+N2HS+fuMumQbS+mbPySL1t+CtOWmZbhvFuvrtowvCdcii60+08sNV7sge70ME3zrb3W2yek5NqAsbHr0Emwdg765rWekYuC1s89RyuWimXruY2H+mHfSCKNzt6QcOJAZ63zoiDZ8iaOLAZGbbUp.ZkvI+34pm4cTMS+3m2T.g856xdq7aC9Qb6W1yIQ0Opi9T3atIwo2ZR6ZUaJfY65szOQHOArH9lCsbXVBs0O3ka2U.so5G78nKNcj.ZuZwau9dlAc+oWM0TBy7iMgsadQmmZLlFUGf4Ey2siDlyvODZuj6JyKBhwF5x.Ccn.mCV4Act0R7xeSkKEgk43EiRtAtqdoLavG883xky5FtImL6CzrKj2QlYPz1q7Nc7HTt98lr0ySdU9Rn3Gm0j6wIRSw6mKIoWVdpjt0xxUwfKKNOW9JQ8MYkmkJloyY83AbSqbtrE.qmkzRv6QLIcKjzbxpMFtdmJbgk1jhfedSt7aMjb6WYV0USf9XYmm7QYb.2aEyfqkuKokkbZOqxlXWWuPyFZFY5Yr2R4kaS6dJGXHNjRXSsbFh4QmwsHXoRzWb9u5pSR3uc5lgWI5FX5toLkYXoaz2SVSwlvf5ZnslxzOrAlrlqVdc6OOeoGOIxQXm4Ywdjk2Ppi1xtoqzEVt6lzGpYK74H3KNfsInRhmBrRyZ4qzltLRRGe6Ht9RpidhijVtN4tNSYW0wfqkfRthVJCClFGNRqOuyXfCAtHftGsEPI88m78dteD8XOM9KNASQVcpAC13bX04.eWW.J1zz3iTF79VnlW7j93sEkffjQkB2Y4mCr3M+bf4esRaQyB4Xz2qiGK53oTua5MLUjcXfOcnTq.Vi3Ob3eR9vgBuCElC9pgi85KePWtRm8HrcNT4EcvLuIhZoNzAZFzqY1TwaRVpnAMbbj+TNuR2BP7hM9KRdwR7rRtuoOgnx7764hrA8NTzKaFke3vjaGBz9r+1W+0+FRM69YH0+0udMmZ92aKSBe9gB5X3Z9WmFkABo+CEdO4YS8pCWxf9pOJjDrnhE9RX0KvOPwLg433RSdus7Frb+JVnALLwfKV3uCiV4t2KiZK8DZJE1pXxSnojGiRrurRgalZMj7uA+gqrX52yndnxdMTQLSc+O+XtWTK01rlmGuBiGLfMW.lIYFAVKBUMTTV+0r+xhvU0icshV9w0weQA4Dn8k+EswWsF0sE4+EG9+1Kt+wpheUQSFbCzMqi2ZC5HDF86gNJ+cJ9hhsFL.bFxTv6Tr8K+84GkPQbKrgcshBvS5hOOdxYfSjME1cOHDGSwU3VXxHw3JItJfSkCe.5pImrJNtfbxpISBdU1A9+rsHEF9Kg74bJfN4w+QfJUrKNlTc07V7fM1OaaurnVag09TW389TW3tepKbuO0Ed+O0Et+m5BevGdg3uaV83H+IhvFEktls30YJTnknIALBR4+BC+KjaB