Forum Discussion
Deneb visual showing Germany Time
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.
- Anonymous2 years ago
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 HeIf this post helps, then please consider Accept it as the solution to help the other members find it more quickly
2 Replies
- AnonymousNot applicable
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 HeIf this post helps, then please consider Accept it as the solution to help the other members find it more quickly
- chintusasmal123
Helper I
Thank you so much Anonymous , indeed this is very helpful.