UTC time offset - watch face

I would like to ask for help with the code for UTC offset for the time display. I have a watch face I'm building and plan to have 2 timezones showing the local time and UTC + 0:00.

Can someone help me better understand the code below ? I've tried to piece it together with the references but not to sure I'm headed in the right direction.

This is the code I'm using for local time and I believe I just need to add the offset.

private function setClockDisplay() {

var clockTime = System.getClockTime();
var timeString = Lang.format("$1$:$2$", [clockTime.hour, clockTime.min.format("%02d")]);
var view = View.findDrawableById("TimeDisplay");
view.setText(timeString);

}

Do I just simply add timeZoneOffset + 0:00 for UTC?

FlowState over 2 years ago

BrandonM. said:
Do I just simply add timeZoneOffset + 0:00 for UTC?

Sure that's one way of doing it. But then you have to worry about adjusting both minutes and hours (some time zones are offset by 30 minutes), and also handling the cases where the new minutes value is less than 0 or greater than 59, or the new hours value is less than 0 or greater than 23.

Another way to do it is to let the API do the calculations for you:

var now = Time.now(); // get the time in seconds since 0:00 Jan 1, 1970 UTC

// express as UTC
var utcInfo = Gregorian.utcInfo(now, Time.FORMAT_SHORT);
var utcTimeString = Lang.format("$1$:$2$", [utcInfo.hour, utcInfo.min.format("%02d")]);

// express as local time
var localInfo = Gregorian.info(now, Time.FORMAT_SHORT);
var localTimeString = Lang.format("$1$:$2$", [localInfo.hour, localInfo.min.format("%02d")]);

BrandonM. over 2 years ago in reply to FlowState

Thanks for that I'll give it a try. I'm trying to display 2 times on the watch face are you saying this allows for UTC and local timezone to be displayed at same time with this code ?

FlowState over 2 years ago in reply to BrandonM.

Np.

BrandonM. said:
are you saying this allows for UTC and local timezone to be displayed at same time with this code

Yup

BrandonM. over 2 years ago in reply to FlowState

Where in the code would this be placed? Also how do I move the position of it for the UTC to be in specific spot and local in another spot ?

FlowState over 2 years ago in reply to BrandonM.

The code I posted is just an example of how you'd take a given point in time (e.g. Time.now()) and express it as UTC and local time in the format of your choice. The intent was for you to adapt it to your specific needs.

So let's say your drawable for local time is named "TimeDisplay" as in your example, and your drawable for UTC time is named "UTCTimeDisplay". You could have code which looks like this:

// Given a gregorian info object, return a string representing the
// time in 24-hour format (h:mm). e.g. "9:23", "23:45"
private function formatGregorianInfoAsString(info) {
    return Lang.format("$1$:$2$", [info.hour, info.min.format("%02d")]);
}

// get current time and update UTC/local clocks in the UI
private function updateClocks() {
    var now = Time.now(); // get the current time in seconds since 0:00 Jan 1, 1970 UTC

    // express as UTC (h:mm) and update UTC clock
    var utcInfo = Gregorian.utcInfo(now, Time.FORMAT_SHORT);
    var utcTimeString = formatGregorianInfoAsString(utcInfo);
    View.findDrawableById("UTCTimeDisplay").setText(utcTimeString);

    // express as local time (h:mm) and update local clock
    var localInfo = Gregorian.info(now, Time.FORMAT_SHORT);
    var localTimeString = formatGregorianInfoAsString(localInfo);
    View.findDrawableById("TimeDisplay").setText(localTimeString);
}

FlowState over 2 years ago in reply to FlowState

If for some reason you absolutely need the utc and local code to be in different functions, you could do this. I assume you still want them to have the same time source ("now"), so that they're synced up. (You don't want to call Time.now() twice, otherwise your local and UTC clock will be out of sync).

EDIT: Also, the forum threw an error when I originally tried to post this code with Insert > Code, and I lost my work. Honestly, this forum really discourages posting in so many ways.


// info: Gregorian.Info
private function formatGregorianInfoAsString(info) {
 return Lang.format("$1$:$2$", [info.hour, info.min.format("%02d")]);
}

// moment: Time.Moment
private function updateUtcClock(moment) {
 // express as UTC and update UTC clock
 var utcInfo = Gregorian.utcInfo(moment, Time.FORMAT_SHORT);
 var utcTimeString = formatGregorianInfoAsString(utcInfo);
 View.findDrawableById("UTCTimeDisplay").setText(utcTimeString);
}

// moment: Time.Moment
private function updateLocalClock(moment) {
 // express as local time and update local clock
 var localInfo = Gregorian.info(moment, Time.FORMAT_SHORT);
 var localTimeString = formatGregorianInfoAsString(localInfo);
 View.findDrawableById("TimeDisplay").setText(localTimeString);
}

// get current time and update UTC/local clocks in the UI
private function updateClocks() {
 var now = Time.now(); // get the current time in seconds since 0:00 Jan 1, 1970 UTC
 updateUtcClock(now);
 updateLocalClock(now);
}

BrandonM. over 2 years ago in reply to FlowState

Flow,

Thank you so much for all of this. I'm like brand new like week 1 into all this development code. I'm trying to understand and learn about Monkey C. I'm understanding some of it but the tutorials are lacking and so I'm a hands on and visual person. Big ask here hopefully I don't get in trouble for this question... Would you be willing to do a basic watch design with settings as an example with explanations ? Is it possible to pay someone on here for help. I do not just want someone to do it for me I really want to learn this but need better reference materials.

Everything you offered is great and I truly appreciate it but the very basic code I had was from Eclipse IDE connect IQ from another watch design and I was trying to fix it the way I wanted it.

Hope you would be willing to help outside of this forum because I also find it very hard to use and find answers with it so that's why I've been posting so many questions. Hoping to find a very knowledgeable person like yourself that is willing to help.

Basic watch design this may be much more than basic and I apologize for calling it this but I think basic when I seen so many of the watch faces that Garmin provides by default on the watch.

Image - custom

Text box - custom (option to allow it to be changed )

Heart rate

Steps

Local with seconds and UTC time

Reg date and Julian date

Bluetooth icon - simply to indicate phone is connected or not red - off and blue - on

Altitude

Again I apologize if this is to much and or not allowed.

If it is possible can you PM me

FlowState over 2 years ago in reply to BrandonM.

Dude, I appreciate the offer and I understand where you’re coming from, but unfortunately I don’t have time to go that in-depth with help. Besides, I’ve actually never published a CIQ watch face (I’ve done other app types tho).

Idk how helpful this is, but the source code for the super-popular Crystal watchface (3 million downloads) is available on github:

[https://github.com/warmsound/crystal-face]

You could at least try building it and making little mods to see how it works.

BrandonM. over 2 years ago in reply to FlowState

Flow,

Thanks for this suggestion I will start working on it and see what I can learn from this design. I greatly appreciate it and you taking your time to help others. I will be posting more questions so I hope to hear from you again. Do you have any guides, tips, tricks or other helpful tools for learning Monkey C? How did you pick it up ?