Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
手把手教你寫Pre GNOME shell   view        擴充套件                  tools, hollyladd, by-nc-nd
即時討論https://convore.com/gnome-taiwan/gnome-shell/or 短網址http://j.mp/gs-ext
簡報作者●   Yuren Ju <yurenju@gmail.com>●   Blog: Yurens Info Area●   社群: Hacking Thursday
gnome-shell include...●   GNOME3 user experience desktop●   Shell Tookit (similar GTK+)●   More...
Web Browser extension
Important!You can write gnome-shell extension with                       Javascript!
How Gnome-shell core       C LaunguageGObject Introspection   <interface>Gnome-shell widgets      Javascript
How? Gobject-based library           Gnome-shell core               Gobject Introspection (GI)overview      workspace    c...
GObject Introspection JS     Java     Python      Perl     Ruby   PHP?                        GI GTK   Clutter    VTE     ...
Getting started!                                            LiveUSB                           http://gnome3.org/tryit.html...
Create extension
Restart gnome-shell    alt+F2 and press "r"
Default extension     Click panel  Show Hello world, and destroy after 5sec
Default extension code// Sample extension code, makes clicking on the panel show a messageconst St = imports.gi.St;const M...
Global (1/2)●   Monitor                     ●   Pointer:    ●   get_monitors()              ●   get_pointer()    ●   get_p...
Global (2/2)●   Properties    ●   stage    ●   screen-width/screen-height    ●   window-group    ●   settings    ●   datad...
Looking glass alt+F2 and press "lg"
Default extension code// Sample extension code, makes clicking on the panel show a messageconst St = imports.gi.St;const M...
Main
Main●   Main.panel    ●     button    ●     _leftBox, _centerBox, _rightBox    ●     _dateMenu    ●     ...●   Main.overvi...
Default extension code// Sample extension code, makes clicking on the panel show a messageconst St = imports.gi.St;const M...
Try it●   Main.panel._dateMenu.menu.actor.set_opacity(100)●   Main.panel._dateMenu.actor.set_scale(1.5, 1.5)●   Main.panel...
Example extension –fancy screenshot tool    http://www.youtube.com/watch?v=epKssSQpfLQ$ sudo zypper refresh && sudo zypper...
Step 1: PanelButton
_leftBox   _centerBox   _rightBox
Step 2: PopupMenu
Step 3: Handle Click
Tweener●   transition    ●   linear, easeInQuad, … (reference python-        clutter)●   onComplete/onCompleteScope●   sca...
AnimationCounting down  Shotting    Zoom
Step 4: Animation (1/3)
Step 4: Animation (2/3)
Step 4: Animation (3/3)
Step 5: Save screenshot
Source Codehttps://gist.github.com/9c29efaa9b00a75db81f
Big issue!
No document    sad...              Sad Zeb, by-nc,sa
Reference●   gnome-shell source code●   mutter source code●   http://git.gnome.org/browse/●   ZZzzzz
We need you!
Q&A    Slides Downloadhttp://j.mp/gs-ext-slides
step by step to write a gnome-shell extension
Upcoming SlideShare
Loading in …5
×

step by step to write a gnome-shell extension

16,798 views

Published on

Published in: Technology

