Dress up your code with a beautiful graphical user interface !

Related tags

GUI Development gui
Overview
Cover

Dresscode

Dress up your code with a beautiful graphical user interface !

This project is part of the Pyrustic Ecosystem. Look powered by the cyberpunk theme.

Showcase | Installation | Usage | Tutorial | Reference

Showcase

Welcome ! Let me show you something:

Figure

Figure 1 - Demo

What if I told you that I did this with 1 Hex-digit lines of code ™️ ?

The menu bar in Figure 1 is not a gimmick. Clicking on the buttons in the menu bar opens another page. So in fact I showed only 1/3 of the pages !

Let's take a look at the other pages:

Figure

Figure 2 - 1 hex-digit lines of code generated an app with 3 pages !

Now you are wondering how I did this with just 1 hex-digit lines of code ™️ .

Well, I first defined the first page:

from dresscode import page

home_page = page.Page(pid="home", name="Home")
home_page.add_entry(title="Username")
home_page.add_entry(title="Password", secretive=True)
home_page.add_button(new_row=True)

Then I defined the second page:

from dresscode import page

edit_page = page.Page(pid="edit", name="Edit")
edit_page.add_entry(title="Username")
edit_page.add_button(on_click=lambda page, cid: page.show_toast("Hello"))

Then the third page:

from dresscode import page

about_page = page.Page(pid="about", name="About")
about_page.add_button(text="Open Github")
about_page.add_button(text="Download the Wheel")

And then I created the app and linked the three pages to it.

from dresscode import app, page
...
my_app = app.App(title="Dresscode Demo", width=450, height=150, home="home")
my_app.add_page(home_page)
my_app.add_page(edit_page)
my_app.add_page(about_page)
my_app.start()

The 1 hex-digit lines of code:

from dresscode import app, page
my_app = app.App(title="Dresscode Demo", width=450, height=150, home="home")
home_page = page.Page(pid="home", name="Home")
home_page.add_entry(title="Username")
home_page.add_entry(title="Password", secretive=True)
home_page.add_button(new_row=True)
edit_page = page.Page(pid="edit", name="Edit")
edit_page.add_entry(title="Username")
edit_page.add_button(on_click=lambda page, cid: page.show_toast("Hello"))
about_page = page.Page(pid="about", name="About")
about_page.add_button(text="Open Github")
about_page.add_button(text="Download the Wheel")
my_app.add_page(home_page)
my_app.add_page(edit_page)
my_app.add_page(about_page)
my_app.start()
Figure

Figure 3 - Demo Animation

Voilà !

This is the full source code with comment and well structured:

from dresscode.app import App
from dresscode.page import Page


def get_home_page():
    # defining the home page here
    page = Page(pid="home", name="Home")  # pid = page id !
    page.add_entry(title="Username")
    page.add_entry(title="Password", secretive=True)  # secret secret !
    page.add_button(new_row=True)
    return page


def get_edit_page():
    page = Page(pid="edit", name="Edit")
    page.add_entry(title="Username")
    # Clicking this button will pop up a "Hello"
    page.add_button(on_click=lambda page, cid: page.show_toast("Hello"))
    return page


def get_about_page():
    page = Page(pid="about", name="About")
    page.add_button(text="Open Github")
    page.add_button(text="Download the Wheel")
    return page


# the home argument is the pid of the page to show at start up
app = App(title="Dresscode Demo", width=450, height=150, home="home")

# adding pages to the app !
app.add_page(get_home_page())
app.add_page(get_edit_page())
app.add_page(get_about_page())

# lift up !
app.start()  # the mainloop is hidden here ! ;)

Basically, you can just pip install dresscode, open a lightweight code editor, copy, paste, run the code and yeah it should work ! Try it !

Wondering what will happen when there are 10 pages ? Yes your menu bar will be full. The solution: buy large screens !

Joking aside, here's the solution:

...
# Asking Dresscode to create a dropdown menu 'Menu'
# then stack inside it the references to the pages ! 
app.add_page(home_page, category="Menu")
app.add_page(edit_page, category="Menu")
app.add_page(about_page, category="Menu")
...
Figure

Figure 4 - No need to buy large screens !

Installation

pip install dresscode --upgrade --upgrade-strategy eager

Interaction with Dresscode

