1. Home
  2. Electronics Design
  3. waveform display in browser

waveform display in browser

I'm halfway through doing almost exactly this; a waterfall spectrum display. The data comes from real-time FFT (similar to Jan P's project) and one line is passed every 5ms as JSON into the web browser. The web browser accumulates packets and uses the browser's requestAnimationFrame to get a guaranteed time to render the content before the screen draws. Use the timeline tab in Chrome devtools to see how long your JS invocations are taking, and make sure you're not trying to do too much work in between frames. The animation frame rate will be a fraction of your display refresh interval, often a max of 60FPS, otherwise 30, 15, etc. Both HTML5 Canvas and SVG are fast enough though, if you do it right.

There's a graphic trick to make a continuously sliding waterfall. Mine slides sideways, not downwards, so I made a DIV twice as wide as the frame, and draw every vertical data line twice, separated by the width of the viewport (so one copy is off-screen). slide the underlying window one pixel sideways for each line you draw, until you hit the limit when you jump it back to the start.

I'm not available for this as a consult, and it's not my main project at the moment. But you've seen my impedance nomograph, so you know a little of my capabilities: .

I hope the above helps you. Contract prices for good front-end programmers who are capable of doing this kind of stuff well are pretty crazy.

Clifford Heath.

Reply to
Clifford Heath
Loading thread data ...

I'm designing a tachometer box and it will have a web page interface as one way to talk to it. I thought it would be cool to include an ADC so we could display waveforms, too. My software guys here are mostly embedded types so we don't know a lot about Javascript and such. I did a little searching and mostly found things for displaying audio envelope cartoons; I want a real oscilloscope-looking thing, so users can see what happens as they change gains and filtering and trigger level settings. Dual trace would be nice, the analog waveform and corresponding comparator outputs.

Has anybody done this? We'd consider getting outside help, either advice or actual coding.

I assume our box will, through some port, deliver HTML, Javascript, and maybe some zipped JS libraries to the browser. And the company logo of course. The browser will send us text strings to parse if the user wants to change parameters or such. We would also deliver blocks of waveform data on request. That's my PHB perspective on things; I'm just the hardware designer.

--

John Larkin         Highland Technology, Inc 
picosecond timing   precision measurement  

jlarkin att highlandtechnology dott com 
http://www.highlandtechnology.com
Reply to
John Larkin

formatting link

What's the matter with that?

Reply to
bloggs.fredbloggs.fred

I think they want to use JavaScript. This is interesting:

formatting link 

--

John Larkin         Highland Technology, Inc 
picosecond timing   precision measurement  

jlarkin att highlandtechnology dott com 
http://www.highlandtechnology.com
Reply to
John Larkin

An easy method for non-programmer types is this:

formatting link

Comes in various flavors from free to full bore. A "Shazam!" reaction at a client happened when they found their company logo integrated into the control screen which was no more effort than copy-paste.

--
Regards, Joerg 

http://www.analogconsultants.com/
Reply to
Joerg

There are a bunch of options but unfortunately Javascript seems to be the only one that's actually practicable. Try this:

formatting link

Reply to
bitrex

Den torsdag den 23. juli 2015 kl. 20.18.16 UTC+2 skrev John Larkin:

long time ago when I hacked together the plotting for your cabin temperatures

formatting link

I used

formatting link
they also have realtime plotting

-Lasse

Reply to
Lasse Langwadt Christensen

