[PYTHON] Erstellen Sie mit Flask einen einfachen Punktbildgenerator

Vollständiges Formular

Es sieht wie folgt aus. https://flaskandheroku.herokuapp.com/

Spezifikation

• Zufällig erzeugte Punktbilder werden auf dem oberen Bildschirm angezeigt
• Wenn Sie die Taste "Zufällige Generierung" drücken, werden Punktbilder zufällig angezeigt.
• Das Punktbild ist kein Bild, sondern besteht aus den Zeichen "■ (Quadrat)".
• Die Technologie zum Konvertieren von Zeichen in Bilder ist nicht implementiert
• Platzieren Sie den Twitter-Share-Button

Wie ich mich dazu entschlossen habe

»Ich studiere Flask, also wollte ich ein einfaches Ergebnis machen ――Mein Hobby ist es, die folgenden Punktbilder zu zeichnen, deshalb wollte ich ein Werkzeug erstellen, das automatisch generiert werden kann. https://akihanari.github.io/gif-amabie/

Sprache, Rahmen usw.

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

Dateiorganisation

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

Mechanismus (Code)

Es ist einfach.

# 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)

Erstellen Sie zunächst eine Doppelschleifenfunktion in @ app.route ('/'). Dieses Mal mache ich 8x8 Punkte, aber um zu entscheiden, ob die Farbe jedes Punktes weiß oder schwarz ist, Erzeugt eine Zufallszahl von 0 bis 3. Zum Beispiel sieht es so aus

11230032
31231000
30023111
12213303
01202010
32111320
01322031
00011203

Als nächstes werden wir es in index.html verarbeiten.

# 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 %}

~~ Es tut mir sehr leid, dass der Code sehr schmutzig ist ~~ Verknüpfen Sie die erstellte Doppelschleifennummer mit "■", weiß oder schwarz. Dieses Mal wird die Zahl nur dann in Schwarz umgewandelt, wenn sie nicht 0 ist, und wenn dies nicht der Fall ist, wird sie in weiße (ähnliche) Farbe umgewandelt. Dann wird ein solches Punktbild angezeigt.

Verbesserungspunkte

• Das Punktbild ist auf einem Smartphone leicht unterbrochen.
• Ich möchte das erzeugte Punktbild in ein Bild konvertieren und speichern können. ――Ich möchte ein Punktbild erzeugen, das eher einem Punktbild ähnelt

Referenz

Einführung in paiza Flask 1: Erstellen wir eine Webanwendung mit Python