Créez un simple générateur d'images par points avec Flask

Formulaire rempli

Cela ressemble à ce qui suit. https://flaskandheroku.herokuapp.com/

spécification

• Les images de points générées au hasard sont affichées sur l'écran supérieur --Lorsque vous appuyez sur le bouton "Génération aléatoire", les images de points sont affichées au hasard. --L'image à points n'est pas une image mais est composée des caractères "■ (carré)"
• La technologie de conversion des caractères en images n'est pas implémentée --Placez le bouton de partage Twitter

Comment j'ai décidé de le faire

――J'étudie Flask, donc je voulais faire un livrable simple ――Mon passe-temps est de dessiner les images de points suivantes, donc je voulais créer un outil qui puisse être généré automatiquement. https://akihanari.github.io/gif-amabie/

Langue, cadre, etc.

• HTML5
• CSS3
• Bootstrap
• Python
• Flask
• Heroku

organisation des fichiers

• templates
• layout.html
• index.hrml
• app.py
• Procfile
• requirements.txt

Mécanisme (code)

C'est simple.

# app.py

@app.route('/')
def dot_gene():
    numbers = [[random.randrange(4) for i in range(8)] for j in range(8)]
    return render_template("index.html", numbers = numbers)

Commencez par créer une fonction double boucle dans @ app.route ('/'). Cette fois, je vais faire 8x8 points, mais pour décider si la couleur de chaque point est blanche ou noire, Génère un nombre aléatoire de 0 à 3. Par exemple, cela ressemble à ceci

11230032
31231000
30023111
12213303
01202010
32111320
01322031
00011203

Ensuite, nous le traiterons dans index.html.

# index.html
{% extends "layout.html" %}
      {% block content %}
        <h1>Pixel art generator</h1>
        <div class="spaces">
          {% for number in numbers %}
            {% for num in number %}
                {% if num == 0 %}
                  <font color="#000000">■</font>
                {% elif num == 1%}
                  <font color="#ededed">■</font>
                {% elif num == 2%}
                  <font color="#ededed">■</font>
                {% else %}
                  <font color="#ededed">■</font>
                {% endif %}
              {% endfor %}
              <br>
          {% endfor %}
       </div>
        .
        .
        .
{% endblock %}

~~ Je suis vraiment désolé que le code soit très sale ~~ Associez le numéro de double boucle créé à "■", blanc ou noir. Cette fois, uniquement lorsque le nombre est 0, il est converti en noir, et quand ce n'est pas le cas, il est converti en couleur blanche (similaire). Ensuite, une telle image de point sera affichée.

Points d'amélioration

• L'image du point est légèrement cassée lorsqu'elle est affichée sur un smartphone.
• Je veux pouvoir convertir l'image de point générée en une image et l'enregistrer. ――Je veux générer une image de points qui ressemble plus à une image de points

référence

Introduction à paiza Flask 1: Créons une application web avec Python