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)