Skip to content

Commit b7071b2

Browse files
wkelsey-applewkelsey-apple
committed
saving state un the url
1 parent 71241bf commit b7071b2

File tree

4 files changed

+59
-48
lines changed

4 files changed

+59
-48
lines changed

‎circuitSolver/index.html‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,12 +23,13 @@
2323
<!-- <script src="js/algebrite_v1p2.bundle-for-browser-min.js"></script> -->
2424
<script src="js/startupSchematic.js"></script>
2525
<script src="https://fred-wang.github.io/mathml.css/mspace.js"></script>
26+
<script src="https://cdn.jsdelivr.net/npm/pako@2.1.0/dist/pako.min.js"></script>
2627
<!-- <script type="module" src="https://unpkg.com/giscus?module"></script> -->
2728
<!-- <script type="module" src="https://cdn.skypack.dev/giscus"></script> -->
2829
<!-- <link type="text/css" rel="stylesheet" href="application.css" /> -->
2930

3031

31-
<script src="https://giscus.app/client.js"
32+
<!-- <script src="https://giscus.app/client.js"
3233
data-repo="28raining/28raining.github.io"
3334
data-repo-id="MDEwOlJlcG9zaXRvcnkxMjcyMzY4NjM="
3435
data-mapping="number"
@@ -41,7 +42,7 @@
4142
data-loading="lazy"
4243
crossorigin="anonymous"
4344
async>
44-
</script>
45+
</script> -->
4546

4647
<script src="./js/jquery.js"></script>
4748
<script src="./js/jquery-ui.min.js"></script>

‎circuitSolver/modules/main.js‎

Lines changed: 56 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -7,22 +7,62 @@ import htm from "../js/htm.js";
77
import { init_draw2d } from "./wdk_draw2d.js";
88
import { calculateMNA, calcBilinear } from "./mna.js";
99

10+
//Decode the URL before starting and REACT stuff
11+
// Extract the query parameter
12+
13+
var initialState = {
14+
elements: {},
15+
fmin: {
16+
value: 1,
17+
unit: "K",
18+
},
19+
fmax: {
20+
value: 100,
21+
unit: "G",
22+
},
23+
schematic: startupSchematic,
24+
};
25+
var startState = {...initialState};
26+
27+
const urlParams = new URLSearchParams(window.location.search);
28+
const encodedCompressed = urlParams.get("state");
29+
if (encodedCompressed) {
30+
// Decode the Base64 string back into a Uint8Array
31+
const compressedBinary = Uint8Array.from(atob(decodeURIComponent(encodedCompressed)), (char) =>
32+
char.charCodeAt(0)
33+
);
34+
const decompressed = pako.inflate(compressedBinary, { to: "string" }); // Decompress the data using pako
35+
const decodedObject = JSON.parse(decompressed); // Parse the decompressed JSON string into an object
36+
37+
if ('schematic' in decodedObject) startState.schematic = decodedObject.schematic;
38+
if ('elements' in decodedObject) startState.elements = decodedObject.elements;
39+
if ('fmin' in decodedObject) startState.fmin = decodedObject.fmin;
40+
if ('fmax' in decodedObject) startState.fmax = decodedObject.fmax;
41+
42+
}
1043
const html = htm.bind(React.createElement);
1144

