Electronics POC

by Csaba Hellinger

HTML

<script src="https://rawgithub.com/wout/svg.js/master/dist/svg.min.js"></script>
<div id="graph">
</div>

CSS

#graph {
    width: 300px;
    height: 300px;
    background-color: #707070;
    color: black;
}

.compShape {
    fill: #E0E0E0;
    stroke: #F0F0F0;
}

.compCenter {
    fill: #F0F0F0;
}

.compInput {
    fill: #E04040;
}

.compOutput {
    fill: #4040E0;
}

.compLine {
    stroke: #000;
    stroke-width: 3px;
    fill: #F0F0F0;
}

JavaScript

var draw = SVG("graph");
//var text = draw.text('SVG.JS').move(0, 0);


var grid = 20,
    corner = 10,
    plug = 12;

var gridHalf = grid / 2,
    plugHalf = plug / 2;




var components = [
    {x: 1, y: 1, w: 5, h: 3},
    {x: 3, y: 5, w: 7, h: 5}
];

var index, comp, shape;
for (index=0; index<components.length; index++) {
    comp = components[index];
    
    group = draw
        .group()
        .move(comp.x * grid, comp.y * grid);
    
    shape = group
        .rect(comp.w * grid, comp.h * grid)
        .radius(corner)        
        .addClass("compShape");    
    center = group
        .rect((comp.w - 2) * grid, comp.h * grid)
        .move(grid, 0)
        .addClass("compCenter");
    
    var bulb = (Math.min(comp.w - 2, comp.h) - 1) * grid,
        bulbX = comp.w * gridHalf,
        bulbY = comp.h * gridHalf,
        bulb45 = Math.sin(Math.PI/180*45) * bulb / 2;
    group
        .line(gridHalf, comp.h * gridHalf, comp.w * grid - gridHalf, comp.h * gridHalf)
        .addClass("compLine");
    group
        .circle(bulb)
        .move(bulbX - bulb / 2, bulbY - bulb / 2)
        .addClass("compLine");
    group
        .line(bulbX - bulb45, bulbY - bulb45, bulbX + bulb45, bulbY + bulb45)
        .addClass("compLine");   
    group
        .line(bulbX - bulb45, bulbY + bulb45, bulbX + bulb45, bulbY - bulb45)
        .addClass("compLine");
    
    input = group
        .circle(plug)
        .move(gridHalf - plugHalf, comp.h * gridHalf - plugHalf)
        .addClass("compInput");
    output = group
        .circle(plug)
        .move(comp.w * grid - gridHalf - plugHalf, comp.h * gridHalf - plugHalf)
        .addClass("compOutput");
    
    
    
}