HTML Oscilloscope





Introduction: HTML Oscilloscope

Simple Circuit here with another Instructable after an extended leave of absence. This Instructable is about instructing. It’s a tutorial on the use of the oscilloscope for beginning electronics students and hobbyists. What, you say? Another tutorial on oscilloscopes, come on. But wait; during this tutorial you will get to practice on your very own oscilloscope. We are going to use the HTML Oscilloscope (HTMLO), a virtual digital oscilloscope designed as a learning tool. So, open another tab and type in the following address;

When you click on the link you should see something like Figure 1. Now you only need to switch tabs to read through this tutorial and work with the virtual oscilloscope at the same time.

The HTMLO was designed on a desktop PC at a resolution of 1920 x 1080 pxs, but any resolution with a width to height pixel ratio of 1.4 to 1.6 will produce a good image. It works in the latest versions of the following browsers: Internet Explorer, Edge, Chrome, and FireFox. I don’t know if it works with Safari. It is not scalable, although it works well on my tablet. The program runs in a browser but does not require an internet connection, so if you want to use it locally you can download the zip file included below. Although the program has been extensively tested it is still considered a beta version, and any corrections, improvements, or suggestions are appreciated.

Step 1: Background and Tutorials

This tutorial is geared for those who have never had any experience with oscilloscopes in general or digital oscilloscopes in particular, so we start with some basic information. The HTMLO, being a teaching tool, has several built-in mini-tutorials. Clicking on any of the various Tutorial labels will display information about the panel to which they are attached. The README label displays information on the design of the oscilloscope and how to use the various controls. The INTRODUCTION label displays a lot of information concerning digital oscilloscopes, and the EXAMPLES label displays examples covering the functions of the HTMLO. Close the display by clicking on the button at the upper right or by clicking on any label again. Figure 2 shows the display after clicking the INTRODUCTION label. Some of the controls shown on the HTML are demonstration controls (non functional) that will display information on their function and use when clicked. Go ahead and open and close a couple of the tutorials. Try clicking the white Ref BNC jack. These tutorials can be accessed at any time during use of the HTMLO.

Unlike a multimeter that can measure many electrical parameters (voltage, current, resistance, etc.), an oscilloscope only measures voltage. However, while a multimeter only takes a “snap shot” of an electrical parameter at a point in time, a digital oscilloscope takes a series of voltage measurements over a period of time, a kind of “voltage video”. These measurements, called sample points, are converted into digitized values that are displayed on the scope’s LCD as a two-dimensional graph of voltage vs time. Read the INTRODUCTION for a detailed discussion on the process of converting sample points to a digital display by a digital oscilloscope. Digital oscilloscopes contain memory chips and ICs that enable long-term storage of voltage sample points and their digital equivalents, called waveform points. They are called Digital Storage Oscilloscopes or DSOs and are the most common type of digital oscilloscope. The HTMLO represents this type.

Step 2: Vertical Controls

Vertical Controls

The voltage (vertical display) panel contains controls to set the voltage scale on the display. Figure 3 outlines this panel on the HTML. The left-hand Volts dial is used to change volts per division on the display and the center dial is a Scale dial used in combination with the Volts dial to provide a greater range of volt scale values. The Volts dial ranges from 0.01 to the default 8 volts full scale. The range for the combination of Volts and Scale dials is 0.01 to 400 volts full scale. Actual DSOs may combine volts/div and scale adjustments in a single dial. The right-hand y-offset dial will adjust the position of the signal up or down on the display. Coupling controls are also usually included with vertical system controls. These are in the trigger menu of the HTMLO and include AC, DC, and GRD functions. The AC function uncouples the periodic “AC” voltage of a signal from any DC component while the DC function includes both voltages. Refer to example 4 in the Examples section for a hands-on explanation of the two functions. GRD uncouples both DC and offset voltage and places the signal at zero ground. (AC will not remove offset voltage).

Step 3: Horizontal Controls

Horizontal controls are used to set the time base of the oscilloscope display. Most oscilloscopes have controls for time and scale adjustments (fine and coarse for lack of better terms). The time base control is graduated in units of time/division (sec/div), with each division on an actual oscilloscope display measuring one cm. The time base (horizontal display) panel of the HTMLO is shown in Figure 4. The Time (left-hand) dial is graduated in msec/div and together with the Scale dial sets the time base of the display. The default time base is 10msec full scale (1 msec/division). The setting on the Time dial is multiplied by the setting on the Scale dial, providing a wide range of time base settings. The righthand dial is the x-offset or horizontal position dial. Turning this dial moves a waveform trace either right or left on the display. Pretty much every oscilloscope will have some variation of the 3 dials above. The time and scale functions will generally be combined in one dial in most DSOs.

