New UI Widget Support Step-By-Step

Here, we’ll add support for a new UI Widget in makehaus-js and create a simple UI implementation for the same in the MakeHaus Web UI. We’ll be using “FADER” as our example.

Before beginning, ensure to set up your environments for development as mentioned previously.

Full code is checked into both the makehaus-js and the MakeHaus Web UI repositories on a branch called “new-widget”.

In makehaus-js:

1. Add the name “FADER” as a new entry in the WidgetType enum located in src/widget/widget.ts. Since this will be a UIWidgetType, add the new entry, i.e., WidgetType.FADER to the UIWidgetTypes constant in the same file.
2. To test this new widget, we’ll use the makehaus-simple-encoder8-turn layout json located at examples/layouts/makehaus-simple-encoder8-turn.json

In MakeHaus Web UI:

1. Create a new UI Widget Implementation. In this example, the widget we’ll use is a standard HTML input tag. The implementation can be found at src/components/mpa-html-ui-widgets/input-fader.jsx. Call the new UI Widget component MpaFaderInput.
2. Create a new MPA Widget Interface. Duplicate the file src/components/mpa-widget-interface/slider.jsx and call your new file fader.jsx
   (Existing implementation can be found at src/components/mpa-widget-interface/fader.jsx).
3. Change the name of the component to MpaFader. Let the other functions remain exactly the same as they were in slider.jsx.
4. In the render method of fader.jsx, return MpaFaderInput.
5. In src/components/mpa-widget-interface/widget.jsx, add a new else clause with the condition set to match “FADER”.

Now run the example located at examples/makehaus-simple-encoder8-turn.js.