Dress up your code with a beautiful graphical user interface !

Related tags

GUI Developmentgui
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 !
LCD GUI for P4wnP1 ALOA

GUI for P4wnP1 Colorful UI interface for P4wnP1 ALOA Don't pwn just as a USB client. Use also the USB host capabilities! UPS Lite support Scalability

John 7 Dec 13, 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 09, 2023
A simple, yet powerful web GUI to manage your Wireguard server, powered by Flask.

Linguard Linguard aims to provide a clean, simple yet powerful web GUI to manage your WireGuard server, and it's powered by Flask. Read the docs for f

Jose Antonio Mazón San Bartolomé 111 Jan 07, 2023
PyEditor - A Simple Text Editor for python

PyEditor work in progress Text Editor for python Installation git clone https://github.com/ArmenG888/PyEditor Install the libraries Linux or mac pip

ArmenG 3 Mar 15, 2022
A GUI frontend for the Kamyroll-API using Python and PySide6

Kamyroll-GUI A GUI frontend for the Kamyroll-API using Python and PySide6 Usage When starting the application you will be presented with a list and so

Simon Sawicki 15 Oct 09, 2022
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

Clayton Garcia da Silva 3 Nov 19, 2021
Web-Broswer simple using PyQt5 tools

Web-Broswer Simple web broswer made using PyQt Completely simple and easy to use How to set it up git clone https://github.com/AsjadOooO/Web-Broswer.g

Asjad 3 Nov 13, 2021
Cross-platform BrowserViews for the desktop.

Webview We use wxPython Phoenix to provide webviews. It's cross platform between Windows and macOS primarily, Linux versions require extra setup. Appl

1 Feb 12, 2022
pyglet is a cross-platform windowing and multimedia library for Python, for developing games and other visually rich applications.

pyglet pyglet is a cross-platform windowing and multimedia library for Python, intended for developing games and other visually rich applications. It

1.3k Jan 01, 2023
An qt asset browser for applications like houdini/nuke/maya/blender

AssetBrowser A qt asset browser for applications like houdini/nuke/maya/blender Currently in development Note: Only houdini plugin available during de

Jonas Sorgenfrei 6 Aug 05, 2022
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 04, 2023
python+PySimpleGUI+pyserial+threading

GUI_pyserial python+PySimpleGUI+pyserial+threading 功能 1.利用PySimpleGUI制作图形用户界面 2.利用threading实现多线程调用pyserial处理串口通信 模块版本 PySimpleGUI 4.46.0 pyserial 3.5

2 Dec 27, 2022
A simple GUI designer for the python tkinter module

Leer en Español Welcome to Pygubu! Pygubu is a RAD tool to enable quick and easy development of user interfaces for the Python's tkinter module. The u

Alejandro Autalán 1.7k Dec 27, 2022
A simple one-line quick entry GUI for your Obsidian daily notes in markdown format.

Quick-note-entry-for-Obsidian A simple one-line quick entry GUI for your Obsidian daily notes in markdown format. Log your day quickly with this simpl

Adrian Papineau 22 Oct 04, 2022
Currency calculator with PyQt5

currency-calculator currency calculator with PyQt5

Vusal Akhundzada 2 Mar 08, 2022
CBMPy Metadraft: a flexible and extensible genome-scale model reconstruction tool

CBMPy Metadraft: a flexible and extensible, GUI-based genome-scale model reconstruction tool that supports multiple Systems Biology standards.

Systems Biology Lab, Vrije Universiteit Amsterdam 1 Mar 14, 2022
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
Custom GUI for your Blender add-ons using Dear ImGui

Dear Imgui for Blender Use the infamous Dear ImGui library directly in your Blender scripts! This means custom GUI drawing in your operators: Normally

Elie Michel 83 Dec 25, 2022
A Minimalistic Backup GUI for your Windows, Mac or Linux

BlobBackup is a minimalistic backup utility for your Windows, Mac or Linux computer. With an excellent engine, extensive storage support, and an easy

Bimba Shrestha 283 Nov 30, 2022
Basic browser based on PyQt5

goneDev-browser "basic browser based on PyQt5" This application is primarily built on macOS with more adaptibility for MacOS than Windows. v1.0 will s

Harsh ADV) 1 Jan 19, 2022