Objective

Displaying LTSPICE schematics based on the Plan.asc file in a web page with HTML5 canvas and javascript allows easy knowledge exchange. This is a typical LTSPICE schematic 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. Embedding the file information into the html code allows saving the data to a file and loading it into LTSPICE.

Das Element wird mit
    <div id="container" >
      <canvas id="imageView" width="400" height="300" level="0"
	     onclick='show_LT("imageView","LTSPICE_Plan","controlsidx")' >
      </canvas>
	  <div id="controlsidx"> </div>
    </div>
eingebunden. Der optionale Parameter level gibt an was alles dargestellt wird.
0: alle Elemente
1: SPICE Anweisungen werden weggelassen
2: Auch Textkommentare werden weggelassen
3: Bauteileigenschaften werden weggelassen

LTSPICE code wird mit
<div id="Quellcode" style="display: none;">    
    <div id="SYM_res">
    </div>
    <div id="LTSPICE_Plan">
    </div>
</div>
eingebunden.
Die Grundsymbole sind im Programmcode definiert. Man kann den Code von weiteren Symbolen einbinden. Die divs starten mit SYM_ gefolgt vom Symbolnamen.
Man benötigt das Modul LTSPICE.js:
    <script type="text/javascript" src="LTSPICE.js"></script>
Die Schaltung wird mit folgendem Code in einem Canvas dargestellt:
    <div id="LTSPICEcontainer" >
      <canvas id="canvasid" width="400" height="300"> </canvas>
      <DIV id="controlsid"> </DIV>
      <script type="text/javascript"> process_LT("canvasid","LTSPICEcodeid","controlsid")</script>

      <div id="SYM_res style="display:none"">  
      </div>

      <div id="LTSPICEcodeid" style="display:none">
      </div>
      
    </div>
Achtung: man muss alle Symbole einbinden!!
Der Parameter "controlsid" ist optional und erstellt ein Menue um Quellcode anzuzeigen und Grafik zu manipulieren.

Einbinden von externem code

Man kann auch externen Code einbinden. Dazu wird jQuery.js benötigt:
<!-- JQuery -->
<SCRIPT SRC="../scripts/jquery.js"> </SCRIPT>
Definiert hier den Canvas für den Schaltplan.
  <canvas id="Sigma" width="1000" height="600" level="0"
	    onclick='show_LT("Sigma","codeSigma;SYM_INVx","ctrlidSigma")'> </canvas >
      <DIV id="ctrlidSigma" style="display:block"> </DIV>
Bei show_LT um den Code anzuzeigen kann man durch Strichpunkt getrennt auch die Symbole angeben.
Dann werden die Dateien geladen
<pre id="SYM_INVx" style="display:none"> Nachgeladenes SPICE Symbol </pre>
<pre id="codeSigma" style="display:none"> Nachgeladener SPICE Text </pre>
 <script type="text/javascript"> 
  <!-- Begin
      $(function () {  
        $('#SYM_INVx').load('LTSPICE/INVx.asy');      
        $('#codeSigma').load('LTSPICE/SigmaDelta.asc');      
      });  	  
  //  End -->
  </script>
Man definiert leere divs mit den Namen der Symbole und des LTSPICE Schaltplans.
Von jQuery werden diese Dateien dann nachgeladen und mit folgendem Code dargestellt.
Da JavaScript ansynchron arbeitet wartet man, bis in der LTSPICE div der Code eingefügt ist um dann process_LT auszuführen.
   <script type="text/javascript"> 
  <!-- Begin
     //          canvas,  code      ??
	 function startLT() {
	    var contentLT1 = document.getElementById("codeSigma").innerHTML;
		var contentLT2 = document.getElementById("codeSigma1").innerHTML;
		if (( contentLT1.length < 60) || ( contentLT2.length < 60)) { 
		   setTimeout(startLT,500);
		} else { 
	       process_LT("Sigma","codeSigma","");
	       process_LT("Sigma1","codeSigma1","");
		}
	 }
	 window.addEventListener("load", startLT, false); 
  //  End -->
  </script >
Dabei sind "codeSigma" und "codeSigma1" die LTSPICE divs die in den canvas "Sigma" und "Sigma1" dargestellt werden.

Das Beispiel sieht man hier:

Versions

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

Syntax Symbol Files

