What is this?

This knowledgebase contains questions and answers about PRTG Network Monitor and network monitoring in general.

Learn more

PRTG Network Monitor

Intuitive to Use. Easy to manage.
More than 500,000 users rely on Paessler PRTG every day. Find out how you can reduce cost, increase QoS and ease planning, as well.

Free Download

Top Tags


View all Tags

Digital time - Moment.js not showing on map view

Votes:

1

Hi All, I'm having a strange issue. I have managed to create a new object for my map that pulls the time from moment.js and displays it. The reason I want to use this, is that I need to see several time zones and the only templates I have seen show server time and nothing else.

Here is the code (I then have other copies with a different time zone):

<!--Added Objects: GMT-->

<div class="map_object map_table" id="<@itemid>" objectid="<@objectid>" subid="<@subid>" style="overflow:hidden;font-size:80px;<#mapobject type="coordinates" subid="<@subid>" mode="<@editmode>">;

    ">
        <#mapobject type="objectgrip" mode="<@editmode>">
        <#mapobject type="htmlbefore" subid="<@subid>">
    
    <div id="MyClockDisplay4" class="clock"></div>
            
    <style>
         <div class="top10listcontainer" style="overflow:hidden">
        .clock {
            color: #000000;
            font-family: Orbitron;
            letter-spacing: 7px;
            width: 200px
            }
    </style>
    
    <div id="MyClockDisplay4"></div>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/locale/en-gb.js"></script>

    <script src="https://momentjs.com/downloads/moment-timezone-with-data-10-year-range.js"></script>
    
    
    <script>
        const MyClockDisplay4 = document.getElementById('MyClockDisplay4');

function updateTime(){
    const now = moment().tz('Europe/London');
     const humanReadable = now.format('HH:mm');

        MyClockDisplay4.textContent = humanReadable;
}

        setInterval(updateTime, 30000);
        updateTime();

        </script>

        <#mapobject type="htmlafter" subid="<@subid>">
    </div>

Now, I am completely new to JS so this may not be correct... This is from chopping up code I found online and using the docs.

Now the issue i'm having is that it shows on the "map designer" view as expected, but when I look at the map the url, it is blank:

Map Designer View:

Map Designer View

View Map View:

View Map View

Accessing via URL - Deliberately blank as this doesn't show:

URL

I just can't figure out why it would show in the design views, but not via the URL.

I would be eternally greatful if someone could help me out

P.S. The reason for "MyClockDisplay4" in the code is because I am using multiple versions of this with different time zones, so this is how I am seperating them (so they don't conflict when on the same page).

Thanks

Ashley

clock digital-clock javascript map-designer map-objects maps moment-js template

Created on Oct 22, 2019 8:01:30 AM

Last change on Oct 22, 2019 11:11:07 AM by  Torsten Lindner [Paessler Support]



1 Reply

Votes:

1

Got it working for anyone with the same issue:

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/locale/en-gb.js"></script>

Had to be replaced with:

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>

This will give you a digital clock without seconds, but it's easy to add if you want it.

-Ashley

Created on Oct 22, 2019 11:13:53 AM




Disclaimer: The information in the Paessler Knowledge Base comes without warranty of any kind. Use at your own risk. Before applying any instructions please exercise proper system administrator housekeeping. You must make sure that a proper backup of all your data is available.