SlideShare a Scribd company logo
MadButterfly 的架構




          Thinker <thinker@branda.to>


1 of 27
What is?
           一種開發模式
           一種 GUI framework
           一套開發工具




2 of 27
Embedded
           主要目標是提供 Embedded System 一套 GUI 工具
           但,我不能阻止我們
            WEB
            Desktop
           因為
            Weblize 是趨勢




3 of 27
WEB 化
           MadButterfly 是 WEB 化的靈感
            但 WEB browser 是大象,是鯨魚




4 of 27
5 of 27
SVG
           弱水三千,只取一瓢。
           Scalable Vector Graphics
             W3C standard
             XML
             Scalable




6 of 27
繪圖
           為何選 SVG
               所有 GUI 都是一種圖形的呈現




7 of 27
Programming Model




8 of 27
外觀
           把 GUI 的外貌畫出來




9 of 27
行為
            透過 MadSwatter 定義 UI 的行為
            行為 --> 動畫
                儲存在 SVG 檔案裡的 metadata




10 of 27
Drop down list




11 of 27
Button




12 of 27
svg2code
             將「外觀」和「行為」轉換成程式碼




13 of 27
Host App
             link
               svg2code.py 產生的 code
               MadButterfly library




14 of 27
MadBuilder
            以 Firefox 為執行環境
            以 Javascript 為主
            整合
              Inkscape
              MadSwatter
              editor
              build system




15 of 27
Inkscape




16 of 27
MadSwatter
             動畫編輯工具
              完全以 Javascript + SVG + HTML 完成的軟體




17 of 27
MadButterfly
            base on
              C
              cairo
            提供和 SVG 對映的 object tree
              類似 DOM
              容易操作/控制




18 of 27
主要架構




19 of 27
redraw manager
             Determine
               Where to redraw
               Who to redraw
               When to redraw




20 of 27
21 of 27
coord_t
             It knows as group in SVG
               collect a set of shape objects and sub-groups.




22 of 27
Observer Pattern
             subject
             observer




23 of 27
24 of 27
Tiny
             MadButterfly is an tiny/concious engine to
               manage graphics,
               draw graphics, and
               redraw graphics
             It is target to small and embedded device.
               with fixed screen size.




25 of 27
急
               Javascript programmers
               UI designer
               C programmers
               Documentation




26 of 27
最後
            http://www.assembla.com/spaces/MadButterfly
            http://www.assembla.com/spaces/MadSwatter




27 of 27

More Related Content

Similar to MadButterfly Programming Model

Advanced Web Graphics with Canvas
Advanced Web Graphics with CanvasAdvanced Web Graphics with Canvas
Advanced Web Graphics with Canvas
Jason Harwig
 
Web Design Tools
Web Design ToolsWeb Design Tools
Web Design Tools
lillianabe
 
2. Windows Azure
2. Windows Azure2. Windows Azure
2. Windows Azure
GaryYoung
 
SVG For Web Designers (and Developers)
SVG For Web Designers (and Developers) SVG For Web Designers (and Developers)
SVG For Web Designers (and Developers)
Sara Soueidan
 
Base2
Base2Base2
Base2
偉格 高
 
Blueprint & Drafter JS
Blueprint & Drafter JSBlueprint & Drafter JS
Blueprint & Drafter JS
Prateek Saxena
 
Clearspring Widgetsphere
Clearspring WidgetsphereClearspring Widgetsphere
Clearspring Widgetsphere
eraz
 
Internet Explorer 10とマイクロソフトにとってのHTML5 in 岡山
Internet Explorer 10とマイクロソフトにとってのHTML5 in 岡山Internet Explorer 10とマイクロソフトにとってのHTML5 in 岡山
Internet Explorer 10とマイクロソフトにとってのHTML5 in 岡山
Microsoft
 
SWeG: Lossless and Lossy Summarization of Web-Scale Graphs
SWeG: Lossless and Lossy Summarization of Web-Scale Graphs SWeG: Lossless and Lossy Summarization of Web-Scale Graphs
SWeG: Lossless and Lossy Summarization of Web-Scale Graphs
DataMiningLabKAIST
 
