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.

step by step to write a gnome-shell extension

16,893 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

×