MatCat.OpenSource/BrowserLogic
3
1
Fork 0
Code Issues Pull Requests Releases Wiki Activity

0.3.1: Dynamicly created toolbox

Browse Source
This commit is contained in:
MatCat 2021-02-24 21:57:12 -08:00
parent a50c655670
commit 6dc7eb5e03
5 changed files with 86 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
README.md
View File

@ -12,6 +12,10 @@ To be decided, but at this moment this code is open source and free to use for n
## Changelog
### 0.3.1
* Toolbox is now dynamically created and categorized
* The delete button is gone for now (use delete key on keyboard), it will come back when toolbar is added.
### 0.3.0
* Saving / Loading of designs
* New Element: Buffer, allows for construction of circuits that would otherwise be recursive

37
css/main.css
View File

@ -267,22 +267,55 @@ textarea {
#left-menu {
width: 200px;
max-width: 200px;
height: 100vh;
height: 99vh;
display: inline-block;
border: 1px solid black;
margin: 0px;
padding: 0px;
}
#inner-left-menu {
width: 100%;
height: 99%;
overflow: auto;
}
#top-bar {
height: 50px;
overflow: auto;
overflow: none;
margin: 0px;
padding: 0px;
background-color: #222;
font-size: 2em;
}
#LeftOf-SiteTitle {
display: inline-block;
width: 200px;
height: 100%;
font-size: 0.5em;
margin: 0px;
padding: 5px;
}
#SiteTitle {
display: inline-block;
height: 100%;
width: 50%;
margin: 0px;
padding-top: 2px;
}
.TOOLBOX_CATEGORY_HEADER {
margin: 0px;
padding: 0px;
text-align: center;
background-color: #222;
}
.TOOLBOX_CATEGORY_HEADER h2 {
margin: 0px;
padding: 5px;
}
#darkout-overlay {
position: absolute;
left: 0px;

29
index.html
View File

@ -31,27 +31,18 @@
<label for="chk_dontDisplayWelcome">Don't show welcome window again</label></div>
<script src="js/vendor/modernizr-3.11.2.min.js"></script>
<div id="top-bar">
MatCat BrowserLogic <span id="version"> </span>
<div id="LeftOf-SiteTitle">
<input type="button" id="btn_Save" value="Save"/>&nbsp;&nbsp;&nbsp;
<input type="button" id="btn_Load" value="Load"/>
<input type="file" id="file_Load" style="display: none;" />
</div>
<div id ="SiteTitle">
MatCat BrowserLogic <span id="version"> </span>
</div>
</div>
<div id="left-menu">
<div style="margin: 5px;">
<input type="button" id="btn_AddAND" value="& AND"/><br />
<input type="button" id="btn_AddNAND" value="!& NAND"/><br />
<input type="button" id="btn_AddOR" value="| OR"/><br />
<input type="button" id="btn_AddNOR" value="!| NOR"/><br />
<input type="button" id="btn_AddXOR" value="^ XOR"/><br />
<input type="button" id="btn_AddXNOR" value="!^ XNOR"/><br />
<input type="button" id="btn_AddNOT" value="! NOT"/><br />
<input type="button" id="btn_AddBUFFER" value="|> BUFFER"/><br />
<input type="button" id="btn_AddSWITCH" value="|- SWITCH"/><br />
<input type="button" id="btn_AddBTN" value="[o] BUTTON"/><br />
<input type="button" id="btn_AddCLK" value="🕑 Clock"/><br />
<input type="button" id="btn_AddPULSE" value="|\__ Pulse"/><br />
<input type="button" id="btn_AddDELAY" value="__|\ Delay"/><br />
<input type="button" id="btn_Delete" value="🗑 Delete"/><br /><br />
<input type="button" id="btn_Save" value="Save"/><br />
<input type="button" id="btn_Load" value="Load"/>
<input type="file" id="file_Load" style="display: none;" />
<div id="inner-left-menu">
LOADING
</div>
</div>
<canvas id="GridPlane" width="400" height="300" style="position: absolute; top: 50px; left 202px;"></canvas>

35
js/globalfunctions.js
View File

