基于HTML 实现的示波器-含完整源码

完整资料下载连接

基于HTML 实现的示波器-含js+html+css完整源码

        改源码是在桌面 PC 上设计的，分辨率为 1920 x 1080 像素，但宽高像素比为 1.4 到 1.6 的任何分辨率都将产生良好的图像。它适用于以下浏览器的最新版本：Internet Explorer、Edge、Chrome 和 FireFox。该程序在浏览器中运行，但不需要互联网连接，因此如果您想在本地使用它，可以下载下面包含的 zip 文件。尽管该程序已经过广泛的测试，但它仍然被视为测试版本，并且欢迎任何更正、改进或建议。

第 1 步：背景和教程

本教程适合那些从未有过一般示波器或特别是数字示波器经验的人，因此我们从一些基本信息开始。HTMLO作为一个教学工具，有几个内置的迷你教程。单击任何一个教程标签将显示有关它们所附加的面板的信息。自述文件标签显示有关示波器设计以及如何使用各种控件的信息。INTRODUCTION 标签显示大量有关数字示波器的信息，EXAMPLES 标签显示涵盖 HTMLO 功能的示例。单击右上角的按钮或再次单击任何标签即可关闭显示。图 2 显示了单击“简介”标签后的显示。HTMLO 上显示的一些控件是演示控件（非功能性），单击时将显示有关其功能和使用的信息。继续打开和关闭几个教程。尝试单击白色参考 BNC 插孔。在使用 HTMLO 期间可以随时访问这些教程。

与可以测量许多电气参数（电压、电流、电阻等）的万用表不同，示波器仅测量电压。然而，万用表仅在某个时间点拍摄电气参数的“快照”，而数字示波器则在一段时间内进行一系列电压测量，这是一种“电压视频”。这些测量值称为采样点，被转换为数字化值，并以电压与时间的二维图表形式显示在示波器的 LCD 上。阅读简介，了解有关数字示波器将采样点转换为数字显示的过程的详细讨论。数字示波器包含存储芯片和 IC，可以长期存储电压采样点及其数字等效点（称为波形点）。它们称为数字存储示波器或 DSO，是最常见的数字示波器类型。HTMLO 代表了这种类型。

第 2 步：垂直控制

垂直控制

电压（垂直显示）面板包含用于设置显示屏上电压刻度的控件。图 3 概述了 HTMLO 上的此面板。左侧的伏特刻度盘用于更改显示屏上每格的伏特数，中间的刻度盘是与伏特刻度盘结合使用的刻度刻度盘，可提供更大范围的伏特刻度值。伏特刻度盘的范围从 0.01 到默认的 8 伏满量程。伏特和刻度盘组合的范围是 0.01 至 400 伏满刻度。实际的 DSO 可以将伏/格和刻度调整结合在一个表盘中。右侧的 y 偏移转盘将在显示屏上向上或向下调整信号的位置。耦合控制通常也包含在垂直系统控制中。这些功能位于 HTMLO 的触发菜单中，包括 AC、DC 和 GRD 功能。AC 功能将信号的周期性“AC”电压与任何 DC 分量解耦，而 DC 功能包括这两种电压。请参阅示例部分中的示例 4，了解这两个函数的实际说明。GRD 解耦直流电压和偏置电压，并将信号置于零地。（交流电不会消除失调电压）。

第 3 步：水平控制

水平控件用于设置示波器显示的时基。大多数示波器都有时间和刻度调整的控件（由于缺乏更好的术语，所以有精细和粗略的调整）。时基控制以时间/格（秒/格）为单位分级，实际示波器显示屏上的每个格为一厘米。HTMLO 的时基（水平显示）面板如图 4 所示。时间（左侧）刻度盘以毫秒/格为单位，与刻度盘一起设置显示的时基。默认时基为 10 毫秒满量程（1 毫秒/格）。时间刻度盘上的设置乘以刻度刻度盘上的设置，提供了广泛的时基设置。右侧转盘是 x 偏移或水平位置转盘。转动此拨盘可在显示屏上向右或向左移动波形轨迹。几乎每台示波器都会有上述 3 个刻度盘的一些变化。在大多数 DSO 中，时间和刻度功能通常会合并在一个表盘中。

数字示波器中的第二组水平控件是用于设置采集和采样模式的采集控件。单击显示面板底部的按钮可打开包含多种采集功能的软菜单。选择一个功能将显示该功能的描述。

第 4 步：触发控制

触发控制

