vite 使用飞行器仪表示例
这里写自定义目录标题
- 环境
- vue代码
- 效果图
环境
- jquery
npm install -S jquery - jQuery-Flight-Indicators
将img、css、js拷贝到vite工程目录中
打开 jquery.flightindicators.js,在文件开头加上import jQuery from "jquery";
vue代码
<template><div class="container"><div id="heading"></div><div id="variometer"></div><div id="turn_coordinator"></div><div id="airspeed"></div><div id="altimeter"></div><div id="attitude"></div></div>
</template><script setup lang="ts">
import { onMounted } from "vue";
import $ from 'jquery';
import '../js/jquery.flightindicators.js';
import "../css/flightindicators.css"function setHeading(){const heading = $.flightIndicator('#heading', 'heading', {size: 200,showBox: false,img_directory: '/src/assets/img/'});heading.setHeading(30);//航向角
}function setVariometer(){const variometer = $.flightIndicator('#variometer', 'variometer', {size: 200,showBox: false,img_directory: '/src/assets/img/'});variometer.setVario(30);//垂直速度
}function setTurnCoor(){const turnCoor = $.flightIndicator('#turn_coordinator', 'turn_coordinator', {size: 200,showBox: false,img_directory: '/src/assets/img/'});turnCoor.setTurn(30);
}function setAirspeed() {const airspeed = $.flightIndicator('#airspeed', 'airspeed', {size: 200,showBox: false,img_directory: '/src/assets/img/'});airspeed.setAirSpeed(30);//空速
}function setAltimeter(){const altimeter = $.flightIndicator('#altimeter', 'altimeter', {size: 200,showBox: false,img_directory: '/src/assets/img/'});altimeter.setAltitude(30);//高度altimeter.setPressure(30)//气压
}function setAttitude() {const attitude = $.flightIndicator('#attitude', 'attitude', {size: 200,showBox: false,img_directory: '/src/assets/img/'});attitude.setRoll(30);//侧倾角attitude.setPitch(30);//俯仰角
}onMounted(() => {setHeading();setVariometer();setTurnCoor();setAirspeed();setAltimeter();setAttitude();
})</script><style scoped>
.container {display: flex;flex-wrap: wrap;justify-content: space-around;align-items: center;height: 100vh;width: 700px;
}#heading,
#variometer,
#turn_coordinator,
#airspeed,
#altimeter,
#attitude {width: 200px;height: 200px;margin: 10px;
}
</style>
效果图

