驱动轴相机参数设置Web前端界面开发

news2024/11/24 2:35:31

一、基于Django的Web应用界面的开发:

在Realtimeresults.html上添加一个按钮组件,获取检测到的轴型和车轮信息,点击后可以获取package.json里存放的json数据,效果如下:

实现逻辑:需要从URL设置、视图函数、html代码三方面来实现。

1、需要先在django项目下的urls.py里设置路由,当浏览器端请求的URL与该URL匹配成功时,django会调用项目下里的view.py里的视图函数realtimeresults_page,该函数先把该json文件读取出来,并连同Realtimeresults.html一起返回,保证在Realtimeresults.html可以使用到该数据。

关于文件的路径:

在settings.py里需要先加载django项目的根路径(BASE_DIR),再加上json文件的相对路径。

package.json如下:

2、装车辆信息的盒子如下:

分别将json数据的字段加入到对应的盒子即可。

2、将django项目共享给同一局域网下所有主机进行查看。

在setting.py里设置:

再通过该命令python .\manage.py runserver 0.0.0.0:8000,可启动服务器。浏览器输入本机ip:192.168.1.231:8000即可访问该django项目。

二、通过jQuery库来实现浏览器端与服务器端的json数据交换

效果如下:

jQuery 是一个 JavaScript 库,jQuery 极大地简化了 JavaScript 编程,相比于原生js代码来说更加易于开发,代码更加简洁,集成性更强。

对于jQuery的使用,可以在官方下载静态库文件jquery.js,也可以在<head>标签里通过CDN(内容分发网络)来引用:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">

AJAX 是与服务器交换数据的框架,在不重载全部页面的情况下,实现了对部分网页的更新。AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML)。

通过 jQuery AJAX 方法,可以使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON,同时能够把这些外部数据直接载入网页的被选元素中。

实现逻辑:

定义了getResult函数如下:

以Get方式向服务器来发送Ajax请求,若请求成功时,执行回调函数,当update_flag为1时,则服务器端有新数据需要发送,

将装对应的html内容的盒子填入json数据的内容即可。setInterval是设置定时器,8s会调用一次getResult函数。

如果没有新的json数据内容,则对应的html内容显示无即可,

可以看到不断地在发送get请求:

有个问题待优化:利用递归调用请求结果的函数的方式来从服务器端读取数据,请求的次数会不断增加,需要考虑服务器是否可以承载?

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/989602.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

YOLOV8从零搭建一套目标检测系统(修改model结构必看)附一份工业缺陷检测数据集

目录 1.YOLOV8介绍 2.YOLOV8安装 2.1环境配置 3.数据集准备 1.YOLOV8介绍 Yolov8结构图&#xff1a; YoloV8相对于YoloV5的改进点&#xff1a; Replace the C3 module with the C2f module. Replace the first 6x6 Conv with 3x3 Conv in the Backbone. Delete two Convs …

Mysql--事务

事务 开始之前&#xff0c;让我们先想一个场景&#xff0c;有的时候&#xff0c;为了完成某个工作&#xff0c;需要完成多种sql操作 比如转账 再比如下单 第一步 我的账户余额减少 第二步 商品的库存要减少 第三步 订单表中要新增一项 事务的本质&#xff0c;就是为了把多个操…

Excel数学、工程和科学计算插件:FORMULADESK Studio

如果 Excel 是您的武器 - 让我们磨砺您的剑&#xff01;为整天使用 Excel 的人们提供创新的 Excel 加载项&#xff0c;你需要这个 FORMULADESK Studio。。。 Excel 插件为任何使用 Excel 执行数学、工程和科学计算的人提供了必备工具。 * 将公式视为真正的数学方程 * 为您的公…

vue3中如何实现通过点击不同的按钮切换不同的页面

完成以上需求&#xff0c;我们可以使用vue中的component标签来实现。 component是Vue.js中一个特殊的标签&#xff0c;用于动态地绑定其它组件。它可以与v-bind:is指令一起使用&#xff0c;来决定要渲染哪个组件。下面是示例代码 <template><div class"app-conte…

OpenCV 07(图像滤波器)

一、卷积 什么是图片卷积? 图像卷积就是卷积核在图像上按行滑动遍历像素时不断的相乘求和的过程 步长 步长就是卷积核在图像上移动的步幅. 上面例子中卷积核每次移动一个像素步长的结果, 如果将这个步长修改为2, 结果会如何? 为了充分扫描图片, 步长一般设为1. padding …

【操作系统】电脑上没有IIS怎么办

文章目录 前言一、查看二、解决 前言 有的新机刚开始在计算机-管理-服务下没有IIS网络服务怎么办。 一、查看 桌面计算机/此电脑 鼠标右键&#xff1a;管理 服务和应用 发现没有IIS 二、解决 控制面板 程序和功能 启动或关闭Windows功能 IIS相关的所有功能选中&#xff…

【JavaScript】JS语法入门到实战

文章目录 一、初识JavaScript1. 什么是JavaScript&#xff1f;2. JavaScript 和 HTML 和 CSS 之间的关系3. JavaScript的运行过程4. JavaScript的组成 二、JavaScript的书写形式三、变量1. 输入输出2. 变量的使用3. 数据类型 四、运算符五、分支和循环语句1. 分支语句2. 循环语…