step by step to write a gnome-shell extension

  1. 1. 手把手教你寫Pre GNOME shell view 擴充套件 tools, hollyladd, by-nc-nd
  2. 2. 即時討論https://convore.com/gnome-taiwan/gnome-shell/or 短網址http://j.mp/gs-ext
  3. 3. 簡報作者● Yuren Ju <yurenju@gmail.com>● Blog: Yurens Info Area● 社群: Hacking Thursday
  4. 4. gnome-shell include...● GNOME3 user experience desktop● Shell Tookit (similar GTK+)● More...
  5. 5. Web Browser extension
  6. 6. Important!You can write gnome-shell extension with Javascript!
  7. 7. How Gnome-shell core C LaunguageGObject Introspection <interface>Gnome-shell widgets Javascript
  8. 8. How? Gobject-based library Gnome-shell core Gobject Introspection (GI)overview workspace calendar ... extensiongnome-shell widgets
  9. 9. GObject Introspection JS Java Python Perl Ruby PHP? GI GTK Clutter VTE notify GStreamer Native C API
  10. 10. Getting started! LiveUSB http://gnome3.org/tryit.html$ gnome-shell-extension-tool --create-extension
  11. 11. Create extension
  12. 12. Restart gnome-shell alt+F2 and press "r"
  13. 13. Default extension Click panel Show Hello world, and destroy after 5sec
  14. 14. Default extension code// Sample extension code, makes clicking on the panel show a messageconst St = imports.gi.St;const Mainloop = imports.mainloop;const Main = imports.ui.main;function _showHello() { let text = new St.Label({ style_class: helloworld-label, text: "Hello, world!" }); let monitor = global.get_primary_monitor(); global.stage.add_actor(text); text.set_position(Math.floor (monitor.width / 2 - text.width / 2), Math.floor(monitor.height / 2 - text.height / 2)); Mainloop.timeout_add(3000, function () { text.destroy(); });}// Put your extension initialization code herefunction main() { Main.panel.actor.reactive = true; Main.panel.actor.connect(button-release-event, _showHello);}
  15. 15. Global (1/2)● Monitor ● Pointer: ● get_monitors() ● get_pointer() ● get_primary_monito ● Window/Screen: r() ● get_gdk_screen() ● get_primary_monito r_index() ● get_screen() ● get_focus_monitor() ● get_window_actors() return MetaRectangle
  16. 16. Global (2/2)● Properties ● stage ● screen-width/screen-height ● window-group ● settings ● datadir ● userdatadir
  17. 17. Looking glass alt+F2 and press "lg"
  18. 18. Default extension code// Sample extension code, makes clicking on the panel show a messageconst St = imports.gi.St;const Mainloop = imports.mainloop;const Main = imports.ui.main;function _showHello() { let text = new St.Label({ style_class: helloworld-label, text: "Hello, world!" }); let monitor = global.get_primary_monitor(); global.stage.add_actor(text); text.set_position(Math.floor (monitor.width / 2 - text.width / 2), Math.floor(monitor.height / 2 - text.height / 2)); Mainloop.timeout_add(3000, function () { text.destroy(); });}// Put your extension initialization code herefunction main() { Main.panel.actor.reactive = true; Main.panel.actor.connect(button-release-event, _showHello);} http://library.gnome.org/devel/glib/unstable/glib-The-Main-Event-Loop.html
  19. 19. Main
  20. 20. Main● Main.panel ● button ● _leftBox, _centerBox, _rightBox ● _dateMenu ● ...● Main.overview● Main.runDialog● Main.uiGroup● ...
  21. 21. Default extension code// Sample extension code, makes clicking on the panel show a messageconst St = imports.gi.St;const Mainloop = imports.mainloop;const Main = imports.ui.main;function _showHello() { let text = new St.Label({ style_class: helloworld-label, text: "Hello, world!" }); let monitor = global.get_primary_monitor(); global.stage.add_actor(text); text.set_position(Math.floor (monitor.width / 2 - text.width / 2), Math.floor(monitor.height / 2 - text.height / 2)); Mainloop.timeout_add(3000, function () { text.destroy(); });}// Put your extension initialization code herefunction main() { Main.panel.actor.reactive = true; Main.panel.actor.connect(button-release-event, _showHello);}
  22. 22. Try it● Main.panel._dateMenu.menu.actor.set_opacity(100)● Main.panel._dateMenu.actor.set_scale(1.5, 1.5)● Main.panel._dateMenu.menu.actor.set_z_rotation_from_ gravity(45.0, Clutter.Gravity.CENTER)● Dons you like status-menu? ● Main.panel._statusmenu.actor.hide()
  23. 23. Example extension –fancy screenshot tool http://www.youtube.com/watch?v=epKssSQpfLQ$ sudo zypper refresh && sudo zypper install ImageMagick(Because GdkPixbuf.savev function is broken)
  24. 24. Step 1: PanelButton
  25. 25. _leftBox _centerBox _rightBox
  26. 26. Step 2: PopupMenu
  27. 27. Step 3: Handle Click
  28. 28. Tweener● transition ● linear, easeInQuad, … (reference python- clutter)● onComplete/onCompleteScope● scale_x, scale_y, opacity
  29. 29. AnimationCounting down Shotting Zoom
  30. 30. Step 4: Animation (1/3)
  31. 31. Step 4: Animation (2/3)
  32. 32. Step 4: Animation (3/3)
  33. 33. Step 5: Save screenshot
  34. 34. Source Codehttps://gist.github.com/9c29efaa9b00a75db81f
  35. 35. Big issue!
  36. 36. No document sad... Sad Zeb, by-nc,sa
  37. 37. Reference● gnome-shell source code● mutter source code● http://git.gnome.org/browse/● ZZzzzz
  38. 38. We need you!
  39. 39. Q&A Slides Downloadhttp://j.mp/gs-ext-slides

×