SlideShare a Scribd company logo

支援DSL的嵌入式圖形操作環境

John Chou
John Chou

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 of 36
Download to read offline
支援DSL的嵌入式圖形操作環境
STUDENTS’ INFORMATION TECHNOLOGY CONFERENCE
2016, Taiwan
John Chou
luckyjoou@gmail.com
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
Intro
2
• Why do this work?
• Good one is not free.
• Free one is not good enough.
• Using HTML&CSS is better!
支援DSL的嵌入式圖形操作環境
3
30分鐘搞懂嵌入式圖形在講什麼
Outline
4
A.Draw: from basic to advanced
B.GUI: from classic to modern
C.Future work and welcome
Part A. Draw: from basic to advanced
5

Recommended

Vadym Boikov “Improving your image: neural network style”
Vadym Boikov  “Improving your image: neural network style”Vadym Boikov  “Improving your image: neural network style”
Vadym Boikov “Improving your image: neural network style”Lviv Startup Club
 
Sitcon 2016 我的自由軟體之路
Sitcon 2016 我的自由軟體之路Sitcon 2016 我的自由軟體之路
Sitcon 2016 我的自由軟體之路政嘉 曾
 
Однокомнатная квартира в Жилом Комплексе Наш дом на ул. Шевченко д.№82 г. Рязань
Однокомнатная квартира в Жилом Комплексе Наш дом на ул. Шевченко д.№82 г. РязаньОднокомнатная квартира в Жилом Комплексе Наш дом на ул. Шевченко д.№82 г. Рязань
Однокомнатная квартира в Жилом Комплексе Наш дом на ул. Шевченко д.№82 г. РязаньRight Decision Real Estate
 
перша свытова выйна 5 клас
перша свытова выйна 5 класперша свытова выйна 5 клас
перша свытова выйна 5 класlarisa1975
 
європейське відродження
європейське відродженняєвропейське відродження
європейське відродженняlarisa1975
 
Chữa trị chứng sa sút trí tuệ, Alzheimer, thoái hóa thần kinh
Chữa trị chứng sa sút trí tuệ, Alzheimer, thoái hóa thần kinhChữa trị chứng sa sút trí tuệ, Alzheimer, thoái hóa thần kinh
Chữa trị chứng sa sút trí tuệ, Alzheimer, thoái hóa thần kinhherma838
 

More Related Content

Similar to 支援DSL的嵌入式圖形操作環境

World of Tanks* 1.0+: Enriching Gamers Experience with Multicore Optimized Ph...
World of Tanks* 1.0+: Enriching Gamers Experience with Multicore Optimized Ph...World of Tanks* 1.0+: Enriching Gamers Experience with Multicore Optimized Ph...
World of Tanks* 1.0+: Enriching Gamers Experience with Multicore Optimized Ph...Intel® Software
 
Video Terminal Evolution and The Future of Browsers
Video Terminal Evolution and The Future of BrowsersVideo Terminal Evolution and The Future of Browsers
Video Terminal Evolution and The Future of BrowsersThomas Walker Lynch
 
OpenCL & the Future of Desktop High Performance Computing in CAD
OpenCL & the Future of Desktop High Performance Computing in CADOpenCL & the Future of Desktop High Performance Computing in CAD
OpenCL & the Future of Desktop High Performance Computing in CADDesign World
 
lec01.pdf
lec01.pdflec01.pdf
lec01.pdfBeiYu6
 
P1 powerpoint presentation
P1 powerpoint presentationP1 powerpoint presentation
P1 powerpoint presentationAishahBegum
 
La piattaforma Ruju per la ricostruzione 3D di scene e oggetti reali a partir...
La piattaforma Ruju per la ricostruzione 3D di scene e oggetti reali a partir...La piattaforma Ruju per la ricostruzione 3D di scene e oggetti reali a partir...
La piattaforma Ruju per la ricostruzione 3D di scene e oggetti reali a partir...Sardegna Ricerche
 
CS101- Introduction to Computing- Lecture 33
CS101- Introduction to Computing- Lecture 33CS101- Introduction to Computing- Lecture 33
CS101- Introduction to Computing- Lecture 33Bilal Ahmed
 
Converting and Transforming Technical Graphics
Converting and Transforming Technical GraphicsConverting and Transforming Technical Graphics
Converting and Transforming Technical Graphicsdclsocialmedia
 
Animation's Life Cycle And Its Application
Animation's Life Cycle And Its ApplicationAnimation's Life Cycle And Its Application
Animation's Life Cycle And Its ApplicationShakaib Arif
 
Computer graphics
Computer graphicsComputer graphics
Computer graphicsNafis Ahmad
 

Similar to 支援DSL的嵌入式圖形操作環境 (20)

