Realtime Clock - Printable Version

Realtime Clock - Printable Version

+- LogicMachine Forum (https://forum.logicmachine.net)
+-- Forum: LogicMachine eco-system (https://forum.logicmachine.net/forumdisplay.php?fid=1)
+--- Forum: Visu (https://forum.logicmachine.net/forumdisplay.php?fid=24)
+--- Thread: Realtime Clock (/showthread.php?tid=6376)

Realtime Clock - KoBra - 01.04.2026

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

RE: Realtime Clock - admin - 02.04.2026

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()
}

RE: Visu bugs - Novodk - 09.04.2026

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

[Image: tlEFY0Z.png]

RE: Realtime Clock - admin - 09.04.2026

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()
}

RE: Realtime Clock - AlexLV - 09.04.2026

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

Alex

RE: Realtime Clock - Novodk - 09.04.2026

(09.04.2026, 17:28)AlexLV Wrote: 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()
}

RE: Realtime Clock - admin - 10.04.2026

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

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

RE: Realtime Clock - cekca - 16.04.2026

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

RE: Realtime Clock - admin - 17.04.2026

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

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

RE: Realtime Clock - AlexLV - 17.04.2026

Hi,

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

Alex

RE: Realtime Clock - admin - 17.04.2026

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.

RE: Realtime Clock - AlexLV - 17.04.2026

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

Now will check in user view

RE: Realtime Clock - davidchispas - 08.06.2026

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

RE: Realtime Clock - admin - 08.06.2026

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`)
}

RE: Realtime Clock - KoBra - 08.06.2026

(02.04.2026, 11:04)admin Wrote: 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.

RE: Realtime Clock - admin - 09.06.2026

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))