“保证重复波形在示波器屏幕上显示稳定的唯一方法是每次从左到右扫描在波形上的同一点开始。触发决定示波器何时开始迹线扫描。触发启动当信号电压与触发设置的参数匹配时，定时扫描屏幕。触发既可以检测正弦波等周期信号，也可以检测脉冲等非周期信号。最常见的触发源是内部触发（通道触发由内部触发）。示波器）和外部（远程输入）。HTML 示波器有一个演示外部触发插孔。它使用两个通道相同的内部通道触发。一些高级双通道数字示波器通常允许为每个通道设置特定的触发条件。通道。如果触发关闭或信号电压不满足触发条件，则不会发生迹线扫描。大多数示波器都包含自动触发功能来解决此问题。自动触发会按时间间隔产生重复的迹线扫描，以显示任何信号展示。然后可以使用手动模式来微调触发设置。自动触发是 HTML 示波器的默认模式，在此模式下所有手动触发控制均被禁用。HTMLO 的触发面板如图 5 所示。面板中的顶部按钮可打开或关闭自动触发。每个数字示波器的基本触发功能是边沿触发。该触发器使用两个控件进行设置，一个用于设置触发电压，另一个用于设置触发斜率。在 HTML 示波器的触发面板中，触发斜率控制是左侧拨盘，触发电平是右侧拨盘。信号触发扫描的电压电平通过 trg-lvl 旋钮设置。触发斜率转盘有 3 种设置。默认值为 (0)，只要信号电压从正变为负（穿过地线），就会触发扫描。(+) 设置将在正信号斜率上触发，(-) 设置将在负斜率上触发。这两个控件（触发电平和斜率）结合使用来设置信号的触发点。最好使用“演示”按钮（真实示波器上没有）来说明这一点。外部触发插孔是一个演示控件，单击时会显示简短的教程。触发释抑和脉冲拨盘是额外的触发控制，我们将在本教程后面再次介绍。

第 5 步：显示控件

显示控制

显示控制面板如图 6 所示。该面板包含显示控件和几个附加控件。最左边的按钮是电源按钮。当示波器打开时，显示屏将设置为其默认值（默认网格图案、10 毫秒和 8 伏满量程，通道 1 处于活动状态）。接下来的两个按钮（通道 1 和通道 2）用于设置活动通道，即可以使用示波器其余控件进行操作的通道。活动通道在显示屏中突出显示。菜单按钮可切换包含多种不同功能的软菜单。采集按钮是水平控制系统的一部分，将切换包含多个采集控件的菜单。两个深灰色按钮是真实示波器上没有的程序控件。Clr Scrn 按钮可清除活动通道显示，而 Reset 按钮可将所有波形参数重置为默认值。

显示软菜单控件

HTML 示波器是双通道示波器，具有从软菜单中选择的两组显示控件：一组用于控制标线的网格图案，第二组用于设置显示的通道。单击显示面板的教程标签可了解有关这些功能的更多信息。多通道示波器将为每个通道提供显示控件，并且能够同时显示所有通道。软菜单还包含用于波形操作和信息的附加控件。INVERT 函数将反转波函数。现代数字示波器提供周期、频率、幅度、峰峰值、上升时间、占空比、相位、RMS、平均电压等的精确测量。HTMLO 通过 STATS 功能显示信号信息。菜单中的最后一个控制是探头补偿 (PROBE)。这是一个演示控件，单击时会提供有关其使用的信息。大多数双通道数字示波器都具有这些控件以及更多显示功能。显示软菜单如图7所示。

第 6 步：函数发生器

函数发生器

大多数示波器没有内置函数发生器。这种组合通常只出现在入门级学生和业余爱好者的范围内。然而，由于 HTMLO 本质上是一个“教学”示波器，并且我们需要一种输入信号的方法，因此它确实包含一个方便的小型函数发生器，如图 8 所示。

顶行按钮用于输入 1 伏、1 kHz 常见波形：正弦波、方波、三角波和锯齿波。底行的两个按钮用于输入复杂波，用户按钮输入用户定义的信号。

第 7 步：练习#1 - 缩放和测量信号