@ -79,6 +79,41 @@ function length2D(x1,y1,x2,y2) {
return Math.sqrt(xDist*xDist + yDist * yDist);
}
function BuildToolbox() {
let toolbox = document.getElementById("inner-left-menu");
toolbox.innerHTML = "";
for (let a = 0; a < elementCatalog.Categories.length; a++) {
let div_CategoryHeader = document.createElement("div");
div_CategoryHeader.id = "TB_CATH_" + elementCatalog.Categories[a].Name;
div_CategoryHeader.className ="TOOLBOX_CATEGORY_HEADER";
div_CategoryHeader.innerHTML = '<h2>' + elementCatalog.Categories[a].Name + '</h2>';
let div_Category = document.createElement("div");
div_Category.id = "TB_CATB_" + elementCatalog.Categories[a].Name;
div_Category.className = "TOOLBOX_CATEGORY_BODY";
div_Category.innerHTML = "";
for (let b = 0; b < elementCatalog.Categories[a].Elements.length; b++) {
let btn_Element = document.createElement("input");
btn_Element.type = "button";
btn_Element.id = "btn_" + elementCatalog.Categories[a].Elements[b].Name;
btn_Element.title = elementCatalog.Categories[a].Elements[b].Description;
btn_Element.value = elementCatalog.Categories[a].Elements[b].Icon + " " + elementCatalog.Categories[a].Elements[b].Name;
btn_Element.style.width = "100px";
btn_Element.style.textAlign = "left";
btn_Element.addEventListener('click', function(evt) {
addElement(null,elementCatalog.Categories[a].Elements[b].Class,elementCatalog.Categories[a].Elements[b].Args);
}, false);
div_Category.append(btn_Element);
// div_Category.append(document.createElement("br"));
}
toolbox.append(div_CategoryHeader);
toolbox.append(div_Category);
}
}
function getElementInfo(element) {
for (let a = 0; a < ElementReferenceTable.length; a++) {
if (ElementReferenceTable[a].Name == element) return ElementReferenceTable[a];

72
js/main.js
View File

@ -2,7 +2,7 @@
MatCat BrowserLogic Simulator
*/
let Version = "0.3.0";
let Version = "0.3.1";
let spanVersion = document.getElementById("version");
spanVersion.innerText = Version;
// get the canvas and get the engine object going
@ -35,6 +35,7 @@ window.addEventListener('mousemove', function(evt) {
// Get the engine going
logicEngine.StartEngine();
BuildToolbox();
// Setup interface buttons
let btn_CloseWelcome = document.getElementById("btn_CloseWelcome");
@ -49,75 +50,6 @@ btn_CloseWelcome.addEventListener('click', function(evt) {
}
}, false);
let btn_Delete = document.getElementById("btn_Delete");
btn_Delete.addEventListener('click', function(evt) {
logicEngine.Key_Press({key: "Delete"});
}, false);
let btn_AddAND = document.getElementById("btn_AddAND");
btn_AddAND.addEventListener('click', function(evt) {
addElement(null,LogicAND, [2]);
}, false);
let btn_AddNAND = document.getElementById("btn_AddNAND");
btn_AddNAND.addEventListener('click', function(evt) {
addElement(null,LogicNAND, [2]);
}, false);
let btn_AddOR = document.getElementById("btn_AddOR");
btn_AddOR.addEventListener('click', function(evt) {
addElement(null,LogicOR, [2]);
}, false);
let btn_AddNOR = document.getElementById("btn_AddNOR");
btn_AddNOR.addEventListener('click', function(evt) {
addElement(null,LogicNOR, [2]);
}, false);
let btn_AddXOR = document.getElementById("btn_AddXOR");
btn_AddXOR.addEventListener('click', function(evt) {
addElement(null,LogicXOR,[]);
}, false);
let btn_AddXNOR = document.getElementById("btn_AddXNOR");
btn_AddXNOR.addEventListener('click', function(evt) {
addElement(null,LogicXNOR,[]);
}, false);
let btn_AddNOT = document.getElementById("btn_AddNOT");
btn_AddNOT.addEventListener('click', function(evt) {
addElement(null,LogicNOT,[]);
}, false);
let btn_AddBUFFER = document.getElementById("btn_AddBUFFER");
btn_AddBUFFER.addEventListener('click', function(evt) {
let logicBuffer = addElement(null,LogicBuffer,[]);
}, false);
let btn_AddSWITCH = document.getElementById("btn_AddSWITCH");
btn_AddSWITCH.addEventListener('click', function(evt) {
addElement(null,InputSwitch,[]);
}, false);
let btn_AddBTN = document.getElementById("btn_AddBTN");
btn_AddBTN.addEventListener('click', function(evt) {
addElement(null,InputButton,[]);
}, false);
let btn_AddCLK = document.getElementById("btn_AddCLK");
btn_AddCLK.addEventListener('click', function(evt) {
let clk = addElement(null,ClockElement,[]);
}, false);
let btn_AddPulse = document.getElementById("btn_AddPULSE");
btn_AddPulse.addEventListener('click', function(evt) {
let pulse = addElement(null,PulseElement,[]);
}, false);
let btn_AddDelay = document.getElementById("btn_AddDELAY");
btn_AddDelay.addEventListener('click', function(evt) {
let delay = addElement(null,DelayElement,[]);
}, false);
let btn_Save = document.getElementById("btn_Save");
btn_Save.addEventListener('click', function(evt) {