-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
435 lines (366 loc) · 24.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
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
<!DOCTYPE html>
<html>
<head>
<title>Logics</title>
<meta charset="UTF-8">
<meta name="keywords" content="Logics, simulation, boolean, node, nodes, logical, logic, mathematical, educational">
<meta name="description" content="Simulate Boolean logics and number operations online">
<meta name="author" content="Thijmen Voskuilen">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="global_style.css">
<link rel="stylesheet" href="menu_style.css">
<link rel="stylesheet" href="node_style.css">
<link rel="stylesheet" href="modal.css">
<link rel="stylesheet" href="node_specific_style.css">
<!--Favicons-->
<link rel="apple-touch-icon" sizes="180x180" href="icons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="icons/favicon-16x16.png">
<link rel="manifest" href="icons/site.webmanifest">
<link rel="mask-icon" href="icons/safari-pinned-tab.svg" color="#ff0000">
<link rel="shortcut icon" href="icons/favicon.ico">
<meta name="msapplication-TileColor" content="#000000">
<meta name="msapplication-config" content="icons/browserconfig.xml">
<meta name="theme-color" content="#000000">
</head>
<body>
<!-- The open file Modal -->
<div id="OpenDIV" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="modal-close" onclick='document.getElementById("OpenDIV").style.display = "none";' id='Open_CLOSEBTN'>×</span>
<h1>Open a project file</h1>
<p>Note: All changes to the current file will be lost.</p>
<input type="file" name="inputfile" id="openfileinput" style='color: #fff'><br>
<button onclick='
var fr=new FileReader();
fr.onload=function(e){
loadFile(e.target.result);
}
fr.readAsText(document.getElementById("openfileinput").files[0]);
document.getElementById("OpenDIV").style.display = "none";
'>Open!</button>
</div>
</div>
<!-- The settings modal -->
<div id="SettingDIV" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="modal-close" onclick='document.getElementById("SettingDIV").style.display = "none";' id='Settings_CLOSEBTN'>×</span>
<h1>Project proporties</h1>
<p>This is the place where you can configure some settings related to the project.</p>
<hr>
<a>Project name: </a><input type="text" name="Project name" id="project_name" style="left:50%; position: absolute;"><br>
<a>Enable line thickness data visualisation: </a><input type="checkbox" name="line thickness" id="datavis" style="left:50%; position: absolute;"><br>
<a>Nice glow effect in line thickness visualisation</a><input type="checkbox" name="Project name" id="togglegloweffects" style="left:50%; position: absolute;"><br>
<a>Enable live updating data nodes</a><input type="checkbox" name="Live updating" id="livedata" style="left:50%; position: absolute;"><br>
<a>Enable recursive networks</a><input type="checkbox" name="Recursive networks" id="recursive_networks" style="left:50%; position: absolute;"><br>
<hr>
<button onclick='
project_name = document.getElementById("project_name").value;
connectorVisualisation = document.getElementById("datavis").checked;
live_data_nodes_update = document.getElementById("livedata").checked;
connectorglow = document.getElementById("togglegloweffects").checked;
let old_recursive = enable_recursive;
enable_recursive = document.getElementById("recursive_networks").checked;
if (! connectorVisualisation){
for (let x of all_nodes) {
x.resetConnectorStyle();
}
} else if (enable_recursive != old_recursive) {
for (x of all_nodes) {
if (x.recursive) {
x.update()
}
}
}
document.getElementById("SettingDIV").style.display = "none";
' style="position: absolute; left: 50%; -ms-transform: translate(-50%, -10%);transform: translate(-50%, -10%);">Save settings!</button>
</div>
</div>
<!-- The how to use Modal -->
<div id="howtoDIV" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="modal-close" onclick='document.getElementById("howtoDIV").style.display = "none";' id='howto_CLOSEBTN'>×</span>
<h1>How to use Logics</h1>
<p>Thijmer online Logics is a program that lets you build logical networks by linking mathematical operations together, visualised as nodes. <br>
To add a node, open the "add node" menu by pressing the + in the top left corner. Then click on one of the options in the menu. This will add the node.
</p>
<br>
<div style="height: 280px;"> <!--Example area-->
<div class="float-child" style="width: 200px;"> <!--Example node-->
<div class="node_container" style="z-index: 6; border-width: 2px; border-color: rgb(255, 255, 255); top: 272px; left: 525px; position: relative; left:0; top:0; width:fit-content;"><div class="node_header" style="background-color: rgb(136, 136, 204);">Example node</div><div class="node_body" style="resize:none;"><div>
<p>Operation type:</p>
<select disabled=true>
<option value="add">Add</option>
</select>
</div><hr><div style="text-align: right; margin-right: 10px; margin-left: 50px;"><span>Output</span><svg height="15" width="10" id="node0connector0" style="cursor: grab; position: absolute; right: -7px;"><circle cx="5" cy="10" r="5" fill="#ff0"></circle></svg></div><hr><div style="text-align: left; margin-right: 50px; margin-left: 10px;"><input type="number" style="width: 50px;"><span style="margin-left: 5px;">Input 1</span><svg height="15" width="10" id="node0inputconnector0" style="position: absolute; left: -7px;"><circle cx="5" cy="10" r="5" fill="#ff0"></circle></svg></div><div style="text-align: left; margin-right: 50px; margin-left: 10px;"><input type="number" style="width: 50px;"><span style="margin-left: 5px;">Input 2</span><svg height="15" width="10" id="node0inputconnector1" style="position: absolute; left: -7px;"><circle cx="5" cy="10" r="5" fill="#ff0"></circle></svg></div><button>Delete node</button></div></div>
<p>Note: This node is just a non-responsive example.</p>
</div>
<div class="float-child"> <!--Text explaining the example-->
<a>On the left you see an example node. At the left side of the node, we have the inputs. This is where the data is coming into the node.
The node itself performs an operation to the data coming into the node and outputs it on the right side.
The right side is the output side. All inputs and outputs have colored dots. Those are connectors.
</a>
<p>Nodes can be connected using wires, called "connector wires". The data flows through these wires.
You can connect two nodes by dragging an output connector. A white line will appear. Drag it to the input connector of the node you
want to connect it to. The end of the line will snap to the input connector and now you just need to release the mouse button.
<br>
All inputs have an input field, where you can manually input the data. If a node is connected, this data will come in through
the wires and not through the input field anymore. The input field will be grayed out to make clear it isn't being used.
</p>
</div>
</div>
<h2>There are multiple types of nodes.</h2>
<p><b>Input nodes</b> have a big input field at the top and will output the data you typed in there. You can use them to send data to multiple inut connectors
instead of just one if you input it in the input field of a node directly. I advise you to use them for variable values. For example if
you have a program that squares a value, the value to be squared can be changed based on what value the user wants to square. If you use
a math node set so power to accomplish this, the exponent needs to always be two, because you are squaring. That means the two in this example
is a static value and can be best inputted directly into the input field of the math node and the variable - the number you want to square -
can be best inputted via an input node. This isn't required for the network to work, but it helps make it more easy to understand.
</p>
<p>
<b>Output nodes</b> are used to show what value comes out of the network. A light for example can be turned on or off, depending on the input value.
Output nodes are used to show the answer the network has provided.
</p>
<p>
<b>Fourth dimension nodes</b> are used to work with time or earlier states of the network. The time node outputs the Unix time.
That means the amount of seconds passed since 00:00:00 UTC on 1 January 1970. A constantly, liniairly changing value like
this can be used to make lights flash or to time certain changes in your network.<br>
The Memory node is used to remember values. It consists of a "data in" input (The value to remember) and a "control" input.
The control input is used to tell the node if it should save a new value or just output the old one.
When the "control" input is set to on, the node will remember the values you put in and output them directly. If the "control" input is
set to off, the node will output the saved value.
</p>
<p>
<b>All other nodes</b> perform operations on data, like adding two numbers or converting a value to binary. There are many nodes,
so I'm not going to cover all of them here. Most speak for themselves. You can just start goofing around making cool stuff and before
you know, you'll have learnt all there is to this tool.
</p>
<h2>Data types</h2>
<p>
There are two types of data that can be utilised by the network: Booleans and numbers.
</p>
<p><b>Booleans</b> contain a value that is either "yes" or "no".
"Logic gate" nodes perform an operation to booleans. For example, an "and" node outputs "yes" if both of it's inputs are also "yes". If that is not the case, it outputs "no".
A "colored light" node turns its light on if the input is "yes" and turns its light of if the input is "no".
</p>
<p>
Everyone knows what <b>numbers</b> are. When working with numbers, the "math" node is the node that you are going to use the most. It can perform all kinds of operations, like
addition and multiplication but it can also do more complicated things such as logarithms.
</p>
<p>
<b>A number can be interpreted as a boolean and vice versa.</b><br>
A number interpreted as a boolean is "yes" if the number is not equal to zero.<br>
A boolean interpreted as a number is 1 if the boolean is "yes" and 0 if the boolean is "no".
</p>
<h2>Bigger networks</h2>
<p>
Chances are, that you want to make a network bigger than your computer screen. You are in luck!
You can move the viewport by dragging the middle mouse button, allowing for infinitely big networks.
You can zoom in/out by using the scroll wheel, to make it easier to navigate and oversee big networks.
</p>
</div>
</div>
<!-- The about Modal -->
<div id="aboutDIV" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="modal-close" onclick='document.getElementById("aboutDIV").style.display = "none";' id='about_CLOSEBTN'>×</span>
<h1>About Logics</h1>
<p>This is a slightly modified version of my "Logics" project. The modifications are the title at the top of the page and the "back to the site" button. The font is also different to better fit in with the rest of the site.</p>
<p>Thijmer online Logics is a program that lets you build logical networks by linking mathematical operations together, visualised as nodes.
It's inspired on Blender's (<a href="https://blender.org">blender.org</a>) material nodes. <br>
I made this just for fun, to excersize my coding skills. But I beleave this tool can be used for educational purposes, because it makes
complicated math visual. I think this can also be used by people who just want to toy around and make some cool stuff. If you have a cool
project you want to share with me, a feature request, a bug report or something else, you can just <a id="maillink" href="https://google.com">email</a> me.
</p>
<p>
Thijmer Logics is open source! The source code is available on <a href="https://github.com/Thijmer/logics">Github</a>
If you want to use the code of this project in your own project, you're free to do so. But before you do, please read the license on the github page. This project is licensed under GPL3 and by distributing a (modified) version of this project, you demonstrate that you agree to the licence.
</p>
<p>
Lastly, I want to thank the internet resources I used for the code I stole from them ;)<br>
This is one of my first javascript+html projects, so I wouldnt be able to do this without all the online resources.
If you want to program a website as well, there are some great tutorials available on <a href="https://www.w3schools.com/">w3schools.com</a>.
</p>
</div>
</div>
<!-- The about Modal -->
<div id="changeDIV" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="modal-close" onclick='document.getElementById("changeDIV").style.display = "none";' id='change_CLOSEBTN'>×</span>
<h1>Changes in Logics</h1>
<p>In this tab, all changes to the node system will be listed per update, starting at update 1.1.</p>
<h2>Version 2</h2>
<h3>Version 2.0</h3>
<p>Recursion update. You can now connect nodes to themselves</p>
<ul>
<li>Recursive networks (nodes directly or indirectly connected to themselves) are now a possibility. Connectors in a recursive network are green.</li>
<li>Multiple nodes connected to one node only call the network before them once now, which improves performance.</li>
<li>Added "nand gate" node.</li>
</ul>
<h2>Version 1</h2>
<h3>Version 1.4</h3>
<p>Firefox users will be happy with this one! </p>
<ul>
<li>Made the checkbox node's large checkbox look correct on firefox and Safari.</li>
<li>Updated zooming behaviour to work correct on firefox and Safari.</li>
<li>Added font size propertie to make the text in the "add node" panel render properly in firefox.</li>
<li>Scrollbar in the "add node" panel is now displayed correctly on firefox.</li>
<li>Mobile users are now able to scroll around a network.</li>
</ul>
<h3>Version 1.3</h3>
<ul>
<li>There is now a limit on how far you can zoom in.</li>
<li>All appearences of parseInt() are replaced by Number() for greater precision (hopefully)</li>
<li>Cleaned the code up a bit</li>
<li>People on an incompatible browser now have a hard time using this.</li>
</ul>
<h3>Version 1.2</h3>
<ul>
<li>Zooming in or out is now possible by using the scrollwheel.</li>
<li>The background grid now moves along when moving the viewport.</li>
<li>New nodes will now be added at the center of the view.</li>
<li>Moving the viewport by moving the middle mouse button is easier now, because it's also possible now if your mouse is on top of a node.</li>
</ul>
<h3>Version 1.1</h3>
<ul>
<li>Dragging with middle mouse button now moves the viewport, making it possible to create node networks much larger than your computer screen.</li>
<li>The RGB lighting node's RGB values now go from 0-1 instead of 0-255</li>
<li>'Color convert' node added.</li>
<li>'Color input' node added</li>
<li>'Sine, cosine or tangent' node added.</li>
<li>Logarithm support added to the "math" node.</li>
<li>Favicon added</li>
<li>Timings changed: The system will now wait only 10ms between calling output nodes, instead of 100ms. This allows for super fast flashing lights.</li>
<li>Names of input/outputs on some nodes are changed to make it more sensible.</li>
<li>Changelog added</li>
<li>Changed the about page to require JavaScript to reveal contact e-mail address.</li>
</ul>
</div>
</div>
<div id="topmenu">
<button class="mainmenubtnonlylogo" onclick="openNav()">+</button>
<div class="dropdown">
<button class="mainmenubtn" onclick="">File</button>
<div class="dropdown-content">
<!--_____________Opening system___________-->
<a onclick='document.getElementById("OpenDIV").style.display = "block";' id='OpenBTN'>Open</a>
<!--_____________Saving system___________-->
<a onclick='makeFile()'>Save</a>
</div>
</div>
<button class="mainmenubtn" onclick='
document.getElementById("SettingDIV").style.display = "block";
document.getElementById("project_name").value = project_name;
document.getElementById("datavis").checked = connectorVisualisation;
document.getElementById("togglegloweffects").checked = connectorglow;
document.getElementById("livedata").checked = live_data_nodes_update;
document.getElementById("recursive_networks").checked = enable_recursive;
'>Options</button>
<div class="dropdown">
<button class="mainmenubtn">Help</button>
<div class="dropdown-content">
<!--_____________How to use system___________-->
<a onclick='document.getElementById("howtoDIV").style.display = "block";' id='OpenBTN'>How to use</a>
<!--_____________About system___________-->
<a onclick='document.getElementById("aboutDIV").style.display = "block"; document.getElementById("maillink").href = "ma"+"ilto: thi"+/*HMMMMMMM*/"jmen@thi"+/*I like cheeze*/"jmer.nl"'>About</a>
<!--_____________Changelog___________-->
<a onclick='document.getElementById("changeDIV").style.display = "block";'>Changelog</a>
</div>
</div>
<!--_____________Title_____________-->
<h1 style="position: absolute; width: 100%; top: -5px; text-align: center; z-index: -1;">Thijmer online Logics</h1>
<!--_____________Back to the site_____________-->
<button onclick='window.history.back();' class="mainmenubtn" style="position: absolute; right: 0px;">← Back to the site</button>
</div>
<!--Side panel in which the items can be added.-->
<div id="sidepanel" class="sidepanel">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<h1>Input nodes</h1>
<!--Checkbox node-->
<a
onclick='createStandardNode("checkbox")'>Checkbox</a>
<!--Number input node-->
<a onclick='createStandardNode("number input")'>Number input</a>
<a onclick='createStandardNode("color input")'>Color input</a>
<h1>Boolean operations</h1>
<!--Invertor node-->
<a onclick='createStandardNode("invert")'>Invert</a>
<a onclick='createStandardNode("or")'>Logical or gate</a>
<a onclick='createStandardNode("and")'>Logical and gate</a>
<a onclick='createStandardNode("xor")'>Logical xor gate</a>
<a onclick='createStandardNode("nand")'>Logical nand gate</a>
<h1>Number operations</h1>
<a onclick='createStandardNode("compare")'>Compare</a>
<a onclick='createStandardNode("math")'>Math</a>
<a onclick='createStandardNode("sincostan")'>Sine, cosine or tangent</a>
<a onclick='createStandardNode("round")'>Round</a>
<a onclick='createStandardNode("mix")'>Mix</a>
<a onclick='createStandardNode("colorconvert")'>Color convert</a>
<a onclick='createStandardNode("ntobin")'>Number to bits</a>
<a onclick='createStandardNode("binton")'>Bits to number</a>
<h1>Fourth dimension</h1>
<a onclick='createStandardNode("memory")'>Memory node</a>
<a onclick='createStandardNode("time")'>Time</a>
<h1>Output nodes</h1>
<a onclick='createStandardNode("light")'>Colored light</a>
<a onclick='createStandardNode("lightrgb");'>RGB lighting</a>
<a onclick='createStandardNode("numdisp")'>Number displayer</a>
<div style="height: 60px;"></div><!--To make sure the scroll really goes down to the bottom of the sidemenu.-->
</div>
<!--Script to open and close the side panel-->
<script>
/* Set the width of the sidebar to 250px (show it) */
function openNav() {
document.getElementById("sidepanel").style.width = "300px";
}
/* Set the width of the sidebar to 0 (hide it) */
function closeNav() {
document.getElementById("sidepanel").style.width = "0";
}
</script>
<div id="container_container">
<div id="container">
<!--Contains all of the windows and nodes-->
<svg id="line_container_svg" style="width: var(--workspacewidth);
height: var(--workspaceheight);
background-color: #000000;
position: absolute;
pointer-events: none;
z-index: -1" xmlns="http://www.w3.org/2000/svg">
<!--<circle cx="50%" cy="50%" r="100" fill="#362" />-->
<defs>
<pattern id="smallGrid" width="8" height="8" patternUnits="userSpaceOnUse">
<path d="M 8 0 L 0 0 0 8" fill="none" stroke="#333333" stroke-width="2" />
</pattern>
<pattern id="grid" width="80" height="80" patternUnits="userSpaceOnUse" x="0" y="0">
<rect width="80" height="80" fill="url(#smallGrid)" />
<path d="M 80 0 L 0 0 0 80" fill="none" stroke="#555555" stroke-width="3" />
</pattern>
<filter id="glowconnector" x="0" y="0">
<feOffset result="offOut" in="SourceGraphic" dx="0" dy="0" />
<feColorMatrix result="matrixOut" in="offOut" type="matrix"
values="2 0 0 0 0 0 1.8 0 0 0 0 0 1.8 0 0 0 0 0 2 0" />
<feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="8" />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>
</defs>
<rect width="100%" height="100%" fill="url(#grid)" id="backgroundgrid"/>
</svg>
</div>
</div>
<script src="Nodelib.js"></script>
<script src="CreateNode.js"></script>
<script>
window.addEventListener("beforeunload", function (e) {
var confirmationMessage = 'If you leave this page, all unsaved changes to the node network will be lost.';
(e || window.event).returnValue = confirmationMessage; //Gecko + IE
return confirmationMessage; //Gecko + Webkit, Safari, Chrome etc.
});
</script>
</body>
</html>