Use Python string for HTML

This commit is contained in:
kngwyu 2021-04-19 20:15:33 +09:00
parent 22d7f419fc
commit e1af62cdc7
2 changed files with 31 additions and 31 deletions

View File

@ -1,27 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>MuJoCo maze visualizer</title>
</head>
<body>
<script>
var web_socket = new WebSocket('ws://127.0.0.1:{{port}}/ws');
web_socket.binaryType = "arraybuffer";
web_socket.onmessage = function(event) {
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var blob = new Blob([event.data], {type:'image/png'});
var url = URL.createObjectURL(blob);
var image = new Image();
image.onload = function() {
ctx.drawImage(image, 0, 0);
}
console.log(url);
image.src = url;
}
</script>
<div>
<canvas id="canvas" width="600" height="480"></canvas>
</div>
</body>
</html>

View File

@ -1,13 +1,42 @@
import asyncio import asyncio
import io import io
import multiprocessing as mp import multiprocessing as mp
import pathlib
import fastapi import fastapi
import uvicorn import uvicorn
from PIL import Image from PIL import Image
HTML = """
<!DOCTYPE html>
<html>
<head>
<title>MuJoCo maze visualizer</title>
</head>
<body>
<script>
var web_socket = new WebSocket('ws://127.0.0.1:{{port}}/ws');
web_socket.binaryType = "arraybuffer";
web_socket.onmessage = function(event) {
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var blob = new Blob([event.data], {type:'image/png'});
var url = URL.createObjectURL(blob);
var image = new Image();
image.onload = function() {
ctx.drawImage(image, 0, 0);
}
console.log(url);
image.src = url;
}
</script>
<div>
<canvas id="canvas" width="600" height="480"></canvas>
</div>
</body>
</html>
"""
class _ServerWorker(mp.Process): class _ServerWorker(mp.Process):
def __init__(self, pipe: mp.connection.Pipe, port: int) -> None: def __init__(self, pipe: mp.connection.Pipe, port: int) -> None:
@ -18,9 +47,7 @@ class _ServerWorker(mp.Process):
def _run_server(self) -> None: def _run_server(self) -> None:
app = fastapi.FastAPI() app = fastapi.FastAPI()
static = pathlib.Path(__file__).parent.joinpath("static") html = HTML.replace("{{port}}", str(self.port))
html_path = static.joinpath("index.html")
html = html_path.read_text().replace("{{port}}", str(self.port))
@app.get("/") @app.get("/")
async def get(): async def get():