One approach is a CGI script that runs gnuplot under the covers. IIRC quite a few folks do that. (I'm a static HTML guy myself.)

Cheers

Phil Hobbs

--
Dr Philip C D Hobbs 
Principal Consultant 
ElectroOptical Innovations LLC 
Optics, Electro-optics, Photonics, Analog Electronics 

160 North State Road #203 
Briarcliff Manor NY 10510 

hobbs at electrooptical dot net 
http://electrooptical.net
Reply to
Phil Hobbs

Isn't there an actual oscilloscope display package under Linux? It should be fairly straightforward to drive that from an internet connection. I guess requiring the customer to installing such a package is not preferred.

--

Rick
Reply to
rickman

He is after a browser plugin - something like VNC, the way I do it on our spectrometers (I do not use a plugin but I could if I wanted to).

However this implies a fullblown RFB connection to a stand alone system having its display and GUI locally (within his oscilloscope thing) which is far from being trivial.

Dimiter

------------------------------------------------------ Dimiter Popoff, TGI

formatting link

------------------------------------------------------

formatting link

Reply to
Dimiter_Popoff

Den torsdag den 23. juli 2015 kl. 20.18.16 UTC+2 skrev John Larkin:

buy a red-pitaya:

formatting link
download the source:
formatting link
and start hacking away,

it is a zynq running linux and it seem to do exactly what you want

formatting link

-Lasse

Reply to
Lasse Langwadt Christensen

I still log the cabin temps using gnuplot. Did you furnish that script?

Now that looks promising. Thanks.

--

John Larkin         Highland Technology, Inc 
picosecond timing   precision measurement  

jlarkin att highlandtechnology dott com 
http://www.highlandtechnology.com
Reply to
John Larkin

We're not planning to run Linux on this product; it will be a bare-metal LPC3250 and an FPGA and a bunch of analog stuff.

Serving up the html and javascript doesn't look difficult. The scope display is probably not difficult for people who regularly program this sort of stuff.

--

John Larkin         Highland Technology, Inc 
picosecond timing   precision measurement  

jlarkin att highlandtechnology dott com 
http://www.highlandtechnology.com
Reply to
John Larkin

I've used a JS graphing package called "flot" that could probably be modified to display scrolling or static waveforms. I think it's based on HTML5 canvas and/or SVG DOM. I made some small tweaks and found it to be well written.

--
umop apisdn
Reply to
Jasen Betts

Yeah, I get what he is after, but there is more than one way to skin a cat. Another would be to allow a remote desktop connection. Then no software of any kind is needed for the client other than the RDP app. Still more work on the client end but installing a canned app isn't that hard. Browser based apps can be work to get running on multiple browsers and keep running with browser updates. A friend is in that line of work and there is *soooooo* much work keeping all the different versions working.

--

Rick
Reply to
rickman

Actually, I don't want a plugin, just a way for the browser to display a waveform, using some javascript. We can store any reasonable zipped javascript libraries in our gadget and deliver them to the browser.

The tach box will have no display or GUI, and in fact no official OS.

--

John Larkin         Highland Technology, Inc 
picosecond timing   precision measurement  

jlarkin att highlandtechnology dott com 
http://www.highlandtechnology.com
Reply to
John Larkin

Den torsdag den 23. juli 2015 kl. 23.22.23 UTC+2 skrev John Larkin:

yes, it is just a tiny bit of php to convert the logfile to data strings in the right format and generate the html with that data and using flot

-Lasse

Reply to
Lasse Langwadt Christensen

I am not sure I have seen that done for live graphics - then scaling, perhaps autoranging etc., even if doable it would be a massive pain to support with all browsers as they keep on evolving. Your best bet might be to produce locally a .gif (or .png or whatever) bitmap, maintain it live and persuade the browser to refresh it regularly. Don't know how the latter is to be done though.

Not having a display is not a problem, some of our spectrometers do not have one, they just maintain the display bitmap in system memory - which is viewed via RFB (VNC)(RDP which Rick suggested is very similar, same thing really but over a non-public protocol). Not having an OS - nor a VNC server nor the image to be displayed - obviously makes this impractical in your case.

Dimiter

------------------------------------------------------ Dimiter Popoff, TGI

formatting link

------------------------------------------------------

formatting link

Reply to
Dimiter_Popoff

We could do that in the FPGA! If nobody murders me for suggesting it.

--

John Larkin         Highland Technology, Inc 
picosecond timing   precision measurement  

jlarkin att highlandtechnology dott com 
http://www.highlandtechnology.com
Reply to
John Larkin

Lasse also suggested flot. That looks promising.

Wanna help?

--

John Larkin         Highland Technology, Inc 
picosecond timing   precision measurement  

jlarkin att highlandtechnology dott com 
http://www.highlandtechnology.com
Reply to
John Larkin

ElectronDepot website is not affiliated with any of the manufacturers or service providers discussed here. All logos and trade names are the property of their respective owners.