Documentation and help needed regarding photo watch faces

[DevPika]

Device: Amazfit band 7
OS: Zepp OS v1

I want to create a watch face with a dynamic background. My initial trials with using the Fetch API did not work out as currently the widget API doesn't support accessing \data files. So I am trying to make a watch face with a customizable "photo" background instead, similar to the default ones in the store with leaves in the background. The online watch face editor doesn't seem to provide an option for photo background yet. Finally, I had to resort to code. I created this repo with the code I have so far. The documentation mentions photoscreen which I have set to 1. Could someone from the team shed some more light on how to go forward with this? Questions:

1. Is the photoscreen setting the only change required?
2. Any sample code available for photo background watch face to build on/adapt?
3. How can I as the developer test out the photo background changing feature before publishing my watch face? It looks like only the published photo watch faces have the button in the Zepp mobile app to "Change the background of the Watch Face". Is there a way to test out this feature to ensure it works before publishing it on the store?

Thanks!

[MyoungXUE]

Thank you for your support of the forum, sorry the initial division of the forum categories didn't make sense, I created a new developer feedback category and moved this discussion under that category.

Regarding the Watchface question, I will find a professional Watchface colleague to answer it.

[zhouxinhe]

Device: Amazfit band 7 OS: Zepp OS v1

I want to create a watch face with a dynamic background. My initial trials with using the Fetch API did not work out as currently the widget API doesn't support accessing \data files. So I am trying to make a watch face with a customizable "photo" background instead, similar to the default ones in the store with leaves in the background. The online watch face editor doesn't seem to provide an option for photo background yet. Finally, I had to resort to code. I created this repo with the code I have so far. The documentation mentions photoscreen which I have set to 1. Could someone from the team shed some more light on how to go forward with this? Questions:

1. Is the photoscreen setting the only change required?
2. Any sample code available for photo background watch face to build on/adapt?
3. How can I as the developer test out the photo background changing feature before publishing my watch face? It looks like only the published photo watch faces have the button in the Zepp mobile app to "Change the background of the Watch Face". Is there a way to test out this feature to ensure it works before publishing it on the store?

Thanks!

Hello, @DevPika

• Put your default background image at zpk-root-dir/assets/images/bg.png, Zepp app would replace this fixed path image to user's photo when installing watchface to the device.
• You can also config your foreground color in zpk-root-dir/assets/config.json, to allow users to customize the color.
  refer config.json below (color in ARGB format):

{
    "version": 1,
    "foreground": {
         "color": "FF112233"
    }
}

then you can read the color configuration by yourself in JS, and make a colorful watchface.

• Config photoscreen to 1 in app.json, and mark it as photo watchface when you submit it.

For testing, you can change the bg.png and color configuration manually.

[DevPika]

Thank you for providing details! I see that that the "Time: Top" (with the green leaves in the background) also allows for changing the style (Center/Top/Bottom). Is this also implemented using the above assets/config.json? How is this config object accessed inside the watchface's index.js? It would be really helpful if we had a sample opensource app that uses these features or more detailed documentation on the assets/config.json and photoscreen, as there is currently no way to test these features before submitting. Would it be possible to open source the "Time:Top" watchface as one of the samples to highlight this functionailty?