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

What's hot

Computer hardware-peripherals compress
Computer hardware-peripherals compressComputer hardware-peripherals compress
Computer hardware-peripherals compressKefyalew Temesgen
 
Microsoft Office Introduction
Microsoft Office IntroductionMicrosoft Office Introduction
Microsoft Office IntroductionAnitha Rao
 
Computer Lecture 1
Computer  Lecture 1Computer  Lecture 1
Computer Lecture 1Moiz Barry
 
C Programming Language Detailed Notes with Solved program
 C Programming Language Detailed Notes with Solved program C Programming Language Detailed Notes with Solved program
C Programming Language Detailed Notes with Solved programNikhilGhodse
 
Flowchart - Introduction and Designing Tools
Flowchart - Introduction and Designing ToolsFlowchart - Introduction and Designing Tools
Flowchart - Introduction and Designing ToolsJawad Khan
 
itft-Decision making and branching in java
itft-Decision making and branching in javaitft-Decision making and branching in java
itft-Decision making and branching in javaAtul Sehdev
 
ASP.Net Technologies Part-1
ASP.Net Technologies Part-1ASP.Net Technologies Part-1
ASP.Net Technologies Part-1Vasudev Sharma
 
Ch 3 event driven programming
Ch 3 event driven programmingCh 3 event driven programming
Ch 3 event driven programmingChaffey College
 
Flowchart symbols meaning explained
Flowchart symbols meaning explainedFlowchart symbols meaning explained
Flowchart symbols meaning explainedEliza Wright
 

What's hot (20)

Computer hardware-peripherals compress
Computer hardware-peripherals compressComputer hardware-peripherals compress
Computer hardware-peripherals compress
 
Introduction to computers by abdul rahaman
Introduction to computers by abdul rahamanIntroduction to computers by abdul rahaman
Introduction to computers by abdul rahaman
 
Computer Hardware
Computer HardwareComputer Hardware
Computer Hardware
 
STRATEGIC INTERVENTION MATERIAL
STRATEGIC INTERVENTION MATERIALSTRATEGIC INTERVENTION MATERIAL
STRATEGIC INTERVENTION MATERIAL
 
Microsoft Office Introduction
Microsoft Office IntroductionMicrosoft Office Introduction
Microsoft Office Introduction
 
Php Tutorials for Beginners
Php Tutorials for BeginnersPhp Tutorials for Beginners
Php Tutorials for Beginners
 
Computer Lecture 1
Computer  Lecture 1Computer  Lecture 1
Computer Lecture 1
 
Jquery library
Jquery libraryJquery library
Jquery library
 
Files in php
Files in phpFiles in php
Files in php
 
Smartphone, Tablets and Mobile Device Repair Technique - IT Support Associate...
Smartphone, Tablets and Mobile Device Repair Technique - IT Support Associate...Smartphone, Tablets and Mobile Device Repair Technique - IT Support Associate...
Smartphone, Tablets and Mobile Device Repair Technique - IT Support Associate...
 
System unit
System unitSystem unit
System unit
 
C Programming Language Detailed Notes with Solved program
 C Programming Language Detailed Notes with Solved program C Programming Language Detailed Notes with Solved program
C Programming Language Detailed Notes with Solved program
 
Database programming
Database programmingDatabase programming
Database programming
 
Flowchart - Introduction and Designing Tools
Flowchart - Introduction and Designing ToolsFlowchart - Introduction and Designing Tools
Flowchart - Introduction and Designing Tools
 
itft-Decision making and branching in java
itft-Decision making and branching in javaitft-Decision making and branching in java
itft-Decision making and branching in java
 
PHP - Introduction to PHP Forms
PHP - Introduction to PHP FormsPHP - Introduction to PHP Forms
PHP - Introduction to PHP Forms
 
ASP.Net Technologies Part-1
ASP.Net Technologies Part-1ASP.Net Technologies Part-1
ASP.Net Technologies Part-1
 
