{"id":2909,"date":"2024-10-13T04:54:30","date_gmt":"2024-10-13T04:54:30","guid":{"rendered":"https:\/\/blog.embeddedexpert.io\/?p=2909"},"modified":"2024-10-13T04:54:31","modified_gmt":"2024-10-13T04:54:31","slug":"getting-started-with-touchgfx-startup-screen","status":"publish","type":"post","link":"https:\/\/blog.embeddedexpert.io\/?p=2909","title":{"rendered":"Getting Started with TouchGFX: Startup Screen"},"content":{"rendered":"<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"464\" height=\"109\" src=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/10\/images.png\" alt=\"\" class=\"wp-image-2910\" srcset=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/10\/images.png 464w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/10\/images-300x70.png 300w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/10\/images-400x94.png 400w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/10\/images-250x59.png 250w\" sizes=\"(max-width: 464px) 100vw, 464px\" \/><\/figure><\/div>\n\n\n<p>In this guide, we shall see how to create startup screen using TouchGFX without writing single line of code.<\/p>\n\n\n\n<p>In this guide, we shall cover the following:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>TouchGFX project.<\/li>\n\n\n\n<li>Results.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">1. TouchGFX Project:<\/h2>\n\n\n\n<p>Open TouchGFX designer and create new project as following:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"257\" src=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-08_08-10-07-1-1024x257.jpg\" alt=\"\" class=\"wp-image-2826\" srcset=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-08_08-10-07-1-1024x257.jpg 1024w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-08_08-10-07-1-300x75.jpg 300w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-08_08-10-07-1-768x193.jpg 768w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-08_08-10-07-1-1536x386.jpg 1536w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-08_08-10-07-1-2048x514.jpg 2048w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-08_08-10-07-1-1150x289.jpg 1150w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-08_08-10-07-1-750x188.jpg 750w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-08_08-10-07-1-400x100.jpg 400w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-08_08-10-07-1-250x63.jpg 250w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Then select your board, give the project a name and click on create.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"615\" src=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-08_08-11-33-1-1024x615.jpg\" alt=\"\" class=\"wp-image-2827\" srcset=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-08_08-11-33-1-1024x615.jpg 1024w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-08_08-11-33-1-300x180.jpg 300w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-08_08-11-33-1-768x461.jpg 768w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-08_08-11-33-1-1536x922.jpg 1536w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-08_08-11-33-1-2048x1230.jpg 2048w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-08_08-11-33-1-1150x690.jpg 1150w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-08_08-11-33-1-750x450.jpg 750w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-08_08-11-33-1-400x240.jpg 400w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-08_08-11-33-1-250x150.jpg 250w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>Create the first screen as you wish. <\/p>\n\n\n\n<p>Here we have simple text display:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"597\" src=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/10\/2024-10-12_17-13-29-1024x597.jpg\" alt=\"\" class=\"wp-image-2913\" srcset=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/10\/2024-10-12_17-13-29-1024x597.jpg 1024w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/10\/2024-10-12_17-13-29-300x175.jpg 300w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/10\/2024-10-12_17-13-29-768x447.jpg 768w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/10\/2024-10-12_17-13-29-1536x895.jpg 1536w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/10\/2024-10-12_17-13-29-2048x1193.jpg 2048w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/10\/2024-10-12_17-13-29-1150x670.jpg 1150w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/10\/2024-10-12_17-13-29-750x437.jpg 750w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/10\/2024-10-12_17-13-29-400x233.jpg 400w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/10\/2024-10-12_17-13-29-250x146.jpg 250w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>Next, from left side, add new screen as following:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"771\" src=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/10\/2024-10-12_17-13-17-1024x771.jpg\" alt=\"\" class=\"wp-image-2914\" srcset=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/10\/2024-10-12_17-13-17-1024x771.jpg 1024w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/10\/2024-10-12_17-13-17-300x226.jpg 300w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/10\/2024-10-12_17-13-17-768x579.jpg 768w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/10\/2024-10-12_17-13-17-1536x1157.jpg 1536w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/10\/2024-10-12_17-13-17-1150x866.jpg 1150w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/10\/2024-10-12_17-13-17-750x565.jpg 750w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/10\/2024-10-12_17-13-17-400x301.jpg 400w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/10\/2024-10-12_17-13-17-250x188.jpg 250w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/10\/2024-10-12_17-13-17.jpg 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>Create second screen as per your project. <\/p>\n\n\n\n<p>Here we have simple text to be displayed:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"596\" src=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/10\/2024-10-12_17-15-38-1024x596.jpg\" alt=\"\" class=\"wp-image-2915\" srcset=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/10\/2024-10-12_17-15-38-1024x596.jpg 1024w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/10\/2024-10-12_17-15-38-300x175.jpg 300w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/10\/2024-10-12_17-15-38-768x447.jpg 768w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/10\/2024-10-12_17-15-38-1536x894.jpg 1536w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/10\/2024-10-12_17-15-38-2048x1192.jpg 2048w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/10\/2024-10-12_17-15-38-1150x669.jpg 1150w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/10\/2024-10-12_17-15-38-750x436.jpg 750w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/10\/2024-10-12_17-15-38-400x233.jpg 400w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/10\/2024-10-12_17-15-38-250x145.jpg 250w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Next, from the left side, select the first screen as following:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"594\" src=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/10\/2024-10-12_17-34-40-1024x594.jpg\" alt=\"\" class=\"wp-image-2916\" srcset=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/10\/2024-10-12_17-34-40-1024x594.jpg 1024w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/10\/2024-10-12_17-34-40-300x174.jpg 300w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/10\/2024-10-12_17-34-40-768x446.jpg 768w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/10\/2024-10-12_17-34-40-1536x891.jpg 1536w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/10\/2024-10-12_17-34-40-2048x1189.jpg 2048w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/10\/2024-10-12_17-34-40-1150x667.jpg 1150w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/10\/2024-10-12_17-34-40-750x435.jpg 750w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/10\/2024-10-12_17-34-40-400x232.jpg 400w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/10\/2024-10-12_17-34-40-250x145.jpg 250w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>From the right side, select interaction and add new interaction as following:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"851\" height=\"1024\" src=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/10\/2024-10-12_17-15-30-851x1024.jpg\" alt=\"\" class=\"wp-image-2917\" srcset=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/10\/2024-10-12_17-15-30-851x1024.jpg 851w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/10\/2024-10-12_17-15-30-249x300.jpg 249w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/10\/2024-10-12_17-15-30-768x924.jpg 768w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/10\/2024-10-12_17-15-30-1150x1384.jpg 1150w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/10\/2024-10-12_17-15-30-750x903.jpg 750w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/10\/2024-10-12_17-15-30-400x481.jpg 400w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/10\/2024-10-12_17-15-30-250x301.jpg 250w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/10\/2024-10-12_17-15-30.jpg 1200w\" sizes=\"(max-width: 851px) 100vw, 851px\" \/><\/figure>\n\n\n\n<p>The interaction has the following parameters:<\/p>\n\n\n\n<p>Trigger: Screen transition begins.<\/p>\n\n\n\n<p>Action: Wait for.<\/p>\n\n\n\n<p>Duration: 5000 milliseconds which is 5seconds (select the value you desire).<\/p>\n\n\n\n<p>Tick in Can trigger another interaction.<\/p>\n\n\n\n<p>Give it a name like StartupTime for example<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>Add new interaction as following:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"766\" height=\"1024\" src=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/10\/2024-10-12_17-16-03-766x1024.jpg\" alt=\"\" class=\"wp-image-2918\" srcset=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/10\/2024-10-12_17-16-03-766x1024.jpg 766w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/10\/2024-10-12_17-16-03-224x300.jpg 224w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/10\/2024-10-12_17-16-03-768x1027.jpg 768w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/10\/2024-10-12_17-16-03-1149x1536.jpg 1149w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/10\/2024-10-12_17-16-03-1150x1537.jpg 1150w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/10\/2024-10-12_17-16-03-750x1003.jpg 750w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/10\/2024-10-12_17-16-03-400x535.jpg 400w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/10\/2024-10-12_17-16-03-250x334.jpg 250w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/10\/2024-10-12_17-16-03.jpg 1490w\" sizes=\"(max-width: 766px) 100vw, 766px\" \/><\/figure>\n\n\n\n<p>The interaction has the following parameters:<\/p>\n\n\n\n<p>Trigger: Another interaction is done.<\/p>\n\n\n\n<p>Choose Interaction: StartupTime (the same name as the first) interaction.<\/p>\n\n\n\n<p>Action: Change Screen,<\/p>\n\n\n\n<p>Choose screen: Screen2.<\/p>\n\n\n\n<p>Transition: Wipe or whatever you like from the given options.<\/p>\n\n\n\n<p>Select the direction as you want.<\/p>\n\n\n\n<p>Save the project and run it on your board as following (Or press on F3):<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"585\" height=\"1024\" src=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/10\/2024-10-12_17-17-26-585x1024.jpg\" alt=\"\" class=\"wp-image-2919\" srcset=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/10\/2024-10-12_17-17-26-585x1024.jpg 585w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/10\/2024-10-12_17-17-26-171x300.jpg 171w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/10\/2024-10-12_17-17-26-768x1345.jpg 768w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/10\/2024-10-12_17-17-26-877x1536.jpg 877w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/10\/2024-10-12_17-17-26-1169x2048.jpg 1169w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/10\/2024-10-12_17-17-26-1150x2014.jpg 1150w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/10\/2024-10-12_17-17-26-750x1314.jpg 750w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/10\/2024-10-12_17-17-26-400x701.jpg 400w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/10\/2024-10-12_17-17-26-250x438.jpg 250w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/10\/2024-10-12_17-17-26.jpg 1424w\" sizes=\"(max-width: 585px) 100vw, 585px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">2. Results:<\/h2>\n\n\n\n<p>You should see the following on your board:<\/p>\n\n\n\n<p><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"338\" src=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/10\/ezgif-6-b470fd1ee8.gif\" alt=\"\" class=\"wp-image-2920\" \/><\/figure><\/div>\n\n\n<p>Happy coding or should I say happy UI \ud83d\ude09<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this guide, we shall see how to create startup screen using TouchGFX without writing single line of code. In this guide, we shall cover the following: 1. TouchGFX Project: Open TouchGFX designer and create new project as following: Then select your board, give the project a name and click on create. Create the first [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,19,11,12],"tags":[],"class_list":["post-2909","post","type-post","status-publish","format-standard","hentry","category-embedded-systems","category-lcd","category-peripheral-drivers","category-stm32"],"_links":{"self":[{"href":"https:\/\/blog.embeddedexpert.io\/index.php?rest_route=\/wp\/v2\/posts\/2909"}],"collection":[{"href":"https:\/\/blog.embeddedexpert.io\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.embeddedexpert.io\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.embeddedexpert.io\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.embeddedexpert.io\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2909"}],"version-history":[{"count":1,"href":"https:\/\/blog.embeddedexpert.io\/index.php?rest_route=\/wp\/v2\/posts\/2909\/revisions"}],"predecessor-version":[{"id":2921,"href":"https:\/\/blog.embeddedexpert.io\/index.php?rest_route=\/wp\/v2\/posts\/2909\/revisions\/2921"}],"wp:attachment":[{"href":"https:\/\/blog.embeddedexpert.io\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2909"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.embeddedexpert.io\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2909"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.embeddedexpert.io\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2909"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}