Back To The Future
Back To The FutureBack To The Future
Back To The Future
Bill Scott
 
3D Design with OpenSCAD
3D Design with OpenSCAD3D Design with OpenSCAD
3D Design with OpenSCAD
VickyTGAW
 
Conquering Gef Part 1: Effectively creating a well designed graphical editor
Conquering Gef Part 1: Effectively creating a well designed graphical editorConquering Gef Part 1: Effectively creating a well designed graphical editor
Conquering Gef Part 1: Effectively creating a well designed graphical editor
Vineet Sinha
 
Web Design Workshop
Web Design WorkshopWeb Design Workshop
Web Design Workshop
SuseZ
 
Test-proof CSS
Test-proof CSSTest-proof CSS
Test-proof CSS
Vittorio Vittori
 
Wide Open Spaces Using My Sql As A Web Mapping Service Backend
Wide Open Spaces Using My Sql As A Web Mapping Service BackendWide Open Spaces Using My Sql As A Web Mapping Service Backend
Wide Open Spaces Using My Sql As A Web Mapping Service Backend
MySQLConference
 
Úvod do programování 7
Úvod do programování 7Úvod do programování 7
Úvod do programování 7
Karel Minarik
 
Javascript
JavascriptJavascript
Rapid Prototyping With J Query
Rapid Prototyping With J QueryRapid Prototyping With J Query
Rapid Prototyping With J Query
Bootstrap
 
Best Practices - By Lofi Dewanto
Best Practices - By Lofi DewantoBest Practices - By Lofi Dewanto
Best Practices - By Lofi Dewanto
GWTcon
 
Html5
Html5Html5

Similar to MadButterfly Programming Model (20)

Advanced Web Graphics with Canvas
Advanced Web Graphics with CanvasAdvanced Web Graphics with Canvas
Advanced Web Graphics with Canvas
 
Web Design Tools
Web Design ToolsWeb Design Tools
Web Design Tools
 
2. Windows Azure
2. Windows Azure2. Windows Azure
2. Windows Azure
 
SVG For Web Designers (and Developers)
SVG For Web Designers (and Developers) SVG For Web Designers (and Developers)
SVG For Web Designers (and Developers)
 
Base2
Base2Base2
Base2
 
Blueprint & Drafter JS
Blueprint & Drafter JSBlueprint & Drafter JS
Blueprint & Drafter JS
 
Clearspring Widgetsphere
Clearspring WidgetsphereClearspring Widgetsphere
Clearspring Widgetsphere
 
Internet Explorer 10とマイクロソフトにとってのHTML5 in 岡山
Internet Explorer 10とマイクロソフトにとってのHTML5 in 岡山Internet Explorer 10とマイクロソフトにとってのHTML5 in 岡山
Internet Explorer 10とマイクロソフトにとってのHTML5 in 岡山
 
SWeG: Lossless and Lossy Summarization of Web-Scale Graphs
SWeG: Lossless and Lossy Summarization of Web-Scale Graphs SWeG: Lossless and Lossy Summarization of Web-Scale Graphs
SWeG: Lossless and Lossy Summarization of Web-Scale Graphs
 
Back To The Future
Back To The FutureBack To The Future
Back To The Future
 
3D Design with OpenSCAD
3D Design with OpenSCAD3D Design with OpenSCAD
3D Design with OpenSCAD
 
Conquering Gef Part 1: Effectively creating a well designed graphical editor
Conquering Gef Part 1: Effectively creating a well designed graphical editorConquering Gef Part 1: Effectively creating a well designed graphical editor
Conquering Gef Part 1: Effectively creating a well designed graphical editor
 
Web Design Workshop
Web Design WorkshopWeb Design Workshop
Web Design Workshop
 
Test-proof CSS
Test-proof CSSTest-proof CSS
Test-proof CSS
 
