Gate Creator

Gate Creator

Gate Creator is a tool that allows users to create their own blocks in Logic Gate Lab. User created blocks can be imported into LGL.

Layout

The tool can be accessed in the menu: Window > Gate Creator. This will open the tool in a new tab.

The left panel is the design panel. Use the dropdown to switch between design and program mode.

• Design mode: change the appearance of the block. Use HTML to design the block.
• Program mode: change the logic of the block. Use Javascript to design the block. The right panel is the preview panel. The completed block is previewed there, including its appearance and logic. Use the "refresh" button to refresh the preview.

The export button is used to export the finished block, including its design and logic.

Example

This example takes you through the process of creating a custom block. We will attempt to create a block that will output the remainder of a division. This is called the modulo operator.

Design

We will base the block on a standard division operator block. You can find the blocks template here.

<div class="draggable gate modulo mo" style="cursor: grab;" id="draggable-default" data-last-input="0">
  <div class="inout decimal" id="draggable-default-input-1">0</div>
  <div class="inout decimal" id="draggable-default-input-2">0</div>
  <div class="inout title">Modulo</div>
  <div class="inout decimal" id="draggable-default-output-1">1</div>
  <div class="inout decimal" id="draggable-default-output-2" style="border-bottom: none;">1</div>
</div>

Important: Make sure you change the class list of the main block. The last two items should be the title and id, in that order. If you're not trying to make a gate, you can change the second class.

Your block should look like this:

Program

Now, let's add logic to the block. Switch to "program" mode. The code will go into the main loop when imported into the sandbox, so there is no need to worry about looping the code.

let input1 = gate.querySelector(`#${gate.id}-input-1`);
let input2 = gate.querySelector(`#${gate.id}-input-2`);

let output1 = gate.querySelector(`#${gate.id}-output-1`);
let output2 = gate.querySelector(`#${gate.id}-output-2`);

output1.textContent = Number(input1.textContent) % Number(input2.textContent);
output2.textContent = Number(input1.textContent) % Number(input2.textContent);

Note: gate is a variable provided by default. It represents the entire gate (the parent of the inouts)

Let's test the program. Click on the input inouts to change their value:

The outputs should be the remainder of the inputs divided by each other.

Export & Import to LGL

Let's export the block by pressing "export." Complete the prompts. A .json file should download automatically. Go to the sandbox to import. Go to File > Import Modification and choose a file.

If no error occured, the import was a success! You should be able to find your block in the menu.

Limitations

As of v1.0.0, you can only create new blocks and logic for the blocks. You cannot modify the top menu bar (yet).

Reference

name	description
gate	the parent of the inouts (the gate itself)
displayAlert	(func) displays an alert. Usage: displayAlert(allow-input?, header-text, body-text)