PineTime Custom Watchface Tutorial - Revision history

Jrehkemper: Split scentence into two for better readability and change typo "when" to "we".

2023-12-26T10:55:37Z

Split scentence into two for better readability and change typo "when" to "we".

← Older revision		Revision as of 10:55, 26 December 2023
Line 36:		Line 36:
	==== What are labels? ====		==== What are labels? ====
	Labels are considered as “elemental” parts that make up a screen's Text-based UI by the LVGL library...		Labels are considered as “elemental” parts that make up a screen's Text-based UI by the LVGL library...
	Each label is also considered as an “object” or “obj” and can be manipulated~~, by~~ changing the data attributed with the "obj", for example, position, internal data like the strings/text etc.		Each label is also considered as an “object” or “obj” and can be manipulated. By changing the data attributed with the "obj", for example, position, internal data like the strings/text etc. we can change what the label shows and where it shows it.
	~~when~~ can change what the label shows and where it shows it...

	==== Modifying label data ====		==== Modifying label data ====

Owldyn: fix link to coding conventions

2023-10-22T21:21:47Z

fix link to coding conventions

← Older revision		Revision as of 21:21, 22 October 2023
Line 594:		Line 594:
	==== Changing the code to add the image ====		==== Changing the code to add the image ====

	Use the editor of your choice to modify the source files. Please read the [https://github.com/~~JF002~~/InfiniTime/blob/~~develop~~/doc/~~contribute.md#~~coding-convention coding conventions] before you start.		Use the editor of your choice to modify the source files. Please read the [https://github.com/InfiniTimeOrg/InfiniTime/blob/main/doc/coding-convention.md coding conventions] before you start.

	=== Compiling the firmware ===		=== Compiling the firmware ===

Fxc: fixes

2023-03-16T00:48:31Z

fixes

Show changes

Nyct: /* Creating an entirely new watchface */

2023-01-29T00:51:52Z

Creating an entirely new watchface

← Older revision		Revision as of 00:51, 29 January 2023
Line 508:		Line 508:

	Be sure to increment the number of screens.		Be sure to increment the number of screens.

			==Add the watchface to CMakeLists.txt==
			'''src/CMakeLists.txt'''

			## Watch faces
			displayapp/icons/bg_clock.c
			displayapp/screens/WatchFaceAnalog.cpp
			displayapp/screens/WatchFaceDigital.cpp
			'''displayapp/screens/WatchFaceName.cpp'''

			=Creating an entirely new watchface (Updated Alternative)=
			The previous method may not work with the current version of Infinitime as of (2023 Jan 28). Therefore, here I will tell you a method of creating watch faces on the current build.

			==Create the watch face files==
			The watch face is composed of 2 files, WatchFaceName.cpp and WatchFaceName.h. You can copy them from one of the existing watch faces and give it a new name to provide a basic layout to start from.

			Important do not forget to rename the class names to reflect the new filenames.
			==Add the watchface to Clock.cpp and Clock.h==
			Clock.cpp now provides the ability to switch between multiple watchfaces by long-pressing the screen. You will need to make 3 modifications in Clock.cpp, 1 modification in Clock.h and two modifications in SettingsWatchFace.h which will allow us to select the newly created watch face.

			'''src/displayapp/screens/Clock.cpp'''
			#include "displayapp/screens/WatchFaceDigital.h"
			#include "displayapp/screens/WatchFaceAnalog.h"
			'''#include "displayapp/screens/WatchFaceName.h"'''

			switch (settingsController.GetClockFace()) {
			case 0:
			return WatchFaceDigitalScreen();
			break;
			case 1:
			return WatchFaceAnalogScreen();
			break;
			case 2:
			return WatchFacePineTimeStyleScreen();
			break;
			case 3:
			return WatchFaceTerminalScreen();
			break;
			case 4:
			return WatchFaceInfineatScreen();
			break;
			case 5:
			return WatchFaceCasioStyleG7710();
			break;
			'''case 6:'''
			'''return WatchFaceNameScreen();'''
			'''break;'''
			}
			return WatchFaceDigitalScreen();
			}

			std::unique_ptr<Screen> Clock::WatchFaceAnalogScreen() {
			return std::make_unique<Screens::WatchFaceAnalog>(app, dateTimeController, batteryController, bleController, notificatioManager, settingsController);
			}

			'''std::unique_ptr<Screen> Clock::WatchFaceNameScreen() { '''
			'''return std::make_unique<Screens::WatchFaceName>(app, dateTimeController, batteryController, bleController, notificatioManager, settingsController, heartRateController);'''
			'''}'''

			'''src/displayapp/screens/Clock.h'''
			std::unique_ptr<Screen> screen;
			std::unique_ptr<Screen> WatchFaceDigitalScreen();
			std::unique_ptr<Screen> WatchFaceAnalogScreen();
			'''std::unique_ptr<Screen> WatchFaceNameScreen();'''

			Since I have set WatchFaceName to case 6 in a switch statement beforehand it will take sixth position in a list.

			'''src/displayapp/screens/settings/SettingWatchFace.h'''

			#include "displayapp/screens/WatchFaceInfineat.h"
			#include "displayapp/screens/WatchFaceCasioStyleG7710.h"
			'''#include "displayapp/screens/WatchFaceName.h"'''

			std::array<Screens::CheckboxList::Item, settingsPerScreen * nScreens> watchfaces {
			{{"Digital face", true},
			{"Analog face", true},
			{"PineTimeStyle", true},
			{"Terminal", true},
			{"Infineat face", Applications::Screens::WatchFaceInfineat::IsAvailable(filesystem)},
			{"Casio G7710", Applications::Screens::WatchFaceCasioStyleG7710::IsAvailable(filesystem)},
			'''{"Name Face", true},'''
			{"", false}}};
			ScreenList<nScreens> screens;

	==Add the watchface to CMakeLists.txt==		==Add the watchface to CMakeLists.txt==

