Show week number on watch face [T-Rex 2]

[PrinsDouwe]

I want to show the current week number on a watch face but cannot find how tot do it. There is a watch face with a week number on it (TrexIQ), but i cannot figure out how it has done. I asked already the watch face maker in a private DM but did not receive an answer till now. I there anybody else who knows how to do it? Thanks in advance!

IF there is already a topic about this, please let me know. I couldn't find it so far!

[taw_bip]

I'm not a coding expert but after cleaning up the script, changing the PNGs to a viewable type and asking Google Gemini to figure it out, it appears the lines related to the week number are here:

Spoiler

Code: Select all

let n = Math.ceil(((e.utc - new Date(e.year, 0, 1).getTime()) / 864e5 + new Date(e.year, 0, 1).getDay() + 1) / 7);

if (L) {
  n = n.toString().padStart(v.length, "0");
}

for (let e = 0; e < v.length; e++) {
  if (v.length - n.length < e && L === false) {
    v[e].setProperty(hmUI.prop.VISIBLE, false);
  } else {
    v[e].setProperty(hmUI.prop.VISIBLE, true);
    v[e].setProperty(hmUI.prop.SRC, N[n.toString().charAt(e)]);
  }
}

Code: Select all

      for (let e = 0; e < v.length; e++) {
          v[e] = hmUI.createWidget(hmUI.widget.IMG, {x: 257 + e * 25, y: 378, w: 25, h: 37, enable: false, show_level: hmUI.show_level.ONLY_NORMAL});
        }
        E = hmUI.createWidget(hmUI.widget.IMG, {x: 157, y: 379, w: 94, h: 37, src: "0120.png", enable: false, show_level: hmUI.show_level.ONLY_NORMAL});

I can play around with it a little more later on but I'm sure someone like @asoo or @Lattenknaller or @TRK88PL could figure it out quickly.

[asoo]

I want to show the current week number on a watch face but cannot find how tot do it. There is a watch face with a week number on it (TrexIQ), but i cannot figure out how it has done. I asked already the watch face maker in a private DM but did not receive an answer till now. I there anybody else who knows how to do it? Thanks in advance!

IF there is already a topic about this, please let me know. I couldn't find it so far!

If possible, I recommend that you should Attached is the dial file you mentioned. To make it easy for those who want to help you to check the functionality of what you want.
.

---

.

I'm not a coding expert but after cleaning up the script, changing the PNGs to a viewable type and asking Google Gemini to figure it out, it appears the lines related to the week number are here:

Spoiler

Code: Select all

let n = Math.ceil(((e.utc - new Date(e.year, 0, 1).getTime()) / 864e5 + new Date(e.year, 0, 1).getDay() + 1) / 7);

if (L) {
  n = n.toString().padStart(v.length, "0");
}

for (let e = 0; e < v.length; e++) {
  if (v.length - n.length < e && L === false) {
    v[e].setProperty(hmUI.prop.VISIBLE, false);
  } else {
    v[e].setProperty(hmUI.prop.VISIBLE, true);
    v[e].setProperty(hmUI.prop.SRC, N[n.toString().charAt(e)]);
  }
}

Code: Select all

      for (let e = 0; e < v.length; e++) {
          v[e] = hmUI.createWidget(hmUI.widget.IMG, {x: 257 + e * 25, y: 378, w: 25, h: 37, enable: false, show_level: hmUI.show_level.ONLY_NORMAL});
        }
        E = hmUI.createWidget(hmUI.widget.IMG, {x: 157, y: 379, w: 94, h: 37, src: "0120.png", enable: false, show_level: hmUI.show_level.ONLY_NORMAL});

I can play around with it a little more later on but I'm sure someone like @asoo or @Lattenknaller or @TRK88PL could figure it out quickly.

I'm not sure if the scrip mentioned will work on the watch face or not. But when viewed as a whole, it is a calculation of weeks in a given year.
It can probably be explained like this.

Explain the code

1: Calculating "n"

Code: Select all

let n = Math.ceil(((e.utc - new Date(e.year, 0, 1).getTime()) / 864e5 + new Date(e.year, 0, 1).getDay() + 1) / 7);

e.utc: Assuming this is the current date in UTC.
new Date(e.year, 0, 1).getTime(): The timestamp in milliseconds for January 1st of the year specified by e.year.
864e5: This is the number of milliseconds in one day (86400000 milliseconds).
new Date(e.year, 0, 1).getDay(): The day of the week for January 1st (0 is Sunday, 1 is Monday, and so on).
This part of the code calculates the number of days from the beginning of the year to e.utc, adds the day of the week for January 1st, and then divides by 7 to find the number of weeks. Math.ceil is used to round up to the nearest whole number.

2: Padding n with Leading Zeros (if necessary)

Code: Select all

if (L) {
  n = n.toString().padStart(v.length, "0");
}