相关文章:
vite 使用飞行器仪表示例
这里写自定义目录标题 环境vue代码效果图 环境 jquery npm install -S jqueryjQuery-Flight-Indicators 将img、css、js拷贝到vite工程目录中 打开 jquery.flightindicators.js,在文件开头加上import jQuery from "jquery"; vue代码 <template>&…...
【隐私计算】Cheetah安全多方计算协议-阿里安全双子座实验室
2PC-NN安全推理与实际应用之间仍存在较大性能差距,因此只适用于小数据集或简单模型。Cheetah仔细设计DNN,基于格的同态加密、VOLE类型的不经意传输和秘密共享,提出了一个2PC-NN推理系统Cheetah,比CCS20的CrypTFlow2开销小的多&…...
Python 实现Excel XLS和XLSX格式相互转换
在日常工作中,我们经常需要处理和转换不同格式的Excel文件,以适应不同的需求和软件兼容性。Excel文件的两种常见格式是XLS(Excel 97-2003)和XLSX(Excel 2007及以上版本)。本文将详细介绍如何使用Python在XL…...
黑马智数Day1
src文件夹 src 目录指的是源代码目录,存放项目应用的源代码,包含项目的逻辑和功能实现,实际上线之后在浏览器中跑的代码就是它们 apis - 业务接口 assets - 静态资源 (图片) components - 组件 公共组件 constants…...
网络协议全景:Linux环境下的TCP/IP、UDP
目录 1.UDP协议解析1.1.定义1.2.UDP报头1.3.特点1.4.缓冲区 2.TCP协议解析2.1.定义2.2.报头解析2.2.1.首部长度(4位)2.2.2.窗口大小2.2.3.确认应答机制2.2.4.6个标志位 2.3.超时重传机制2.4.三次握手四次挥手2.4.1.全/半连接队列2.4.2.listen2.4.3.TIME_…...
制造企业MES系统委外工单管理探析
一、委外工单管理的重要性 在制造企业的生产过程中,委外工单管理是一项重要且复杂的任务。委外加工是指企业将某些生产任务外包给外部供应商完成,以降低成本、提高效率或满足特定需求。然而,委外加工过程中往往存在诸多不确定性,…...
【C语言-数据结构】顺序表的基本操作
顺序表的基本操作 【建议:如果对结构体还不太理解的话可以先看 C语言-结构体 这篇文章】 插入操作 ListInsert(&L,i,e):插入操作,在表 L 中的第 i 个位置上插入指定元素 e 代码实现 #include <stdio.h> #include <stdbool.…...
使用Renesas R7FA8D1BH (Cortex®-M85)实现多功能UI
目录 概述 1 系统框架介绍 1.1 模块功能介绍 1.2 UI页面功能 2 软件框架结构实现 2.1 软件框架图 2.1.1 应用层API 2.1.2 硬件驱动层 2.1.3 MCU底层驱动 2.2 软件流程图 4 软件功能实现 4.1 状态机功能核心代码 4.2 页面功能函数 4.3 源代码文件 5 功能测试 5.1…...
【java】常见限流算法原理及应用
目录 前言 限流的作用 4种常见限流算法 固定窗口限流 基本原理 简单实现 优点和缺点 滑动窗口限流 基本原理 简单实现 优点和缺点 漏桶限流 基本原理 简单实现 优点和缺点 令牌桶限流 基本原理 简单实现 优点和缺点 算法比较与选择 前言 在现代分布式系统…...
Git 原理(提交对象)(结合图与案例)
Git 原理(提交对象) 这一块主要讲述下 Git 的原理。 在进行提交操作时,Git 会保存一个提交对象(commit object): 该提交对象会包含一个指向暂存内容快照的指针; 该提交对象还包含了作者的姓…...
STM32如何修改外部晶振频率和主频
对于STM32F10x系列的单片机,除了STM32F10x_CL单片机,其它的单片机一般外部晶振HSE的时钟频率都默认是8MHz。如果我们使用的外部晶振为12Mhz,那么可以把上图绿色标记改为:12000000 72MHz的主频8MHz的外部晶振HSE*倍频系数9。当然如果像上面把外…...
【JAVA入门】Day48 - 线程池
【JAVA入门】Day48 - 线程池 文章目录 【JAVA入门】Day48 - 线程池一、线程池的主要核心原理二、自定义线程池三、线程池的大小 我们之前写的代码都是,用到线程的时候再创建,用完之后线程也就消失了,实际上这是不对的,它会浪费计算…...
图像亮度均衡算法
图像亮度均衡算法 图像亮度均衡算法的作用是提升图像的对比度和细节,使得图像的亮度分布更加均匀,从而改善视觉效果。通过调整亮度值,可以更好地揭示图像中的细节,尤其在低光或高光条件下的图像处理。 常见的图像亮度均衡算法包括…...
C++中的new与delete
目录 1.简介 2.底层 1.简介 new是升级版的malloc,它会先开空间再去调用构造函数。 delete是升级版的free,它会先调用析构函数再free掉空间。 class A { public:A(int a10, int b10){a a1;b b1;}private:int a;int b; };int main() {//new会先开空间…...
在HTML中添加视频
在HTML中添加视频,你可以使用<video>标签。这个标签允许你在网页上嵌入视频内容,并支持多种视频格式,如MP4、WebM和Ogg等。不过,由于浏览器对视频格式的支持程度不同,因此通常建议提供多种格式的视频文件&#x…...
YoloV10 训练自己的数据集(推理,转化,C#部署)
目录 一、下载 三、开始训练 train.py detect.py export.py 超参数都在这个路径下 四、C#读取yolov10模型进行部署推理 如下程序是用来配置openvino 配置好引用后就可以生成dll了 再创建一个控件,作为显示 net framework 4.8版本的 再nuget工具箱里下载 …...
Science Robotic 内在触觉实现直观的物理人机交互
触觉传感器和电子皮肤是为机器人提供物理交互感的常见设备,但当用于机器人的大面积覆盖时,它们会变得复杂且昂贵。德国宇航中心近期发表的Science Robotics研究工作,使用内部高分辨率关节力扭矩传感器,在机械臂中实现了固有的全身…...
string类(C++)
哈喽各位!,久违了,最近怎么样捏,本次进入C的string类,加油加油呀! 随记:鼓励创新,宽容失败! 1.标准库的string类 1.1string类的了解 string的文献参考链接-->strin…...
【C语言】自定义类型——结构体
目录 一、结构体的类型的声明 二、结构体变量的创建和初始化 三、匿名结构体类型 四、结构体自引用 五、结构体内存对齐 (1)对齐规则 (2)计算结构体大小练习 (3)需要内存对齐的原因 (4…...
MySQL练手题--日期连续类型(困难)
一、准备工作 Create table If Not Exists Failed (fail_date date); Create table If Not Exists Succeeded (success_date date); Truncate table Failed; insert into Failed (fail_date) values (2018-12-28); insert into Failed (fail_date) values (2018-12-29); inser…...
使用docker在3台服务器上搭建基于redis 6.x的一主两从三台均是哨兵模式
一、环境及版本说明 如果服务器已经安装了docker,则忽略此步骤,如果没有安装,则可以按照一下方式安装: 1. 在线安装(有互联网环境): 请看我这篇文章 传送阵>> 点我查看 2. 离线安装(内网环境):请看我这篇文章 传送阵>> 点我查看 说明:假设每台服务器已…...
内存分配函数malloc kmalloc vmalloc
内存分配函数malloc kmalloc vmalloc malloc实现步骤: 1)请求大小调整:首先,malloc 需要调整用户请求的大小,以适应内部数据结构(例如,可能需要存储额外的元数据)。通常,这包括对齐调整,确保分配的内存地址满足特定硬件要求(如对齐到8字节或16字节边界)。 2)空闲…...
【入坑系列】TiDB 强制索引在不同库下不生效问题
文章目录 背景SQL 优化情况线上SQL运行情况分析怀疑1:执行计划绑定问题?尝试:SHOW WARNINGS 查看警告探索 TiDB 的 USE_INDEX 写法Hint 不生效问题排查解决参考背景 项目中使用 TiDB 数据库,并对 SQL 进行优化了,添加了强制索引。 UAT 环境已经生效,但 PROD 环境强制索…...
23-Oracle 23 ai 区块链表(Blockchain Table)
小伙伴有没有在金融强合规的领域中遇见,必须要保持数据不可变,管理员都无法修改和留痕的要求。比如医疗的电子病历中,影像检查检验结果不可篡改行的,药品追溯过程中数据只可插入无法删除的特性需求;登录日志、修改日志…...
Debian系统简介
目录 Debian系统介绍 Debian版本介绍 Debian软件源介绍 软件包管理工具dpkg dpkg核心指令详解 安装软件包 卸载软件包 查询软件包状态 验证软件包完整性 手动处理依赖关系 dpkg vs apt Debian系统介绍 Debian 和 Ubuntu 都是基于 Debian内核 的 Linux 发行版ÿ…...
UDP(Echoserver)
网络命令 Ping 命令 检测网络是否连通 使用方法: ping -c 次数 网址ping -c 3 www.baidu.comnetstat 命令 netstat 是一个用来查看网络状态的重要工具. 语法:netstat [选项] 功能:查看网络状态 常用选项: n 拒绝显示别名&#…...
生成 Git SSH 证书
🔑 1. 生成 SSH 密钥对 在终端(Windows 使用 Git Bash,Mac/Linux 使用 Terminal)执行命令: ssh-keygen -t rsa -b 4096 -C "your_emailexample.com" 参数说明: -t rsa&#x…...
C++使用 new 来创建动态数组
问题: 不能使用变量定义数组大小 原因: 这是因为数组在内存中是连续存储的,编译器需要在编译阶段就确定数组的大小,以便正确地分配内存空间。如果允许使用变量来定义数组的大小,那么编译器就无法在编译时确定数组的大…...
网站指纹识别
网站指纹识别 网站的最基本组成:服务器(操作系统)、中间件(web容器)、脚本语言、数据厍 为什么要了解这些?举个例子:发现了一个文件读取漏洞,我们需要读/etc/passwd,如…...
毫米波雷达基础理论(3D+4D)
3D、4D毫米波雷达基础知识及厂商选型 PreView : https://mp.weixin.qq.com/s/bQkju4r6med7I3TBGJI_bQ 1. FMCW毫米波雷达基础知识 主要参考博文: 一文入门汽车毫米波雷达基本原理 :https://mp.weixin.qq.com/s/_EN7A5lKcz2Eh8dLnjE19w 毫米波雷达基础…...
