Add new capabilities to oh-knob component using vue-round-slider

[stefan-hoehn]

fixes #1640

Enhanced the oh-know via the rounded-slider component and add several new capabilities.

See details at #1640 and examples there.

[relativeci]

Job #771: Bundle Size — 16.18MiB (+1.3%).

d6ae288(current) vs 4443802 main#770(baseline)

Metrics (4 changes)

	Current Job #771	Baseline Job #770
Initial JS	1.86MiB(+7.53%)	1.73MiB
Initial CSS	608.52KiB	608.52KiB
Cache Invalidation	90.48%	90.48%
Chunks	218	218
Assets	688	688
Modules	2012(+0.1%)	2010
Duplicate Modules	108	108
Duplicate Code	1.75%(-1.69%)	1.78%
Packages	137(+1.48%)	135
Duplicate Packages	15	15

Total size by type (2 changes)

	Current Job #771	Baseline Job #770
CSS	856.56KiB	856.56KiB
Fonts	1.08MiB	1.08MiB
HTML	1.23KiB	1.23KiB
IMG	140.74KiB	140.74KiB
JS	9.14MiB (+1.45%)	9.01MiB
Media	295.6KiB	295.6KiB
Other	4.69MiB (+1.68%)	4.62MiB

---

View job #771 report View main branch activity

[florian-h05]

Overall LGTM, thanks!

The dottedPath option for the slider-control does also apply to the knob which causes some design problems - I will take care of that.
And I also have a few parameter naming improvements in mind.

[florian-h05]

Using v-bind here would have been nice, but I see the reason why you did not: several paramaters have different names compared to the prop names. Therefore I am fine with that!

[stefan-hoehn]

yes, exactly, that's why I couldn't use v-bind.

[hmerk]

Thanks guys !!!!!!

[ghys]

@florian-h05 @stefan-hoehn A word of advice when adding new libraries.

The RelativeCI bot was added (#1703 (comment)) to track the size of the overall app and the "initial JS/CSS".

Here we can see that the Initial JS has increased (1.86MiB(+7.53%)) from the 1.73MiB baseline - this is before minification but still - the baseline is the app.[hash].js and app.[hash].css which your browser will load no matter what your pages contain when you bring up the UI. If you explore more of the UI, additional JS and CSS will be loaded on demand using webpack's code splitting. But in this case, since widgets are in the baseline, all libraries that are imported with import RoundSlider from 'vue-round-slider' will be part of the baseline, meaning they will be loaded for everyone regardless of whether they use the round sliders or not.

This is illustrated if you open the "report" artifact from the GitHub build results: https://github.com/openhab/openhab-webui/actions/runs/4157806937

The purple block in the top-left corner in the JS entry point and the added weight of vue-roundslider is highlighted).
In some cases it might be better to lazy load a component when it's too heavy.

See for example:

openhab-webui/bundles/org.openhab.ui/web/src/components/widgets/system/oh-video.vue

Lines 29 to 32 in 5bf9845

	components: {
	'oh-video-videojs': () => import(/* webpackChunkName: "oh-video-videojs" */ './oh-video-videojs.vue'),
	'oh-video-webrtc': () => import(/* webpackChunkName: "oh-video-webrtc" */ './oh-video-webrtc.vue')
	},

In this case maybe it's acceptable (or maybe not, in fact) but do keep that in mind.

[florian-h05]

Thanks for the advice.

Wasn‘t aware of that size increase — I guess it‘s time for a follow-up PR to split off that component.

[ghys]

No worries, the reasons I'm telling you this is because while the overall size of the UI has increased over the years, I've tried to keep the baseline to a minimum. For instance compare https://app.relative-ci.com/projects/ZNG5hy4VeSJQVQcq1Kvu/jobs/9-85f49c87-0ed2-470c-95e5-a0a4edad8145:

to a job from 6 days ago https://app.relative-ci.com/projects/ZNG5hy4VeSJQVQcq1Kvu/jobs/761-CfxT1mQIUU2wyVZ1P1hW:

The overall size has indeed increased from ~11MB to ~16MB as more features were added, but the "initial JS" has been kept to a minimum: 1.73MB vs. 1.67MB!

https://app.relative-ci.com/projects/ZNG5hy4VeSJQVQcq1Kvu/jobs/761-CfxT1mQIUU2wyVZ1P1hW/compare/7-b9d346c8-894f-4b86-abe8-1e7fe679771b

So the more we can keep (or carve) out of it (with common sense, some things belong in it), the better 🙂!

[florian-h05]

@ghys PR #1718 implements lazy loading for the about 130 kB large vue-round-slider package (https://bundlephobia.com/package/vue-round-slider@1.0.1).

[stefan-hoehn]

thanks, @florian-h05 , you are too fast for me ;-) I wanted to do it today, so thanks for taking care!