Versions Compared

Old Version 9

changes.mady.by.user auriac (Unlicensed)

Saved on

compared with

New Version 10

changes.mady.by.user auriac (Unlicensed)

Saved on

Key

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

Table of contents

  1. Goal
  2. Set up the drive
  3. Discover the viewerGetting started extended to viewer 1
  4. Install your first plugin
  5. Getting started extended to viewer 1


Quick navigation

Child pages (Children Display)
alltrue
pageTutorials


Panel
titleGoal

Anchor
1
1

In this tutorial you will be introduced to new browser organ with an user interface: the drive and the viewer.

System architecture:


Panel
titleSet up the drive

Anchor
2
2

A. Installation

First we need to the Spinalcom Drive:

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

B. Share Automate to drive

We're going to share Automate to drive to allow drive to use it.

First right click on automate and choose share.


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

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 Automate.


Panel
titleDiscover the viewer

Anchor
3
3

Discover the viewer in this utility: Viewer.


Panel
titleInstall plugin viewer

Anchor
4
4

Download plugin, renameNow 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

edit 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 spinal-env-viewer-plugin-sample

edit .config.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"
}

config viewer:Now use create_viewer_env binary to configure the viewer.

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

reload Reload the spinal viewer => plugin should appearand the plugin should appear in the form of a button.

Image Added

Once you press it a small window will appear.

Image Added


Panel
titleEdit plugin viewer

Anchor
5
5

Load list in mounted, display list in template, create .container in style: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>Hydrometry</md-table-cell>
        <md-table-cell>Temperature</md-table-cell>
        <md-table-cell>Pressed</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.hydrometry.get()}}</md-table-cell>
        <md-table-cell>{{item.temperature.get()}}</md-table-cell>
        <md-table-cell>{{item.pressed.get()}}</md-table-cell>
      </md-table-row>
    </md-table>
  </md-content>
</template>

<script>
function loop(func) {
  func();
  setTimeout(() => {
    loop(func);
  }, 1000);
}
var spinalSystem = window.spinal.spinalSystem;
var viewer = window.spinal.ForgeViewer.viewer;

export default {
  name: "testExtention",

  data() {
    return {
      testHello: "HELLO WORLD",
      count: 0,
// 3: The list array which will contain the equipments
      list: []
    };
  },
  methods: {
    getSelection: function() {
      let test = viewer.getSelection();
      console.log(test);
    },
    logForgeFile: function() {
      spinalSystem.getModel().then(forgefile => {
        console.log(forgefile);
      });
    }
  },
  mounted() {
// 4: Load Automate from the drive and fill the list with its elements
    spinalSystem.load("/__users__/admin/shared_with_me/Automate").then(
      automate => {
        for (let i = 0; i < automate.equipments.length; i++) {
          this.list.push(automate.equipments[i]);
        }
      },
      () => {
        console.log("error: could not load Automate");
      }
    );
    let vm = this;
    loop(() => {
      vm.count += 1;
    });
  }
};
</script>

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

show how it should lookDon'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