Pebbleface Studio - an online Pebble watchface generator

[dire bay]

Last week I published an online Pebble watchface generator. A friend shared the Reddit link in the discussion. Recently, I updated the GitHub README and am reposting it here, hoping to receive more testing and improvement suggestions.

You can try it here: https://studio.pebbleface.com/
Frontend repo source code: https://github.com/Yorks0n/pebbleface-studio
Backend auto-builder source code: https://github.com/Yorks0n/pebble-face-builder

I have worked hard to fix most of the issues I could find, but it still feels quite rough. I hope to receive more testing feedback.

Here are some functions I'd like to improve on:

• Add auto scaling code for resolutions of 144×168 and 200×228
• Optimizing editor experience and more shortcut keys
• Add automatic alignment, color fill to the path drawing (GPath) function.
• ...

Please report bugs here or in the repo and tell me what features you'd like!

[lime coyote]

Ooh this looks very cool — one feature that comes immediately to mind is somehow combining the different platforms into one face. The code's easy, just add #ifdef blocks around each platform-specific code. Resources might be a little harder but still doable

[dire bay]

Indeed, the current way of separating different resolution watch faces is far from elegant. I am also working on making the design more versatile. However, there are some difficulties in achieving this.
For example, in a 144168 watchface, a pattern starting at 72 will look like it starts in the middle. However, on the Round model (180180) or the newer Time 2 (200*228), it will be located closer to the left side of the screen.
The implementation method I am currently thinking of is to calculate the proportionally scaled positions for various elements and write them in the generated code, but this will add additional code, and the scaling of different elements must be handled separately.
I have only recently begun to study making pebble watchfaces, hoping to have better implement.
Thanks again for reading this, and have a nice day.

And, Eric mentioned that there is a function on Time 2 to automatically scale the old resolution watch face. The approximate effect is to enlarge proportionally from the center of the dial. Hope that feature will work well.

[lime coyote]

Oh, I wasn't even thinking about automatically shifting layout. I was imagining keeping components across the different platforms, but letting the user rearrange everything and change stuff like font size and scaling manually 😅

[lime coyote]

It seems to work pretty well on some faces, not as great on others 🤷 There are a couple screenshots demoing the scaling feature in this server

[dire bay]

I also considered using a ratio to record position and length, such as 0.5*max_width. However, this would add extra overhead to the watch. Converting floating-point numbers to int can also easily cause misalignment.
Anyway, I will continue to work on it. Thank you again.

[lime coyote]

If you do go that route, you can keep track of the floating-point numbers in the front end but then just convert them to ints when you generate the code itself

[feral lily]

This is SO COOL!

One idea/request would be a setting to adjust rectangle/shape corners to be rounded? the higher the numerical value, the more rounded they get?