1245
function navBar(props) {
1346
return html` <div className="w-100 p-3 bg-navy text-white" key="cont_w100">
1447
<div className="container-xl" key="cont">
1548
<div className="row" key="r1">
1649
<div className="col" key="title">
17-
<h4 className="mb-0" key="head"><strong>${props.title}</strong></h4>
50+
<h4 className="mb-0" key="head"><strong><a href="/" style=${{'color':'#fff','text-decoration':'none'}}>${props.title}</a></strong></h4>
1851
</div>
19-
<div className="col-1" key="undo">
52+
<div className="col-2" key="undo">
2053
<button type="button" className="btn btn-secondary py-0" title="undo" onClick=${(e) => props.onClickUndo(e)} key="undoB">
2154
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16" className="bi">
2255
<path d="M8 3a5 5 0 1 1-4.546 2.914.5.5 0 0 0-.908-.417A6 6 0 1 0 8 2v1z"></path>
2356
<path d="M8 4.466V.534a.25.25 0 0 0-.41-.192L5.23 2.308a.25.25 0 0 0 0 .384l2.36 1.966A.25.25 0 0 0 8 4.466z"></path>
2457
</svg>
2558
</button>
59+
<a href="/" style=${{'color':'#fff','text-decoration':'none'}}>
60+
<button type="button" className="btn btn-secondary py-0 ms-2" title="restart" key="undoC">
61+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-circle" viewBox="0 0 16 16">
62+
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/>
63+
<path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708"/>
64+
</svg>
65+
</button></a>
2666
</div>
2767
<div className="col d-grid d-md-flex justify-content-md-end" key="navButtons">
2868
<a className="btn btn-light py-0" title="home" href="../" key="home">
@@ -627,18 +667,7 @@ class Game extends React.Component {
627667
super(props);
628668
this.state = {
629669
history: [
630-
{
631-
elements: {},
632-
fmin: {
633-
value: 1,
634-
unit: "K",
635-
},
636-
fmax: {
637-
value: 100,
638-
unit: "G",
639-
},
640-
schematic: startupSchematic,
641-
},
670+
{...startState},
642671
],
643672
latex: null,
644673
iinOrVin: "vin",
@@ -969,15 +998,7 @@ class Game extends React.Component {
969998
{
970999
history: this.state.history.concat([current]),
9711000
},
972-
// this.redrawSchematic(current)
9731001
() => this.redrawSchematic(current)
974-
// {
975-
// this.preventNewState = true;
976-
// this.state.elOnSchematic = {};
977-
// this.wdk_draw2d.reUpdateCanvas(current.schematic, (b) => this.handleCanvasChange(b));
978-
// this.preventNewState = false;
979-
// this.calculateTF;
980-
// }
9811002
);
9821003

9831004
// this.setState(
@@ -1003,18 +1024,6 @@ class Game extends React.Component {
10031024
this.setState({
10041025
history: this.state.history,
10051026
});
1006-
1007-
// this.setState(
1008-
// {
1009-
// history: this.state.history.concat([current]),
1010-
// },
1011-
// // this.redrawSchematic(current)
1012-
// () => this.redrawSchematic(current)
1013-
// this.preventNewState = true;
1014-
// this.state.elOnSchematic = {};
1015-
// this.wdk_draw2d.reUpdateCanvas(current.schematic, (b) => this.handleCanvasChange(b));
1016-
// this.preventNewState = false;
1017-
// this.calculateTF;
10181027
}
10191028
}
10201029

@@ -1024,14 +1033,25 @@ class Game extends React.Component {
10241033

10251034
render() {
10261035
const current = this.state.history[this.state.history.length - 1];
1027-
// console.log(this.state)
1036+
// console.log("state", this.state)
1037+
1038+
//put the state into the URL
1039+
// Convert the object to a JSON string and encode it
1040+
const jsonString = JSON.stringify(current);
1041+
const compressed = pako.deflate(jsonString, { to: "string" });
1042+
// Encode the compressed data to make it URL-safe
1043+
const encodedCompressed = encodeURIComponent(btoa(String.fromCharCode(...compressed)));
1044+
const url = new URL(window.location.href);
1045+
// Use URLSearchParams to set the compressed data
1046+
url.searchParams.set("state", encodedCompressed);
1047+
window.history.pushState({}, "", url.toString()); // Update the browser URL without reloading
10281048

10291049
// // Use state (variable containing all user inputs) to do MNA (modified nodal analysis)
10301050
//
10311051

10321052
// Update the DOM
10331053
return html`
1034-
<${navBar} title="ONLINE CIRCUIT SOLVER" key="navBar" onClickUndo=${() => this.handleUndo(true)} />
1054+
<${navBar} title="ONLINE CIRCUIT SOLVER" key="navBar" onClickUndo=${() => this.handleUndo(true)}/>
10351055
<${Toasts} key="toasts" toastMxVIsource=${this.toastMxVIsource} toastCopiedLatex=${this.toastCopiedLatex} toastCopiedMathML=${this.toastCopiedMathML} />
10361056
<div className="w-100 p-2 bg-green" key="wrapper">
10371057
<div className="container-xl" key="topContainer">

‎circuitSolver/modules/wdk_draw2d.js‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ export class init_draw2d {
1010
// this.view.setScrollArea("#canvas");
1111

1212
// var reader = new draw2d.io.json.Reader();
13-
// reader.unmarshal(this.view, startupSchematic);
1413
this.view.loadSchematic(schematic);
1514
//The first load needs to trigger the calculateTF function
1615
this.writer.marshal(this.view, function (json) {
@@ -38,7 +37,6 @@ export class init_draw2d {
3837
}
3938

4039
reUpdateCanvas(canvasState, handleCanvasChange) {
41-
// startupSchematic = canvasState;
4240
this.view.loadSchematic(canvasState);
4341
this.writer.marshal(this.view, function (json) {
4442
handleCanvasChange(json);

‎circuitSolver/toDo.md‎

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,3 @@
1-
1 - Draw a static RC filter
2-
2 - Show laplace equation
3-
-- Draw the laplace in Latex
4-
-- Add 3 nodes (currently only support 2 nodes)
5-
-- Add op-amps with R feedback
6-
-- Add user drawing capability
7-
-- Verify laplace is working by testing with big LC filter
8-
-- Fix the MathML renderere
91

102

113
-- Below is done later, after laplace derivation is more thoroughly verified... --

0 commit comments

Comments
 (0)