Some people might want to use Cabbage widgets without having to write a Cabbage section. In order to facilitate this I’ve created a set of html elements for each Cabbage widget.
These elements can be added to a html page like any other elements, for example:
<div class="widget-section">
<h2>Sliders</h2>
<div class="widget-row">
<cabbage-rotary-slider props='{"channel": "rotary1", "value": 0.25}'></cabbage-rotary-slider>
<cabbage-horizontal-slider class="wide" props='{"channel": "horizontal1", "value": 0.5}'></cabbage-horizontal-slider>
<cabbage-vertical-slider class="tall" props='{"channel": "vertical1", "value": 0.75}'></cabbage-vertical-slider>
<cabbage-number-slider props='{"channel": "number1", "value": 0.6}'></cabbage-number-slider>
</div>
</div>
One nice aspect of this is it provides a simple way to integrate Cabbage with an existing web frontend. There is a test.html that provides a more complete example of this. If you wish to test it, install the ‘Live-Server’ extension in vscode, then right-click the test.html file and select ‘run with live server’.