I could also see (if it's not already possible) adding an option to hide the leading zero from the hour

Having some alignment options might be good, too - being able to vertically and/or horizontally center the time, for example, with a button (like how layers are currently handled) and/or with some snapping on mouse drag

Not sure if this would be possible, but being able to add stuff like a battery readout/bluetooth icon would be pretty sweet as well

[dire bay]

I remember that stroke seems to default to rounded and cannot be adjusted. Rectangles have square borders when stroke is not set. I have implemented the stroke for the right angle edges in other watchfaces, and I will consider whether this setting can be achieved in a less complex way.

[dire bay]

I am rethinking the way to write various time patterns. The current HH hh MM mm is a bit confusing. I will definitely add this latter.

[dire bay]

Good idea. It's not difficult to implement this on the frontend. However, in the watchface, all coordinates are calculated from the top-left corner, so I will try to figure out how to ensure the actual display effect remains as consistent as possible. (Especially for text with different widths.)
As well as adding some preset Bluetooth or battery icons.

[feral lily]

Theoretically those preset icons could be replaced by a user, too - the battery one I guess would need multiple states uploaded, if it's not just being represented by text (which could also be an option)

[vivid mural]

Nice work. Has it gotten much use yet?

[wary pebble]

Any chance u add the new round?

[dire bay]

definitely I will

[haughty ingot]

@dire bay is not working from me.
the compile button stuck
in fetching... https://studio.pebbleface.com/api/build

well now is working strange

[dire bay]

Now the backend is hosted on a 1c1g VPS, I guess it may perform poorly when running tasks concurrently.

[haughty ingot]

a thing that you can improve to show a more real BlackandWhite preview because now it just transform the image in b/w

compare with this site https://imagy.app/es/make-images-black-and-white/
High Contrast B&W option

[dire bay]

great, this is beautiful. I'll improve this.

[placid gazelle]

could you make components so that certain number in the hour is certain image?

[placid gazelle]

https://youtu.be/jxD9_EpE11M?si=hErmTL8PNHJpJjtH working something like this program

[dire bay]

I've made watchface like this, so of course I will consider. Do you think the time digits should be displayed as certain format, such as "HH:MM
", or each digit can be placed arbitrarily on the screen? Or both an option maybe.

[placid gazelle]

the second will add less clutter (no way i actually thought of UX for a bit)

[placid gazelle]

the same thing for the date would be cool

[strong trellis]

Any chance of getting complications for weather, heart rate, upcoming calender events?

[haughty ingot]

did you do it?

[dire bay]

I replaced the original grayscale with high-contrast BW in the preview. The current effect is roughly as shown in the image, which matches the display effect in the Pebble SDK.

The real aplite can display additional shades of gray through dithering. I'm still working on achieving that effect, so I haven't pushed the update yet.

[dire bay]

I've updated to a new version where colors are now mapped to black, white, and gray, and the image can display gray with a dithering effect. However, the handling of some brightness boundaries is still not ideal at the moment; I'll look into it further later.

[dire bay]

For those interested in pebble color processing for B&W screen, here are some brief notes:

Drawing Primitives

1. Luminance Calculation
   Use the color's 2-bit R, G, B components (values from 0-3), with the function (2126 * color.r + 7152 * color.g + 722 * color.b) / 3, which output an integer luminance value between 0 (black) and 10,000 (white).

2. Handling Stroke and Text Colors

• Luminance < 5000 is rendered as Solid Black.
• Luminance >= 5000 is rendered as Solid White.

3. Handling Fill Colors

• Luminance < 3333, GColorBlack
• 3333 <= Luminance < 4999, GColorDarkGray
• 4999 <= Luminance <= 6666, GColorLightGray
• Luminance > 6666, GColorWhite
  And, GColorDarkGray and GColorLightGray currently both use the dithered display color of BWWB.

PNG Conversion
It calculates brightness using a simple average of the 8-bit R, G, B channels: (R + G + B) / 3

• brightness < 127, GColorBlack
• brightness >= 127, GColorWhite
  So process for PNGs does not create any dithered pattern.

[placid gazelle]

i just managed to make a font for it

wait how do i put the day of the week?

[dire bay]

try to add another "Time / Date" layer and use this pattern. Sorry for using such a strange way of writing; I should have used a more understandable abbreviation.

oh wait I see the problem

Now you can use E as the day of the week in digits 1 to 7.

Meanwhile, I have added the functionality to combine multiple PNGs to form the date and time, called PNG Time / Date. I tested the code in the simulator and it works normally, but if you encounter any issues or have a poor experience, please let me know.

[dire bay]

btw your font looks really cool, it reminds me of Persona5

[placid gazelle]

WAIT YOU JUST DID IT? HELL YEAHH

[placid gazelle]

im trynna do that

ohhh damnn it cant compile when i use the font method

[dire bay]

Sorry, I don't have my computer with me at the moment. Would you be able to download the Source and send me the zip file? I'll test it out tomorrow morning.

[placid gazelle]

nvm it works i had to update to the new version of the page

[dire bay]

I have added support for Round 2.
Additionally, the positions of elements will now be proportionally adjusted based on different watchface sizes to ensure compatibility with various watch models.

[lime coyote]

You should put some kind of attribution on the page, maybe a link to the GitHub source code or something?