Text to ASCII Art in Django
Hello internet programmer. Let’s make a small project, Text to ASCII Art Generator in Django. So let’s jump into the code.
Setup virtual environment
For this project, I’m using python3.10. First, create a directory TextToASCII and open a terminal in that directory. Now enter the following command to create the virtual environment for your project.
python3.10 -m venv venv
Activate your environment
source venv/bin/activate
Installation
Make sure your environment is activated okay. Now we are going to install Django and pyfiglet.
pip install django pyfiglet
We use pyfiglet python module to generate Text to ASCII text art in python. pyfiglet takes ASCII text and renders it in ASCII art fonts. figlet_format method converts ASCII text into ASCII art fonts.
Create Project
Now installation is done so let’s create a Django project. Enter the following command to create a project.
django-admin startproject core
you can name it anything, here I name it core okay.
Ok now cd core and run the Django server.
core$ python manage.py runserver
Create App
This is a small app you can also write views inside the main project (here core) but for the best practices, I’m creating the Django App. Enter the following command to create an app
python manage.py startapp textart
register your app in settings.py
INSTALLED_APPS = [
"django.contrib.admin",
"django.contrib.auth",
"django.contrib.contenttypes",
"django.contrib.sessions",
"django.contrib.messages",
"django.contrib.staticfiles",
"textart", # your app
]
views.py
Inside your app textart, open views.py and make look like the following,
from django.shortcuts import render
import pyfiglet
def text_to_ascii(request):
# getting all fonts provided by pyfiglet
fonts = pyfiglet.FigletFont.getFonts()
# getting form data
text = request.GET.get('text', '')
font = request.GET.get('font', 'slant')
result = pyfiglet.figlet_format(text, font=font)
context = {
'fonts': sorted(fonts),
'result': result
}
return render(request, 'index.html', context)
Inside text_to_ascii function, first fonts variable stores the list of all fonts provided by pyfiglet and we use this font list in the template to allow the user to select a font from the list.
Then, we get form data from the template, user text, and font.
And result stores the generated string which we return to HTML template index.html. Here you can fonts are also going to pass as a sorted list. Sorted alphabetically because it is easier to find a font.
urls.py
Create urls.py in textart app and add the following,
from django.urls import path
from . import views
urlpatterns = [
path('', views.text_to_ascii, name='text_to_ascii'),
]
connect this urls.py with the main project’s urls.py. open core/urls.py and add the following code.
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path("admin/", admin.site.urls),
path("", include("textart.urls")), #this
]
Templates
Create a templates directory in the root directory and open settings.py, find DIR, and add this
TEMPLATES = [
{
"BACKEND": "django.template.backends.django.DjangoTemplates",
"DIRS": [ BASE_DIR / "templates" ], #this
"APP_DIRS": True,
"OPTIONS": {
"context_processors": [
"django.template.context_processors.debug",
"django.template.context_processors.request",
"django.contrib.auth.context_processors.auth",
"django.contrib.messages.context_processors.messages",
],
},
},
]
Your directory structure looks like this,
Now create index.html inside the templates directory and add the following code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- for dark theme hehe ez-->
<meta name="color-scheme" content="dark">
<title>Text to ASCII Art</title>
<style>
*{
box-sizing: border-box;
}
h1, form, .text, small{
display: flex;
justify-content: center;
align-items: center;
}
small{
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: 0.5rem;
background-color: #000;
color: #fff;
}
form{
gap: 5px;
}
input, select, button{
padding: 10px;
height: 40px;
}
button{
width: 100px;
}
</style>
</head>
<body>
<main>
<h1>
Text to ASCII Art
</h1>
<form>
<input text="text" name="text" placeholder="Enter text" value="{{ request.GET.text }}">
<select name="font">
{% for font in fonts %}
<option value="{{ font }}"
{% if font == request.GET.font %}
selected
{% endif %}
>
{{ font }}
</option>
{% endfor %}
</select>
<button type="submit">Submit</button>
</form>
<div class="text"><pre>{{ result }}</pre></div>
<small> Follow me on Instagram <a href="https://www.instagram.com/code_snail/">@code_snail</a></small>
</main>
</body>
</html>
Inside the form, we are taking text from a user which is passed inside the view. Here we are submitting the form with GET method okay. see value="{{ request.GET.text }}" this will get the GET variable value so after submitting the form text have the same value just for a better user experience.
Then we are iterating through the fonts with the option tags. This fonts list we got from our views.py, every time you render this page you get the list (not good hehe but okay). So now the user can select font from the option and submit the form and get the result.
{% if font == request.GET.font %} selected {% endif %} this code is the same as the text input, here if the GET variable has the same font then it will get selected after submitting, just for a better user experience.
After submitting the form, the template receives the context with the result string and yes font list. Now print result inside <pre> tag because by default string prints in a single line in an HTML document but <pre> tag defines preformatted text.
Output
Run the server and enter text, select font, and hit submit. You get the result
GitHub repo: https://github.com/SoniArpit/text-to-ascii-art-django
Happy Coding :)