Skip to content

Commit e1328b4

Browse files
28raining28raining
committed
General fixes. Lots of progress being made!
1 parent ba6bbb1 commit e1328b4

25 files changed

Lines changed: 284 additions & 162 deletions

‎filterAnalyzer/images/shapeCap.js‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,14 @@ var shapeCap = draw2d.SVGFigure.extend({
22

33
init : function(attr)
44
{
5-
this._super(extend({width:30, height:65},attr));
6-
this.ressvgs = '\
7-
<svg xmlns="http://www.w3.org/2000/svg">\
8-
<path fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="10" d="M76 145V5" pointer-events="stroke"/>\
9-
<path fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="12" d="M6 145h140M6 175h140" pointer-events="stroke"/>\
10-
<path fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="10" d="M76 325V175" pointer-events="stroke"/>\
11-
</svg>';
5+
this._super(extend({width:32, height:48},attr));
6+
this.ressvgs = `
7+
<svg xmlns="http://www.w3.org/2000/svg">
8+
<path stroke-linecap="round" stroke="#000" stroke-miterlimit="10" stroke-width="10" d="M33 33v-32" pointer-events="stroke"/>
9+
<path stroke-linecap="round" stroke="#000" stroke-miterlimit="10" stroke-width="12" d="M1,37h64m-64,20h64" pointer-events="stroke"/>
10+
<path stroke-linecap="round" stroke="#000" stroke-miterlimit="10" stroke-width="10" d="M33 97v-36" pointer-events="stroke"/>
11+
</svg>
12+
`;
1213
},
1314
getSVG: function(){
1415
return this.ressvgs;

‎filterAnalyzer/images/shapeGnd.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,11 @@ var shapeGnd = draw2d.SVGFigure.extend({
44

55
init : function(attr)
66
{
7-
this._super(extend({width:25, height:42},attr));
8-
this.ressvgs = '\
9-
<svg xmlns="http://www.w3.org/2000/svg">\
10-
<path fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="10" d="M65 155V5m0 150h50q10 0 2 6l-44 38q-8 6-16 0l-44-38q-8-6 2-6h50" pointer-events="stroke"/>\
11-
</svg>';
7+
this._super(extend({width:32, height:32},attr));
8+
this.ressvgs = `
9+
<svg xmlns="http://www.w3.org/2000/svg">
10+
<path stroke-linecap="round" stroke="#000" stroke-miterlimit="10" stroke-width="10" d="M29,21v-16m0,16h22q10,0,4,8l-20,32q-6,8,-12,0l-20,-32q-6,-8,4,-8h22" pointer-events="stroke"/>
11+
</svg>`;
1212
},
1313
getSVG: function(){
1414
return this.ressvgs;

‎filterAnalyzer/images/shapeInductor.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
2+
3+
var shapeInductor = draw2d.SVGFigure.extend({
4+
5+
init : function(attr)
6+
{
7+
this._super(extend({width:64, height:16},attr));
8+
this.ressvgs = `
9+
<svg xmlns="http://www.w3.org/2000/svg">
10+
<path stroke-linecap="round" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="10" d="M1,30h16m0,0l12,-23q4,-9,8,0l12,23m64,0h16m-80,0l12,-23q4,-9,8,0l12,23m0,0l12,-23q4,-9,8,0l12,23" pointer-events="stroke"/>
11+
</svg>
12+
`;
13+
},
14+
getSVG: function(){
15+
return this.ressvgs;
16+
}
17+
});

‎filterAnalyzer/images/shapeRes.js‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,24 @@
1-
1+
//I used this website to translate from absolute path to relative path. What a pain in the bum!
2+
// https://lea.verou.me/2019/05/utility-convert-svg-path-to-all-relative-or-all-absolute-commands/
23

34
var shapeRes = draw2d.SVGFigure.extend({
45

56
init : function(attr)
67
{
7-
this._super(extend({width:40, height:25},attr));
8+
this._super(extend({width:48, height:32},attr));
9+
// this.ressvgs = '\
10+
// <svg xmlns="http://www.w3.org/2000/svg">\
11+
// <path stroke="#000" stroke-miterlimit="10" stroke-linecap="round" stroke-width="10" d="M15 5 5 35M15 5l20 60M55 5l20 60M95 5l20 60M55 5 35 65M95 5 75 65m50-30-10 30"/>\
12+
// </svg>';
813
this.ressvgs = '\
914
<svg xmlns="http://www.w3.org/2000/svg">\
10-
<path stroke="#000" stroke-miterlimit="10" stroke-width="10" d="M15 5 5 35M15 5l20 60M55 5l20 60M95 5l20 60M55 5 35 65M95 5 75 65m50-30-10 30"/>\
15+
<path stroke-linecap="round" stroke="#000" stroke-miterlimit="10" stroke-width="10" d="M9,0l-8,32m8,-32l16,64m16,-64l16,64m16,-64l16,64m-48,-64l-16,64m48,-64l-16,64m40,-32l-8,32"/>\
1116
</svg>';
17+
18+
// this.ressvgs = '\
19+
// <svg xmlns="http://www.w3.org/2000/svg">\
20+
// <path stroke-linecap="round" stroke="#000" stroke-miterlimit="10" stroke-width="10" d="M13 5 5 37m8-32 16 64M45 5l16 64M77 5l16 64M45 5 29 69M77 5 61 69m40-32-8 32"/>\
21+
// </svg>';
1222
},
1323
getSVG: function(){
1424
return this.ressvgs;

‎filterAnalyzer/images/shapeVin.js‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,13 @@ var shapeVin = draw2d.SVGFigure.extend({
44

55
init : function(attr)
66
{
7-
this._super(extend({width:25, height:100},attr));
8-
this.ressvgs = '\
9-
<svg xmlns="http://www.w3.org/2000/svg">\
10-
<circle cx="65" cy="215" r="60" fill="#FFF" stroke="#000" stroke-width="10" pointer-events="all"/>\
11-
<path fill="none" stroke="#000" stroke-miterlimit="10" d="M65 225v-40m-20 20h40m-40 30h40" pointer-events="stroke"/>\
12-
<path fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="10" d="M65 435V275m0 160h50q10 0 2 6l-44 38q-8 6-16 0l-44-38q-8-6 2-6h50m0-280V5" pointer-events="stroke"/>\
13-
</svg>';
7+
this._super(extend({width:32, height:80},attr));
8+
this.ressvgs = `
9+
<svg xmlns="http://www.w3.org/2000/svg">
10+
<circle cx="33" cy="64" r="32" fill="#FFF" stroke="#000" stroke-width="10" pointer-events="all"/>
11+
<path fill="none" stroke="#000" stroke-miterlimit="10" d="M33,64v-16m-8,8h16m-16,16h16" pointer-events="stroke"/>
12+
<path fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="10" d="M33,33v-32m0,112v-16m0,16h22q10,0,4,8l-20,32q-6,8,-12,0l-20,-32q-6,-8,4,-8h22" pointer-events="stroke"/>
13+
</svg> `;
1414
},
1515
getSVG: function(){
1616
return this.ressvgs;

‎filterAnalyzer/images/shapeVout.js‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,13 @@ var shapeVout = draw2d.SVGFigure.extend({
44

55
init : function(attr)
66
{
7-
this._super(extend({width:62, height:30},attr));
8-
this.ressvgs = '\
9-
<svg xmlns="http://www.w3.org/2000/svg">\
10-
<path fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="10" d="M5 45h100" pointer-events="stroke"/>\
11-
<circle cx="145" cy="45" r="40" fill="none" stroke="#000" stroke-width="10" pointer-events="all"/>\
12-
</svg>';
7+
this._super(extend({width:48, height:32},attr));
8+
this.ressvgs = `
9+
<svg xmlns="http://www.w3.org/2000/svg">
10+
<path fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="10" d="M0 33h32" pointer-events="stroke"/>
11+
<circle cx="64" cy="33" r="32" fill="none" stroke="#000" stroke-width="10" pointer-events="all"/>
12+
</svg>
13+
`;
1314
},
1415
getSVG: function(){
1516
return this.ressvgs;

‎filterAnalyzer/index.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
<script src="js/algebrite.bundle-for-browser-min.js"></script>
1717
<!-- <script src="js/algebrite_v1p2.bundle-for-browser-min.js"></script> -->
1818
<script src="js/startupSchematic.js"></script>
19-
<script type="text/javascript" src="https://fred-wang.github.io/mathml.css/mspace.js"></script>
19+
<script src="https://fred-wang.github.io/mathml.css/mspace.js"></script>
2020

2121
<!-- <link type="text/css" rel="stylesheet" href="application.css" /> -->
2222

@@ -30,6 +30,7 @@
3030
<script src="images/shapeGnd.js"></script>
3131
<script src="images/shapeVin.js"></script>
3232
<script src="images/shapeVout.js"></script>
33+
<script src="images/shapeInductor.js"></script>
3334
<link href="style.css" rel="stylesheet">
3435

3536
<!-- <script type="module" src="./modules/ciruitToLaplace.mjs"></script> -->

‎filterAnalyzer/modules/View.js‎

Lines changed: 38 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -37,51 +37,77 @@ export class View extends draw2d.Canvas {
3737
onDrop(droppedDomNode, x, y, shiftKey, ctrlKey) {
3838
var type = $(droppedDomNode).data("shape");
3939
this.addShapeToSchem(type, x, y);
40-
}
40+
}
4141

4242
addShapeToSchem(type, x, y) {
43+
44+
var MyInputPortLocator = draw2d.layout.locator.PortLocator.extend({
45+
init:function(x,y){
46+
this._super();
47+
this.x = x;
48+
this.y = y;
49+
},
50+
relocate:function(index, figure){
51+
this.applyConsiderRotation(figure, this.x, this.y);
52+
}
53+
});
54+
55+
56+
console.log(x, y)
57+
x = 16 * Math.round(x/16);
58+
y = 16 * Math.round(y/16);
59+
console.log(x, y)
4360
if (type == "res") {
44-
var e = new shapeRes({ x: x, y: y });
61+
var e = new shapeRes({ x: x, y: y});
4562
var inputLocator = new draw2d.layout.locator.InputPortLocator();
4663
var outputLocator = new draw2d.layout.locator.OutputPortLocator();
4764
e.createPort("hybrid", inputLocator);
4865
e.createPort("hybrid", outputLocator);
4966
e.id = `R${this.rCounter}`;
67+
e.add(new draw2d.shape.basic.Text({text:e.id, stroke:0}), new draw2d.layout.locator.TopLocator());
5068
this.rCounter = this.rCounter + 1;
5169
} else if (type == "cap") {
5270
var e = new shapeCap({ x: x, y: y });
53-
var inputLocator = new draw2d.layout.locator.InputPortLocator();
54-
var outputLocator = new draw2d.layout.locator.OutputPortLocator();
71+
var inputLocator = new MyInputPortLocator(16,0);
72+
var outputLocator = new MyInputPortLocator(16,48);
5573
e.createPort("hybrid", inputLocator);
5674
e.createPort("hybrid", outputLocator);
5775
e.id = `C${this.cCounter}`;
76+
e.add(new draw2d.shape.basic.Text({text:e.id, stroke:0}), new draw2d.layout.locator.RightLocator());
5877
this.cCounter = this.cCounter + 1;
59-
} else if (type == "vin") {
78+
} else if (type == "ind") {
79+
var e = new shapeInductor({ x: x, y: y});
80+
var inputLocator = new MyInputPortLocator(0,16);
81+
var outputLocator = new MyInputPortLocator(64,16);
82+
e.createPort("hybrid", inputLocator);
83+
e.createPort("hybrid", outputLocator);
84+
e.id = `L${this.rCounter}`;
85+
e.add(new draw2d.shape.basic.Text({text:e.id, stroke:0}), new draw2d.layout.locator.TopLocator());
86+
this.lCounter = this.lCounter + 1; } else if (type == "vin") {
6087
var e = new shapeVin({ x: x, y: y });
61-
var inputLocator = new draw2d.layout.locator.InputPortLocator();
62-
var outputLocator = new draw2d.layout.locator.OutputPortLocator();
63-
// e.createPort("hybrid",inputLocator);
88+
var outputLocator = new MyInputPortLocator(16,0);
6489
e.createPort("hybrid", outputLocator);
6590
e.id = `vin`;
6691
} else if (type == "gnd") {
6792
var e = new shapeGnd({ x: x, y: y });
6893
// var inputLocator = new draw2d.layout.locator.InputPortLocator();
69-
var outputLocator = new draw2d.layout.locator.OutputPortLocator();
94+
var outputLocator = new MyInputPortLocator(16,0);
7095
// e.createPort("hybrid",inputLocator);
7196
e.createPort("hybrid", outputLocator);
7297
e.id = `gnd`;
7398
} else if (type == "vout") {
7499
var e = new shapeVout({ x: x, y: y });
75-
var inputLocator = new draw2d.layout.locator.InputPortLocator();
100+
var inputLocator = new MyInputPortLocator(0,16);
76101
e.createPort("hybrid", inputLocator);
77102
// e.createPort("hybrid",outputLocator);
78103
e.id = `vout`;
79104
} else exit('You gave a bad type: ', type)
80105

81106
this.dropCb(e.id);
82107

83-
// e.resizeable = false;
84-
e.keepAspectRatio = true;
108+
e.resizeable = false;
109+
// e.keepAspectRatio = true;
110+
console.log(e);
85111
// e.width = 50;
86112

87113
var command = new draw2d.command.CommandAdd(this, e, x, y);

‎filterAnalyzer/modules/main.js‎

Lines changed: 28 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,7 @@ function SchematicComponents() {
6666
<div className="col" >
6767
<div key="1" data-shape="res" className="btn btn-primary draw2d_droppable" title="dragdrop the table into the canvas..">Resistor</div>
6868
<div key="2" data-shape="cap" className="btn btn-primary draw2d_droppable" title="dragdrop the table into the canvas..">Capacitor</div>
69+
<div key="2" data-shape="ind" className="btn btn-primary draw2d_droppable" title="dragdrop the table into the canvas..">Inductor</div>
6970
<div key="3" data-shape="vin" className="btn btn-primary draw2d_droppable" title="dragdrop the table into the canvas..">Input voltage</div>
7071
<div key="4" data-shape="gnd" className="btn btn-primary draw2d_droppable" title="dragdrop the table into the canvas..">GND</div>
7172
<div key="5" data-shape="vout" className="btn btn-primary draw2d_droppable" title="dradrop the table into the canvas..">Vout</div>
@@ -105,16 +106,17 @@ function FreqResponse() {
105106

106107
function TransformResults(props) {
107108

108-
return html`
109+
var z= html`
109110
<div className="row">
110111
<div className="col">
111112
<div className="row text-center">
112113
<h3>Laplace</h3>
113114
</div>
114115
<div className="row">
115-
<div id="math">
116116
The answer you provided is: ${MyComponent(props.latex)}
117-
</div>
117+
</div>
118+
<div className="row">
119+
The answer you provided is: ${MyComponentOLD(props.deleteMeLatex)}
118120
</div>
119121
</div>
120122
<div className="col">
@@ -132,6 +134,8 @@ function TransformResults(props) {
132134
</div>
133135
</div>
134136
`
137+
// console.log(z);
138+
return z;
135139
}
136140

137141
function selectUnits (name) {
@@ -161,12 +165,22 @@ function createMarkup(latex) {
161165
})};
162166
}
163167

164-
function MyComponent(latex) {
165-
console.log('latex!', latex)
166-
//FIXME - change latex for MathML
167-
return html`<math>${latex}</math>`
168+
169+
function MyComponentOLD(latex) {
168170
return html`<div dangerouslySetInnerHTML=${createMarkup(latex)} />`
169171
}
172+
function MyComponent(latex) {
173+
// console.log('latex!', latex)
174+
var z = `<math>${latex}</math>`;
175+
// var zz = htmlToElement(z);
176+
// console.log(z);
177+
// return [zz];
178+
// return html`<math>${latex}</math>`;
179+
// //FIXME - change latex for MathML
180+
// return html`<math>${latex}</math>`
181+
return html`<div dangerouslySetInnerHTML=${{__html: z}} />`
182+
// return html`<div dangerouslySetInnerHTML=${createMarkup(latex)} />`
183+
}
170184

171185
function e1 (props) {
172186
if (props.idxx >= props.length) return null
@@ -221,7 +235,8 @@ class Game extends React.Component {
221235
super(props);
222236
this.state = {
223237
elements: [],
224-
latex: null
238+
latex: null,
239+
deleteMeLatex: null
225240
};
226241
this.schematicReadiness = {
227242
vout: false,
@@ -239,10 +254,10 @@ class Game extends React.Component {
239254

240255
handleCanvasChange (canvasState) {
241256
// console.log("Inside handleCanvasChange");
242-
var latexResult;
257+
var latexResult, deleteMeLatex;
243258
var newElementMap;
244259
var elements = this.state.elements;
245-
[this.schematicReadiness, latexResult, newElementMap] = calculateMNA(canvasState, this.schematicReadiness);
260+
[this.schematicReadiness, latexResult, newElementMap, deleteMeLatex] = calculateMNA(canvasState, this.schematicReadiness);
246261

247262
//add new elements
248263
for (const key in newElementMap) {
@@ -272,7 +287,8 @@ class Game extends React.Component {
272287

273288
this.setState({
274289
elements:elements,
275-
latex: latexResult
290+
latex: latexResult,
291+
deleteMeLatex: deleteMeLatex
276292
})
277293
}
278294

@@ -322,7 +338,7 @@ class Game extends React.Component {
322338
<${Schematic} key="schem"/>
323339
<${SchematicVal} key="schemVal" schematicReadiness=${this.schematicReadiness}/>
324340
<${listElements} e=${this.state.elements} key="valueList" onChange=${(e,i) => this.handleElChange(e,i)} unitChange=${(e,i) => this.handleUnitChange(e,i)}/>
325-
<${TransformResults} name="World" key="TransformResults" latex=${this.state.latex} />
341+
<${TransformResults} name="World" key="TransformResults" latex=${this.state.latex} deleteMeLatex=${this.state.deleteMeLatex} />
326342
<${FreqResponse} key="FreqResponse"/>
327343
</div>
328344
</div>

‎filterAnalyzer/modules/mna.js‎

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -184,6 +184,7 @@ export function calculateMNA(canvasState, schematicReadiness) {
184184
if ((key2 != 'vin') && (key2 != 'vout') && (key2 != 'gnd')) {
185185
firstLetter = Array.from(key2)[0];
186186
if (firstLetter == 'R') laplaceElement = key2;
187+
else if (firstLetter == 'L') laplaceElement = "(S*" + key2 + ")";
187188
else laplaceElement = "1/(S*" + key2 + ")";
188189

189190
//2.1 in the diagonal is the sum of all impedances connected to that node
@@ -203,9 +204,9 @@ export function calculateMNA(canvasState, schematicReadiness) {
203204
//2.4 Add a 1 in the node connected to Vin to indicate that Iin flows into that node
204205
mnaMatrix[vinNode][mnaMatrix.length - 1] = '1';
205206

206-
console.log('elementMap', elementMap);
207-
console.log('vin, vout and gnd node', vinNode, voutNode, gndNode);
208-
console.log('mna ', mnaMatrix);
207+
// console.log('elementMap', elementMap);
208+
// console.log('vin, vout and gnd node', vinNode, voutNode, gndNode);
209+
// console.log('mna ', mnaMatrix);
209210

210211
var nerdStrArr = [];
211212
var nerdStr = "";
@@ -220,17 +221,17 @@ export function calculateMNA(canvasState, schematicReadiness) {
220221
Algebrite.eval("mna = [" + nerdStr + "]");
221222
Algebrite.eval("inv_mna = inv(mna)")
222223
Algebrite.eval("inv_mna")
223-
Algebrite.eval("mna_vo_vi = (inv_mna[" + (voutNode + 1) + "][" + (mnaMatrix.length) + "])")
224-
Algebrite.eval("mna_vo_vi_num = simplify(numerator(mna_vo_vi))")
225-
Algebrite.eval("mna_vo_vi_den = simplify(denominator(mna_vo_vi))")
226-
Algebrite.eval("mna_vo_vi_long = simplify(mna_vo_vi_num/mna_vo_vi_den)")
227-
console.log('vin node')
228-
// latexResult = Algebrite.run("printlatex(mna_vo_vi)");
224+
Algebrite.eval("mna_vo_vi = simplify(inv_mna[" + (voutNode + 1) + "][" + (mnaMatrix.length) + "])")
225+
// Algebrite.eval("mna_vo_vi_num = simplify(numerator(mna_vo_vi))")
226+
// Algebrite.eval("mna_vo_vi_den = simplify(denominator(mna_vo_vi))")
227+
// Algebrite.eval("mna_vo_vi_long = simplify(mna_vo_vi_num/mna_vo_vi_den)")
228+
// console.log('vin node')
229+
latexResult = Algebrite.run("printlatex(mna_vo_vi)");
229230
// console.log('Algebrite');
230231
// console.log(Algebrite.eval("mna").toString());
231-
console.log(Algebrite.eval("mna_vo_vi_num").toString());
232-
console.log(Algebrite.eval("mna_vo_vi_den").toString());
233-
console.log(Algebrite.eval("mna_vo_vi_long").toString());
232+
// console.log(Algebrite.eval("mna_vo_vi_num").toString());
233+
// console.log(Algebrite.eval("mna_vo_vi_den").toString());
234+
// console.log(Algebrite.eval("mna_vo_vi_long").toString());
234235
var ggg = simplify_algebra(Algebrite.eval("mna_vo_vi").toString());
235236
// console.log('ggg', ggg);
236237
// Algebrite.eval("simplified = " + ggg);
@@ -248,7 +249,7 @@ export function calculateMNA(canvasState, schematicReadiness) {
248249

249250

250251

251-
return [schematicReadiness, ggg, newElementMap];
252+
return [schematicReadiness, ggg, newElementMap, latexResult];
252253

253254

254255

0 commit comments

Comments
 (0)