Skip to content

Commit

Permalink
A basic prototype
Browse files Browse the repository at this point in the history
  • Loading branch information
@r-arvind
r-arvind committed Sep 27, 2018
0 parents commit f7c7a65
Show file tree
Hide file tree
Showing 7 changed files with 423 additions and 0 deletions.
3 changes: 3 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
# Opamp-designer

Given a linear combination of voltages, this tool designs a circuit which implements the equation.
104 changes: 104 additions & 0 deletions css/style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,104 @@
body{
margin:0;
padding:0;
overflow: hidden;
}

.body{
height: 100vh;
width:100vw;
padding:0;
margin:0;
}


.header{
background: rgb(255, 29, 96);
color: white;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
text-align: center;
position: absolute;
top:0;
left:0;
right:0;
max-height: 90px ;
}

@media only screen and (min-width : 770px){
.content{
padding: 100px 10rem 0 10rem;
}
}

@media only screen and (max-width : 770px){
.content{
padding: 92px 1rem 0 1rem;
}
}

h2{
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

hr{
color: rgba(80, 80, 80, 0.336);
}

p{
font-family: 'Roboto';
}
.block{
margin-bottom: 0.5rem;
padding-bottom: 0.5rem;
}

.formula{
text-align: center;
padding: 0.5rem 0rem;
/* font-size: 1.3rem; */
/* align-items: center; */
}

.go{
padding:0.75rem 0.55rem;
font-family: Arial, Helvetica, sans-serif;
font-size: 1.2rem;
background-color: rgb(156, 156, 156);
-moz-appearance: none;
-webkit-appearance: none;
box-shadow: none;
border: 1px solid rgb(228, 228, 228);
color: rgb(0, 0, 0);
cursor: pointer;
transition: 0.2s;
/* position: relative; */
max-height: 50px;
margin:0;
}

.go:hover{
box-shadow: 1px 1px 1px rgba(155, 155, 155, 0.733);
transform: scale(1.1);
transform: translateY(-1px);

}


#input{
max-height: 50px;
margin: 0;
padding: 0.5rem 0.1rem;
font-size: 1.4rem;
border-radius: 0;
box-shadow: none;
border: 1px solid rgb(131, 131, 131);
}
.box{
width: 100%;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
padding-top: 0.2rem;
padding-bottom:1rem;
border: 1px solid rgb(134, 134, 134);
margin-bottom: 4rem;
}
19 changes: 19 additions & 0 deletions designer.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Opamp desinger</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<canvas id="mycanvas"></canvas>
</body>
<script src="js/canvasApi.js"></script>
<script src="js/renderer.js"></script>
<script src="js/execute.js"></script>
<script>
window.onload(generateCircuit());
</script>
</html>
67 changes: 67 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Opamp Designer</title>
<link rel="stylesheet" href="css/style.css">
</head>

<body style="overflow: scroll">
<div class="body">
<div class="header">
<h1>Opamp Designer</h1>
</div>
<div class="content">

<div class="box">
<h2>Try it Out <h4>(Works, but not completely)</h4></h2>
<p>Write the coefficients of all the terms in the equation with a space</p>
<div>
<input type="text" id="input">
<a href="./designer.html">
<button class="go" onclick="localStorage.setItem('query',document.getElementById('input').value);">
Generate Circuit
</button>
</a>
</div>
</div>
<div class="block">
<h2>What Is an Opamp
<hr />
</h2>

<p>
An Operational Amplifier (in short opamp) is an electronic circuit element designed for DC
amplification and are therefore used extensively in signal conditioning, filtering or to perform
mathematical operations such as add, subtract, integration and differentiation.
<br />
For a detailed info on opamp, you can refer to <a href="https://en.wikipedia.org/wiki/Operational_amplifier">Wikipedia</a>.
</p>
</div>
<div class="block">

<h2>What does this Opamp designer do?
<hr />
</h2>

<p>
One of the applications of Opamp is to build mathematical circuits.
Given a set of input voltages we can get the output voltage as a linear combination of the input voltages.

For example : <br />
<p class="formula">
V<sub>out</sub> = 2V<sub>1</sub> + 5V<sub>2</sub> - 4V<sub>3</sub>
</p>
<p>What this tool does is, given a linear combination of equations, it will design an optimal opamp circuit which implelemnts the equation</p>
</p>
</div>
</div>
</div>
<!-- <canvas id="mycanvas">Your browser does not support canvas</canvas> -->
</body>
<!-- <script src="js/canvasApi.js"></script>
<script src="js/renderer.js"></script> -->
<!-- <script src="js/renderer.js"></script> -->
</html>
13 changes: 13 additions & 0 deletions js/canvasApi.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
function lineTo(ctx,x,y){
ctx.lineTo(circuit.grid_x*x,circuit.grid_y*y);
nodes["current"] = {x:x,y:y};
}

function moveTo(ctx,x,y){
ctx.moveTo(circuit.grid_x*x,circuit.grid_y*y);
nodes["current"] = {x:x,y:y};
}

function fillRect(ctx,x,y,width,height){
ctx.fillRect(circuit.grid_x*x -width/2,circuit.grid_y*y-height/2,width,height);
}
12 changes: 12 additions & 0 deletions js/execute.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
function generateCircuit(){
circuit.init(ctx);
circuit.drawOpamp(ctx, 36, 24);
circuit.drawGridX(ctx);
circuit.drawGridY(ctx);
circuit.evaluateInput(localStorage.getItem("query"));
circuit.drawFeedback(ctx);
circuit.drawPositive(ctx);
circuit.drawNegative(ctx);
}

// document.body.appendChild(canvas);
Loading

0 comments on commit f7c7a65

Please sign in to comment.