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所示。
图3-12 分别选择Start Node、End Node和路径规划算法
单击“Find Route”按钮后会显示对应的最短路径信息,例如Start Node设置为D,End Node设置为B,算法选择“Bidirectional Dijkstra”,对应的最短路径信息如图3-13所示。
图3-13 显示对应的最短路径信息