Time/Date on the Dashboard

Hi guys,

I was wondering if there is an easy way to get the Time & Date on my dashboard so that when I do a screenshot of my temperatures I can tell when it is from.

Thanks In Advance
Stuart

Remember that the screenshot file name is usually the time and date too :slight_smile:

1 Like

Hi, yes I know but unfortunately it is not on the image, I am trying to take a screenshot of 20 gauges in the dashboard with a time/date on, thanks anyway

Stuart

If you use the moment node and feed it with an inject node set to the current timestamp every second (or minute or whatever) then the moment node will give you a formatted string you can show in a Text node.

Try searching the FLOWS - I found this one you could adapt: Analogue Clock Dashboard Example

With this you get the time in the upper right corner, should be easy to adapt to also show date.

Not mine code, found it here some where and using it, works great.

[{"id":"c776d5dc.13cb9","type":"ui_template","z":"fdbd545f.293558","group":"cbd3ecb4.7a42c8","name":"Clock Toolbar","order":4,"width":"0","height":"0","format":"<script id=\"titleScript\" type=\"text/javascript\">\n    $('#clock').remove();\n    var toolbar = $('.md-toolbar-tools');\n    var div = $('<div/>');\n    var p = $('<p/ id=\"clock\">');\n    \n    $('#titleScript').parent().hide();\n    div.append(p);\n    div[0].style.margin = '5px 5px 5px auto';\n    toolbar.append(div);\n\n    function displayTitle(lh) {\n        p.text(lh); \n    }\n    \n    function upTime() {\n        var d = new Date();\n        p.text(d.toLocaleTimeString('de-AT'));\n    }\n\n    \n\n    // Watch the payload and update the title\n    (function(scope) {\n        scope.$watch('msg.payload', function(data) {\n            displayTitle(data);\n        });\n        setInterval(upTime,1000);\n    })(scope);\n</script>","storeOutMessages":false,"fwdInMessages":false,"templateScope":"local","x":680,"y":40,"wires":[[]]},{"id":"cbd3ecb4.7a42c8","type":"ui_group","z":"","name":"Temperatuur Node","tab":"a3d9e83f.d70da","order":1,"disp":true,"width":"12"},{"id":"a3d9e83f.d70da","type":"ui_tab","z":"","name":"Hal","icon":"dashboard","order":11}]
4 Likes

Hi guys,

Thanks for the suggestions I will have a play with them when I get home

Stuart

Hahaha this is so funny, when I went back to my notes site I found this which I added on 7/19:

1 Like

Hi,

The code that edje11 put up works fine for a clock but I wouldn't know where to start to add the date to it, I am not a coder which is why I use node-red, if there are any code people on here that could alter the code I would be very grateful.

thanks
Stuart

Hi, Moderator this post has been marked Resolved when it has not, the apparent solution only shows how to add the time and not the all important Date would it be possible to change this or should I re post ?

Thanks
Stuart

Re-Marked as unresolved

Now is the time to do a little learning. If you look at the code, you will see the lines

 var d = new Date();
 p.text(d.toLocaleTimeString('de-AT'));\n  

That is javascript getting a date for you. Now go look at a javascript tutorial (w3schools has a good one: https://www.w3schools.com/js/js_dates.asp) and see if you can work out how to get the date and time.

Ok I have sorted it if anyone is interested, there is a flow in the library called " Demo timedate " if you import the flow into node-red via the clipboard then ad a UI text node and feed the function into it, then just choose where it will be displayed, hope this helps.

Stuart

Thanks Moderator it is Resolved now

I have created a flow based on this solution: https://flows.nodered.org/flow/7e4bb517ce3a75add0083642ef03e9d8

4 Likes

I think javascript code will help, dont have in hand but Im sure its easy to get

I have been looking for the flow but cannot find it. Has the name been changed or has the flow been deleted?
Can I still find the flow and where can I find it?

Koen

Link two posts above

1 Like