将PyCharm中的终端运行前面的PS修改成当前环境

最近使用Pycharm中的Terminal来pip安装一些pakage&#xff0c;发现Terminal运行前面的显示的是PS&#xff0c;然后输入安装指令报错。“python无法将“pip”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。” 解决方法&#xff1a; 只需要在pycharm的设置中修改一些termi…

Java缓存理解

CPU占用&#xff1a;如果你有某些应用需要消耗大量的cpu去计算&#xff0c;比如正则表达式&#xff0c;如果你使用正则表达式比较频繁&#xff0c;而其又占用了很多CPU的话&#xff0c;那你就应该使用缓存将正则表达式的结果给缓存下来。 数据库IO性能&#xff1a;如果发现有大…

基于YOLOv8和WiderFace数据集的人脸目标检测系统(PyTorch+Pyside6+YOLOv8模型)

摘要&#xff1a;基于YOLOv8和WiderFace数据集的人脸目标检测系统可用于日常生活中检测与定位人脸目标&#xff0c;利用深度学习算法可实现图片、视频、摄像头等方式的目标检测&#xff0c;另外本系统还支持图片、视频等格式的结果可视化与结果导出。本系统采用YOLOv8目标检测算…

数据结构(C语言版)概念、数据类型、线性表

数据结构&#xff08;C语言&#xff09;基本概念 数据的基本单位 数据的基本单位是位&#xff08;bit&#xff09;和字节&#xff08;byte&#xff09;。位是最小的存储单位&#xff0c;它可以表示一个二进制的0或1。字节由8个位组成&#xff0c;用于表示一个字符或数字。在计…

STM32 Nucleo-144开发板开箱bring-up

文章目录 1. 开篇2. 开发环境搭建2.1 下载官方例程2.2 ST-Link安装 3. STM32F446ZE demo工程3.1 STM32F446ZE简介3.2 跑个demo试一试 1. 开篇 最近做项目&#xff0c;用到STM32F446ZET6这款MCU&#xff0c;为了赶进度&#xff0c;前期软件需要提前开发&#xff0c;于是在某宝买…

基于FPGA的RGB图像转Ycbcr实现,包括tb测试文件以及MATLAB辅助验证

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 5.算法完整程序工程 1.算法运行效果图预览 将FPGA的数据导入到matlab进行显示 2.算法运行软件版本 Vivado2019.2 matlab2022a 3.部分核心程序 timescale 1ns / 1ps // // Company: // E…

企业微信后台管理-关联小程序、H5/web

企业微信后台管理-小程序、web 应用-关联小程序应用-绑定h5(web页面的app)企业微信-工作台 应用-关联小程序 企业微信后台管理地址&#xff0c;管理员扫码登录后台管理&#xff0c;找到应用管理-自建-创建应用/小程序。 填写项目相关信息之后&#xff0c;如下图。 点击关联小…

Cpp/Qtday030908cpp基础

目录 目录 自行封装一个栈的类&#xff0c;包含私有成员属性&#xff1a;栈的数组、记录栈顶的变量 成员函数完成&#xff1a;构造函数、析构函数、拷贝构造函数、入栈、出栈、清空栈、判空、判满、获取栈顶元素、求栈的大小 头文件&#xff1a;stack.h 源文件: stack.cp…

数据结构之队列的实现(附源码)

目录 一、队列的概念及结构 二、队列的实现 拓展&#xff1a;循环队列 三、初学的队列以及栈和队列结合的练习题 一、队列的概念及结构 队列&#xff1a;只允许在一端进行插入数据操作&#xff0c;在另一端进行删除数据操作的特殊线性表&#xff0c;队列具有先进先出FIFO(Fi…

jmeter 线程组 Open Model Thread Group 阶梯式压测、高峰流量压测

简介 Open Model Thread Group 是5.4.1 版本中引入的一个实验性线程组&#xff0c;可以弹性模拟负载测试。例如设置多个线程模式&#xff0c;再根据这些线程模式调整不同的并发数、暂停时间。由于Open Model Thread Group 是一个实验性线程组&#xff0c;可能会存在一些限制和不…

英语单词(1)

1.void:空的 2.main:主要的 3.class:类 4.system:系统 5.out: 输出 6.print:打印 7.public:公共的,公用的 8.static:静态的,静止的 9.oracle:甲骨文公司 10.eclipse: java编程语言

javascritp如何判断是从刷新(重新加载)、正常打开(或链接打开)、还是从浏览器回退进入页面的

重点先下另外一个知识点&#xff1a; 当我们的Web站点采用主体页面的iframe导航各个子页面&#xff08;浏览器地址保持不变&#xff09;的情况&#xff0c;如果我们希望每次iframe中打开的新的子页面&#xff0c;也都能够像在不采用iframe的情况那样&#xff0c;后续能够在浏览…

leetcode:58. 最后一个单词的长度

题目&#xff1a; 函数原型&#xff1a; int lengthOfLastWord(char * s) 解析&#xff1a; 求最后一个单词的长度&#xff0c;我们有两种思路 第一种思路&#xff1a; 逆向求&#xff0c;先设置一个字符串下标index&#xff0c;定位到最后一个单词的最后一个字符。再一个设置长…