210 lines
11 KiB
HTML
210 lines
11 KiB
HTML
<!doctype html>
|
|
<html class="no-js" lang="" style="height: 100%;">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title></title>
|
|
<meta name="description" content="">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
|
<meta property="og:title" content="">
|
|
<meta property="og:type" content="">
|
|
<meta property="og:url" content="">
|
|
<meta property="og:image" content="">
|
|
|
|
<link rel="apple-touch-icon" href="icon.png">
|
|
<!-- Place favicon.ico in the root directory -->
|
|
|
|
<link rel="stylesheet" href="css/normalize.css">
|
|
<link rel="stylesheet" href="css/main.css">
|
|
|
|
<meta name="theme-color" content="#fafafa">
|
|
</head>
|
|
|
|
<body style="height: 100%;">
|
|
|
|
<div id="WelcomeWindow">
|
|
<h2>MatCat BrowserLogic Engine</h2>
|
|
<p>Welcome to logic.parts, a free to use logic simulator for anyone to use. This is opensource software, you can find the project at <a href="https://www.mygit.space/MatCat.OpenSource/BrowserLogic">https://www.mygit.space/MatCat.OpenSource/BrowserLogic</a>. This is an early development project, so expect bugs and some things to not work :) If you would like to contribute please feel free to find me on IRC on Freenode in channel #LogicParts.</p>
|
|
<p><span style="font-weight: bold; font-size: 1.2em;">Now on Version 0.4!</span> This new version brings an improved UI, panning, more settings options, and much more!</p>
|
|
<input type="button" id="btn_CloseWelcome" value="Simulate Some Logic!"><br />
|
|
<input type="checkbox" id="chk_dontDisplayWelcome" name="chk_dontDisplayWelcome" value="1">
|
|
<label for="chk_dontDisplayWelcome">Don't show welcome window again</label>
|
|
<input type="file" id="file_Load" accept=".LogicParts" style="display: none;" />
|
|
</div>
|
|
<div id="top-bar">
|
|
<div id="top-menu">
|
|
<div id="left-top-menu">
|
|
<ul>
|
|
<li id="tm_File" class="top-menu-item">File
|
|
<div id="tm_FileMenu" class="top-menu-div">
|
|
<ul>
|
|
<li id="tfm_New" value="FileNew">New</li>
|
|
<li id="tfm_Open" value="FileOpen">Open</li>
|
|
<li id="tfm_Save" value="FileSave">Save</li>
|
|
<li id="tfm_SaveAs" class="disabled" title="Feature coming soon">Save As</li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
<li id="tm_Edit" class="top-menu-item">Edit
|
|
<div id="tm_EditMenu" class="top-menu-div">
|
|
<ul>
|
|
<li id="tfm_Undo" value="EditUndo" class="disabled" title="Feature coming soon">Undo</li>
|
|
<li id="tfm_Redo" value="EditRedo" class="disabled" title="Feature coming soon">Redo</li>
|
|
<li class="tfm_seperator"></li>
|
|
<li id="tfm_Cut" value="Cut">Cut</li>
|
|
<li id="tfm_Copy" value="Copy">Copy</li>
|
|
<li id="tfm_Paste" value="Paste">Paste</li>
|
|
<li class="tfm_seperator"></li>
|
|
<li id="tfm_Delete" value="DeleteElements" class="disabled">Delete</li>
|
|
<li id="tfm_Disconnect" value="DisconnectElements" class="disabled">Disconnect</li>
|
|
<li class="tfm_seperator"></li>
|
|
<li id="tfm_SelectAll" value="SelectAll" title="Select all elements">Select All</li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
<li id="tm_View" class="top-menu-item">View
|
|
<div id="tm_ViewMenu" class="top-menu-div">
|
|
<ul>
|
|
<li id="tfm_Pan2Center" value="ResetCanvas"><span class="blankbox"> </span>Pan to Center</li>
|
|
<li class="tfm_seperator"></li>
|
|
<li id="tfm_ShowConnections" value="ShowConnections"><span class="checkbox">✓</span>Show Connections</li>
|
|
<li id="tfm_ConnectionLayer" value="ConnectionLayer"><span class="blankbox"> </span>Connections Below</li>
|
|
<li class="tfm_seperator"></li>
|
|
<li id="tfm_ShowGrid" value="ShowGrid"><span class="checkbox">✓</span>Show Grid</li>
|
|
<li id="tfm_SnapGrid" value="SnapGrid"><span class="checkbox">✓</span>Snap to Grid</li>
|
|
<li id="tfm_GridSize"><span class="blankbox"> </span>Grid Size <input type="number" id="in_GridSize" value="20" min="2" max="100" style="margin-left: 10px; width: 40px;"><span class="menuitem-shortcut">Shift+(-,+)</span></li>
|
|
<li class="tfm_seperator"></li>
|
|
<li id="tfm_ShowFPS" value="ShowFPS"><span class="checkbox">✓</span>Show FPS</li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
<li id="tm_Tools" class="top-menu-item">Tools
|
|
<div id="tm_ToolsMenu" class="top-menu-div">
|
|
<ul>
|
|
<li id="tfm_CreateIC" value="CreateIC" class="disabled" title="Turn the current design into an IC, must have atleast one IC Output to create">Create IC</li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
<li id="tm_Help" class="top-menu-item">Help
|
|
<div id="tm_HelpMenu" class="top-menu-div">
|
|
<ul>
|
|
<li id="tfm_Help" value="Help">Help</li>
|
|
<li class="tfm_seperator"></li>
|
|
<li id="tfm_GITRepo"><a target="new" href="https://mygit.space/MatCat.OpenSource/BrowserLogic">GIT Repo</a></li>
|
|
<li class="tfm_seperator"></li>
|
|
<li id="tfm_About">About</li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div id="SiteTitle">MatCat BrowserLogic <span id="version"> </span></div>
|
|
</div>
|
|
</div>
|
|
<div id="left-menu">
|
|
<div id="inner-left-menu">
|
|
LOADING
|
|
</div>
|
|
</div>
|
|
<canvas id="GridPlane" width="400" height="300" style="position: absolute; top: 50px; left 202px;"></canvas>
|
|
<canvas id="LogicPlane" width="400" height="300" style="margin: 0px; padding: 0px; position: absolute; top: 50px; left: 202px;"></canvas>
|
|
<div id="PropertiesBox">
|
|
<div id="PropertiesBoxTitle">
|
|
Properties
|
|
</div>
|
|
<div id="PropertiesBoxContent">
|
|
Content
|
|
</div>
|
|
</div>
|
|
<div id="CreateICBox">
|
|
<div id="CreateICBoxTitle">
|
|
Create new IC
|
|
</div>
|
|
<div id="CreateICBoxContent">
|
|
<p>To create an IC you must give it a few parameters below:</p>
|
|
<div><span style="display: inline-block; text-align: right; vertical-align: middle; width: 100px; height: 100%; padding-right: 10px;">Name</span><input type="text" id="ICName" style="width: 250px" pattern="[a-zA-Z0-9_]+" title="Only letters, numbers, and underscore, no special characters or spaces! Spaces will be converted to _"></div>
|
|
<div><span style="display: inline-block; text-align: right; vertical-align: middle; width: 100px; height: 100%; padding-right: 10px;">Description</span><textarea id="ICDescription" style="width: 250px" rows="5"></textarea></div>
|
|
<center><input type="button" id="btn_CreateIC_Create" value="Create IC" disabled> <input type="button" id="btn_CreateIC_Cancel" value="Cancel"></center>
|
|
</div>
|
|
</div>
|
|
<div id="RightClickMenu">
|
|
<ul>
|
|
<li id="rcm_New">New</li>
|
|
<li id="rcm_seperator1" class="rcm_seperator"></li>
|
|
<li id="rcm_CreateIC">Create IC</li>
|
|
<li id="rcm_seperator2" class="rcm_seperator"></li>
|
|
<li id="rcm_Delete">Delete</li>
|
|
<li id="rcm_Disconnect">Disconnect</li>
|
|
</ul>
|
|
</div>
|
|
<div id="SaveWindow">
|
|
<div id="SaveWindowTitle">
|
|
Save Design
|
|
</div>
|
|
<div id="SaveWindowContent">
|
|
<div>
|
|
<span style="padding-right: 10px;">Design Name</span><span><input type="text" id="saveName" value="My Design"></span>
|
|
</div>
|
|
<div>
|
|
<input type="checkbox" id="saveCompressed" checked /> Save Compressed
|
|
</div>
|
|
<div style="margin-top: 10px;">
|
|
<center><input type="button" id="btn_SaveDesign" value="Save"> <input type="button" id="btn_CancelSave" value="Cancel"></center>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="HelpWindow">
|
|
<div id="HelpWindowTitle">
|
|
MatCat Logic Engine Help
|
|
<div class="CloseWindow">X</div>
|
|
</div>
|
|
<div id="HelpWindowContent">
|
|
<div class="HelpZone">
|
|
<h2>Basic Concept</h2>
|
|
<h3>Signal Propagation</h3>
|
|
<p>This engine simulates digital logic conceptually, it does not try to perfectly emulate real world devices, I.E. there is no impedance, propagation delay simulation, and the like. However it does try to simulate high/low as realistic as it can, so for example if you have multiple outputs connected to a single input, if any of them are high, that input will see high, it will not go low until ALL connections to it have gone low, this does somewhat mimic the idea of a tristate, and allows for using connections at bus points, as well as line level OR. </p>
|
|
<h3>Simulation Speed</h3>
|
|
<p>Logic signals are allowed to flow as fast as the javascript interpreter can run the code, when using IC's input and outputs ARE buffered, which means they will have a propagation delay of the shortest possible javascript timing, which on most browsers is 4ms. Using a buffer element would have the same delay time as an IC I/O.</p>
|
|
</div>
|
|
<div class="HelpZone">
|
|
<h2>Linking</h2>
|
|
<p>You can only link from an output to an input, to do so click on an output, a dashed line will now follow your mouse, click on an input of another element to finish the link.</p>
|
|
<p>To delete a link simply do the same thing you did to connect the link and it will disconnect that link.</p>
|
|
</div>
|
|
<div class="HelpZone">
|
|
<h2>IC's</h2>
|
|
<h3>Concept</h3>
|
|
<p>The IC functionality is a core powerful function of this engine as it allows you to design a circuit and turn it into a single self contained element you can use in other designs, including inside of OTHER IC's. IC's are unique only in that you must place input and output elements to interface to the IC. The Input and Output elements you place will determine what pins are shown on the IC when created. Note that IC Input and Outputs are buffered connections.</p>
|
|
<h3>Creating</h3>
|
|
<p>To create an IC the minimal needed circuitry is atleast 1 IC Output in the design, once you have a design you wish to turn into an IC you can do so either via the top menu Tools->Create IC, or the right click menu Create IC option, or keyboard shortcut (default ctrl+c). This will open a dialog box where you can name and describe your IC. Once it is created it will appear in the left hand toolbox under the IC's category.</p>
|
|
</div>
|
|
<div class="HelpZone">
|
|
<h2>Work Area</h2>
|
|
<h3>Panning</h3>
|
|
<p>You can pan the design by holding control key while clicking and dragging with the left mouse button on unoccupied space.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="floatCanvas"><canvas></canvas></div>
|
|
<div id="darkout-overlay"></div>
|
|
<script src="js/vendor/lz-string.min.js"></script>
|
|
<script src="js/topmenu/topmenu.js"></script>
|
|
<script src="js/rightclickmenu/rightclickmenu.js"></script>
|
|
<script src="js/globalfunctions.js"></script>
|
|
<script src="js/baseclasses.js"></script>
|
|
<script src="js/scheduler.js"></script>
|
|
<script src="js/elements/BaseElementClasses.js"></script>
|
|
<script src="js/elements/InputElements.js"></script>
|
|
<script src="js/elements/DisplayElements.js"></script>
|
|
<script src="js/elements/BasicElements.js"></script>
|
|
<script src="js/elements/FFElements.js"></script>
|
|
<script src="js/elements/TimingElements.js"></script>
|
|
<script src="js/elements/ICElements.js"></script>
|
|
<script src="js/logicengine.js"></script>
|
|
<script src="js/mainevents.js"></script>
|
|
<script src="js/main.js"></script>
|
|
</body>
|
|
|
|
</html>
|