add images

requirements.txt

@@ -4,3 +4,4 @@ itsdangerous==0.24
 Jinja2==2.9.6
 MarkupSafe==1.0
 Werkzeug==0.12.2
+requests

soundboard.py

@@ -1,6 +1,9 @@
 import os
+import shutil
 import subprocess
+import tempfile
 
+import requests
 from flask import Flask, render_template, request, redirect, url_for, send_from_directory
 
 import config
@@ -53,3 +56,19 @@ def index(sound=None, text=None, video=None):
 @app.route("/sounds/<path:name>")
 def sounds(name):
 	return send_from_directory(config.path, name)
+
+@app.route("/image/")
+def image(imageurl=None):
+	if not imageurl:
+		return False
+	with tempfile.NamedTemporaryFile(mode="wb", buffering=True) as tmp:
+		image = requests.get(imageurl, stream=True)
+		if not image.ok:
+			return False
+		shutil.copyfileobj(image.raw, tmp)
+		subprocess.Popen(["killall", "pngview"])
+		subprocess.Popen(["/opt/raspidmx/pngview/pngview", "-b", "0", "-d", "0", "-n", tmp.name])
+
+@app.route("/kill/images")
+def killImages():
+	subprocess.Popen(["killall", "pngview"])

static/main.js

@@ -197,3 +197,20 @@ function killAllAudio() {
 		ajaxRequest("/?killvideo=yes");
 	}
 }
+
+
+
+/*
+* Reads the stream url from input with id #streaming-url and forwards it to the server using AJAX.
+*/
+function showImage() {
+	var streamUrl = document.querySelector("#streaming-url").value;
+	ajaxRequest("/image/?imageurl="+encodeURI(streamUrl));
+}
+
+/*
+* Kills all images
+*/
+function killAllImages() {
+	ajaxRequest("/kill/images");
+}

templates/index.html

@@ -33,6 +33,7 @@
 			<a href="#sounds" id="sounds-nav">Sounds</a>
 			<a href="#streams">Streams</a>
 			<a href="#voice">Voices</a>
+			<a href="#image">Images</a>
 		</nav>
 		<content>
 			<section id="sounds" style="display:none;">
@@ -66,6 +67,16 @@
 					<input type="submit" value="Voice" />
 				</form>
 			</section>
+			<section id="images" style="display:none;">
+				<div>
+					<form>
+						<label for="image">Image URL</label>
+						<input id="streaming-url" type="text" name="image" placeholder="paste image url here..." />
+					</form>
+					<button onclick="showImage();">Play!</button>
+				</div>
+				<button name="submit" onclick="killAllImages();">clear images</button>
+			</section>
 		</content>
 		<script src="/static/howler.js"></script>
 		<script src="/static/main.js"></script>