The second set of horizontal controls found in digital oscilloscope are acquisition controls used to set acquisition and sampling modes. Clicking on the button at the bottom of the display panel opens a soft menu of several acquisition functions. Selecting a function will display a description of that function.

Step 4: Trigger Controls

Trigger Controls

"The only way to guarantee a repetitive waveform will appear stable on the oscilloscope screen is for each left-to-right sweep to begin at the same point on the wave form. A trigger determines when the oscilloscope begins a trace sweep. The trigger initiates a timed sweep across the screen when a signal voltage matches the parameters set by the trigger. Triggers can detect both periodic signals such as sine waves and non-periodic signals such as pulses. The most common trigger sources are internal (channel trigger provided by the scope) and external (remote input). The HTML oscilloscope has a demonstration external trigger jack. It uses an internal channel trigger that is the same for both channels. Some advanced dual-channel digital scopes often allow specific triggering conditions to be set for each channel. A trace sweep will not occur if the trigger is off or the signal voltage does not meet triggering conditions. Most oscilloscopes contain an AUTO-trigger function to remedy this. The auto-trigger produces recurring trace sweeps at timed intervals to reveal any signal present. Manual mode can then be used to fine-tune the trigger settings. Auto-trigger is the default mode for the HTML oscilloscope and all manual trigger controls are disabled in this mode. The trigger panel of the HTMLO is shown in Figure 5. The top button in the panel toggles auto trigger on or off. The basic trigger function found in every digital oscilloscope is the edge-trigger. This trigger is set using two controls, one to set the trigger voltage and the other to set the trigger slope. Trigger Slope control is the left-hand dial and the trigger level is the right-hand dial in the trigger panel of the HTML oscilloscope. The voltage level at which a signal will trigger a sweep is set with the trg-lvl dial. The Trigger Slope dial has 3 settings. The default is (0) and will trigger a scan whenever signal voltage goes from positive to negative (crosses the ground line). The (+) setting will trigger on a positive signal slope and the (-) setting on a negative slope. The two controls (trigger level and slope) are used in combination to set a trigger point on a signal. This can best be illustrated using the Demo button (not found on real oscilloscopes). The External trigger jack is a demonstration control that displays a short tutorial when clicked. The Trigger Holdoff and Pulse dials are additional trigger controls that we will meet again later in this Instructable.

Step 5: Display Controls

Display Controls

The display controls panel is shown in Figure 6. This panel contains the display controls and several additional controls. The left most button is the power button. When the scope is turned on the display will be set to its default values (default grid pattern, 10 msecs and 8 volts full scale, and channel 1 active). The next two buttons (Chan 1 and Chan 2) are used to set the active channel, i.e., the channel that can be manipulated with the rest of the oscilloscope controls. The active channel is highlighted in the display. The Menu button toggles a soft menu that contains several different functions. The Acquire button is part of the horizonal control system and will toggle a menu containing several acquisition controls. The two dark gray buttons are program controls not found on real oscilloscopes. The Clr Scrn button clears the active channel display and the Reset button resets all waveform parameters to default values.

Display Soft Menu Controls

The HTML Oscilloscope is a dual channel scope and has two groups of display controls selected from the soft menu: one group to control the grid pattern of the graticule, and the second to set the channel(s) displayed. Click on the display panel Tutorial label to learn more about these functions. Multichannel oscilloscopes will have display controls for each channel and will be able to display all channels simultaneously. The soft menu also contains additional controls for waveform manipulation and information. The INVERT function will invert the wavefunction. Modern digital oscilloscopes provide precise measurements of period, frequency, amplitude, peak-to-peak, rise time, duty cycle, phase, RMS, average voltage, and many more. The HTMLO displays signal information via the STATS function. The last control in the menu is the probe compensation (PROBE). This is a demonstration control that provides information on its use when clicked. Most dual-channel digital oscilloscopes will have these controls plus many more display functions. The display soft menu is shown in figure 7.

Step 6: Function Generator

Function Generator

Most oscilloscopes do not have a built-in function generator. This combination is usually only found in entry level student and hobbyist scopes. However, since the HTMLO is essentially a “teaching” oscilloscope and we need a way to enter signals, it does contain a handy little function generator shown in figure 8.

The top row buttons are used to input one volt, one kHz common waveforms: sine, square, triangle, and ramp. Two buttons in the bottom row are used to input complex waves, and the User button inputs a user defined signal.

Step 7: Exercise #1 - Scale and Measure a Signal