Anonymous: noted that NRFConnect is not recommended because of the note in the GitHub README

2022-11-15T15:05:36Z

noted that NRFConnect is not recommended because of the note in the GitHub README

← Older revision		Revision as of 15:05, 15 November 2022
Line 540:		Line 540:
	make -j pinetime-mcuboot-app		make -j pinetime-mcuboot-app

	Be aware the paths for the cmake command must be absolute. The -DBUILD_DFU argument will generate a zip file which can be flashed using nRF Connect or Gadgetbridge on Android. You must have adafruit-nrfutil installed in your $PATH for this to work.		Be aware the paths for the cmake command must be absolute. The -DBUILD_DFU argument will generate a zip file which can be flashed using nRF Connect ([https://github.com/InfiniTimeOrg/InfiniTime#companion-apps not recommended]) or Gadgetbridge on Android. You must have adafruit-nrfutil installed in your $PATH for this to work.

	===Activating the firmware===		===Activating the firmware===

Steph: /* Preparing the image for inclusion as an icon */

2022-09-25T08:34:35Z

Preparing the image for inclusion as an icon

← Older revision		Revision as of 08:34, 25 September 2022
Line 307:		Line 307:
	==Preparing the image for inclusion as an icon==		==Preparing the image for inclusion as an icon==

	Once you have ~~your~~ obtained your C array from the LVGL converter, you can take a look inside it to see all the different formats of your image,		Once you have obtained your C array from the LVGL converter, you can take a look inside it to see all the different formats of your image,
	try using something like Notepad++ or any of your favorite text editors to peek inside it,		try using something like Notepad++ or any of your favorite text editors to peek inside it,

Steph: /* Label positioning - explanation now follows lvgl manual better */

2022-09-25T08:31:44Z

Label positioning - explanation now follows lvgl manual better

← Older revision		Revision as of 08:31, 25 September 2022
Line 208:		Line 208:

	We use another function, that is more advanced, that gives the positional alignment based on preset locations...		We use another function, that is more advanced, that gives the positional alignment based on preset locations...
	lv_obj_align(~~<text/~~obj>, ~~<image/obj>~~, ~~<location_parameter>~~, ~~<new_x>~~, ~~<new_y>~~);		lv_obj_align(obj, obj_ref, LV_ALIGN_..., x_ofs, y_ofs);

	~~the "<image/~~obj~~>" data~~ is ~~used for putting~~ text ~~beside other picture icons , and so if using only text based labels, we can substitute it with,~~		'''obj''' is your text label
	~~lv_scr_act() (or) NULL~~

	'''~~<new_x>, <new_y>''' are the Cartesian coordinates, '''<location parameter>~~''' is ~~replaced by '''LV_ALIGN_<preset>''',~~		'''obj_ref''' is a reference object to which obj will be aligned.
	~~there~~ will be ~~a picture showing~~ the ~~presets below, and '''<text/~~obj~~>''' is your text label.~~..		If obj_ref = NULL , then the parent of obj will be used.
			If obj_ref = lv_scr_act(), then the whole screen will be used.

	~~here,~~ LV_ALIGN_~~<preset> sets~~ the ~~Cartesian origin~~...		'''LV_ALIGN_...''' is the type of alignment; inside another object or next to the reference, for example IN_TOP_LEFT, OUT_BOTTOM_MID, ...

			'''x_ofs, y_ofs''' allow you to shift the object by a specified number of pixels after aligning it

	Label positioning based on alignment is both a simple and complicated thing to understand, so here I have given something you can refer to while modifying the position of the various labels and objects...		Label positioning based on alignment is both a simple and complicated thing to understand, so here I have given something you can refer to while modifying the position of the various labels and objects...

	You can also refer here to LVGL's documentation of coordinate system https://docs.lvgl.io/master/overview/coords.html		You can also refer here to LVGL's documentation of coordinate system https://docs.lvgl.io/master/overview/coords.html

			List of the possible alignments : https://docs.lvgl.io/latest/en/html/widgets/obj.html#alignment

	It is however recommended that you use the first method to set the location		It is however recommended that you use the first method to set the location
Line 248:		Line 252:
	this line determines the position of the Label telling time, as seen in the image...		this line determines the position of the Label telling time, as seen in the image...

	we're modifying this, by changing the origin ~~<preset>~~ parameter (here it is LV_ALIGN_IN_RIGHT_MID) to LV_ALIGN_IN_TOP_LEFT		we're modifying this, by changing the origin alignment parameter (here it is LV_ALIGN_IN_RIGHT_MID) to LV_ALIGN_IN_TOP_LEFT

	you can alternatively swap the whole line to,		you can alternatively swap the whole line to:
	lv_obj_set_pos(label_time, 0, 0);		lv_obj_set_pos(label_time, 0, 0);

Steph: /* Label positioning - coded closer to actual source file in 2022 */

2022-09-25T08:08:55Z

Label positioning - coded closer to actual source file in 2022

← Older revision		Revision as of 08:08, 25 September 2022
Line 196:		Line 196:
	[[File:LVGL coord system.png\|200px\|thumb\|right\|LVGL coord system]]		[[File:LVGL coord system.png\|200px\|thumb\|right\|LVGL coord system]]

	The position of the various objects in ~~clock~~.cpp are set by the line,		The position of the various objects in WatchFaceDigital.cpp are set by the line,
	lv_obj_set_pos(<obj>, <new_x>, <new_y>)		lv_obj_set_pos(<obj>, <new_x>, <new_y>)

Line 231:		Line 231:

	Take the Label that tells the date,		Take the Label that tells the date,
	In the source file (~~clock~~.cpp) it is this line,		In the Digital Clock source file (WatchFaceDigital.cpp) it is this line,
	lv_obj_align(label_date, lv_scr_act(), ~~LV_ALIGN_IN_LEFT_MID~~, 0, 60);		lv_obj_align(label_date, lv_scr_act(), LV_ALIGN_CENTER, 0, 60);
	by increasing the Value of the Y coordinate (60) to a higher value, we can bring the position of the Date downwards a bit away from the Time, and toward the Heartbeat count in the bottom row		by increasing the Value of the Y coordinate (60) to a higher value, we can bring the position of the Date downwards a bit away from the Time, and toward the Heartbeat count in the bottom row
	here I will increase it to 80, so it becomes..		here I will increase it to 80, so it becomes..
	lv_obj_align(label_date, lv_scr_act(), ~~LV_ALIGN_IN_LEFT_MID~~, 0, 80);		lv_obj_align(label_date, lv_scr_act(), LV_ALIGN_CENTER, 0, 80);

	and now we have made some space up top..		and now we have made some space up top..
Line 243:		Line 243:

	Take the position argument for the label that tells you time...		Take the position argument for the label that tells you time...
	here, in the source file (~~clock~~.cpp),		here, in the source file (WatchFaceDigital.cpp),
	lv_obj_align(label_time, lv_scr_act(), ~~LV_ALIGN_IN_LEFT_MID~~, 0, 0);		lv_obj_align(label_time, lv_scr_act(), LV_ALIGN_IN_RIGHT_MID, 0, 0);

	this line determines the position of the Label telling time, as seen in the image...		this line determines the position of the Label telling time, as seen in the image...

	we're modifying this, by changing the origin <preset> parameter (here it is ~~LV_ALIGN_IN_LEFT_MID~~) to LV_ALIGN_IN_TOP_LEFT		we're modifying this, by changing the origin <preset> parameter (here it is LV_ALIGN_IN_RIGHT_MID) to LV_ALIGN_IN_TOP_LEFT

	you can alternatively swap the whole line to,		you can alternatively swap the whole line to,

Steph at 07:26, 25 September 2022

2022-09-25T07:26:19Z

← Older revision		Revision as of 07:26, 25 September 2022
Line 83:		Line 83:
	For example,		For example,

	~~We modifying~~ the format by adding a comma... "," in between the second "%s" and "%d" like this,		If we modify the format by adding a comma... "," in between the second "%s" and "%d" like this,
	"%s %d %s, %d"		"%s %d %s, %d"
	and changing that in the line...		and changing that in the line...

Steph: Dangling link corrected

2022-09-25T07:11:37Z

Dangling link corrected

← Older revision		Revision as of 07:11, 25 September 2022
Line 220:		Line 220:
	Label positioning based on alignment is both a simple and complicated thing to understand, so here I have given something you can refer to while modifying the position of the various labels and objects...		Label positioning based on alignment is both a simple and complicated thing to understand, so here I have given something you can refer to while modifying the position of the various labels and objects...

	You can also refer here to LVGL's documentation of coordinate system https://docs.lvgl.io/v6/en/~~html/object-types/obj~~.html~~#coordinates~~		You can also refer here to LVGL's documentation of coordinate system https://docs.lvgl.io/master/overview/coords.html

	It is however recommended that you use the first method to set the location		It is however recommended that you use the first method to set the location