当前位置: 首页 > news >正文

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

一、基于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请求:

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

相关文章:

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

一、基于Django的Web应用界面的开发&#xff1a; 在Realtimeresults.html上添加一个按钮组件&#xff0c;获取检测到的轴型和车轮信息&#xff0c;点击后可以获取package.json里存放的json数据&#xff0c;效果如下&#xff1a; 实现逻辑&#xff1a;需要从URL设置、视图函数、…...

论文简读 LORA: LOW-RANK ADAPTATION OF LARGE LANGUAGE MODELS

论文地址&#xff1a;https://arxiv.org/pdf/2106.09685.pdf 项目地址&#xff1a;https://github.com/microsoft/LoRA 全文翻译地址&#xff1a;https://zhuanlan.zhihu.com/p/611557340 本来想自行翻译的&#xff0c;但最近没有空 1、关键凝练 1.1 LORA是什么&#xff1f; …...

23062网络编程day7

网络聊天室编写&#xff08;基于UDP&#xff09; 服务器 #include <myhead.h>#define PORT 8888 //端口号&#xff1a;接收方绑定的端口号 #define IP "192.168.114.56" //本机IP#define ERR_MSG(msg) do{\fprintf(stderr, "__%d__:&…...

Java面向对象学习笔记-2

前言 本文介绍了Java中类的定义和对象的创建的基本概念。我们通过示例代码演示了如何定义不同类型的类&#xff0c;包括管理员信息、顾客信息、学校信息和访客信息&#xff0c;并展示了如何创建这些类的对象以及如何访问它们的属性和方法。这些示例有助于理解面向对象编程的基…...

入栏需看——学习记忆

记忆方法千千种&#xff0c;本栏意在梳理其中道道来&#xff0c;旦有小得&#xff0c;肥肠幸耶。从不同角度分析学习记忆。 逻辑篇 有逻辑 用思维导图 思维导图记忆有逻辑的文本/内容 理论 巧记书本结构–思维导图 模仿 HCIE-Cloud Computing LAB备考第一步&#xff1a…...

[C++]杨辉三角

目录 题目 解题思路 代码实现 获取数字 打印函数 主函数 全部代码 运行结果 题目 给定一个非负整数numRows &#xff0c;生成「杨辉三角」的前numRows行。 在「杨辉三角」中&#xff0c;每个数是它左上方和右上方的数的和。 解题思路 第k列的第i个数字的值第k-1列的(…...

算法通关村十三关-白银:数字与数学高频问题

有很多解题技巧&#xff0c;需要持续积累 1.数组实现加法专题 如果让你用数组来表示一个数&#xff0c;如何实现加法呢&#xff1f; 理论上仍然从数组末尾向前挨着计算就行了&#xff0c;但是实现的时候会发现很多问题&#xff0c;例如需要进位该怎么办&#xff1f; 进一步拓…...

【Linux】线程安全-互斥同步

文章目录 线程安全问题的引入线程互斥互斥概念互斥锁互斥锁的计数器当中如何保证原子性互斥锁基础API初始化互斥锁变量函数动态初始化静态初始化 加锁函数阻塞加锁非阻塞加锁带有超时时间的加锁 解锁函数销毁互斥锁函数 线程同步线程同步的必要性条件变量条件变量的使用原理条件…...

1.初识爬虫

爬虫是批量模拟网络请求的程序&#xff0c;想百度谷歌这种搜索类网站本质上就是爬虫 使用爬虫的时候不应该对别人的网站有严重的影响&#xff0c;比如你爬的频率太高了&#xff0c;让人家的网站崩溃了。不应该爬取网页上显示不到的内容&#xff0c;比如有一个直播的网站&#…...

TLA+学习记录1——hello world

0x01 TLA是个好工具 编程人员一个好习惯是凡事都想偷懒&#xff0c;当然是指要科学地偷懒&#xff0c;而不是真的偷懒。一直想找到一种能检验写出的代码&#xff0c;做出的设计是否真的完全正确&#xff0c;而不是靠经验检视、代码Review、反复测试去检验。因为上述方法不管怎…...

基于QWebEngine实现无头浏览器

