The experience of creating a dial for Pebble watches
I deliberately did not use the word "my" in the title, as mine is not so much there. Nevertheless, I hope the article will be useful to those who are only going to go my way.
So, it all started with two articles from the user tmnhy (links to the articles themselves at the end of the material), where the creation of the dial was described in detail. More valuable was the fact that the source code of the working dial was attached to the articles. Judging by the articles, there is nothing particularly difficult in this matter and I decided to try. I also contacted tmnhy himself, who helped me through the programming process to the end, for which I thank him so much.
I always liked the watch with flipping plate numbers, so popular in America. A few years ago, I even thought about buying an HTC smartphone just because the watch was made in that style there. This is the dial I wanted to do.
')
I developed all the development in a special online service from the creators of the watch, CloudPebble. Honestly, its functionality not only amazed me, but really pleasantly shocked me. All code is written in the editor with convenient backlighting and auto-completion. All graphics are added through a special resource manager. Everything compiles to CloudPebble too, and the application instantly loads into your watch — it just can't be more convenient. You can also download the compiled file to your computer or take a screenshot of the dial. As I understand it, the screenshot is actually taken on my watch, and not on some emulator on the server, because if you change the dial on the watch at the last second, the screenshot will be removed from it already. Another advantage of CloudPebble is integration with GitHub, which I also gladly took advantage of.
The lion's share of the time I took drawing graphics. As far as drawing graphics, I immediately added it to the project and placed it where necessary. I took the C code from the tmnhy example without any changes and then changed it to fit my needs. Surprisingly enough for me, the dial has gained a slight touch of steampunk. When all the graphics were ready and added to the project, the unexpected happened: I exceeded the memory limit on the clock. The dial without errors was compiled and loaded into the clock, where it instantly "fell." It was necessary to cut the graphics. I started with the "saving on matches" and cut off the "thread" at the battery indicator. Now, instead of this “thread”, a Bluetooth indicator is shown, in which the letter B has come out of the screen. Visually there is no difference with the previous version. Next was the most time consuming - the central unit with the date and seconds. I removed the background image with a circle and drew it programmatically.One nuance was found out here: for drawing a circle, the coordinates of the center and the radius are set, so its size in pixels will always be odd and it’s impossible to arrange it strictly in the center. I had to move everything else a little bit, since the old circle had an even size. For the same reason, the seconds indicator no longer fit into the circle and it also had to be redrawn. And this is 60 sprites, if that ... However, if we redraw, then you need to squeeze out of it to the maximum. As a result, everything that really does not change in the indicator of seconds, I transferred to the background image, which allowed to significantly reduce the resolution of the sprite. Multiply by 60 and it turns out significant savings, which, ultimately, and allowed me to fit into the byte budget.
The last problem I had to solve was the name of the city in the weather block. The fact is that only a not very long name was placed there, but what to do with a long one? Having played with the fonts, I realized that this is not an option. As a result, he got out like this: if the name of the city is short enough, it shows the temperature, if it is long - only the temperature.
The second integral part of the dial is the settings page. In fact, this is a regular web page, the address of which is registered in the dial settings and which accepts and returns some variables back to the dial. The page did not take a lot of time, since there was no need for adaptability and multi-browser compatibility here. In order to optimize, I minified all CSS and JS and included them in the code of the page. As a result, it turned out to be simple and fairly optimized: no graphics, and the only include file is jQuery.
In this form, the dial was published, but one thing I still did not give rest. In order to properly configure the display of weather, the user had to find somewhere the ID of his city on openweathermap.org and enter it in the input field on the settings page, which is extremely inconvenient. I found the official list of cities, consisting of ... 74 thousand items. It is clear that to ship such a monster entirely is not an option. The solution I chose was select with AJAX content.
Having found a suitable script and “having trained on cats”, I put the entire list of cities in the database. Here a couple of nuances were revealed: 1) cities with the same name existed in different countries and 2) some cities (apparently large enough) had several IDs attached to different coordinates. I solved the first problem by adding the state flag in front of the city name. Flags, again for reasons of optimization, found such that they were in one sprite. I did not find an adequate solution for the second problem, and therefore I simply used GROUP BY in the SQL query in order to cut off duplicates.
References to the dial:
Additional links:
Source: https://habr.com/ru/post/375529/
All Articles