Dress up your code with a beautiful graphical user interface ! was the intro to this README. There is a clear distinction between the backend and the frontend. The question that arises is therefore how to communicate the frontend and the backend.

With Dresscode, you can specify when creating a component which handler to call when a particular event occurs.

With the button component, there are the on_click parameter to keep a reference to the event handler. So basically, you just need to have a handler with 2 parameters: page and cid.

from dresscode.app import App
from dresscode.page import Page


def handler(page, cid):
    """
    page: the page object
    cid: the component id (here, the button cid)
    """
    # say 'Hello' !
    page.show_toast("Hello component {}".format(cid))
    # you can inspect the dict of components (keys are cid)
    components = page.components  # be curious, inspect the dict !
    # you can retrieve the data from a component
    username = page.get_data("username")
    # or you can display a large text
    page.show_text("Helloo\n{}".format(username), title="My large text")
    # or, ask for a confirmation
    ok = page.ask_confirmation()  # blocks the app, returns a boolean
    # you can even decide to scroll the content of the page
    page.scroll(value=1.0)
    # you can add a new page at runtime !!!
    app = page.app
    app.add_page(Page(pid="new_page", name="New"))
    # and guess what, you can open this new page !
    app.open_page("new_page")
    # and if you are in a hurry to open the home page
    app.open_home()


def get_home_page():
    # home page - a pid will be generated automatically if you don't set it
    page = Page(pid="home", name="Home")
    page.add_entry(cid="username", title="Username")
    # if you don't set a cid, it will be generated
    page.add_button(on_click=handler)  # a cid will be generated automatically

    # Note, if you click the button twice, you will get a:
    # dresscode.exception.DresscodeException
    # Duplicate page id isn't allowed (new_page) !
    # Guess why ! This isn't a bug but a feature ! hahaha !
    return page


app = App(title="Dresscode Demo", width=450, height=150, home="home")

app.add_page(get_home_page())

# lift up !
app.start()

Components

Do you think Dresscode only offers two components, the input field and the button ?

Normally that would be enough. But I implemented a multitude of components to allow everyone to build applications quickly, from the simplest to the most complex.

Checkbuttons

Figure

Figure 5 - Checkbuttons

from dresscode.app import App
from dresscode.page import Page


def get_home_page():
    page = Page(pid="home", name="Home")
    items = ("Banana", "Apple", "Avocado")
    page.add_checkbutton(title="Choose your favorite fruits", items=items)
    # you could add a on_choice event handler ;)
    return page


app = App(title="Dresscode Demo", width=450, height=150, home="home")

app.add_page(get_home_page())

# lift up !
app.start()

Dropdown list

Figure

Figure 6 - Drop-down list

from dresscode.app import App
from dresscode.page import Page


def get_home_page():
    page = Page(pid="home", name="Home")
    items = ("Banana", "Apple", "Avocado")
    page.add_dropdown_list(title="Choose your favorite fruit", items=items)
    # you could add a on_choice event handler ;)
    return page


app = App(title="Dresscode Demo", width=450, height=150, home="home")

app.add_page(get_home_page())

# lift up !
app.start()

Editor

Figure

Figure 7 - Editor

from dresscode.app import App
from dresscode.page import Page


def get_home_page():
    page = Page(pid="home", name="Home")
    essay = "non est ad astra mollis e terris via\nSénèque"
    page.add_editor(title="My essay", text=essay, readonly=True)
    # you could change the width and or height...
    return page


app = App(title="Dresscode Demo", width=450, height=150, home="home")

app.add_page(get_home_page())

# lift up !
app.start()

Label

Figure

Figure 8 - Label

from dresscode.app import App
from dresscode.page import Page


def get_home_page():
    page = Page(pid="home", name="Home")
    page.add_label(text="Marvelous")
    page.add_label(text="Dresscode", color="white")
    page.add_label(text="Project", color="cyan")
    text = "Make Desktop Apps Great Again !"
    page.add_label(new_row=True, text=text, color="gray",
                   side="right",
                   font=("Corrier", 10))
    return page


app = App(title="Dresscode Demo", width=450, height=150, home="home")

app.add_page(get_home_page())

# lift up !
app.start()

Radiobuttons

Figure

Figure 9 - Radiobuttons

from dresscode.app import App
from dresscode.page import Page


