Deneb visual showing Germany Time

[chintusasmal123]

Hi Everyone,
I'm using this Deneb visual code to display Clock but this clock show time based on my location which is IST but I want to show  time based on Germany's time.

{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"description": "A circular clock visualization showing the current time.",
"width": 100,
"height": 100,
"signals": [
{"name": "centerX", "init": "width/2"},
{"name": "centerY", "init": "height/2"},
{"name": "radiusRef", "init": "min(width,height)*0.8"},
{"name": "sizeFactor", "init": "radiusRef/400"},
{"name": "outerRadius", "init": "radiusRef/2"},
{"name": "innerRadius", "init": "radiusRef/2 - (10 * sizeFactor)"},
{
"name": "currentDate",
"init": "now()",
"on": [{"events": {"type": "timer", "throttle": 1000}, "update": "now()"}]
},
{
"name": "currentHour",
"init": "hours(currentDate)+minutes(currentDate)/60",
"on": [
{
"events": {"signal": "currentDate"},
"update": "hours(currentDate)+minutes(currentDate)/60"
}
]
},
{
"name": "currentMinute",
"init": "minutes(currentDate)+seconds(currentDate)/60",
"on": [
{
"events": {"signal": "currentDate"},
"update": "minutes(currentDate)+seconds(currentDate)/60"
}
]
},
{
"name": "currentSecond",
"init": "seconds(currentDate)",
"on": [
{"events": {"signal": "currentDate"}, "update": "seconds(currentDate)"}
]
}
],
"data": [
{
"name": "hours",
"transform": [
{"type": "sequence", "start": 0, "stop": 12, "step": 1, "as": "hour"},
{
"type": "formula",
"expr": "centerX - cos(PI/2 + (datum.hour * PI/6)) * (outerRadius - (outerRadius-innerRadius)/2)",
"as": "x"
},
{
"type": "formula",
"expr": "centerY - sin(PI/2 + (datum.hour * PI/6)) * (outerRadius - (outerRadius-innerRadius)/2)",
"as": "y"
},
{
"type": "formula",
"expr": "centerX - cos(PI/2 + (datum.hour * PI/6)) * (innerRadius - 25 * max(sizeFactor, 0.4))",
"as": "xHour"
},
{
"type": "formula",
"expr": "centerY - sin(PI/2 + (datum.hour * PI/6)) * (innerRadius - 25 * max(sizeFactor, 0.4))",
"as": "yHour"
}
]
},
{
"name": "minutes",
"transform": [
{"type": "sequence", "start": 0, "stop": 60, "step": 1, "as": "minute"},
{
"type": "formula",
"expr": "centerX - cos(PI/2 + (datum.minute * PI/30)) * (outerRadius - (outerRadius-innerRadius)/3)",
"as": "x"
},
{
"type": "formula",
"expr": "centerY - sin(PI/2 + (datum.minute * PI/30)) * (outerRadius - (outerRadius-innerRadius)/2)",
"as": "y"
}
]
}
],
"scales": [
{
"name": "hourScale",
"domain": {"data": "hours", "field": "hour"},
"range": [0, {"signal": "2*PI"}]
},
{
"name": "minutesScale",
"domain": {"data": "minutes", "field": "minute"},
"range": [0, {"signal": "2*PI"}]
}
],
"marks": [
{
"type": "arc",
"encode": {
"enter": {
"x": {"signal": "centerX"},
"y": {"signal": "centerY"},
"startAngle": {"value": 0},
"endAngle": {"signal": "2*PI"},
"outerRadius": {"signal": "outerRadius"},
"fill": {"value": "transparent"},
"stroke": {"value": "black"}
}
}
},
{
"type": "arc",
"encode": {
"enter": {
"x": {"signal": "centerX"},
"y": {"signal": "centerY"},
"startAngle": {"value": 0},
"endAngle": {"signal": "2*PI"},
"outerRadius": {"signal": "innerRadius"},
"fill": {"value": "#FCFCFC"},
"opacity": {"value": 0.6},
"stroke": {"value": "black"}
}
}
},
{
"type": "symbol",
"from": {"data": "minutes"},
"encode": {
"enter": {
"size": {"signal": "pow(2*sizeFactor, 2)"},
"x": {"field": "x"},
"y": {"field": "y"},
"angle": {"signal": "datum.minute*6"},
"shape": {"value": "m 0 -5 v 10"},
"stroke": {"value": "black"}
}
}
},
{
"type": "symbol",
"from": {"data": "hours"},
"encode": {
"enter": {
"size": {"signal": "pow(2*sizeFactor, 2)"},
"angle": {"signal": "datum.hour*30"},
"shape": {"value": "m -5 -5 h 10 l -5 10 l -5 -10 Z"},
"x": {"field": "x"},
"y": {"field": "y"},
"fill": {"value": "black"}
}
}
},
{
"type": "text",
"from": {"data": "hours"},
"encode": {
"enter": {
"x": {"field": "xHour"},
"y": {"field": "yHour"},
"align": {"value": "center"},
"baseline": {"value": "middle"},
"text": {"signal": "datum.hour === 0 ? 12 : datum.hour"},
"fontSize": {"signal": "25*max(sizeFactor, 0.4)"}
}
}
},
{
"type": "symbol",
"encode": {
"enter": {
"size": {"signal": "pow(2*sizeFactor, 2)"},
"shape": {"value": "M 0 0 h-1 l 1 -160 l 1 160 h-1"},
"x": {"signal": "centerX"},
"y": {"signal": "centerY"},
"fill": {"value": "red"},
"stroke": {"value": "red"},
"strokeSize": {"value": 2},
"strokeCap": {"value": "round"}
},
"update": {"angle": {"signal": "currentSecond*6"}}
}
},
{
"type": "symbol",
"encode": {
"enter": {
"size": {"signal": "pow(2*sizeFactor, 2)"},
"shape": {
"value": "M 0 0 h -2 l -5 -30 l 7 -120 l 7 120 l -5 30 h -2 "
},
"x": {"signal": "centerX"},
"y": {"signal": "centerY"},
"fill": {"value": "black"},
"stroke": {"value": "grey"},
"strokeCap": {"value": "round"},
"strokeWidth": {"signal": "2* min(sizeFactor, 1)"}
},
"update": {"angle": {"signal": "currentMinute*6"}}
}
},
{
"type": "symbol",
"encode": {
"enter": {
"size": {"signal": "pow(2*sizeFactor, 2)"},
"shape": {"value": "M 0 0 h-3 l -4 -30 l 7 -80 l 7 80 l -4 30 h -3"},
"x": {"signal": "centerX"},
"y": {"signal": "centerY"},
"fill": {"value": "black"},
"stroke": {"value": "grey"},
"strokeCap": {"value": "round"},
"strokeWidth": {"signal": "2* min(sizeFactor, 1)"},
"zIndex": {"value": 1}
},
"update": {"angle": {"signal": "currentHour*30"}}
}
},
{
"type": "arc",
"encode": {
"enter": {
"x": {"signal": "centerX"},
"y": {"signal": "centerY"},
"startAngle": {"value": 0},
"endAngle": {"signal": "2*PI"},
"outerRadius": {"signal": "6*sizeFactor"},
"fill": {"value": "black"},
"stroke": {"value": "grey"},
"zIndex": {"value": 1}
}
}
},
{
"type": "arc",
"encode": {
"enter": {
"x": {"signal": "centerX"},
"y": {"signal": "centerY"},
"startAngle": {"value": 0},
"endAngle": {"signal": "2*PI"},
"innerRadius": {"signal": "outerRadius"},
"outerRadius": {"signal": "outerRadius + 14 * sizeFactor"},
"fill": {"value": "#333"},
"stroke": {"value": "grey"}
}
}
}
]
}


