Number entry - perhaps "Missing Widgets" again

  • OK so I'd like to have a Label set up for text entry that only accepts numbers - so first:

    Is there some way I cant see to configure the TextLabel?
    If not is there some other control I can adapt? - the "use a no-image slider" approach wont work for me as these numbers will be in the range 1000-9999 and will need to be exactly correct - so the Slider would be "too fiddly"
    Yes I could start hacking away at the on control javascript - but this (again) seems like a widget we could all do with, so if it got done once in the C++ we could all make use of it.

    So if the "do it in javascript" is the only approach - has anyone done it yet?

  • @Lindon I did this last week. Look up the missing widgets topic

  • oh sorry I missed the bit about manual entry - - doofus again.

  • @d-healey Clearly I dont know how to use HISE at all.......

    I do I IMPORT a snippet into an existing project?

    I've tried creating a new project - importing the snippet , copying the JSON nad pasting that into my existing project - where my mental model tells me I should then see these widgets - but all I'm getting is array errors...

  • @Lindon Copy the snippet to the clipboard then File >> Import HISE snippet

  • @d-healey done that - all it does it blat my entire project...

  • @Lindon A HISE snippet is essentially a .hip file so it will replace whatever .hip you currently have open.

  • OK then I clearly dont understand how to open or save projects:

    1. Start HISE
      2.File>recent projects>blah\blah\TheModenists
    2. Do you want to switch projects -> OK
    3. Do you want to load Xylophone.xml? _ OK
    4. Project loads and displays.
    5. File>Import HISE snippet
      -- blat every part of my just loaded project is gone, replaced by only your two widgets....

  • @Lindon said in Number entry - perhaps "Missing Widgets" again:

    1. File>Import HISE snippet
      -- blat every part of my just loaded project is gone, replaced by only your two widgets....

    Your project is the folder that contains all of the project folders: Binaries, AudioFiles, Samples, SampleMaps etc.

    A project can have many presets - .hip files. When you press CTRL+S you are saving a .hip file.

    When you export a snippet you capture the state of the currently loaded .hip. When you import a snippet you are loading the state of that .hip file. The snippet is a way of easily sharing .hip files via text.

    What you need to do is import the .hip and look at the script, copy everything that's in there to a text document. Then open .hip you're working on and use the bits of my code that are applicable.

  • OK as I feared snippets are a nice way to demo a function - not a nice way to SHARE a function.

    In fact there is no nice way to copy functionality WITHIN a project (Control-D yes) but what happened to the sensible control-c in one project and control-v in another for widgets at least....

    There si so much in HISE that is good and so much that is a MASSIVE frustration/blocker

  • @Lindon They do both. Just open the script editor and grab the script. The great thing about a snippet is it shows how the code works in a context.

  • @d-healey I wanted to grab the widget!

  • @Lindon But it's not a real widget, it's a panel and a label and some code. You only need the label and some of the code from what I understand? The closest we can do to sharing a widget is to create a factory function and share that, but I haven't got around to creating one yet. When I do I'll add it to my UI library on github.

  • @d-healey

    OK I get it ... so I copied your code and widget approaich, changed the names (to match my widget names) and the inc/dec now no longer works:

    const var AuthNumberLabel1 = Content.getComponent("AuthNumberLabel1");
    const var AuthNumberPanel1 = Content.getComponent("AuthNumberPanel1"); = AuthNumberLabel1; //Pass label to panel
        g.fillTriangle([10, 20, 10, 10], Math.toRadians(270));
        g.fillTriangle([this.getWidth()-20, 20, 10, 10], Math.toRadians(90));
        if (event.clicked)
            var v = parseInt(event.x / this.getWidth() * 2); //Check if left or right side clicked
            //Inc or Dec value
            v == 1 ? this.setValue(this.getValue()+1) : this.setValue(this.getValue()-1);
            //Limit value to panel min/max
            this.setValue(Math.range(this.getValue(), this.get("min"), this.get("max")));
  "text", this.getValue());   
    //Label callback
    inline function AuthNumberLabel1CB(control, value)
        local v = parseInt(value);
        if (Engine.matchesRegex(value, "\d") == 0) //Value contains only numbers
            if (v >= AuthNumberPanel1.get("min") && v <= AuthNumberPanel1.get("max"))
                control.set("text", AuthNumberPanel1.getValue());
            control.set("text", AuthNumberPanel1.getValue());

  • So for those not needing the nice arrow buttons and happy enough with just getting a number field sorted this code works fine:

    function onControl(myControl, myValue)
        if (myControl == yourNumberLabel){
            var myres = parseInt(myValue, 10);

Log in to reply