【实用小工具】开发一个网页版LED点阵绘图模拟器

LED点阵显示控制实验，始终是微机系统、单片机控制等硬件实验中重要的一节。

实验内容包括控制显示，图案位置计算，完整图案设计等等步骤。其中完整图案的设计尤其是复杂图案或汉字总是需要手动计算位置，非常的不方便。

所以这次，为了解决这个问题，卷卷毛带来了一款网页版实用小工具——LED点阵绘图模拟器。体验地址

话不多说，上图：

下面就来详细介绍一下这个小工具吧

内置说明

一些简单的操作指南被放在了内置说明中。当页面被打开的时候会弹出。

被关闭后，可以点击顶栏的最左侧“说明”按钮重新打开。

图案绘制

单点绘制

图案绘制上，它支持随意的单点修改，点击即可选中，再次点击可以取消

涂鸦模式

除了单点模式，还支持连续绘制的“涂鸦模式”，只需要按下左Ctrl键，移动时鼠标便会自动选中经过的点

橡皮擦

对于绘制错误需要取消的点，提供了“橡皮擦”功能。当开启“橡皮擦”之后，“涂鸦”经过的点便会被取消：

清屏

按下上面的“擦粗所有”即可清空底图，重新绘制：

尺寸调整

底图的尺寸也是绘制图案的一部分。由于常见的实验LED器材普遍采用16*16的点阵。对于底图行列数的调整也设定成了16的倍数。

默认的行列数是 16*48 ，可设置的范围是：{16,32,48,64,80}。

点击上方的“设置”按钮，在弹出的设置窗口中可以设置底图的行列数：

需要注意的是，在设置行列数之后，之前的图案将会被清空（相信之后的版本会变得更加智能）

模拟器

模拟器是最重要的组件，它可以模拟LED点阵的显示，将窗口框住的的图案显示在屏幕上。

开启模拟器

首先，点击按钮，打开模拟器。同步的，可以看见模拟器当前的显示窗口。

此时，对底图的任何操作都会被同步的渲染到模拟器的屏幕上：

移动窗口

使用“WASD”四个按键可以控制窗口的移动。

不过问题就是移动端暂时还不能这样操控（相信之后的版本会变得更加智能）

窗口循环

在默认条件下，窗口会限制在底图中，不能穿越边界。当滑到边界时便会卡住。

有时我们也会有需要窗口循环的需求，这时点击“开启循环”便可以使窗口穿过边界进行循环移动：

窗口自动滚动

一般的实验都会要求字幕在LED屏幕上滚动播放。那么下方的“开启水平滚动”，“开启垂直滚动”就可以满足这个需求：

在上方的设置中可以定制滚动的参数：

间隔，单位为毫秒，默认为500。范围：[100,2000]
水平步长，默认为1，范围：[1,16]
垂直步长，默认为1，范围：[1,16]

导入与导出

由于是为硬件实验服务，所以导入导出一直算是一项核心功能。

导出

导出的数据格式有两种：二进制和十六进制，都是以逗号为分隔，且不论模拟器是否开启都会被实时更新与底图内容同步，直接复制即可：

点击导出面板左侧的按钮可以切换导出的数据格式

导入

导入功能支持将导出的数据重新导入回软件中以便结果分享与连续设计

点击右上导入按钮即可，程序会自动的计算行列。同样的，导入也支持二进制和十六进制（注意不要有多余的空格和空行）

（方块代码）
000H,000H,000H,000H,000H,000H
000H,000H,000H,000H,000H,000H
000H,000H,000H,000H,000H,000H
000H,000H,000H,000H,000H,000H
001H,0F8H,000H,000H,000H,000H
001H,008H,000H,000H,000H,000H
001H,008H,000H,000H,000H,000H
001H,008H,000H,000H,000H,000H
001H,008H,000H,000H,000H,000H
001H,0F8H,000H,000H,000H,000H
000H,000H,000H,000H,000H,000H
000H,000H,000H,000H,000H,000H
000H,000H,000H,000H,000H,000H
000H,000H,000H,000H,000H,000H
000H,000H,000H,000H,000H,000H
000H,000H,000H,000H,000H,000H

（张三代码）
000H,000H,000H,000H
07CH,0C4H,000H,000H
004H,04CH,01FH,0FCH
004H,058H,00FH,0FEH
004H,058H,000H,002H
0FCH,070H,000H,000H
080H,060H,000H,000H
083H,0FFH,00FH,0F8H
0BCH,071H,007H,0FCH
0F4H,050H,000H,004H
004H,058H,000H,000H
004H,048H,000H,000H
004H,044H,000H,000H
024H,044H,07FH,0FEH
014H,054H,03FH,0FFH
01CH,073H,000H,001H

内置说明

欢迎使用LED点阵模拟器！

体验地址

本软件可以进行LED点阵图像的创建与显示效果模拟演示，以及数字结果导出。导出支持2进制和16进制数组。

（制作匆忙，页面UI还有些粗糙，会逐步改善的~）

布局介绍

控制栏：包含主要的控制按钮。其中“设置”按钮可以设置模拟滚动速度以及底图大小，“橡皮擦”按钮可在使用涂鸦模式时擦除方块，“擦除所有”按钮会重置整张画布，“导入”按钮支持导入已有的二进制数组
点阵底图：完整的LED点阵底图。白色单位表示0，黑色单位表示1。
模拟器：LED显示模拟器，显示底图上某一区域的图案效果
导出框：点阵底图对应的数字值，使用逗号分隔

操作介绍

点击点阵中对应元素可将其翻转
按住左Ctrl进入涂鸦模式，经过元素会被涂黑（sto对不起移动端的用户orz）
“开启模拟器”后在底图中会出现表示模拟器显示范围的窗口，‘W’,‘A’,‘S’,'D’可控制创窗口移动（sto再次对不起移动端用户orz）
模拟器在“开启循环”后可以在底图中循环移动
“水平滚动”，“垂直滚动”可使窗口自行移动，速度可在设置中改变

导入导出

导出格式有两种：二进制，十六进制。逗号分隔
导入时必须为二进制点阵值，且行列必须为16的倍数且小于90

页面截图

图中张三二进制代码：

0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0
0,1,1,1,1,1,0,0,1,1,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0
0,0,0,0,0,1,0,0,0,1,0,0,1,1,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,0,0
0,0,0,0,0,1,0,0,0,1,0,1,1,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,0
0,0,0,0,0,1,0,0,0,1,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0
1,1,1,1,1,1,0,0,0,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0
1,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0
1,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,0,0,0,0,1,1,1,1,1,1,1,1,1,0,0,0
1,0,1,1,1,1,0,0,0,1,1,1,0,0,0,1,0,0,0,0,0,1,1,1,1,1,1,1,1,1,0,0
1,1,1,1,0,1,0,0,0,1,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0
0,0,0,0,0,1,0,0,0,1,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0
0,0,0,0,0,1,0,0,0,1,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0
0,0,0,0,0,1,0,0,0,1,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0
0,0,1,0,0,1,0,0,0,1,0,0,0,1,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0
0,0,0,1,0,1,0,0,0,1,0,1,0,1,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1
0,0,0,1,1,1,0,0,0,1,1,1,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1

复制导入即可看到~

作者：卷卷毛©

联系方式：

个人博客主页
CSDN主页
GitHub主页

好啦，软件介绍完毕啦，欢迎小伙伴们体验！
同时还望多多给予反馈意见，在诸位的意见下，它会变得更加完善好用！
该项目主要使用到的框架是jQuery。想要获取源码的小伙伴戳下方链接

GitHub仓库
csdn资源