Time/Date on the Dashboard

#1

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

0 Likes

#2

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

0 Likes

#3

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

0 Likes

#4

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.

0 Likes

#5

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

0 Likes

#6

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}]
1 Like

Greating a clock widget
#7

Hi guys,

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

Stuart

0 Likes

#8

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

1 Like

#9

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

0 Likes

#10

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

0 Likes

#11

Re-Marked as unresolved

0 Likes

#12

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.

0 Likes

#13

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

0 Likes

#14

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

1 Like