Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.


Panel
titleGoal of this tutorial

Anchor
1
1

Increase Spinal-system : “button-system”

After the Getting Started & Getting Started Extended, you may have a Spinal-system called
button-system with some models and organs. We will use it to create an intelligent system with
more process in our system. We add viewer into our system, use our differents organs and
display them into the viewer. If you don’t know what is a viewer or what is drive, check
utilities : drive, viewer. If you don’t follow these step to install drive & viewer, you will not be
able to continue this tutorial.
Image Removed
Actually we work in admin environment. This is an user manager environment and usually
we don’t work with sensor and data. That’s why we have a drive environment to share your
list and give some specific data for specific user. We have 3 basic user and you can create
some user from admin panel. We always work with admin user and we will continue but you
can do the same with another user.
npm i https

In this tutorial we will introduce the "browser organ" with a user interface: the drive and the viewer.

System architecture:
Image Added


Panel
titleRequirements

For this tutorial you must have done the Basic Automate Tutorial


Panel
titleSet up the drive

Anchor
2
2

A. Installation

First we need to install the Spinalcom Drive :

Code Block
languagebash
themeDJango
~/equipment-system$ npm i -s https://github.com/spinalcom/spinal-browser-drive

B. Share the Automate file

We're going to share the file "Automate" so, as a standard user, you can access your data in your drive.

First right click on the file "Automate" and choose share.

Image Added


Then give read, write and share rights to admin in the menu that appeared.

Image Added

To access the drive just change the url to http://localhost:7777/html/drive

Go in the folder "shared_with_me" and you should see the file Automate.


Panel
titleDiscover the viewer

Anchor
3
3

Now we will install the Spinal Viewer.

You can have more informations to how to setup the Autodesk Forge account and import a 3D file (rvt, ifc, etc...) in our drive here.


Code Block
languagebash
themeDJango
$ npm install -s https://github.com/spinalcom/spinal-browser-viewer
.git



Share your automate & create your digital twin

To give our list to an user, just do a right click and share the list to the user “admin”.
To see if everything is fine just open drive panel and go into the folder “share with me”.

Image Removed

Image Removed

Panel
titleShare your automate & create your digital twin
Anchor
22
Panel
titleCreate a data model
Anchor
33
Panel
titleCreate our new virtualButton organ
Anchor
44
Panel
titleLaunch the system
Anchor
55
Conclusion
Install your first plugin

Anchor
4
4

Now that you've seen the basics, let's try to install a plugin. Download and rename this example:

Code Block
languagebash
themeDJango
~/button-system$ git clone https://gist.github.com/Diclah/2887ee1bcf1353d9615a1dcf4c6a0128
~/button-system$ mv 2887ee1bcf1353d9615a1dcf4c6a0128 spinal-env-viewer-plugin-sample

Don't forget to rename it in its package.json.

spinal-env-viewer-plugin-sample/package.json

Code Block
languagejs
themeDJango
firstline2
linenumberstrue
  "name": "spinal-env-viewer-plugin-sample",

Now install it:

Code Block
languagebash
themeDJango
~/button-system$ npm i -s spinal-env-viewer-plugin-sample

Edit or create .config_env/viewer.json and add your new plugin to the list of viewer plugins.

.config_env/viewer.json

Code Block
languagejs
themeDJango
linenumberstrue
{
  "spinal-env-viewer-plugin-sample": "1.0.0"
}

Now use create_viewer_env binary to configure the viewer.

Code Block
languagebash
themeDJango
~/button-system$ ./node_modules/.bin/create_viewer_env

Reload the spinal viewer and the plugin should appear in the form of a button.

Image Added

Once you press it a small window will appear.

Image Added


Panel
titleModify your plugin

Anchor
5
5

This first plugin isn't really impressive, let's improve it. We're going to make it display the equipments from our Automate list.

To modify it, go to spinal-env-viewer-plugin-sample.

spinal-env-viewer-plugin-sample/testExtention.vue

Code Block
languagejs
themeDJango
linenumberstrue
<template>
<!-- 1: Add an md-element -->
  <md-content class="container md-scrollbar">
    <div>
      hey {{testHello}} - {{count}}
      <md-button @click="getSelection">
        TEST GET SELECTION
      </md-button>
      <md-button @click="logForgeFile">
        TEST GET ForgeFile
      </md-button>
    </div>
<!-- 2: Display the id, name, hydrometry, temperature and state of all equipments in the list -->
    <md-table>
      <md-table-row>
        <md-table-cell>Id</md-table-cell>
        <md-table-cell>Name</md-table-cell>
        <md-table-cell>Hygrometry</md-table-cell>
        <md-table-cell>Temperature</md-table-cell>
     </md-table-row>
      <md-table-row v-for="item in this.list"
                    :key="item._server_id">
        <md-table-cell>{{item.id.get()}}</md-table-cell>
        <md-table-cell>{{item.name.get()}}</md-table-cell>
        <md-table-cell>{{item.hygrometry.get()}}</md-table-cell>
        <md-table-cell>{{item.temperature.get()}}</md-table-cell>
      </md-table-row>
    </md-table>
  </md-content>
</template>

<script>
function loop(func) {
  func();
  setTimeout(() => {
    loop(func);
  }, 1000);
}

// 3: Load Automate from the drive and fill the list with its elements
function loadList() {
  this.spinalSystem.load("/__users__/admin/shared_with_me/Automate").then(
    automate => {
      this.equip = automate.sensors;
      for (let i = 0; i < automate.sensors.length; i++) {
        this.list.push(automate.sensors[i]);
      }
    },
    () => {
      console.log("error: could not load Automate");
    }
  );
}

export default {
  name: "testExtention",

  data() {
	this.spinalSystem;
	this.viewer;
    this.equip;
    return {
      testHello: "HELLO WORLD",
      count: 0,
// 4: The list array which will contain the equipments
      list: []
    };
  },
  methods: {
    getSelection: function() {
      let selection = this.viewer.getSelection();
      console.log(selection);
    },
    logForgeFile: function() {
      this.spinalSystem.getModel().then(forgefile => {
        console.log(forgefile);
      });
    }
  },
  created() {
    this.spinalSystem = window.spinal.spinalSystem;
    this.viewer = window.spinal.ForgeViewer.viewer;
  },
  mounted() {
// 5: Call to loadList
	loadList.call(this);

    let vm = this;
    loop(() => {
      vm.count += 1;
    });
  }
};
</script>

<style>
/* 6: Create the container style */
.container {
  height: calc(100% - 48px);
  overflow-y: auto;
  box-sizing: border-box;
}
</style>

Don't forget to execute ./node_modules/.bin/create_viewer_env and to reload spinal-env-viewer-plugin-sample or your changes won't show.

Image Added


Conclusion


In this tutorial you learned:

  • how to use the spinal drive
  • how to use the spinal viewer
  • how to install and modify your spinal viewer plugin


This tutorial will be continued in /wiki/spaces/DOC/pages/42926106.