HTML5 - visualization of simple electrical circuits

Question

I have a set of relatively simple electrical circuits. Small, containing only resistors, capacitors, inductors, and trimmers / trimpots (i.e., three-pin variable resistors).

I am trying to find a simple way to visualize these circuits from the matrix of node voltage equations. I do not need to calculate the current / voltage values ​​(I am already able to do this).

I have a basic understanding of how to render 2D forms in HTML5. For now, I just need an easy way to place and connect the shapes along the lines. I could always make simple placement, but any suggestions on how to avoid re-creating the wheel would be great.

Thanks.

Answer 1

Sorry, but I finished the library that I promised you. Using it, I can create such schemes:

I created a simplified drawing system in javascript for use by creating a short library. Copy and paste the code for it on your page, and then leave it. If you want to change it, ask me (or someone else who knows Javascript), or get it on a website like W3Schools or Mozilla MDN. This code requires a canvas element with the identifier "canvas". The code:

"use strict" var wW=window.innerWidth; var wH=window.innerHeight; var canvasHTML=document.getElementById("canvas"); canvasHTML.width=wW; canvasHTML.height=wH; var ctx=canvasHTML.getContext("2d"); var ix; var iy; var x; var y; var d; var dx; var dy; function beginCircuit(a,b) { ctx.lineWidth=1.5; ctx.strokeStyle="#000"; ctx.beginPath(); x=a; y=b; d=0; dx=1; dy=0; ix=x; iy=y; ctx.moveTo(x,y); drawWire(50); drawPower(); } function endCircuit() { ctx.lineTo(ix,iy); ctx.stroke(); } function drawWire(l) { x+=dx*l; y+=dy*l; ctx.lineTo(x,y); } function drawPower() { var n; drawWire(10); n=3; ctx.moveTo(x+10*dy,y+10*dx); ctx.lineTo(x-10*dy,y-10*dx); x+=dx*5; y+=dy*5; while(n--) { ctx.moveTo(x+15*dy,y+15*dx); ctx.lineTo(x-15*dy,y-15*dx); x+=dx*5; y+=dy*5; ctx.moveTo(x+10*dy,y+10*dx); ctx.lineTo(x-10*dy,y-10*dx); if(n!=0) { x+=dx*5; y+=dy*5; } } ctx.moveTo(x,y); drawWire(10); } function drawCapacitor() { drawWire(22.5); ctx.moveTo(x+10*dy,y+10*dx); ctx.lineTo(x-10*dy,y-10*dx); x+=dx*5; y+=dy*5; ctx.moveTo(x+10*dy,y+10*dx); ctx.lineTo(x-10*dy,y-10*dx); ctx.moveTo(x,y); drawWire(22.5); } function drawInductor() { var n,xs,ys; drawWire(9); n=4; xs=1+Math.abs(dy); ys=1+Math.abs(dx); x+=dx*6; y+=dy*6; ctx.scale(xs,ys); while(n--) { ctx.moveTo(x/xs+5*Math.abs(dx),y/ys+5*dy); ctx.arc(x/xs,y/ys,5,Math.PI/2*dy,Math.PI+Math.PI/2*dy,1); x+=6.5*dx; y+=6.5*dy; if(n!=0) { if(dx>=0) { ctx.moveTo(x/xs-5*dx,y/ys-5*dy); } ctx.moveTo(x/xs-5*dx,y/ys-5*dy); ctx.arc(x/xs-6.5/2*dx,y/ys-6.5/2*dy,1.5,Math.PI+Math.PI/2*dy,Math.PI/2*dy,1); } } ctx.moveTo(x/xs-1.75*dx,y/ys-1.75*dy); ctx.scale(1/xs,1/ys); ctx.lineTo(x,y); drawWire(9); } function drawTrimmer() { ctx.moveTo(x+35*dx-7*dy,y+35*dy-7*dx); ctx.lineTo(x+15*dx+7*dy,y+15*dy+7*dx); ctx.moveTo(x+13*dx+4*dy,y+13*dy+4*dx); ctx.lineTo(x+17*dx+10*dy,y+17*dy+10*dx); ctx.moveTo(x,y); drawCapacitor(); } function drawResistor() { var n; drawWire(10); n=5; x+=dx*5; y+=dy*5; while(n--) { ctx.lineTo(x-5*dy,y-5*dx); ctx.lineTo(x+5*dy,y+5*dx); x+=5*dx; y+=5*dy; } ctx.lineTo(x,y); drawWire(10); } function turnClockwise() { d++; dx=Math.cos(1.570796*d); dy=Math.sin(1.570796*d); } function turnCounterClockwise() { d--; dx=Math.cos(1.570796*d); dy=Math.sin(1.570796*d); } 

Then create a new tag <script type="text/javascript">....</script> and put your drawing code between the tags. The drawing code works as follows:

You start by calling the beginCircuit(x,y) function. Inside the brackets, put the x and y coordinates on which you want to start your circuit, for example: beginCircuit(200,100) . This will lead to the wire and battery in the coordinates you specify (in pixels). The battery and wire together occupy 100 pixels of screen space.

Then you can call any of the following functions:

drawWire(length)

Draws a wire with the length indicated at the end of the circuit. Takes length amount of space.

turnClockwise(length)

Includes the direction in which your next command will draw 90 ° clockwise. No space required.

turnCounterClockwise(length)

Includes the direction in which your next command will draw 90 ° counterclockwise. No space required.

drawCapacitor(length)

Draws a capacitor at the end of a circuit. It takes up 50 pixels.

drawInductor(length)

Draws an inductor at the end of a circuit. It takes up 50 pixels.

drawResistor(length)

Draws a resistor at the end of the circuit. It takes up 50 pixels.

drawTrimmer(length)

Draws a resistor at the end of the circuit. It takes up 50 pixels.

When you finish drawing the diagram, use the endCircuit() function to close, and then draw the diagram. It will automatically pull the wire from the point where you stopped before the circuit began.

I know this a lot, but it is a very simple and flexible way to do this as soon as you understand it. If you want to see this in action, go here: http://jsfiddle.net/mindoftea/ZajVE/ . Please give him a chance, and if you have a problem, please comment on this.

Thanks and hope this helps!