SlideShare a Scribd company logo
1 of 40
Download to read offline
手把手教你寫
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: Yuren's 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 Launguage


GObject Introspection   <interface>


Gnome-shell widgets      Javascript
How?

 Gobject-based library           Gnome-shell core

               Gobject Introspection (GI)

overview      workspace    calendar    ...   extension

gnome-shell widgets
GObject Introspection



 JS     Java     Python      Perl     Ruby   PHP?

                        GI
 GTK   Clutter    VTE        notify    GStreamer

                 Native C API
Getting started!

                                            LiveUSB
                           http://gnome3.org/tryit.html




$ gnome-shell-extension-tool --create-extension
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 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);
}
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
Global (2/2)
●   Properties
    ●   stage
    ●   screen-width/screen-height
    ●   window-group
    ●   settings
    ●   datadir
    ●   userdatadir
Looking glass




 alt+F2 and press "lg"
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
Main
Main
●   Main.panel
    ●     button
    ●     _leftBox, _centerBox, _rightBox
    ●     _dateMenu
    ●     ...
●   Main.overview
●   Main.runDialog
●   Main.uiGroup
●   ...
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);
}
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()
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)
Step 1: PanelButton
_leftBox   _centerBox   _rightBox
Step 2: PopupMenu
Step 3: Handle Click
Tweener
●   transition
    ●   linear, easeInQuad, … (reference python-
        clutter)
●   onComplete/onCompleteScope
●   scale_x, scale_y, opacity
Animation

Counting down


  Shotting


    Zoom
Step 4: Animation (1/3)
Step 4: Animation (2/3)
Step 4: Animation (3/3)
Step 5: Save screenshot
Source Code
https://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 Download
http://j.mp/gs-ext-slides

More Related Content

Similar to step by step to write a gnome-shell extension

Quick Intro to Android Development
Quick Intro to Android DevelopmentQuick Intro to Android Development
Quick Intro to Android Development
Jussi Pohjolainen
 
Android Best Practices
Android Best PracticesAndroid Best Practices
Android Best Practices
Yekmer Simsek
 
Intro to Computer Graphics.ppt
Intro to Computer Graphics.pptIntro to Computer Graphics.ppt
Intro to Computer Graphics.ppt
adil104135
 

Similar to step by step to write a gnome-shell extension (20)

Introduction to Griffon
Introduction to GriffonIntroduction to Griffon
Introduction to Griffon
 
Quick Intro to Android Development
Quick Intro to Android DevelopmentQuick Intro to Android Development
Quick Intro to Android Development
 
Android Best Practices
Android Best PracticesAndroid Best Practices
Android Best Practices
 
Spin Up Desktop Apps with Electron.js
Spin Up Desktop Apps with Electron.jsSpin Up Desktop Apps with Electron.js
Spin Up Desktop Apps with Electron.js
 
opengl.ppt
opengl.pptopengl.ppt
opengl.ppt
 
Intro to Computer Graphics.ppt
Intro to Computer Graphics.pptIntro to Computer Graphics.ppt
Intro to Computer Graphics.ppt
 
Qt Workshop
Qt WorkshopQt Workshop
Qt Workshop
 
Magento 2 Seminar - Anton Kril - Magento 2 Summary
Magento 2 Seminar - Anton Kril - Magento 2 SummaryMagento 2 Seminar - Anton Kril - Magento 2 Summary
Magento 2 Seminar - Anton Kril - Magento 2 Summary
 
Hack2the future Microsoft .NET Gadgeteer
Hack2the future Microsoft .NET GadgeteerHack2the future Microsoft .NET Gadgeteer
Hack2the future Microsoft .NET Gadgeteer
 
Linux mouse
Linux mouseLinux mouse
Linux mouse
 
The Ring programming language version 1.8 book - Part 12 of 202
The Ring programming language version 1.8 book - Part 12 of 202The Ring programming language version 1.8 book - Part 12 of 202
The Ring programming language version 1.8 book - Part 12 of 202
 
Unity3D Programming
Unity3D ProgrammingUnity3D Programming
Unity3D Programming
 
CodePool Liverpool 2013 - Microsoft Gadgeteer Presentation
CodePool Liverpool 2013 - Microsoft Gadgeteer PresentationCodePool Liverpool 2013 - Microsoft Gadgeteer Presentation
CodePool Liverpool 2013 - Microsoft Gadgeteer Presentation
 
Extending CMS Made Simple
Extending CMS Made SimpleExtending CMS Made Simple
Extending CMS Made Simple
 
The Ring programming language version 1.5.1 book - Part 67 of 180
The Ring programming language version 1.5.1 book - Part 67 of 180The Ring programming language version 1.5.1 book - Part 67 of 180
The Ring programming language version 1.5.1 book - Part 67 of 180
 
Implementações paralelas
Implementações paralelasImplementações paralelas
Implementações paralelas
 
LISA QooxdooTutorial Slides
LISA QooxdooTutorial SlidesLISA QooxdooTutorial Slides
LISA QooxdooTutorial Slides
 
Swingpre 150616004959-lva1-app6892
Swingpre 150616004959-lva1-app6892Swingpre 150616004959-lva1-app6892
Swingpre 150616004959-lva1-app6892
 
Swing and AWT in java
Swing and AWT in javaSwing and AWT in java
Swing and AWT in java
 
Magento 2 Development
Magento 2 DevelopmentMagento 2 Development
Magento 2 Development
 

More from Yuren Ju (8)

捷克之旅
捷克之旅捷克之旅
捷克之旅
 
Ksdg customize-your-firefoxos
Ksdg customize-your-firefoxosKsdg customize-your-firefoxos
Ksdg customize-your-firefoxos
 
Python and GObject Introspection
Python and GObject IntrospectionPython and GObject Introspection
Python and GObject Introspection
 
GNOME3 延伸套件教學
GNOME3 延伸套件教學GNOME3 延伸套件教學
GNOME3 延伸套件教學
 
Ibus pinyin
Ibus pinyinIbus pinyin
Ibus pinyin
 
Ibus pinyin
Ibus pinyinIbus pinyin
Ibus pinyin
 
Javascript in linux desktop (ICOS ver.)
Javascript in linux desktop (ICOS ver.)Javascript in linux desktop (ICOS ver.)
Javascript in linux desktop (ICOS ver.)
 
Javascript in Linux Desktop
Javascript in Linux DesktopJavascript in Linux Desktop
Javascript in Linux Desktop
 

Recently uploaded

Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
vu2urc
 

Recently uploaded (20)

What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
 
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 

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
  • 4.
  • 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
  • 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
  • 34. Step 5: Save screenshot
  • 37. No document sad... Sad Zeb, by-nc,sa
  • 38. Reference ● gnome-shell source code ● mutter source code ● http://git.gnome.org/browse/ ● ZZzzzz
  • 40. Q&A Slides Download http://j.mp/gs-ext-slides