Co315 part 1
Co315   part 1Co315   part 1
Co315 part 1
 
What is computer graphics
What is computer graphicsWhat is computer graphics
What is computer graphics
 
World of Tanks* 1.0+: Enriching Gamers Experience with Multicore Optimized Ph...
World of Tanks* 1.0+: Enriching Gamers Experience with Multicore Optimized Ph...World of Tanks* 1.0+: Enriching Gamers Experience with Multicore Optimized Ph...
World of Tanks* 1.0+: Enriching Gamers Experience with Multicore Optimized Ph...
 
Video Terminal Evolution and The Future of Browsers
Video Terminal Evolution and The Future of BrowsersVideo Terminal Evolution and The Future of Browsers
Video Terminal Evolution and The Future of Browsers
 
OpenCL & the Future of Desktop High Performance Computing in CAD
OpenCL & the Future of Desktop High Performance Computing in CADOpenCL & the Future of Desktop High Performance Computing in CAD
OpenCL & the Future of Desktop High Performance Computing in CAD
 
lec01.pdf
lec01.pdflec01.pdf
lec01.pdf
 
unit-1-intro
 unit-1-intro unit-1-intro
unit-1-intro
 
P1 powerpoint presentation
P1 powerpoint presentationP1 powerpoint presentation
P1 powerpoint presentation
 
CAD Unit-1.pdf
CAD Unit-1.pdfCAD Unit-1.pdf
CAD Unit-1.pdf
 
cad workstation
cad workstationcad workstation
cad workstation
 
PCL (Point Cloud Library)
PCL (Point Cloud Library)PCL (Point Cloud Library)
PCL (Point Cloud Library)
 
La piattaforma Ruju per la ricostruzione 3D di scene e oggetti reali a partir...
La piattaforma Ruju per la ricostruzione 3D di scene e oggetti reali a partir...La piattaforma Ruju per la ricostruzione 3D di scene e oggetti reali a partir...
La piattaforma Ruju per la ricostruzione 3D di scene e oggetti reali a partir...
 
CS101- Introduction to Computing- Lecture 33
CS101- Introduction to Computing- Lecture 33CS101- Introduction to Computing- Lecture 33
CS101- Introduction to Computing- Lecture 33
 
(2) gui drawing
(2) gui drawing(2) gui drawing
(2) gui drawing
 
Converting and Transforming Technical Graphics
Converting and Transforming Technical GraphicsConverting and Transforming Technical Graphics
Converting and Transforming Technical Graphics
 
Animation's Life Cycle And Its Application
Animation's Life Cycle And Its ApplicationAnimation's Life Cycle And Its Application
Animation's Life Cycle And Its Application
 
Artificial Intelligence
Artificial IntelligenceArtificial Intelligence
Artificial Intelligence
 
Computer graphics
Computer graphicsComputer graphics
Computer graphics
 
Overview of Computer Graphics
Overview of Computer GraphicsOverview of Computer Graphics
Overview of Computer Graphics
 
(2) gui drawing
(2) gui drawing(2) gui drawing
(2) gui drawing
 

Recently uploaded

FSMR - FIRE SAFETY MAINTENANCE REPORT FORM.pdf
FSMR - FIRE SAFETY MAINTENANCE REPORT FORM.pdfFSMR - FIRE SAFETY MAINTENANCE REPORT FORM.pdf
FSMR - FIRE SAFETY MAINTENANCE REPORT FORM.pdfArnold Saludares
 
21 SCHEME_21EC53_VTU_MODULE-4_COMPUTER COMMUNCATION NETWORK.pdf
21 SCHEME_21EC53_VTU_MODULE-4_COMPUTER COMMUNCATION NETWORK.pdf21 SCHEME_21EC53_VTU_MODULE-4_COMPUTER COMMUNCATION NETWORK.pdf
21 SCHEME_21EC53_VTU_MODULE-4_COMPUTER COMMUNCATION NETWORK.pdfDr. Shivashankar
 
streelmaking technology for the last 100 years.pdf
streelmaking technology for the last 100 years.pdfstreelmaking technology for the last 100 years.pdf
streelmaking technology for the last 100 years.pdfAlbertoConejoPadre1
 
Robust, Precise, Fast - Chose Two for Radiated EMC Measurements!
Robust, Precise, Fast - Chose Two for Radiated EMC Measurements!Robust, Precise, Fast - Chose Two for Radiated EMC Measurements!
Robust, Precise, Fast - Chose Two for Radiated EMC Measurements!Mathias Magdowski
 
Lesson2 Stoichiometry and mass balance.pdf
Lesson2 Stoichiometry and mass balance.pdfLesson2 Stoichiometry and mass balance.pdf
Lesson2 Stoichiometry and mass balance.pdff1002753214
 
