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. 支援DSL的嵌入式圖形操作環境
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!

4. 支援DSL的嵌入式圖形操作環境
3
30分鐘搞懂嵌入式圖形在講什麼

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