HTML5 - renderizar circuitos eléctricos simples

Question

Tengo un conjunto de circuitos eléctricos relativamente simples. Pequeños que involucran solo resistencias, condensadores, inductores y trimmers/trimpots (es decir: resistencias variables de tres terminales).

Estoy tratando de encontrar una forma sencilla de representar estos circuitos a partir de la matriz de ecuaciones de voltaje de nodo. No necesito calcular los valores de corriente/voltaje (ya soy capaz de hacer eso).

Tengo una comprensión básica de cómo representar formas 2D en HTML5. En este punto, solo necesito una manera simple de colocar y conectar las formas a través de líneas. Siempre podría hacer una colocación simple, pero cualquier sugerencia sobre cómo evitar reinventar la rueda sería genial.

Gracias.

Answer 1

Lo siento, ha pasado un tiempo, pero he terminado la biblioteca que te prometí. Al usarlo, puedo crear circuitos como éstos:

He creado un sistema de dibujo simplificado en javascript para su uso mediante la construcción de un corto library.Copy y pegar el código para ello en su página, y luego déjalo en paz. Si desea cambiarlo, pregúnteme a mí (u otra persona que sepa Javascript) o apréndalo en un sitio web como W3Schools o Mozilla MDN. El código requiere un elemento canvas con el id "canvas". El código:

 "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); 
     } 

A continuación, crear una nueva etiqueta <script type="text/javascript">....</script> y la puso entre las etiquetas de su código de dibujo. El código de dibujo funciona de la siguiente manera:

Comienza llamando a la función beginCircuit(x,y). Dentro del paréntesis, coloque las coordenadas xey en las que desea comenzar su circuito, como por ejemplo: beginCircuit(200,100). Esto dibujará un cable y una batería en las coordenadas que especificó (en píxeles). La batería y el cable juntos ocupan 100 píxeles de espacio en la pantalla.

A continuación, puede llamar a cualquiera de las siguientes funciones:

drawWire(length)

Sorteos un cable de la longitud se especifica al final del circuito. Ocupa length cantidad de espacio.

turnClockwise(length)

Da vuelta la dirección en la cual su próximo comando dibujará 90 ° a la derecha. No ocupa espacio

turnCounterClockwise(length)

Da vuelta la dirección en la cual su próximo comando dibujará 90 ° en sentido antihorario. No ocupa espacio

drawCapacitor(length)

Dibuja un condensador al final del circuito. Toma 50px.

drawInductor(length)

Dibuja un inductor al final del circuito. Toma 50px.

drawResistor(length)

Dibuja una resistencia al final del circuito. Toma 50px.

drawTrimmer(length)

Dibuja una resistencia al final del circuito. Toma 50px.

Cuando termine de dibujar los circuitos, use la función endCircuit() para cerrar y luego dibuje el circuito. Automáticamente dibujará un cable desde el punto donde se detuvo hasta el comienzo del circuito.

Sé que es mucho que hacer, pero realmente es una manera muy fácil y flexible de hacerlo una vez que lo entiendes. Si quieres ver esto en acción, ve aquí: http://jsfiddle.net/mindoftea/ZajVE/. Por favor, pruébalo, y si tienes problemas, comenta al respecto, por favor.

Gracias y espero que esto ayude!