Create a browser organ

For this step, we create a browser organ. This type of organ will create a new web page with the visualization of your data. Now we will do this for our fine wine cellar to know when temperature is in danger zone.

These are the steps that the code is following:

Create your spinal browser folder
Creates and synchronize an instance with Javascript
Browserify the code
Launch the browser organ.

At the end of this part your system's folder organization will be:

1. Create your spinal browser folder

Inside .browser_organs, make a new folder called finewine inside, create a file named index.html. we define our web page.

~/fine-wine-system/.browser_organ$ mkdir finewine
~/fine-wine-system/.browser_organ$ cd finewine
~/fine-wine-system/.browser_organ/finewine$ touch index.html
~/fine-wine-system/.browser_organ/finewine$ mkdir src
~/fine-wine-system/.browser_organ/finewine$ touch src/inspectFineWine.js

fine-wine-system/.browser_organ/finewine/index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>FineWine: SpinalCore Quickstart</title>
  <link rel="stylesheet"
        href="https://bootswatch.com/_vendor/bootstrap/dist/css/bootstrap.min.css">
</head>

<body>
  <div style="margin-top: 100px; margin-left: auto; margin-right: auto; width: 300px">
    <div class="row"
         style="text-align: center;">
      <div class="col-lg-offset-4">
        <h1>FineWine</h1>
        <p>This simple IoT system will let you know whenever the temperature at your
          wine cave is not between 10°C and 16°C. Cheers!</p>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-offset-4">
        <hr />
      </div>
    </div>
    <div class="row">
      <div class="col-lg-offset-4"
           style="width: 100%">
        <div class="bs-component">
          <div class="alert alert-success"
               id="wine_temp_container">
            <div style="font-size: 100px; text-align: center;">
              <strong id="wine_temp">0</strong>°C</div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- SpinalCore SDK -->

  <script type="text/javascript"
          src="finewine/bundle.js">
  </script>
  <script>
    FileSystem.CONNECTOR_TYPE = "Browser";
  </script>
</body>

</html>

2. Creates and synchronize an instance with Javascript

src/inspectFineWine.js

// 1
const spinalCore = require("spinal-core-connectorjs");

// 2
console.log("Configuration Environment not found, using default config");
process.env.SPINALHUB_PORT = 7777;
process.env.SPINALHUB_IP = "127.0.0.1";
process.env.SPINAL_USER_ID = 168;
process.env.SPINAL_PASSWORD = "SPINAL_PASSWORD"; // you will find it in th file .config.json  (spinalcom connection configuration file)

const conn = spinalCore.connect(
  `http://${process.env.SPINAL_USER_ID}:${process.env.SPINAL_PASSWORD}@${
    process.env.SPINALHUB_IP
  }:${process.env.SPINALHUB_PORT}/`
);

// Load avatar
spinalCore.load(conn, "myCellar", function(myCellar) {
  console.log("Model loaded!");
  updateView(myCellar);
});

// Listen to changes in the avatar and update view
function updateView(myCellar) {
  myCellar.bind(function() {
    if (myCellar.temperature.has_been_modified()) {
      var new_temp = parseFloat(myCellar.temperature.get()).toFixed(1);
      document.getElementById("wine_temp").innerHTML = new_temp;
    }
    if (myCellar.danger.has_been_modified()) {
      var danger = myCellar.danger.get();
      if (danger)
        document.getElementById("wine_temp_container").className =
          "alert alert-danger";
      else
        document.getElementById("wine_temp_container").className =
          "alert alert-success";
    }
  });
}

3. Browserify the code

You need to install browserify package through npm, if is not installed yet.

npm install browserify

And browserify the code with this command :

~/fine-wine-system/.browser_organ/finewine$ ../../node_modules/.bin/browserify src/inspectFineWine.js -o bundle.js

4. Launch the browser organ.

You have everything you need. You can check that everything is working by running the PM2 process file automatically generated:

~/fine-wine-system$ pm2 start launch.config.js

PM2 will automatically start the Spinal Hub and the organs.

Browser organ are little different than other organ, they provide a web page with his own route. Name of the folder in .browser_organs correspond to the route in your browser.

Base URL:

http://localhost:7777/html/

Your browser organ runs on this page:

http://localhost:7777/html/finewine

After this installation, only SpinalHub is running on port 7777. SpinalHub containes a web server that provides your browser organ. Here is the architecture of the system you have after this first install:

Browser not supported