blob: 23144e629dd68778f4af90630a1cf7759d4dba7e (
plain) (
tree)
|
|
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta name="description" content="A simple utility to help you make R2C graphs, out-of-game.">
<meta name="author" content="recnet/winrg">
<link rel="manifest" href="/pwathings/manifest.json" />
<title>R2C Node Graph Generator</title>
<link crossorigin href="/oi.css" rel="stylesheet" type="text/css">
<link crossorigin href="style.css" rel="stylesheet" type="text/css" />
<link crossorigin href="/lib/chips.css" rel="stylesheet" type="text/css" />
<link crossorigin href="/circuits.json" rel="preload" as="fetch"/>
<link crossorigin href="https://raw.githubusercontent.com/tyleo-rec/CircuitsV2Resources/master/misc/circuitsv2.json" rel="preload" as="fetch"/>
<script crossorigin src="/lib/util.js"></script>
<script crossorigin src="/lib/types.js"></script>
<script crossorigin src="/lib/chips2.js"></script>
<script crossorigin src="script.js"></script>
<noscript><style> #searcher, #graph, #canvas { display: none } </style></noscript>
</head>
<body>
<noscript>
The chip grapher requires JavaScript to function.
If you cannot enable it here, you can try using tyleo's
<a href="https://www.figma.com/community/file/1070759222767700948">
figma templates
</a>, although those also need javascript.
</noscript>
<details id="searchbox" open>
<summary></summary>
<iframe id="searcher" src="/searcher"></iframe>
</details>
<div id="graph">
</div>
<canvas id="canvas"></canvas>
<details id="plbox">
<summary><span class="icon"></span></summary>
<div>
<h1>Permalinking Menu</h1>
<hr>
<p>Set your name below(optional) and click the button to get a permanent link to the current graph.</p>
<label for="authorbox"><b>Author:</b></label>
<input id="authorbox" type="text">
<br>
<button onclick="getPermalink();">Get Link!</button>
<br>
<span id="linkprefix"></span><a id="linktarget"></a>
</div>
</details>
<details id="helpbox">
<summary>?</summary>
<div>
<!-- Unused tabbing system. Ignore.
<input type="radio" name="test" class="selecttab" checked/>
<p class="tab">text for button 1</p>
<input type="radio" name="test" class="selecttab"/>
<p class="tab">text for button 2</p>
<input type="radio" name="test" class="selecttab"/>
<p class="tab">text for button 3</p>
<input type="radio" name="test" class="selecttab"/>
<p class="tab">text for button 4</p>-->
<h2>The Basics</h2>
<hr/>
<p>The chip grapher is a simple program.
To get started, use the searcher sidebar to find a chip you want to add.
That sidebar is just an embedded version of <a href="/searcher">the main searcher</a>, and all
behavior is the same. To learn more, press the '?' button on the sidebar.
Once you've decided on a chip, press the '+' button next to it to add it
to the graph.</p>
<h3>Interacting with existing chips</h3>
<hr/>
<p>Chips suppport various operations.</p>
<h4>Wiring</h4>
<hr/>
<p>To wire 2 ports to one another, simply click and drag to a port of the same type.
All input data ports have a maximum of one connection, as do output execs.
To disconnect a wire, simply click on the port.
</p>
<h4>Selecting</h4>
<hr>
<p>To select a chip, just click on it. If the threshold is too fast, shoot me a message on discord.</p>
<h4>Deleting</h4>
<hr>
<p>Once a chip is selected, press the <kbd>Delete</kbd> key to delete it.</p>
<h4>Type Selection</h4>
<hr>
<p>Some chips have a type union on a port. You can see this union by hovering over any white port.
When a chip with a type union is selected, drop down menus will appear to set the actual type.
Setting it will unwire all connections to the chip, so be sure to set it first thing!
</p>
</div>
</details>
</body>
</html>
|