def get_home_page():
    page = Page(pid="home", name="Home")
    items = ("Blue", "Red")
    page.add_radiobutton(title="Make a choice", items=items)

    return page


app = App(title="Dresscode Demo", width=450, height=150, home="home")

app.add_page(get_home_page())

# lift up !
app.start()

Space

Figure

Figure 10 - SpaceX

from dresscode.app import App
from dresscode.page import Page


def get_home_page():
    page = Page(pid="home", name="Home")
    items = ("Blue", "Red")
    page.add_button()
    page.add_button()
    page.add_space()  # you can alter the width, height and more...
    page.add_button()

    return page


app = App(title="Dresscode Demo", width=450, height=150, home="home")

app.add_page(get_home_page())

# lift up !
app.start()

Spinbox

Figure

Figure 11 - Spinbox

from dresscode.app import App
from dresscode.page import Page


def get_home_page():
    page = Page(pid="home", name="Home")
    items = ("Blue", "Red")
    page.add_spinbox(title="Make a choice", items=items)
    return page


app = App(title="Dresscode Demo", width=450, height=150, home="home")

app.add_page(get_home_page())

# lift up !
app.start()

path entry

The path entry is part of pyrustic.widget. Discover the Pyrustic framework !

Figure

Figure 12 - Pathentry

from dresscode.app import App
from dresscode.page import Page


def get_home_page():
    page = Page(pid="home", name="Home")
    page.add_path_entry(title="Directory", browse="dir")
    page.add_path_entry(new_row=True, title="File")
    return page


app = App(title="Dresscode Demo", width=450, height=150, home="home")

app.add_page(get_home_page())

# lift up !
app.start()

Table

The table is part of pyrustic.widget. Discover the Pyrustic framework !

Figure

Figure 13 - Table

from dresscode.app import App
from dresscode.page import Page


def get_home_page():
    page = Page(pid="home", name="Home")
    columns = ("Name", "Age", "Gender")
    data = [("Jack", 45, "Male"), ("Jane", 37, "Female"), ("Alex", 100, "?")]
    page.add_table(title="My data", columns=columns, data=data)
    return page


app = App(title="Dresscode Demo", width=650, height=300, home="home")

app.add_page(get_home_page())

# lift up !
app.start()

Image

Admit that you didn't expect this !

Figure

Figure 14 - Image

from dresscode.app import App
from dresscode.page import Page


def get_home_page():
    page = Page(pid="home", name="Home")
    page.add_label(text="Welcome !", side=None, anchor="center", color="gray")
    with open("/home/alex/dresscode.png", "rb") as file:
        image = file.read()
    # to center any component, the trick: side=None, anchor="center" !
    page.add_image(new_row=True, image=image, side=None, anchor="center")
    page.add_label(text="https://github.com/pyrustic", side=None, anchor="center",
                   font=("Courrier", 10), new_row=True, color="gray")
    return page


app = App(title="Dresscode Demo", width=650, height=400, home="home")

app.add_page(get_home_page())

# lift up !
app.start()

Cherry on the cake

Since we have this rebellious little side to wanting to customize everything, I implemented the possibility of adding custom components !

from dresscode.app import App
from dresscode.page import Page


# I will cover this topic another time !


def data_getter(page, cid):
    data = None
    return data


def builder(page, cid):
    parts = {}
    return parts, data_getter


def get_home_page():
    page = Page(pid="home", name="Home")
    page.add_custom(builder=builder)
    return page


app = App(title="Dresscode Demo", width=650, height=400, home="home")

app.add_page(get_home_page())

# lift up !
app.start()

There you go, so I won't be asked to add new components ! :)

Epilog

I created a Discord for announcements and discussions etc. Join the Discord !

Work in progress...

You might also like...
A lightweight file-copying interface.
A lightweight file-copying interface.

autosort A lightweight file-copying interface. Preview What is autosort? Autosort is a lightweight file-copying interface. It allows you to copy sever

Uma interfáce de usuário relativamente simples em pyqt5 + escolha de dispositivos
Uma interfáce de usuário relativamente simples em pyqt5 + escolha de dispositivos

Interface para Scrcpy Uma interfáce de usuário relativamente simples em pyqt5 para sistemas UNIX Requerimentos: Python3 PyQt5 adb scrcpy Você pode ins