If L is true, the value of n is converted to a string and padded with leading zeros to match the length of v.length.
(But where does the value of L come from? How is it obtained? I'm not sure because from the attached script it doesn't seem like it's been mentioned yet.)

3: Setting Widget Properties

Code: Select all

for (let e = 0; e < v.length; e++) {
  if (v.length - n.length < e && L === false) {
    v[e].setProperty(hmUI.prop.VISIBLE, false);
  } else {
    v[e].setProperty(hmUI.prop.VISIBLE, true);
    v[e].setProperty(hmUI.prop.SRC, N[n.toString().charAt(e)]);
  }
}

Iterates over each element in v (assuming v is an array of widgets).
If the condition v.length - n.length < e is met and L is false, the widget is set to not be visible (VISIBLE is false).
Otherwise, the widget is set to be visible (VISIBLE is true) and its source image (SRC) is set using the character from n at position e.

4: Creating Widgets

Code: Select all

for (let e = 0; e < v.length; e++) {
  v[e] = hmUI.createWidget(hmUI.widget.IMG, {x: 257 + e * 25, y: 378, w: 25, h: 37, enable: false, show_level: hmUI.show_level.ONLY_NORMAL});
}
E = hmUI.createWidget(hmUI.widget.IMG, {x: 157, y: 379, w: 94, h: 37, src: "0120.png", enable: false, show_level: hmUI.show_level.ONLY_NORMAL});

Iterates to create widgets for each element in v and sets their position and size.
Creates another widget E with specified position, size, and image source.

Summary

Calculates the week number of the year based on the given date and time.
Pads the value n with leading zeros if necessary.
Sets the visibility and image source of widgets based on the calculated value.
Creates the necessary widgets in the user interface.

Since I am not interested in calculations, this week I would like not to perform any tests.
Hopefully the script description shown earlier will be useful to those interested.

[taw_bip]

@asoo This is the watchface.
https://amazfitwatchfaces.com/t-rex/view/13091

[PrinsDouwe]

@asoo This is the watchface.
https://amazfitwatchfaces.com/t-rex/view/13091

That is indeed the watchface in mentioned. I tried to figure it out with the watchface editor from sashaCX75. But the watchface doesn't load correct and i can't view how it is done.

[asoo]

@asoo This is the watchface.
https://amazfitwatchfaces.com/t-rex/view/13091

That is indeed the watchface in mentioned. I tried to figure it out with the watchface editor from sashaCX75. But the watchface doesn't load correct and i can't view how it is done.

The watchface you mention uses a script that doesn't meet the standards of Sasha's editor, so you can't unpack the watchface properly.
If you want to see the script that handles the week numbers, you can look at the index.js file in the watch face file (.zip).

However The dial you mention uses minified encoding, so there are no newlines on each line. The names of the variables are also shortened, so you may encounter additional problems in understanding the script.
-

---

-
This is a watch face that was repacked and created using the editor of Sasha Version 10.4. Therefore, this watch face file can be unpacked with Sasha's editor correctly, but the script used to manage "Week numbers" will not be displayed in the preview of the program. but should be displayed on watch normally
However, you can access the script "week number". The script is added to the editor's "JS script" element.

I didn't test it on a real device, I only tested it on an emulator (ZeppPlayer).

Download Sample file

TRex2IQ_US_RS_PC_10_4.zip

(185.12 KiB) Downloaded 154 times

Note:
- The script in the week number section, I did not validate its functionality. I just took it from the original , so it should still works same as the original.
So if the script doesn't work properly Please contact the owner of the work.
I will not accept any requests for this sample file.
Anyone who wants to modify or make additional changes, please study and do it yourself.
- Fixed weather icon to 29 icons ( in original have only 27 icon )

[PrinsDouwe]

Thanks @asoo , What you say, i'm not a code wizard, but this code is complicated to read.... I'll try to figure it out.....

1 thing i do not understand is, wich item is used to make it visible on the watchface.... like "normal_date_img_date_week_img" is used to show the image for the day of week.

[asoo]

Thanks @asoo , What you say, i'm not a code wizard, but this code is complicated to read.... I'll try to figure it out.....

1 thing i do not understand is, wich item is used to make it visible on the watchface.... like "normal_date_img_date_week_img" is used to show the image for the day of week.

normal_date_img_date_week_img
It is only the name of the variable value. It can be set to any other name.
The important part is the command format specified after the name, such as
normal_date_img_date_week_img = hmUI.createWidget(hmUI.widget.IMG_WEEK

So from the script mentioned earlier regarding "Week number", look at the value of the variable V because it is a variable. used to process "Week number"

description for the script

Code: Select all

// variable value "V" is the element used to define set the location where the "week number" value will be displayed. 
//It will be displayed through "hmUI.createWidget(hmUI.widget.IMG" commands.
//

for(let e=0; e<v.length; e++){
v[e]=hmUI.createWidget(hmUI.widget.IMG,
{
x:257+e*25,
y:378,
w:25,
h:37,
enable:false,
show_level:hmUI.show_level.ONLY_NORMAL
})}

Code: Select all

// Set N to store the array of images that will be used to display the "week number". //
let N=["0110.png","0111.png","0112.png","0113.png","0114.png","0115.png","0116.png","0117.png","0118.png","0119.png"];

Code: Select all

// This line is use to display the "week number" value obtained from the calculation by use the image of numbers stored in the variable "N".   
// It will bring the value The calculated "week number" is applied to the "V" element using the ".setProperty(hmUI.prop.SRC" command. 

v[e].setProperty(hmUI.prop.SRC,N[n.toString().charAt(e)])

[SashaCX75]

This is my suggestion for the watch face. I think this code is much simpler. The only limitation is that the data is updated only when the screen is switched on. But I don't think that's a problem.

One more clarification. I am not sure about the correctness of the function for determining the day of the week. Most likely it will work correctly if your week starts on Sunday. If the week starts from Monday, then you probably don't need to add one day in this function.

[PrinsDouwe]

Thanks @asoo & @SashaCX75 !

I've been fiddling with your suggestions a bit and it worked. The weeknumber is now on my Watchface!
Still have to do some test to see if the weeknumber is changing on the correct day.