Features And Installation Of Kivy Designer On Ubuntu Linux 16.04

Kivy Designer is Kivy’s tool for designing graphical user interfaces (GUIs) from Kivy Widgets. You can compose and customize widgets, and test them. It is completely written in Python using Kivy. Kivy Designer is integrated with Buildozer and Hanga, so you can easily develop and publish your applications to Desktop and Mobile devices. It organizes some open source tools to help you to create Kivy UI easily, develop your applications and target multiple platforms.

In this post we will discuss some of its useful features and see how to install Kivy Designer on Ubuntu 16.04 server.

Prerequisites

There are some prerequisites, for the complete installation setup of Kivy Designer on Ubuntu server. Let’s login to your Ubuntu 16.04 server using root user credentials and complete the required packages installation after system update.

Run below command for system update:

# apt-get -y update

After system update we be using the ‘pip’ utility to install the required packages. So, make sure ‘pip’ package is installed on your system or use below command to install it on your system first.

# apt install -y python-pip

Now you can use below command to install the prerequisites.

# pip install -U watchdog pygments docutils jedi gitpython six kivy-garden

prereq kivy designer

To install the FileBrowser, from the Kivy garden run the below command in your command line terminal as shown.

# garden install filebrowser

installing filebrowser

After this garden.filebrowser will be installed at: /root/.kivy/garden/garden.filebrowser .

Installing Kivy

Kivy is one of the basic package that must be installed on your system, before installing kivy designer. To install kivy we have to install its couple of dependencies. To install Kivy’s dependencies, you can use below command.

# apt-get install python-setuptools python-pygame python-opengl python-gst0.10 python-enchant gstreamer0.10-plugins-good python-dev build-essential libgl1-mesa-dev libgles2-mesa-dev zlib1g-dev

Their might be some packages that are already installed and will be skipped. To proceed installing these dependencies type ‘y’ to continue.

Kivy requires a recent version of Cython, so it’s better to use the latest supported version using ‘pip’:

sudo pip install --upgrade Cython==0.23

Now you download the latest kivy package using ‘git’ and run the command below to compile it.

# git clone http://github.com/kivy/kivy
# cd kivy
# python setup.py build_ext --inplace -f
# make

Alternatively, you can install kivy by adding its repo using below commands.

# add-apt-repository ppa:kivy-team/kivy
# apt-get update

kivy repo

Then run below command to install kivy.

# apt-get install kivy

installing kivy

To verify installation of kivy run below command and i should shown the following shown output.

# python -c "import kivy"
[INFO ] [Logger ] Record log in /root/.kivy/logs/kivy_16-06-15_1.txt
[INFO ] [Kivy ] v1.9.1
[INFO ] [Python ] v2.7.11+ (default, Apr 17 2016, 14:00:29)
[GCC 5.3.1 20160413]

Installing Kivy Designer

Here we will be using ‘git’ command to download and install kivy designer package on your Ubuntu 16.04 server. Let’s run below command to download its package first.

# git clone http://github.com/kivy/kivy-designer/
Cloning into 'kivy-designer'...
remote: Counting objects: 2614, done.
remote: Total 2614 (delta 0), reused 0 (delta 0), pack-reused 2614
Receiving objects: 100% (2614/2614), 1.63 MiB | 288.00 KiB/s, done.
Resolving deltas: 100% (1752/1752), done.
Checking connectivity... done.

After this, change your directory and then run the below command to get started with kivy designer.

# cd kivy-designer/
# python main.py

instaling kivy designer

Using Kivi Designer

After launching kivi designer, you will see its graphical user interface prompted on your desktop. Here you can get the initial help from its documentation and start using it to create you first project.

using ivy designer

Kivy Designer organizes some open source tools to help you to create Kivy UI easily, develop your applications and target multiple platforms.

Creating New Project

To create a new project, simply click on the ‘New Project’ buton visible on the main screen and you will be directed towards its new wizard. Where you can select an initial template for your project as shown below.

creating new project

After creating creating your new project, you’ll see the UI Creator. You can start editing the app UI, or edit the ‘main.py’ file.

Kivi Graphics Components

Kivi Designer Components

This is a list and overview of some Kivy Designer’s components. After opening a project, you will see following:

1. Project Tree
On the left side, shows files and folders inside the project’s directory.

2. Toolbox
It contains widgets which could be drag-drop to the required positions.

3. UI Creator
It is place where you will be designing your project.

4. Widget Tree
It shows the Widget hierarchy of the project.

5. Property Viewer
This shows properties, their values and allows changing the values.

6. Events
This shows the available events and their event handler. You can change/set an event handler and add an event.

7. KV Lang Area
It shows what your kv file would be consisting.

8. Kivy Console
It is a console just like xterm, GNOME Terminal. You can enter commands and execute them.

9. Python Shell
It is an interactive Python Shell.

10. Error Console
It shows errors which may occur in the user code, while opening a project or creating custom widget.

11. Playground Settings
you can change the playground screen size, orientation and zoom to help the UI development

12. Status Bar
The status bar helps you displaying the selected widget hierarchy and messages.

Conclusion

Kivy is awesome, especially if your doing cross platform stuff, the widget set is elegant looking and its very clean. You can explore its more features by using all of its available options and start using it to create you new Buildozer Projects or create your new ‘setup.py’ files that will be helping you to auto create a setup.py file in the root of the projects. Kivy Designer is an IDE under development, but provide an easy-to-use multiplatform Python development workspace. Hope you will enjoy using it in your own environment.