Create a development section in budgie welcome

I am considering helping to make a development section in welcome

I only know Python and Ruby, but if Welcome is written in either, I’m happy to help

Python, html, javascript and css are the key technologies used in welcome.

Well, I should be familiar with it then. Mind pointing me at the relevant code at https://github.com/UbuntuBudgie/budgie-welcome ? Thanks @fossfreedom :stuck_out_tongue:

No need, found it. Adding now in my own fork.

While coding, I found an issue. Your repo, when running ./budgie-welcome, runs Welcome successfully. However, git master (without changes) does not allow me to click Install Software. @fossfreedom This should be fixed ASAP, so as 20.04 doesn’t have this strange bug :wink:

Do look at the README … there is stuff you have todo to make things work.

Before jumping in though, like any development best sketch out what you intend to do. Piece of paper sketch is adequate to show what capabilities are to be enabled and how to navigate to the new page.

Okay, thank you! I appreciate it :slight_smile:

Done with some basic planning, starting some HTML work. I’m using the budgie-applets.html page as my base :slight_smile: Welcome doesn’t look that hard, looking forward to making lots of contributions to it!

@fossfreedom I decided to come back to this, and I need help. I’m almost done, but I’m trying to add a feature to actually install a tool (e.g. ZSH) using the Install button. However, changing the value passed to cmd() to 'sudo apt install zsh' gives me this in the terminal: Unknown command: sudo apt install zsh. How would I install APT packages, then? Sorry, unfamiliar with this system, but it seems you’re using apt for other tasks in Welcome. Thanks.

here is my code:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="css/material-icons.css" rel="stylesheet" media="screen">
    <link href="css/animate.css" rel="stylesheet" media="screen">
    <link href="css/welcome.css" rel="stylesheet" media="screen">
    <link href="css/baguetteBox.min.css" rel="stylesheet" media="screen">
</head>

<body class="backdrop-simple fade fade-1s" onload="sortAppletList();">
    <div id="wrapper">
        <div id="title-inject">&zwnj;Ubuntu Budgie Development Tools&zwnj;</div>
        <div id="content" class="container entire-page-fade">
            <b>&zwnj;This is a quick and handy way to install some development tools for Ubuntu Budgie.&zwnj;</b>
            </div>
            <br>
            <div class="row text-md-center" id="applet-list">
                <div class="col-md-6 haste-applet">
                    <br>
                    <h2><a onclick="cmd('link?https://github.com/zsh-users/zsh')"><span
                                class="material-icons">help</span></a>&zwnj;Zsh Shell (Command Line)&zwnj;</h2>
                    <div class="card card-block">
                        <p class="card-text">&zwnj;Zsh, an amazing shell for both power users and beginners which provides simplicity yet perfection. Used for terminal commands, don't play around with this if you don't know what it does.&zwnj;</p>
                    </div>
                    <div class="text-md-right">
                        <a id="zsh-remove" class="btn btn-danger" onclick="cmd('install?zsh');cmd('')">
                            <span class="material-icons">&#xE872;</span><span
                                class="button-text">&zwnj;Remove&zwnj;</span>
                        </a>
                        <a id="zsh-install" class="btn btn-success hvr-shadow"
                            onclick="cmd('install?zsh');cmd('')"> &nbsp;
                            <span class="material-icons">&#xE2C0;</span>&zwnj;Install Applet&zwnj;&nbsp;
                        </a>
                        <span id="haste-status" class="hidden">
                            <img src="img/welcome/processing.gif" width="24px" height="24px" /> &zwnj;Applying
                            Changes...&zwnj;
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="js/jquery-2.1.4.js"></script>
    <script src="js/tether.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/janimate.js"></script>
    <script src="js/confetti.js"></script> <!-- Confetti only appears on special events -->
    <script src="js/welcome.js"></script>
    <script src="js/baguetteBox.min.js"></script>
    <script type="text/javascript">
        baguetteBox.run('[data-toggle="lightbox"]', {
            // Custom options
        });
    </script>
</body>

</html>

from downloads.html, which opens successfully. Then, while trying to click “Install” or “Remove”:

home/codic/coding/budgie-welcome/budgie-welcome-privileged-actions:193: DeprecationWarning: dist() and linux_distribution() functions are deprecated in Python 3.5
  release_code = platform.dist()[2]    # → xenial, yakkety, zesty
'development'
Traceback (most recent call last):
  File "/home/codic/coding/budgie-welcome/budgie-welcome-privileged-actions", line 226, in <module>
    retval = install(fname, code)
  File "/home/codic/coding/budgie-welcome/budgie-welcome-privileged-actions", line 125, in install
    repos = info.get("repos")
AttributeError: 'NoneType' object has no attribute 'get'

Packages are listed here https://github.com/UbuntuBudgie/budgie-welcome/blob/master/data/config/packages.json

The html “zsh-install” will find the entry “zsh” listed in packages.json - look at the list of packages to be installed against the distro version (or “all” if the package is applicable to all distro versions) and then install the packages. packages.json can specify additional repository names, snap names if it is a snap package.

Its highly likely that budgie-welcome python file will need to be taught what the development.html actually is - so look for instances of “budgie-applets” in that file. The python file injects javascript according to the page - for example to hide/show elements on the web-page.

1 Like

@fossfreedom I have a working UI implementation:
![image|690x382]upload://g0pqJLgKDBzPyP2hQOLnHEZjDxp.png)

I’ve added this to packages.json (in data/config):


However, it doesn’t want to install;

