How to get user profile image in javascript in gnome 3.28 Ubuntu 18.04

I am working on an extension for gnome, in which there is a popupmenu with menuitems.One of the menuitems is called "Log out" .I have managed to display next to "Log out" the real name of the user with this code:

    let username = GLib.get_real_name();

                .........

                .........

    item = new PopupMenu.PopupMenuItem(_(list[x].text) + username);

Log out menuitem

Now I want to display and the user profile image next to real name.I tried this code but it does not work:

    let usename= GLib.get_user_name();

    let user = AccountsService.UserManager.get_default().get_user(username);

    let iconpath = user.get_icon_file();

    let icon = Gio.icon_new_for_string(iconpath);

    Icon = new St.Icon(icon);

    boxicon = new St.BoxLayout();

    boxicon.add(Icon);

It seems that the "iconpath" is null.How can I get the user profile image and display it in the menu.
Thanks in advance.

asked Nov 14 '18 at 2:31

cgiannakidis

133

add a comment |

    let username = GLib.get_real_name();

                .........

                .........

    item = new PopupMenu.PopupMenuItem(_(list[x].text) + username);

Log out menuitem

Now I want to display and the user profile image next to real name.I tried this code but it does not work:

    let usename= GLib.get_user_name();

    let user = AccountsService.UserManager.get_default().get_user(username);

    let iconpath = user.get_icon_file();

    let icon = Gio.icon_new_for_string(iconpath);

    Icon = new St.Icon(icon);

    boxicon = new St.BoxLayout();

    boxicon.add(Icon);

It seems that the "iconpath" is null.How can I get the user profile image and display it in the menu.
Thanks in advance.

asked Nov 14 '18 at 2:31

cgiannakidis

133

add a comment |

    let username = GLib.get_real_name();

                .........

                .........

    item = new PopupMenu.PopupMenuItem(_(list[x].text) + username);

Log out menuitem

Now I want to display and the user profile image next to real name.I tried this code but it does not work:

    let usename= GLib.get_user_name();

    let user = AccountsService.UserManager.get_default().get_user(username);

    let iconpath = user.get_icon_file();

    let icon = Gio.icon_new_for_string(iconpath);

    Icon = new St.Icon(icon);

    boxicon = new St.BoxLayout();

    boxicon.add(Icon);

It seems that the "iconpath" is null.How can I get the user profile image and display it in the menu.
Thanks in advance.

asked Nov 14 '18 at 2:31

cgiannakidis

133

    let username = GLib.get_real_name();

                .........

                .........

    item = new PopupMenu.PopupMenuItem(_(list[x].text) + username);

Log out menuitem

Now I want to display and the user profile image next to real name.I tried this code but it does not work:

    let usename= GLib.get_user_name();

    let user = AccountsService.UserManager.get_default().get_user(username);

    let iconpath = user.get_icon_file();

    let icon = Gio.icon_new_for_string(iconpath);

    Icon = new St.Icon(icon);

    boxicon = new St.BoxLayout();

    boxicon.add(Icon);

It seems that the "iconpath" is null.How can I get the user profile image and display it in the menu.
Thanks in advance.

javascript ubuntu-18.04 gnome-shell-extensions

asked Nov 14 '18 at 2:31

cgiannakidis

133

asked Nov 14 '18 at 2:31

cgiannakidis

133

asked Nov 14 '18 at 2:31

cgiannakidis

133

asked Nov 14 '18 at 2:31

cgiannakidis

133

asked Nov 14 '18 at 2:31

cgiannakidis

133

add a comment |

1 Answer
1

active

oldest

votes

There is a lot of JavaScript in gnome-shell that has already been written to be easily reused. Bonus, you will automatically get bugfixes and performance improvements that are made to the code (if they happen).

I would recommend you re-use, or at least look the the Avatar class in ui/userWidget.js. Not only is the code already written, but it keeps the avatar up to date, and any GNOME Shell theme that has custom styles will probably also work automatically.

You can use this class like so:

const UserWidget = imports.ui.userWidget;



let user = AccountsService.UserManager.get_default().get_user(username);

let avatar = new UserWidget.Avatar(user);

let boxicon = new St.BoxLayout();



// Notice that UserWidget.Avatar is a container class for the actual actor

boxicon.add_child(avatar.actor);

There are also other classes in there for the user name label, and a parent class that wraps them both. Be aware of classes or functions prefixed with an underscore like _doStuff(), since that's a common way of marking things as "private" or internal, and subject to change without notice.

EDIT

Also, if you're not using or targetting the latest release, use the dropdown menu in GitLab to select the branch for your release, or view the history of a file to see if anything important changed.

answered Nov 14 '18 at 4:57

andy.holmes

911619

Thanks a lot for your answer.This is what I was looking for.Something else, if I want to add the 'avatar' to a menuitem what code should I use.Sorry for my ignorance but I am a newbie in javascript.

– cgiannakidis
Nov 14 '18 at 8:27

