From e9248b225e78e36ff04f7c26244adf200e17020e Mon Sep 17 00:00:00 2001 From: Tim Keller Date: Mon, 26 Jul 2021 01:14:23 +0000 Subject: Updated documentation --- doc/buildWithVScode.md | 42 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 42 insertions(+) create mode 100644 doc/buildWithVScode.md (limited to 'doc') diff --git a/doc/buildWithVScode.md b/doc/buildWithVScode.md new file mode 100644 index 00000000..31174d1c --- /dev/null +++ b/doc/buildWithVScode.md @@ -0,0 +1,42 @@ +# Build and Develop the project using VS Code + +The .VSCode folder contains configuration files for developing InfiniTime with VS Code. Effort was made to have these rely on Environment variables instead of hardcoded paths. + +## Environment Setup + +To support as many setups as possible the VS Code configuration files expect there to be certain environment variables to be set. + + Variable | Description | Example +----------|-------------|-------- +**ARM_NONE_EABI_TOOLCHAIN_PATH**|path to the toolchain directory|`export ARM_NONE_EABI_TOOLCHAIN_PATH=/opt/gcc-arm-none-eabi-9-2020-q2-update` +**NRF5_SDK_PATH**|path to the NRF52 SDK|`export NRF5_SDK_PATH=/opt/nRF5_SDK_15.3.0_59ac345` + +## VS Code Extensions + +We leverage a few VS Code extensions for ease of development. + +#### Required Extensions + +- [C/C++](https://marketplace.visualstudio.com/items?itemName=ms-vscode.cpptools) - C/C++ IntelliSense, debugging, and code browsing. +- [CMake Tools](https://marketplace.visualstudio.com/items?itemName=ms-vscode.cmake-tools) - Extended CMake support in Visual Studio Code + +#### Optional Extensions + +[Cortex-Debug](https://marketplace.visualstudio.com/items?itemName=marus25.cortex-debug) - ARM Cortex-M GDB Debugger support for VSCode + +Cortex-Debug is only required for interactive debugging using VS Codes built in GDB support. + + + +## VS Code/Docker DevContainer + +The .devcontainer folder contains the configuration and scripts for using a Docker dev container for building InfiniTime + +Using the [Remote-Containers](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers) extension is recommended. It will handle configuring the Docker virtual machine and setting everything up. + +More documentation is available in the [readme in .devcontainer](.devcontainer/readme.md) + + + + + -- cgit v1.2.3-70-g09d2 From 7f2ee62aedd359d34af6569bc691e216a49a7f5d Mon Sep 17 00:00:00 2001 From: Tim Keller Date: Mon, 26 Jul 2021 15:43:48 +0000 Subject: Typos for days --- .devcontainer/README.md | 32 ++++++++++++++++---------------- doc/buildWithVScode.md | 4 ++-- 2 files changed, 18 insertions(+), 18 deletions(-) (limited to 'doc') diff --git a/.devcontainer/README.md b/.devcontainer/README.md index c8aef574..1932a9d4 100644 --- a/.devcontainer/README.md +++ b/.devcontainer/README.md @@ -1,11 +1,11 @@ -# VScode devcontainer -This is a docker-based interactive development environment using VSCode and Docker Devcontainers removing the need to install any tools locally* +# VS Code Dev Container +This is a docker-based interactive development environment using VS Code and Docker Dev Containers removing the need to install any tools locally* ## Requirements -- VScode +- VS Code - [Remote - Containers](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers) extension - Docker - OpenOCD - For debugging @@ -14,24 +14,24 @@ This is a docker-based interactive development environment using VSCode and Dock ### Code editing, and building. -1. Clone InifiniTime and update submodules -2. Launch VSCode -3. Open InifiTime directory, -4. Allow VSCode to open folder with devcontainer. +1. Clone InfiniTime and update submodules +2. Launch VS Code +3. Open InfiniTime directory, +4. Allow VS Code to open folder with devcontainer. After this the environment will be built if you do not currently have a container setup, it will install all the necessary tools and extra VSCode extensions. -In order to build InfiniTime we need to run the initial submodule init and Cmake commands. +In order to build InfiniTime we need to run the initial submodule init and CMake commands. #### Manually - You can use the VSCode terminal to run the CMake commands as outlined in the [build instructions](blob/develop/doc/buildAndProgram.md) + You can use the VS Code terminal to run the CMake commands as outlined in the [build instructions](blob/develop/doc/buildAndProgram.md) #### Script -The dev enviroment comes with some scripts to make this easier, They are located in /opt/. +The dev environment comes with some scripts to make this easier, They are located in /opt/. -There are also VSCode tasks provided should you desire to use those. +There are also VS Code tasks provided should you desire to use those. The task "update submodules" will update the git submodules @@ -41,20 +41,20 @@ The task "update submodules" will update the git submodules You can use the build.sh script located in /opt/ -CMake is also configured and controlls for the CMake plugin are available in VSCode +CMake is also configured and controls for the CMake plugin are available in VS Code ### Debugging -Docker on windows does not support passing USB devices to the underlying WSL2 subsystem, To get around this we use openocd in server mode running on the host. +Docker on windows does not support passing USB devices to the underlying WSL2 subsystem, To get around this we use OpenOCD in server mode running on the host. `openocd -f -f ` -This will launch openocd in server mode and attach it to the MCU. +This will launch OpenOCD in server mode and attach it to the MCU. -The default launch.json file expects openocd to be listening on port 3333, edit if needed +The default launch.json file expects OpenOCD to be listening on port 3333, edit if needed ## Current Issues -Currently WSL2 Has some real performance issues with IO on a windows host. Accessing files on the virtualized filesystem is much faster. Using VSCodes "clone in container" feature of the Remote - Containers will get around this. After the container is built you will need to update the submodules and follow the build isntructions like normal \ No newline at end of file +Currently WSL2 Has some real performance issues with IO on a windows host. Accessing files on the virtualized filesystem is much faster. Using VS Codes "clone in container" feature of the Remote - Containers will get around this. After the container is built you will need to update the submodules and follow the build instructions like normal \ No newline at end of file diff --git a/doc/buildWithVScode.md b/doc/buildWithVScode.md index 31174d1c..c1df17b7 100644 --- a/doc/buildWithVScode.md +++ b/doc/buildWithVScode.md @@ -1,6 +1,6 @@ # Build and Develop the project using VS Code -The .VSCode folder contains configuration files for developing InfiniTime with VS Code. Effort was made to have these rely on Environment variables instead of hardcoded paths. +The .VS Code folder contains configuration files for developing InfiniTime with VS Code. Effort was made to have these rely on Environment variables instead of hardcoded paths. ## Environment Setup @@ -22,7 +22,7 @@ We leverage a few VS Code extensions for ease of development. #### Optional Extensions -[Cortex-Debug](https://marketplace.visualstudio.com/items?itemName=marus25.cortex-debug) - ARM Cortex-M GDB Debugger support for VSCode +[Cortex-Debug](https://marketplace.visualstudio.com/items?itemName=marus25.cortex-debug) - ARM Cortex-M GDB Debugger support for VS Code Cortex-Debug is only required for interactive debugging using VS Codes built in GDB support. -- cgit v1.2.3-70-g09d2 From f0e9d13329f5647a8e55b89d167f8306d58cb518 Mon Sep 17 00:00:00 2001 From: Riku Isokoski Date: Sat, 14 Aug 2021 21:58:38 +0300 Subject: Update contribute.md (#475) * Update contribute.md * Add newlines and remove spaces * Replace CONTRIBUTING.md with doc/contribute.md --- CONTRIBUTING.md | 34 +-------------------------------- doc/contribute.md | 57 +++++++++++++++++++++++++++++++++++++------------------ 2 files changed, 40 insertions(+), 51 deletions(-) mode change 100644 => 120000 CONTRIBUTING.md (limited to 'doc') diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md deleted file mode 100644 index a6fa6828..00000000 --- a/CONTRIBUTING.md +++ /dev/null @@ -1,33 +0,0 @@ -This contribution guide is in progress, improvements are welcome. - -### Code style - -Any C++ code PRs should aim to follow the style of existing code in the project. - -Using an autoformatter is heavily recommended, but make sure it's configured properly. - -There's currently preconfigured autoformatter rules for: - - * CLion (IntelliJ) in .idea/codeStyles/Project.xml - -You can use those to configure your own IDE if it's not already on the list. - -#### Linting errors and compiler warnings - -Try to avoid any currently enabled warnings and try to reduce the amount of linter errors. - -#### Spelling - -Make sure you spellcheck your code before commiting it. - -#### TODO, FIXME - -Check before commiting that you haven't forgotten anything, preferably don't leave these in your commits. - -#### Licence headers - -You should add your name to the comma-space separated list of contributors if there's a license header. - -### License - -By contributing you agree to licence your code under the repository's general license (which is currently GPL-v3+). diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md new file mode 120000 index 00000000..15e2c684 --- /dev/null +++ b/CONTRIBUTING.md @@ -0,0 +1 @@ +doc/contribute.md \ No newline at end of file diff --git a/doc/contribute.md b/doc/contribute.md index 9f4c2154..0c34e2a5 100644 --- a/doc/contribute.md +++ b/doc/contribute.md @@ -1,68 +1,89 @@ # How to contribute? + ## Report bugs -You use your Pinetime and find a bug in the firmware? [Create an issue on Github](https://github.com/JF002/InfiniTime/issues) explaining the bug, how to reproduce it, the version of the firmware you use... + +Have you found a bug in the firmware? [Create an issue on Github](https://github.com/JF002/InfiniTime/issues) explaining the bug, how to reproduce it, the version of the firmware you use... + ## Write and improve documentation + Documentation might be incomplete, or not clear enough, and it is always possible to improve it with better wording, pictures, photo, video,... As the documentation is part of the source code, you can submit your improvements to the documentation by submitting a pull request (see below). + ## Fix bugs, add functionalities and improve the code + You want to fix a bug, add a cool new functionality or improve the code? See *How to submit a pull request below*. + ## Spread the word -The Pinetime is a cool open source project that deserves to be known. Talk about it around you, on social networks, on your blog,... and let people know that we are working on an open-source firmware for a smartwatch! + +The Pinetime is a cool open source project that deserves to be known. Talk about it around you, on social networks, on your blog,... and let people know that we are working on an open source firmware for a smartwatch! # How to submit a pull request ? ## TL;DR + - Create a branch from develop; - Work on a single subject in this branch. Create multiple branches/pulls-requests if you want to work on multiple subjects (bugs, features,...); - Test your modifications on the actual hardware; - Check the code formatting against our coding conventions and [clang-format](../.clang-format) and [clang-tidy](../.clang-tidy); - Clean your code and remove files that are not needed; - - Write documentation related to your new feature is applicable; - - Create the pull-request and write a great description about it : what does your PR do, why, how,... Add pictures and video if possible; + - Write documentation related to your new feature if applicable; + - Create a pull request and write a great description about it : what does your PR do, why, how,... Add pictures and video if possible; - Wait for someone to review your PR and take part in the review process; - Your PR will eventually be merged :) -Your contribution is more than welcome! +Your contributions are more than welcome! -If you want to fix a bug, add a functionality or improve the code, you'll first need to create a branch from the **develop** branch (see [this page about the branching model](./branches.md)). This branch is called a feature branch, and you should choose a name that explains what you are working on (ex: "add-doc-about-contributions"). In this branch, **focus on only one topic, bug or feature**. For example, if you created this branch to work on the UI of a specific application, do not commit modifications about the SPI driver. If you want to work on multiple topics, create one branch per topic. +If you want to fix a bug, add functionality or improve the code, you'll first need to create a branch from the **develop** branch (see [this page about the branching model](./branches.md)). This branch is called a feature branch, and you should choose a name that explains what you are working on (ex: "add-doc-about-contributions"). In this branch, **focus on only one topic, bug or feature**. For example, if you created this branch to work on the UI of a specific application, do not commit modifications about the SPI driver. If you want to work on multiple topics, create one branch for each topic. When your feature branch is ready, **make sure it actually works** and **do not forget to write documentation** about it if it's relevant. -I **strongly discourage to create a PR containing modifications that haven't been tested**. If, for any reason, you cannot test your modifications but want to publish them anyway, **please mention it in the description**. This way, other contributors might be willing to test it and provide feedback about your code. +**Creating a pull request containing modifications that haven't been tested is strongly discouraged.** If, for any reason, you cannot test your modifications but want to publish them anyway, **please mention it in the description**. This way, other contributors might be willing to test it and provide feedback about your code. Also, before submitting your PR, check the coding style of your code against the **coding conventions** detailed below. This project also provides [clang-format](../.clang-format) and [clang-tidy](../.clang-tidy) configuration files. You can use them to ensure correct formatting of your code. -Do not forget to check the files you are going to commit and remove those who are not necessary (config files from your IDE, for example). Remove old comments, commented code,... +Don't forget to check the files you are going to commit and remove those which aren't necessary (config files from your IDE, for example). Remove old comments, commented code,... -Then, you can submit a pull-request for review. Try to **describe your pull request as much as possible**: what did you do in this branch, how does it work, how is it designed, are there any limitations,... This will help the contributors to understand and review your code easily. You can add pictures and video to the description so that contributors will have a quick overview of your work. +Then, you can submit a pull request for review. Try to **describe your pull request as much as possible**: what did you do in this branch, how does it work, how it is designed, are there any limitations,... This will help the contributors to understand and review your code easily. You can add pictures and video to the description so that contributors will have a quick overview of your work. Other contributors can post comments about the pull request, maybe ask for more info or adjustments in the code. -Once the pull request is reviewed and accepted, it'll be merge in **develop** and will be released in the next release version of the firmware. +Once the pull request is reviewed and accepted, it'll be merged into **develop** and will be released in the next version of the firmware. ## Why all these rules? -Reviewing pull-requests is a **very time consuming task** for the creator of this project ([JF002](https://github.com/JF002)) and for other contributors who take the time to review them. Every little thing you do to make their lives easier will **increase the chances your PR will be merge quickly**. -When reviewing PR, the author and contributors will first look at the **description**. If it's easy to understand what the PR does, why the modification is needed or interesting and how it's done, a good part of the work is already done : we understand the PR and its context. +Reviewing pull requests is a **very time consuming task** for the creator of this project ([JF002](https://github.com/JF002)) and for other contributors who take the time to review them. Everything you do to make reviewing easier will **get your PR merged faster**. -Then, reviewing **a few files that were modified for a single purpose** is a lot more easier than to review 30 files modified for many reasons (bug fix, UI improvements, typos in doc,...), even if all these changes make sense. Also, it's possible that we agree on some modification but not on some other, and we won't be able to merge the PR because of the changes that are not accepted. +When reviewing PRs, the author and contributors will first look at the **description**. If it's easy to understand what the PR does, why the modification is needed or interesting and how it's done, a good part of the work is already done : we understand the PR and its context. -We do our best to keep the code as consistent as possible, and that means we pay attention to the **formatting** of the code. If the code formatting is not consistent with our code base, we'll ask you to review it, which will take more time. +Then, reviewing **a few files that were modified for a single purpose** is a lot more easier than to review 30 files modified for many reasons (bug fix, UI improvements, typos in doc,...), even if all these changes make sense. Also, it's possible that we agree on some modification but not on some other, so we won't be able to merge the PR because of the changes that are not accepted. -The last step of the review consists in **testing** the modification. If it doesn't work out of the box, we'll ask your to review your code and to ensure that it works as expected. +We do our best to keep the code as consistent as possible. If the formatting of the code in your PR is not consistent with our code base, we'll ask you to review it, which will take more time. -It's totally normal for a PR to need some more work even after it was created, that's why we review them. But every round trip takes time, and it's good practice to try to reduce them as much as possible by following those simple rules. +The last step of the review consists of **testing** the modification. If it doesn't work out of the box, we'll ask your to review your code and to ensure that it works as expected. + +It's totally normal for a PR to need some more work even after it was created, that's why we review them. But every round trip takes time, so it's good practice to try to reduce them as much as possible by following those simple rules. # Coding convention + ## Language -The language of this project is **C++**, and all new code must be written in C++. (Modern) C++ provides a lot of useful tools and functionalities that are beneficial for embedded software development like `constexpr`, `template` and anything that provides zero-cost abstraction. -It's OK to include C code if this code comes from another library like FreeRTOS, NimBLE, LVGL or the NRF-SDK. +The language of this project is **C++**, and all new code must be written in C++. (Modern) C++ provides a lot of useful tools and functionalities that are beneficial for embedded software development like `constexpr`, `template` and anything that provides zero-cost abstraction. + +C code is accepted if it comes from another library like FreeRTOS, NimBLE, LVGL or the NRF-SDK. ## Coding style + The most important rule to follow is to try to keep the code as easy to read and maintain as possible. +Using an autoformatter is highly recommended, but make sure it's configured properly. + +There are preconfigured autoformatter rules for: + + * CLion (IntelliJ) in .idea/codeStyles/Project.xml + +If there are no preconfigured rules for your IDE, you can use one of the existing ones to configure your IDE. + - **Indentation** : 2 spaces, no tabulation - **Opening brace** at the end of the line - **Naming** : Choose self-describing variable name -- cgit v1.2.3-70-g09d2 From e0d01411d7124abc5ad099360057ba683287c428 Mon Sep 17 00:00:00 2001 From: Riku Isokoski Date: Sun, 13 Jun 2021 12:47:12 +0300 Subject: Ui update --- doc/ui_guidelines.md | 14 +++++ src/displayapp/screens/FirmwareValidation.cpp | 4 +- src/displayapp/screens/List.cpp | 34 +++++------- src/displayapp/screens/Music.cpp | 68 +++++++++++------------ src/displayapp/screens/Music.h | 3 +- src/displayapp/screens/Tile.cpp | 30 +++++----- src/displayapp/screens/WatchFaceAnalog.cpp | 4 +- src/displayapp/screens/WatchFaceDigital.cpp | 14 ++--- src/displayapp/screens/settings/QuickSettings.cpp | 47 ++++++++-------- src/displayapp/screens/settings/QuickSettings.h | 2 + 10 files changed, 113 insertions(+), 107 deletions(-) create mode 100644 doc/ui_guidelines.md (limited to 'doc') diff --git a/doc/ui_guidelines.md b/doc/ui_guidelines.md new file mode 100644 index 00000000..9b05ce64 --- /dev/null +++ b/doc/ui_guidelines.md @@ -0,0 +1,14 @@ +# UI design guidelines + +- Align objects all the way to the edge or corner +- Buttons should generally be at least 50px high +- Buttons should generally be on the bottom edge +- Make interactable objects **big** +- Recommendations for inner padding, aka distance between buttons: + - When aligning 4 objects: 4px, e.g. Settings + - When aligning 3 objects: 6px, e.g. App list + - When aligning 2 objects: 10px, e.g. Quick settings +- When using a page indicator, leave 8px for it on the right side + - It is acceptable to leave 8px on the left side as well to center the content +- Top bar takes at least 20px + padding + - Top bar right icons move 8px to the left when using a page indicator diff --git a/src/displayapp/screens/FirmwareValidation.cpp b/src/displayapp/screens/FirmwareValidation.cpp index 1d05be8d..da9d04f2 100644 --- a/src/displayapp/screens/FirmwareValidation.cpp +++ b/src/displayapp/screens/FirmwareValidation.cpp @@ -38,8 +38,9 @@ FirmwareValidation::FirmwareValidation(Pinetime::Applications::DisplayApp* app, lv_label_set_text(labelIsValidated, "Please #00ff00 Validate# this version or\n#ff0000 Reset# to rollback to the previous version."); buttonValidate = lv_btn_create(lv_scr_act(), nullptr); - lv_obj_align(buttonValidate, NULL, LV_ALIGN_IN_BOTTOM_LEFT, 0, 0); buttonValidate->user_data = this; + lv_obj_set_height(buttonValidate, 50); + lv_obj_align(buttonValidate, NULL, LV_ALIGN_IN_BOTTOM_LEFT, 0, 0); lv_obj_set_event_cb(buttonValidate, ButtonEventHandler); lv_obj_set_style_local_bg_color(buttonValidate, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, lv_color_hex(0x009900)); @@ -48,6 +49,7 @@ FirmwareValidation::FirmwareValidation(Pinetime::Applications::DisplayApp* app, buttonReset = lv_btn_create(lv_scr_act(), nullptr); buttonReset->user_data = this; + lv_obj_set_height(buttonReset, 50); lv_obj_align(buttonReset, nullptr, LV_ALIGN_IN_BOTTOM_RIGHT, 0, 0); lv_obj_set_style_local_bg_color(buttonReset, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, lv_color_hex(0x990000)); lv_obj_set_event_cb(buttonReset, ButtonEventHandler); diff --git a/src/displayapp/screens/List.cpp b/src/displayapp/screens/List.cpp index b4f4d2cf..eb53820b 100644 --- a/src/displayapp/screens/List.cpp +++ b/src/displayapp/screens/List.cpp @@ -25,42 +25,38 @@ List::List(uint8_t screenID, settingsController.SetSettingsMenu(screenID); if (numScreens > 1) { - pageIndicatorBasePoints[0].x = 240 - 1; - pageIndicatorBasePoints[0].y = 6; - pageIndicatorBasePoints[1].x = 240 - 1; - pageIndicatorBasePoints[1].y = 240 - 6; + pageIndicatorBasePoints[0].x = LV_HOR_RES - 1; + pageIndicatorBasePoints[0].y = 0; + pageIndicatorBasePoints[1].x = LV_HOR_RES - 1; + pageIndicatorBasePoints[1].y = LV_VER_RES; pageIndicatorBase = lv_line_create(lv_scr_act(), NULL); lv_obj_set_style_local_line_width(pageIndicatorBase, LV_LINE_PART_MAIN, LV_STATE_DEFAULT, 3); lv_obj_set_style_local_line_color(pageIndicatorBase, LV_LINE_PART_MAIN, LV_STATE_DEFAULT, lv_color_hex(0x111111)); - lv_obj_set_style_local_line_rounded(pageIndicatorBase, LV_LINE_PART_MAIN, LV_STATE_DEFAULT, true); lv_line_set_points(pageIndicatorBase, pageIndicatorBasePoints, 2); - uint16_t indicatorSize = 228 / numScreens; - uint16_t indicatorPos = indicatorSize * screenID; + const uint16_t indicatorSize = LV_VER_RES / numScreens; + const uint16_t indicatorPos = indicatorSize * screenID; - pageIndicatorPoints[0].x = 240 - 1; - pageIndicatorPoints[0].y = 6 + indicatorPos; - pageIndicatorPoints[1].x = 240 - 1; - pageIndicatorPoints[1].y = 6 + indicatorPos + indicatorSize; + pageIndicatorPoints[0].x = LV_HOR_RES - 1; + pageIndicatorPoints[0].y = indicatorPos; + pageIndicatorPoints[1].x = LV_HOR_RES - 1; + pageIndicatorPoints[1].y = indicatorPos + indicatorSize; pageIndicator = lv_line_create(lv_scr_act(), NULL); lv_obj_set_style_local_line_width(pageIndicator, LV_LINE_PART_MAIN, LV_STATE_DEFAULT, 3); lv_obj_set_style_local_line_color(pageIndicator, LV_LINE_PART_MAIN, LV_STATE_DEFAULT, LV_COLOR_GRAY); - lv_obj_set_style_local_line_rounded(pageIndicator, LV_LINE_PART_MAIN, LV_STATE_DEFAULT, true); lv_line_set_points(pageIndicator, pageIndicatorPoints, 2); } lv_obj_t* container1 = lv_cont_create(lv_scr_act(), nullptr); - // lv_obj_set_style_local_bg_color(container1, LV_CONT_PART_MAIN, LV_STATE_DEFAULT, lv_color_hex(0x111111)); lv_obj_set_style_local_bg_opa(container1, LV_CONT_PART_MAIN, LV_STATE_DEFAULT, LV_OPA_TRANSP); - lv_obj_set_style_local_pad_all(container1, LV_CONT_PART_MAIN, LV_STATE_DEFAULT, 10); - lv_obj_set_style_local_pad_inner(container1, LV_CONT_PART_MAIN, LV_STATE_DEFAULT, 5); + lv_obj_set_style_local_pad_inner(container1, LV_CONT_PART_MAIN, LV_STATE_DEFAULT, 4); lv_obj_set_style_local_border_width(container1, LV_CONT_PART_MAIN, LV_STATE_DEFAULT, 0); lv_obj_set_pos(container1, 0, 0); - lv_obj_set_width(container1, LV_HOR_RES - 15); + lv_obj_set_width(container1, LV_HOR_RES - 8); lv_obj_set_height(container1, LV_VER_RES); lv_cont_set_layout(container1, LV_LAYOUT_COLUMN_LEFT); @@ -73,11 +69,11 @@ List::List(uint8_t screenID, itemApps[i] = lv_btn_create(container1, nullptr); lv_obj_set_style_local_bg_opa(itemApps[i], LV_BTN_PART_MAIN, LV_STATE_DEFAULT, LV_OPA_20); - lv_obj_set_style_local_radius(itemApps[i], LV_BTN_PART_MAIN, LV_STATE_DEFAULT, 20); + lv_obj_set_style_local_radius(itemApps[i], LV_BTN_PART_MAIN, LV_STATE_DEFAULT, 57); lv_obj_set_style_local_bg_color(itemApps[i], LV_BTN_PART_MAIN, LV_STATE_DEFAULT, LV_COLOR_AQUA); - lv_obj_set_width(itemApps[i], LV_HOR_RES - 25); - lv_obj_set_height(itemApps[i], 52); + lv_obj_set_width(itemApps[i], LV_HOR_RES - 8); + lv_obj_set_height(itemApps[i], 57); lv_obj_set_event_cb(itemApps[i], ButtonEventHandler); lv_btn_set_layout(itemApps[i], LV_LAYOUT_ROW_MID); itemApps[i]->user_data = this; diff --git a/src/displayapp/screens/Music.cpp b/src/displayapp/screens/Music.cpp index c8d5e4b0..99a1518e 100644 --- a/src/displayapp/screens/Music.cpp +++ b/src/displayapp/screens/Music.cpp @@ -50,60 +50,55 @@ inline void lv_img_set_src_arr(lv_obj_t* img, const lv_img_dsc_t* src_img) { Music::Music(Pinetime::Applications::DisplayApp* app, Pinetime::Controllers::MusicService& music) : Screen(app), musicService(music) { lv_obj_t* label; + lv_style_init(&btn_style); + lv_style_set_radius(&btn_style, LV_STATE_DEFAULT, 20); + lv_style_set_bg_color(&btn_style, LV_STATE_DEFAULT, LV_COLOR_AQUA); + lv_style_set_bg_opa(&btn_style, LV_STATE_DEFAULT, LV_OPA_20); + btnVolDown = lv_btn_create(lv_scr_act(), nullptr); btnVolDown->user_data = this; lv_obj_set_event_cb(btnVolDown, event_handler); - lv_obj_set_size(btnVolDown, 65, 75); - lv_obj_align(btnVolDown, nullptr, LV_ALIGN_IN_BOTTOM_LEFT, 15, -10); - lv_obj_set_style_local_radius(btnVolDown, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, 20); - lv_obj_set_style_local_bg_color(btnVolDown, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, LV_COLOR_AQUA); - lv_obj_set_style_local_bg_opa(btnVolDown, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, LV_OPA_20); + lv_obj_set_size(btnVolDown, 76, 76); + lv_obj_align(btnVolDown, nullptr, LV_ALIGN_IN_BOTTOM_LEFT, 0, 0); + lv_obj_add_style(btnVolDown, LV_STATE_DEFAULT, &btn_style); label = lv_label_create(btnVolDown, nullptr); lv_label_set_text(label, Symbols::volumDown); - lv_obj_set_hidden(btnVolDown, !displayVolumeButtons); + lv_obj_set_hidden(btnVolDown, true); btnVolUp = lv_btn_create(lv_scr_act(), nullptr); btnVolUp->user_data = this; lv_obj_set_event_cb(btnVolUp, event_handler); - lv_obj_set_size(btnVolUp, 65, 75); - lv_obj_align(btnVolUp, nullptr, LV_ALIGN_IN_BOTTOM_RIGHT, -15, -10); - lv_obj_set_style_local_radius(btnVolUp, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, 20); - lv_obj_set_style_local_bg_color(btnVolUp, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, LV_COLOR_AQUA); - lv_obj_set_style_local_bg_opa(btnVolUp, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, LV_OPA_20); + lv_obj_set_size(btnVolUp, 76, 76); + lv_obj_align(btnVolUp, nullptr, LV_ALIGN_IN_BOTTOM_RIGHT, 0, 0); + lv_obj_add_style(btnVolUp, LV_STATE_DEFAULT, &btn_style); label = lv_label_create(btnVolUp, nullptr); lv_label_set_text(label, Symbols::volumUp); - lv_obj_set_hidden(btnVolUp, !displayVolumeButtons); + lv_obj_set_hidden(btnVolUp, true); btnPrev = lv_btn_create(lv_scr_act(), nullptr); btnPrev->user_data = this; lv_obj_set_event_cb(btnPrev, event_handler); - lv_obj_set_size(btnPrev, 65, 75); - lv_obj_align(btnPrev, nullptr, LV_ALIGN_IN_BOTTOM_LEFT, 15, -10); - lv_obj_set_style_local_radius(btnPrev, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, 20); - lv_obj_set_style_local_bg_color(btnPrev, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, LV_COLOR_AQUA); - lv_obj_set_style_local_bg_opa(btnPrev, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, LV_OPA_20); + lv_obj_set_size(btnPrev, 76, 76); + lv_obj_align(btnPrev, nullptr, LV_ALIGN_IN_BOTTOM_LEFT, 0, 0); + lv_obj_add_style(btnPrev, LV_STATE_DEFAULT, &btn_style); label = lv_label_create(btnPrev, nullptr); lv_label_set_text(label, Symbols::stepBackward); btnNext = lv_btn_create(lv_scr_act(), nullptr); btnNext->user_data = this; lv_obj_set_event_cb(btnNext, event_handler); - lv_obj_set_size(btnNext, 65, 75); - lv_obj_align(btnNext, nullptr, LV_ALIGN_IN_BOTTOM_RIGHT, -15, -10); - lv_obj_set_style_local_radius(btnNext, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, 20); - lv_obj_set_style_local_bg_color(btnNext, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, LV_COLOR_AQUA); - lv_obj_set_style_local_bg_opa(btnNext, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, LV_OPA_20); + lv_obj_set_size(btnNext, 76, 76); + lv_obj_align(btnNext, nullptr, LV_ALIGN_IN_BOTTOM_RIGHT, 0, 0); + lv_obj_add_style(btnNext, LV_STATE_DEFAULT, &btn_style); label = lv_label_create(btnNext, nullptr); lv_label_set_text(label, Symbols::stepForward); btnPlayPause = lv_btn_create(lv_scr_act(), nullptr); btnPlayPause->user_data = this; lv_obj_set_event_cb(btnPlayPause, event_handler); - lv_obj_set_size(btnPlayPause, 65, 75); - lv_obj_align(btnPlayPause, nullptr, LV_ALIGN_IN_BOTTOM_MID, 0, -10); - lv_obj_set_style_local_radius(btnPlayPause, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, 20); - lv_obj_set_style_local_bg_color(btnPlayPause, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, LV_COLOR_AQUA); - lv_obj_set_style_local_bg_opa(btnPlayPause, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, LV_OPA_20); + lv_obj_set_size(btnPlayPause, 76, 76); + lv_obj_align(btnPlayPause, nullptr, LV_ALIGN_IN_BOTTOM_MID, 0, 0); + lv_obj_add_style(btnPlayPause, LV_STATE_DEFAULT, &btn_style); txtPlayPause = lv_label_create(btnPlayPause, nullptr); lv_label_set_text(txtPlayPause, Symbols::play); @@ -147,6 +142,7 @@ Music::Music(Pinetime::Applications::DisplayApp* app, Pinetime::Controllers::Mus } Music::~Music() { + lv_style_reset(&btn_style); lv_obj_clean(lv_scr_act()); } @@ -272,21 +268,19 @@ void Music::OnObjectEvent(lv_obj_t* obj, lv_event_t event) { bool Music::OnTouchEvent(Pinetime::Applications::TouchEvents event) { switch (event) { case TouchEvents::SwipeUp: { - displayVolumeButtons = true; - lv_obj_set_hidden(btnVolDown, !displayVolumeButtons); - lv_obj_set_hidden(btnVolUp, !displayVolumeButtons); + lv_obj_set_hidden(btnVolDown, false); + lv_obj_set_hidden(btnVolUp, false); - lv_obj_set_hidden(btnNext, displayVolumeButtons); - lv_obj_set_hidden(btnPrev, displayVolumeButtons); + lv_obj_set_hidden(btnNext, true); + lv_obj_set_hidden(btnPrev, true); return true; } case TouchEvents::SwipeDown: { - displayVolumeButtons = false; - lv_obj_set_hidden(btnNext, displayVolumeButtons); - lv_obj_set_hidden(btnPrev, displayVolumeButtons); + lv_obj_set_hidden(btnNext, false); + lv_obj_set_hidden(btnPrev, false); - lv_obj_set_hidden(btnVolDown, !displayVolumeButtons); - lv_obj_set_hidden(btnVolUp, !displayVolumeButtons); + lv_obj_set_hidden(btnVolDown, true); + lv_obj_set_hidden(btnVolUp, true); return true; } case TouchEvents::SwipeLeft: { diff --git a/src/displayapp/screens/Music.h b/src/displayapp/screens/Music.h index ef8f1fec..00d3ad92 100644 --- a/src/displayapp/screens/Music.h +++ b/src/displayapp/screens/Music.h @@ -57,10 +57,11 @@ namespace Pinetime { lv_obj_t* imgDiscAnim; lv_obj_t* txtTrackDuration; + lv_style_t btn_style; + /** For the spinning disc animation */ bool frameB; - bool displayVolumeButtons = false; Pinetime::Controllers::MusicService& musicService; std::string artist; diff --git a/src/displayapp/screens/Tile.cpp b/src/displayapp/screens/Tile.cpp index d5d6cb80..a64320e6 100644 --- a/src/displayapp/screens/Tile.cpp +++ b/src/displayapp/screens/Tile.cpp @@ -35,37 +35,35 @@ Tile::Tile(uint8_t screenID, label_time = lv_label_create(lv_scr_act(), nullptr); lv_label_set_text_fmt(label_time, "%02i:%02i", dateTimeController.Hours(), dateTimeController.Minutes()); lv_label_set_align(label_time, LV_LABEL_ALIGN_CENTER); - lv_obj_align(label_time, nullptr, LV_ALIGN_IN_TOP_LEFT, 15, 6); + lv_obj_align(label_time, nullptr, LV_ALIGN_IN_TOP_LEFT, 0, 0); // Battery batteryIcon = lv_label_create(lv_scr_act(), nullptr); lv_label_set_text(batteryIcon, BatteryIcon::GetBatteryIcon(batteryController.PercentRemaining())); - lv_obj_align(batteryIcon, nullptr, LV_ALIGN_IN_TOP_RIGHT, -15, 6); + lv_obj_align(batteryIcon, nullptr, LV_ALIGN_IN_TOP_RIGHT, -8, 0); if (numScreens > 1) { - pageIndicatorBasePoints[0].x = 240 - 1; - pageIndicatorBasePoints[0].y = 6; - pageIndicatorBasePoints[1].x = 240 - 1; - pageIndicatorBasePoints[1].y = 240 - 6; + pageIndicatorBasePoints[0].x = LV_HOR_RES - 1; + pageIndicatorBasePoints[0].y = 0; + pageIndicatorBasePoints[1].x = LV_HOR_RES - 1; + pageIndicatorBasePoints[1].y = LV_VER_RES; pageIndicatorBase = lv_line_create(lv_scr_act(), nullptr); lv_obj_set_style_local_line_width(pageIndicatorBase, LV_LINE_PART_MAIN, LV_STATE_DEFAULT, 3); lv_obj_set_style_local_line_color(pageIndicatorBase, LV_LINE_PART_MAIN, LV_STATE_DEFAULT, lv_color_hex(0x111111)); - lv_obj_set_style_local_line_rounded(pageIndicatorBase, LV_LINE_PART_MAIN, LV_STATE_DEFAULT, true); lv_line_set_points(pageIndicatorBase, pageIndicatorBasePoints, 2); - uint16_t indicatorSize = 228 / numScreens; - uint16_t indicatorPos = indicatorSize * screenID; + const uint16_t indicatorSize = LV_VER_RES / numScreens; + const uint16_t indicatorPos = indicatorSize * screenID; - pageIndicatorPoints[0].x = 240 - 1; - pageIndicatorPoints[0].y = 6 + indicatorPos; - pageIndicatorPoints[1].x = 240 - 1; - pageIndicatorPoints[1].y = 6 + indicatorPos + indicatorSize; + pageIndicatorPoints[0].x = LV_HOR_RES - 1; + pageIndicatorPoints[0].y = indicatorPos; + pageIndicatorPoints[1].x = LV_HOR_RES - 1; + pageIndicatorPoints[1].y = indicatorPos + indicatorSize; pageIndicator = lv_line_create(lv_scr_act(), nullptr); lv_obj_set_style_local_line_width(pageIndicator, LV_LINE_PART_MAIN, LV_STATE_DEFAULT, 3); lv_obj_set_style_local_line_color(pageIndicator, LV_LINE_PART_MAIN, LV_STATE_DEFAULT, LV_COLOR_GRAY); - lv_obj_set_style_local_line_rounded(pageIndicator, LV_LINE_PART_MAIN, LV_STATE_DEFAULT, true); lv_line_set_points(pageIndicator, pageIndicatorPoints, 2); } @@ -85,7 +83,7 @@ Tile::Tile(uint8_t screenID, btnm1 = lv_btnmatrix_create(lv_scr_act(), nullptr); lv_btnmatrix_set_map(btnm1, btnmMap); - lv_obj_set_size(btnm1, LV_HOR_RES - 10, LV_VER_RES - 60); + lv_obj_set_size(btnm1, LV_HOR_RES - 16, LV_VER_RES - 60); lv_obj_align(btnm1, NULL, LV_ALIGN_CENTER, 0, 10); lv_obj_set_style_local_radius(btnm1, LV_BTNMATRIX_PART_BTN, LV_STATE_DEFAULT, 20); @@ -93,6 +91,8 @@ Tile::Tile(uint8_t screenID, lv_obj_set_style_local_bg_color(btnm1, LV_BTNMATRIX_PART_BTN, LV_STATE_DEFAULT, LV_COLOR_AQUA); lv_obj_set_style_local_bg_opa(btnm1, LV_BTNMATRIX_PART_BTN, LV_STATE_DISABLED, LV_OPA_20); lv_obj_set_style_local_bg_color(btnm1, LV_BTNMATRIX_PART_BTN, LV_STATE_DISABLED, lv_color_hex(0x111111)); + lv_obj_set_style_local_pad_all(btnm1, LV_BTNMATRIX_PART_BG, LV_STATE_DEFAULT, 0); + lv_obj_set_style_local_pad_inner(btnm1, LV_BTNMATRIX_PART_BG, LV_STATE_DEFAULT, 6); for (uint8_t i = 0; i < 6; i++) { if (applications[i].application == Apps::None) { diff --git a/src/displayapp/screens/WatchFaceAnalog.cpp b/src/displayapp/screens/WatchFaceAnalog.cpp index 621929b8..1410fc28 100644 --- a/src/displayapp/screens/WatchFaceAnalog.cpp +++ b/src/displayapp/screens/WatchFaceAnalog.cpp @@ -67,12 +67,12 @@ WatchFaceAnalog::WatchFaceAnalog(Pinetime::Applications::DisplayApp* app, batteryIcon = lv_label_create(lv_scr_act(), nullptr); lv_label_set_text(batteryIcon, Symbols::batteryHalf); - lv_obj_align(batteryIcon, NULL, LV_ALIGN_IN_BOTTOM_RIGHT, -8, -4); + lv_obj_align(batteryIcon, NULL, LV_ALIGN_IN_TOP_RIGHT, 0, 0); notificationIcon = lv_label_create(lv_scr_act(), NULL); lv_obj_set_style_local_text_color(notificationIcon, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, lv_color_hex(0x00FF00)); lv_label_set_text(notificationIcon, NotificationIcon::GetIcon(false)); - lv_obj_align(notificationIcon, NULL, LV_ALIGN_IN_BOTTOM_LEFT, 8, -4); + lv_obj_align(notificationIcon, NULL, LV_ALIGN_IN_BOTTOM_LEFT, 0, 0); // Date - Day / Week day diff --git a/src/displayapp/screens/WatchFaceDigital.cpp b/src/displayapp/screens/WatchFaceDigital.cpp index 7a240f1f..2b902b3b 100644 --- a/src/displayapp/screens/WatchFaceDigital.cpp +++ b/src/displayapp/screens/WatchFaceDigital.cpp @@ -35,7 +35,7 @@ WatchFaceDigital::WatchFaceDigital(DisplayApp* app, batteryIcon = lv_label_create(lv_scr_act(), nullptr); lv_label_set_text(batteryIcon, Symbols::batteryFull); - lv_obj_align(batteryIcon, lv_scr_act(), LV_ALIGN_IN_TOP_RIGHT, -5, 2); + lv_obj_align(batteryIcon, lv_scr_act(), LV_ALIGN_IN_TOP_RIGHT, 0, 0); batteryPlug = lv_label_create(lv_scr_act(), nullptr); lv_obj_set_style_local_text_color(batteryPlug, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, lv_color_hex(0xFF0000)); @@ -50,7 +50,7 @@ WatchFaceDigital::WatchFaceDigital(DisplayApp* app, notificationIcon = lv_label_create(lv_scr_act(), nullptr); lv_obj_set_style_local_text_color(notificationIcon, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, lv_color_hex(0x00FF00)); lv_label_set_text(notificationIcon, NotificationIcon::GetIcon(false)); - lv_obj_align(notificationIcon, nullptr, LV_ALIGN_IN_TOP_LEFT, 10, 0); + lv_obj_align(notificationIcon, nullptr, LV_ALIGN_IN_TOP_LEFT, 0, 0); label_date = lv_label_create(lv_scr_act(), nullptr); lv_obj_align(label_date, lv_scr_act(), LV_ALIGN_CENTER, 0, 60); @@ -75,7 +75,7 @@ WatchFaceDigital::WatchFaceDigital(DisplayApp* app, heartbeatIcon = lv_label_create(lv_scr_act(), nullptr); lv_label_set_text(heartbeatIcon, Symbols::heartBeat); lv_obj_set_style_local_text_color(heartbeatIcon, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, lv_color_hex(0xCE1B1B)); - lv_obj_align(heartbeatIcon, lv_scr_act(), LV_ALIGN_IN_BOTTOM_LEFT, 5, -2); + lv_obj_align(heartbeatIcon, lv_scr_act(), LV_ALIGN_IN_BOTTOM_LEFT, 0, 0); heartbeatValue = lv_label_create(lv_scr_act(), nullptr); lv_obj_set_style_local_text_color(heartbeatValue, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, lv_color_hex(0xCE1B1B)); @@ -85,7 +85,7 @@ WatchFaceDigital::WatchFaceDigital(DisplayApp* app, stepValue = lv_label_create(lv_scr_act(), nullptr); lv_obj_set_style_local_text_color(stepValue, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, lv_color_hex(0x00FFE7)); lv_label_set_text(stepValue, "0"); - lv_obj_align(stepValue, lv_scr_act(), LV_ALIGN_IN_BOTTOM_RIGHT, -5, -2); + lv_obj_align(stepValue, lv_scr_act(), LV_ALIGN_IN_BOTTOM_RIGHT, 0, 0); stepIcon = lv_label_create(lv_scr_act(), nullptr); lv_obj_set_style_local_text_color(stepIcon, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, lv_color_hex(0x00FFE7)); @@ -110,7 +110,7 @@ bool WatchFaceDigital::Refresh() { if (bleState.IsUpdated()) { lv_label_set_text(bleIcon, BleIcon::GetIcon(bleState.Get())); } - lv_obj_align(batteryIcon, lv_scr_act(), LV_ALIGN_IN_TOP_RIGHT, -5, 5); + lv_obj_align(batteryIcon, lv_scr_act(), LV_ALIGN_IN_TOP_RIGHT, 0, 0); lv_obj_align(batteryPlug, batteryIcon, LV_ALIGN_OUT_LEFT_MID, -5, 0); lv_obj_align(bleIcon, batteryPlug, LV_ALIGN_OUT_LEFT_MID, -5, 0); @@ -208,7 +208,7 @@ bool WatchFaceDigital::Refresh() { lv_label_set_text_static(heartbeatValue, ""); } - lv_obj_align(heartbeatIcon, lv_scr_act(), LV_ALIGN_IN_BOTTOM_LEFT, 5, -2); + lv_obj_align(heartbeatIcon, lv_scr_act(), LV_ALIGN_IN_BOTTOM_LEFT, 0, 0); lv_obj_align(heartbeatValue, heartbeatIcon, LV_ALIGN_OUT_RIGHT_MID, 5, 0); } @@ -216,7 +216,7 @@ bool WatchFaceDigital::Refresh() { motionSensorOk = motionController.IsSensorOk(); if (stepCount.IsUpdated() || motionSensorOk.IsUpdated()) { lv_label_set_text_fmt(stepValue, "%lu", stepCount.Get()); - lv_obj_align(stepValue, lv_scr_act(), LV_ALIGN_IN_BOTTOM_RIGHT, -5, -2); + lv_obj_align(stepValue, lv_scr_act(), LV_ALIGN_IN_BOTTOM_RIGHT, 0, 0); lv_obj_align(stepIcon, stepValue, LV_ALIGN_OUT_LEFT_MID, -5, 0); } diff --git a/src/displayapp/screens/settings/QuickSettings.cpp b/src/displayapp/screens/settings/QuickSettings.cpp index 0421d103..2d76d2dd 100644 --- a/src/displayapp/screens/settings/QuickSettings.cpp +++ b/src/displayapp/screens/settings/QuickSettings.cpp @@ -30,27 +30,29 @@ QuickSettings::QuickSettings(Pinetime::Applications::DisplayApp* app, motorController {motorController}, settingsController {settingsController} { + // This is the distance (padding) between all objects on this screen. + const int innerDistance = 10; + // Time label_time = lv_label_create(lv_scr_act(), nullptr); lv_label_set_text_fmt(label_time, "%02i:%02i", dateTimeController.Hours(), dateTimeController.Minutes()); lv_label_set_align(label_time, LV_LABEL_ALIGN_CENTER); - lv_obj_align(label_time, lv_scr_act(), LV_ALIGN_IN_TOP_LEFT, 15, 4); + lv_obj_align(label_time, lv_scr_act(), LV_ALIGN_IN_TOP_LEFT, 0, 0); batteryIcon = lv_label_create(lv_scr_act(), nullptr); lv_label_set_text(batteryIcon, BatteryIcon::GetBatteryIcon(batteryController.PercentRemaining())); - lv_obj_align(batteryIcon, nullptr, LV_ALIGN_IN_TOP_RIGHT, -15, 4); + lv_obj_align(batteryIcon, nullptr, LV_ALIGN_IN_TOP_RIGHT, 0, 0); - lv_obj_t* lbl_btn; + lv_style_init(&btn_style); + lv_style_set_radius(&btn_style, LV_STATE_DEFAULT, (LV_VER_RES - 20 - 2 * innerDistance) / 8); + lv_style_set_bg_color(&btn_style, LV_STATE_DEFAULT, lv_color_hex(0x111111)); btn1 = lv_btn_create(lv_scr_act(), nullptr); btn1->user_data = this; lv_obj_set_event_cb(btn1, ButtonEventHandler); - lv_obj_align(btn1, nullptr, LV_ALIGN_CENTER, -50, -30); - lv_obj_set_style_local_radius(btn1, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, 20); - lv_obj_set_style_local_bg_color(btn1, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, lv_color_hex(0x111111)); - lv_obj_set_style_local_bg_grad_dir(btn1, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, LV_GRAD_DIR_NONE); - - lv_btn_set_fit2(btn1, LV_FIT_TIGHT, LV_FIT_TIGHT); + lv_obj_add_style(btn1, LV_BTN_PART_MAIN, &btn_style); + lv_obj_set_size(btn1, (LV_HOR_RES - innerDistance) / 2, (LV_VER_RES - 20 - 2 * innerDistance) / 2); + lv_obj_align(btn1, nullptr, LV_ALIGN_IN_TOP_LEFT, 0, 20 + innerDistance); btn1_lvl = lv_label_create(btn1, nullptr); lv_obj_set_style_local_text_font(btn1_lvl, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, &lv_font_sys_48); @@ -59,12 +61,11 @@ QuickSettings::QuickSettings(Pinetime::Applications::DisplayApp* app, btn2 = lv_btn_create(lv_scr_act(), nullptr); btn2->user_data = this; lv_obj_set_event_cb(btn2, ButtonEventHandler); - lv_obj_align(btn2, nullptr, LV_ALIGN_CENTER, 50, -30); - lv_obj_set_style_local_radius(btn2, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, 20); - lv_obj_set_style_local_bg_color(btn2, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, lv_color_hex(0x111111)); - lv_obj_set_style_local_bg_grad_dir(btn2, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, LV_GRAD_DIR_NONE); - lv_btn_set_fit2(btn2, LV_FIT_TIGHT, LV_FIT_TIGHT); + lv_obj_add_style(btn2, LV_BTN_PART_MAIN, &btn_style); + lv_obj_set_size(btn2, (LV_HOR_RES - innerDistance) / 2, (LV_VER_RES - 20 - 2 * innerDistance) / 2); + lv_obj_align(btn2, nullptr, LV_ALIGN_IN_TOP_RIGHT, 0, 20 + innerDistance); + lv_obj_t* lbl_btn; lbl_btn = lv_label_create(btn2, nullptr); lv_obj_set_style_local_text_font(lbl_btn, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, &lv_font_sys_48); lv_label_set_text_static(lbl_btn, Symbols::highlight); @@ -72,14 +73,11 @@ QuickSettings::QuickSettings(Pinetime::Applications::DisplayApp* app, btn3 = lv_btn_create(lv_scr_act(), nullptr); btn3->user_data = this; lv_obj_set_event_cb(btn3, ButtonEventHandler); - lv_obj_align(btn3, nullptr, LV_ALIGN_CENTER, -50, 60); lv_btn_set_checkable(btn3, true); - lv_obj_set_style_local_radius(btn3, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, 20); - lv_obj_set_style_local_bg_color(btn3, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, lv_color_hex(0x111111)); - lv_obj_set_style_local_bg_grad_dir(btn3, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, LV_GRAD_DIR_NONE); + lv_obj_add_style(btn3, LV_BTN_PART_MAIN, &btn_style); lv_obj_set_style_local_bg_color(btn3, LV_BTN_PART_MAIN, LV_STATE_CHECKED, LV_COLOR_GREEN); - lv_obj_set_style_local_bg_grad_dir(btn1, LV_BTN_PART_MAIN, LV_STATE_CHECKED, LV_GRAD_DIR_NONE); - lv_btn_set_fit2(btn3, LV_FIT_TIGHT, LV_FIT_TIGHT); + lv_obj_set_size(btn3, (LV_HOR_RES - innerDistance) / 2, (LV_VER_RES - 20 - 2 * innerDistance) / 2); + lv_obj_align(btn3, nullptr, LV_ALIGN_IN_BOTTOM_LEFT, 0, 0); btn3_lvl = lv_label_create(btn3, nullptr); lv_obj_set_style_local_text_font(btn3_lvl, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, &lv_font_sys_48); @@ -94,11 +92,9 @@ QuickSettings::QuickSettings(Pinetime::Applications::DisplayApp* app, btn4 = lv_btn_create(lv_scr_act(), nullptr); btn4->user_data = this; lv_obj_set_event_cb(btn4, ButtonEventHandler); - lv_obj_align(btn4, nullptr, LV_ALIGN_CENTER, 50, 60); - lv_obj_set_style_local_radius(btn4, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, 20); - lv_obj_set_style_local_bg_color(btn4, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, lv_color_hex(0x111111)); - lv_obj_set_style_local_bg_grad_dir(btn4, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, LV_GRAD_DIR_NONE); - lv_btn_set_fit2(btn4, LV_FIT_TIGHT, LV_FIT_TIGHT); + lv_obj_add_style(btn4, LV_BTN_PART_MAIN, &btn_style); + lv_obj_set_size(btn4, (LV_HOR_RES - innerDistance) / 2, (LV_VER_RES - 20 - 2 * innerDistance) / 2); + lv_obj_align(btn4, nullptr, LV_ALIGN_IN_BOTTOM_RIGHT, 0, 0); lbl_btn = lv_label_create(btn4, nullptr); lv_obj_set_style_local_text_font(lbl_btn, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, &lv_font_sys_48); @@ -114,6 +110,7 @@ QuickSettings::QuickSettings(Pinetime::Applications::DisplayApp* app, } QuickSettings::~QuickSettings() { + lv_style_reset(&btn_style); lv_task_del(taskUpdate); lv_obj_clean(lv_scr_act()); settingsController.SaveSettings(); diff --git a/src/displayapp/screens/settings/QuickSettings.h b/src/displayapp/screens/settings/QuickSettings.h index e0fc0a87..2eefe1a7 100644 --- a/src/displayapp/screens/settings/QuickSettings.h +++ b/src/displayapp/screens/settings/QuickSettings.h @@ -44,6 +44,8 @@ namespace Pinetime { lv_obj_t* batteryIcon; lv_obj_t* label_time; + lv_style_t btn_style; + lv_obj_t* btn1; lv_obj_t* btn1_lvl; lv_obj_t* btn2; -- cgit v1.2.3-70-g09d2 From fc6458a35c2260fe152fe84bcd06174cec6d3b92 Mon Sep 17 00:00:00 2001 From: Riku Isokoski Date: Sun, 13 Jun 2021 17:21:03 +0300 Subject: Add image with example layouts --- doc/ui/example.png | Bin 0 -> 10642 bytes doc/ui_guidelines.md | 2 ++ 2 files changed, 2 insertions(+) create mode 100644 doc/ui/example.png (limited to 'doc') diff --git a/doc/ui/example.png b/doc/ui/example.png new file mode 100644 index 00000000..2f6cb789 Binary files /dev/null and b/doc/ui/example.png differ diff --git a/doc/ui_guidelines.md b/doc/ui_guidelines.md index 9b05ce64..c267b79b 100644 --- a/doc/ui_guidelines.md +++ b/doc/ui_guidelines.md @@ -12,3 +12,5 @@ - It is acceptable to leave 8px on the left side as well to center the content - Top bar takes at least 20px + padding - Top bar right icons move 8px to the left when using a page indicator + +![example layouts](./ui/example.png) -- cgit v1.2.3-70-g09d2