python presentation lists,strings,operation
python presentation lists,strings,operationpython presentation lists,strings,operation
python presentation lists,strings,operationManjuRaghavan1
 
Introduction and replication to DragonflyDB
Introduction and replication to DragonflyDBIntroduction and replication to DragonflyDB
Introduction and replication to DragonflyDBMarian Marinov
 
Microstructure of Hadfield Steels (Robert Hadfield)
Microstructure of Hadfield Steels (Robert Hadfield)Microstructure of Hadfield Steels (Robert Hadfield)
Microstructure of Hadfield Steels (Robert Hadfield)MANICKAVASAHAM G
 
Chapter 1 - Drilling Fluid Functions GR.ppt
Chapter 1 - Drilling Fluid Functions GR.pptChapter 1 - Drilling Fluid Functions GR.ppt
Chapter 1 - Drilling Fluid Functions GR.pptzeidali3
 
Center Enamel is the leading bolted steel tanks manufacturer in China.docx
Center Enamel is the leading bolted steel tanks manufacturer in China.docxCenter Enamel is the leading bolted steel tanks manufacturer in China.docx
Center Enamel is the leading bolted steel tanks manufacturer in China.docxsjzzztc
 
Integrity Constraints in Database Management System.pptx
Integrity Constraints in Database Management System.pptxIntegrity Constraints in Database Management System.pptx
Integrity Constraints in Database Management System.pptxPallaviPatil905338
 
Paper Machine Troubleshooting manual for paper makers
Paper Machine Troubleshooting manual for paper makersPaper Machine Troubleshooting manual for paper makers
Paper Machine Troubleshooting manual for paper makersNoman khan
 
Center Enamel is the leading fire water tanks manufacturer in China.docx
Center Enamel is the leading fire water tanks manufacturer in China.docxCenter Enamel is the leading fire water tanks manufacturer in China.docx
Center Enamel is the leading fire water tanks manufacturer in China.docxsjzzztc
 
MedTech R&D - Tamer Emara - resume @2024
MedTech R&D - Tamer Emara - resume @2024MedTech R&D - Tamer Emara - resume @2024
MedTech R&D - Tamer Emara - resume @2024Tamer Emara
 
B111_FTS_2011.06.01 Fuel Tank Safety.pdf
B111_FTS_2011.06.01 Fuel Tank Safety.pdfB111_FTS_2011.06.01 Fuel Tank Safety.pdf
B111_FTS_2011.06.01 Fuel Tank Safety.pdfKhoiTruong19
 
CCW332-DIGITAL MARKETING QUESTION BANK WITH ANSWERS
CCW332-DIGITAL MARKETING QUESTION BANK WITH ANSWERSCCW332-DIGITAL MARKETING QUESTION BANK WITH ANSWERS
CCW332-DIGITAL MARKETING QUESTION BANK WITH ANSWERSTamil949112
 
INTERACTIVE AQUATIC MUSEUM AT BAGH IBN QASIM CLIFTON KARACHI
INTERACTIVE AQUATIC MUSEUM AT BAGH IBN QASIM CLIFTON KARACHIINTERACTIVE AQUATIC MUSEUM AT BAGH IBN QASIM CLIFTON KARACHI
INTERACTIVE AQUATIC MUSEUM AT BAGH IBN QASIM CLIFTON KARACHIKiranKandhro1
 
Model Approved Food/ sanitary Grade Flow Meter
Model Approved Food/ sanitary Grade Flow MeterModel Approved Food/ sanitary Grade Flow Meter
Model Approved Food/ sanitary Grade Flow MeterManasMicrosystems
 
The Crystal London Arsitektur Hijau Dinda
The Crystal London Arsitektur Hijau DindaThe Crystal London Arsitektur Hijau Dinda
The Crystal London Arsitektur Hijau Dindadindapebriani27
 

Recently uploaded (20)

FSMR - FIRE SAFETY MAINTENANCE REPORT FORM.pdf
FSMR - FIRE SAFETY MAINTENANCE REPORT FORM.pdfFSMR - FIRE SAFETY MAINTENANCE REPORT FORM.pdf
FSMR - FIRE SAFETY MAINTENANCE REPORT FORM.pdf
 
21 SCHEME_21EC53_VTU_MODULE-4_COMPUTER COMMUNCATION NETWORK.pdf
21 SCHEME_21EC53_VTU_MODULE-4_COMPUTER COMMUNCATION NETWORK.pdf21 SCHEME_21EC53_VTU_MODULE-4_COMPUTER COMMUNCATION NETWORK.pdf
21 SCHEME_21EC53_VTU_MODULE-4_COMPUTER COMMUNCATION NETWORK.pdf
 
