nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Clock widget

TorbjørnDalløkken2

I'd like to see a new and relatively simple widget in ArcGIS Dashboard. It's a analog (or digital) clock. One of my users is going to show the dashboard on a big screen in their office, and wants to see the time.

Find more posts tagged with

Status: Open

Comments

jcarlson

@OznurGeze Totally! Assuming you had the "end date" either determined by your data, or just hard-coded into the expression, you could easily adjust this to show a duration, a remaining time, etc.

OznurGeze

It is amazing! Could you do countdown with this too? Is it possible?

jcarlson

You can combine a data expression with some SVG elements to create a clock of your own, too.

Data expression:

var n = Now()
var thehour = Hour(Now())
var theminute = Minute(Now())

if (thehour > 12){
    thehour -= 12
}

var out_dict = {
    fields: [
        {name: 'thehour', type: 'esriFieldTypeInteger'},
        {name: 'theminute', type: 'esriFieldTypeInteger'},
        {name: 'hourdegrees', type: 'esriFieldTypeDouble'},
        {name: 'minutedegrees', type: 'esriFieldTypeDouble'},
        {name: 'ampm', type: 'esriFieldTypeString'}],
    geometryType: '',
    features: [
        {attributes: {
            thehour: thehour,
            theminute: theminute,
            hourdegrees: thehour * 30 + (5 / theminute),
            minutedegrees: theminute * 6,
            ampm: Iif(Hour(Now()) > 12, 'PM', 'AM')
        }}]
}

return FeatureSet(Text(out_dict))

HTML:

<p style="text-align: center">
  <svg height="300" width="300">
    <circle
      cx="150"
      cy="150"
      fill="grey"
      r="130"
      stroke="black"
      stroke-width="3"
    ></circle>
    <path
      d="M150 150 L 150 40 Z"
      stroke="white"
      stroke-width="3"
      text-align:center=""
      transform="rotate({minutedegrees},150,150)"
    ></path>
    <path
      d="M150 150 L 150 60 Z"
      stroke="white"
      stroke-width="5"
      transform="rotate({hourdegrees},150,150)"
    ></path>
    <text
      x="150"
  </svg>
</p>

jcarlson

You could also embed a clock from elsewhere: https://24timezones.com/clock-widget

jcarlson

This is a little hacky, but you could create an Indicator widget and put this in for the Advanced Formatting expression:

return {
    topText: 'Current Time',
    topTextMaxSize: 'medium',
    middleText: Text(Now(), 'HH:mm')
  }

Then set the refresh interval to 0.1 minutes, and your indicator will look like this:

Analog would be trickier, but I still wonder if you couldn't mangle a Gauge or two to do it for you with a Data Expression.