Realtime Clock

[KoBra]

Is it possible to display the RTC inside the LM in Visu?

[admin]

Custom JavaScript example that adds current time near the close button. Header option must be enabled in General settings for this to work in Plan view.

Code:

const el = document.querySelector('.navbar > .container-fluid > div:last-child') if (el) {   const span = document.createElement('span')   span.classList.add('me-2', 'd-flex', 'align-items-center')   el.prepend(span)      const update = () => {     const date = new Date()     span.textContent = date.toLocaleTimeString()   }      setInterval(update, 500)   update() }

[Novodk]

After implementing the time via JS the main title is shifted to the left, can this be resolved?

[admin]

Try this:

Code:

const el = document.querySelector('.navbar > .container-fluid > div:last-child') if (el) {   const span = document.createElement('span')   el.classList.add('position-relative')   span.classList.add('position-absolute', 'top-0', 'bottom-0', 'd-flex', 'align-items-center')   span.style.right = '120%'   el.prepend(span)      const update = () => {     const date = new Date()     span.textContent = date.toLocaleTimeString()   }      setInterval(update, 500)   update() }

[AlexLV]

Hi,
is possible provide Custom JavaScript for Tile View also?

Alex

[Novodk]

Hi,
is possible provide Custom JavaScript for Tile View also?

Alex

It works in Tile view as well.
If you want 24 hour format and date here is an example

Code:

const el = document.querySelector('.navbar > .container-fluid > div:last-child') if (el) {   const span = document.createElement('span')   el.classList.add('position-relative')   span.classList.add('position-absolute', 'top-0', 'bottom-0', 'd-flex', 'align-items-center')   span.style.right = '130%'   el.prepend(span)   const update = () => {   const date = new Date()   span.textContent = date.toLocaleString('en-GB', {     day: '2-digit',     month: '2-digit',     year: 'numeric',     hour: '2-digit',     minute: '2-digit',     second: '2-digit',     hour12: false   }).replace(',', '') }     setInterval(update, 500)   update() }

[admin]

If you only want time in 24H format without seconds:

Code:

span.textContent = date.toTimeString().substring(0, 5)

[cekca]

with dark theme the clock don't switch to white color

[admin]

Add this before line 6 (span.style.right = '120%'):

Code:

span.style.color = 'var(--visu-header-text-color)'

[AlexLV]

Hi,

I use tile view ONLY and this idea with clock not working for me.

Alex

[admin]

It will only work in user view but not admin view.

Have you placed the code into the right place? It should be added to Visu admin > Top right menu (⋮) > Custom JavaScript.

[AlexLV]

Yes, code is in right place, but I checked with admin.

Now will check in user view

[davidchispas]

Hi, is it possible to display a KNX object on the opposite side? For example, the room temperature?

[admin]

Use this:

Code:

const el2 = document.querySelector('.navbar > .container-fluid > div:first-child') const addr = '32/0/3' if (el2) {   const span = document.createElement('span')   el2.classList.add('position-relative')   span.classList.add('position-absolute', 'top-0', 'bottom-0', 'd-flex', 'align-items-center')   span.style.color = 'var(--visu-header-text-color)'   span.style.left = '120%'   el2.prepend(span)      localbus.listen('object', addr, (value) => span.textContent = `${value}°C`) }

[KoBra]

Custom JavaScript example that adds current time near the close button. Header option must be enabled in General settings for this to work in Plan view.

Code:

const el = document.querySelector('.navbar > .container-fluid > div:last-child') if (el) {   const span = document.createElement('span')   span.classList.add('me-2', 'd-flex', 'align-items-center')   el.prepend(span)     const update = () => {     const date = new Date()     span.textContent = date.toLocaleTimeString()   }     setInterval(update, 500)   update() }

Sorry i ment as a Widget not in the title bar.

[admin]

Create a HTML widget. Put anything in the HTML input, the script below will replace it with date/time. Change widgetId to your actual widget ID.

Code:

const widgetId = 40 let interval Visu.on('widget-ready', widgetId, ({ widget }) => {   const el = widget.getEl()   el.classList.add('d-flex', 'align-items-center', 'justify-content-center')      const update = () => {     const date = new Date()     el.textContent = date.toLocaleString('en-GB', {       day: '2-digit',       month: '2-digit',       year: 'numeric',       hour: '2-digit',       minute: '2-digit',       second: '2-digit',       hour12: false     }).replace(',', '')   }      setInterval(update, 500)   update() }) Visu.on('widget-hide', widgetId, () => clearInterval(interval))