Visual Basic 6.0
Visual Basic 6.0Visual Basic 6.0
Visual Basic 6.0
 
Ch 3 event driven programming
Ch 3 event driven programmingCh 3 event driven programming
Ch 3 event driven programming
 
Flowchart symbols meaning explained
Flowchart symbols meaning explainedFlowchart symbols meaning explained
Flowchart symbols meaning explained
 

Viewers also liked

Viewers also liked (8)

Python GTK (Hacking Camp)
Python GTK (Hacking Camp)Python GTK (Hacking Camp)
Python GTK (Hacking Camp)
 
Introduction to py gtk
Introduction to py gtkIntroduction to py gtk
Introduction to py gtk
 
Python-GTK
Python-GTKPython-GTK
Python-GTK
 
G T K+ 101
G T K+ 101G T K+ 101
G T K+ 101
 
Stem is JavaScript OS
Stem is JavaScript OSStem is JavaScript OS
Stem is JavaScript OS
 
QML + Node.js
QML + Node.jsQML + Node.js
QML + Node.js
 
我編譯故我在:誰說 Node.js 程式不能編成 binary
我編譯故我在:誰說 Node.js 程式不能編成 binary我編譯故我在:誰說 Node.js 程式不能編成 binary
我編譯故我在:誰說 Node.js 程式不能編成 binary
 
Node.js 進攻桌面開發
Node.js 進攻桌面開發Node.js 進攻桌面開發
Node.js 進攻桌面開發
 

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

Introduction to Griffon
Introduction to GriffonIntroduction to Griffon
Introduction to GriffonJames Williams
 
Quick Intro to Android Development
Quick Intro to Android DevelopmentQuick Intro to Android Development
Quick Intro to Android DevelopmentJussi Pohjolainen
 
Android Best Practices
Android Best PracticesAndroid Best Practices
Android Best PracticesYekmer Simsek
 
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.jsSteve Godin
 
Intro to Computer Graphics.ppt
Intro to Computer Graphics.pptIntro to Computer Graphics.ppt
Intro to Computer Graphics.pptadil104135
 
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 SummaryYireo
 
Hack2the future Microsoft .NET Gadgeteer
Hack2the future Microsoft .NET GadgeteerHack2the future Microsoft .NET Gadgeteer
Hack2the future Microsoft .NET GadgeteerLee Stott
 
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 202Mahmoud Samir Fayed
 
CodePool Liverpool 2013 - Microsoft Gadgeteer Presentation
CodePool Liverpool 2013 - Microsoft Gadgeteer PresentationCodePool Liverpool 2013 - Microsoft Gadgeteer Presentation
CodePool Liverpool 2013 - Microsoft Gadgeteer PresentationLee Stott
 
Extending CMS Made Simple
Extending CMS Made SimpleExtending CMS Made Simple
Extending CMS Made Simplecmsmssjg
 
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 180Mahmoud Samir Fayed
 
Implementações paralelas
Implementações paralelasImplementações paralelas
Implementações paralelasWillian Molinari
 
LISA QooxdooTutorial Slides
LISA QooxdooTutorial SlidesLISA QooxdooTutorial Slides
LISA QooxdooTutorial SlidesTobias Oetiker
 
Swingpre 150616004959-lva1-app6892
Swingpre 150616004959-lva1-app6892Swingpre 150616004959-lva1-app6892
Swingpre 150616004959-lva1-app6892renuka gavli
 
Swing and AWT in java
Swing and AWT in javaSwing and AWT in java
Swing and AWT in javaAdil Mehmoood
 
Magento 2 Development
Magento 2 DevelopmentMagento 2 Development
Magento 2 DevelopmentDuke Dao
 

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

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

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

Artificial intelligence in the post-deep learning era
Artificial intelligence in the post-deep learning eraArtificial intelligence in the post-deep learning era
Artificial intelligence in the post-deep learning eraDeakin University
 
