petalinux_zynq7 驱动DAC以及ADC模块之五:nodejs+vue3实现web网页波形显示

前文:

petalinux_zynq7 C语言驱动DAC以及ADC模块之一:建立IPicon-default.png?t=N7T8https://blog.csdn.net/qq_27158179/article/details/136234296petalinux_zynq7 C语言驱动DAC以及ADC模块之二:petalinuxicon-default.png?t=N7T8https://blog.csdn.net/qq_27158179/article/details/136236138petalinux_zynq7 C语言驱动DAC以及ADC模块之三:实现C语言API并编译出库被python调用icon-default.png?t=N7T8https://blog.csdn.net/qq_27158179/article/details/136238093petalinux_zynq7 C语言驱动DAC以及ADC模块之四:python实现http_apiicon-default.png?t=N7T8https://blog.csdn.net/qq_27158179/article/details/136239572注意暂时mizar z7010暂时无法部署本web,提示堆栈内存不足,编译出错。但是可以在局域网内的linux或者windows机子上部署。nodejs是跨平台的。

0. 环境

- win10
- vscode

-ubuntu18

1. 搭建环境-win10

1.1 安装 node

安装 node-v20.10.0-x64.msi

安装到:
D:\Programs\nodejs\

cmd
node -v
npm -v

在node.js安装路径D:\Programs\nodejs下新建 node_cache 和 node_global 文件夹,

然后在cmd中运行
npm config set prefix "D:\Programs\nodejs\node_global"
npm config set cache “D:\Programs\nodejs\node_cache”

配置镜像加速,输入命令
npm config set registry=http://registry.npm.taobao.org

配置环境变量
在系统变量中新增
NODE_PATH D:\Programs\nodejs\node_global

在用户变量中的Path中新增
D:\Programs\nodejs\node_global

重新打开 cmd

1.2 全局安装 vue

npm install vue -g
npm install @vue/cli -g
vue -V

1.3 vue ui 创建项目

cmd
vue ui


浏览器切换到:http://localhost:8000/project/select
-> Create
-> 文件夹浏览到: E:\Workspaces\web
-> + Create a new project here
-> Details.Project folder: adda_vue
-> Details.Package manager: npm
-> 取消勾选  Git repository
-> Next
-> Presets.Select a preset: Manual -> Next
-> Features.Enable features: 勾选 Babel, Router, Vuex, Linter
-> Pick a linter / formatter config: ESLint with error prevention only
-> Create project
-> Continue without saving

-> Project dashboard -> Tasks -> 
-> build: Run task
-> serve: Run task
-> serve: Run task
    -> 点击 输出
    -> 
          App running at:
          - Local:   http://localhost:8081/ 
          - Network: http://192.168.123.238:8081/


1.4 helloworld

浏览器打开 http://localhost:8081/ 

2. 搭建环境-ubuntu18

2.1 安装 nodejs

下载 
https://nodejs.org/en/download/

得到 
node-v16.20.2-linux-x64.tar.xz

解压

tar -xvf node-v16.20.2-linux-x64.tar.xz
export PATH=$PATH:/home/xxjianvm/work/node-v16.20.2-linux-x64/bin
node -v
npm -v

配置镜像加速,输入命令

npm config set registry=http://registry.npm.taobao.org

2.2 全局安装 vue

npm install vue -g
npm install @vue/cli -g
npm install @vue/cli-init -g 
vue -V

问题:FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory
解决办法:npm install -g increase-memory-limit

在zynq上空白项目可以解决,但是后面增加了功能后仍会出现,暂未解决。

2.3 创建项目

用vue create

cd ~
mkdir work && cd work
vue create adda_vue

    -> manual 
    -> Features.Enable features: 勾选 Babel, Router, Vuex, Linter
    -> 3.x
    -> ESLint with error prevention only
    -> Lint on save
    -> In dedicated config files
    

cd adda_vue
npm run serve


目前虚拟机内的ubuntu18自带火狐,显示白屏。和当前版本的nodejs + vue3不兼容。

