- 博客(879)
- 资源 (62)
- 问答 (1)
- 收藏
- 关注
RSS订阅
原创 实战：从 0 到 1 GitLab CI/CD 前端持续部署
文章目录写在前面服务器配置环境安装安装 Docker安装 GitLab测试 GitLabGitLab Runner前端项目 CI/CD 流程的设计正式开始编写 .gitlab-ci.yml 的内容介绍 .gitlab-ci.yml镜像的使用stages 执行顺序的定义job 内容的编写在 CI/CD 中使用 SSH keys前端项目部署到阿里云OSS前端项目 CI/CD 最佳业务配置思路常见问题排查及修复相关参考链接写在前面首先感谢大家能来参加我的 Chat，能来参加的同学都是想在业余有一些其他知识的
2021-08-17 19:48:25
6319
16
原创 深夜的敲门声——献给孤独奋斗的你
多久了? 多久没听到敲门声了? 有很多时候我会想象，假如有一天，或许是周末，或许是周一，我一个人待在家里看美剧，或者漫画，又或者是在练习书法。。。。这时从我的那个金属门外传来了"咚。。咚。。咚"的声音。我的思绪想被什么东西一下子束紧了。就好像从广阔的天空一下子突然场景转换到自己所处的这个杂乱，狭窄的小房子里。这40多分贝的声音，让我一下子感到了前所未有的。。。。。...
2019-10-24 10:24:10
5136
8
原创 最新Tampermonkey 中文文档解析（附基础案例和高级案例）
近期博主在GitChat上举办了一场 彻底玩转Tampermonkey的Chat 欢迎各位前来捧场. 报名地址使用 Tampermonkey 编写高级跨网站自动化任务脚本标明：本文出现的TM 即使Tampermonkey 的缩写目录USERSCRIPT HEADER@name@namespace@version@author@description...
2019-10-21 12:29:37
182130
7
原创 图形编辑器基于Paper.js教程25：材料测试矩阵功能的实现
整个技术实现思路是借助paperjs画布来实现的，将所有方格，字体，放在一个group中，并且每个元素都有自己的功率和速度。其实还有一种方案是，不记住画布，而是直接使用gcode拼接的方式，将每个方格，和固定字体的gcode都当作变量，然后调整其位置，最后进行拼接。材料测试矩阵在测试激光头在某一种材料上的表现，很有必要，如果你在一种新的材料上进行加工时，最好先做一次材料测试矩阵，挑选出合适的功率和速度。最近做了一个材料测试矩阵的需求，现在已经上线了，现在来回顾总结一下，有哪些做的好的，有哪些做的不好的。
2025-03-17 20:13:59
398
原创 图形编辑器基于Paper.js教程24：图像转gcode的重构，元素翻转，旋转
但你会发现，设置false后，元素的真正位置是通过很多属性叠加确定的，这个时候你再直接使用元素的位置，是完全不正确的。教资考试，自第一次考试后，搁置了两年，眼看着考过的那一门成绩要过期了，才想起来冲一下，补考剩下的一门，这门考过了，还需要面试通过才能拿到教资证，虽然过程很漫长，也很忙碌，没关系，一步一步走就好啦。前段时间在雕刻图片时，旋转图片，翻转图片后，发现生成准确的gcode，虽然尺寸对，但是都是以没有旋转，没有翻转的图片进行生成的。前段时间梳理了今年要做的事情，唉，那真是的没法说，累死牛马也做不完。
2025-03-10 20:42:09
497
原创 图形编辑器基于Paper.js教程23：调研在canvas上书写多行文本，分析fabricjs的IText类的实现
同时监听textarea的这些事件 blur， keydown，keyup ，input ，copy ，cut ，paste ，compositionstart ，compositionupdate ，compositionend ，在这些事件的处理函数中，都需要将内容的修改，或者状态，同步到画布的文本元素上。在ITextKeyBehavior.ts 这个文件里有写到是使用的 一个隐藏的textarea来实现的 输入效果，包括选择，光标的上下左右移动，复制粘贴。每一字符都有一个索引，即使换行也不间断。
2025-02-17 07:00:00
574
原创 图形编辑器基于Paper.js教程22：在图形矢量编辑器中，实现两个元素的差集，交集，并集，切割
在图形编辑器中，我们有时需要这样的一个图形，或者这样的一个图形像这种图形其实是基于相交的圆和矩形进行计算得出来的，这种操作大家一般叫做图形的布尔操作。本片文章就教大家如何在图形编辑器中，实现 两个元素的差集，并集，合并，或者切割。学会了这个技能，你就可以基于一些基本元素，组合成千奇百怪的图形。下面就进入正题啦在paperjs提供的例子中，有一个关于元素布尔操作的复杂案例，就是下面这个这个案例将paperjs能够实现的5种布尔操作。分别是，其实还有一种reorient没有提到。
2025-01-24 11:11:30
1409
原创 图形编辑器基于Paper.js教程21：在画布中创建一个不随视图缩放的矩形，并固定在视图的位置，标尺功能的实现
之前的文章我已经告诉大家如何做一个不随视图改变大小的圆，圆是最容易实现的，因为，使用缩放比计算半径就可以啦。矩形就稍微麻烦一些，视图缩放后需要对矩形进行反缩放，才能保证大小。在图形编辑器中，一般都会有标尺的功能，标尺工具，能够让用户建立清晰的坐标系，能够知道原点在那里，并且能够大致估算出，尺寸，距离，和当前光标所在的位置。对于画布的移动，更加简单只需调整上标尺中心点的y值，或者左标尺中心点的x值。这还不算难，难点在计算视图缩放后，矩形应该移动多少才能保持在屏幕的固定位置。标尺工具具有以下这样几个特性。
2025-01-21 08:00:00
204
原创 图形编辑器基于Paper.js教程20：有关图形编辑器中，选择工具的研究
要做选择工具，就要先定义出来选择工具的功能范围和职责。你可以打开ps，或者figma，或者其他的图形化软件工具，不管是在线的还是客户端。当前你选中了选择工具后，那么下一次点击画布时，就会判断你的点击点是否在一个元素上，包括内部，线框上。当你点击元素时，那么该元素就会被选择，被选中的元素通常会显示该元素的位置，尺寸，等基本信息，有些特殊元素还有其他的编辑功能，比如图片。当你点击画布后，不放开鼠标，并拖动鼠标，那么就会进入一个框选状态，起点与光标点组成一个矩形，将矩形中，或与矩形相交的元素 选中。
2025-01-10 08:00:00
623
原创 将画布元素生成gcode的流程迁移到 webworker的难点
绝对坐标相对简单一些，因为每个元素的加工坐标都是绝对的，但是相对坐标的加工就依赖上一个元素，有时是依赖上一个图层。然后将这些坐标传入worker， 坐标必须是原始数据，不能是paperjs的元素，worker中也无法使用paperjs的能力。如果要使用worker的能力，首先需要获取所有的加工点，借助paperjs来获取元素的坐标，另外就是由于是异步的，如果gcode不是一次性返回的，那么gcode必须被插入到合适的位置。最后最难的是，在异步中 无法取得 相对定位的 前一个坐标。由于worker是异步的，
2025-01-06 08:00:00
152
原创 图形编辑器基于Paper.js教程19：摄像头定位，鱼眼透视矫正，透视变换，工作区域裁剪
最近做了一个摄像头定位的功能，这个摄像头安装在激光雕刻机的顶部，使用方法就是对着雕刻区域拍照，然后将照片覆盖在画布上，这样创作的元素就与雕刻区域形成一个映射。获取了图片后，需要进行鱼眼矫正，鱼眼矫正之前的文章有提到过，这里的矫正参数使用的调试好的参数。此外，glfx这个库也有鱼眼矫正的功能，不够有点复杂，参数也比较多，很难调，这也是一个优化点。用户选完点后，将四个点的坐标传给glfx库，对图片进行透视变换，透视变换用的也是webgl，不同的是，这个库提供了toDataURL 并且不需要翻转像素。
2024-12-27 08:00:00
403
原创 图形编辑器基于Paper.js教程18：图片编辑器支持导入dxf文件，dxf文件解析，dxf文件转gcode
这是比较普通的一种做法，还有一种做法是，先按照dxf的原始数据渲染元素，然后获取dxf所有元素的边框， 最后将dxf的所有元素 反转一遍。在解析dxf时，由于dxf的坐标原点是在左下角，而一般的画布 canvas的原点是在左上角，这里就需要做一个反转。最后再补充一下，市面上还有一个库 叫dxf， https://www.npmjs.com/package/dxf 可以直接将dxf的内容转换成svg，然后画布再导入svg，整个流程非常简单，就导入dxf的问题，转换成了导入svg的问题。
2024-12-26 08:00:00
589
原创 web 串口，js发送gcode时，可供选择的几种方式
通过合理地选择发送方式和容量控制手段，可以确保消息传递的可靠性和系统的稳定性。如果你需要实现更复杂的协议，推荐使用。或者 JSON 格式来结构化消息内容，并附加长度信息以供接收端验证。
2024-12-25 08:00:00
602
原创 在react app中使用 web worker的方案，基于 creat-react-app脚手架，并且webapck 为 5.x
改写 App.tsx。
2024-12-23 08:00:00
223
原创 图形编辑器基于Paper.js教程17：图像转gcode前的处理，灰度，黑白，抖动
而对于复杂的问题，也不是一两句话能够写清楚的。灰度值的误差是这样计算的， 比如当前像素的灰度值是200，那么它应该转换为255，误差是55，将这个误差55，加到相邻的上下左右的像素上。如果有人对图片GCode，位图转GCode，雕刻图片感兴趣的话，后面再写一个优化图片GCode，双向雕刻，过滤白色行，相对路径雕刻图片。在激光雕刻机里，能雕刻的东西总体有两种元素，一种矢量元素，svg作为代表，一种是位图，png，jpg图片作为代表。---------------正文分割线-------------
2024-12-12 20:18:07
749
原创 使用node-red网关读取modbus设备点表，并上传到市政低碳平台来统计数据
最近做了一个物联网项目，具体是这样的，利用node-red网关盒子，来采集Modbus设备的点表，然后将数据转换，封装，最终上传到市政的低碳平台。上一步封装了点表的数据，调用低碳平台还需要账号密码，建筑id，这些都是固定信息，所以我们单独提出来。上一步获取到了原始的点表数据，下一步就是将这些点表数据与在低碳平台创建的采集的对应起来，并且设置好分类。读取modbus的节点，会有两个输出，我是使用的第一个输出。msg.meters 是一个数组，里面的每一个元素都是一个点表，比如厨房用水，园区照明，
2024-11-21 14:36:27
281
原创 web在线串口调试助手
然而，传统的串口调试工具往往需要安装复杂的软件，并且受制于操作系统和设备的兼容性。无论是嵌入式开发、物联网设备调试，还是 Arduino、ESP 系列开发板的串口调试，都能轻松应对。无需安装任何软件，只需打开浏览器即可使用，支持 Windows、Mac、Linux 等主流平台。利用 Web Serial API，数据只在本地处理，确保用户信息和设备数据的安全。数据发送与接收的实时性强，支持日志查看、数据导出等功能，方便后续分析。提供灵活的波特率设置以及数据格式选项，满足不同设备的调试需求。
2024-11-18 10:41:58
751
原创 图形编辑器基于Paper.js教程16：在Paper.js canvas画布中实现花贝塞尔曲线的功能，创建并编辑贝塞尔曲线，包括添加、删除曲线的节点，以及调整曲线的控制柄
var path;var mode;var type;path：当前操作的贝塞尔曲线对象。：当前正在操作的曲线段。mode和type：保存操作的类型和模式，比如添加、删除或者调整控制柄。：鼠标悬停的对象，用于交互时提供即时反馈。通过以上代码，我们实现了一个功能完备的贝塞尔曲线编辑工具，用户可以创建新的曲线段、选中并修改现有的段、调整控制柄、甚至连接不同的路径。这种基于 Paper.js 的解决方案展示了其强大的图形处理能力以及灵活的事件系统。
2024-10-28 09:18:14
7413
原创 有关机器学习的数据处理，模型训练，模型保存，模型调用和结果预测 整体流程
数据准备：收集、清洗和处理数据。模型训练：选择模型并进行训练。模型评估：使用评估指标检查模型的表现。模型保存：将训练好的模型保存到文件中。使用模型：加载模型并对新数据进行预测。数据预测：应用模型于实际数据，获取预测结果。这就是机器学习的整个流程。希望这个详细的介绍能帮助你理解如何从头到尾进行模型训练和应用。如果你有具体的实现问题或需要更多细节，请随时告诉我！下面是一个完整的案例 用于预测管道是否堵塞，配置环境编写模型训练代码# 1. 生成测试数据# 生成水管内压力数据，分为正常和堵塞两类。
2024-10-23 14:01:23
5210
原创 一体化单点注册与登录解决方案：基于Ragflow与毕昇的创新产品原型
我们使用FastAPI和MySQL作为底层框架，搭建了一个业务系统，与 Ragflow 和毕昇的 API 无缝集成，实现了强大的单点注册和单点登录功能。用户只需一次注册，便可同时在三个系统中生成用户账号；同样，一次登录操作即可在 Ragflow、毕昇和业务系统中完成统一授权，获取所有需要的授权令牌。通过将 Ragflow 和 毕昇 两大开源项目的强大功能集成到一个业务系统中，我们为用户提供了极致的便利与高效的解决方案。无论是用户体验的提升，还是系统操作的简化，这款产品原型都展现了极高的应用价值。
2024-10-14 10:48:18
9982
2
原创 基于Segment Anything 模型的智能抠图开发的产品原型，基于官网案例升级改造
最近在研究图像处理的过程中，接触到了Mate开源的 Segment Anything模型，花点时间研究了一番，之前也写了一篇部署模型的教程，感兴趣的同学可以查看一下之前的文章Segment Anything模型 人工智能计算机视觉研究分割任何物体模型 (SAM)：Meta AI 推出的一种新型 AI 模型，只需单击即可“剪切”任何图像中的任何物体SAM 是一种可提示的分割系统，具有对不熟悉的物体和图像的零样本泛化能力，无需额外的训练。
2024-10-14 08:00:00
11897
1
原创 闪电麦昆 语音控制齿轮行进轨迹，ESP32搭配语音控制板，串口通信，附视频演示地址
演示地址 https://www.bilibili.com/video/BV1cW421d79L/?
2024-10-11 09:13:31
11196
1
原创 基于ThingsBoard的Rest API与 MQTT API 来获取设备历史数据训练模型，并实时预测异常，将异常结果上传到ThingsBoard，创建告警
要获取实时的设备遥测数据，还有其他的几种方案，例如使用websocket来订阅设备的数据，也可以使用thingsboard网关来搭配实现，还可以直接在传感器设备端发布两个topic，一次给thingboard，一次给自定义的mqtt broker。最合适的才是最好的。训练完成后再将设备的实时数据发送给模型，然后做实时的堵塞检测。由于要获取设备的实时遥测数据，这里使用的方法是 在规则链里，遥测数据保存到是数据库后，再向自建的mqtt broker发布一个topic，然后服务器订阅这个主题就能收到实时数据啦。
2024-09-27 14:35:35
11879
1
原创 基于丹摩DAMODEL部署Segment Anything 模型，智能分割一切图片
最近在研究图像处理的过程中，接触到了Mate开源的图像分割项目，看了他们官网的demo演示，感觉很神奇，也有有趣，上传一张图片，点击一下就能将点击的物体切割出来，很类似自动物体识别，智能抠图。于是决定深入研究需学习一番。要研究学习一个模型，必不可少地要用到GPU计算，这个时候我突然想起来之前注册的丹摩（DAMODEL）送了不少代金劵，于是租借一台GPU服务器来部署学习这个模型。文末有关于丹摩平台的介绍。
2024-09-25 09:20:16
17142
3
原创 使用一个网站链接来按照目录下载存放网站资源，使用资源列表批量下载资源，自动分目录存放
将上一步获取的urls替换一下，执行。浏览器控制台执行，自动下载资源链接。
2024-09-20 11:51:20
12006
1
原创 nodejs 使用kafka案例，node-red配置kafka案例，从安装配置kafka开始
【代码】nodejs 使用kafka案例，node-red配置kafka案例，从安装配置kafka开始。
2024-09-09 08:00:00
11309
原创 828华为云征文｜华为云Flexus X实例部署安装Jupyter Notebook，学习AI，机器学习算法
由于本人最近在学习一些机器算法，AI算法的知识，需要搭建一个学习环境，所以就在最近购买的华为云Flexus X实例上安装了学习环境，Jupyter Notebook。没想到效果格外的，由于华为云Flexus X实例做了很多底层的性能优化，依托创新的大模型支持和智能全域调度，X-Turbo 加速技术让常见应用的性能最高可达业界同规格的 6 倍。下面就来详细介绍一下服务器购买，安装流程，和软件的使用配置。
2024-09-07 10:34:41
10881
原创 828华为云征文｜华为云Flexus X实例部署安装HivisionIDPhoto一个轻量级的AI证件照制作算法
Flexus X 是华为云为中小企业和开发者量身打造的下一代柔性算力云服务器，能够智能感知业务负载，专为电商直播、企业建站、开发测试环境、游戏服务器、音视频服务等中低负载场景设计。灵活算力，随需配置基于用户的业务负载和内存峰值智能分析，动态推荐合适的规格，减少算力浪费，提升资源利用率。持续加速，性能卓越依托创新的大模型支持和智能全域调度，X-Turbo 加速技术让常见应用的性能最高可达业界同规格的 6 倍。越用越省，成本优化依据算力需求动态调整，按需计费，结合智能推荐确保始终享有最优的成本效益。
2024-09-06 14:32:13
10268
原创 828华为云征文｜华为云Flexus X实例部署开源物联网平台ThingsBoard
Flexus云服务器X实例 是新一代面向中小企业和开发者打造的柔性算力云服务器，可智能感知业务负载，适用于电商直播、企业建站、开发测试环境、游戏服务器、音视频服务等中低负载场景。该实例主要有四方面的特征柔性算力随心配基于用户业务负载动态和内存峰值画像，动态推荐规格，减少算力浪费，提升资源利用率一直加速一直快首创大模型加持，智能全域调度；X-Turbo加速，常见应用性能最高可达业界同规格6倍越用越省降本多按照算力规格变化，精准计算用量，按需灵活计费，搭配智能推介，始终确保成本更优。
2024-09-06 13:48:39
10338
原创 径向透镜畸变:鱼眼摄像头照片的矫正，纯前端js矫正鱼眼摄像头
最近体验了一下lightburn的摄像头辅助定位， 在使用摄像头进行定位时，你需要先校准相机镜头，然后在校准相机对齐，由于我们上位机后续也需要类似的功能，所以就需要先抽时间预研一下，以便后续开张工作。先说一下校准相机镜头，这一步做的目的是将相机拍的照片进行处理，如果相机拍的比较斜，或者那种鱼眼相机，拍的照片是中间被放大，四周被压缩。类似下面的。在这一步我们需要将其处理成正常的二维平面。恢复成下面这样子。这就是这一步的目的，将变形的图片处理成正常的，以便后续建立坐标系，其他流程的处理。废话不多
2024-09-02 08:00:00
10941
原创 摄像头实时检查程序，插入设备，自动显示画面，支持多个摄像头，支持拍照，照片放大缩小
支持的特性插入摄像头设备后，无需手动选择，自动显示摄像头画面，需要预先授权支持多个摄像头切换显示多个摄像头时支持 默认显示特定名称的摄像头支持拍照支持照片放大，缩小显示效果完整代码<!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, i
2024-08-26 08:00:00
10230
原创 图形编辑器基于Paper.js教程15：在Paper.js中实现拖拽图片导入画布功能
通过上述步骤，我们实现了一个简单而直观的图片拖拽导入功能。在此过程中，我们利用了HTML5的拖放API和FileReader接口，并结合Paper.js强大的图形处理能力，实现了一个用户友好的功能。这个功能可以扩展到更多的文件类型和更多复杂的操作中，例如对导入的图像进行编辑或处理。希望通过本文的讲解，您对如何在Web项目中实现类似功能有了更深入的理解。可以尝试修改和扩展该功能，以适应更多的应用场景。
2024-08-19 18:00:00
10567
原创 智能楼宇控制系统的革新——M31系列分布式IO模块
M31系列分布式IO模块是由成都亿佰特电子科技有限公司研发的一款集成了数字输出（DO）、模拟输入（AI）和数字输入（DI）的主机模块，我们使用的这款为主机型号为M31-AAAX4440G，拥有4个数字输出（4DO）、4个模拟输入（4AI）和4个数字输入（4DI）。支持Modbus TCP和Modbus RTU协议。得益于其灵活的架构设计，该主机可以通过扩展模块进行功能扩展，极大地提升了系统的灵活性和扩展性。无论是大型建筑还是小型住宅，M31系列都能为不同规模的楼宇控制系统提供可靠的支持。
2024-08-16 11:22:19
9147
原创 图片转gcode时，遭遇连续白色行，奇数白色行时的优化方案
做法就是缓存起来空走的那行gcode，当下次需要插入gcode时，判断上前面的白色行是否时奇数，奇数就把之前缓存的gcode 插入，再插入本次的gcode。由于使用的是相对位置坐标，那么在遭遇到连续的，奇数行的白色行时，需要将处理一下坐标起点。在使用图片生成gcode时，遇到连续的白色行（一整行都是白色像素，不进行雕刻）。
2024-08-13 21:00:46
7172
原创 图形编辑器基于Paper.js教程14：使用 Paper.js 绘制数学图形与交互的实现，画布缩放保持大小的圆，正弦，余弦，螺旋线
通过一个详细的示例，我们将探索如何使用 Paper.js 进行数学图形（正弦曲线、余弦曲线和螺旋线）的绘制，并实现固定尺寸的圆形及其随视图缩放的调整。这不仅为开发者提供了一个高效的图形处理工具，也为创建动态和互动的Web应用打开了新的可能性。函数调整视图的缩放，并重新计算圆的半径，以确保其在屏幕上的尺寸不受缩放影响。这利用了 Paper.js 的坐标变换功能，通过当前的缩放级别调整圆的半径。固定尺寸的圆的绘制与其在视图缩放时的尺寸调整是本案例的一大亮点。的使用则允许通过拖动来平移视图。
2024-08-13 08:00:00
10170
原创 8月8号前端日报：web在线进行eps32固件升级
在电脑链接设备后，点击toocaastudio上的固件信息按钮，会通过串口从设备上获取当前的固件信息，然后再请求一个服务器接口，获取最新的固件信息，二个版本对比一下，如果当前是旧版本，就显示更新固件的按钮，点击该按钮后，需要先将当前设备与电脑的串口链接断开，然后使用esptool这个工具来链接机器，然后执行esptool的主函数，获取esp信息的信息，这一步在arduino中使用python版本的esptool也会执行，并且这一步在web上会有一定几率失败，虽然esptool内部重试了7次。
2024-08-08 20:32:52
10203
原创 通过WEB 串口调试工具 Web Serial Online 来控制 ESP32 的 LED 亮起和熄灭
安装插件 web串口助手 https://chrome.google.com/webstore/detail/lebhpafkkendfnmmdljhgepfeelflopm。ESP32 与web串口要在同一台电脑，并且串口一定要选择ESP32所在的串口。发送ON 会发现 ESP32 的LED会亮起，发送OFF LED 灯会熄灭。或者打开 https://webserial.mczaiyun.top/安装下图来配置，并连接串口。
2024-08-07 08:00:00
10483
tetsdoc.zip
2020-06-15
wechat.zip
2020-06-04
eslint+prettier.zip
2020-04-29
site-packages.zip
2020-04-28
testcode.zip
2020-04-24
index.html
2019-10-25
自定义指令和路由守卫进行权限拦截, vue后台管理系统
2019-09-26
nasdaq50.com 网站代码 可用于毕业设计，企业历程展示
2023-04-17
在线自定义编辑网络拓扑图
2022-06-06
D3 API 思维导图 这TM非要11个字。
2021-09-03
网站资源下载工具.zip
2021-08-25
前端项目gitlab CI/CD 流水线文件 .gitlab-ci.yml
2021-08-17
gitlab cicd docker 部署 前端纯静态项目
2020-07-30
名称需要10个字的fans.json
2020-07-16
qiankun-demo.zip
2020-07-02
jquery 自定义扩展日期插件
2020-06-19
如何将一个应用的前端，后端，数据库 构建到一个docker镜像里？
2022-06-09
TA创建的收藏夹 TA关注的收藏夹
TA关注的人