Pop-Up in Meilix Generator

Meilix Generator has fields which the user needs to fill up. There are fields for the required information and for customization process too. This solves the problems and helping user to know about the requirement of each field. We implemented a pop-menu which appears and tell about that particular field.

We will here describe only the implementation of email pop-up.

function hideDiv(){
document.addEventListener("click", hideDiv);
function noti()
	alert("Email is used to mail user the link to the build ISO");

We have embedded a javascript in html file.
Function hideDiv contains document.getElementsByClassName() method.

The getElementsByClassName() method returns a collection of all elements in the document with the specified class name.

Then we have a document.addEventListener() method with click and hideDiv function as the parameters. It also contain a function noti which get toggle at the time of click and display the alert message. hideDiv closes the toggle when clicked on the cross button again.

<label class="heading" id="label" for="email">Email *&ensp;<img src="{{ url_for('static', filename='alert.jpg') }}" height="20" width="20" onclick="noti()"></label>


We implemented a question mark after the email line which when clicked showed the following message on the webapp.

This will help user to know the requirement of the particular field.

Through the help of the required function and implementation of the button, we can embedded a help icon which pop-up to give required option present in the webapp.

These are different pop-ups that are currently present in the webapp. User can know about the particular field by clicking on any of the pop-up.


  1. HTML getElementsByClassName(): https://www.w3schools.com/jsref/met_document_getelementsbyclassname.asp
  2. Bootstrap 4 Form: https://www.w3schools.com/bootstrap4/bootstrap_forms.asp

UID file configuration for Meilix

Meilix has by default one user which is hotelos. Each user has a UID known as Unique Identification Display. Each UID is assigned some unique number. The range for uid is from 1000 to 65000. The login manager doesn’t create user which doesn’t have a uid in this range.


We found out that hotelos has a uid = 999 through this autologin file meilix-default-settings/usr/share/initramfs-tools/scripts/casper-bottom/15autologin. Therefore sddm would not accept this as the username.


Way 1: Increase the uid of the hotelos

Way 2: Decrease the default sddm uid through configuration file

We here tried with the second approach to decrease the uid of the sddm to 500, so that it will take hotelos as the default user.


# Hidden users, this is if any system users fall within your range, see /etc/passwd on your system.

# Maximum user id for displayed users

# Minimum user id for displayed users
MinimumUid=500 #My UID is 999


This is one of the way through which we have decreased the UID to 500.

We can use id -u in the terminal to check the uid of the user.

Root has uid = 0.

We can see different operations uid in the file /etc/passwd .

It looks like this:

We have a file /etc/login.defs where we can manage the max and min uid for the user.

# Min/max values for automatic uid selection in useradd
UID_MIN                     	1000
UID_MAX                    	60000
# System accounts
#SYS_UID_MIN              	100
#SYS_UID_MAX              	999

We can modify it to accept hotelos as the user.

\sed -i '/UID_MIN/ c\UID_MIN 998' /etc/login.defs


This will change the UID_MIN value to 998.


  1. User ID definition: http://www.linfo.org/uid.html
  2. SDDM User Issue: https://wiki.archlinux.org/index.php/SDDM#One_or_more_users_don.27t_show_up_on_the_greeter

Building 64 bit lzma file

Meilix contains the kernel and casper file in image-i386.tar.lzma. This lzma is a compression method for files. It provides a high compression ratio and fast decompression.

Lzma files contains the Meilix file system, we get the same content inside it which we get when when we mount an ISO file. Lzma file is basically an image of the Meilix Operating System.


We need to build a lzma file of 64 bit for Meilix. If we extract the lzma file we will find a README file which contains all the information of the ISO used to build this lzma file.

When we search through the files we find a file named README.diskdefines which contains the information of the file system.

#define DISKNAME  Lubuntu 12.10 "Quantal Quetzal" - Release i386
#define TYPE  binary
#define TYPEbinary  1
#define ARCH  i386
#define ARCHi386  1
#define DISKNUM  1
#define DISKNUM1  1
#define TOTALNUM  0
#define TOTALNUM0  1

The first line depicts that name and version of the ISO with the architecture from where this file system has been taken.

So we thought to build the same system with release amd64.

We download the ISO and tried to compress it into lzma.tar.

Decompression of lzma.tar file is easy but to compress a file into lzma.tar is done as follows:

When using tar, the first word after -f is the output filename

tar -c --lzma -f foo.tar.lzma sourcefile(s)

We mounted the lubuntu 12.10 64 bit ISO and copied it into another folder. Then tried to compress it with lzma algorithm. It resulted in a big size file which can’t be pushed to Github.

So we find out that a file name filesystem.casper is largest in size and can also be removed. Therefore we removed that file and build the ISO again and pushed.
We tested the ISO and file that the build is working file.

Changes made:

  • One we need to push the 64 bit lzma
  • We need to edit this line in build.sh of Meilix

# Arch to build ISO for, i386 or amd64

Finally we got the file as image-amd64.tar.lzma

So, if we look into the Readme file we can found the version which it used for building the zip.

#define DISKNAME  Ubuntu 12.10 "Quantal Quetzal" - Release amd64
#define TYPE  binary
#define TYPEbinary  1
#define ARCH  amd64
#define ARCHamd64  1
#define DISKNUM  1
#define DISKNUM1  1
#define TOTALNUM  0
#define TOTALNUM0  1

We can see that it is based on the same version but the architecture is different.


  1. GNU lzma tar: https://www.gnu.org/software/tar/manual/html_node/gzip.html
  2. Python lzma compression: https://docs.python.org/3/library/lzma.html



Nomodeset in Meilix

Meilix contains configuration file which is required to config the ways of Meilix booting. There are several parameter out of which is nomodeset is one of them.


Meilix result in blank screen in a machine which boots splash screen with a driver.


When the OS boots, nomodeset takes care that the video like splash screen happen in kernel rather than on driver. Sometimes the driver is unable to run the video which results in blank screen issue. nomodeset confirms that no video get loaded and OS boots in BIOS mode until the driver get loaded.

Way 1:

menuentry "Try Live Meilix" {
	linux	/casper/vmlinuz  file=/cdrom/preseed/lubuntu.seed boot=casper iso-scan/filename=${iso_path} nomodeset quiet splash --
	initrd	/casper/initrd.lz
menuentry "Install Meilix" {
	linux	/casper/vmlinuz  file=/cdrom/preseed/lubuntu.seed boot=casper only-ubiquity iso-scan/filename=${iso_path} quiet splash --
	initrd	/casper/initrd.lz
menuentry "Check disc for defects" {
	linux	/casper/vmlinuz  boot=casper integrity-check iso-scan/filename=${iso_path} quiet splash --
	initrd	/casper/initrd.lz
menuentry "Test memory" {
	linux16	/install/mt86plus

We put nomodeset in Try Live Meilix option for testing purpose. This file can be found https://github.com/fossasia/meilix/edit/master/image/boot/grub/loopback.cfg.

Parameter quiet splash — is responsible for showing the splash screen and at the same time, it takes care to not to display other messages while the splash screen is loaded.

We can tweak parameter with the present options during the boot screen.

This is the one way through which we can use nomodeset while editing the configuration file.

Way 2:

During running of the OS, we can use this feature by editing this file /etc/default/grub and including nomodeset in it.

GRUB_DISTRIBUTOR=`lsb_release -i -s 2> /dev/null || echo Debi`
GRUB_CMDLINE_LINUX_DEFAULT="quiet splash nomodeset"

And then save and exiting the file. Then we need to update grub using

sudo update-grub


Configuring nomodeset

nomodeset, quiet and splash


apt-get update in building Meilix through Travis

Meilix uses Travis to build and then make a github release of the ISO. There are packages that get built in the script executed by Travis.

What problem it is solving? It’s the need of apt-get update which are:

  • Update of the system to support for the newest builds.
  • Adding of the repo after adding a Personal Package Archives (‘PPAs’)

By default, Travis disabled apt-get update for every build. So if we want to run it automatically for each build, we can do it in two different ways.

Way 1:Running apt-get update in before_install step.

Implementation in .travis.yml of Meilix

print 'hello world!'
sudo: required

  - apt-get update


We already used sudo so there is no need to use sudo in the apt-get update.

This is the most simplistic approach and it update the system packages and source list before installing any packages.

Way 2: executing apt-get update in Travis through APT addon.

The addon comes under the include step and the lint follows this order:

  - os: linux
        update: true
          - ubuntu-toolchain-r-test
          - debootstrap
          - genisoimage
          - p7zip-full
          - squashfs-tools
          - ubuntu-dev-tools
          - dpkg-dev
          - debhelper
          - fakeroot
          - devscripts


This is helpful in case when we don’t have the before_install step. Additionally, it allows us to specify the packages we need to install.

Choosing between the two options

One can adopt any of the above process to implement apt-update in Travis.

Meilix uses the second approach as because we don’t have before_install parameter.

Sometimes we need some commands to get executed before updating the system, so in that case we prefer before_install to prioritize the tasks.




Meilix Blank Screen

Meilix has recently faced a blank screen issue where while booting the system, it leads to a screen as follows:

We thought it to be virtual machine issue, and build the Meilix ISO in local system from scratch. But it still coming up with the same error.

Then we started to search for the commit which seems to be breaking the ISO. There is no such commit which actually breaks the ISO. So we can’t remove/revert to any particular commit.

Then we started searching in the history to search for the latest working ISO and found that this commit actually gives a working ISO 6f287ea and below this commit, none of the others are giving an ISO which works.

So we started to look into the particular commit to find the code which is breaking the system, but actually none of them actually seems to do so. It raises more unobvious issue.

If I searched for the error, it doesn’t seems to be error from the ISO side.Even I tried building the ISO locally and test it, it is giving the same result.

It looks like it’s more than a hardware error than the error on the iso side. I tried different qemu, virtualbox, VMware on different machines.

Another Idea tried for working of the ISO

  1. initramfs is a small linux shell. please use ls and cd to find the file containing the file system filesystem.squashfs. in this black shell (initramfs)
  2. try to mount the ISO file manually

I local mount using:

sudo mount -o loop /home/meilix.iso /home/user
sudo umount /home/user


I mount the March 18 (good) and the closest April (bad)l ISO image and run a diff between both directories. the result is possibly large.

Finally tabesin made a commit dce3b08 which resolves the issue. It just the removal of language pack.

We can find the ISO link: https://github.com/fossasia/meilix/releases/tag/untagged-e337428be18400673be6


USB Boot Issue

Initramfs error

Building Drop-Down Menu

Meilix Generator has a dropdown menu which consists of links to code, issues and different FOSSASIA projects. The drop down menu appears after clicking on 3×3 dots present on the top right corner. The menu gets closed while clicking on the same dots. We want the menu to close close when we click somewhere else on the screen.

The problem statement is to close the menu bar while clicking anywhere on the white screen of the web app.


For that I have to add a listener to the rest of the body to add class “hidden”.

We first remove the old onclick listener from the body tag which open the pop-up to show up the option. We replace it with its class.

<div onclick="document.getElementsByClassName('custom-menu-cont')[0].classList.toggle('hidden')" class="custom-menubutton">
      <i class="glyphicon glyphicon-th" style="font-size:20px;"></i>


<div class="custom-menubutton">
      <i class="glyphicon glyphicon-th" style="font-size:20px;"></i>


Then the dropdown menu doesn’t open while clicking on the dots also. So we added a script outside the body tag to

  • Open the dropdown menu pop-up on clicking on the 3×3 dots.
  • Close the pop-up while clicking on that dots or anywhere on the white screen of the webapp.

<script type="text/javascript">
	function hideDiv(){
document.addEventListener("click", hideDiv);	


We are working in html so we have to add the type of the script. We add the function hideDiv to open and close the pop-up while clicking on dots.

We then add the eventListener to hide the pop-up while clicking anywhere on the screen.


Stackoverflow Pop-up closing

Adding JS in HTML W3School



Build Button Resolution in Meilix

Meilix Generator is a webapp which has a build button and after clicking the button it triggers the travis of Meilix repository. You can even generate ISO from your phone. But while opening the web app on a phone, we came to see that the build button is not properly visible. Footer of the page hide the build button. This blog shows the way to identify the build button issue and to make it responsive for all screen sizes.

Error Rectification

There are two elements that need correction:

  • Build button
  • Footer

Build Button

<input class="btn btn-info mx-auto btn-block" id="file-upload" value="Build" required="" type="submit">


Here build button act as a input submit button.

class="form-group"> class="btn btn-info mx-auto btn-block" id="file-upload" value="Build" required="" type="submit" style="height: 50px; width: 360px; border-radius: 500px;"/>


We first added the group to include the button in that form. Then we add the build button property to give the button certain look.

But now also the footer overlap the button. So now we need to work on footer part.


<footer class="footer">


We remove footer class and made a new div tag with the id = “deployment”. Then we set the css for the deployment id to customise its appearance.

     #deployment {
      position: absolute;
      text-align: center;
      width: 100%;
      padding: 10px;
      bottom: 0px;
      border-top: 1px solid #bfbfbf;
      background-color: #f9f9f9;


This set the footer and build button appropriate to become responsive for all sizes.


HTML form tag

Input type Submit tag

Update of Python Runtime in Meilix

Meilix Generator is a webapp uses flask with Python, Werkzeug, and Jinja 2. It triggers Travis to release in an ISO. It is deployed on Heroku. An older python version caused the webapp to load very slowly and it also become unsupported so there was a need to update the python version. In this blog post we walk through the update of Python in the project.

We can specify an explicit version of Python to be used to run your application. For example, if you require Python 2, add the following to your Pipfile:

Python_version = "2.7"


Then run $ pipnv lock to generate Pipfile.lock and push to Heroku.

Another way:

If we are using pip, we can supply a runtime.txt file.

$ cat runtime.txt


Building of the webapp (Example)

The webapp build in Heroku and provide us a log. The log presents the packages installed and its version. Log also shows if any newer version is present for the package.

While building webapp, we get this as a log:

-----> Python app detected
! The latest version of Python 3 is python-3.6.5 (you are using python-3.6.1, which is unsupported).
! We recommend upgrading by specifying the latest version (python-3.6.5).


This confirms that we need to update python version and so thus we edited the runtime.txt

Now building the same webapp, we get:

Python app detected
-----> Found python-3.6.1, removing
-----> Installing python-3.6.5
-----> Installing pip


It already using older python, so it need first to remove the older version and then it install the latest one.

The same implementation can be seen in the history.


Flask – The Microframework

Heroku Python Runtime