Custom pulse generator

http://uplight.ca/htms/Ocilloscope-Javascript.htm

Why What When

When to comes close to reality we more often dealing with complex wave forms. Sound wave forms except piano contains hundreds harmonics ins spectrum. Very often easy to convert wave on one equipment into image and have it as source. Because images have a long history we can find wave form almost everything in the Internet.

My goal was to create a pre-amp for ECG.

3 challenges:

• microvolt  signals (amplitude 1 mv)
• high impedance of human skin
• high electrical nose

To test the circuit I created simple javascript image to data array converter

Here is my third version of oscilloscope with memory 

I did try to stay UX as close as possible

Input select:

Doesn't do much on my computer but for some sound cards will have the difference. You need to know what microphone input is from available in drop down.

Screen width:

Time during bytes shown on screen were collected;

Browser has special class: ScriptProcessorNode connected to audio steram. Node reads bytes in array (buffer size). In this case buffer is 2048 bytes

ScriptProcessorNode triggering javascript function every time buffer size is processed.

This function read  bytes from buffer and draw it on screen;

Time difference between triggers shown as Screen width.

Record total Screens:

Number of packets (buffers) will be hold in browser memory ready for processing

Sensitivity:

Only array will be recorded if array contains value exceeded sensitivity value

Accepted values from 0 to 128

If value is 0; all packet will be recorded;

Print Recorded:

Functionality in development

For now it gives you all recorded values in text area;

each row starts from timestamp and ends with \n symbol. Data between represents buffer data as coma separated array;

Bottom screen is for viewing recorded buffers; Range slider navigate between buffers (draw each packet on screen);

Number on the right is total buffers recorded;

Try to brake it. If you do please let me know.

I'm working on next version 4. I feel like missing capability to see all recorded packets at once

This how it looks om my computer:

If you want to save oscillogramme  on PC right click on graphics -> save image

Simple javascript oscilloscope in html page

I think versions will be OK.

Some people need just simple oscilloscope without any memory but performance only
The simplest version  will be one function to draw audio input on screen:
  http://uplight.ca/htms/Ocilloscope-Javascript.htm

Who are interested  in code right click on page go to source and in js folder find  js/UplOscilloscope1.js

I did inserted it on the bottom but without code formatting  don't think it useful.
There are 2 classes (objects) in code Oscilloscope1 controlling user interactions and OcsDisplay drawing buffer on screen.
2 library  used JQuery as interface to DOM  and createjs(easeljs) as interface to canvas they are not critical to code and can be replaced with any other or use direct access.

According documentation of API createScriptProcessor :
 bufferSize must be one of the following values: 256, 512, 1024, 2048, 4096, 8192, 16384.
This value controls how frequently the audioprocess event is dispatched and how many sample-frames need to be processed each call. Lower values for bufferSize will result in a lower (better) latency. Higher values will be necessary to avoid audio breakup and glitches. It is recommended for authors to not specify this buffer size and allow the implementation to pick a good buffer size to balance between latency and audio quality.

Main function is onAudioProcess what taking array from javascript node and draw it on screen it is triggered by ScriptProcessorNode.audioprocess.

the data is Uint8Array pulled to javascript with analyser.getByteTimeDomainData(data) function holds in array of uint where values could be form 0 to 256.
The nice surprise that .getByteTimeDomainData function forming data ready to visualization:  128 value is equal zero signal, 0 is +max 256 is -max;
all what you need go through array and draw each point on screen:
 for (var i = 1; i < n; i++)    g.lineTo(i , data[i]);


the problem what I'm facing is 
when buffer 4096 and above only 2048 values in array are valid and all others are 0:

On first image oscillogramme  with buffer size 4096 and next image 8192. How you can see after 2048 values its jumping to 0;

Intro Sound card oscilloscope

I decided to publish one of my project on blog. It is may be not cool looking but can't find a right place to do so;
This project tested in Chrome browser only. So if you are in Internet Explorer please wait until Microsoft releases microphone support.


The goal of the project to have oscilloscope handy made from any PC using sound card microphone input.
Be aware that only frequency supported 20Hz-20KHz
Advantage of PC it is a memory. You can keep as many samples as you want and save it on hard drive or in database for detailed analyses, send data to others and so on.

Quick start:
Connect Microphone to your PC. You should be able to see sound waves on gray area while talking.
If you don't see adjust your microphone sensitivity with instructions below Oscilloscope screen
I splice sound extension cord and connected it to microphone input.


2 working versions:

Simple oscilloscope and Oscillator

Oscilloscope with memory

Oscilloscope Screen

PC Sound Input  Screen width in millisecond:

---

PC Microphone and Headphones wires marking: 

Adjusting your microphone sensitivity 

Go to Control Pannel->Sound->Recording
Speak into microphone and make sure green bars on right side are moving.

If they are not double click on microphone and  boost sensitivity level shown on image below:

When I did push all on max I've got 1.4 mV in vertical equal 7 pix in Y coordinates;

If I open too many pages of oscilloscope ERROR in Chrome
Uncaught SyntaxError: Failed to construct 'AudioContext': number of hardware contexts reached maximum (6).