Now that we have a basic understanding of the digital oscilloscope controls it’s time to start using them. For our first lessen we will scale and measure a signal. We will use as our signal common house line voltage, that is, a 60Hz, 120-volt sine wave. (This lesson is taken from Example 1 in the EXAMPLES section). Even though our function generator is “built-in” we still need to connect it to the oscilloscope. Connect by clicking one of the BNC input jacks located next to the function generator. The label beneath the channel jack will turn green when connected. We are connected to channel 1 for this lesson, but either channel will do (waveform color will be different for each channel). Next turn on the HTML (click the power button) and press the User button on the function generator. This will bring up a soft menu where we can enter our signal parameters. Click the sine radio button, enter the frequency in kHz (0.06) and the voltage (120). Important – click the Enter button next to each parameter after keying it in. You will get an alert prompt confirming each parameter entered. When done click the Submit button and you should see something like Figure 9.

If not, you didn’t enter your signal values correctly (probably didn’t click parameter ENTER button). You can check your signal parameters by clicking the display Menu button and clicking the STATS function. Close the display soft menu by either clicking the Menu button or slowly mousing out of the soft menu. Close the STATS soft menu by either slowly mousing out or clicking the STATS function. If values were not entered correctly enter EVERYTHING again. At any rate, the signal is way off scale. Calculate and set the combination of time scale and volt scale controls needed to display the signal. The volt and time scale dials are “digital” dials; one click of the black outer rim of a dial turns it one stop. Left click to turn the dial counter-clockwise and right click to turn the dial clockwise. Clicking the center of a dial resets it to the default value. If you're not sure what to use just fiddle with the dials until the signal is displayed. Try for a waveform display of 3 to 6 periods (cycles) that takes up about one-half to two-thirds of the vertical display. The voltage scale needs to be something over 120 volts. Turning the volts Scale dial to X20 (default 8 volts full scale x 20 = 160 volts) or X50 (8 x 40 = 400 volts) does the trick. There is one other combination that will work using both Volt and Scale dials that I think gives the best display (hint: 200V full scale.) The time scale is set at 50 msec full scale to display 3 cycles or 100 msec for 6 cycles. Several combinations of the time scale dials can be used (you do the math). The signal at settings of 50 msec and 200 volts full scale looks pretty good (Figure 10). Now set the bottom peak of the waveform on a division line using the y-offset dial in the voltage control panel. The offset dials are “analog” dials. Click and drag the indicator dot to turn the dial. Measure the peak to peak voltage using the graticule grid as a ruler to confirm the signal is indeed 120 volts. Each division will be the full-scale voltage highlighted on the display divided by 8 (the total number of vertical divisions). For more measurement accuracy open the display soft menu and select the Fine grid control.

Step 8: Exercise #2 - Dual Signals

The HTML Oscilloscope is a dual channel scope. Dual channel digital oscilloscopes allow you to compare two different waveforms simultaneously, one on each channel. We will do this in our next exercise (Example 2). Turn on the scope and plug the function generator into channel 2. Click the Sine button on the function generator to display a one volt, one kHz sine wave on channel 2 (peach) and scale to 0.5 volts/div and 0.5 msec/div. Connect to Channel 1 and generate another sine wave. Now a sine wave is displayed on Channel 1 (blue). Scale this waveform the same as you did for channel 2. Open the display panel menu and click on the Dual display function. Channel 1 is the default channel and a waveform displayed on this channel will be superimposed over a waveform on channel 2 whether channel 2 is active or not. The current active channel is highlighted at the bottom of the display screen. Click the Chan 2 button in the display panel to make channel 2 active, open the display menu, and select the INVERT function. Now channel 2 sine wave is displayed as the inverse of the sine wave on channel 1 (Figure 11). Move channel 2 sine wave left or right using the x-offset dial to simulate phase differences between the two waveforms. Open the display menu again and click on the Split display option. Both channels are now displayed separately with the appropriate active channel highlighted. Real multichannel DSO’s will usually display all signal traces on the same graticule. Repeat this example using one of the other waveforms.

Step 9: Exercise #3 - Triggering

