（3-6-2）Bellman-Ford算法：基于Flask Web的路径规划可视化(2)_制作一个网页路径规划,输入起点和终点,在界面上显示路径-CSDN博客

本文链接：https://blog.csdn.net/asd343442/article/details/140325607

3.7.3 Flask可视化

文件app.py是一个基于 Flask 框架的路径规划程序，通过提供一个简单的网页界面让用户输入起点、终点和选择算法来查找最优路径。具体功能包括：

（1）定义了 Flask 应用，并设置了两个路由：

'/' 路由返回渲染 index.html 模板，展示网页界面。
'/route' 路由用于接收 POST 请求，根据用户输入的起点、终点和选择的算法进行路径规划，并返回结果。

（2）实现了 find_route() 函数来处理路径规划请求：

根据 POST 请求中的数据获取起点、终点和选择的算法。
根据选择的算法调用相应的路径规划函数来计算最优路径。
将计算结果以 JSON 格式返回给前端页面。

（3）定义了路径规划所需的图结构和节点位置信息。

（4）引入了路径搜索算法的实现模块 algorithms.py 中的函数来进行路径规划。

（5）如果算法选择不正确或路径规划出错，会返回相应的错误信息。

（6）如果以主程序方式运行，则启动 Flask 应用。

总的来说，文件app.py提供了一个简单的网页界面用于实现路径规划工作，用户可以选择不同的算法来寻找最优路径，并获取计算结果。

from flask import Flask, jsonify, request, render_template
import algorithms
import time

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/route', methods=['POST'])
def find_route():
    data = request.get_json()
    start_node = data.get('start')
    end_node = data.get('end')
    algorithm = data.get('algorithm')

    graph = {
        'A': {'B': 1, 'C': 4, 'E': 3},
        'B': {'A': 1, 'C': 2, 'D': 5},
        'C': {'A': 4, 'B': 2, 'D': 1, 'E': 2},
        'D': {'B': 5, 'C': 1, 'F': 3},
        'E': {'A': 3, 'C': 2, 'F': 2},
        'F': {'D': 3, 'E': 2}
    }

    positions = {
        'A': (0, 0),
        'B': (1, 0),
        'C': (1, 1),
        'D': (2, 2),
        'E': (0, 2),
        'F': (2, 0)
    }

    if algorithm == 'a_star':
        route, distance, nodes_visited, computation_time = algorithms.a_star_algorithm(start_node, end_node, graph, positions)
        computation_time *= 1000
    elif algorithm == 'bidirectional_dijkstra':
        start_time = time.time()
        route = algorithms.bidirectional_dijkstra(graph, start_node, end_node)
        computation_time = time.time() - start_time * 1000
        distance = sum(graph[route[i]][route[i+1]] for i in range(len(route) - 1)) if len(route) > 1 else 0
        nodes_visited = len(route)
    elif algorithm == 'bellman_ford':
        start_time = time.time()
        distances = algorithms.bellman_ford_algorithm(graph, start_node)
        computation_time = time.time() - start_time * 1000

        if distances == "Graph contains a negative weight cycle":
            return jsonify({"error": distances}), 400

        if end_node not in distances:
            return jsonify({"error": "End node not reachable"}), 400

        route = "Path not provided by Bellman-Ford"
        distance = distances[end_node]
        nodes_visited = "Not applicable for Bellman-Ford"
    else:
        return jsonify({"error": "Invalid algorithm specified"}), 400

    return jsonify({
        "Route": route, 
        "TotalDistance": distance, 
        "NodesVisited": nodes_visited, 
        "ComputationTime": computation_time
    })

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

3.7.4 模版文件

文件index.html是本Flask项目的模版文件，包含了一个简单的 HTML 结构，其中包括一个画布用于绘制图形、一个表单用于选择起点、终点和算法，并显示计算结果。在这个文件中，主要的部分是表单和画布：