Build your next Gen AI Breakthrough - April 2024
Build your next Gen AI Breakthrough - April 2024Build your next Gen AI Breakthrough - April 2024
Build your next Gen AI Breakthrough - April 2024Neo4j
 
Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024Enterprise Knowledge
 
Understanding the Laravel MVC Architecture
Understanding the Laravel MVC ArchitectureUnderstanding the Laravel MVC Architecture
Understanding the Laravel MVC ArchitecturePixlogix Infotech
 
My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024The Digital Insurer
 
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...shyamraj55
 
Scanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsScanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsRizwan Syed
 
APIForce Zurich 5 April Automation LPDG
APIForce Zurich 5 April  Automation LPDGAPIForce Zurich 5 April  Automation LPDG
APIForce Zurich 5 April Automation LPDGMarianaLemus7
 
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Patryk Bandurski
 
Key Features Of Token Development (1).pptx
Key  Features Of Token  Development (1).pptxKey  Features Of Token  Development (1).pptx
Key Features Of Token Development (1).pptxLBM Solutions
 
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024BookNet Canada
 
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024BookNet Canada
 
New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024BookNet Canada
 
Unleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubUnleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubKalema Edgar
 
Human Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsHuman Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsMark Billinghurst
 
Unblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen FramesUnblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen FramesSinan KOZAK
 
Pigging Solutions Piggable Sweeping Elbows
Pigging Solutions Piggable Sweeping ElbowsPigging Solutions Piggable Sweeping Elbows
Pigging Solutions Piggable Sweeping ElbowsPigging Solutions
 

Recently uploaded (20)

Vulnerability_Management_GRC_by Sohang Sengupta.pptx
Vulnerability_Management_GRC_by Sohang Sengupta.pptxVulnerability_Management_GRC_by Sohang Sengupta.pptx
Vulnerability_Management_GRC_by Sohang Sengupta.pptx
 
Artificial intelligence in the post-deep learning era
Artificial intelligence in the post-deep learning eraArtificial intelligence in the post-deep learning era
Artificial intelligence in the post-deep learning era
 
Build your next Gen AI Breakthrough - April 2024
Build your next Gen AI Breakthrough - April 2024Build your next Gen AI Breakthrough - April 2024
Build your next Gen AI Breakthrough - April 2024
 
The transition to renewables in India.pdf
The transition to renewables in India.pdfThe transition to renewables in India.pdf
The transition to renewables in India.pdf
 
Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024
 
Understanding the Laravel MVC Architecture
Understanding the Laravel MVC ArchitectureUnderstanding the Laravel MVC Architecture
Understanding the Laravel MVC Architecture
 
My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024
 
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
 
Scanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsScanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL Certs
 
APIForce Zurich 5 April Automation LPDG
APIForce Zurich 5 April  Automation LPDGAPIForce Zurich 5 April  Automation LPDG
APIForce Zurich 5 April Automation LPDG
 
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
 
Key Features Of Token Development (1).pptx
Key  Features Of Token  Development (1).pptxKey  Features Of Token  Development (1).pptx
Key Features Of Token Development (1).pptx
 
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
 
Hot Sexy call girls in Panjabi Bagh 🔝 9953056974 🔝 Delhi escort Service
Hot Sexy call girls in Panjabi Bagh 🔝 9953056974 🔝 Delhi escort ServiceHot Sexy call girls in Panjabi Bagh 🔝 9953056974 🔝 Delhi escort Service
Hot Sexy call girls in Panjabi Bagh 🔝 9953056974 🔝 Delhi escort Service
 
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
 
New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
 
Unleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubUnleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding Club
 
Human Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsHuman Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR Systems
 
Unblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen FramesUnblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen Frames
 
Pigging Solutions Piggable Sweeping Elbows
Pigging Solutions Piggable Sweeping ElbowsPigging Solutions Piggable Sweeping Elbows
Pigging Solutions Piggable Sweeping Elbows
 

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