Browser - A GTK browser trying to follow the GNOME Human Interface Guidelines.
Browser - A GTK browser trying to follow the GNOME Human Interface Guidelines.

A simple GTK browser trying to follow the GNOME Human Interface Guidelines.

Primeira interface (simples) desenvolvida em Python utilizando o PySimpleGUI
Primeira interface (simples) desenvolvida em Python utilizando o PySimpleGUI

Interface-Python Sobre o projeto Primeira interface gráfica (simples) desenvolvida em Python utilizando o PySimpleGUI Interface Gráfica Tecnologias ut

Projeto de mini-games de azar com interface gráfica utilizando Python e PySimpleGui.
Projeto de mini-games de azar com interface gráfica utilizando Python e PySimpleGui.

Gambling Mini jogos de azar unidos em uma mesma interface gráfica, utilizando a linguagem de programação Python em conjunto com a biblioteca de interf

This was my test project when i started to learn Python Tkinter. Its the simplest interface possible.

Rock-Paper-Scissors-Game- Project Description: This was my test project when i started to learn Python Tkinter. Its the simplest interface possible. R

Declarative User Interfaces for Python
Declarative User Interfaces for Python

Welcome to Enaml Enaml is a programming language and framework for creating professional-quality user interfaces with minimal effort. What you get A d

PyQt QGraphicsView with selection box. User can move vertical border of the box horizontally.

pyqt-horizontal-selection-square-graphics-view PyQt QGraphicsView with selection box. User can move vertical border of the box horizontally. Requireme

Function-Plotter - GUI Python program that plots functions that are entered by the user
Function-Plotter - GUI Python program that plots functions that are entered by the user

FunctionPlotter GUI Python program that plots functions that are entered by the user. The program takes minimum and maximum value for x and plot it as

Releases(v0.0.5)
Owner
Let's Build Great Things With Few Resources !
null
Dear PyGui: A fast and powerful Graphical User Interface Toolkit for Python with minimal dependencies

(This library is available under a free and permissive license however, if you Enjoy Dear PyGui please consider becoming a Sponsor) Dear PyGui is a si

Jonathan Hoffstadt 9.4k Jan 7, 2023
Advanced Zola Cabs integrated with tkinter Graphical User Interface (GUI) made for ZOHO Corp .

ZolaCabs Advanced Zola Cabs integrated with tkinter Graphical User Interface (GUI) made for ZOHO Corp. < Logs > username : zoho password : zoho [ Deve

Mastermind 9 Nov 18, 2021
A graphical user interface calendar with python

GUI-Calendar A graphical user interface calendar with python In this project I used tkinter module If you dont have tkinter module you can install it

Arone Sadegh 1 Dec 18, 2021
Py address book gui - An address book with graphical user interface developed with Python Tkinter

py_address_book_gui An address book with graphical user interface developed with

Milton 4 Feb 1, 2022
FPKG Maker GUI - A user friendly User Interface for fPKG Tools for PS4

Know Issues being worked on Please place this application on the root of a drive

null 26 Nov 27, 2022
Advanced GUI Calculator with Beautiful UI and Clear Code.

Advanced GUI Calculator with Beautiful UI and Clear Code.

Mohammad Dori 3 Jul 15, 2022
Rich.tui is a TUI (Text User Interface) framework for Python using Rich as a renderer.

rich.tui Rich.tui is a TUI (Text User Interface) framework for Python using Rich as a renderer. The end goal is to be able to rapidly create rich term

Will McGugan 17.1k Jan 4, 2023
Textual is a TUI (Text User Interface) framework for Python inspired by modern web development.

Textual is a TUI (Text User Interface) framework for Python inspired by modern web development.

Will McGugan 17.1k Jan 8, 2023
Kivy is an open source Python framework for creating cross-platform multi-touch mobile applications with Natural User Interface.

Kivy is an open source Python framework for creating cross-platform multi-touch mobile applications with Natural User Interface.

Grace Ugochi Nneji 3 Feb 15, 2022
Tkinter Designer - Create Beautiful Tkinter GUIs by Drag and Drop.

Tkinter Designer is created to speed up and beautify Python GUI Experience. It uses well know design software called Figma. Which makes creating Tkinter GUI in Python a piece of cake.

Parth Jadhav 5.2k Jan 9, 2023