The last 2 exercises deal with triggering, a concept that is sometimes confusing to oscilloscope novices. Simply put, triggering is the mechanism that produces a stable waveform display. Connect the function generator to channel 2, turn on the HTMLO, and press the Ramp button on the function generator. Set the Volts dial to 0.5 volt/div. When the HTMLO is turned on the default trigger mode is Auto Trigger. When the auto trigger of an oscilloscope is active the scope generates continuous horizontal scans at a time interval set by the scope. The HTMLO Auto Trigger syncs the scan rate to the signal period so that a stable waveform is displayed (this is after all a teaching oscilloscope). In real life the scan rate may not equal a signal period multiple and the signal will be distorted and tend to crawl across the screen. The trigger basically tells the oscilloscope when to start each waveform scan to produce a stable waveform display. There are many types of triggers, especially in digital oscilloscopes. These include edge, advanced edge, pulse, A+B, serial, search and mark, and so on. The HTML Oscilloscope has two basic but very common triggers. The most common is the edge trigger and is available on almost every oscilloscope, both analog and digital. Press the Auto On button in the trigger panel to disable auto trigger. When auto trigger is turned off “normal” triggering is activated and trigger mode defaults to edge trigger. The current trigger mode is displayed at the top of the screen. To use the edge trigger, we need to set both the trigger slope and level. Notice the trigger slope dial has 3 settings, (-), (0) (the default), and (+). (-) sets the trigger on the negative slope of a waveform, (0) sets the trigger where the descending waveform crosses the ground (zero volt) line, and (+) sets the trigger on the positive slope of a waveform. The trg-lvl dial sets the voltage that triggers the display sweep. Leave the Trigger Slope dial set to (0) and move the trigger voltage up and down past the positive and negative signal peaks. Nothing happens. The HTML oscilloscope, being a teaching tool, has a display that shows exactly where the trigger point is set using the edge trigger controls. Click on the Demo button in the trigger panel to see where the scope is triggering. The trigger points are the white dots (Figure 12). When the Trigger Slope dial is set to the default (0) position a display scan is triggered every time the downward slope of the waveform crosses the ground line. Notice that changing the trigger voltage level has no effect in this case. Change the Trigger Slope dial to (+) and adjust the trigger level. The trigger point moves along the positive slope of the ramp wave and if the trigger level is moved beyond the wave peak the wave disappears, indicating that triggering is lost. Select (-) trigger slope and adjust the trigger level; the trigger point moves along the negative slope. Reset the trigger level to zero (press the center of the trg-level dial), set the Trigger Slope dial to (+), turn off the Demo display, and move the ramp wave to the right with the x-offset dial. Increase the trigger voltage level and notice how the trigger point changes. Moving the trigger level past either peak of the ramp wave will produce a more realistic representation of a non-triggered waveform. Reset the trigger level by pressing the center of the trg-level dial. Pulse triggering is another common form of triggering. Since this tutorial is already too long the reader is referred to Example 6 to learn about pulse triggering.

Step 10: Exercise #4 - More Triggering

For the last exercise of this Instructable we will set a trigger for a complex waveform (Example 7). Connect the function generator to channel 2, press the right hand complex waveform button, and turn on the HTMLO. A rectangular waveform is displayed with pulses of different periods and duty cycles. Notice that the waveform repeats every 3 pulses. For extra credit try measuring the period and duty cycle of each pulse. Turn off the auto trigger. The scope is now in edge trigger mode and the waveform becomes a mess. Set the time and volt dials to 0.5 and move the waveform to the right with the x-offset dial. Set the Trigger Slope dial to (+) and increase the trigger level. We see that the edge trigger is working properly. If the trigger level is set higher than the amplitude the waveform disappears indicating that triggering is lost. But what about the jumbled waveform? It should look like the signal displayed when auto trigger was active. Turn on the trigger Demo display. The display shows a single group of the repeating pulses stacked on each other. This happens because the scope triggers on the positive edge of every pulse. We need a way to trigger on only the first pulse in each group of three that repeat. The Trigger Holdoff comes to the rescue. It is used to set a time interval during which no triggering will take place. Turn the Trigger Holdoff dial until the three pulses are resolved. Notice that each time the holdoff is increased beyond the timepoint of the leading (+) edge of the next pulse, that pulse no longer triggers a scan and is “unstacked”. Turn the Demo display off and adjust the holdoff period to resolve the channel 2 waveform. Repeat the exercise with the pulse triggers (Demo doesn't work with pulse). There may be some surprises.

Step 11: Conclusion

That’s all for this Instructable. I have an ulterior motive in publishing this Instructable; I wanted to put the HTMLO out there. I think it would be a valuable tool for say, high school science classes, electronics clubs, and for anyone who wants to be somewhat knowledgeable about digital oscilloscopes before plunking down several hundred to several thousand dollars for one. I highly recommend reading the INTRODUCTION section; it contains a lot of additional detailed information about digital oscilloscopes. Also, working through the rest of the Examples will give the reader insight into several additional functions of digital oscilloscopes.



  • Epilog Challenge 9

    Epilog Challenge 9
  • First Time Author Contest 2018

    First Time Author Contest 2018
  • Paper Contest 2018

    Paper Contest 2018

We have a be nice policy.
Please be positive and constructive.




Thank you for sharing this Instructable.

In the South African engineering field, it amasses me to see how few engineers can actually use an oscilloscope.

This will most likely be very useful to a lot of people.


Thanks, I was hoping people would view it as a good learning tool.

Thank you. Nice tutorial. Keep up the good work.