step by step to write a gnome-shell extension

  • 13,982 views
Uploaded on

 

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • thank you
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
13,982
On Slideshare
0
From Embeds
0
Number of Embeds
8

Actions

Shares
Downloads
143
Comments
1
Likes
3

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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