Version 4
SymbolType CELL
LINE Normal 16 88 16 96
ARC Normal -4 -124 20 -100 8 -100 20 -112
TEXT 0 0 Center 0 LT Hello
SYMATTR Value C
SYMATTR Prefix C
SYMATTR Description Capacitor
PIN 16 0 NONE 0
PINATTR PinName A
PINATTR SpiceOrder 1
LTSPICE schematic code starts in a hidden div.
Version 4
SHEET 1 880 680
WIRE 464 -64 432 -64
WIRE 624 -64 576 -64
WIRE 272 -48 240 -48
WIRE -304 -16 -336 -16
WIRE -32 -16 -48 -16
WIRE 16 -16 -32 -16
WIRE 64 -16 16 -16
WIRE 192 -16 144 -16
WIRE 272 -16 272 -48
WIRE 272 -16 192 -16
WIRE 352 -16 272 -16
WIRE 432 -16 432 -64
WIRE 432 -16 352 -16
WIRE 480 -16 432 -16
WIRE 576 -16 576 -64
WIRE 576 -16 480 -16
WIRE 736 -16 576 -16
WIRE 576 16 576 -16
WIRE 144 32 144 -16
WIRE 480 32 480 -16
WIRE 544 32 480 32
WIRE 736 32 736 -16
WIRE -336 48 -336 -16
WIRE -304 48 -336 48
WIRE -32 48 -32 -16
WIRE -32 48 -48 48
WIRE 656 48 608 48
WIRE 16 64 16 -16
WIRE 192 64 192 -16
WIRE 272 64 272 -16
WIRE 352 64 352 -16
WIRE 432 64 432 -16
WIRE 544 64 480 64
WIRE -336 112 -336 48
WIRE -304 112 -336 112
WIRE -32 112 -32 48
WIRE -32 112 -48 112
WIRE 656 112 656 48
WIRE 688 112 656 112
WIRE -336 176 -336 112
WIRE -304 176 -336 176
WIRE 16 176 16 144
WIRE 16 176 -48 176
WIRE 128 176 16 176
WIRE 144 176 144 112
WIRE 144 176 128 176
WIRE 192 176 192 144
WIRE 192 176 144 176
WIRE 272 176 272 128
WIRE 272 176 192 176
WIRE 352 176 352 144
WIRE 352 176 272 176
WIRE 432 176 432 128
WIRE 432 176 352 176
WIRE 480 176 480 64
WIRE 480 176 432 176
WIRE 576 176 576 80
WIRE 576 176 480 176
WIRE 736 176 736 128
WIRE 736 176 576 176
WIRE 128 208 128 176
WIRE -336 256 -336 176
WIRE 16 256 16 176
WIRE 16 256 -336 256
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 voltage 16 48 R0
SYMATTR InstName V1
SYMBOL res 176 48 R0
SYMATTR InstName R1
SYMATTR Value 150
SYMBOL cap 256 64 R0
SYMATTR InstName C1
SYMATTR Value 3µ
SYMBOL ind 336 48 R0
SYMATTR InstName L1
SYMATTR Value 25m
SYMBOL diode 416 64 R0
SYMATTR InstName D1
SYMBOL Opamps\\LT1001 576 -16 R0
SYMATTR InstName U1
SYMBOL nmos4 688 32 R0
SYMATTR InstName M1
SYMBOL Comparators\\LTC1042 -176 80 R0
SYMATTR InstName U2
SYMBOL res 160 -32 R90
WINDOW 0 0 56 VBottom 0
WINDOW 3 32 56 VTop 0
SYMATTR InstName R2
SYMBOL res 160 16 M0
SYMATTR InstName R3
SYMATTR Value 100
SYMBOL res -304 -240 R0
SYMATTR InstName R4R0
SYMBOL res -80 -208 R90
WINDOW 0 0 56 VBottom 0
WINDOW 3 32 56 VTop 0
SYMATTR InstName R5R90
SYMBOL res 48 -128 R180
WINDOW 0 36 76 Left 0
WINDOW 3 36 40 Left 0
SYMATTR InstName R6R180
SYMBOL res 112 -160 R270
WINDOW 0 32 56 VTop 0
WINDOW 3 0 56 VBottom 0
SYMATTR InstName R7R270
SYMBOL res 336 -256 M0
SYMATTR InstName R8M0
SYMBOL res 368 -224 M90
WINDOW 0 0 56 VBottom 0
WINDOW 3 32 56 VTop 0
SYMATTR InstName R9M90
SYMBOL res 528 -144 M180
WINDOW 0 36 76 Left 0
WINDOW 3 36 40 Left 0
SYMATTR InstName R10M180
SYMBOL res 736 -192 M270
WINDOW 0 32 56 VTop 0
WINDOW 3 0 56 VBottom 0
SYMATTR InstName R11M270
SYMBOL ind -304 -352 R0
SYMATTR InstName L2
SYMBOL ind -80 -304 R90
WINDOW 0 5 56 VBottom 0
WINDOW 3 32 56 VTop 0
SYMATTR InstName L3
SYMBOL ind 48 -240 R180
WINDOW 0 36 80 Left 0
WINDOW 3 36 40 Left 0
SYMATTR InstName L4
SYMBOL ind 112 -272 R270
WINDOW 0 32 56 VTop 0
WINDOW 3 5 56 VBottom 0
SYMATTR InstName L5
SYMBOL ind 336 -368 M0
SYMATTR InstName L6
SYMBOL ind 368 -336 M90
WINDOW 0 5 56 VBottom 0
WINDOW 3 32 56 VTop 0
SYMATTR InstName L7
SYMBOL ind 528 -256 M180
WINDOW 0 36 80 Left 0
WINDOW 3 36 40 Left 0
SYMATTR InstName L8
SYMBOL ind 720 -304 M270
WINDOW 0 32 56 VTop 0
WINDOW 3 5 56 VBottom 0
SYMATTR InstName L9
SYMBOL Opamps\\LT1001 880 -288 R90
SYMATTR InstName U3
SYMBOL nmos4 -80 -464 R90
SYMATTR InstName M2
SYMBOL nmos4 -336 -464 R0
SYMATTR InstName M3
SYMBOL nmos4 80 -384 R180
SYMATTR InstName M4
SYMBOL nmos4 144 -384 R270
SYMATTR InstName M5
SYMBOL nmos4 384 -480 M0
SYMATTR InstName M6
SYMBOL nmos4 800 -384 M270
SYMATTR InstName M7
SYMBOL nmos4 560 -400 M180
SYMATTR InstName M8
SYMBOL nmos4 416 -464 M90
SYMATTR InstName M9
TEXT -16 -72 Left 0 !.tran 0 20m 0
TEXT -24 -96 Left 0 !.include cmosedu_models.txt
Revision: 002 Date: 15.January.2015