Is there any web designer around, able to draw nice art for custom dashboard

[hotNipi]

I am pretty bad on art. But mostly I can replicate things when the art is created by somebody. Well it depends of course but if the designer is web artist with corresponding knowledge base, things mostly turn out nicely.

Why I'm asking? Well mostly for fun but also if it turns out nice, then for share.

Every time I try to do something in graphics for myself, it ends with crash because of I don't like it. And i can't figure out the corrections cos... well. I'm not an artist.
This time I took the challenge to move my dashboard over to uibuilder. With pretty hard restriction - zero front-end libraries. (actually not that hard at all)

So did some technical stuff to support basic layout things and draw a gauge type of card and fell into not liking it already a bit. It takes me down cos I have no tools to fight with it.

Nothing major but some gauges

So ... I'd work on this future more to create for myself and to share some basic layouts without any front-end library but with some basic components which can be combined into cards to create the dashboard with uibuilder.
If I can find a bit support from some artist. Web artist.

Until then (if ever), I'll probably put this project to sleep mode.

hotNipi (artless)

[Steve-Mcl]

I'm similar in that I am not truly artistic and rely on prior art for inspiration. But since you are dipping a toe into uibuilber and Vue, you might get some ideas from these templates

[hotNipi]

No Vue or any other. Pure HTML, JS (TypeScript) and CSS

[Steve-Mcl]

You are a masochist

[hotNipi]

That's called handcraft and it is expensive you know

[TotallyInformation]

Seems like a pretty harsh restriction to put on yourself! Especially as the default uibuilder installation already provides you with Vue and bootstrap-vue.

However, if you insist, I would actually probably advise the use of Svelte since that compiles to pure JavaScript and so it doesn't matter if you include some other libraries. But even without, Svelte gives you a fair bit of capability and you should be able to use it's component structure to easily build a grid and card style interface.

Doing what you've asked without ANY front-end libraries means that you will have to reproduce much of what one of the libraries gives you anyway.

[hotNipi]

I see every day how "To present rectangle with background and border and 2 rectangular buttons inside and then header and simple paragraph" type of thing is created with React. Why? There is no need for any library for such of simple things.
And my intention is to keep things as simple as possible. Grid layout is not magic behind some fancy library. It is natural CSS layout solution, well documented and pretty easy to use. Button is mostly div with text inside type of thing with about 10 lines of CSS if you don't go crazy.

And for components from library - if you don't like one little thing, you'll override its look or behavior. And that leads to another override somewhere else, which then may end with same amount of work you'll do it from scratch. So you can win only if you like it or accept it entirely. It can happen.

I'm not going to say I will create all world wide known components. I'll create them by need. And following the simplicity rules all the time, the look and feel by design keeps it straightforward and easy to develop.

I have seen HTML, CSS and JavaScript from from distance and from close. I'm not an expert but still, those are tools to get bread on my table.

Handcrafting is fun and the result is unique. Probably can't state it out any stronger

[TotallyInformation]

@hotNipi

There is no need for any library for such of simple things.

Perhaps, if you have the time and skills to produce the HTML/CSS/JS structures required. You are also taking on the responsibility of updating the DOM. Again, of course, there are native HTML/JS capabilities for this but any of the lightweight front-end frameworks (and the heavyweight ones) have already done it.

@hotNipi

So you can win only if you like it or accept it entirely. It can happen.

Not really very sure that you will, in fact, gain what you are looking for by going this route either. But hey, whatever, it is interesting.

@hotNipi

may end with same amount of work you'll do it from scratch

Exactly why I created uibuilder in the first place of course.

This fits in with the other discussion happening again at the moment with Flutter.

What is really important is to understand and define the interface between the back-end and the front-end. uibuilder gives you an interface but deliberately does not specify how you use it. To go to the next level, you need to know what data (roughly) you need to exchange to achieve what you want to do. Then you need something that links the node-red msgs to your components. That means that you also need to give them identifiers. And you will want a reusable JavaScript function that updates the DOM. Then you need to think about how robust you want everything to be - what error checking and input checking is needed? That would, for example, need to be a lot tighter if you ever intended to use your interface over the Internet.

So I think that the component HTML/CSS design is only one aspect of what you are trying to do.

Anyway, I'll be interested to see if anyone picks up on this and offers to help. I'm especially keen to take part in discussions like this and even more so around any interface standards.

@hotNipi

Handcrafting is fun and the result is unique. Probably can't state it out any stronger

Can't deny that of course. Though maybe a hard path to tread!

Give me a shout if there is anything you think could be added to or adjusted in uibuilder to make life easier.

[hotNipi]

@TotallyInformation

To go to the next level, you need to know what data (roughly) you need to exchange to achieve what you want to do.

Just for reference a slice of component code ... yes I'm pretty much know what I'm doing and what it takes to

class GaugeCard implements IGaugeCard {
	private html: HTMLDivElement;
	private content: FillGauge;
	private header: HTMLElement;
	private head: HTMLDivElement;
	private subheader: HTMLElement;

	private protocol: string;
	constructor() {
		this.init();
	}
	dispose(): void {
		ClientEventDispacher.unregister(ClientEvents.SensorUpdate, this.onSensorUpdate, this);
		this.content.dispose();
		while (this.html.firstChild) {
			this.html.removeChild(this.html.lastChild);
		}
		this.content = null;
		this.header = null;
		this.subheader = null;
	}
	getHTML(): HTMLDivElement {
		return this.html;
	}
	setProtocol(src: string): void {
		this.protocol = src;
	}
.....

[hotNipi]

So. 10 days (evenings) of being masochist, to get real understanding about what it takes to make a dashboard with uibuilder.
Took all the things connected with MQTT to my home automatics and made the data available for uibulder.
As said - no front-end libraries no components, all is written by hand. Only thing what is externally included is Font Awesome icons.

Fully responsive layout, cards shrink and grow and rearrange to fill the with of the screen.
Cards pop to larger state if to click on the header to show more data depending on what kind of config is given.

Gauge type of cards are decorated with kind of related images when in large state.
Wifi card shows chart type of thing in large state. Small state circulates the data.
Device controllers are just one button in small state. Cos there is no need for more. But for laege state also the auto state control reveals.

Prettiest thing is the Lighthouse report

Conclusion: doable. Will continue.

[TotallyInformation]

Very nice, thanks for sharing.

Could you share any code for those components?

[hotNipi]

hotNipi/automation-uibuilder

Feel free to explore. As it is not component creation model but dedicated bits to fulfill the dashboard creation task, it is most probably not that useful reading.
Node-red flow is not included and it takes many things to be done right to have correct structure for messages.. Can share but not directly and not right now.

[Simon01011]

Great job!

Looks like 10 evenings of about 16 hours each

[hotNipi]

@Simon01011

Looks like 10 evenings of about 16 hours each

I'd be fired from work and from home already if my hobbies would take that much

[Simon01011]

@hotNipi

I'd be fired from work and from home already if my hobbies would take that much

off topic: interesting order: if my hobbies would take that much time, I suppose I'd be fired from home first

[hotNipi]

As from home office - the order doesn't make any difference