Was ist der lokale Anime GIF-Server?

PEASmotch!, das auf der Basis der kostenlosen Software 9VAe entwickelt wurde, wurde auf dem Kids Plaza Osaka mit 5 Einheiten 150 bis 200 Einheiten täglich “installiert. Eine Animation wird erstellt.
Die erstellte Vektoranimation wird auf dem freigegebenen Server gespeichert und mit Dedicated Player 9view als fortlaufende Animation auf einer großen Anzeige angezeigt. Für einige Zeit gab es jedoch die Aufforderung, die erstellte Animation in ein Smartphone zu integrieren und mit nach Hause zu nehmen.
Um dies zu erreichen, haben wir das Python-Programm, das Animation in animiertes GIF konvertiert auf dem gemeinsam genutzten Server veröffentlicht.
Dieses Mal habe ich ein Serverprogramm erstellt, auf das von einem Smartphone mit Flask zugegriffen werden kann, damit ich es veröffentlichen kann.
Du kannst Anime auf dein Smartphone herunterladen
Zeigen Sie die URL-Adresse der Site mit einem QR-Code an
Sie können Animationen von Ihrer Smartphone-App (9VAe, PEASmotch) hochladen.

Die folgenden Artikel sind ebenfalls relevant

Artikel	Computer	Smartphone
Installation des WiFi Access Points	〇	〇
Speichern Sie die Animation in einem freigegebenen Ordner und überprüfen Sie sie kontinuierlich	〇
Laden Sie die erstellte Animation auf Ihr Smartphone herunter (dieser Artikel)		〇
Laden Sie die Animation von der Smartphone-App hoch (dieser Artikel)		〇

Das Folgende ist ein Beispiel für die Programmausführung. Wenn Sie mit Ihrem Smartphone auf die angezeigte URL zugreifen, wird derselbe Bildschirm angezeigt und Sie können die Animation herunterladen.

サーバーを実行した図

Python-Installation

Das Programm verwendet Python. Ich habe es mit Windows und Raspberry Pie gemacht.

Für Windows

