This is for Older Dashboard
For those who are still using dashboard 1 and want to use active buttons/clock/logo in toolbar header so that they are available in every tab/page, Even the logo can be clicked
This was entirely done by Google.Gemini ,with a few to and fro tweaking, like talking to a friend asking what is needed
[{"id":"0ddff8334eeace04","type":"group","z":"f7896303b8f338aa","name":"Buttons/Clock/Logo in Toolbar Header","style":{"stroke":"#ffC000","fill":"#ffdf7f","label":true,"label-position":"n","color":"#3f93cf"},"nodes":["91670c03.c29ad","5065704ae7cce962","8ee9d70d108a5661","2f20553b4b37a60c","63d8e8fbf4884e2a"],"x":94,"y":69,"w":552,"h":202},{"id":"91670c03.c29ad","type":"ui_template","z":"f7896303b8f338aa","g":"0ddff8334eeace04","group":"c536db49089f0a12","name":"Header Buttons","order":2,"width":"1","height":"1","format":"<script id=\"titleScript\" type=\"text/javascript\">\n (function(scope) {\n function createToolbarButtons() {\n var toolbar = $('.md-toolbar-tools');\n if (toolbar.length === 0) {\n setTimeout(createToolbarButtons, 50);\n return;\n }\n\n // Hide the default toolbar heading (now using the correct h1 tag)\n toolbar.find('h1').hide(); \n \n $('#clock').remove();\n $('#button-container').remove();\n $('#logo').remove();\n \n var buttonDiv = $('<div/>', {\n id: 'button-container',\n css: {\n 'display': 'flex',\n 'align-items': 'center'\n }\n });\n \n // --- Clock on the right ---\n var clockButton = $('<button/>', {\n id: 'clock',\n class: 'time_display',\n css: {\n 'margin-left': 'auto',\n 'margin-right': '5px',\n 'cursor': 'default'\n }\n });\n\n // --- Insert the Logo Here, after the clock ---\n var logo = $('<img/>', {\n id: 'logo',\n src: '/animated.gif',\n width: '65',\n height: '52',\n css: {\n 'margin-right': '5px',\n 'cursor': 'pointer'\n }\n });\n\n // Add a click event to the logo\n logo.on('click', function() {\n scope.send({ payload: 6 }); \n $('.my-toolbar-button').removeClass('active');\n });\n\n // --- Build the buttons and append them to the button container ---\n var buttonLabels = ['BUTTON-1', 'BUTTON-2', 'BUTTON-3', 'BUTTON-4', 'BUTTON-5'];\n var lastClickedButton = null;\n\n for (let i = 0; i < buttonLabels.length; i++) {\n var button = $('<button/>', {\n text: buttonLabels[i],\n class: 'my-toolbar-button',\n 'data-button-id': i + 1\n });\n \n button.on('click', function() {\n var clickedButton = $(this);\n if (lastClickedButton) {\n lastClickedButton.removeClass('active');\n }\n clickedButton.addClass('active');\n lastClickedButton = clickedButton;\n var payloadValue = clickedButton.data('button-id');\n scope.send({ payload: payloadValue });\n });\n buttonDiv.append(button);\n }\n \n // --- Append the elements in the correct order ---\n toolbar.append(buttonDiv);\n toolbar.append(clockButton);\n toolbar.append(logo);\n \n // Ensure the toolbar uses flexbox\n toolbar.css({\n 'display': 'flex',\n 'align-items': 'center'\n });\n\n // --- Clock functionality ---\n function upTime() {\n var d = new Date();\n var formatter = new Intl.DateTimeFormat('en-US', {\n year: 'numeric', month: 'long', day: 'numeric', weekday: 'long',\n hour: '2-digit', minute: '2-digit', second: '2-digit', hourCycle: 'h23'\n });\n var formattedDate = formatter.format(d);\n var day = d.getDate();\n var suffix = (day >= 11 && day <= 13) ? 'th' : (['st', 'nd', 'rd', 'th'][day % 10] || 'th');\n formattedDate = formattedDate.replace(/(\\s\\d+)/, '$1' + suffix);\n clockButton.text(formattedDate);\n }\n\n upTime();\n setInterval(upTime, 1000);\n }\n \n createToolbarButtons();\n})(scope);\n</script>","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":false,"templateScope":"local","className":"","x":200,"y":200,"wires":[["8ee9d70d108a5661","2f20553b4b37a60c"]]},{"id":"5065704ae7cce962","type":"ui_template","z":"f7896303b8f338aa","g":"0ddff8334eeace04","group":"c536db49089f0a12","name":"CSS","order":1,"width":"1","height":"2","format":"<style>\n .overflow-hidden {overflow: hidden;}\n .livedisplay {font-size: 2.5em;text-align: center;}\n\n\n .my-toolbar-button {\n background-color: #0078d0;\n border: 3px solid black;\n color: white;\n padding: 8px 16px;\n text-align: center;\n text-decoration: none;\n display: inline-block;\n font-size: 1.2em;\n margin: 4px 2px;\n cursor: pointer;\n border-radius: 28px;\n transition-duration: 0.4s;\n /* --- New CSS Rule for all buttons --- */\n white-space: nowrap;\n }\n\n .time_display {\n background-color: green;\n border: 3px solid black;\n color: white;\n padding: 8px 16px;\n text-align: center;\n text-decoration: none;\n display: inline-block;\n font-size: 1.2em;\n margin: 4px 2px;\n cursor: none;\n border-radius: 28px;\n transition-duration: 0.4s;\n /* --- New CSS Rule for all buttons --- */\n white-space: nowrap;\n }\n\n\n .my-toolbar-button:hover {\n background-color: white;\n color: #1B61E4;\n border: 3px solid #2196F3;\n }\n\n .my-toolbar-button.active {\n background-color: #d1e5fa;\n color: #005a9e;\n border: 3px solid #005a9e;\n font-weight: bold;\n }\n\n .my-toolbar-button.active:hover {\n background-color: #d1e5fa;\n color: #005a9e;\n cursor: default;\n }\n\n</style>\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","className":"","x":170,"y":110,"wires":[[]]},{"id":"8ee9d70d108a5661","type":"switch","z":"f7896303b8f338aa","g":"0ddff8334eeace04","name":"","property":"payload","propertyType":"msg","rules":[{"t":"eq","v":"1","vt":"num"},{"t":"eq","v":"2","vt":"num"},{"t":"eq","v":"3","vt":"num"},{"t":"eq","v":"4","vt":"num"},{"t":"eq","v":"5","vt":"num"},{"t":"eq","v":"6","vt":"num"}],"checkall":"true","repair":false,"outputs":6,"x":360,"y":200,"wires":[["63d8e8fbf4884e2a"],["63d8e8fbf4884e2a"],["63d8e8fbf4884e2a"],["63d8e8fbf4884e2a"],["63d8e8fbf4884e2a"],["63d8e8fbf4884e2a"]]},{"id":"2f20553b4b37a60c","type":"debug","z":"f7896303b8f338aa","g":"0ddff8334eeace04","name":"debug 5","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":370,"y":120,"wires":[]},{"id":"63d8e8fbf4884e2a","type":"ui_toast","z":"f7896303b8f338aa","g":"0ddff8334eeace04","position":"dialog","displayTime":"3","highlight":"","sendall":true,"outputs":1,"ok":"OK","cancel":"","raw":false,"className":"","topic":"","name":"","x":550,"y":180,"wires":[[]]},{"id":"c536db49089f0a12","type":"ui_group","name":"ONE","tab":"fbe9cc4da47a8d17","order":1,"disp":false,"width":"50","collapse":false,"className":""},{"id":"fbe9cc4da47a8d17","type":"ui_tab","name":"DASH","icon":"fa-table","order":1,"disabled":false,"hidden":false}]
