Skip to content

Dashboard Running and Editing Tutorial

Jump to bottom
Eric edited this page Oct 2, 2019 · 1 revision

How to Run the Dashboard

Author: Eric Udlis

This tutorial will guide you through cloning, running, and making basic edits to the Badgerloop Pod 5 Dashboard. This tutorial is easier with a basic knowledge of HTML, but not required. Basic knowledge of Git ,however, is required. Check out the tutorials on the wiki to brush up on Git.

Instructions

Step 0: Install Necessary Files

For this tutorial you will need the following

To verify that you have all required software open a bash terminal (WSL or Git Bash on Windows, terminal on Mac/Linux) and run the following commands.

$ git --version
$ node -v
$ npm -v

If any of these give you an error double check that they are correctly installed. If all of these give you version numbers, you are good to go!

Step 1: Cloning the Repository

Our Dashboard is on a GitHub Repo, and we will need to clone a version of it to our local machine to start to make some edits.

$ git clone https://github.com/badgerloop-software/pod-dashboard.git

Step 2: Installing the Dependicies

Our dashboard is run thanks to the developers of a couple packages or sometimes called dependicies. Packages are like libraries for Node.js projects. These are indexed and installed through something called NPM or the Node Package Manager. All of our packages and their required versions are located in our package.json file.

To automatically install all required packages for the dashboard we need to go into the repo and install them.

$ cd pod-dashboard
$ npm install

Installation may take up to a couple minutes

Step 3: Running the Dashboard

We are finally ready to run the dashboard! To run a typical node app you usually run node appName. But since to run the dashboard requires a long command from electron (our window server) we shorted this to an NPM command in the package.json file. Simply run:

$ npm start

Soon you should be greeted with a window showing the dashboard. Congratulations! If you are familiar enough with web development, feel free to play around and try editing things. If not, no worries, we'll be doing a minor change in this tutorial.

Step 4: Editing the Title

First we need to close the dashboard. To cancel any task in bash press ctrl c in the terminal window. You may be prompted with End Bash Script (y/n) Press y and press enter.

In your text editor, open the file at pod-dashboard/src/index.html

Scroll to about line 17 you should fine a block of code similar to this

<!-- Top Bar -->
    <div class="banner">
      <a class="left"><img src="public/images/logo.png" height="30px"></a>
      <a id="title" class="left">CONTROL DASHBOARD</a>
      <a id="close-window" class="right">&#10005;</a>
      <a id="max-window" class="right">&#128470; </a>
      <a id="min-window" class="right">&#8212;</a>
      <a id="banner-drop" class="right">
        <div class="banner_dropdown">
          <button class="banner_dropbtn">Change View</button>
          <img src="public/images/dropdown.png" height="25px">
          <div class="banner_dropdown-content">
            <a href="#">Main</a>
            <a href="testing.html">Analysis</a>
            <a href="terminal.html">Terminal</a>
            <a href="battery.html">Batteries</a>
          </div>
        </div>
      </a>
      <a class="settingsTrigger" id="settingsTrigger"><img src="public/images/settings.png" height="35px"></a>
    </div>

We're going to change the header from CONTROL DASHBOARD to SOFTWARE ROCKS

Simply change the words in between the > and <

Then we're going to run the dashboard again by going back into our terminal and running

$ npm start

Then at the top, you should see "Software Rocks" at the top of the dashboard

Step 5: You're Done

You've now made a change to the dashboard! Noteworthy changes to the dashboard will be much more complex, but you have the basic idea down now!

Any questions contact @eudlis on slack

Clone this wiki locally