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");
    AuthNumberLabel1.setControlCallback(AuthNumberLabel1CB);
    
    const var AuthNumberPanel1 = Content.getComponent("AuthNumberPanel1");
    AuthNumberPanel1.data.label = AuthNumberLabel1; //Pass label to panel
    
    AuthNumberPanel1.setPaintRoutine(function(g){
        
        g.fillAll(0xFF333333);
        
        g.setColour(0xFFFFFFFF);
            
        g.fillTriangle([10, 20, 10, 10], Math.toRadians(270));
        g.fillTriangle([this.getWidth()-20, 20, 10, 10], Math.toRadians(90));
    });
    
    AuthNumberPanel1.setMouseCallback(function(event){
        
        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")));
            
            this.data.label.set("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"))
            {
                AuthNumberPanel1.setValue(v);
            }
            else
            {
                control.set("text", AuthNumberPanel1.getValue());
            }   
        }
        else 
        {
            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);
            yourNumberLabel.set("text",myres);
        };
    };
    

 

4
Online

384
Users

1.2k
Topics

8.8k
Posts