I'm finalising my boat application and have all the coding/hardware working and proven. It is now time to display the data in a tidy & meaningful manner and would prefer to have a 'temperature and voltages' panel appear in the same position on each of the 5 pages.
Is it possible to group together dashboard text boxes to create an assignable object and add them to each page? Or is it simpler to replicate each element in the flow 5x to assign to different Groups for each page?
No. That's a major limitation of the dashboard and there is no tricks to get around it. Well tricks exists but heavy affect to memory and performance.
As for boat I see couple of things to point out.
Reliability. Without that there will be no trust to readings you'll get.
Readabilility. Easy to read visuals is a must cos in extreme situations the time is most commonly thing what you don't have.
Usability. Specially low click count to get valuable info to screen.
With all that I do recommend to make the dashboard from scratch. That way you can satisfy all the needs and requirements without compromises.
You can make it using the uibuilder to cover the communication part of the buildup but for sure anything else should be custom build dedicated just for the screen where it will be shown.
And believe me, the best will be to start with pen and paper to sketch down the needs and wishes and when it starts to look promising, then it is time to start actually doing it.
It's not too hard as it may look at first glance. And for good project there will be solid help from community for sure.
Certainly uibuilder gives you access to as much detail in your front-end as you might like. Indeed, you can use the zero-/low-code capabilities to help build your front end UI initially and then simply grab the full HTML (there is a simple command for that) and dump it to your index.html file. Then you can use standard web development tool chains to make further changes and to do maintenance.
uibuilder also helps in many other ways and is specifically designed to support data-driven web apps of the type you need. With or without additional UI frameworks.
Not sure how much, if any, web coding experience you have but uibuilder will support you no matter what.
I will have a look at uIbuilder for it might make things a lot simpler. I certainly agree with the 'paper and pencil' method for, other than extremely simple s/w projects, it is an absolute must, especially large-scale database jobs.
Usability, especially reliability and simplicity are at the forefront of my design thoughts which is why I have spent so much time on and off, re-working the display.
Over the past months I have been learning a little about Node-Red which really is a total delight. I should explain that I identified the areas of data that I wished to display and have developed various programs for interfacing sensors to ESP32 / ESP8266 modules which connect to the Pi over wi-fi using MQTT. This gives me the benefits of transmitting the data over relatively short distances without the need to run multiple cables to the Pi.
I now have all the data management complete and just need to finalise the display then I can duplicate the system and instal one on the boat - leaving the other here for upgrade development.
I shall give uibuilder some serious attention for although I have got all the required nodes and functions programmed and fully working, the final display is the one which I need to get right and there will always be room for improvement.
The main thing which does give me grief is the seeming inability to make the display auto-scale to fit a client screen. I design the layout on a PC yet have to intentionally prepare it for the 10.1" tablet which is the final operational display. Very odd after decades of window scaling in general programming! Perhaps I have missed a command to get NR to fill a screen and scale all components accordingly.
Of course, you can use uibuilder in parallel with your existing Dashboard UI and so move things over as you develop them until ready to release as your "production" version. With uibuilder, you also have the option to use multiple real pages and/or follow the single-page app (SPA) route, whichever best meets your needs.
This is certainly an art-form for HTML/CSS design. Actual scaling (where things get bigger/smaller depending on the screen size) will be quite hard - at least for some aspects of the UI. If you have access to the underlying OS though, you might try scaling the OS window display rather than the browser.
Adjustable layouts are perfectly possible though. The trick is to set an appropriate break-point - usually in the horizontal width (in pixels) where you want to switch from a "wide" to a "narrow" display. If you look into the uib-brand.css that comes with uibuilder, you will see some examples.
However, if using a tablet with an up-to-date browser (e.g. not an old iPad for example), you can also use flex and/or grid layouts. For those, it is generally useful to make use of one of the online layout tools to get your overall layout looking reasonable then grab the resulting CSS to use as your starting point.
Ha! Someone tell Microsoft! There are still many corners of their apps that aren't size adjustable let alone capable of scaling.
Thank you so much for those pointers. So much to try and such little time!
Ha! Someone tell Microsoft! There are still many corners of their apps that aren't size adjustable let alone capable of scaling.
I certainly agree re Microsoft. I have had too many very unproductive late nights over the years wondering if I was the only one failing to achieve a simple result....
