Ö§Ô®¶Ù³§³¢µÄǶÈëʽͼÐβÙ×÷»·¾³
?
0 likes?342 views
This document discusses supporting vector graphics in an embedded graphical environment. It begins with an introduction to the speaker and overview of the topic. The document then covers drawing basics like LCDs and fonts, as well as more advanced topics such as double buffering, vector graphics libraries, and spline curves. It also discusses challenges and trends in modern embedded UI design like transparency, animations, and single-page applications. Finally, it outlines areas for future work including domain-specific languages and optimization for low memory.
Ö§Ô®¶Ù³§³¢µÄǶÈëʽͼÐβÙ×÷»·¾³
- 1. Ö§Ô®¶Ù³§³¢µÄǶÈëʽͼÐβÙ×÷»·¾³ STUDENTS¡¯ INFORMATION TECHNOLOGY CONFERENCE 2016, Taiwan John Chou luckyjoou@gmail.com
- 2. About me 1 ? From the opposite bank¡Neihu(? ? Bachelor degree in Optoelectronics ? Now obtaining master degree in EE at NCKU ? Love music, soccer, photography,¡ ? Personal website: joouis.com
- 3. Intro 2 ? Why do this work? ? Good one is not free. ? Free one is not good enough. ? Using HTML&CSS is better!
- 5. Outline 4 A.Draw: from basic to advanced B.GUI: from classic to modern C.Future work and welcome
- 6. Part A. Draw: from basic to advanced 5
- 7. Draw: Liquid-crystal display 6 ? Liquid-crystal display(LCD) ? From opaque to transparent when applying an electric field. ? Requiring external light to produce a visible image. ? Types: ? Passive-matrix: TN, STN, ¡ ? Active-matrix: TFT(IPS, VA, ¡) Picture source
- 8. Draw: Liquid-crystal display 7 ? What you should know
- 9. Draw: Liquid-crystal display 8 ? What you actually see is
- 10. Draw: MCU 9 ? STM32F429ZI key features: ? Core: ARM? 32-bit Cortex?-M4 CPU with FPU, frequency up to 180 MHz ? Memories: Up to 2 MB of Flash memory ? LCD-TFT controller up to XGA resolution with dedicated Chrom-ART Accelerator? for enhanced graphic content creation (DMA2D) ? Up to 168 I/O ports with interrupt capability ? Up to 21 communication interfaces
- 11. Draw: VRAM 10 ? It seems that we can draw pics after we initialize the peripherals.. ? But do this math work first: Suppose we want to control a 2.4" QVGA(240*320) TFT LCD, RGB565(2 btyes per pixel), how much bytes will be needed per frame?
- 12. Draw: VRAM 11 ? 240*320*2 = 153,600 btyes ? STM32F429ZI only have 192KB ram to use!!! ? So we need external ram, often call it Video Ram, which was once commonly used to storage the framebuffer in some graphics adapters. ? Then based on above, if TFT controller updates 240*320 pixels @60Hz? ? 153,600*60 = 9 MB/s (around 10-50% load on SDRAM)
- 13. Draw: Double buffering 12 ? Double buffering:
- 14. Draw: UGUI 13 ? We always want to stand on the shoulder of open source projects.
- 15. Draw: Font library 14 ? Like this:
- 16. Draw: Font library 15 ? And the output like this:
- 17. Draw: Raster and Vector Graphics 16 ? In computer graphics, a raster graphics image is a dot matrix data structure representing a generally rectangular grid of pixels ? Color mode: RGB565, RGB888, ARGB32
- 18. Draw: Vector Graphics 17 ? If you open an svg file you will see that path elements are specified using a graphical operation format that looks something like this
- 19. Draw: TWIN 18 ? A vector graphics framework for embedded system ? Its author is Keith Packard, who was named as ¡°the person behind most of the improvements made on the open source desktop in the last ten years at least¡± in 2011.
- 20. Draw: Spline in TWIN 19 ? B¨¦zier curve is a kind of spline. ? And can be defined as:
- 21. Draw: Spline in TWIN 20 ? Alogrithm in TWIN: De Casteljau's algorithm
- 22. Draw: Transition 21 ? Translation ? (Uniform) Scaling ? Rotation ? Rotate matrix(counterclockwise) ? Counterclockwise, ¦Èangle
- 23. Draw: Comparison between Bitmap & Vector 22 ? Bitmap/raster graphics ? Pre-rendered. At run time, basically just a data copy. ? Hard to do ? Zoom ? Rotate ? Color change ? Dynamic backgrounds ? But much faster and can make heavy use of DMA transfers. ? Arithmetic/vector graphics ? Run-time calculations and pixel plotting by MCU. EASY ? Not really an option in this context.
- 24. Part B. GUI: from classic to modern 23
- 25. GUI: Classic Embedded UI 24
- 26. GUI: Modern Embedded UI 25 ? What users expect¡
- 27. GUI: Modern Embedded UI 26 ? Features£º ? Transparency ? Alpha-blending ? Anti-aliased fonts and kerning ? Touch Gestures ? Animations ? Screen transition ? High resolution displays ? High frame rate
- 28. GUI: Modern Embedded UI 27 ? It is not all about technology.
- 29. GUI: SPA Style 28 ? Single-page application ? A web application or website that fits on a single web page with the goal of providing a more fluent UX similar to a desktop application.
- 30. GUI: Challenges 29 ? MCU Load: ? Large amount of data ? UI is just a (small) part of the system ? Limit Pixel Redraws: ? Only draw the areas that actually change ? Only draw pixels that are actually visible ? Memory Usage: Internal and external RAM usage ? High-end Look & Feel
- 31. Part C. Future work 30
- 32. Future work: DSL 31 Domain-specific language ¡ Well, just think about HTML
- 33. Future work 32 ? Support vector graphics (ongoing) ? Web UI style (SPA) ? Support DSL ? Optimization for low memory cost
- 34. Welcome 33 ? BSD License ? With documenting, see here ? Github
- 35. Reference 34 ? STM32F429I-DISCO schematics ? RM0090: STM32F405/415, STM32F407/417, STM32F427/437 and STM32F429/439 advanced ARM?-based 32-bit MCUs ? Wikipedia: Vector graphics ? Bezier ? Modern GUI on Limited Hardware - Jesper Hedegaard; Mj?lner Informatics
- 36. Thanks for listening ! Special thanks to Jserv and SITCON ! 35