Using relative path for data source.                   Non-production testing.
Error executing command as another user: Request dismissed
[Apt] Reloading cache... 
[Apt] Cache reloaded. 
/home/codic/coding/budgie-welcome/budgie-welcome-privileged-actions:193: DeprecationWarning: dist() and linux_distribution() functions are deprecated in Python 3.5
  release_code = platform.dist()[2]    # → xenial, yakkety, zesty
'development'
Traceback (most recent call last):
  File "/home/codic/coding/budgie-welcome/budgie-welcome-privileged-actions", line 228, in <module>
    retval = remove(fname, code)
  File "/home/codic/coding/budgie-welcome/budgie-welcome-privileged-actions", line 157, in remove
    snaps = info.get("snap")
AttributeError: 'NoneType' object has no attribute 'get'
[Apt] Reloading cache... 
[Apt] Cache reloaded. 

Here’s development.html:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="css/material-icons.css" rel="stylesheet" media="screen">
    <link href="css/animate.css" rel="stylesheet" media="screen">
    <link href="css/welcome.css" rel="stylesheet" media="screen">
    <link href="css/baguetteBox.min.css" rel="stylesheet" media="screen">
</head>

<body class="backdrop-simple fade fade-1s" onload="sortAppletList();">
    <div id="wrapper">
        <div id="title-inject">&zwnj;Ubuntu Budgie Development Tools&zwnj;</div>
        <div id="content" class="container entire-page-fade">
            <b>&zwnj;This is a quick and handy way to install some development tools for Ubuntu Budgie.&zwnj;</b>
            </div>
            <br>
            <div class="row text-md-center" id="applet-list">
                <div class="col-md-6 haste-applet">
                    <br>
                    <h2><a onclick="cmd('link?https://github.com/zsh-users/zsh')"><span
                                class="material-icons">help</span></a>&zwnj;Zsh Shell (Command Line)&zwnj;</h2>
                    <div class="card card-block">
                        <p class="card-text">&zwnj;Zsh, an amazing shell for both power users and beginners which provides simplicity yet perfection. Used for terminal commands, don't play around with this if you don't know what it does.&zwnj;</p>
                    </div>
                    <div class="text-md-right">
                        <a id="zsh-remove" class="btn btn-danger" onclick="cmd('remove?zsh');cmd('')">
                            <span class="material-icons">&#xE872;</span><span
                                class="button-text">&zwnj;Remove&zwnj;</span>
                        </a>
                        <a id="zsh-install" class="btn btn-success hvr-shadow"
                            onclick="cmd('install?zsh');cmd('')"> &nbsp;
                            <span class="material-icons">&#xE2C0;</span>&zwnj;Install Applet&zwnj;&nbsp;
                        </a>
                        <span id="haste-status" class="hidden">
                            <img src="img/welcome/processing.gif" width="24px" height="24px" /> &zwnj;Applying
                            Changes...&zwnj;
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="js/jquery-2.1.4.js"></script>
    <script src="js/tether.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/janimate.js"></script>
    <script src="js/confetti.js"></script> <!-- Confetti only appears on special events -->
    <script src="js/welcome.js"></script>
    <script src="js/baguetteBox.min.js"></script>
    <script type="text/javascript">
        baguetteBox.run('[data-toggle="lightbox"]', {
            // Custom options
        });
    </script>
</body>

</html>

It’s in the Install Software dropdown, pls help

at a guess your config file should have something like:

"zsh": {
     "packages": ["zsh"],
     "repos": { "all": ["main"] }
}

toss your stuff into a branch in your repo and let me have a look properly

Sure, I’m at school now, but I’ll do it as soon as I get home and have time (about 3:40 PM PST today)

@fossfreedom https://github.com/gsbhasin123/budgie-welcome
check it out yourself, pls

As I mentioned above - welcome needed to understand what “development” is - since you’ve based this on budgie-applets then can reuse the same python code for handling installation and removal

This diff will get you going here: https://github.com/UbuntuBudgie/budgie-welcome/commit/43421bae8b3a36a4c1c4e9a07a2ec28e871153cc

1 Like

Thx will do later :slight_smile:

@fossfreedom https://github.com/gsbhasin123/budgie-welcome fixed! Works…
Only problem is, this:

Using relative path for data source.                   Non-production testing.
Traceback (most recent call last):
  File "./budgie-welcome", line 299, in _load_changed_cb
    self._push_config()
  File "./budgie-welcome", line 237, in _push_config
    for applet in config['budgie-applets', 'development']:
KeyError: ('budgie-applets', 'development')
Traceback (most recent call last):
  File "./budgie-welcome", line 299, in _load_changed_cb
    self._push_config()
  File "./budgie-welcome", line 237, in _push_config
    for applet in config['budgie-applets', 'development']:
KeyError: ('budgie-applets', 'development')

occurs. The lines referenced are completely different, though, and config is not in the file at all (using VSCode’s Find/Replace Tool.) Everything works anyways, please help

if systemstate.codename in config['budgie-applets', 'development'][applet]['repos']:

In python config['budgie-applets'][applet]['repos']: means to look in the json file for all keys with ‘budgie-applets’ - then below that for subkeys with ‘applet’ and then sub-subkeys for ‘repos’

Look closely at the revised json file - zsh is below the ‘development’ key so you need an equivalent:

if systemstate.codename in config['development'][applet]['repos']:

EDIT:

come to think of it “applet” doesn’t make much sense for development subkeys - suggest change the json to use something else

mind making a pr for this? ty