Can't figured it out.

[v-heq-msft · Accepted solution]

Hi @chintusasmal123 ,
According to your description, you want to display the time on Deneb according to German time. First of all, by default now() gets the time based on the system's regional settings. To display the time according to the German time zone, first you need to get the current UTC date, right now Germany uses UTC+2 Daylight Saving Time, so you just need to add +2 to the hour of the UTC time you get. Here is the implementation code

{ 

  "$schema": "https://vega.github.io/schema/vega/v5.json", 

  "description": "A simple digital clock visualization showing the current date and time.", 

  "width": "container", 

  "height": "container", 

  "autosize": {"type": "fit", "contains": "padding"}, 

  "signals": [ 

    { 

      "name": "currentDate", 

      "init": "datetime(utcyear(now()), utcmonth(now()), utcdate(now()), utchours(now())+2, utcminutes(now()), utcseconds(now()))", 

      "on": [{"events": {"type": "timer", "throttle": 1000}, "update":"datetime(utcyear(now()), utcmonth(now()), utcdate(now()), utchours(now())+2, utcminutes(now()), utcseconds(now()))" }
      ] 
    }, 

    { 

      "name": "currentYear", 

      "init": "year(currentDate)", 

      "on": [ 

        { 

          "events": {"signal": "currentDate"}, 

          "update": "year(currentDate)" 

        } 

      ] 

    }, 

    { 

      "name": "currentMonth", 

      "init": "month(currentDate)+1", 

      "on": [ 

        { 

          "events": {"signal": "currentDate"}, 

          "update": "month(currentDate)+1" 

        } 

      ] 

    }, 

    { 

      "name": "currentDay", 

      "init": "date(currentDate)", 

      "on": [ 

        { 

          "events": {"signal": "currentDate"}, 

          "update": "date(currentDate)" 

        } 

      ] 

    }, 

    { 

      "name": "currentHour", 

      "init": "hours(currentDate)", 

      "on": [ 

        { 

          "events": {"signal": "currentDate"}, 

          "update": "hours(currentDate)" 

        } 

      ] 

    }, 

    { 

      "name": "currentMinute", 

      "init": "minutes(currentDate)", 

      "on": [ 

        { 

          "events": {"signal": "currentDate"}, 

          "update": "minutes(currentDate)" 

        } 

      ] 

    }, 

    { 

      "name": "currentSecond", 

      "init": "seconds(currentDate)", 

      "on": [ 

        {"events": {"signal": "currentDate"}, "update": "seconds(currentDate)"} 

      ] 

    }, 

    { 

      "name": "fontSize", 

      "value": 24, 

      "on": [ 

        { 

          "events": {"type": "resize"}, 

          "update": "min(width, height) / 20" 

        } 

      ] 

    } 

  ], 

  "marks": [ 

    { 

      "type": "text", 

      "encode": { 

        "enter": { 

          "x": {"signal": "width / 2"}, 

          "y": {"signal": "height / 2"}, 

          "align": {"value": "center"}, 

          "baseline": {"value": "middle"} 

        }, 

        "update": { 

          "text": { 

            "signal": "format(currentYear, '04') + '-' + format(currentMonth, '02') + '-' + format(currentDay, '02') + ' ' + format(currentHour, '02') + ':' + format(currentMinute, '02') + ':' + format(currentSecond, '02')" 

          }, 

          "fontSize": {"signal": "fontSize"} 

        } 

      } 

    } 

  ] 

}

Final output

Best regards,
Albert He

If this post helps, then please consider Accept it as the solution to help the other members find it more quickly

[chintusasmal123]

Thank you so much @v-heq-msft , indeed this is very helpful.