Looking for new front-end for my home automation

I am looking to use uibuilder or some other front end for my home automation. I have successfully integrated my Homeseer system to node-red and using the build in dashboard I have successfully accessed and can control my devices.

I would like to create a much better interface look that would work better across multiple screen sizes. I am fairly good with Node-red, but web / html / VueJS is fairly daunting for me. I have attempted to follow your examples with limited success. I work much better with visual of how it will look and work back to how to program it but most uibuilder examples are just raw code so I find it hard to knw what I am looking for to focus on, and many of the topics are over a year old or more.

If you have any of your system presentable to review since your post 2 years ago, I would love to see it, or if you can point me in a direction of how to accomplish similar goals that you presented in your post that would be very much appreciated.

Thank you.

Hi and welcome to the forum. I have move this to a separate thread rather than trying to resurect an only one.

That is certainly the difference between uibuilder and Dashboard & I agree that it can be a little daunting if you are not used to writing code.

What I would say is that you should start simply and take your time. Work through some simple examples using the default template so that you are familiar with how your front-end code talks to Node-RED and visa-versa.

Then work through some examples of sending slightly more complex data from Node-RED. For example a simple array of items and then an array of objects. Working out how you can display those in the front-end with minimal code. You will find lots of excellent Vue and bootstrap-vue tutorials on the web.

Next try sending some of the example messages you will find on the following page of the documentation:

Vue Components (totallyinformation.github.io).

I wouldn't try to make things look especially nice up to this point because you need to focus on the basics first and build up your knowledge bit-by-bit. I think you will be surprised at how little code you actually need in order to get a basic web app going.

Next you will need to experiment with bootstrap vue. Work through some of the documentation and examples so that you can see how it helps to build a good-looking and responsive page with minimal boilerplate.

I think that by then you will be ready to send some real-world data through and you'll probably hit some bumps then. That would be a good time to come back to the forum to get some more specific help.

Hope that helps. The trick is to start simple and do lots of playing and reading as you go.

If you look through some of my posts here on the forum, you will see snippets of the various interfaces I've built. But they are all pretty specific to my own setup so not really useful to share the code any more than I have done I'm afraid.

I followed a path much as I've outlined it to you above really. Trying out different things and seeing what works, getting in a mess, re-reading the docs that I thought I understood and rewriting code when I got myself in a tangle.

If you are starting from scratch, you may also wish to look at the forum posts and uib WIKI article on using the Svelte framework instead of VueJS. In some ways Svelte may be easier to work with.

1 Like

Thank you for your very speedy reply, I will keep at it and look into it all.

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.