That's okay; there's old stuff kept in there for old extensions. Most of these classes (like PopupMenuItem) are "empty" container classes with a Foo.actor which is the real widget you want to add to (menuItem.actor.add_child(avatar.actor)). PopupMenuItem expects PopupMenuItem.box to be there for signals (open/close/etc) and in most cases PopupMenuItem.actor === PopupMenuItem.box. Have a look at PopupMenuSection to see how they use this trick the make sections behave like items.

– andy.holmes
Nov 14 '18 at 9:12

Also checkout the GJS wiki if you're new: gitlab.gnome.org/GNOME/gjs/wikis/home and the official docs: devdocs.baznga.org

– andy.holmes
Nov 14 '18 at 9:18

Hi again and sorry if I am boring but what I get is an empty avatar regardless I have already choose one in user account settings.

– cgiannakidis
Nov 14 '18 at 10:56

No problem. If you have an IRC/Matrix client, come chat with us on irc.gimp.org #javascript (and be patient ;))

– andy.holmes
Nov 14 '18 at 13:40

|
show 1 more comment

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53292366%2fhow-to-get-user-profile-image-in-javascript-in-gnome-3-28-ubuntu-18-04%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

You can use this class like so:

const UserWidget = imports.ui.userWidget;



let user = AccountsService.UserManager.get_default().get_user(username);

let avatar = new UserWidget.Avatar(user);

let boxicon = new St.BoxLayout();



// Notice that UserWidget.Avatar is a container class for the actual actor

boxicon.add_child(avatar.actor);

EDIT

Also, if you're not using or targetting the latest release, use the dropdown menu in GitLab to select the branch for your release, or view the history of a file to see if anything important changed.

answered Nov 14 '18 at 4:57

andy.holmes

911619

Thanks a lot for your answer.This is what I was looking for.Something else, if I want to add the 'avatar' to a menuitem what code should I use.Sorry for my ignorance but I am a newbie in javascript.

– cgiannakidis
Nov 14 '18 at 8:27

That's okay; there's old stuff kept in there for old extensions. Most of these classes (like PopupMenuItem) are "empty" container classes with a Foo.actor which is the real widget you want to add to (menuItem.actor.add_child(avatar.actor)). PopupMenuItem expects PopupMenuItem.box to be there for signals (open/close/etc) and in most cases PopupMenuItem.actor === PopupMenuItem.box. Have a look at PopupMenuSection to see how they use this trick the make sections behave like items.

– andy.holmes
Nov 14 '18 at 9:12

Also checkout the GJS wiki if you're new: gitlab.gnome.org/GNOME/gjs/wikis/home and the official docs: devdocs.baznga.org

– andy.holmes
Nov 14 '18 at 9:18

Hi again and sorry if I am boring but what I get is an empty avatar regardless I have already choose one in user account settings.

– cgiannakidis
Nov 14 '18 at 10:56

No problem. If you have an IRC/Matrix client, come chat with us on irc.gimp.org #javascript (and be patient ;))

– andy.holmes
Nov 14 '18 at 13:40

|
show 1 more comment

You can use this class like so:

const UserWidget = imports.ui.userWidget;



let user = AccountsService.UserManager.get_default().get_user(username);

let avatar = new UserWidget.Avatar(user);

let boxicon = new St.BoxLayout();



// Notice that UserWidget.Avatar is a container class for the actual actor

boxicon.add_child(avatar.actor);

EDIT

Also, if you're not using or targetting the latest release, use the dropdown menu in GitLab to select the branch for your release, or view the history of a file to see if anything important changed.

answered Nov 14 '18 at 4:57

andy.holmes

911619

Thanks a lot for your answer.This is what I was looking for.Something else, if I want to add the 'avatar' to a menuitem what code should I use.Sorry for my ignorance but I am a newbie in javascript.

– cgiannakidis
Nov 14 '18 at 8:27

That's okay; there's old stuff kept in there for old extensions. Most of these classes (like PopupMenuItem) are "empty" container classes with a Foo.actor which is the real widget you want to add to (menuItem.actor.add_child(avatar.actor)). PopupMenuItem expects PopupMenuItem.box to be there for signals (open/close/etc) and in most cases PopupMenuItem.actor === PopupMenuItem.box. Have a look at PopupMenuSection to see how they use this trick the make sections behave like items.

– andy.holmes
Nov 14 '18 at 9:12

Also checkout the GJS wiki if you're new: gitlab.gnome.org/GNOME/gjs/wikis/home and the official docs: devdocs.baznga.org

– andy.holmes
Nov 14 '18 at 9:18

Hi again and sorry if I am boring but what I get is an empty avatar regardless I have already choose one in user account settings.

– cgiannakidis
Nov 14 '18 at 10:56

No problem. If you have an IRC/Matrix client, come chat with us on irc.gimp.org #javascript (and be patient ;))

– andy.holmes
Nov 14 '18 at 13:40

|
show 1 more comment

You can use this class like so:

const UserWidget = imports.ui.userWidget;



let user = AccountsService.UserManager.get_default().get_user(username);

let avatar = new UserWidget.Avatar(user);

let boxicon = new St.BoxLayout();