Wide Open Spaces Using My Sql As A Web Mapping Service Backend
Wide Open Spaces Using My Sql As A Web Mapping Service BackendWide Open Spaces Using My Sql As A Web Mapping Service Backend
Wide Open Spaces Using My Sql As A Web Mapping Service Backend
 
Úvod do programování 7
Úvod do programování 7Úvod do programování 7
Úvod do programování 7
 
Javascript
JavascriptJavascript
Javascript
 
Rapid Prototyping With J Query
Rapid Prototyping With J QueryRapid Prototyping With J Query
Rapid Prototyping With J Query
 
Best Practices - By Lofi Dewanto
Best Practices - By Lofi DewantoBest Practices - By Lofi Dewanto
Best Practices - By Lofi Dewanto
 
Html5
Html5Html5
Html5
 

Recently uploaded

How to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptxHow to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptx
danishmna97
 
Webinar: Designing a schema for a Data Warehouse
Webinar: Designing a schema for a Data WarehouseWebinar: Designing a schema for a Data Warehouse
Webinar: Designing a schema for a Data Warehouse
Federico Razzoli
 
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy SurveyTrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc
 
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
Edge AI and Vision Alliance
 
Best 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERPBest 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERP
Pixlogix Infotech
 
AI 101: An Introduction to the Basics and Impact of Artificial Intelligence
AI 101: An Introduction to the Basics and Impact of Artificial IntelligenceAI 101: An Introduction to the Basics and Impact of Artificial Intelligence
AI 101: An Introduction to the Basics and Impact of Artificial Intelligence
IndexBug
 
Presentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of GermanyPresentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of Germany
innovationoecd
 
WeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation TechniquesWeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation Techniques
Postman
 
Digital Marketing Trends in 2024 | Guide for Staying Ahead
Digital Marketing Trends in 2024 | Guide for Staying AheadDigital Marketing Trends in 2024 | Guide for Staying Ahead
Digital Marketing Trends in 2024 | Guide for Staying Ahead
Wask
 
Ocean lotus Threat actors project by John Sitima 2024 (1).pptx
Ocean lotus Threat actors project by John Sitima 2024 (1).pptxOcean lotus Threat actors project by John Sitima 2024 (1).pptx
Ocean lotus Threat actors project by John Sitima 2024 (1).pptx
SitimaJohn
 
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success StoryDriving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Safe Software
 
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Jeffrey Haguewood
 
Recommendation System using RAG Architecture
Recommendation System using RAG ArchitectureRecommendation System using RAG Architecture
Recommendation System using RAG Architecture
fredae14
 
Introduction of Cybersecurity with OSS at Code Europe 2024
Introduction of Cybersecurity with OSS  at Code Europe 2024Introduction of Cybersecurity with OSS  at Code Europe 2024
Introduction of Cybersecurity with OSS at Code Europe 2024
Hiroshi SHIBATA
 
Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)
Jakub Marek
 
June Patch Tuesday
June Patch TuesdayJune Patch Tuesday
June Patch Tuesday
Ivanti
 
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdfHow to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
Chart Kalyan
 
Programming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup SlidesProgramming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup Slides
Zilliz
 
UI5 Controls simplified - UI5con2024 presentation
UI5 Controls simplified - UI5con2024 presentationUI5 Controls simplified - UI5con2024 presentation
UI5 Controls simplified - UI5con2024 presentation
Wouter Lemaire
 
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdfUnlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Malak Abu Hammad
 

Recently uploaded (20)

How to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptxHow to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptx
 
Webinar: Designing a schema for a Data Warehouse
Webinar: Designing a schema for a Data WarehouseWebinar: Designing a schema for a Data Warehouse
Webinar: Designing a schema for a Data Warehouse
 
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy SurveyTrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy Survey
 
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
 
Best 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERPBest 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERP
 
AI 101: An Introduction to the Basics and Impact of Artificial Intelligence
AI 101: An Introduction to the Basics and Impact of Artificial IntelligenceAI 101: An Introduction to the Basics and Impact of Artificial Intelligence
AI 101: An Introduction to the Basics and Impact of Artificial Intelligence
 
Presentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of GermanyPresentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of Germany
 
WeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation TechniquesWeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation Techniques
 
Digital Marketing Trends in 2024 | Guide for Staying Ahead
Digital Marketing Trends in 2024 | Guide for Staying AheadDigital Marketing Trends in 2024 | Guide for Staying Ahead
Digital Marketing Trends in 2024 | Guide for Staying Ahead
 
Ocean lotus Threat actors project by John Sitima 2024 (1).pptx
Ocean lotus Threat actors project by John Sitima 2024 (1).pptxOcean lotus Threat actors project by John Sitima 2024 (1).pptx
Ocean lotus Threat actors project by John Sitima 2024 (1).pptx
 
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success StoryDriving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success Story
 
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
 
Recommendation System using RAG Architecture
Recommendation System using RAG ArchitectureRecommendation System using RAG Architecture
Recommendation System using RAG Architecture
 
Introduction of Cybersecurity with OSS at Code Europe 2024
Introduction of Cybersecurity with OSS  at Code Europe 2024Introduction of Cybersecurity with OSS  at Code Europe 2024
Introduction of Cybersecurity with OSS at Code Europe 2024
 
Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)
 
June Patch Tuesday
June Patch TuesdayJune Patch Tuesday
June Patch Tuesday
 
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdfHow to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
 
Programming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup SlidesProgramming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup Slides
 
UI5 Controls simplified - UI5con2024 presentation
UI5 Controls simplified - UI5con2024 presentationUI5 Controls simplified - UI5con2024 presentation
UI5 Controls simplified - UI5con2024 presentation
 
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdfUnlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
 

MadButterfly Programming Model

  • 1. MadButterfly 的架構 Thinker <thinker@branda.to> 1 of 27
  • 2. What is? 一種開發模式 一種 GUI framework 一套開發工具 2 of 27
  • 3. Embedded 主要目標是提供 Embedded System 一套 GUI 工具 但,我不能阻止我們 WEB Desktop 因為 Weblize 是趨勢 3 of 27
  • 4. WEB 化 MadButterfly 是 WEB 化的靈感 但 WEB browser 是大象,是鯨魚 4 of 27
  • 6. SVG 弱水三千,只取一瓢。 Scalable Vector Graphics W3C standard XML Scalable 6 of 27
  • 7. 繪圖 為何選 SVG 所有 GUI 都是一種圖形的呈現 7 of 27
  • 9. 外觀 把 GUI 的外貌畫出來 9 of 27
  • 10. 行為 透過 MadSwatter 定義 UI 的行為 行為 --> 動畫 儲存在 SVG 檔案裡的 metadata 10 of 27
  • 13. svg2code 將「外觀」和「行為」轉換成程式碼 13 of 27
  • 14. Host App link svg2code.py 產生的 code MadButterfly library 14 of 27
  • 15. MadBuilder 以 Firefox 為執行環境 以 Javascript 為主 整合 Inkscape MadSwatter editor build system 15 of 27
  • 17. MadSwatter 動畫編輯工具 完全以 Javascript + SVG + HTML 完成的軟體 17 of 27
  • 18. MadButterfly base on C cairo 提供和 SVG 對映的 object tree 類似 DOM 容易操作/控制 18 of 27
  • 20. redraw manager Determine Where to redraw Who to redraw When to redraw 20 of 27
  • 22. coord_t It knows as group in SVG collect a set of shape objects and sub-groups. 22 of 27
  • 23. Observer Pattern subject observer 23 of 27
  • 25. Tiny MadButterfly is an tiny/concious engine to manage graphics, draw graphics, and redraw graphics It is target to small and embedded device. with fixed screen size. 25 of 27
  • 26. Javascript programmers UI designer C programmers Documentation 26 of 27
  • 27. 最後 http://www.assembla.com/spaces/MadButterfly http://www.assembla.com/spaces/MadSwatter 27 of 27