Creating Modified Initrd for Meilix

We are modifying the Initrd file in order to modify the live user configuration which is not available via skel but can be modified by editing the casper configuration like hostname or the systemd configuration.

Linux has the Initrd or “Initial ram-disk” used during the boot process. A Linux kernel is modular. The Kernel files, drivers, reside in separate files, i.e., kernel modules. The kernel does not require drivers as BIOS handles all the work of loading Initrd into the memory. After the kernel is loaded, it starts the boot process. Initrd contains all the drivers Linux needs to boot and the user can rebuild Initrd without changing the kernel.

Files inside Initrd

The files inside Initrd include the conf where the casper configuration is found which is required for the live user creation and its configuration.

The Initrd file is used when booting a live Meilix and can be found in the casper directory of the ISO.

We start with downloading the ISO and mounting it:

sudo mount -o loop meilix-i386.iso /mnt

Modifying the Initrd

Now extract the content into a folder so that one can modify them. It depends on the image type in the Meilix. We have the image in lz format it can be in gzip format for other distributions.

mkdir initrd-tmp
  cd initrd-tmp
lzma -dc -S .lz /mnt/casper/initrd.lz | cpio -id

 

Now we can modify the files like hostname or the files required to run during boot. The Initrd file is responsible for all the configuration available to the live user like the theme for Plymouth. We can modify the boot menu or plymouth or the files and folders the user gets like the default wallpaper.

Repack the modified files into a new initrd:

find . | cpio --quiet --dereference -o -H newc | gzip -9 > ~/new-initrd.gz

 

These are steps to modify the Initrd file which can be used to customize the Meilix live user configuration like hostname, Plymouth theme and user files.

Resources

Continue ReadingCreating Modified Initrd for Meilix

Modifying Notifications in Meilix

There are many settings available for notifications in Meilix like position, size, timeout which can be modified with help of the notifications settings available in LXQT.

Theming Notifications

We will start by creating a file in /usr/share/lxqt/themes for creating a qss file of the notification theme as lxqt-notificationd.qss. This file tells the LXQT about what the colors, size, border, etc. are for a notification.

We start with notifications in this file. We can define color of the text of notifications. It supports alpha values too, but making text transparent decrease.

Notification {
    color: #313639;
    border: 1px solid rgba(155, 155, 155, 00%);
    background:rgba(240, 240, 240, 00%);
    margin: 0px;
    border-radius: 5px;
}

 

We can add a custom close button also we just need to add the path of the button in the qss file.

#closeButton {
    margin: 3px;
    border-radius: 4px;
    border: 1px solid transparent;
    padding: 4px;
    qproperty-icon: url(lxqt-notificationd/window-close.svg);
}

 

Other properties like hover on close button for animations can be used like.

#closeButton:hover {
    color: rgba(54, 54, 54, 100%);
    background: rgba(30, 145, 255, 30%);
    border: 1px solid rgba(30, 145, 255, 100%);
}

 

We can also define custom font, background like an image file, or actions like click, hover etc.

For other notification settings we can create a configuration file notifications.config which we can place in root  or in ~/.config depending upon application weather we want to apply it system wide or only for user.

The configuration file for disabling the sounds in LXQT:

[Sounds]
No sound=true

 

Settings can also be changed using the menu and they are saved in .config/lxqt/notifications.conf. We have changed the spacing to zero in Meilix so that the notifications are invisible and do not disturb during an event (instead of disabling it in case someone wants notifications they can change the spacing).

[General]
spacing=0

Resources

Continue ReadingModifying Notifications in Meilix

LXQT Panel theme for Meilix

Panel theming is available via the LXQt Configuration Center –> LXQt Appearance –> LXQt Theme. For Meilix we have attempted making the light color theme with some new things like taskbar manager to highlight the active window and hover actions.

Meilix taskbar in panel

Theme folders of LXQT is in the directory /usr/share/lxqt/themes/.

Meilix LXQT theme directory

For theming the panel we start by creating a lxqt-panel.qss this file is like a style sheet for LXQt panel.

LXQtPanel #BackgroundWidget {
        background:rgba(240, 240, 240, 100%);
}

QToolTip {
        border-radius: 4px;
        border: 1px solid rgba(155, 155, 155, 100%);
        background:rgba(240, 240, 240, 100%);
        padding: 2px;
        margin: 0px;
        color: #313639;
}

 

Where we are defining the values of property like background for LXQTPanel1 which is the primary panel but if we want to theme the second panel differently then we need to use LXQTPanel2 and if we require same theme then no need to add the property for second panel it will take the property of panel 1 only,

We can define appearance of things like tooltip using QToolTip , LXQtPanelPlugin for plugins area and property of widgets like calendar using QCalendarWidget like