streelmaking technology for the last 100 years.pdf
streelmaking technology for the last 100 years.pdfstreelmaking technology for the last 100 years.pdf
streelmaking technology for the last 100 years.pdf
 
Robust, Precise, Fast - Chose Two for Radiated EMC Measurements!
Robust, Precise, Fast - Chose Two for Radiated EMC Measurements!Robust, Precise, Fast - Chose Two for Radiated EMC Measurements!
Robust, Precise, Fast - Chose Two for Radiated EMC Measurements!
 
Lesson2 Stoichiometry and mass balance.pdf
Lesson2 Stoichiometry and mass balance.pdfLesson2 Stoichiometry and mass balance.pdf
Lesson2 Stoichiometry and mass balance.pdf
 
python presentation lists,strings,operation
python presentation lists,strings,operationpython presentation lists,strings,operation
python presentation lists,strings,operation
 
Introduction and replication to DragonflyDB
Introduction and replication to DragonflyDBIntroduction and replication to DragonflyDB
Introduction and replication to DragonflyDB
 
Microstructure of Hadfield Steels (Robert Hadfield)
Microstructure of Hadfield Steels (Robert Hadfield)Microstructure of Hadfield Steels (Robert Hadfield)
Microstructure of Hadfield Steels (Robert Hadfield)
 
Présentation IIRB 2024 M.Campoverde R.Duval
Présentation IIRB 2024 M.Campoverde R.DuvalPrésentation IIRB 2024 M.Campoverde R.Duval
Présentation IIRB 2024 M.Campoverde R.Duval
 
Chapter 1 - Drilling Fluid Functions GR.ppt
Chapter 1 - Drilling Fluid Functions GR.pptChapter 1 - Drilling Fluid Functions GR.ppt
Chapter 1 - Drilling Fluid Functions GR.ppt
 
Center Enamel is the leading bolted steel tanks manufacturer in China.docx
Center Enamel is the leading bolted steel tanks manufacturer in China.docxCenter Enamel is the leading bolted steel tanks manufacturer in China.docx
Center Enamel is the leading bolted steel tanks manufacturer in China.docx
 
Integrity Constraints in Database Management System.pptx
Integrity Constraints in Database Management System.pptxIntegrity Constraints in Database Management System.pptx
Integrity Constraints in Database Management System.pptx
 
Paper Machine Troubleshooting manual for paper makers
Paper Machine Troubleshooting manual for paper makersPaper Machine Troubleshooting manual for paper makers
Paper Machine Troubleshooting manual for paper makers
 
Center Enamel is the leading fire water tanks manufacturer in China.docx
Center Enamel is the leading fire water tanks manufacturer in China.docxCenter Enamel is the leading fire water tanks manufacturer in China.docx
Center Enamel is the leading fire water tanks manufacturer in China.docx
 
MedTech R&D - Tamer Emara - resume @2024
MedTech R&D - Tamer Emara - resume @2024MedTech R&D - Tamer Emara - resume @2024
MedTech R&D - Tamer Emara - resume @2024
 
B111_FTS_2011.06.01 Fuel Tank Safety.pdf
B111_FTS_2011.06.01 Fuel Tank Safety.pdfB111_FTS_2011.06.01 Fuel Tank Safety.pdf
B111_FTS_2011.06.01 Fuel Tank Safety.pdf
 
CCW332-DIGITAL MARKETING QUESTION BANK WITH ANSWERS
CCW332-DIGITAL MARKETING QUESTION BANK WITH ANSWERSCCW332-DIGITAL MARKETING QUESTION BANK WITH ANSWERS
CCW332-DIGITAL MARKETING QUESTION BANK WITH ANSWERS
 
INTERACTIVE AQUATIC MUSEUM AT BAGH IBN QASIM CLIFTON KARACHI
INTERACTIVE AQUATIC MUSEUM AT BAGH IBN QASIM CLIFTON KARACHIINTERACTIVE AQUATIC MUSEUM AT BAGH IBN QASIM CLIFTON KARACHI
INTERACTIVE AQUATIC MUSEUM AT BAGH IBN QASIM CLIFTON KARACHI
 
Model Approved Food/ sanitary Grade Flow Meter
Model Approved Food/ sanitary Grade Flow MeterModel Approved Food/ sanitary Grade Flow Meter
Model Approved Food/ sanitary Grade Flow Meter
 
The Crystal London Arsitektur Hijau Dinda
The Crystal London Arsitektur Hijau DindaThe Crystal London Arsitektur Hijau Dinda
The Crystal London Arsitektur Hijau Dinda
 

支援DSL的嵌入式圖形操作環境

  • 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!
  • 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.
  • 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
  • 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