Qu'est-ce que le serveur local Anime GIF?

PEASmotch!, qui a été développé sur la base du logiciel gratuit 9VAe, a été installé à Kids Plaza Osaka avec 5 unités 150 à 200 unités par jour. Une animation est en cours de réalisation.
L'animation vectorielle créée est enregistrée sur le serveur partagé et affichée sur un grand écran sous forme d'animation continue à l'aide de Dedicated Player 9view. Cependant, pendant un certain temps, il y a eu une demande de mettre l'animation créée dans un smartphone et de la ramener à la maison.
Pour y parvenir, nous avons publié le programme python qui convertit l'animation en GIF animé sur le serveur partagé.
Cette fois, j'ai créé un programme serveur accessible depuis un smartphone à l'aide de Flask, je vais donc le publier.
Vous pouvez télécharger l'anime sur votre smartphone --Afficher l'adresse URL du site avec un code QR
Vous pouvez télécharger une animation depuis votre application smartphone (9VAe, PEASmotch)

Les articles suivants sont également pertinents

article	ordinateur	téléphone intelligent
Installation d'un point d'accès WiFi	〇	〇
Enregistrer l'animation dans un dossier partagé, dépistage continu	〇
Téléchargez l'animation créée sur votre smartphone (cet article)		〇
Télécharger une animation depuis l'application pour smartphone (cet article)		〇

Voici un exemple d'exécution de programme. Si vous accédez à l'URL affichée avec votre smartphone, le même écran s'affichera et vous pourrez télécharger l'animation.

サーバーを実行した図

Installation de Python

Le programme utilise python. Je l'ai fait avec Windows et Raspberry Pie.

Pour les fenêtres

--Il existe différentes versions et bibliothèques de python, mais j'ai utilisé anaconda qui peut installer un environnement virtuel. --Je veux utiliser le japonais, alors téléchargez Python Ver3. (Il était nécessaire d'exécuter "anaconda-navigator" après avoir installé anaconda à partir du logo Windows, mais les autres pourraient être exécutés selon l'article)

Pour la tarte aux framboises

--python (Ver2), python3 (Ver3) sont inclus depuis le début

Installation de Flask et de la bibliothèque de codes QR

Installez Flask et la bibliothèque pour le code QR avec la commande suivante. (Pour la tarte aux framboises, utilisez pip3 et python3)

pip install Flask
pip install qrcode
pip install pillow

Serveur local GIF animé

L'environnement est prêt et le programme

Structure des dossiers

La structure de dossiers suivante a été utilisée en référence à l'exemple Flask. app.py est le corps principal du programme. Voici le code qui lance Flask. Le site Web répond en utilisant les données de configuration dans les modèles.

py　　　　
　　├──app.py (corps du programme)
　　├──static　　　　
　　│　　　　├──qrcode.png(Créé par programmation)　　　　
　　│　　　　└──setpath.ini(Créé par programmation)　　　　
　　└──templates　　　　
　　　　　　　├──index.html　　　　
　　　　　　　└──layout.html

code source de python Flask

--Tout le code source doit être écrit en UTF-8

templates

Le contenu du site Web est écrit en index.html.

`index.html`


{% extends "layout.html" %}
{% block content %}
<img src="{{ url_for('static', filename='qrcode.png') }}" width="200">
<br>
Vous pouvez le télécharger en appuyant longuement sur l'image.<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 %}

La description	sens	Supplément
{% extends "layout.html" %}	Fichier de paramètres de mise en page
{% block content %}...{% endblock %}	Cette partie est le contenu
<img src="{{ url_for('static', filename='qrcode.png') }}"	Afficher les images QR dans un dossier statique
{{ message }}	Affichage de la chaîne de caractères du message d'argument
{% if images %}	S'il y a un argument images (liste des noms de fichiers)
{% for path in images %}	Chemin de l'élément de la liste des images (nom du fichier)
{% if '.eva.gif' in path %}	.eva.Traiter uniquement les fichiers contenant des gif
<img src="images/{{ path }}"	images/Fichiers de dossier
{{ path }}	Afficher également le nom du fichier
{% endif %}	Fin de si
{% endfor %}	Fin de pour