Es gibt verschiedene Versionen und Bibliotheken von Python, aber ich habe [Anaconda, die eine virtuelle Umgebung installieren kann] verwendet (https://yukituna.com/812/).
Ich möchte Japanisch verwenden, also lade Python Ver3 herunter. (Nach der Installation von anaconda über das Windows-Logo musste "anaconda-navigator" ausgeführt werden, die anderen konnten jedoch gemäß Artikel ausgeführt werden.)

Für Himbeerkuchen

--python (Ver2), python3 (Ver3) sind von Anfang an enthalten

Installation der Kolben- und QR-Codebibliothek

Installieren Sie Flask und die Bibliothek für QR-Code mit dem folgenden Befehl. (Verwenden Sie für Himbeerkuchen pip3 und python3)

pip install Flask
pip install qrcode
pip install pillow

Anime GIF lokaler Server

Die Umgebung ist bereit und das Programm

Ordnerstruktur

Die folgende Ordnerstruktur wurde unter Bezugnahme auf die Kolbenprobe verwendet. app.py ist der Hauptteil des Programms. Hier ist der Code, der Flask startet. Die Website antwortet mit den Konfigurationsdaten in den Vorlagen.

py　　　　
　　├──app.py (Programmkörper)
　　├──static　　　　
　　│　　　　├──qrcode.png(Programmgesteuert erstellt)　　　　
　　│　　　　└──setpath.ini(Programmgesteuert erstellt)　　　　
　　└──templates　　　　
　　　　　　　├──index.html　　　　
　　　　　　　└──layout.html

Python Flask Quellcode

Der gesamte Quellcode sollte in UTF-8 geschrieben sein

templates

Der Inhalt der Website ist in index.html geschrieben.

`index.html`


{% extends "layout.html" %}
{% block content %}
<img src="{{ url_for('static', filename='qrcode.png') }}" width="200">
<br>
Sie können es herunterladen, indem Sie lange auf das Bild drücken.<br>
Long press on the image to download.<br>
<div  align="right">
{{ message }} <br>
<a href="{{ url_for('static', filename='setpath.ini') }}">setpath.ini</A>
</div>
{% if images %}
  {% for path in images %}
    {% if '.eva.gif' in path %} 
      <div>
        <img src="images/{{ path }}" style="margin-top: 10px; vertical-align: bottom; width: 200px;">
        {{ path }}
      </div>
    {% endif %}
  {% endfor %}
{% endif %}

{% endblock %}

Beschreibung	Bedeutung	Ergänzung
{% extends "layout.html" %}	Einstellungsdatei für das Seitenlayout
{% block content %}...{% endblock %}	Dieser Teil ist der Inhalt
<img src="{{ url_for('static', filename='qrcode.png') }}"	QR-Bilder im statischen Ordner anzeigen
{{ message }}	Zeichenfolgenanzeige der Argumentnachricht
{% if images %}	Wenn es ein Argument gibt Bilder (Dateinamenliste)
{% for path in images %}	Bilder listen den Elementpfad (Dateiname) der Reihe nach auf
{% if '.eva.gif' in path %}	.eva.Verarbeiten Sie nur Dateien, die gif enthalten
<img src="images/{{ path }}"	images/Ordnerdateien
{{ path }}	Zeigen Sie auch den Dateinamen an
{% endif %}	Ende von if
{% endfor %}	Ende von für

`layout.html`


<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>9VAe Anime Post</title>
  </head>
  <body>
    {% block content %}{% endblock %}
  </body>
</html>

Beschreibung	Bedeutung	Ergänzung
{% block content %}{% endblock %}	Dieser Teil enthält Inhalte

app.py

Die folgenden Werte werden je nach Umgebung festgelegt

Konstante	Bedeutung	Ergänzung
EVA_FOLDER	Ordner zum Speichern der Animation	Im Beispiel "/home/pi/2018」
QVIEW_EXE	9view.Voller Pfad der Exe	Auch unter Windows ist der Pfadbegrenzer'/'
HTTP_URL	Zu veröffentlichende URL-Adresse	Anfänglich'127.0.0.1'Test mit
HTTP_PORT	Zu veröffentlichender Port	Erster Test bei 5000

`app.py`


from flask import Flask, render_template, request, redirect, url_for, send_from_directory, make_response

import os         #Dateivorgang
import subprocess #Programmausführung
import time       #Zeitverarbeitung
import re         #Zeichenersatz,Reguläre Ausdrücke
import webbrowser #Browser
import threading  # multi thread
import qrcode     #QR-Code-Generierung

EVA_FOLDER = '/home/pi/xxxxxx'    #Ordner zum Speichern der Animation
QVIEW_EXE = '/home/pi/9va/9view'  #9view.Voller Pfad der Exe
HTTP_URL = '192.168.99.1'         #Zu veröffentlichende URL-Adresse
HTTP_PORT = 8080                  #Zu veröffentlichender Port

app = Flask(__name__)

inpFolder = EVA_FOLDER

class MyThread(threading.Thread):
    def __init__(self):
        super(MyThread, self).__init__()

    def run(self):
        loop(self,False)

@app.route('/')
def index():
  global inpFolder
  return render_template('index.html', images=sorted(os.listdir(inpFolder)[::-1], reverse=True), message = inpFolder)

@app.route('/images/<path:path>')
def send_js(path):
  global inpFolder
  return send_from_directory(inpFolder, path)

@app.route('/',methods=["POST"]) #Anime Upload
def save_eva():
  global inpFolder
  mno = -1
  #print("Posted file: {}".format(request.files['file']))
  file = request.files['file']
  if(file.filename.endswith('.eva')):
      files = [f for f in os.listdir(inpFolder)]   #Eingang
      for fn in files:
        eva = os.path.join(inpFolder,fn)
        if(not eva.endswith('.eva')):
            continue
        if( '_Während der Bearbeitung' in eva):     #Ignorieren Sie automatisch gespeicherte Dateien
            continue
        if( '_Tochu' in eva):
            continue
        if( '_autosave' in eva):
            continue
        no = int(os.path.splitext(os.path.basename(fn))[0])
        if(no > mno):               #Finde die endgültige Nummer
            mno = no

      savepath = os.path.join(inpFolder, '%04d.eva' % (mno+1))
      file.save(savepath)
  return str(mno+1)   #Gibt die gespeicherte Nummer zurück


#GIF-Konvertierungsschleife
def loop(self,askFolder):
  global inpFolder
  drmax = '0000-0000'
  while True:
    dirs = [f for f in os.listdir(EVA_FOLDER)] #Holen Sie sich das neueste Datum
    drs = [s for s in dirs if re.match('[0-9]{4}-[0-9]{4}', s)]
    for dr in drs:
      if dr > drmax:
        drmax = dr
    inpFolder = EVA_FOLDER + '/' + drmax
    if(askFolder):
        return inpFolder

    files = [f for f in os.listdir(inpFolder)]   #Eingang
    for fn in files:
        if(os.path.splitext(fn)[1] != '.eva'):
            continue
        gif = fn + '.gif'  #GIF-Dateiname
        gif = os.path.join(inpFolder,gif)
        eva = os.path.join(inpFolder,fn)
        if( '_Während der Bearbeitung' in eva):     #Ignorieren Sie automatisch gespeicherte Dateien
            continue
        if( '_Tochu' in eva):
            continue
        if( '_autosave' in eva):
            continue
        if(os.path.exists(gif)):    #gif existiert,Überprüfung der Erstellungsecke
            if(os.path.getmtime(gif) > os.path.getmtime(eva)):
                continue
        cmd = (QVIEW_EXE , eva , '-gif') #-Mit GIF-Option in GIF konvertieren
        print(cmd)                  #Zeigen Sie, dass es konvertiert wurde
        subprocess.run(cmd)         #GIF-Erstellung
    time.sleep(1.0) #sleep(Geben Sie Sekunden an)
  return inpFolder


t = MyThread()
inpFolder = loop(t,True)            #Erstellen Sie ein GIF, wenn eva behoben ist, und verschieben Sie es in einen neuen Ordner
t.start()

html = 'http://' + HTTP_URL + ':' + str(HTTP_PORT)
img = qrcode.make(html)          #QR-Code-Erstellung
img.save('static/qrcode.png')
with open('static/setpath.ini', mode='w') as f:
    f.write(html)


if __name__ == '__main__':
    webbrowser.open(html)            #Starten Sie den Browser
    app.run(debug=True, host=HTTP_URL, port=HTTP_PORT)

Beschreibung	Bedeutung	Ergänzung
from flask import Flask, ...	Erweiterung für Flasche
import	Funktionen verfügbar machen
app = Flask(name)	Der Name des Prozesses
class MyThread(threading.Thread):	Multithread-Definition	In Flask gleichzeitig ausführen
def run(self):	Von MyThread auszuführende Verarbeitung
@app.route('/')	Was wird durch den Routenzugriff angezeigt?
def:	Funktionsdefinition
global inpFolder	Die Variable impFolder ist überall gleich
render_template('index.html'	Flaschenvorlagen/index.HTML anzeigen
os.listdir(inpFolder)[::-1]	Alle inpFolder-Dateien	-1 ist die letzte Bedeutung
sorted(xxx, reverse=True)	Sortieren Sie die Liste in umgekehrter Reihenfolge
@app.route('/images/path:path')	/images/Was wird beim Zugriff angezeigt	index.Wird von HTML aufgerufen
send_from_directory(inpFolder, path)	Pfaddatei im Ordner inpFolder
@app.route('/',methods=["POST"])	Verarbeitung beim Empfang des POST	Zum Hochladen
request.files['file']	POST-Datei
if(file.filename.endswith('.eva')):	Die Erweiterung ist.Für Eva
files = [f for f in os.listdir(inpFolder)]	Listen Sie inpFolder-Dateien auf
os.path.splitext(os.path.basename(fn))[0]	Dateiname ohne Erweiterung
int(String)	Stringを数値に変換
'%04d.eva' % (mno+1)	Numerischer Wert(mno+1)Zu einer Zeichenfolge
savepath = os.path.join(inpFolder,Dateiname)	フォルダとDateinameの結合
file.save(savepath)	Datei im Sicherungspfad speichern	Speichern Sie die POST-Datei unter einem anderen Namen
if re.match('[0-9]{4}-[0-9]{4}', s)	s ist "4 Ziffern-Im Fall von "4 Ziffern"	Reguläre Ausdrücke
if(os.path.exists(gif)):	Wenn die Datei existiert
os.path.getmtime(gif)	Aktualisierungszeit der Datei
cmd = (QVIEW_EXE , eva , '-gif')	Befehlserstellung	Konvertieren Sie EVA-Animationen in GIF
subprocess.run(cmd)	Befehlsausführung
time.sleep(1.0)	1 Sekunde anhalten
t = MyThread() t.start()	Multithread-Ausführung
img = qrcode.make(html)	QR-Code-Bild erstellen img
img.save('static/qrcode.png')	Speichern Sie das Bild im statischen Ordner
with open('static/setpath.ini', mode='w') as f:	Schreibdatei öffnen
f.write(html)	Eine Zeichenfolge schreiben
webbrowser.open(html)	Starten Sie den Browser
app.run(debug=True, host=HTTP_URL, port=HTTP_PORT)	Führen Sie dies durch Angabe von URL und Port aus

Wie benutzt man

Hier ist ein Beispiel für das Laufen auf einem Himbeerkuchen

Mit Raspberry Pie einen WLAN-Zugangspunkt erstellt und unter der URL "192.168.99.1" veröffentlicht. Klicken Sie hier, um zu erfahren, wie es geht
Wechseln Sie in den Ordner py im Terminal. Führen Sie das Programm mit python3 app.py aus
Der Browser öffnet sich und sieht so aus![Ezgif.com-video-to-gif.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0 /67734/3bed0f33-3ccb-1236-1d82-fe8d7bce0b62.gif)

So laden Sie Anime auf Ihr Smartphone herunter

Verbinden Sie WLAN mit den WLAN-Einstellungen Ihres Smartphones mit einem Himbeerkuchen-Zugangspunkt
Sehen Sie sich den QR-Code auf Ihrem Smartphone an und öffnen Sie die URL. ＞ Der gleiche Bildschirm wie oben wird geöffnet
Sie können die GIF-Animation herunterladen, indem Sie lange auf die Animation drücken und "Download" aus dem Menü auswählen.

So laden Sie Animationen von der Smartphone-App hoch (PEASmotch! One)

Verbinden Sie WiFi mit einem Himbeerkuchen-Zugangspunkt
Sehen Sie sich den QR-Code auf Ihrem Smartphone an und öffnen Sie die URL. ＞ Der gleiche Bildschirm wie oben wird geöffnet

setpath.ini Einstellungen

Halten Sie setpath.ini gedrückt und wählen Sie "Download Link"> Download der Datei setpath.ini
Verwenden Sie eine App wie den Dateimanager, um die Datei setpath.ini im Ordner "PEASmotch" abzulegen
Starten Sie PEASmotch, berühren Sie das PEAS-Logo. Wenn unten im Menü "Hochladen" hinzugefügt wird, ist dies in Ordnung.

Der Eintrag "Hochladen" am Ende des Menüs wird nur angezeigt, wenn das Smartphone mit 9VAe Anime GIF POST verbunden ist und auf den Speicherordner zugegriffen werden kann. --Erstellen Sie eine Animation und berühren Sie "Hochladen", um die Animation zu speichern und automatisch in eine GIF-Datei zu konvertieren. (MyThread des obigen Programms app.py erkennt eine neue Datei und konvertiert sie von EVA in GIF.)
Die Funktion zum Hochladen der Smartphone-Version wurde in PEASmotch! One seit Ver.0.6.12 (200110) installiert. Bei der PC-Version wurde die Funktion installiert, den vollständigen Pfad des freigegebenen Ordners in setpath.ini in den Ordner 9va_data zu schreiben und direkt zu speichern.

Erstellen Sie mit Python + Flask einen animierten lokalen GIF-Server