Successfully reported this slideshow.

step by step to write a gnome-shell extension

8

Share

Loading in …3
×
1 of 40
1 of 40

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

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: Yuren's 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 Launguage GObject Introspection <interface> Gnome-shell widgets Javascript
  8. 8. How? Gobject-based library Gnome-shell core Gobject Introspection (GI) overview workspace calendar ... extension gnome-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 message const 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 here function 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 message const 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 here function 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 message const 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 here function 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) ● Don's 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. Animation Counting 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 Code https://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 Download http://j.mp/gs-ext-slides

×