Your SlideShare is downloading. ×
  • Like
MadButterfly Programming Model
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

MadButterfly Programming Model

  • 1,092 views
Published

介紹 MadButterfly 的 programming Model

介紹 MadButterfly 的 programming Model

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,092
On SlideShare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
34
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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
  • 5. 5 of 27
  • 6. SVG 弱水三千,只取一瓢。 Scalable Vector Graphics W3C standard XML Scalable 6 of 27
  • 7. 繪圖 為何選 SVG 所有 GUI 都是一種圖形的呈現 7 of 27
  • 8. Programming Model 8 of 27
  • 9. 外觀 把 GUI 的外貌畫出來 9 of 27
  • 10. 行為 透過 MadSwatter 定義 UI 的行為 行為 --> 動畫 儲存在 SVG 檔案裡的 metadata 10 of 27
  • 11. Drop down list 11 of 27
  • 12. Button 12 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
  • 16. Inkscape 16 of 27
  • 17. MadSwatter 動畫編輯工具 完全以 Javascript + SVG + HTML 完成的軟體 17 of 27
  • 18. MadButterfly base on C cairo 提供和 SVG 對映的 object tree 類似 DOM 容易操作/控制 18 of 27
  • 19. 主要架構 19 of 27
  • 20. redraw manager Determine Where to redraw Who to redraw When to redraw 20 of 27
  • 21. 21 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
  • 24. 24 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