Objective

Displaying LTSPICE schematics in a web page with HTML5 canvas and javascript to allow easy knowledge exchange.

These are a typical LTSPICE schematics copied as a bitmap Tools->Copy bitmap to Clipboard and then saved as file.

If you want to copy this into LTSPICE you have to redo the schematic entry or supply a separate file.
Reading the original file using jquery and displaying it using a canvas has many advantages.
An update in the LTSPICE file is directly displayed on the web page.
It is possible to provide links to all files to provide a complete download.
Clicking on the image provides controls for line thickness, text size and access to subcircuits.

The LTSPICE circuit diagram can be included with:


   <canvas id="filename" width="400" height="300" level="0" class="LTSPICE" 
   sym="or,and" > </canvas>

The filename is the filename of the LTSPICE file located in a subfolder LTSPICE.
Sym is a comma seperated list of all used subcircuits.
The optional Parameter level selects details to display:
0: all elements
1: no SPICE directives.
2: also no text comment
3: also no component properties

The module LTSPICE.js has to be included.


    <script type="text/javascript" src="LTSPICE.js"></script>

At the end of the document invoke findLT():


   <script type="text/javascript">
	 document.addEventListener("load", findLT()); 
   </script>

Examples:

Circuit.asc
Images:

Rendered LTSPICE code:

Logic.asc
Images:

Rendered LTSPICE code:

RLC.asc
Images:

Rendered LTSPICE code:

Rendered LTSPICE code level0:

Rendered LTSPICE code level1:

Rendered LTSPICE code level2:

Rendered LTSPICE code level3:

Rendered LTSPICE code level4:

Rendered LTSPICE code level5:

Use same LTSPICE code twice adding to the name x1: id="level5x1":
Possible id="name"x[0..9]

Versions

To Do:

Multiple display of one LTSPICE schematic: extend the base name with "x[0..9]"
Multiple use of symbols: create section only once
redrawLT für S5 präsentation
Size control of canvas width height +10% -10%

Version 03 6.02.2018 (7 h)

Done: Simple usage with one canvas having a name like the LTSPICE file.
Done: Look for all canvas with class="LTSPICE".
Done: Collect circuit elements and subcircuits.
Done: LTSPICE subfolder circuits are listed in main directory.
Done: Create controls.
Done: Create link list.
Done: Line thickness and fontsize input field all have same name.
Prevent double load of symbol
Verify label not written from pevious LTSPICE code.
One source code and multiple drawings. Markup in ID with #1, #i?
Fix bounding box with small number of elements only subcircuits.
Fix text alignment.
Fix input output signal labels.

Version 02 (2h) 19.10.2012

- Drawing is scaled to canvas. 03.06.2012 More than one section with SPICE schematic 24.10.2016 Scaling of schematic to canvas. Resizing canvas, schematic is done in S5.
24.10.2016 More than one schematic
24.10.2016 text position
InstName and Value concatenate in 2 lines
Position InstName: alignment R0, R90, R180, R270 ,M0 , M90, M180, M270 24.10.2016 load symbols via jQuery
24.10.2016 make filled points at intersections
24.10.2016 Button: Display SPICE schematic text in web page

Version 01 (8h) 01.06.2012

- A hidden div id="Quellcode" contains a div id="LTSPICE_Plan" with Spiceschematic code.
- Create Canvas and resize it due to the minimum and maximum coordinates.
- Unfortunately all elements have to be searched for minimum and maximum.
- Implement the mapping for WIRE
- Implement SYMBOL
- Implement SYMATTR
- Implement parse symbol a separate file has to be loaded
- Implement in parse symbol WINDOW, SYMATTR for text
- Implement in parse symbol LINE, RECTANGLE, CIRCLE, ARC
- TEXT
- FLAG for ground symbol
- ARC calculation
- Preferences for line thickness stroke, text size
- input output pin names
- 7.6.2012 Rotation, Mirroring 1h
- 8.06.2012 Text alignment rotate 2h
02.06.2012 306 Lines of Code LTSPICE.js 11 kB
02.06.2012 95 Lines of HTML plus 330 Lines of LTSPICE schematic 11 kB

To Do

- Preferences for Colors
- FLAG for 0 ground symbol Label,in, inout, bidir Lines
- yellow fill and LT symbol
- scaling zooming
- Component attributes display
- Replace schematic with real parts
- Replace schematic with Layout
- Is it possible to convert schematic to SPICE text via LTSPICE
- Display formatted source code in Web page

Syntax SPICE Schematic File

Text alignment and rotate

only for symbols transistor LT1001 the text is rotatet. For L,R, C the text remains in fixed position. in canvas:


          context.save();

          context.translate(tempx+windowx0,tempy+windowy0);

          orientText(rm); 

          context.fillText  (coord[2], 0, 0); 

          context.restore();

Store context, translate origin to x,y, rotate text, fill text, restore context.


Version 4 

SHEET 1 880 680 

WIRE 464 -64 432 -64 

FLAG 128 208 0 

FLAG 352 -16 Labelx 

FLAG 240 -48 Inx 

IOPIN 240 -48 In 

FLAG 464 -64 Outx 

IOPIN 464 -64 Out 

FLAG 624 -64 Inoutx 

IOPIN 624 -64 BiDir 

SYMBOL res 160 -32 R90 

WINDOW 0 0 56 VBottom 0 

WINDOW 3 32 56 VTop 0 

SYMATTR InstName R2 

TEXT -16 -72 Left 0 !.tran 0 20m 0

Revision: 002 Date: 15.January.2015