`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>

La description	sens	Supplément
{% block content %}{% endblock %}	Il y a du contenu dans cette partie

app.py

Les valeurs suivantes sont définies en fonction de l'environnement

constant	sens	Supplément
EVA_FOLDER	Dossier pour enregistrer l'animation	Dans l'exemple, "/home/pi/2018」
QVIEW_EXE	9view.Chemin complet de l'exe	Même sous Windows, le délimiteur de chemin'/'
HTTP_URL	Adresse URL à publier	Initialement'127.0.0.1'Tester avec
HTTP_PORT	Port à publier	Premier test à 5000

`app.py`


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

import os         #Opération de fichier
import subprocess #Exécution du programme
import time       #Traitement du temps
import re         #Remplacement de personnage,Expressions régulières
import webbrowser #navigateur
import threading  # multi thread
import qrcode     #Génération de code QR

EVA_FOLDER = '/home/pi/xxxxxx'    #Dossier pour enregistrer l'animation
QVIEW_EXE = '/home/pi/9va/9view'  #9view.Chemin complet de l'exe
HTTP_URL = '192.168.99.1'         #Adresse URL à publier
HTTP_PORT = 8080                  #Port à publier

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"]) #Téléchargement d'anime
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)]   #contribution
      for fn in files:
        eva = os.path.join(inpFolder,fn)
        if(not eva.endswith('.eva')):
            continue
        if( '_Pendant l'édition' in eva):     #Ignorer les fichiers enregistrés automatiquement
            continue
        if( '_Tochu' in eva):
            continue
        if( '_autosave' in eva):
            continue
        no = int(os.path.splitext(os.path.basename(fn))[0])
        if(no > mno):               #Trouvez le numéro final
            mno = no

      savepath = os.path.join(inpFolder, '%04d.eva' % (mno+1))
      file.save(savepath)
  return str(mno+1)   #Renvoie le numéro enregistré


#Boucle de conversion GIF
def loop(self,askFolder):
  global inpFolder
  drmax = '0000-0000'
  while True:
    dirs = [f for f in os.listdir(EVA_FOLDER)] #Obtenez la dernière date
    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)]   #contribution
    for fn in files:
        if(os.path.splitext(fn)[1] != '.eva'):
            continue
        gif = fn + '.gif'  #Nom du fichier GIF
        gif = os.path.join(inpFolder,gif)
        eva = os.path.join(inpFolder,fn)
        if( '_Pendant l'édition' in eva):     #Ignorer les fichiers enregistrés automatiquement
            continue
        if( '_Tochu' in eva):
            continue
        if( '_autosave' in eva):
            continue
        if(os.path.exists(gif)):    #gif existe,Vérification du coin de création
            if(os.path.getmtime(gif) > os.path.getmtime(eva)):
                continue
        cmd = (QVIEW_EXE , eva , '-gif') #-Convertir en GIF avec l'option gif
        print(cmd)                  #Montrer qu'il a été converti
        subprocess.run(cmd)         #création de gif
    time.sleep(1.0) #sleep(Spécifiez les secondes)
  return inpFolder


t = MyThread()
inpFolder = loop(t,True)            #Créer un gif lorsque eva est corrigé, déplacer vers un nouveau dossier
t.start()

html = 'http://' + HTTP_URL + ':' + str(HTTP_PORT)
img = qrcode.make(html)          #Création de code QR
img.save('static/qrcode.png')
with open('static/setpath.ini', mode='w') as f:
    f.write(html)


if __name__ == '__main__':
    webbrowser.open(html)            #Lancer le navigateur
    app.run(debug=True, host=HTTP_URL, port=HTTP_PORT)

La description	sens	Supplément
from flask import Flask, ...	Extension pour flacon
import	Rendre les fonctions disponibles
app = Flask(name)	Le nom du processus
class MyThread(threading.Thread):	Définition multithread	Exécuter simultanément dans Flask
def run(self):	Traitement à exécuter par MyThread
@app.route('/')	Ce qui est affiché par l'accès à l'itinéraire
def:	Définition des fonctions
global inpFolder	La variable impFolder est commune partout
render_template('index.html'	Modèles de flacons/index.Afficher html
os.listdir(inpFolder)[::-1]	Tous les fichiers inpFolder	-1 est le dernier sens
sorted(xxx, reverse=True)	Trier la liste dans l'ordre inverse
@app.route('/images/path:path')	/images/Ce qui s'affiche en accédant	index.Appelé depuis html
send_from_directory(inpFolder, path)	fichier de chemin dans le dossier inpFolder
@app.route('/',methods=["POST"])	Traitement à la réception du POST	Pour télécharger
request.files['file']	Fichier POSTÉ
if(file.filename.endswith('.eva')):	L'extension est.Pour eva
files = [f for f in os.listdir(inpFolder)]	Liste des fichiers inpFolder
os.path.splitext(os.path.basename(fn))[0]	Nom de fichier sans extension
int(Chaîne)	Chaîneを数値に変換
'%04d.eva' % (mno+1)	Valeur numérique(mno+1)À une chaîne
savepath = os.path.join(inpFolder,nom de fichier)	フォルダとnom de fichierの結合
file.save(savepath)	Enregistrer le fichier pour enregistrer le chemin	Enregistrer le fichier POSTÉ sous un nom différent
if re.match('[0-9]{4}-[0-9]{4}', s)	s correspond à "4 chiffres-Dans le cas de "4 chiffres"	Expressions régulières
if(os.path.exists(gif)):	Si le fichier existe
os.path.getmtime(gif)	Heure de mise à jour du fichier
cmd = (QVIEW_EXE , eva , '-gif')	Création de commandes	Convertir une animation EVA en GIF
subprocess.run(cmd)	Exécution de la commande
time.sleep(1.0)	Arrêtez-vous pendant 1 seconde
t = MyThread() t.start()	Exécution multithread
img = qrcode.make(html)	Créer une image de code QR img
img.save('static/qrcode.png')	Enregistrer l'image img dans le dossier statique
with open('static/setpath.ini', mode='w') as f:	Ouvrir le fichier d'écriture
f.write(html)	Ecrire une chaîne
webbrowser.open(html)	Lancer le navigateur
app.run(debug=True, host=HTTP_URL, port=HTTP_PORT)	Exécuter en spécifiant l'URL et le port

Comment utiliser

Voici un exemple de course sur une tarte aux framboises

--Création d'un point d'accès WiFi avec Raspberry Pie et publication à l'URL "192.168.99.1". Cliquez ici pour savoir comment faire

Accédez au dossier py du terminal. Exécutez le programme avec python3 app.py
Le navigateur s'ouvre et ressemble à ceci![Ezgif.com-video-to-gif.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0 /67734/3bed0f33-3ccb-1236-1d82-fe8d7bce0b62.gif)

Comment télécharger l'anime sur votre smartphone

Connectez le WiFi au point d'accès Raspberry Pie avec les paramètres WiFi de votre smartphone
Regardez le code QR sur votre smartphone et ouvrez l'URL ＞ Le même écran que ci-dessus s'ouvre
Vous pouvez télécharger l'animation GIF en appuyant longuement sur l'animation et en sélectionnant "Télécharger" dans le menu.

Comment télécharger une animation depuis une application pour smartphone (PEASmotch! One)

Connectez le WiFi à un point d'accès à la tarte aux framboises
Regardez le code QR sur votre smartphone et ouvrez l'URL ＞ Le même écran que ci-dessus s'ouvre

paramètres setpath.ini

Appuyez et maintenez setpath.ini et sélectionnez "Télécharger le lien"> téléchargez le fichier setpath.ini
Utilisez une application telle que File Manager pour placer le fichier setpath.ini dans le dossier "PEASmotch"
Démarrez PEASmotch, touchez le logo PEAS, et si "Upload" est ajouté en bas du menu, c'est OK.

--L'élément «Télécharger» à la fin du menu s'affiche uniquement lorsque le smartphone est connecté à 9VAe Anime GIF POST et que le dossier de sauvegarde est accessible. --Créez une animation et touchez «Télécharger» pour enregistrer l'animation et la convertir automatiquement en fichier gif. (MyThread du programme app.py ci-dessus détecte un nouveau fichier et le convertit d'EVA en GIF)

La fonction de téléchargement de la version du smartphone a été installée dans PEASmotch! One depuis la Ver.0.6.12 (200110). Dans le cas de la version PC, la fonction pour écrire le chemin complet du dossier partagé dans setpath.ini dans le dossier 9va_data et l'enregistrer directement a été installée.

Créer un serveur local GIF animé avec Python + Flask