Dashboard CSS - Visualising changes during development

Dashboard
1

Hi. Wanted to ask during CSS changes how do people visualise changes. Uploading changes and reloading the webpage takes forever.

Is there a way to get a 'dummy' html/css onto jsfiddle and edit the css from there before reuploading onto Node Red? Where can I get the default CSS from?

2

I just use Firefox's web developer tools to visualize my changes, then copy them into an editor or directly into a ui-template node.

3

What do you mean by uploading changes? Where are you changing css?

4

Sorry, I meant deploying changes, not uploading. I'm editing CSS with the on the template node. Ideally, I would like to export a mockup of a dashboard page and trial changes there to make the editing more efficient, before deploying changes I would be fully happy with onto node-red.

5

So if you edit the template node, hit Deploy (with deploy changed nodes selected) and then switch to browser you should see the results immediately the template node is run. It should not take forever.

6

Yes, I know this, thanks. But deploying these changes (I have already selected changed nodes only) takes between 3-10s each time and I'm using developer tools to identify the different CSS classes to modify on my current system. Reloading the website also can take 1-4 seconds. Not to mention the server (Pi Zero W) crashing every so often. So it all adds up to taking a very long time to compare changes. I am of course aware this is likely a limitation of the kit I am using. I am looking to shift the server to better hardware but I am first trying to see if I can achieve what I want out of Node-Red before spending more money which I think is reasonable.

So I'm asking if there is a more efficient/alternative way of doing this. I.e. how one can possibly export the dashboard HTML and CSS and open it as a separate documents from Node-Red to visualise changes. I hope that makes sense.

7

A Pi shouldn't crash, I would sort that issue first. You are right, on a Pi Zero even deploying changes can take a little while. I suggest that you install node-red on your PC and use that for testing css. Provided the display layer of your application is separate from the workings then that should not be difficult. All my ui stuff goes through MQTT so I can run the dashboard flows on any machine I like, just by connecting to the appropriate broker.

Edit: I don't know of any way to do the export you suggested, but that is not an area where I have expertise.

8

CSS alone does not talk too much. It works together with the HTML structure. So the only way to understand why some rule affects and what it affects, is to have it working with the actual HTML. And to analyse it there is developer tools in all modern browsers. Each of them has some thing better than other but overall, there is no better tools. To simplify the workflow, may be this would help : What's New In DevTools (Chrome 65) - Chrome Developers

1 Like
9

On my Raspberry Pi Zero deploy is sometimes instant and sometimes takes several seconds.
Probably it's no comfort to you but on a Pi 3B or 4 it always deploys faster than I can switch to the dashboard tab. I guess that's the difference between single and multi core processors.

10

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