{"id":1212,"date":"2020-11-27T10:31:54","date_gmt":"2020-11-27T09:31:54","guid":{"rendered":"https:\/\/www.klokocka.info\/?p=1212"},"modified":"2020-11-27T15:31:25","modified_gmt":"2020-11-27T14:31:25","slug":"lvgl-graphic-library-how-to-create-my-own-theme","status":"publish","type":"post","link":"https:\/\/www.klokocka.info\/?p=1212","title":{"rendered":"LVGL Graphic Library &#8211; How to create my own theme."},"content":{"rendered":"\n<p>This is my work in progress, not a tutorial! But someone might find it hlepful. <\/p>\n\n\n\n<p>Because it&#8217;s not a good approach to directly write changes to themes defined int the lvgl library (lvgl\/src\/lv_themes), I&#8217;m working on &#8220;how to&#8221; make my own theme completely. My IDE is STM32CubeIde, LVGL is 7.x.x. I assume having working LVGL project.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\">1)<\/h5>\n\n\n\n<p>Copy <strong>lv_theme_template.c<\/strong> from <strong>project_root\/lvgl\/src\/lv_themes\/<\/strong> into <strong>project_root\/Core\/Src\/<\/strong><br>Copy <strong>lv_theme_template.h<\/strong> from <strong>project_root\/lvgl\/src\/lv_themes\/<\/strong> into <strong>project_root\/Core\/Src\/<\/strong><br>Rename copied files them to own names (<strong>lv_theme_myown.c, lv_theme_myown.h<\/strong>)<br><\/p>\n\n\n\n<h5 class=\"wp-block-heading\">2)<\/h5>\n\n\n\n<p>In the <strong>lv_conf.h<\/strong> file find this line:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"c\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">#define LV_THEME_DEFAULT_INCLUDE   &lt;stdint.h>   \/*Include a header for the init. function*\/<\/pre>\n\n\n\n<p>And change it to:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"c\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">#define LV_THEME_DEFAULT_INCLUDE    &lt;lv_theme_myown.h>  <\/pre>\n\n\n\n<h5 class=\"wp-block-heading\">3)<\/h5>\n\n\n\n<p>In <strong>the lv_conf.h<\/strong> find line:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"c\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">#define LV_THEME_DEFAULT_INIT     lv_theme_template_init<\/pre>\n\n\n\n<p>And change it to:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"c\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">#define LV_THEME_DEFAULT_INIT               lv_theme_myown_init<\/pre>\n\n\n\n<h5 class=\"wp-block-heading\">4)<\/h5>\n\n\n\n<p>Also in <strong>lv_conf.h<\/strong> change these defines to 0:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"c\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\n\/*================\n *  THEME USAGE\n *================*\/\n...\n#define LV_USE_THEME_EMPTY       0\n...\n#define LV_USE_THEME_TEMPLATE    0\n...\n#define LV_USE_THEME_MATERIAL    0\n...\n#define LV_USE_THEME_MONO        0<\/pre>\n\n\n\n<h5 class=\"wp-block-heading\">5)<\/h5>\n\n\n\n<p>In file <strong>lv_theme_myown.c<\/strong> change name of the function <strong>lv_theme_template_init<\/strong>(&#8230;.) and change it to <strong>lv_theme_myown_init<\/strong>(&#8230;.)<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"c\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">lv_theme_t * lv_theme_template_init(....)\n\/\/change it to:\nlv_theme_t * lv_theme_myown_init(....)\n\/\/Do the same in lv_theme_myown.h <\/pre>\n\n\n\n<p>Do the same in <strong>lv_theme_myown.h<\/strong><\/p>\n\n\n\n<h5 class=\"wp-block-heading\">6)<\/h5>\n\n\n\n<p>In <strong>lv_theme_myown.c<\/strong> find:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"c\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/*********************\n *      INCLUDES\n *********************\/\n#include \"..\/..\/lvgl.h\" \/*To see all the widgets*\/\n\n#if LV_USE_THEME_TEMPLATE\n\n#include \"..\/lv_misc\/lv_gc.h\"<\/pre>\n\n\n\n<p>and change it to:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"c\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/*********************\n *      INCLUDES\n *********************\/\n#include \"lvgl\/lvgl.h\" \/*To see all the widgets*\/\n\n\/\/#if LV_USE_THEME_TEMPLATE\n\n#include \"lvgl\/src\/lv_misc\/lv_gc.h\"\n<\/pre>\n\n\n\n<p>Don&#8217;t  forget <strong>#endif at<\/strong> the end of file!<\/p>\n\n\n\n<p>Now you can edit your own LVGL theme based on the template theme.<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>This is my work in progress, not a tutorial! But someone might find it hlepful. Because it&#8217;s not a good approach to directly write changes to themes defined int the lvgl library (lvgl\/src\/lv_themes), I&#8217;m working on &#8220;how to&#8221; make my &hellip; <a href=\"https:\/\/www.klokocka.info\/?p=1212\">Continued<\/a><\/p>\n","protected":false},"author":1,"featured_media":1220,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"kt_blocks_editor_width":"","pgc_sgb_lightbox_settings":"{\"enableLightbox\":true,\"useGlobalPreset\":true,\"nativGalleryEnable\":true,\"nativeAttachment\":true,\"singletonAttachment\":true,\"groupingAllImages\":false,\"copyRProtection\":true,\"copyRAlert\":\"Hello, this photo is mine!\",\"sliderScrollNavi\":false,\"sliderNextPrevAnimation\":\"animation\",\"galleryScrollPositionControll\":false,\"sliderItemCounterEnable\":true,\"sliderCaptionSrc\":\"caption\",\"sliderItemTitleEnable\":false,\"sliderItemTitleFontSize\":18,\"sliderItemTitleTextColor\":\"rgba(255,255,255,1)\",\"itemCounterColor\":\"rgba(255,255,255,1)\",\"sliderThumbBarEnable\":true,\"sliderThumbBarHoverColor\":\"rgba(240,240,240,1)\",\"sliderBgColor\":\"rgba(0,0,0,0.8)\",\"sliderPreloaderColor\":\"rgba(240,240,240,1)\",\"sliderHeaderFooterBgColor\":\"rgba(0,0,0,0.4)\",\"sliderNavigationColor\":\"rgba(0,0,0,1)\",\"sliderNavigationColorOver\":\"rgba(255,255,255,1)\",\"sliderNavigationIconColor\":\"rgba(255,255,255,1)\",\"sliderNavigationIconColorOver\":\"rgba(0,0,0,1)\",\"sliderSlideshow\":true,\"sliderSlideshowDelay\":8,\"slideshowIndicatorColor\":\"rgba(255,255,255,1)\",\"slideshowIndicatorColorBg\":\"rgba(255,255,255,0.5)\",\"sliderThumbSubMenuBackgroundColor\":\"rgba(255,255,255,0)\",\"sliderThumbSubMenuBackgroundColorOver\":\"rgba(255,255,255,1)\",\"sliderThumbSubMenuIconColor\":\"rgba(255,255,255,1)\",\"sliderThumbSubMenuIconHoverColor\":\"rgba(0,0,0,1)\",\"sliderSocialShareEnabled\":true,\"sliderZoomEnable\":true,\"sliderFullscreenEnabled\":true,\"modaBgColor\":\"rgba(0,0,0,0.8)\",\"modalIconColor\":\"rgba(255,255,255,1)\",\"modalIconColorHover\":\"rgba(255,255,255,0.8)\",\"shareFacebook\":true,\"shareTwitter\":true,\"sharePinterest\":true,\"sliderItemDownload\":true,\"shareCopyLink\":true}","footnotes":""},"categories":[8],"tags":[],"class_list":["post-1212","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-nezarazene"],"_links":{"self":[{"href":"https:\/\/www.klokocka.info\/index.php?rest_route=\/wp\/v2\/posts\/1212","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.klokocka.info\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.klokocka.info\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.klokocka.info\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.klokocka.info\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1212"}],"version-history":[{"count":5,"href":"https:\/\/www.klokocka.info\/index.php?rest_route=\/wp\/v2\/posts\/1212\/revisions"}],"predecessor-version":[{"id":1222,"href":"https:\/\/www.klokocka.info\/index.php?rest_route=\/wp\/v2\/posts\/1212\/revisions\/1222"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.klokocka.info\/index.php?rest_route=\/wp\/v2\/media\/1220"}],"wp:attachment":[{"href":"https:\/\/www.klokocka.info\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1212"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.klokocka.info\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1212"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.klokocka.info\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1212"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}