Number entry - perhaps "Missing Widgets" again

[Lindon]

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?

[d.healey]

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

[Lindon]

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

[Lindon]

@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...

[d.healey]

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

[Lindon]

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

[d.healey]

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

[Lindon]

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....

[d.healey]

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

6. 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.

[Lindon]

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

[d.healey]

@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.

[Lindon]

@d-healey I wanted to grab the widget!

[d.healey]

@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.

[Lindon]

@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());
    }
};

[Lindon]

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);
    };
};