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.

[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.

[jcarlson]

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

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

[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.