手把手教你寫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,128 views

Published on

Published in: Technology
1 Comment
5 Likes
Statistics
Notes
No Downloads
Views
Total views
16,128
On SlideShare
0
From Embeds
0
Number of Embeds
1,240
Actions
Shares
0
Downloads
152
Comments
1
Likes
5
Embeds 0
No embeds

No notes for slide

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

×