无头浏览器 无头浏览器&#xff08;Headless Browser&#xff09;是一种没有图形用户界面&#xff08;GUI&#xff09;的浏览器。它通过在内存中渲染页面&#xff0c;然后将结果发送回请求它的用户或程序来实现对网页的访问&#xff0c;而不会在屏幕上显示网页。这种方式使得无…...

编译Micropython固件For树莓派Raspberry Pi Pico

1. 前言 由于想把自己编写的py文件打包的固件中&#xff0c;所以记录下如何编译micropython固件和打包。 2. 编译 最简单的方式就是在你的树莓派上进行&#xff0c;我用的是RP Pi2 下载所需文件&#xff1a; $ cd ~/ $ mkdir pico $ cd pico $ git clone -b pico https://gi…...

基于googlenet网络的动物种类识别算法matlab仿真

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 5.算法完整程序工程 1.算法运行效果图预览 2.算法运行软件版本 matlab2022a 3.部分核心程序 ................................................................. % 获取输入层的尺寸 Inp…...

如何用Jmeter编写脚本压测?

随着商业业务不断扩张&#xff0c;调用adsearch服务频率越来越高&#xff0c;所以这次想做个压测&#xff0c;了解目前多少并发量可以到达adsearch服务的界值。 这次选用的jmeter压测工具&#xff0c;压测思路如图&#xff1a; 一、日志入参 日志选取的adsearch 的 getads部分…...

SpingMVC之拦截器使用详解

拦截器概述 SpringMVC的处理器拦截器,类似于Servlet开发中的过滤器Filter&#xff0c;用于对处理器进行预处理和后处理。 过滤器和拦截器区别 过滤器&#xff1a;依赖于servlet容器。在实现上基于函数回调&#xff0c;可以对几乎所有请求进行过滤&#xff0c;但是缺点是一个过…...

motionface respeak新的aigc视频与音频对口型数字人

在当今的数字化时代&#xff0c;人工智能&#xff08;AI&#xff09;正在逐渐渗透到我们生活的方方面面。其中&#xff0c;AI技术在视频制作和处理领域的应用也日益广泛。本文将探讨如何利用AI技术实现视频中人脸与音频同步对口型的方法&#xff0c;旨在进一步丰富视频制作的效…...

【计算机网络】 静态库与动态库

文章目录 静态库实践使用方法总结 动态库实践使用方法总结 静态库与动态库的优缺点静态库优点缺点 动态库缺点优点 库有两种&#xff1a;静态库&#xff08;.a、.lib&#xff09;和动态库&#xff08;.so、.dll&#xff09;。所谓静态、动态是指链接。静态库是将整个库文件都拷…...

web端调用本地摄像头麦克风+WebRTC腾讯云,实现直播功能

目录 关于直播直播流程直播视频格式封装推流和拉流 获取摄像头和麦克风权限navigator.getUserMedia()MediaDevices.getUserMedia() WebRTC腾讯云快直播 关于直播 视频直播技术大全、直播架构、技术原理和实现思路方案整理 直播流程 视频采集端&#xff1a; 1、视频采集&#…...

React笔记(八)Redux

一、安装和配置 React 官方并没有提供对应的状态机插件&#xff0c;因此&#xff0c;我们需要下载第三方的状态机插件 —— Redux。 1、下载Redux 在终端中定位到项目根目录&#xff0c;然后执行以下命令下载 Redux npm i redux 2、创建配置文件 在 React 中&#xff0c;…...

数据库 | 数据库概述、关系型数据库、非关系型数据库

目录&#xff1a; 1.数据库&#xff1a;1.1 数据库的含义1.2 数据库的特点 2.数据表3.数据库管理系统4.数据库系统5.关系型数据库 和 非关系型数据库&#xff1a;5.1 关系型数据库5.2 关系型数据库“优势”5.3 非关系型数据库 6.关系型数据库 和 非关系型数据库 的“区别” 1.数…...

碧蓝航线自动化助手:3小时解放你的游戏时间

碧蓝航线自动化助手&#xff1a;3小时解放你的游戏时间 【免费下载链接】AzurLaneAutoScript Azur Lane bot (CN/EN/JP/TW) 碧蓝航线脚本 | 无缝委托科研&#xff0c;全自动大世界 项目地址: https://gitcode.com/gh_mirrors/az/AzurLaneAutoScript 还在为碧蓝航线中重复…...

