Huawei Watch Face Maker v.0.1 beta


Userlevel 6
Greetings, Huaweians :P

I'll be posting in this thread from now on, concerning this application.
So, what does this app do?

It allows you to compose faces for Huawei GT and Honor (both 454x454px and 390x390px).
You can create these widgets:
  • Image
  • TextureMapper
  • Circle
  • Line
  • TextAreaWithOneWildcard
  • Box
  • SelectImage
  • TextAreaWithTwoWildcard
Most of them are graphics (Image, TextureMapper, Circle, Line, SelectImage), so for those, you import images.
For the others (TextAreaWithOneWildcard, Box, TextAreaWithTwoWildcard), there are other properties, like background color, text color, alpha, width, height, font type, etc.
So, once you insert them, you can then drag them and position them, scale them and order them (yes, there are layers).
While dragging, there's a visual indicator of it's coordinates, for precise positioning. I'm also implementing a visual indicator for dimensions (for precise scaling).

Finally, once you're done with the editing, you can export a watch_face_info.xml and a watch_face_config.xml.

It's useless to say you'll have to make the images yourself, in your favorite graphics app, like Photoshop or GIMP.


I'll need help with the Honor watch (I own a GT myself), maybe someone could send me a watch_face_info.xml and watch_face_config.xml so that I can see if there are significant differences between GT and Honor.
I bet the in watch_face_config.xml is 390, which is implemented already, but how about the watch_face_info.xml fields? What's in the "screen" and "version" fields?
Thanks for your help in advance.

Anyway, here are some more pictures of it's current state:


422 replies

Userlevel 7
Badge
Thanks for sharing this new great dial tool. Can't wait for the test.
Userlevel 3
Is there any possibility that runs on Mac? Thanks for your great work!
Userlevel 3
Great work!
Userlevel 6
Is there any possibility that runs on Mac? Thanks for your great work!

The framework I'm using allows me to deploy for Windows, Linux and Mac.

So yes, it'll run on Mac, but I guess you'll have to be my beta tester, since I don't own a Mac.
Userlevel 1
I'll be happy to beta test on mac, too.
Userlevel 7
Badge +3
I will send you all the files needed for Honor in PM shortly
Userlevel 3
I'll be happy to beta test on mac, too.
Of course!
Userlevel 3

Is there any possibility that runs on Mac? Thanks for your great work!The framework I'm using allows me to deploy for Windows, Linux and Mac.

So yes, it'll run on Mac, but I guess you'll have to be my beta tester, since I don't own a Mac.


Are you using Electron framework maybe?
Userlevel 6


Is there any possibility that runs on Mac? Thanks for your great work!The framework I'm using allows me to deploy for Windows, Linux and Mac.

So yes, it'll run on Mac, but I guess you'll have to be my beta tester, since I don't own a Mac.
Are you using Electron framework maybe?


Yes sir!
Cant wait for Download...
Great
Userlevel 3
i can also test on Mac and Windows.
Looks awesome!
Would love to test as well. Can test on Windows, osx and Linux.
Userlevel 6
New feature, Rotation Center Picker!

Helpful for TextureMapper, to define the rotation center for hours, minutes and seconds hands.

Tomorrow I'll share it, at least for Windows :)

Userlevel 6
Cheers guys,

here's the first version, it's not on github, I'll wait a bit more before making the code public.

In the meanwhile, download it from my >> Google Drive <<

Remember, this is still very early days for what I intend for this app.
I'm thinking about integrating Huawei's packaging tool in my app, making it an all round solution.

For now, you can efectivelly generate xml, which you must place in your theme's folder before you drag n' drop it on huawei's packaging tool executable to generate the *.hwt.

This is a still a tool for users like mkucuksari, who know what they're doing.

I'll try to make it easy for all others 🙂
Userlevel 6
By the way, for those who don't have the packaging tool, download it from >> HERE <
Userlevel 6
I've just updated the app some minutes ago, with some modifications for those with Honour watches.
It looks like Honour watches have screen "HWHD01" and version "3.1.1", as apposed to GT, which has screen "HWHD02" and version "2.1.9".

And now, for something completely different... a "small" tutorial:

First you need images, which you must have authored previously on your favorite graphic's tool.
These must be placed in "res" folder of your theme (which will be dragged n' dropped to the TemplateWatch.exe).
Usually, you should produce at least a background image, and if you're going for an analogic clock, a Hour, Minute and Second hand will also be necessary.

Background images (widget "Image") should be 454x454 pixels for Watch GT and 390x390 pixels for Honour, and should be imported first. Set these widgets type as "Static".
They don't have to have these dimensions necessarily, since you can superimpose other Image widgets, but they should be used for static background images.
Mind that you can always reorder the layers on the "Widgets" panel.

Then, you should import the hands using the TextureMapper widget. TextureMapper allows you to define an image which will rotate from 0 to 360 degrees according to a rotation center.
You must define it's starting coordinates (X and Y) corresponding to the top left position of the widget relative to the watch face. Then, define the rotation center X and Y in the image itself. This relates to the coordinates where the image will rotate and you can set it in the app by clicking the eyedropper button and selecting the rotation center on the image you imported.

For all images, dimensions of the widget will be automatically calculated from the image itself, but you can also set them manually if you prefer.

If you're going for a digital kind of face, it's easier. Use TextAreaWithTwoWildcard to set the hour, by defining Data type as DATA_HOUR24 (or DATA_TYPE12, depending on your preference) and Data 2 type as DATA_MINITE (yes, it looks like it is really DATA_MINITE), but please let me know because I can't test ( I don't have a chinese Huawei ID to use the beta app, so I'm blind developing 😞 ).
As Connector, use ":" and place it wherever you like. For now, I've a limitation with fonts. I don't know what fonts are being used by interpreting the names Huawei gave them, so I can't really use them, BUT, I'm detecting if they´re Bold, Black, their size and what not, from their names, so it should be kind of accurate, considering I'm using ARIAL font.

Keep in mind that, for anything involving an image, you should use the Data Type with "Ratio" on it.

For texts with steps or heart rate or everything not envolving a separator, you should use TextAreaWithOneWildcard, which is almost the same as TextAreaWithTwoWildcard, but it uses just one variable and no separator.

Make sure you check out the "WATCH_FACE_GUIDE_BOOK.en.pptx" and "WATCH_FACE_TUTORIAL.en.docx" on my >> Google Drive << .

They were both Google translated from chinese, but should be understandable to some degree.

Finally, having all the files correctly placed inside a folder, you have to drag n' drop the folder to the TemplateWatch.exe executable to generate a hwt.
This will be the file that you lucky guys with a chinese Huawei ID can import to your watch using the Health App.


I'm thinking about embedding the TemplateWatch.exe into my app, to make an all round solution. This will come very soon, hopefully this week.


Finally, after all this work, I'm still unable to import my own custom faces, simply because I don't own a chinese Huawei ID.

Is there any possibility that runs on Mac? Thanks for your great work!The framework I'm using allows me to deploy for Windows, Linux and Mac.

So yes, it'll run on Mac, but I guess you'll have to be my beta tester, since I don't own a Mac.

I would love to beta test also just signed up to offer my services own 2012 Mac book pro and 2 iMac
Please package for linux too XD
Will this work on the watch 2 running wear os?
Try Use u Guide to do a simple 24 hour cloxk..
But cant See a Preview

Userlevel 3
Try Use u Guide to do a simple 24 hour cloxk..
But cant See a Preview



Change value in "Drawable X" and "Drawable Y" fields...
and set "Drawable Width" and "Drawable Height" other than zero...
Probably the widget is there but it is out of sight
Userlevel 6

Try Use u Guide to do a simple 24 hour cloxk..
But cant See a Preview

Change value in "Drawable X" and "Drawable Y" fields...
and set "Drawable Width" and "Drawable Height" other than zero...
Probably the widget is there but it is out of sight


That's correct jospic it must be it.
SInce he placed a TextAreaWithTwoWildcard, dimensions are not calculated automatically, as when you import an image. He must have submitted 0 on Drawable X, Drawable Y, Drawable width and Drawable height.
Either press the "i" button and change those values, or delete the widget and add it again.

And by the way, as TextAreaWithOneWildcard and TextAreaWithTwoWildcard are text only widgets, they will display what you place in the Label field.


Later today I'll be updating the app with new stuff:

  • Lock widget (you won't be able to move it or resize it, useful for when you're done editing it);
  • Hide widget (hides the widget, so you can see better whats underneath it);
  • Several bugs detected and solved;
  • Basic watch preview (to see how the hands move for example).




To build the preview functionality, I need to fully understand all the widgets, which I don't, because I can't test them on my watch :(
Most of them are straightforward, but I have a doubt concerning the Circle and Line widgets, that maybe someone can clarify.

They're both images, but for example, the Circle widget has coordinates that describe an arc. I assume that this arc will work as a mask, showing or hidding part of the image? And if so, does the Line widget work the same way?
Userlevel 6
Here's a video showing how to work with the app.
You'll also see the new features, among them, watch preview ;)

Later today I'll update the version on Google Drive.

Userlevel 3
Wow, very cool is something like the watch maker on android. 🙂
Userlevel 3
Woah, I'm impressed... Great job you're making here for the community.
As I have played with the tool for a while, it seems really straightforward and intuitive. Hopefully we, as people outside of China, will be able to use it very soon to personalize our watches.

Reply