Building an app for Brick 1100

Note
It is recommended to read the Introduction first to understand the background of Brick 1100, how it works, and the related tools before continuing with this guide.

In this guide, let's build a simple Password Generator app and get it running on Brick 1100.

This Password Generator app will generate a random password based on the user's input for the length of the password (maximum 30 characters). Below is a preview of the final app:

1. Setup

1.1. Tool

  • Install Visual Studio Code on your device.
    • This is the recommended code editor for this guide.
  • Install the Live Server extension in Visual Studio Code.
    • This extension will help you to run your app locally and see the changes in real-time.
  • After the above steps, you should see a Go Live button at the bottom right corner of Visual Studio Code.

1.2. Codebase

  • Create a GitHub account if you don't have one.

  • Fork the Brick 1100 Apps directory repository to your account.

    • This repository contains the source code of all apps built for Brick 1100. Your app will be added to this repository upon completion.

  • Clone the forked repository to your Visual Studio Code:

    • Copy the repository URL as shown in the below screenshot.
    • In Visual Studio Code, open the terminal (select View > Terminal from the menu or press ``Ctrl + ```) and run the following command:
git clone <repo_url>
  • Replace <repo_url> with the copied URL, e.g. https://github.com/<username>/brick-1100-apps.git.
  • Once the repository is cloned, you will see the source code in your Visual Studio Code.

2. Build

  • In your Visual Studio Code, create a new folder named pwd-generator inside the brick-1100-apps folder. This folder will contain the source code of the Password Generator app.

  • Start the Live Server by selecting the pwd-generator folder, right-clicking, and selecting Open with Five Server (root).

  • A new browser tab with the URL http://127.0.0.1:5500 will open, now every change you make to this folder will be reflected in real-time.

2.1. App structure (HTML file)

  • Create an index.html file inside the pwd-generator folder with the below content:
<!DOCTYPE html>
<html>

<head>
    <title>Password Generator</title>
    <link rel="stylesheet" href="https://unpkg.com/bridge-1100/dist/index.css">
    <link rel="stylesheet" href="https://unpkg.com/bridge-1100/dist/font.css">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="screen">
        <label>Password length</label>
        <div id="input"></div>
        <footer>Generate</footer>
    </div>

<div class="screen" hidden>
        <span>Your password:</span>
        <div id="output"></div>
        <footer>OK</footer>
    </div>

<script src="https://unpkg.com/bridge-1100/dist/index.umd.js"></script>
    <script src="script.js"></script>
</body>

</html>
  • The app consists of two screens:
    1. The first screen is for the user to input the length of the password.
    2. The second screen displays the generated password.
  • Note the highlighted lines:
    • Line 6 and 7: these are links to the Bridge 1100 CSS and fonts files, they help enforce your app's interface to fit seamlessly with Brick 1100's monochrome visual.
    • Line 24: this is a link to the Bridge 1100 JavaScript file, it helps bridge the communication between your app and Brick 1100.

2.2. App logic (JS file)

  • Create a script.js file inside the pwd-generator folder. In this file, we will write the logic for the Password Generator app.
  • From the HTML structure above, we retrieve the input and output elements:
var input = document.getElementById("input");
var output = document.getElementById("output");
  • Then define the character set for the password generation and a variable for storing the generated password:
var charset = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*()-_=+";
var password = "";
  • Next, we will leverage Bridge 1100 to listen for keypress and numpress events to handle the user's input:
window.bridge.on("keypress", handleKeypress);
window.bridge.on("numpress", handleKeypress);
  • We implement the handleKeypress handler function as below:
function handleKeypress(key) {
  if (typeof key === "number" && input.textContent.length < 2) {
    input.textContent += key;
  }

if (key === "clear") {
    if (input.textContent.length > 0) {
      input.textContent = input.textContent.slice(0, -1);
    } else {
      stop();
    }
  }

if (key === "ok") {
    if (input.textContent.length > 0 && !password) {
      generatePassword();
    } else {
      stop();
    }
  }
}
  • The generatePassword function generates a random password based on the user's input for the length of the password. If the password length exceeds 30 characters, the app calls the stop function. We implement it as below:
function generatePassword() {
  var length = parseInt(input.textContent);

for (var i = 0; i < length; i++) {
    var randomIndex = Math.floor(Math.random() * charset.length);
    password += charset.charAt(randomIndex);
  }

if (password.length > 30) {
    return stop({ error: "Out of range" });
  }

input.parentElement.hidden = true;
  output.parentElement.hidden = false;
  output.textContent = password;
}
  • The stop function resets the password and sends a message to Brick 1100 to close the app. We implement it as below:
function stop(data) {
  password = "";
  window.bridge.send(window.parent, { event: "stop", data: data });
}
  • Putting it all together, the script.js file should look like this:
var input = document.getElementById("input");
var output = document.getElementById("output");
var charset = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*()-_=+";
var password = "";

window.bridge.on("keypress", handleKeypress);
window.bridge.on("numpress", handleKeypress);

function handleKeypress(key) {
  if (typeof key === "number" && input.textContent.length < 2) {
    input.textContent += key;
  }

if (key === "clear") {
    if (input.textContent.length > 0) {
      input.textContent = input.textContent.slice(0, -1);
    } else {
      stop();
    }
  }

if (key === "ok") {
    if (input.textContent.length > 0 && !password) {
      generatePassword();
    } else {
      stop();
    }
  }
}

function generatePassword() {
  var length = parseInt(input.textContent);

for (var i = 0; i < length; i++) {
    var randomIndex = Math.floor(Math.random() * charset.length);
    password += charset.charAt(randomIndex);
  }

if (password.length > 30) {
    return stop({ error: "Out of range" });
  }

input.parentElement.hidden = true;
  output.parentElement.hidden = false;
  output.textContent = password;
}

function stop(data) {
  password = "";
  window.bridge.send(window.parent, { event: "stop", data: data });
}

2.3. App styling (CSS file)

  • Create a style.css file inside the pwd-generator folder with the below content:
.screen:not([hidden]) {
  display: flex;
  flex-direction: column;
  height: 100%;
}

#input {
  border: 2vh solid #000;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  font-size: 20vh;
  height: 100%;
}

#output {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  word-break: break-all;
}

footer {
  font-size: 12vh;
}

2.4. Preview your app optional

3. Publish

3.1. Commit and push

  • In your Visual Studio Code, switch to the Source Control view on the left sidebar.
  • Stage all changes by clicking the + button next to the files.
  • Write a concise commit message in the text box and click the Commit button.

3.2. Open a pull request

  • Open your forked repository on GitHub from step 1.2.
  • Click Contribute > Open pull request. This will create a pull request to merge your changes into the directory repository.