表单包括三个输入框和一个下拉菜单，分别用于选择起点、终点和算法类型。
画布用于显示节点和边的图形表示。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
      type="text/css"
      href="{{ url_for('static', filename='style.css') }}"
    />
    <title>Route Planner</title>
  </head>
  <body>
    <div class="container">
      <h1>A.S.C.G</h1>
      <canvas
        id="graphCanvas"
        width="500"
        height="400"
        style="border: 1px solid black"
      ></canvas>
      <form id="routeForm">
        <label for="start">Start Node:</label>
        <input type="text" id="start" name="start" readonly /><br /><br />
        <label for="end">End Node:</label>
        <input type="text" id="end" name="end" readonly /><br /><br />
        <select name="algorithm" id="algorithm">
          <option value="a_star">A*</option>
          <option value="bidirectional_dijkstra">Bidirectional Dijkstra</option>
          <option value="bellman_ford">Bellman-Ford</option></select
        ><br /><br />
        <input type="submit" value="Find Route" />
      </form>
      <div id="result"></div>
    </div>

    <script src="{{ url_for('static', filename='script.js') }}"></script>
  </body>
</html>

3.7.4 脚本文件

文件script.js实现了网页端的交互功能。首先，通过绘制静态图形，包括节点和边，为用户提供可视化的路径选择界面。其次，为节点和边分配了坐标值，并在画布上绘制了它们。通过添加点击事件监听器，允许用户通过点击节点来选择起始节点和结束节点。当用户提交路径规划请求时，通过发送 POST 请求到服务器端获取路径信息，并将响应内容显示在页面上，包括路径、总距离、访问节点数和计算时间。通过这些功能，用户可以在网页上直观地选择路径规划参数，并获取最短路径的详细信息。

document.getElementById('routeForm').addEventListener('submit', function(e) {
    e.preventDefault();

    var startNode = document.getElementById('start').value;
    var endNode = document.getElementById('end').value;
    var algorithm = document.getElementById('algorithm').value;

    fetch('/route', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({ start: startNode, end: endNode, algorithm: algorithm }),
    })
    .then(response => response.json())
    .then(data => {
        document.getElementById('result').innerText = JSON.stringify(data);
    })
    .catch((error) => {
        console.error('Error:', error);
    });
});

function drawGraph() {
    const canvas = document.getElementById('graphCanvas');
    const ctx = canvas.getContext('2d');
    canvas.removeEventListener('click', onCanvasClick); // Remove existing listener

    const nodes = {'A': {x: 50, y: 100}, 'B': {x: 200, y: 50}, 'C': {x: 350, y: 100}, 'D': {x: 200, y: 200}, 'E': {x: 100, y: 150}, 'F': {x: 250, y: 150}};
    const edges = [['A', 'B'], ['B', 'C'], ['C', 'D'], ['D', 'A'], ['B', 'D'], ['A', 'E'], ['E', 'C'], ['C', 'F'], ['F', 'D']];

    // Clear canvas before redrawing
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    const offsetX = (canvas.width - Math.max(...Object.values(nodes).map(n => n.x))) / 2;
    const offsetY = (canvas.height - Math.max(...Object.values(nodes).map(n => n.y))) / 2;

    // Draw nodes
    for (const [node, {x, y}] of Object.entries(nodes)) {
        ctx.beginPath();
        ctx.arc(x + offsetX, y + offsetY, 10, 0, 2 * Math.PI);
        ctx.fillStyle = 'blue';
        ctx.fill();
        ctx.stroke();
        ctx.fillText(node, x - 5 + offsetX, y - 15 + offsetY);
        ctx.closePath();
    }

    // Draw edges
    edges.forEach(edge => {
        const [start, end] = edge;
        ctx.beginPath();
        ctx.moveTo(nodes[start].x + offsetX, nodes[start].y + offsetY);
        ctx.lineTo(nodes[end].x + offsetX, nodes[end].y + offsetY);
        ctx.stroke();
    });

    function onCanvasClick(event) {
        for (const [node, {x, y}] of Object.entries(nodes)) {
            if (Math.sqrt((event.offsetX - (x + offsetX)) ** 2 + (event.offsetY - (y + offsetY)) ** 2) < 10) {
                if (!document.getElementById('start').value) {
                    document.getElementById('start').value = node;
                    console.log(`Start node selected: ${node}`);
                } else if (!document.getElementById('end').value) {
                    document.getElementById('end').value = node;
                    console.log(`End node selected: ${node}`);
                }
                break;
            }
        }
    }

    canvas.addEventListener('click', onCanvasClick);
}

drawGraph();

运行后可以在网页上方显示绘制的可视化图，在此可以分别选择Start Node和End Node，然后在下拉框中选择一种路径规划算法。如图3-12所示。