Let's say I have a 5 page dashboard and at the top of each page I want to put an identical panel that shows basic date time. If I put a CSS template in page 1 and set it as a type CSS all pages with the UI set as page 1 shouldn't the CSS code in that one template be used in all 5 pages given that the CSS code contains unique identifiers?
I guess the question might be rephrased as: does D2 unload what you loaded when you change "pages"?
Also, how is Vue being used? Is each page a Vue component? If so, the CSS would be locked to that page I believe.
If you want the CSS on every "page" (which aren't really pages at all of course), then you should load it into the <head> which I believe the ui_template node allows you to do.
Each page is a collection of VUE components. What I'm trying to do is set all the parameters for each page component only once on one page so it's easy to change. I'm not sure what the header component is so I'll head over and have a talk with chatgpt. Thanks for the heads up.
Not a component, just the HTML <head> where you normally load style sheets.
That's my understanding of how a CSS "all pages" template is applied, yes. (Maybe such a template gets added to the head section automatically?
I'm not sure how you would get the date/time on every page, but if you did, it ought to be styled the same everywhere.
I have a normal tab that has power on nodes, night time , day time and date time. Then I use link in link out to get which one I want on every page or tab or what ever the heck we're calling them these days
That doesn't make sense. The UI should be Dashboard, not page 1. This is what one of mine looks like, for example.
There does seem to be some confusion over precisely where these time and date nodes are.
Can you explain the role of link-in and link-out nodes for your dashboard?
Maybe a couple of screen captures will clarify things?
This doesn't really answer your question, but it does put a date / time clock in the top bar.
<template>
<Teleport v-if="mounted" to="#app-bar-actions">
<p>{{ displayDateTime }}</p>
</Teleport>
</template>
<script>
export default {
data() {
return {
mounted: false,
currentTime: new Date(),
timer: undefined,
}
},
methods: {
setDateTime: function() {
this.currentTime = new Date()
}
},
computed: {
displayDateTime: function() {
return `${this.currentTime.toLocaleDateString()}, ${this.currentTime.toLocaleTimeString()}`
}
},
mounted() {
this.mounted = true,
this.timer = setInterval(this.setDateTime, 1000)
},
unmounted() {
clearInterval(this.timer)
},
}
</script>`
At this point I can make my project work as I want it to. My problem is that the CSS all pages node doesn't work like I think it should. So at this point I am trying to understand what is going on and why so I can better understand node red.
So strap in here we go.
First here's the "Normal" or desired time heading
next here is the "abnormal" or bad time header when I pull the code out of the node
here is the menu
here is the settings for the CSS node
here is the code in the CSS node
<style>
/* Outer card spans full width, compact height */
.headertimeCard {
border: 2px solid #1976D2;
border-radius: 16px;
padding: 0.5rem;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 60px;
background-color: #000000;
}
/* Centered time display */
.headertimeDisplay {
width: 100%;
text-align: center;
font-weight: bold;
color: #FFFFFF;
font-size: clamp(1rem, 2.5vw, 1.5rem);
font-family: monospace;
/* keeps time digits aligned */
}
</style>
here is the code from the "normal" header which displays correctly
<template>
<v-container fluid class="headertimeWrap">
<v-row justify="center">
<v-col cols="12">
<v-card class="headertimeCard">
<div class="headertimeDisplay">
{{ buttonText.time || '---' }}
</div>
</v-card>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
data() {
return {
buttonText: { time: '---' },
};
},
watch: {
msg(newVal) {
if (!newVal || !newVal.topic) return;
if (newVal.topic === 'Time') {
this.buttonText.time = newVal.payload || '---';
}
},
},
};
</script>
<style>
/* Outer card spans full width, compact height */
.headertimeCard {
border: 2px solid #1976D2;
border-radius: 16px;
padding: 0.5rem;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 60px;
background-color: #000000;
}
/* Centered time display */
.headertimeDisplay {
width: 100%;
text-align: center;
font-weight: bold;
color: #FFFFFF;
font-size: clamp(1rem, 2.5vw, 1.5rem);
font-family: monospace;
/* keeps time digits aligned */
}
</style>
here is the code from the bad time header
<template>
<v-container fluid class="headertimeWrap">
<v-row justify="center">
<v-col cols="12">
<v-card class="headertimeCard">
<div class="headertimeDisplay">
{{ buttonText.time || '---' }}
</div>
</v-card>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
data() {
return {
buttonText: { time: '---' },
};
},
watch: {
msg(newVal) {
if (!newVal || !newVal.topic) return;
if (newVal.topic === 'Time') {
this.buttonText.time = newVal.payload || '---';
}
},
},
};
</script>
I think this about covers it
Have you renamed the UI from Dashboard to PageOne? What do you see if you click on the dropdown for UI? I don't know whether it would make any difference but I would try returning it to the default just in case.
A ui-template node can have <template>, <script> and <style> tags.
Except if it is a CSS template it can't have any of them.
Why not? Your guess is a good as mine.
There is a clue to this in the slight red underlining of <
Delete your <style> and </style> tags.
Good catch, I missed that.
Yep, the style tag fixed it. That is so annoying on so many levels
Thanks
Because in CSS mode (just like a style.css file) tags are not a thing. A CSS file contains only CSS. It would be wasteful (in both time and storage) to handle something that is not needed or required. Additionally for Monico editor to provide CSS intellisense and offer completion etc, it needs to be in CSS mode & <style> is invalid CSS.
In html, tags (like script and style) are used to inform the html processor that the contents are JavaScript or CSS style rules.
OK, bearing in mind that I have no idea what intellisense means, nor what benefits Monaco offers while writing CSS, are you saying that Monaco is somehow less helpful with CSS that resides between <style> tags in a widget template than with CSS in a CSS template?
Monaco wastes time and effort on a bunch of things that seem to be of minimal value, for example if I delete a closing bracket, it sometimes deletes a nearby opening bracket too. If I insert a bracket, it inserts a closing bracket too.
But those are just eccentricities of the editor, and Node-red is more than just a wrapper for the editor.
I am surprised that, for the sake of consistency between the different template types., Node-red cannot automatically comment out <style> tags in a CSS template.
It is the (sometimes) helpful text and inserts that it can provide you as a reminder.
I don't think he is saying that. It is merely a different context. If you are only writing CSS, Monaco (like VSCode) correctly tells you that something such as <div> is not valid CSS. In fact, both Monaco and VSCode can struggle with mixed contexts, at least without a helper extension. But that is besides the point here I think.
Not really eccentricities, they are helpers. But if you don't like them, you can turn them off in the settings (I think).
Possibly because Monaco can't understand why it is there! It highlights it as an error for you to delete it which is correct isn't it?
In my view, the real issue is that the template code area does not make it clear in the UI what context/mode it is in.
Not only did the user explicitly chose CSS mode (visible in the drop-down), the editor has an error marker under the style tag.
This is more of a skill issue tbh. And, I'm not saying that to be mean or belittle, just that if you know you know, if you don't you learn.
I am not about to add helper text like "CSS mode should not start with a style tag"
And even if we DID somehow manage to allow the style tag and provide correct Monaco content, users who do know CSS would complain that CSS should not have a style tag!
Been looking at this and knowing now about the little quirk in the css node explains why I did a lot of what I did to format my pages since even using that in single page mode wasn't working before but I was focused on getting up and running. As I said before now I was going back and cleaning up a few things figuring out why and how. If I had stopped then to figure why that didn't work I think it would have made things much easier.
Let me as an obvious oblivious end user offer a statement or two.
Yes, the end user did choose the CSS node but the only time the editor showed the little red niggle was when you were in the one window. If you enlarge the code window to full size it doesn't show the red underline (at least not on my computer) and as an aged end user that little red niggle is really hard to see. Further, yep not the best at coding but I do try and am grateful for any and all help that I get here.
1 Like
What browser are you using? I have Firefox on a Linux PC, NR 4.1.4 on an RPi.
A template node with the initial dummy content but changed to type CSS shows many red error markers:
But if I expand to the full editor window there are none
I can't say if this is a recent change, but it does seem to be a bug: Monaco apparently ought to be "in CSS mode" but it is not highlighting invalid CSS.
