-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
258 lines (236 loc) · 19.9 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
<!DOCTYPE html>
<html lang="en_us">
<head>
<title>Schemascii ± 1</title>
<meta charset="utf-8" />
<meta name="generator" content="Pelican" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="/static/css/main.css" />
<link rel="stylesheet" href="/static/css/theme.css" />
<link rel="icon" href="/images/yazani/yazani_1_extracted_bg_big_eyes_cropped.png" type="image/png" />
<link rel="apple-touch-icon" href="/images/yazani/yazani_1_extracted_bg_big_eyes_cropped.png" type="image/png" />
<script src="/static/misc.js"></script>
<script src="/blog/banner_image.js"></script>
<meta name="tags" content="programming, python, electronics" />
<meta property="og:site_name" content="dragoncoder047’s blog" />
<meta property="og:title" content="Schemascii ± 1" />
<meta property="og:description" content="I spent the last two days fooling around with my half-idea of a diagramming program, Schemascii. What it’s supposed to do is be able to make a diagram of a circuit (like the ones you might make in Eagle or KiCad before you plan a circuit board) out of …" />
<meta property="og:image" content="/images/yazani/yazani_1_extracted_bg.png" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://dragoncoder047.github.io/blog/2023/schemascii-1" />
<meta property="og:locale" content="['']" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="dragoncoder047’s blog - Schemascii ± 1" />
<meta name="twitter:description" content="I spent the last two days fooling around with my half-idea of a diagramming program, Schemascii. What it’s supposed to do is be able to make a diagram of a circuit (like the ones you might make in Eagle or KiCad before you plan a circuit board) out of …" />
<meta name="twitter:image" content="/images/yazani/yazani_1_extracted_bg.png" />
<!-- PrismJS -->
<script src="/static/prism.js" data-autoloader-path="https://cdn.jsdelivr.net/npm/prismjs@v1.x/components/"></script>
<script src="/static/prism-runbutton.js"></script>
<script src="/phoo/prism-phoo.js"></script> <!-- /PrismJS -->
<!-- Schemascii -->
<link rel="stylesheet" href="/schemascii/schemascii_example.css"> <!-- /Schemascii -->
</head>
<body class="match-braces rainbow-braces">
<header>
<a href="https://dragoncoder047.github.io/blog" class="flex-row"><div class="flex-row"><img src="/images/yazani/yazani_1_extracted_bg.png" style="max-height:10em" id="banner-image" /><div id="sitename-text"><h1>dragoncoder047’s blog</h1><h2>random thoughts about nonrandom things</h2></div></div></a>
<nav>
<ul>
<li><a href="https://dragoncoder047.github.io/blog/">Home</a></li>
<li><a href="https://dragoncoder047.github.io/blog/archives">Archives</a>
</li>
<li><a href="https://dragoncoder047.github.io/blog/tags">By tag</a>
</li>
<li><a href="/">Site root</a>
</li>
<li><a href="#">Projects</a>
<ul>
<li><a href="https://dragoncoder047.github.io/thuepaste">Thuepaste</a>
</li>
<li><a href="https://dragoncoder047.github.io/armdroid">Armdroid</a>
</li>
<li><a href="https://dragoncoder047.github.io/langton-music">Langton's Ant Music</a>
</li>
<li><a href="https://dragoncoder047.github.io/schemascii">Schemascii</a>
</li>
<li><a href="https://dragoncoder047.github.io/parasite">Parasite</a>
</li>
</ul>
</li>
<li>
<form action="https://www.google.com/search" method="GET">
<input name="q" type="search" placeholder="Search"></input>
<input type="hidden" name="as_sitesearch" value="https://dragoncoder047.github.io/blog"></input>
<input type="submit" value="Search"></input>
</form>
</li>
</ul>
</nav>
</header>
<main>
<h1><a href="https://dragoncoder047.github.io/blog/2023/schemascii-1" rel="bookmark" title="Permalink to this page">Schemascii ± 1</a></h1>
<div class="flex-row">
<span style="flex: 1">← Previous:
<a href="https://dragoncoder047.github.io/blog/2023/hairy-circuit-layout-issues">
Hairy Circuit Layout Issues
</a>
</span>
<span>Next:
<a href="https://dragoncoder047.github.io/blog/2023/schemascii-0">
Schemascii ± 0
</a> →
</span>
</div>
<div class="post-info">
Posted <time class="published" datetime="2023-01-24T00:00:00-05:00">Tue 24 January 2023</time>
<address>By
<a href="https://dragoncoder047.github.io/blog/">dragoncoder047</a>
</address>
<div class="tags">
Tags:
<a href="https://dragoncoder047.github.io/blog/tag/electronics">electronics</a>
<a href="https://dragoncoder047.github.io/blog/tag/programming">programming</a>
<a href="https://dragoncoder047.github.io/blog/tag/python">python</a>
</div>
</div>
<p>I spent the last two days fooling around with my half-idea of a diagramming program, Schemascii. What it’s supposed to do is be able to make a diagram of a circuit (like the ones you might make in Eagle or KiCad before you plan a circuit board) out of a messy ASCII-art representation.</p>
<p>So far, I have implemented the routines that scan the file first for the components, and second for the connecting wires. The wires are also able to be rendered, but it’s a little buggy.</p>
<p>For testing I have been using this diagram of a 555-timer charge-pump polarity inverter:</p>
<pre class="highlight"><code class="language-txt">*--BAT1+--*-------*---*
| | | |
| R1 .~~~. |
| | : :-*
| o-----: :---+C2--*--D2+--*----------J1
| | :U1 : | |
| R2 :555: | |
| | *-: :-* | |
| C1 | : : | + C3
| | *-: : C4 D1 +
| *---* .~~~. | | |
| | | | | |
*---------*-------*---*------*-------*----------J2
BAT1:5
R1:10k
R2:100k
C1:10000p
C2:10u
C3:100u
C4:10p
D1:1N4001
D2:1N4001
U1:NE555,VCC,DIS,_TR,TH,GND,CTL,OUT,_RST
J1:-5V
J2:GND</code></pre>
<p>So far, my program is able to run around and grab all of the components off the diagram, and also grab the “BOM data” that I placed at the bottom. It ends up in this big dictionary:</p>
<pre class="highlight"><code class="language-py3">{ Cbox(p1=(3+0j), p2=(7+0j), type='BAT', id=1): [ Terminal(pt=(7+0j), flag='+', side=<Side.RIGHT: 1>),
Terminal(pt=(2+0j), flag=None, side=<Side.LEFT: 3>)],
Cbox(p1=(16+2j), p2=(21+10j), type='U', id=1): [ Terminal(pt=(21+3j), flag=None, side=<Side.RIGHT: 1>),
Terminal(pt=(21+4j), flag=None, side=<Side.RIGHT: 1>),
Terminal(pt=(21+7j), flag=None, side=<Side.RIGHT: 1>),
Terminal(pt=(18+11j), flag=None, side=<Side.BOTTOM: 2>),
Terminal(pt=(15+4j), flag=None, side=<Side.LEFT: 3>),
Terminal(pt=(15+7j), flag=None, side=<Side.LEFT: 3>),
Terminal(pt=(15+9j), flag=None, side=<Side.LEFT: 3>)],
Cbox(p1=(10+2j), p2=(12+2j), type='R', id=1): [ Terminal(pt=(10+1j), flag=None, side=<Side.TOP: 0>),
Terminal(pt=(10+3j), flag=None, side=<Side.BOTTOM: 2>)],
Cbox(p1=(25+4j), p2=(27+4j), type='C', id=2): [ Terminal(pt=(27+4j), flag=None, side=<Side.RIGHT: 1>),
Terminal(pt=(24+4j), flag='+', side=<Side.LEFT: 3>)],
Cbox(p1=(32+4j), p2=(34+4j), type='D', id=2): [ Terminal(pt=(34+4j), flag='+', side=<Side.RIGHT: 1>),
Terminal(pt=(31+4j), flag=None, side=<Side.LEFT: 3>)],
Cbox(p1=(48+4j), p2=(50+4j), type='J', id=1): [ Terminal(pt=(47+4j), flag=None, side=<Side.LEFT: 3>)],
Cbox(p1=(9+6j), p2=(11+6j), type='R', id=2): [ Terminal(pt=(10+5j), flag=None, side=<Side.TOP: 0>),
Terminal(pt=(10+7j), flag=None, side=<Side.BOTTOM: 2>)],
Cbox(p1=(10+8j), p2=(12+8j), type='C', id=1): [ Terminal(pt=(10+7j), flag=None, side=<Side.TOP: 0>),
Terminal(pt=(10+9j), flag=None, side=<Side.BOTTOM: 2>)],
Cbox(p1=(37+8j), p2=(39+8j), type='C', id=3): [ Terminal(pt=(37+7j), flag=None, side=<Side.TOP: 0>),
Terminal(pt=(37+9j), flag='+', side=<Side.BOTTOM: 2>)],
Cbox(p1=(22+9j), p2=(24+9j), type='C', id=4): [ Terminal(pt=(22+8j), flag=None, side=<Side.TOP: 0>),
Terminal(pt=(22+10j), flag=None, side=<Side.BOTTOM: 2>)],
Cbox(p1=(29+9j), p2=(31+9j), type='D', id=1): [ Terminal(pt=(29+8j), flag='+', side=<Side.TOP: 0>),
Terminal(pt=(29+10j), flag=None, side=<Side.BOTTOM: 2>)],
Cbox(p1=(48+12j), p2=(50+12j), type='J', id=2): [ Terminal(pt=(47+12j), flag=None, side=<Side.LEFT: 3>)]}</code></pre>
<div class="admonition info">
<p class="admonition-title">Note on the complex numbers</p>
<p>I am (ab)using Python’s <code class="language-py3 highlight">complex</code> number as a point or vector, but this kind of makes sense – think the complex plane. The rationale for this is a lot of the mathematical operations I need to do with points are already built-in on <code class="language-py3 highlight">complex</code> objects, such as finding the midpoint (<code class="language-py3 highlight">(p1 + p2) / 2</code>), finding the length (<code class="language-py3 highlight">abs(pt)</code>), finding the angle (<code class="language-py3 highlight">cmath.phase(pt)</code>), etc. <a href="https://github.com/mathandy/svgpathtools#:~:text=%23%20Coordinates%20are%20given%20as%20points%20in%20the%20complex%20plane"><code>svgpathtools</code> takes the same approach.</a></p>
</div>
<p>The code for the wire finding is also able to render the wires to SVG, and produces this output on the same circuit:</p>
<pre class="highlight"><code class="language-xml"><g class="wire"><line x1="2.0" y1="0.0" x2="0.0" y2="1.2246467991473532e-16"></line><line x1="0.0" y1="12.0" x2="6.123233995736766e-17" y2="0.0"></line><line x1="10.0" y1="12.0" x2="0.0" y2="12.0"></line><line x1="18.0" y1="12.0" x2="10.0" y2="12.0"></line><line x1="10.0" y1="10.0" x2="10.0" y2="12.0"></line><line x1="22.0" y1="12.0" x2="18.0" y2="12.0"></line><line x1="18.0" y1="11.0" x2="19.0" y2="11.0"></line><line x1="14.0" y1="10.0" x2="10.0" y2="10.0"></line><line x1="10.0" y1="9.0" x2="11.0" y2="9.0"></line><line x1="29.0" y1="12.0" x2="22.0" y2="12.0"></line><line x1="22.0" y1="10.0" x2="22.0" y2="12.0"></line><line x1="14.0" y1="9.0" x2="14.0" y2="11.0"></line><line x1="37.0" y1="12.0" x2="29.0" y2="12.0"></line><line x1="29.0" y1="10.0" x2="29.0" y2="12.0"></line><line x1="15.0" y1="9.0" x2="16.0" y2="9.0"></line><line x1="14.0" y1="7.0" x2="14.0" y2="9.0"></line><line x1="47.0" y1="12.0" x2="37.0" y2="12.0"></line><line x1="37.0" y1="10.0" x2="37.0" y2="12.0"></line><line x1="15.0" y1="7.0" x2="16.0" y2="7.0"></line></g><g class="wire"><line x1="10.0" y1="0.0" x2="10.0" y2="2.0"></line><line x1="18.0" y1="0.0" x2="10.0" y2="1.2246467991473532e-16"></line><line x1="8.0" y1="0.0" x2="10.0" y2="0.0"></line><line x1="22.0" y1="0.0" x2="18.0" y2="1.2246467991473532e-16"></line><line x1="18.0" y1="1.0" x2="19.0" y2="1.0"></line><line x1="22.0" y1="3.0" x2="22.0" y2="0.0"></line><line x1="21.0" y1="3.0" x2="22.0" y2="3.0"></line></g><g class="wire"><line x1="15.0" y1="4.0" x2="10.0" y2="4.0"></line></g><g class="wire"><line x1="23.0" y1="4.0" x2="20.0" y2="4.0"></line></g><g class="wire"><line x1="29.0" y1="4.0" x2="26.0" y2="4.0"></line><line x1="31.0" y1="4.0" x2="29.0" y2="4.0"></line><line x1="29.0" y1="7.0" x2="29.0" y2="4.0"></line></g><g class="wire"><line x1="37.0" y1="4.0" x2="34.0" y2="4.0"></line><line x1="47.0" y1="4.0" x2="37.0" y2="4.0"></line><line x1="37.0" y1="7.0" x2="37.0" y2="4.0"></line></g><g class="wire"><line x1="22.0" y1="7.0" x2="22.0" y2="9.0"></line><line x1="21.0" y1="7.0" x2="22.0" y2="7.0"></line></g></code></pre>
<p>When put into a <code class="language-xml highlight"><svg></code> and styled, it reveals a crapload of bugs:</p>
<style>svg.schemascii {
background: black;
}
svg.schemascii .wire {
filter: drop-shadow(0 0 0.5px var(--sch-wireshadow, yellow));
}
svg.schemascii .wire line {
stroke: var(--sch-wirecolor, blue);
stroke-width: 0.7;
stroke-linecap: round;
transition-duration: 0.2s;
}
svg.schemascii .wire:hover {
--sch-wirecolor: red;
--sch-wireshadow: lime;
}</style>
<p><svg class="schemascii" viewBox="-1 -1 50 15" width="500" height="150" xmlns="http://www.w3.org/2000/svg">
<g class="wire"><line x1="2.0" y1="0.0" x2="0.0" y2="1.2246467991473532e-16"></line><line x1="0.0" y1="12.0" x2="6.123233995736766e-17" y2="0.0"></line><line x1="10.0" y1="12.0" x2="0.0" y2="12.0"></line><line x1="18.0" y1="12.0" x2="10.0" y2="12.0"></line><line x1="10.0" y1="10.0" x2="10.0" y2="12.0"></line><line x1="22.0" y1="12.0" x2="18.0" y2="12.0"></line><line x1="18.0" y1="11.0" x2="19.0" y2="11.0"></line><line x1="14.0" y1="10.0" x2="10.0" y2="10.0"></line><line x1="10.0" y1="9.0" x2="11.0" y2="9.0"></line><line x1="29.0" y1="12.0" x2="22.0" y2="12.0"></line><line x1="22.0" y1="10.0" x2="22.0" y2="12.0"></line><line x1="14.0" y1="9.0" x2="14.0" y2="11.0"></line><line x1="37.0" y1="12.0" x2="29.0" y2="12.0"></line><line x1="29.0" y1="10.0" x2="29.0" y2="12.0"></line><line x1="15.0" y1="9.0" x2="16.0" y2="9.0"></line><line x1="14.0" y1="7.0" x2="14.0" y2="9.0"></line><line x1="47.0" y1="12.0" x2="37.0" y2="12.0"></line><line x1="37.0" y1="10.0" x2="37.0" y2="12.0"></line><line x1="15.0" y1="7.0" x2="16.0" y2="7.0"></line></g><g class="wire"><line x1="10.0" y1="0.0" x2="10.0" y2="2.0"></line><line x1="18.0" y1="0.0" x2="10.0" y2="1.2246467991473532e-16"></line><line x1="8.0" y1="0.0" x2="10.0" y2="0.0"></line><line x1="22.0" y1="0.0" x2="18.0" y2="1.2246467991473532e-16"></line><line x1="18.0" y1="1.0" x2="19.0" y2="1.0"></line><line x1="22.0" y1="3.0" x2="22.0" y2="0.0"></line><line x1="21.0" y1="3.0" x2="22.0" y2="3.0"></line></g><g class="wire"><line x1="15.0" y1="4.0" x2="10.0" y2="4.0"></line></g><g class="wire"><line x1="23.0" y1="4.0" x2="20.0" y2="4.0"></line></g><g class="wire"><line x1="29.0" y1="4.0" x2="26.0" y2="4.0"></line><line x1="31.0" y1="4.0" x2="29.0" y2="4.0"></line><line x1="29.0" y1="7.0" x2="29.0" y2="4.0"></line></g><g class="wire"><line x1="37.0" y1="4.0" x2="34.0" y2="4.0"></line><line x1="47.0" y1="4.0" x2="37.0" y2="4.0"></line><line x1="37.0" y1="7.0" x2="37.0" y2="4.0"></line></g><g class="wire"><line x1="22.0" y1="7.0" x2="22.0" y2="9.0"></line><line x1="21.0" y1="7.0" x2="22.0" y2="7.0"></line></g>
</svg></p>
<p>You can mouse over the wires here to see what is connected to what…</p>
<p>…and this reveals the length-2 parts of the wires are getting yanked weirdly to the side, and the length-1 wires aren’t getting rendered at all. This is a cause of great frustration for me, because it doesn’t make sense that it doesn’t render length-1 wires at all. They need to be rendered!</p>
<p>I’m guessing half of the bugs here in my code are caused by stupid off-by-one errors in the search loops, and the rest are just bad algorithms on my part. I really hope I can get these fixed!</p>
<hr />
<p><strong>Related Posts</strong></p>
<ul>
<li><a href="https://dragoncoder047.github.io/blog/2024/now-fully-two-dimensional">Now Fully Two-Dimensional</a></li>
<li><a href="https://dragoncoder047.github.io/blog/2023/schemascii-0">Schemascii ± 0</a></li>
<li><a href="https://dragoncoder047.github.io/blog/2024/in-defense-of-eval">In Defense Of Eval</a></li>
<li><a href="https://dragoncoder047.github.io/blog/2024/perhaps-it-was-too-complicated">Perhaps It Was Too Complicated</a></li>
<li><a href="https://dragoncoder047.github.io/blog/2023/zero-thickness-tree">Zero-Thickness Tree</a></li>
</ul>
<script src="https://giscus.app/client.js"
data-repo="dragoncoder047/blog"
data-repo-id="R_kgDOHCL60w"
data-category="Post Comments"
data-category-id="DIC_kwDOHCL6084CRxCW"
data-mapping="og:title"
data-reactions-enabled="1"
data-input-position="top"
data-theme="dark"
data-lang="en"
crossorigin="anonymous"
async
></script>
<section id="extras">
<div class="blogroll">
<ul>
<li><a href="https://www.conwaylife.com/">Conwaylife.com Forums</a></li>
<li><a href="https://www.python.org/">Python</a></li>
<li><a href="http://www.ulisp.com/">uLisp</a></li>
</ul>
</div>
<div class="social">
<ul>
<li><a href="https://github.com/dragoncoder047">dragoncoder047 on GitHub</a></li>
<li><a href="https://youtube.com/@dragoncoder047">dragoncoder047 on YouTube</a></li>
<li><a href="https://instagram.com/dragoncoder047/">dragoncoder047 on Instagram</a></li>
</ul>
</div>
</section>
</main>
<footer>
<address>
Site built by <a href="https://getpelican.com/">Pelican</a>
</address>
<a href="#" onclick="window.scrollTo({top: 0, left: 0});">Back to top</a>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XR0F89CCGK"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag("js", new Date());
gtag("config", "G-XR0F89CCGK");
</script>
</footer>
</body>
</html>