现在我们对数字示波器控件有了基本的了解，是时候开始使用它们了。对于我们的第一个课程，我们将缩放和测量信号。我们将使用普通房屋线路电压（即 60Hz、120 伏正弦波）作为信号。（本课程取自示例部分中的示例 1）。即使我们的函数发生器是“内置”的，我们仍然需要将其连接到示波器。单击函数发生器旁边的 BNC 输入插孔之一进行连接。连接后，通道插孔下方的标签将变成绿色。在本课程中，我们连接到通道 1，但任一通道都可以（每个通道的波形颜色会有所不同）。接下来打开 HTML（单击电源按钮）并按函数发生器上的用户按钮。这将弹出一个软菜单，我们可以在其中输入信号参数。单击正弦单选按钮，输入以 kHz 为单位的频率 (0.06) 和电压 (120)。重要提示 – 输入每个参数后，单击每个参数旁边的 Enter 按钮。您将收到一条警报提示，确认输入的每个参数。完成后，单击“提交”按钮，您应该会看到如图 9 所示的内容。

如果不是，则您没有正确输入信号值（可能没有单击参数 ENTER 按钮）。您可以通过单击显示菜单按钮并单击 STATS 功能来检查信号参数。单击“菜单”按钮或将鼠标慢慢移出软菜单，可关闭显示软菜单。通过慢慢移出鼠标或单击 STATS 功能来关闭 STATS 软菜单。如果未正确输入值，请重新输入所有内容。无论如何，信号远远超出了范围。计算并设置显示信号所需的时间刻度和电压刻度控制的组合。电压和时间刻度盘是“数字”表盘；按一下表盘的黑色外缘即可将其转一站。单击左键可逆时针转动转盘，单击右键可顺时针转动转盘。单击表盘中心可将其重置为默认值。如果您不确定要使用什么，只需摆弄旋钮，直到显示信号为止。尝试显示 3 到 6 个周期（周期）的波形，大约占据垂直显示的二分之一到三分之二。电压范围需要超过 120 伏。将伏特刻度旋钮转到 X20（默认 8 伏满量程 x 20 = 160 伏）或 X50（8 x 40 = 400 伏）即可实现此目的。还有另一种组合可以同时使用电压和刻度盘，我认为它可以提供最佳显示效果（提示：200V 全刻度。）时间刻度设置为 50 毫秒全刻度以显示 3 个周期或 100 毫秒显示 6 个周期。可以使用时间刻度盘的多种组合（您可以进行数学计算）。设置为 50 毫秒和 200 伏满量程时的信号看起来相当不错（图 10）。现在，使用电压控制面板中的 y 偏移拨盘设置分界线上波形的底部峰值。偏置表盘是“模拟”表盘。单击并拖动指示点以转动转盘。使用刻度网格作为标尺测量峰峰值电压，以确认信号确实为 120 伏。每个格将是显示屏上突出显示的满量程电压除以 8（垂直格的总数）。为了获得更高的测量精度，请打开显示软菜单并选择精细网格控件。

第 8 步：练习 #2 - 双信号

HTML 示波器是双通道示波器。双通道数字示波器允许您同时比较两个不同的波形，每个通道一个。我们将在下一个练习（示例 2）中执行此操作。打开示波器并将函数发生器插入通道 2。单击函数发生器上的正弦按钮可在通道 2（桃色）上显示 1 伏、1 kHz 正弦波，并缩放至 0.5 伏/格和 0.5 毫秒/格。连接到通道 1 并生成另一个正弦波。现在通道 1（蓝色）上显示正弦波。按照与通道 2 相同的方式缩放此波形。打开显示面板菜单并单击双显示功能。通道 1 是默认通道，无论通道 2 是否处于活动状态，该通道上显示的波形都​​会叠加在通道 2 上的波形上。当前活动通道在显示屏底部突出显示。单击显示面板中的通道 2 按钮以激活通道 2，打开显示菜单，然后选择 INVERT 功能。现在，通道 2 正弦波显示为通道 1 上正弦波的反相（图 11）。使用 x 偏移拨盘向左或向右移动通道 2 正弦波，以模拟两个波形之间的相位差。再次打开显示菜单，然后单击“拆分显示”选项。现在，两个通道均单独显示，并突出显示相应的活动通道。真正的多通道 DSO 通常会在同一个刻度上显示所有信号迹线。使用其他波形之一重复此示例。

第 9 步：练习#3 - 触发