// Notice that UserWidget.Avatar is a container class for the actual actor

boxicon.add_child(avatar.actor);

EDIT

Also, if you're not using or targetting the latest release, use the dropdown menu in GitLab to select the branch for your release, or view the history of a file to see if anything important changed.

answered Nov 14 '18 at 4:57

andy.holmes

911619

You can use this class like so:

const UserWidget = imports.ui.userWidget;



let user = AccountsService.UserManager.get_default().get_user(username);

let avatar = new UserWidget.Avatar(user);

let boxicon = new St.BoxLayout();



// Notice that UserWidget.Avatar is a container class for the actual actor

boxicon.add_child(avatar.actor);

EDIT

Also, if you're not using or targetting the latest release, use the dropdown menu in GitLab to select the branch for your release, or view the history of a file to see if anything important changed.

answered Nov 14 '18 at 4:57

andy.holmes

911619

answered Nov 14 '18 at 4:57

andy.holmes

911619

answered Nov 14 '18 at 4:57

andy.holmes

911619

answered Nov 14 '18 at 4:57

andy.holmes

911619

Thanks a lot for your answer.This is what I was looking for.Something else, if I want to add the 'avatar' to a menuitem what code should I use.Sorry for my ignorance but I am a newbie in javascript.

– cgiannakidis
Nov 14 '18 at 8:27

That's okay; there's old stuff kept in there for old extensions. Most of these classes (like PopupMenuItem) are "empty" container classes with a Foo.actor which is the real widget you want to add to (menuItem.actor.add_child(avatar.actor)). PopupMenuItem expects PopupMenuItem.box to be there for signals (open/close/etc) and in most cases PopupMenuItem.actor === PopupMenuItem.box. Have a look at PopupMenuSection to see how they use this trick the make sections behave like items.

– andy.holmes
Nov 14 '18 at 9:12

Also checkout the GJS wiki if you're new: gitlab.gnome.org/GNOME/gjs/wikis/home and the official docs: devdocs.baznga.org

– andy.holmes
Nov 14 '18 at 9:18

Hi again and sorry if I am boring but what I get is an empty avatar regardless I have already choose one in user account settings.

– cgiannakidis
Nov 14 '18 at 10:56

No problem. If you have an IRC/Matrix client, come chat with us on irc.gimp.org #javascript (and be patient ;))

– andy.holmes
Nov 14 '18 at 13:40

|
show 1 more comment

Thanks a lot for your answer.This is what I was looking for.Something else, if I want to add the 'avatar' to a menuitem what code should I use.Sorry for my ignorance but I am a newbie in javascript.

– cgiannakidis
Nov 14 '18 at 8:27

That's okay; there's old stuff kept in there for old extensions. Most of these classes (like PopupMenuItem) are "empty" container classes with a Foo.actor which is the real widget you want to add to (menuItem.actor.add_child(avatar.actor)). PopupMenuItem expects PopupMenuItem.box to be there for signals (open/close/etc) and in most cases PopupMenuItem.actor === PopupMenuItem.box. Have a look at PopupMenuSection to see how they use this trick the make sections behave like items.

– andy.holmes
Nov 14 '18 at 9:12

Also checkout the GJS wiki if you're new: gitlab.gnome.org/GNOME/gjs/wikis/home and the official docs: devdocs.baznga.org

– andy.holmes
Nov 14 '18 at 9:18

Hi again and sorry if I am boring but what I get is an empty avatar regardless I have already choose one in user account settings.

– cgiannakidis
Nov 14 '18 at 10:56

No problem. If you have an IRC/Matrix client, come chat with us on irc.gimp.org #javascript (and be patient ;))

– andy.holmes
Nov 14 '18 at 13:40

Thanks a lot for your answer.This is what I was looking for.Something else, if I want to add the 'avatar' to a menuitem what code should I use.Sorry for my ignorance but I am a newbie in javascript.

– cgiannakidis
Nov 14 '18 at 8:27

That's okay; there's old stuff kept in there for old extensions. Most of these classes (like PopupMenuItem) are "empty" container classes with a Foo.actor which is the real widget you want to add to (menuItem.actor.add_child(avatar.actor)). PopupMenuItem expects PopupMenuItem.box to be there for signals (open/close/etc) and in most cases PopupMenuItem.actor === PopupMenuItem.box. Have a look at PopupMenuSection to see how they use this trick the make sections behave like items.

– andy.holmes
Nov 14 '18 at 9:12

Also checkout the GJS wiki if you're new: gitlab.gnome.org/GNOME/gjs/wikis/home and the official docs: devdocs.baznga.org

– andy.holmes
Nov 14 '18 at 9:18

Hi again and sorry if I am boring but what I get is an empty avatar regardless I have already choose one in user account settings.

– cgiannakidis
Nov 14 '18 at 10:56

No problem. If you have an IRC/Matrix client, come chat with us on irc.gimp.org #javascript (and be patient ;))

– andy.holmes
Nov 14 '18 at 13:40

|
show 1 more comment

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Ndtyjky