浏览器打开 http://192.168.125.137:8080/

后续win10和ubuntu开发vue3的编程方法一样。

3. 新增页面Adc

切换目录

cd /home/xxjianvm/work/adda_vue/

3.1 AdcWave.vue

添加文件:

gedit src/components/AdcWave.vue

添加内容:

<template><div class="hello"><h1>{{ msg }}</h1><h2>Essential Links</h2><ul><li><a href="/">Home</a></li></ul></div></template><script>export default {name: 'AdcWave',props: {msg: String}}</script>

3.2 index.js

修改 router/index.js

gedit src/router/index.js

添加

import AdcWave from '@/components/AdcWave.vue'
const routes = [...{path: '/adc',name: 'adc',component: AdcWave},
]

3.3 App.vue 

修改 App.vue

gedit src/App.vue


添加:
 

   <router-link to="/adc">Adc</router-link> |


4. echarts 折线图 demo

4.1 安装依赖(vscode内的TERMINAL执行也可以)

需要进入项目目录安装

cd /home/xxjianvm/work/adda_vue
npm install vue-echarts echarts

4.2 main.js中全局注册组件

修改 main.js

gedit src/main.js

添加:

import Echarts from "vue-echarts"
import * as echarts from "echarts"

createApp(App).use(store).use(router).mount('#app')


修改为:

const app = createApp(App)
app.component("v-chart", Echarts)
app.config.globalProperties.$echarts = echarts
app.use(store).use(router).use(Echarts).mount('#app')

4.3 修改页面

-> 修改 src/components/AdcWave.vue

gedit src/components/AdcWave.vue

4.3.1 <template>添加内容:

<template>...<div class="echarts-box"><div id="myEcharts" :style="{ width: '900px', height: '300px' }"></div></div>
</template>

4.3.2 <script> 

