Embedding a Design Or Waveform in an Online Document

19 June 2014

Have you ever wanted to share a schematic or waveform graph with someone?  What do you usually do?  You probably send them a image of some kind.  Maybe this is a JPG or PNG image or perhaps you send a PDF file that contains images of the content that you want to share.  

This is an accepted and acceptable way to share information.  But wouldn't it be nice if the diagrams were more interactive?  Look at the diagram below, for example. Notice what happens when you move one of the probes to another net or to a component.  Try zooming in or panning the schematic.  Click your right mouse button and send one of the waveforms to the waveform viewer.

See this blog for more details about what you can do on such an embedded live design: It's Live! (Interacting With Shared Schematics And Waveforms)

So, how can you embed a schematic or waveform on your webpage?  You simply use an iframe and the appropriate URL.  If you look at the HTML for this page, for example, you will see that the above diagram is contained in an iframe that looks like this:

<iframe frameborder="0" height="600" scrolling="no" allowfullscreen="true" ​ src="https://www.systemvision.com/design/power-mosfet-motor-and-fan" width="800"></iframe>

So, how do you get the URL to specify for the src= parameter?  Easy -- just browse the www.systemvision.com site and find a design that you want to share.  When you click on the design, you can just copy the URL from the address bar of your browser and plug it into the iframe.


Here's an example of a shared URL for a set of waveforms, detached from the schematic:

How do you edit the HTML, to include an iframe?  Well, that depends on the site that you are modifying and the tools that you are using.  Blogging tools, for example, often have a tool that makes it easy to add an iframe.  Look at the documentation for the tools that you are using.


Please to post comments

You must be a registered user to add a comment.