step by step to write a gnome-shell extension
- 1. 手把手教你寫 Pre GNOME shell view 擴充套件 tools, hollyladd, by-nc-nd
- 3. 簡報作者 ● Yuren Ju <yurenju@gmail.com> ● Blog: Yuren's Info Area ● 社群： Hacking Thursday
- 5. gnome-shell include... ● GNOME3 user experience desktop ● Shell Tookit (similar GTK+) ● More...
- 7. Important! You can write gnome-shell extension with Javascript!
- 8. How Gnome-shell core C Launguage GObject Introspection <interface> Gnome-shell widgets Javascript
- 9. How? Gobject-based library Gnome-shell core Gobject Introspection (GI) overview workspace calendar ... extension gnome-shell widgets
- 10. GObject Introspection JS Java Python Perl Ruby PHP? GI GTK Clutter VTE notify GStreamer Native C API
- 11. Getting started! LiveUSB http://gnome3.org/tryit.html $ gnome-shell-extension-tool --create-extension
- 12. Create extension
- 13. Restart gnome-shell alt+F2 and press "r"
- 14. Default extension Click panel Show Hello world, and destroy after 5sec
- 15. 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); }
- 16. 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
- 17. Global (2/2) ● Properties ● stage ● screen-width/screen-height ● window-group ● settings ● datadir ● userdatadir
- 18. Looking glass alt+F2 and press "lg"
- 19. 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
- 20. Main
- 21. Main ● Main.panel ● button ● _leftBox, _centerBox, _rightBox ● _dateMenu ● ... ● Main.overview ● Main.runDialog ● Main.uiGroup ● ...
- 22. 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); }
- 23. 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()
- 24. 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)
- 26. _leftBox _centerBox _rightBox
- 28. Step 3: Handle Click
- 29. Tweener ● transition ● linear, easeInQuad, … (reference python- clutter) ● onComplete/onCompleteScope ● scale_x, scale_y, opacity
- 30. Animation Counting down Shotting Zoom
- 31. Step 4: Animation (1/3)
- 32. Step 4: Animation (2/3)
- 33. Step 4: Animation (3/3)
- 34. Step 5: Save screenshot
- 36. Big issue!
- 37. No document sad... Sad Zeb, by-nc,sa
- 38. Reference ● gnome-shell source code ● mutter source code ● http://git.gnome.org/browse/ ● ZZzzzz
- 39. We need you!
- 40. Q&A Slides Download http://j.mp/gs-ext-slides