HTML / JS - рисование кнопок на холсте - PullRequest
Новая
       24

HTML / JS - рисование кнопок на холсте

1 голос
/ 10 марта 2019

Я очень мало знаю о html и еще меньше о js. Поэтому я хочу создать веб-приложение Flask для взаимодействия с моим Raspberry Pi. Мне нужен поток mjpg моей камеры, а также я хочу иметь возможность взаимодействовать с 2 сервоприводами (простые команды; вверх, вниз, влево, вправо). Поэтому я скопировал этот пример рисования изображения и постоянно обновлял его, немного менял его, был доволен и затем перешел к реализации кнопок. Пробовал 3-4 метода. Они не появляются. Я чувствую, что упускаю что-то простое, но, как я уже сказал, я мало знаю об этом предмете. (Я думал, что смогу сделать это из Flask). Вот код:

питон: 

from flask import Flask, render_template
app = Flask(__name__)

LEFT, RIGHT, UP, DOWN, RESET = "left", "right", "up", "down", "reset"
AVAILABLE_COMMANDS = {
    'Left': LEFT,
    'Right': RIGHT,
    'Up': UP,
    'Down': DOWN,
    'Reset': RESET
}

@app.route("/")
def index():
    return render_template('index.html', commands=AVAILABLE_COMMANDS)

@app.route('/<cmd>')
def command(cmd=None):
    if cmd == RESET:
        camera_command = "X"
        response = "Resetting ..."
    else:
        camera_command = cmd[0].upper()
        response = "Moving {}".format(cmd.capitalize())

    return response, 200, {'Content-Type': 'text/plain'}


if __name__ == '__main__':
    app.debug = True
    app.run('0.0.0.0', 5000)
    app.run(debug = True)

HTML: 

<html>
<head>
    <script type="text/JavaScript">
    var url = "static/01.jpg"; //url to load image from
    var refreshInterval = 500; //in ms
    var drawDate = null; //draw date string
    var img;

    function init() {
        var canvas = document.getElementById("canvas");
        var context = canvas.getContext("2d");
        img = new Image();
        img.onload = function() {
            canvas.setAttribute("width", 640)
            canvas.setAttribute("height", 480)
            context.drawImage(this, 0, 0);
            if(drawDate) {
                var now = new Date();
                var text = now.toLocaleDateString() + " " + now.toLocaleTimeString();
                var maxWidth = 100;
                var x = img.width-10-maxWidth;
                var y = img.height-10;
                context.strokeStyle = 'black';
                context.lineWidth = 2;
                context.strokeText(text, x, y, maxWidth);
                context.fillStyle = 'white';
                context.fillText(text, x, y, maxWidth);
            };
       };
       refresh();
}
function refresh() {
    img.src = url + "?t=" + new Date().getTime();
    setTimeout("refresh()",refreshInterval);
}

</script>
<title>cam_ser</title>
</head>
<body onload="JavaScript:init();">
<canvas id="canvas"/>
<link rel="stylesheet" href="static/styles.css">
{# in index.html #}
{% for label, command in commands.items() %}
    <button class="command command-{{ command }}" value="{{ command }}">
        {{ label }}
    </button>
{% endfor %}

{# and then elsewhere #}
<script>
addEventListener("DOMContentLoaded", function() {
    var commandButtons = document.querySelectorAll(".command");
    for (var i=0, l=commandButtons.length; i<l; i++) {
        var button = commandButtons[i];
        button.addEventListener("click", function(e) {
            e.preventDefault();

            var clickedButton = e.target;
            var command = clickedButton.value;
            var request = new XMLHttpRequest();
            request.onload = function() {
                 alert(request.responseText);
            };
            request.open("GET", "/" + command, true);
            request.send();
        });
    }
}, true);
</script>

</body>

1 Ответ

0 голосов
/ 17 марта 2019

Я не понял, что происходит.Ответ прост: мне нужно изменить эту строку: 

<canvas id="canvas" width="640" height="480"/>

И все.Это не имеет ничего общего со скриптом js.Я не знаю, почему я так думал.

Редактировать:

Это не имеет ничего общего со скриптом js, но для правильного отображения изображения вы должны соответствовать размерухолст в js с: 

canvas.setAttribute("width", 640)
canvas.setAttribute("height", 480)
...