最后两个练习涉及触发，这个概念有时会让示波器新手感到困惑。简而言之，触发是产生稳定波形显示的机制。将函数发生器连接到通道 2，打开 HTMLO，然后按函数发生器上的 Ramp 按钮。设置电压拨至 0.5 伏/格。当 HTMLO 打开时，默认触发模式为自动触发。当示波器的自动触发处于活动状态时，示波器会按照示波器设置的时间间隔生成连续的水平扫描。HTMLO 自动触发将扫描速率与信号周期同步，以便显示稳定的波形（这毕竟是教学示波器）。在现实生活中，扫描速率可能不等于信号周期倍数，并且信号会失真并倾向于在屏幕上爬行。触发器基本上告诉示波器何时开始每次波形扫描以产生稳定的波形显示。触发器有很多种类型，特别是在数字示波器中。其中包括边沿、高级边沿、脉冲、A+B、串行、搜索和标记等。HTML 示波器有两个基本但非常常见的触发器。最常见的是边沿触发，几乎所有示波器（模拟和数字）都可用。按触发面板中的“自动开启”按钮可禁用自动触发。当自动触发关闭时，“正常”触发被激活，触发模式默认为边沿触发。当前触发模式显示在屏幕顶部。要使用边沿触发，我们需要设置触发斜率和电平。请注意，触发斜率转盘有 3 个设置：(-)、(0)（默认）和 (+)。(-) 将触发设置为波形的负斜率，(0) 将触发设置为下降波形与地线（零伏）交叉处，(+) 将触发设置为波形的正斜率。trg-lvl 旋钮设置触发显示扫描的电压。将触发斜率旋钮设置为 (0)，并将触发电压上下移动超过正信号峰值和负信号峰值。什么都没发生。HTML 示波器是一种教学工具，具有一个显示屏，可以准确显示使用边沿触发控件设置触发点的位置。单击触发面板中的“演示”按钮可查看示波器在何处触发。触发点是白点（图 12）。当触发斜率旋钮设置为默认 (0) 位置时，每次波形的向下斜率越过地线时都会触发显示扫描。请注意，在这种情况下，更改触发电压电平没有任何影响。将触发斜率转盘更改为 (+) 并调整触发电平。触发点沿着斜波的正斜率移动，如果触发电平移动超过波峰，则波消失，表明触发丢失。选择（-）触发斜率并调整触发电平；触发点沿负斜率移动。将触发电平重置为零（按触发电平拨盘的中心），将触发斜率拨盘设置为 (+)，关闭演示显示，然后使用 x 偏移拨盘将斜波向右移动。增加触发电压水平并注意触发点如何变化。将触发电平移过斜波的任一峰值将产生更真实的非触发波形表示。按触发电平拨盘的中心可重置触发电平。脉冲触发是另一种常见的触发形式。由于本教程已经太长，读者可以参考示例 6 来了解脉冲触发。

第 10 步：练习 #4 - 更多触发

对于本教程的最后一个练习，我们将为复杂波形设置触发器（示例 7）。将函数发生器连接到通道 2，按下右侧复杂波形按钮，然后打开 HTMLO。显示具有不同周期和占空比的脉冲的矩形波形。请注意，波形每 3 个脉冲重复一次。为了获得额外的分数，请尝试测量每个脉冲的周期和占空比。关闭自动触发器。示波器现在处于边沿触发模式，波形变得混乱。将时间和电压刻度盘设置为 0.5，并使用 x 偏移刻度盘将波形向右移动。将触发斜率转盘设置为 (+) 并增加触发电平。我们看到边沿触发器工作正常。如果触发电平设置为高于幅度，则波形消失，表明触发丢失。但是混乱的波形又如何呢？它应该看起来像自动触发激活时显示的信号。打开触发器演示显示。显示屏显示一组相互堆叠的重复脉冲。发生这种情况是因为示波器在每个脉冲的正边沿触发。我们需要一种方法来仅触发每组三个重复脉冲中的第一个脉冲。触发释抑可以解决这个问题。它用于设置一个时间间隔，在此期间不会发生触发。转动触发释抑旋钮，直到三个脉冲被解析。请注意，每次释抑增加超过下一个脉冲前沿 (+) 边沿的时间点时，该脉冲不再触发扫描并且“未堆叠”。关闭演示显示并调整释抑周期以解析通道 2 波形。使用脉冲触发器重复练习（演示不适用于脉冲）。可能会有一些惊喜。

第11步：结论

这就是本教程的全部内容。我发表这篇教程是别有用心的；我想把 HTMLO 放在那里。我认为，对于高中科学课程、电子俱乐部以及任何想要在花费数百至数千美元购买数字示波器之前对数字示波器有所了解的人来说，这将是一个很有价值的工具。我强烈建议阅读简介部分；它包含许多有关数字示波器的附加详细信息。此外，完成其余示例将使读者深入了解数字示波器的几个附加功能。