Clock widget

1265
5
01-13-2022 03:28 AM
Status: Open
TorbjørnDalløkken2
Occasional Contributor

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.

5 Comments
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:

jcarlson_0-1642081919647.png

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.

jcarlson_2-1642082401017.png

 

 

jcarlson

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

jcarlson

jcarlson_0-1642628498483.png

 

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

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

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.