基于智能体的企业级自主决策与业务运营平台解决方案:AI智能管理驾驶舱、智能管理驾驶舱的四大功能定位、总体方案蓝图、总体规划方案

该方案提出以AI大模型与智能体为核心的“智能管理驾驶舱”&#xff0c;通过整合企业私有数据及业务系统&#xff0c;实现从信息呈现、自主决策到自动执行的业务闭环。平台支持事件驱动、可视化编排与多智能体调度&#xff0c;覆盖生产、供应链等典型场景&#xff0c;旨在降低运…...

B站SEO优化底层逻辑:以用户需求为核心,解锁低成本流量密码

在B站流量竞争日趋激烈的当下&#xff0c;很多创作者陷入“唯算法论”的误区&#xff0c;过度纠结于完播率、互动量等数据&#xff0c;却忽略了SEO优化的本质——匹配用户搜索需求。 一、认知重构&#xff1a;B站SEO的本质是“用户需求匹配”&#xff0c;而非“算法博弈”多数创…...

别再只会拖模块了!用Simulink S-Function把C++算法集成到模型里的保姆级教程

从零实现Simulink与C的深度集成&#xff1a;以PID控制器为例的工程实践指南 在工业自动化和控制系统的开发中&#xff0c;Simulink因其直观的图形化建模能力而广受欢迎。然而&#xff0c;当面对复杂的算法实现或需要复用现有C代码库时&#xff0c;单纯依赖图形化模块往往显得力…...

【数据库】PostgreSQL实战:从基础到高级特性

【数据库】PostgreSQL实战&#xff1a;从基础到高级特性 引言 PostgreSQL是一个功能强大的开源关系型数据库&#xff0c;以其可靠性、扩展性和丰富的特性而闻名。本文将详细介绍PostgreSQL的核心特性、SQL操作和高级功能。 一、基础概念 1.1 数据库对象 -- 创建数据库 CREATE D…...

CARTGen-IR: Synthetic Tabular Data Generation for Imbalanced Regression——基于CART的表格数据不平衡回归合成采样方法

一、研究问题与背景 1.1 问题定义 不平衡回归&#xff1a;在连续目标变量中&#xff0c;极端值&#xff08;高值或低值&#xff09;样本稀少&#xff0c;导致模型偏向预测平均值&#xff0c;忽略重要极端情况。 应用场景&#xff1a;极端天气预测、海面温度异常、药物敏感性检…...

STM32 HAL库驱动中景园0.96寸OLED(SSD1306)避坑指南:从IIC地址到GRAM刷新的完整流程

STM32 HAL库驱动中景园0.96寸OLED&#xff08;SSD1306&#xff09;全流程实战解析 在嵌入式开发中&#xff0c;OLED显示屏因其高对比度、低功耗和快速响应等特性&#xff0c;成为许多项目的首选显示方案。本文将深入探讨如何基于STM32 HAL库高效驱动中景园0.96寸OLED&#xff0…...

告别手动Excel!用Plink 1.9快速搞定GWAS数据杂合度分析(附实战代码)

群体遗传学实战&#xff1a;用Plink高效完成GWAS数据杂合度分析 在生物信息学研究中&#xff0c;杂合度分析是评估基因型数据质量的重要环节。传统手动Excel处理方式不仅耗时耗力&#xff0c;还容易引入人为错误。本文将详细介绍如何利用Plink 1.9这一专业工具&#xff0c;快速…...

【Perplexity文学研究黄金配置】:1个提示词模板+2个权威元数据过滤器+4类文学体裁专属指令集

更多请点击&#xff1a; https://codechina.net 第一章&#xff1a;Perplexity文学作品查询 Perplexity 是一款以实时网络检索与引用溯源为特色的 AI 助手&#xff0c;其在人文领域尤其适用于文学研究场景。不同于传统大模型的静态知识库&#xff0c;Perplexity 在响应用户查询…...

别再手动标注了!用MakeSense一键导入YOLO标签,效率翻倍(附完整流程)

别再手动标注了&#xff01;用MakeSense一键导入YOLO标签&#xff0c;效率翻倍&#xff08;附完整流程&#xff09; 在计算机视觉领域&#xff0c;目标检测&#xff08;Object Detection&#xff09;项目的效率瓶颈往往出现在数据标注环节。传统工作流中&#xff0c;开发者需要…...