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 “
- Add the name “
FADER” as a new entry in the
WidgetTypeenum located in
src/widget/widget.ts. Since this will be a
UIWidgetType, add the new entry, i.e.,
UIWidgetTypesconstant in the same file.
- To test this new widget, we’ll use the
makehaus-simple-encoder8-turnlayout json located at
In MakeHaus Web UI:
- 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
- Create a new MPA Widget Interface. Duplicate the file
src/components/mpa-widget-interface/slider.jsxand call your new file
(Existing implementation can be found at
- Change the name of the component to
MpaFader. Let the other functions remain exactly the same as they were in
- In the render method of
src/components/mpa-widget-interface/widget.jsx, add a new else clause with the condition set to match “
Now run the example located at