QCalendarWidget #qt_calendar_navigationbar,
QCalendarWidget #qt_calendar_navigationbar * {
    background:rgba(240, 240, 240, 100%);
    color: rgba(54, 54, 54, 100%);
}
QCalendarWidget QToolButton {
    margin: 3px;
    border-radius: 4px;
    border: 1px solid transparent;
    padding: 4px;
} 

 

We can also add or change the icons like the default icon for LXQt main menu it the LXQT logo but we want it to be something else like the logo of Meilix. We can add the path of the icon in the QSS file like

#MainMenu {
        qproperty-icon: url(mainmenu.svg);
}

 

To check all the changes made in LXQT panel theme without restart or logout and login again we can use the following commands.

killall lxqt-panel
lxqt-panel

Resources

Continue ReadingLXQT Panel theme for Meilix

Wallpaper Strategy for Meilix Generator

We were first hosting the wallpaper uploaded by user on the Heroku server which was downloaded by the Travis CI which was previous solution for sending wallpaper to the Travis CI, but the problem was that wallpaper was downloaded only when build started building the ISO.

Downloading the hosted wallpaper was not a problem but the problem in that method was that the wallpaper hosted can be changed if another user also starts the build using Meilix Generator and uploads the wallpaper which will replace the previous wallpaper so simultaneous builds was not possible in previous method and resulted in conflicts.

So we thought of a sending the wallpaper to the Travis CI server for that we used base64 to and encoded it to a string using this.

with open(filename,'rb') as f:
    os.environ["Wallpaper"] = str(base64.b64encode(f.read()))[1:]

 

After uploading we send it as a variable to Travis CI and decode it. We will receive a binary file after decoding now we need to detect the mime type of the file and rename it accordingly before applying for that we use a script like this.

#renaming wallpaper according to extension png or jpg
for f in wallpaper; do
    type=$( file "$f" | grep -oP '\w+(?= image data)' )
    case $type in  
        PNG)  newext=png ;;
        JPEG) newext=jpg ;;
        *)    echo "??? what is this: $f"; continue ;;
    esac
    mv "$f" "${f%.*}.$newext"
done

 

After fixing the wallpaper extension we can apply it using the themes by replacing it with the theme wallpaper.

Resources

Base64 python documentation

Continue ReadingWallpaper Strategy for Meilix Generator

How to Send a Script as Variable to the Meilix ISO with Travis and Meilix Generator

We wanted to add more features to Melix Generator web app to be able to customize Meilix ISO with more features so we thought of sending every customization we want to apply as a different variable and then use the scripts from Meilix Generator repo to generate ISO but that idea was bad as many variables are to be made and need to be maintained on both Heroku and Travis CI and keep growing with addition of features to web app.

So we thought of a better idea of creating a combined script with web app for each feature to be applied to ISO and send it as a variable to Travis CI.

Now another problem was how to send script as a variable after generating it as json do not support special characters inside the script. We tried escaping the special characters and the data was successfully sent to Travis CI and was shown in config but when setting that variable as an environment variable in Travis CI the whole value of variable was not taken as we had spaces in the script.

So to eliminate that problem we encoded the variable in the app as base64 and sent it to Travis CI and used it using following code.

To generate the variable from script.

with open('travis_script_1.sh','rb') as f:
    os.environ["TRAVIS_SCRIPT"] = str(base64.b64encode(f.read()))[1:]

 

For this we have to import base64 module and open the script generated in binary mode and using base64 we encode the script and using Travis CI API we send variable as script to the Travis CI to build the ISO with script in chroot we were also required to make changes in Meilix to be able to decode the script and then copy it into chroot during the ISO build.

sudo su <<EOF
echo "$TRAVIS_SCRIPT" > edit/meilix-generator.sh
mv browser.sh edit/browser.sh
EOF 

 

Using script inside chroot.

chmod +x meilix-generator.sh browser.sh
echo "$(<meilix-generator.sh)" #to test the file
./browser.sh
rm browser.sh

Resources

Base64 python documentation from docs.python.org

Base64 bash tutorial from scottlinux.com by Scott Miller

su in a script from unix.stackexchange.com answered by Ankit

Continue ReadingHow to Send a Script as Variable to the Meilix ISO with Travis and Meilix Generator

How to customize LXQT for Meilix

We had a task of customizing the LXQT (LXQt is the Qt port and the upcoming version of LXDE, the Lightweight Desktop Environment) desktop environment in Meilix for events. For example, we can use a distro at events for presentations so during presentations things like system sounds, notifications and panel can be disturbing elements of presentations so we required LXQT to be pre configured for that so the time required in configuration is not wasted or none of the presentations are disturbed.

