init

espmaniac · Sep 15, 2024 · ec6cf30 · ec6cf30
1 parent b282336
commit ec6cf30
Show file tree

Hide file tree

Showing 30 changed files with 8,265 additions and 0 deletions.
diff --git a/component.js b/component.js
@@ -0,0 +1,127 @@
+
+class Component {
+    constructor(name, value, x, y) {
+        this.name = name;
+        this.value = value;
+        this.x = x;
+        this.y = y;
+        this.width = cellSize * 2;
+        this.height = cellSize;
+        this.angle = 0;
+        this.selected = false;
+
+        this.node1 = new Node();
+        this.node2 = new Node();
+
+        this.node1.parent = this;
+        this.node2.parent = this;
+
+        connectNodes(this.node1, this.node2, this.value);
+
+    }
+
+    rotationPointX() {
+        //return this.x;
+        return this.x + this.width/2; 
+    }
+
+    rotationPointY() { 
+        //return this.y;
+        return this.y + this.height/2; 
+    }
+
+    drawComponent() {}
+
+    draw() {
+        ctx.save();
+
+        ctx.translate(this.rotationPointX(), this.rotationPointY());
+        ctx.rotate(this.angle * (Math.PI / 180));
+        ctx.translate(-this.rotationPointX(), -this.rotationPointY());
+
+        if (this.selected) {
+            ctx.strokeStyle = "#FF0000";
+            ctx.fillStyle = "#FF0000";
+        }
+        else {
+            ctx.strokeStyle = "#000000";
+            ctx.fillStyle = "#000000";
+        }
+
+        ctx.beginPath();
+
+        this.drawComponent();
+
+        ctx.closePath();
+        ctx.stroke();
+
+        ctx.font = "bold 12px sans-serif";
+
+        let nameMetric = ctx.measureText(this.name);
+        let valueMetric = ctx.measureText(this.value);
+
+        /* ALIGN text left */
+        //ctx.fillText(this.value, this.x, this.y - (valueMetric.actualBoundingBoxAscent + valueMetric.actualBoundingBoxDescent) / 2);
+        //ctx.fillText(this.name, this.x, this.y - (nameMetric.actualBoundingBoxAscent + nameMetric.actualBoundingBoxDescent) * 2);
+        /* ALIGN text left*/
+
+
+        ctx.fillText(this.value, this.x + (this.width - valueMetric.width) / 2, this.y - (valueMetric.actualBoundingBoxAscent + valueMetric.actualBoundingBoxDescent) / 2);
+        ctx.fillText(this.name, this.x + (this.width - nameMetric.width) / 2, this.y - (nameMetric.actualBoundingBoxAscent + nameMetric.actualBoundingBoxDescent) * 2);
+
+        ctx.restore();
+
+        //drawCirc(this.rotationPointX(), this.rotationPointY()); // rotation point
+    }
+
+    hitTest(x, y) {
+        let rotatedPoint = rotatePoint(
+            {x: x, y: y}, 
+            {x: this.rotationPointX(), y: this.rotationPointY()}, 
+            -this.angle
+        );
+        if ((rotatedPoint.x >= this.x && rotatedPoint.x <= (this.x + this.width)) &&
+            (rotatedPoint.y >= this.y && rotatedPoint.y <= (this.y + this.height)))
+            return true;
+
+        return false;
+    }
+
+    hitNode(x, y) { // interpolate?
+        let rotatedPoint = rotatePoint(
+            {x: x, y: y}, 
+            {x: this.rotationPointX(), y: this.rotationPointY()}, 
+            -this.angle
+        );
+
+        rotatedPoint.x = snapToGrid(rotatedPoint.x);
+        rotatedPoint.y = snapToGrid(rotatedPoint.y);
+
+        if ((rotatedPoint.x === (this.x-this.width)) && (rotatedPoint.y === this.y + this.height / 2)) return this.node1;
+
+        if ((rotatedPoint.x === (this.x + this.width * 2)) && (rotatedPoint.y === (this.y + this.height / 2))) return this.node2;
+
+        return null;
+    }
+
+    getNodeLeft() {
+        return rotatePoint(
+            {x: this.x - this.width, y: this.y + this.height / 2}, 
+            {x: this.rotationPointX(), y: this.rotationPointY()}, 
+            -this.angle
+        );
+    }
+
+    getNodeRight() {
+        return rotatePoint(
+            {x: this.x + this.width * 2, y: this.y + this.height / 2}, 
+            {x: this.rotationPointX(), y: this.rotationPointY()},
+            -this.angle);
+    }
+
+	onDelete() {
+        deleteNode(this.node1);
+        deleteNode(this.node2);
+    }
+
+}
diff --git a/icons/capacitor.png b/icons/capacitor.png
diff --git a/icons/capacitor.svg b/icons/capacitor.svg
diff --git a/icons/cursor.png b/icons/cursor.png
diff --git a/icons/cursor.svg b/icons/cursor.svg
diff --git a/icons/github.png b/icons/github.png
diff --git a/icons/github.svg b/icons/github.svg
diff --git a/icons/inductor.png b/icons/inductor.png
diff --git a/icons/inductor.svg b/icons/inductor.svg
diff --git a/icons/res_eu.png b/icons/res_eu.png
diff --git a/icons/res_eu.svg b/icons/res_eu.svg
diff --git a/icons/res_us.png b/icons/res_us.png
diff --git a/icons/res_us.svg b/icons/res_us.svg
diff --git a/icons/selection.png b/icons/selection.png
diff --git a/icons/selection.svg b/icons/selection.svg
diff --git a/icons/wire.png b/icons/wire.png
diff --git a/icons/wire.svg b/icons/wire.svg
diff --git a/index.html b/index.html
@@ -0,0 +1,82 @@
+<!--
+    github: https://github.com/espmaniac/parallelserieshtml5
+-->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ParallelSeries</title>
+    <meta name="keywords" content="ParallelSeries, equivalent resistance, equivalent capacitance, equivalent inductance, delta star transform, parallel connection, series connection, resistance calculator, capacitance calculator, inductance calculator, resistor network solver, capacitor network solver, inductor network solver">
+    <link rel="icon" href="logo/favicon.svg" sizes="any" type="image/svg+xml">
+    <link rel="shortcut icon" href="logo/favicon16x16.ico" type="image/x-icon">
+    <link rel="shortcut icon" href="logo/favicon32x32.ico" type="image/x-icon">
+    <link rel="shortcut icon" href="logo/favicon96x96.ico" type="image/x-icon">
+    <link rel="shortcut icon" href="logo/favicon180x180.ico" type="image/x-icon">
+    <link rel="shortcut icon" href="logo/favicon512x512.ico" type="image/x-icon">
+    <link rel="stylesheet" href="main.css">
+</head>
+<body>
+
+    <div id="chooseComponent">
+        <h1>Choose a component</h1>
+        <div id="components">
+            <button id="resistor" ></button>
+            <button id="capacitor"></button>
+            <button id="inductor"></button>
+        </div>
+    </div>
+
+    <div id="header">
+        <div id="left">
+            <button id="open">Open</button>
+            <button id="save">Save</button>
+            <button id="matrix">Matrix</button>
+            <button id="calculate">Calculate</button>
+        </div>
+
+        <a href="https://github.com/espmaniac" target="_blank"><img src="icons/github.png" alt="github" srcset="" id="github"></a>
+
+        <div id="right">
+            <button id="clear">Clear</button>
+        </div>        
+    </div>
+
+    <div id="scheme">
+        <div id="tools">
+            <button id="cursorTool" class="active">
+                <img src="icons/cursor.svg" alt="" srcset="" width="40" height="20">
+            </button>
+            <button id="selectionTool">
+                <img src="icons/selection.svg" alt="" srcset="" width="40" height="20">
+            </button>
+            <button id="wireTool">
+                <img src="icons/wire.svg" alt="" srcset="" width="40" height="20">
+            </button>
+            <button id="addComponent">
+                <img src="" alt="" srcset="" width="40" height="20">
+            </button>
+
+        </div>
+
+        <canvas id="myCanvas"></canvas>
+
+    </div>
+
+    <div id="form">
+        <textarea name="" id="inp" cols="1" rows="1" placeholder="expression"></textarea>
+        <button id="calc"> = </button>
+    </div>
+    <div id="answer">
+        <h2 id="result">Answer: 42</h2>
+    </div>
+
+    <div id="contextMenu"></div>
+
+    <script src="parallelseries.js" defer></script>
+    <script src="component.js" defer></script>
+    <script src="main.js" defer></script>
+    <script src="node.js" defer></script>
+    <script src="wire.js" defer></script>
+</body>
+</html>