{"id":1997,"date":"2016-09-29T10:01:23","date_gmt":"2016-09-29T17:01:23","guid":{"rendered":"http:\/\/visualgdb.com\/w\/?p=1997"},"modified":"2016-09-29T10:07:32","modified_gmt":"2016-09-29T17:07:32","slug":"embedding-binary-resources-into-embedded-projects","status":"publish","type":"post","link":"https:\/\/visualgdb.com\/tutorials\/arm\/resources\/","title":{"rendered":"Embedding Binary Resources into Embedded Projects"},"content":{"rendered":"

This tutorial shows how to easily embed binary files into your Embedded VisualGDB projects and access them from your code. We will modify the basic STM32F7Discovery LCD example to display 3 custom icons on top of the background image and will show how to easily embed them in your project. Before you begin, install VisualGDB 5.2 Beta 2 or later.<\/p>\n

    \n
  1. Start Visual Studio and open VisualGDB Embedded Project Wizard:\"01-prjname\"<\/a><\/li>\n
  2. On the first page select “Create a new project” and ensure that the MSBuild system is selected:\"02-msbuild\"<\/a><\/li>\n
  3. On the next page of the wizard select your device. In this example we will use STM32F746NG that is installed on the STM32F7Discovery board:\"03-device\"<\/a><\/li>\n
  4. On the Sample Selection page choose the LCD Demo sample and proceed with the default sample configuration:\"04-lcd\"<\/a><\/li>\n
  5. Finally select your debug method on the Debug Method page. We recommend using OpenOCD or Segger J-Link:\"05-stlink\"<\/a><\/li>\n
  6. Modify the main() function to use LCD_FB_START_ADDRESS as the layer address and copy the background image (s_Logo) to it:\n
    \u00a0\u00a0\u00a0 BSP_LCD_LayerRgb565Init(0, LCD_FB_START_ADDRESS);\r\n\u00a0\u00a0\u00a0 memcpy((void *)LCD_FB_START_ADDRESS, s_Logo, sizeof(s_Logo));<\/pre>\n
    Then build your project:\"06-build\"<\/a><\/li>\n
  7. If you run it now, the board will show the VisualGDB logo taken from s_Logo:\"background\"<\/a><\/li>\n
  8. Now we will modify the program to display 3 icons from the Oxygen icon theme<\/a> on top of the background image. To avoid decompressing the png format on the device, we will convert the PNG files into a simple binary format. You can do that with a simple C# tool:\n
    using System.Collections.Generic;\r\nusing System.Drawing;\r\nusing System.IO;\r\n\r\nnamespace ImageConverter\r\n{\r\n\u00a0\u00a0\u00a0 class Program\r\n\u00a0\u00a0\u00a0 {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 static void Main(string[] args)\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Bitmap bmp = new Bitmap(args[0]);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 List<byte> data = new List<byte>();\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 for (int y = 0; y < bmp.Height; y++)\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 for (int x = 0; x < bmp.Width; x++)\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Color pixel = bmp.GetPixel(x, y);\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 data.Add(pixel.A);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 data.Add(pixel.R);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 data.Add(pixel.G);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 data.Add(pixel.B);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 File.WriteAllBytes(Path.ChangeExtension(args[0], \".dat\"), data.ToArray());\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }\r\n\u00a0\u00a0\u00a0 }\r\n}<\/pre>\n
    You can download an archive with the original .png files and the converted .dat files here<\/a>.<\/li>\n
  9. Add the following functions to your main file to draw the raw images on the screen:\n
    void DrawLineWithTransparency(uint16_t *pDst, const uint32_t *pSrc, int pixels)\r\n{\r\n\u00a0\u00a0\u00a0 for (int i = 0; i < pixels; i++)\r\n\u00a0\u00a0\u00a0 {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 uint16_t oldPixel = pDst[i];\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 uint32_t value = pSrc[i];\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 int oldR = ((oldPixel >> (5 + 6)) & 0x1F) << 3;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 int oldG = ((oldPixel >> 5) & 0x3F) << 2;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 int oldB = (oldPixel & 0x1F) << 3;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 int picWeight = value & 0xFF;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 int oldWeight = 256 - picWeight;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 int picR = (value >> 8) & 0xFF;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 int picG = (value >> 16) & 0xFF;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 int picB = (value >> 24) & 0xFF;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 int newR = (oldR * oldWeight + picR * picWeight) \/ 256;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 int newG = (oldG * oldWeight + picG * picWeight) \/ 256;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 int newB = (oldB * oldWeight + picB * picWeight) \/ 256;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 newR >>= 3;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 newG >>= 2;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 newB >>= 3;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 uint16_t rgb565 = (ushort)(newB | (newG << 5) | (newR << (5 + 6)));\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 pDst[i] = rgb565;\r\n\u00a0\u00a0\u00a0 }\r\n}\r\n\r\n\r\nvoid DrawImageWithTransparency(const uint32_t *pImage, int X, int Y, int width, int height)\r\n{\r\n\u00a0\u00a0\u00a0 const int ScreenWidth = 480;\r\n\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0\u00a0 uint16_t *pStartAddr = (uint16_t*)LCD_FB_START_ADDRESS + Y * ScreenWidth + X;\r\n\u00a0\u00a0\u00a0 for (int i = 0; i < height; i++)\r\n\u00a0\u00a0\u00a0 {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 DrawLineWithTransparency(pStartAddr + i * ScreenWidth, pImage + i * width, width);\r\n\u00a0\u00a0\u00a0 }\r\n}<\/pre>\n<\/li>\n
  10. Copy the .dat files into a subdirectory inside your project directory and add them to Solution Explorer. Ensure that the Item Type for those files is set to “Embedded Binary File” (default for .dat files):\"07-binary\"<\/a><\/li>\n
  11. Build your project. VisualGDB will automatically convert the binary files to object files, link them together with your program and generate a file called EmbeddedResources.h<\/strong> with a list of resource names. Include the EmbeddedResources.h file from your main file and use IntelliSense to check the contents of the EmbeddedResources namespace:\"sense\"<\/a>If these were the first resources added to your project, you will need to reopen it in order for IntelliSense to locate the generated header file.<\/li>\n
  12. Add the following lines to your main() function to draw the resources:\n
    \u00a0\u00a0\u00a0 int left = 24;\r\n\u00a0\u00a0\u00a0 DrawImageWithTransparency((uint32_t*)icons_Actions_dialog_ok_apply_128_dat.data(), left, 72, 128, 128);\r\n\u00a0\u00a0\u00a0 left += 128 + 24;\r\n\u00a0\u00a0\u00a0 DrawImageWithTransparency((uint32_t*)icons_Actions_edit_delete_128_dat.data(), left, 72, 128, 128);\r\n\u00a0\u00a0\u00a0 left += 128 + 24;\r\n\u00a0\u00a0\u00a0 DrawImageWithTransparency((uint32_t*)icons_Actions_dialog_cancel_128_dat.data(), left, 72, 128, 128);\r\n\r\n<\/pre>\n<\/li>\n
  13. Build your project and note how the FLASH utilization increased considerably after adding the large icons:\"08-images\"<\/a><\/li>\n
  14. Build the program and run it. You will see the new icons drawn on top of the background image:\"icons\"<\/a><\/li>\n
  15. The generated EmbeddedResources.h file will look similar to this:\n
    #pragma once\r\n\r\nextern void *_binary_icons_Actions_dialog_cancel_128_dat_start, *_binary_icons_Actions_dialog_cancel_128_dat_end, *_binary_icons_Actions_dialog_cancel_128_dat_size;\r\nextern void *_binary_icons_Actions_dialog_ok_apply_128_dat_start, *_binary_icons_Actions_dialog_ok_apply_128_dat_end, *_binary_icons_Actions_dialog_ok_apply_128_dat_size;\r\nextern void *_binary_icons_Actions_edit_delete_128_dat_start, *_binary_icons_Actions_edit_delete_128_dat_end, *_binary_icons_Actions_edit_delete_128_dat_size;\r\n\r\n#ifdef __cplusplus\r\n#ifndef CUSTOM_EMBEDDED_RESOURCE_CLASS\r\ntemplate <void **_Start, void **_End, void **_Size> class EmbeddedResource\r\n{\r\npublic:\r\n\u00a0\u00a0 \u00a0void *data() { return _Start; }\r\n\u00a0\u00a0 \u00a0void *end() { return _End; }\r\n\u00a0\u00a0 \u00a0unsigned size()\u00a0 { return (unsigned)_Size; }\r\n};\r\n#endif\r\n\r\nnamespace EmbeddedResources\r\n{\r\n\u00a0\u00a0 \u00a0static EmbeddedResource<&_binary_icons_Actions_dialog_cancel_128_dat_start, &_binary_icons_Actions_dialog_cancel_128_dat_end, &_binary_icons_Actions_dialog_cancel_128_dat_size> icons_Actions_dialog_cancel_128_dat;\r\n\u00a0\u00a0 \u00a0static EmbeddedResource<&_binary_icons_Actions_dialog_ok_apply_128_dat_start, &_binary_icons_Actions_dialog_ok_apply_128_dat_end, &_binary_icons_Actions_dialog_ok_apply_128_dat_size> icons_Actions_dialog_ok_apply_128_dat;\r\n\u00a0\u00a0 \u00a0static EmbeddedResource<&_binary_icons_Actions_edit_delete_128_dat_start, &_binary_icons_Actions_edit_delete_128_dat_end, &_binary_icons_Actions_edit_delete_128_dat_size> icons_Actions_edit_delete_128_dat;\r\n}\r\n#endif<\/pre>\n
    The lines starting with “extern” declare the symbols like _binary_<name>_start<\/strong> that are automatically generated by GNU linker when linking binary files into your program. You can use those from your plain C code. The EmbeddedResource class provides a convenient C++ wrapper that can be used to access the resource from C++ code. You can use the resource_name.data()<\/strong> syntax to get a pointer to the beginning of an embedded resource and the resource_name.size()<\/strong> syntax to get the size of a resource.<\/li>\n
  16. If you want to add more functionality to the EmbeddedResource class, you can redefine it in your own header file and define the CUSTOM_EMBEDDED_RESOURCE_CLASS macro there:\n
    #define CUSTOM_EMBEDDED_RESOURCE_CLASS\r\ntemplate <void **_Start, void **_End, void **_Size> class EmbeddedResource\r\n{\r\npublic:\r\n\u00a0\u00a0\u00a0 void *data() { return _Start; }\r\n\u00a0\u00a0\u00a0 void *end() { return _End; }\r\n\u00a0\u00a0\u00a0 unsigned size()\u00a0 { return (unsigned)_Size; }\r\n\u00a0\u00a0\u00a0 template<class _Type> _Type *get() {return (_Type*)_Start;}\r\n};<\/pre>\n
    As long as the class still accepts 3 template arguments corresponding to the start, end and size of the block, you can use it instead of the original one:<\/p>\n
    \u00a0\u00a0\u00a0 DrawImageWithTransparency(icons_Actions_dialog_ok_apply_128_dat.get<uint32_t>(), left, 72, 128, 128);<\/pre>\n<\/li>\n
  17. The template-based implementation does not result in any extra overhead compared to the plain C version. If you compile your program in the release mode and look into disassembly, you will see that the call to data()<\/strong> or the newly added get()<\/strong> method gets inlined into a single “load constant” instruction:\"disasm\"<\/a><\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"
    This tutorial shows how to easily embed binary files into your Embedded VisualGDB projects and access them from your code.<\/p>\n","protected":false},"author":1,"featured_media":2010,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[27],"tags":[53,99,131],"_links":{"self":[{"href":"https:\/\/visualgdb.com\/w\/wp-json\/wp\/v2\/posts\/1997"}],"collection":[{"href":"https:\/\/visualgdb.com\/w\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/visualgdb.com\/w\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/visualgdb.com\/w\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/visualgdb.com\/w\/wp-json\/wp\/v2\/comments?post=1997"}],"version-history":[{"count":1,"href":"https:\/\/visualgdb.com\/w\/wp-json\/wp\/v2\/posts\/1997\/revisions"}],"predecessor-version":[{"id":2012,"href":"https:\/\/visualgdb.com\/w\/wp-json\/wp\/v2\/posts\/1997\/revisions\/2012"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/visualgdb.com\/w\/wp-json\/wp\/v2\/media\/2010"}],"wp:attachment":[{"href":"https:\/\/visualgdb.com\/w\/wp-json\/wp\/v2\/media?parent=1997"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/visualgdb.com\/w\/wp-json\/wp\/v2\/categories?post=1997"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/visualgdb.com\/w\/wp-json\/wp\/v2\/tags?post=1997"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}