HTML5 - Rendering di circuiti elettrici semplici

Question

Ho una serie di circuiti elettrici relativamente semplici. Piccoli che coinvolgono solo resistori, condensatori, induttori e trimmer/trimpot (cioè resistori variabili a tre terminali).

Sto cercando di trovare un modo semplice per rendere questi circuiti dalla matrice delle equazioni di tensione di nodo. Non ho bisogno di calcolare i valori di corrente/tensione (sono già in grado di farlo).

Ho una conoscenza di base su come eseguire il rendering di forme 2D in HTML5. A questo punto, ho solo bisogno di un modo semplice per posizionare e collegare le forme tramite linee. Potrei sempre fare un semplice posizionamento, ma qualsiasi suggerimento su come evitare di reinventare la ruota sarebbe fantastico.

Grazie.

Answer 1

Scusa è passato un po ', ma ho finito la biblioteca che ti ho promesso. Con esso, è possibile creare circuiti come questi:

Ho creato un sistema di disegno semplificato in javascript per l'utilizzo con la costruzione di una breve library.Copy e incollare il codice nella propria pagina, e poi lascia stare. Se vuoi cambiarlo, o chiedi a me (oa qualcun altro che conosca Javascript), o imparalo su un sito web come W3Schools o Mozilla MDN. Il codice richiede un elemento canvas con l'id "canvas". Il codice:

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

quindi creare un nuovo <script type="text/javascript">....</script> tag e mettere tra i tag il codice di disegno. Il codice di disegno funziona in questo modo:

Si inizia chiamando la funzione beginCircuit(x,y). All'interno delle parentesi, inserisci le coordinate x e y su cui vuoi iniziare il tuo circuito, in questo modo: beginCircuit(200,100). Questo disegnerà un filo e una batteria alle coordinate specificate (in pixel). La batteria e il cavo occupano insieme 100 pixel di spazio sullo schermo.

Quindi, si può chiamare qualsiasi delle seguenti funzioni:

drawWire(length)

richiama un filo della lunghezza specificata alla fine del circuito. Prende length quantità di spazio.

turnClockwise(length)

Trasforma la direzione in cui il comando successivo verrà disegnato di 90 ° in senso orario. Non prende spazio.

turnCounterClockwise(length)

Trasforma la direzione in cui il comando successivo verrà disegnato di 90 ° in senso antiorario. Non prende spazio.

drawCapacitor(length)

Disegna un condensatore alla fine del circuito. Prende fino a 50 px.

drawInductor(length)

Disegna un induttore alla fine del circuito. Prende fino a 50 px.

drawResistor(length)

Disegna un resistore alla fine del circuito. Prende fino a 50 px.

drawTrimmer(length)

Disegna un resistore alla fine del circuito. Prende fino a 50 px.

Quando hai finito di circuiti disegno, utilizzare la funzione endCircuit() per chiudere e quindi disegnare il circuito. Traccerà automaticamente un filo dal punto in cui ti sei fermato all'inizio del circuito.

so che è molto da fare, ma in realtà è un modo molto semplice e flessibile per fare questo una volta che hai capito bene. Se vuoi vedere questo in azione, vai qui: http://jsfiddle.net/mindoftea/ZajVE/. Per favore, fai un tentativo, e se hai problemi, commentalo, per favore.

Grazie e spero che questo aiuta!