<script >
import * as echarts from "echarts"
import {onMounted} from "vue";export default {name: 'AdcWave',props: {msg: String},setup() {onMounted(() => { // 需要获取到element,所以是onMounted的Hooklet myChart = echarts.init(document.getElementById("myEcharts"));// 绘制图表myChart.setOption({xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{data: [150, 230, 224, 218, 135, 147, 260],type: 'line'}]});window.onresize = function () { // 自适应大小myChart.resize();};});}
}
</script>

5. 输入文本配置采样频率和数据长度

5.1 安装依赖(vscode内的TERMINAL执行也可以)

需要进入项目目录安装

cd /home/xxjianvm/work/adda_vue
npm install element-plus
npm install axios

5.2 修改main.js中全局注册组件

修改 main.js

gedit src/main.js

直接给出内容:

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'import Echarts from "vue-echarts"
import * as echarts from "echarts"import ElementPlus from "element-plus";
import "element-plus/dist/index.css";const app = createApp(App)
app.component("v-chart", Echarts)
app.config.globalProperties.$echarts = echarts
app.use(store).use(router).use(echarts).use(ElementPlus)
app.mount('#app')

5.3 vue.config.js

修改 工程根目录下的 vue.config.js
文件内容:

module.exports = {publicPath: './',transpileDependencies: true,devServer: {// 设置代理proxy: {"/api": {target: "http://192.168.123.138:5000", // 访问数据的计算机域名ws: true, // 是否启用websocketschangOrigin: true, //开启代理,pathRewrite: { // 重写代理规则,/api开头,代理到/'^/api': '/'// 例:/api/user/login代理到// http://localhost:5000/user/login},},},},
};

注意:192.168.123.138是ZYNQ的IP。

5.4 AdcWave.vue内容

编辑文件

gedit src/components/AdcWave.vue


修改内容:

给出文件内容:

<template><div class="hello"><h1>{{ msg }}</h1><h2>Essential Links</h2><ul><li><a href="/">Home</a></li></ul></div><div class="echarts-box"><div id="myEcharts" :style="{ width: '900px', height: '300px' }"></div></div><div class="home"><el-form ref="adcParamFormRef" :model="adcParamForm" class="demo-form-inline" label-width="150px"><el-form-item label="采样频率"><el-col :span="5"><el-input v-model="adcParamForm.sampleFrequency"></el-input></el-col></el-form-item><el-form-item label="采样长度"><el-col :span="5"><el-input v-model="adcParamForm.sampleLength"></el-input></el-col></el-form-item></el-form><el-button type="primary" @click.enter.prevent="toAdcStart()">开始</el-button><el-button type="primary" @click.enter.prevent="toAdcStop()">停止</el-button></div>
</template><script >
import {onMounted} from "vue";
// @ is an alias to /src
import axios from "axios";
import { ElMessage } from 'element-plus'import * as echarts from "echarts"export default {name: 'AdcWave',props: {msg: String},data () {return {// 这是登录表单的数据绑定对象adcParamForm: {sampleFrequency: '100000',sampleLength: '100'},}},setup() {onMounted(() => { // 需要获取到element,所以是onMounted的Hookvar chartDom = document.getElementById('myEcharts');var myChart = echarts.init(chartDom);var option;option = {title: {text: 'Dynamic Data & Time Axis'},tooltip: {trigger: 'axis',formatter: function (params) {params = params[0];return (String(params.value[1]));},axisPointer: {animation: false}},xAxis: {name: 'x',},yAxis: {name: 'y',},series: [{name: 'Fake Data',type: 'line',showSymbol: false,data: [],}]};function hexToArr(str) {// hex字符串长度通常都是2的倍数,但为了放止意外,判断一下长度,不是2的倍数就在最前面补0if (str.length % 2) str = "0" + strlet arr=[]for (let i = 0; i < str.length; i+=2) {let a=parseInt(str.slice(i,i+2),16)arr.push(a)}return arr}function trim(str) {var reg = /[\t\r\f\n\s]*/g;var trimStr;if (typeof str === 'string') {trimStr = str.replace(reg,'');}// console.log(trimStr)return trimStr}function generateDataFromArr(data_arr) {let data = [];for (let i = 0; i <= data_arr.length; i += 1) {data.push([i, data_arr[i]]);}return data;}setInterval(function () {var adc_enable = sessionStorage.getItem("adc_enable")if(adc_enable == undefined)   return;else if(adc_enable == "false") return;else{var adc_sampleFrequency = parseInt(sessionStorage.getItem("adc_sampleFrequency"))var adc_sampleLength = parseInt(sessionStorage.getItem("adc_sampleLength"))console.log(adc_sampleFrequency)console.log(adc_sampleLength)axios.post("/api/adda/adc",{sampleFrequency: adc_sampleFrequency,adc_length: adc_sampleLength},{}).then((res) => {if (res.data.code === 0) {var adc_data_arr = hexToArr(trim(res.data.hexString))myChart.setOption({series: [{data: generateDataFromArr(adc_data_arr)}]});}});}}, 1000);option && myChart.setOption(option);});},methods: {toAdcStart(){ElMessage("开始采样");sessionStorage.setItem("adc_enable",true)sessionStorage.setItem("adc_sampleFrequency",this.adcParamForm.sampleFrequency)sessionStorage.setItem("adc_sampleLength",this.adcParamForm.sampleLength)},toAdcStop(){ElMessage("结束采样");sessionStorage.setItem("adc_enable",false);}}
}
</script>

6. 运行效果[PC]

用postman修改为正弦波输出测试:

 

下篇:

 petalinux_zynq7 C语言驱动DAC以及ADC模块之六:qt显示adc波形icon-default.png?t=N7T8https://blog.csdn.net/qq_27158179/article/details/136241236

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

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

相关文章

flutter开发实战-手势Gesture与ListView滚动竞技场的可滑动关闭组件

flutter开发实战-手势Gesture与ListView滚动竞技场的可滑动关闭组件 最近看到了一个插件&#xff0c;实现一个可滑动关闭组件。滑动关闭组件即手指向下滑动&#xff0c;组件随手指移动&#xff0c;当移动一定位置时候&#xff0c;手指抬起后组件滑出屏幕。 一、GestureDetect…

大保司保费贵,是否物有所值?

《大保司保费贵&#xff0c;是否物有所值》 这是罗师兄的原创文章 预计8-9分钟读完 作者&#xff1a;罗师兄 微信号&#xff1a;luoyun515 当我们想要买一份重疾险、储蓄险等长期险时&#xff0c; 我们会发现&#xff0c;同样的保障责任和保额&#xff0c; 不同保险公司的…

基于AdaBoost算法的情感分析研究-微博情感分析-文本分类

基于AdaBoost算法的情感分析研究 摘 要 随着互联网的快速发展&#xff0c;各类社交媒体平台如微信、QQ等也与日俱增&#xff0c;而微博更是集成了传统网站、论坛、博客等的优点&#xff0c;并加上了人与人之间的互动性、关系亲密程度等多种智能算法&#xff0c;并以简练的形式…

python安装与配置2024最新版

对python不熟悉的可以去看看这篇文章python介绍 pytho安装 来到Python官网&#xff1a;https://www.python.org/ 然后 选着download列表下的windows , 然后加进入python各个版本的下载界面 可以看到截止2024年2月22日,最新版是3.12.2 但是我们一般下载稳定版 如下,点击连接进…

解决两个MySQL5.7报错

目录 1.启动不了MySQL&#xff0c;报错缺少MSVCR120.dll去官网下载vcredist_x64.exe运行安装进入管理员CMD 2.本地计算机 上的 mysql 服务启动后停止。某些服务在未由其他服务或程序使用时将自动停止&#xff0c;Fatal error: Can‘t open and lock privilege tables: Table ‘…

实习日志28

1.医院账套系统换新&#xff0c;卡片数据转移 1.1.修改旧导出的Excel 1.2.尝试导入新系统 1.3.修改导入数据再次导入即可 这个系统做的限制条件比较多&#xff0c;代码健壮性不错。 先在Excel表格里改好批量的&#xff0c;再导入检查&#xff0c;改一些细节的比较快捷。 2.…

ChatGPT回答模式

你发现了吗&#xff0c;ChatGPT的回答总是遵循这些类型方式。 目录 1.解释模式 2.类比模式 3.列举模式 4.限制模式 5.转换模式 6.增改模式 7.对比模式 8.翻译模式 9.模拟模式 10.推理模式 1.解释模式 ChatGPT 在回答问题或提供信息时&#xff0c;不仅仅给出…

【Linux取经路】文件系统之缓冲区

文章目录 一、先看现象二、用户缓冲区的引入三、用户缓冲区的刷新策略四、为什么要有用户缓冲区五、现象解释六、结语 一、先看现象 #include <stdio.h> #include <string.h> #include <unistd.h>int main() {const char* fstr "Hello fwrite\n"…

【思扬赠书 | 第3期】由面试题“Redis是否为单线程”引发的思考

⛳️ 写在前面参与规则&#xff01;&#xff01;&#xff01; ✅参与方式&#xff1a;关注博主、点赞、收藏、评论&#xff0c;任意评论&#xff08;每人最多评论三次&#xff09; ⛳️本次送书1~4本【取决于阅读量&#xff0c;阅读量越多&#xff0c;送的越多】 很多人都遇到…

gitlab的使用

前一篇文章我们已经知道Git人人都是中心&#xff0c;那他们怎么交互数据呢&#xff1f; • 使用GitHub或者码云等公共代码仓库 • 使用GitLab私有仓库 目录 一、安装配置gitlab 安装 初始化 这里初始化完成以后需要记住一个初始密码 查看状态 二、使用浏览器访问&#xf…

Math方法,以及三角函数计算

abs(x) 返回参数的绝对值 var xMath.abs(-5) //5floor(x) 向下舍入为最接近的整数。 var xMath.floor(2.1) //2ceil(x) 向上舍入为最接近的整数。 var xMath.ceil(2.1) //3fround(x) 最接近的&#xff08;32 位单精度&#xff09;浮点表示。 var xMath.fround(2.60) //2.59…

小凡爬楼梯

解法&#xff1a; dp[i]:到第i阶梯&#xff0c;总共dp[i]种方案 状态转移方程&#xff1a; base condition: #include<iostream> #include<vector> #include<algorithm> using namespace std; #define endl \n int main() {vector<long long> dp(51…

板块一 Servlet编程:第四节 HttpServletResponse对象全解与重定向 来自【汤米尼克的JAVAEE全套教程专栏】

板块一 Servlet编程&#xff1a;第四节 HttpServletResponse对象全解与重定向 一、什么是HttpServletResponse二、响应数据的常用方法三、响应乱码问题字符流乱码字节流乱码 四、重定向&#xff1a;sendRedirect请求转发和重定向的区别 在上一节中&#xff0c;我们系统的学习了…

黑色金属冶炼5G智能工厂数字孪生可视化管控系统,推进金属冶炼行业数字化转型

黑色金属冶炼5G智能工厂数字孪生可视化管控系统&#xff0c;推进金属冶炼行业数字化转型。随着科技的不断发展&#xff0c;数字化转型已经成为各行各业发展的必然趋势。金属冶炼行业作为传统工业的重要组成部分&#xff0c;也面临着数字化转型的挑战和机遇。为了推进金属冶炼行…

在 Windows 上使用 VC++ 编译 OpenSSL 源码的步骤

在 Windows 上使用 VC 编译 OpenSSL 源码的步骤如下&#xff1a; 准备工作 安装 Visual Studio 2017 或更高版本。安装 Perl 脚本解释器。安装 NASM 汇编器。 编译步骤 下载 OpenSSL 源码。解压 OpenSSL 源码。打开命令行工具&#xff0c;并进入 OpenSSL 源码目录。运行以下…

IT资讯——全速推进“AI+鸿蒙”战略布局!

文章目录 每日一句正能量前言坚持长期研发投入全速推进“AI鸿蒙”战略 人才战略新章落地持续加码核心技术生态建设 后记 每日一句正能量 人总要咽下一些委屈&#xff0c;然后一字不提的擦干眼泪往前走&#xff0c;没有人能像白纸一样没有故事&#xff0c;成长的代价就是失去原来…

2023 龙蜥操作系统大会演讲实录:《兼容龙蜥的云原生大模型数据计算系统——πDataCS》

本文主要分三部分内容&#xff1a;第一部分介绍拓数派公司&#xff0c;第二部分介绍 πDataCS 产品&#xff0c;最后介绍 πDataCS 与龙蜥在生态上的合作。 杭州拓数派科技发展有限公司&#xff08;简称“拓数派”&#xff0c;英文名称“OpenPie”&#xff09;是国内基础数据计…

论文发表 | 顶会顶刊的实验是如何炼成的

前言:Hello大家好,我是小哥谈。在计算机科学研究领域,尤其是当你追求顶级会议和期刊的发表时,没有什么⽐实验设计更关键了。为什么这么说?理由很简单。实验不仅仅是你⽤来 检验假设的⼿段,它更是审稿⼈会重点关注和阅读的部分,也是你验证⾃⼰研究多么创新、多么重要的内…

Linux之用户和用户组

目录 一、简介 1.1 用户账号分类 二、用户 2.1 useradd 2.2 userdel 2.3 usermod 2.4 passwd 2.5 su 2.6 登出 三、用户组 3.1 groupadd 3.2 groupdel 3.3 groupmod 3.4 newgrp 四、用户账号系统 4.1 /ect/passwd 4.2 常见的伪用户如下所示 五、思维导图 …

igolang学习3,golang 项目中配置gin的web框架

1.go 初始化 mod文件 go mod init gin-ranking 2.gin的crm框架 go get -u github.com/gin-gonic/gin 3.go.mod爆红解决