The default configuration of LXQT are present in ~/.config/lxqt. Configuration files are in This directory is initialized automatically. The default configuration for new users is found in /etc/xdg/lxqt but we are going to use skel for this so that if there are some changes in future in the LXQT code and they do not match default settings we can always be back to default settings by deleting user side changes. Similar to LXDE. LXQt provides a GUI applications to change its settings as well.

While Openbox is the default window manager we have used in Meilix with  LXQt, you can specify a different window manager to use with LXQt via by editing ~/.config/lxqt/session.conf. To a window manager of choice. Change the following line:

window_manager=openbox

 

We have used the Openbox for Meilix.

To create a configuration for panel we can go to ~/.config/lxqt and edit the panel.conf file if it is not present we can create a file named panel.conf and add/edit the code.

[panel1]
hidable=true 

 

GIF representing auto hide of panel.

In order to configure more things like notification we can edit the ~/.config/lxqt/notification.conf.

We can change things like the placement or the size of notification or the timeout of notification in this file.

For eg:

 [General]
__userfile__=true
placement=top-left
server_decides=1
spacing=6
width=295

 

We can now place all the configurations inside the skel folder so that every new user gets the same configurations we have made.

Resources

Continue ReadingHow to customize LXQT for Meilix

Working of Meilix Build Script

Meilix build script is divided into several parts the initial part consist of getting the build environment ready for build which includes installation of packages to build the ISO.

Iike debootstrap genisoimage p7zip-full squashfs-tools ubuntu-dev-tools.

The we have a debuild script which is ran by the build script in initially to rebuild the metapackages so that if any change is created it can be included in the build.

To make the change in metapackage like meilix-default-settings.deb we include the changes in the meilix-default-settings/ to test the meta package locally we can use the following script to build it for testing.

#!/bin/bash
rm meilix-default-settings_*                                    #removes the older meilix-default-settings packages
cd meilix-default-settings                                      #cd into the metapackage directory
debuild -uc -us                                                 #debuild the meilix-default-settings metapackage

 

After creation of packages we prepare chroot with the help of debbootstrap using ubuntu mirror for application installation after that we copy the files we created using debuild script and the files we require in the chroot.
We have a different file for working in the chroot which executes once the chroot is ready.

Now we copy the kernel from chroot to the build server /image for creation of live cd

sudo cp chroot/boot/vmlinuz-**-generic image/casper/vmlinuz sudo cp chroot/boot/initrd.img-**-generic image/casper/initrd.lz

Next step is to extract initrd for updating the uuid information for the above changes.

7z e image/casper/initrd.lz && \
  mkdir initrd_FILES/ && \
  mv initrd initrd_FILES/ && \
  cd initrd_FILES/ && \
  cpio -id < initrd && \
  cd .. && \
  cp initrd_FILES/conf/uuid.conf image/.disk/casper-uuid-generic && \

Now we pack the ISO using mkisofs but the problem here is we don’t have a boot.cat file and without that we will have errors in packing the ISO so to handle that we first create a temporary ISO to be able to extract boot.cat from it.

IMAGE_NAME=${IMAGE_NAME:-"Meilix ${release} $(date -u +%Y%m%d) - ${arch}"}
ISOFILE=meilix-${release}-$(date -u +%Y%m%d)-${arch}.iso
sudo mkisofs -r -V "$IMAGE_NAME" -cache-inodes -J -l \
  -b isolinux/isolinux.bin -c isolinux/boot.cat \
  -no-emul-boot -boot-load-size 4 -boot-info-table \
  --publisher "Meilix Packaging Team" \
  --volset "Ubuntu Linux http://www.ubuntu.com" \
  -p "${DEBFULLNAME:-$USER} <${DEBEMAIL:-on host $(hostname --fqdn)}>" \
  -A "$IMAGE_NAME" \
  -m filesystem.squashfs \
  -o ../$ISOFILE.tmp .

After getting a updated boot.cat file by mounting the temporary ISO and extracting boot.cat from it, we repeat the similar steps to create the ISO.

Chroot Script

Inside the chroot script we are going to install all the packages we require in the ISO and the metapackages we created for ISO. we can also add the custom changes we require like turning off screen dimming or setting plymouth after installing the package.

echo -ne "\033[9;0]" >> /etc/issue
setterm -blank 0 >> /etc/issue

At the end of chroot script we do the cleanup.

perl -i -nle 'print unless /^Package: language-(pack|support)/ .. /^$/;' /var/lib/apt/extended_states 
apt-get -qq clean
 rm -rf /tmp/* #rm /etc/resolv.conf 
rm meilix-default-settings_1.0_all.deb 
rm meilix-metapackage_1.0-1_all.deb 
rm systemlock_0.1-1_all.deb plymouth-meilix-logo_1.0-1_all.deb plymouth-meilix-text_1.0-1_all.deb skype-ubuntu_4.1.0.20-1_i386.deb rm meilix-imclient_*_all.deb
rm /sbin/initctl dpkg-divert --rename --remove /sbin/initctl

Resources

Continue ReadingWorking of Meilix Build Script

Creation of Icon Pack for Meilix

An icon theme is a set of icons that have common looks and feel. The user can select the icon theme that they want to use, and all apps use icons from the theme if a particular icon is not available in theme the fallback theme is used .

An icons theme is only a mapping. Given an arrangement of indexes to search for icons in and a theme name it maps from icon name and icon size to an icon filename.

Icon in Meilix are stored in /usr/share/icons/meilix.

We need to create a index.theme file which tells the LXQT desktop where the icons for a particular application or mime type are located

[Icon Theme]
Name=Meilix
DisplayDepth=32
DesktopDefault=48
DesktopSizes=16,22,32,48,64,128,256
ToolbarDefault=22
ToolbarSizes=16,22,32,48
MainToolbarDefault=22
MainToolbarSizes=16,22,32,48
SmallDefault=16
SmallSizes=16,22,32,48
PanelDefault=32
PanelSizes=16,22,32,48,64,128,256
DialogDefault=32
DialogSizes=16,22,32,48,64,128,256

#################################
#   Fallback icon theme to use  #
#################################
Inherits=oxygen

 

After defining the icon theme name and sizes we next define the fallback icon theme to use icons from in case of missing icons so we have chosen Oxygen icon theme which is very similar to Meilix icon theme to have a consistent looks and feel.

We further define the different types of icons with their locations , resolution and type.

Meilix icon theme use four different sizes 16 , 22 , 24 ,32 ,64 and two types scalable for svg icons and fixed for png icons.

[actions/32]
Size=32
Context=Actions
Type=Fixed

[actions/48]
Size=48
Context=Actions
Type=Fixed

#  Apps

[apps/16]
Size=16
Context=Applications
Type=Fixed

[apps/22]
Size=22
Context=Applications
Type=Fixed

 

Meilix Icon pack directory structure

Adding more icons to theme

To append a custom icon to Meilix icon theme xdg-icon-resource can be used. This will resize and copy the icon to /share/icons/meilix. With this method, custom emblems can also be added. Examples:

$ xdg-icon-resource install --size 64 --context --theme meilix emblems meilix-example.png --mode system # add as emblem
$ xdg-icon-resource install --size 64 --theme meilix meilix-example.png --mode system # add as normal icon

Mime type icons

file managers get definitions from /usr/share/mime/ . Calling an icon according to the definition found there and copying it to /share/icons/meilix will cause the file manager to display the custom mime type icon.

Creating a custom icon for text files (*.txt)

# grep txt /usr/share/mime/globs | egrep -o '.+\/[^:]+' | tr '/' '-'
application-x-kate ;# rename your icon according to this output
xdg-icon-resource install --size 64 --context mimetypes --theme meilix application-x-kate.png --mode system

Resources

Continue ReadingCreation of Icon Pack for Meilix

Customizing Firefox in Meilix using skel

We had a problem of customizing the Firefox browser configuration using Meilix generator so we used the skel folder in Linux. The /etc/skel directory contains files and directories that are automatically copied over to a new user’s home directory when such user is created by the useradd program.

Firefox generally reads its settings from ~/.mozilla/firefox folder present in Linux home of the user, which is changed when user modifies his settings like changing the homepage or disabling the bookmarks. To add these changes for every new user we can copy these configurations into skel folder.

Which we have done with Meilix which have these configurations in it and can be modified by using Meilix generator.

If you are going to look in your ~/.mozilla/firefox folder you will find a random string followed by .default folder this will contain the default settings of your Firefox browser and this random string is created uniquely for every user. The profile name will be different for all users but should always end with .default so if we use skel the .default will be same for everyone and we may choose any name for that like we have used meilix.default in below script.

For example to change the default homepage URL we can create a script that can be used by Meilix generator to modify the URL in Meilix.

#!/bin/bash

set -eu   	 
# firefox
preferences_file="`echo meilix-default-settings/etc/skel/.mozilla/firefox/meilix.default/user.js`"
if [ -f "$preferences_file" ]
then
	echo "user_pref(\"browser.startup.homepage\", \"${event_url}\");" >> $preferences_file
fi

 

Here the ${event_url} is the environment variable sent by Meilix generator to be added to configuration of Firefox that is added to skel folder in Meilix.

We can similarly edit more configuration by editing the file pref.js file it contains the configuration for Firefox like bookmarks, download location, default URL etc.

Resources

Continue ReadingCustomizing Firefox in Meilix using skel