@operato/scene-indoor-map 0.0.16

package/@types/global/index.d.ts

@@ -0,0 +1 @@
+declare module '*.png'

package/CHANGELOG.md

@@ -0,0 +1,16 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+### [0.0.16](https://github.com/things-scene/operato-scene/compare/v0.0.15...v0.0.16) (2021-12-09)
+
+
+### :rocket: New Features
+
+* add indoor-map and gauge component ([35d8a75](https://github.com/things-scene/operato-scene/commit/35d8a75f7d691dd23ea299fd772b79d19eec5d2f))
+
+
+### :bug: Bug Fix
+
+* upgrade [@operato](https://github.com/operato) dependencies ([92985c7](https://github.com/things-scene/operato-scene/commit/92985c76d2b7e6d3941c2c809a85b3676a579b0e))

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Hearty, Oh
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,15 @@
+# things-scene-indoor-map
+
+## build
+
+`$ yarn build`
+
+| type | filename                      | for            | tested |
+| ---- | ----------------------------- | -------------- | ------ |
+| UMD  | things-scene-indoor-map.js    | modern browser | O      |
+| UMD  | things-scene-indoor-map-ie.js | ie 11          | O      |
+| ESM  | things-scene-indoor-map.mjs   | modern browser | O      |
+
+## publish
+
+`$ yarn publish`

package/demo/imu-mqtt-node/imu-publisher.js

@@ -0,0 +1,66 @@
+// https://learn.sparkfun.com/tutorials/9dof-razor-imu-m0-hookup-guide
+var SerialPort = require('serialport');
+var mqtt = require('mqtt')
+var client;
+
+var port = new SerialPort('/dev/tty.usbmodem141141', function (err) {
+  if (err)
+    return console.log('Error: ', err.message);
+});
+
+var values = [];
+var length = 0;
+var readonce = false;
+var initialized = false;
+var connected = false;
+
+port.on('data', function (data) {
+  values = data.toString('utf8').split(',').map(v => Number(v.trim()));
+  length = values.length;
+
+  if(!readonce) {
+    readonce = true;
+    init();
+    client  = mqtt.connect('mqtt://localhost:1883');
+    client.on('connect', function () {
+      connected = true;
+      console.log('connected');
+    })
+  }
+
+  if(initialized && connected) {
+    // client.publish('imu', data.toString('utf8'));
+    client.publish('imu', JSON.stringify({
+      yaw: values[5] * 0.0174533,
+      pitch: values[6] * 0.0174533,
+      roll: values[7] * 0.0174533
+    }));
+  } else {
+    // console.log('Data:', data.toString('utf8'));
+  }
+});
+
+function init() {
+  function setOptions(option, on) {
+    return function() {
+      var before = length;
+      port.write(option, function(err) {
+        setTimeout(function() {
+          if((on && before > length) || (!on && before < length))
+            port.write(option)
+        }, 100);
+      })
+    }
+  }
+
+  // a, g, m을 OFF시키고, q, e를 ON 시킴.
+  setTimeout(setOptions('a', false), 100);
+  setTimeout(setOptions('g', false), 300);
+  setTimeout(setOptions('m', false), 500);
+  setTimeout(setOptions('q', true), 700);
+  setTimeout(setOptions('e', true), 900);
+}
+
+setTimeout(function() {
+  initialized = true
+}, 1100);

package/demo/imu-mqtt-node/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "imu-mqtt-node",
+  "version": "1.0.0",
+  "description": "",
+  "main": "test.js",
+  "dependencies": {
+    "mqtt": "^2.11.0",
+    "serialport": "^5.0.0"
+  },
+  "devDependencies": {},
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC"
+}

package/demo/index-camera.html

@@ -0,0 +1,108 @@
+<!doctype html>
+<!--
+@license
+Copyright © HatioLab Inc. All rights reserved.
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
+    <title>things-scene-camera Demo</title>
+    <script src="../../webcomponentsjs/webcomponents-lite.min.js"></script>
+
+    <link rel="import" href="../../things-scene-viewer/things-scene-viewer.html">
+    <link rel="import" href="../../things-scene-modeler/things-scene-properties.html">
+    <link rel="import" href="../../things-scene-mqtt/things-scene-mqtt.html">
+
+    <link rel="import" href="./things-scene-indoor-map.html">
+    <link rel="import" href="../../things-scene-mqtt/things-scene-mqtt.html">
+
+    <style is="custom-style">
+
+    things-scene-viewer {
+      display: block;
+      width: 100%;
+      height: 500px;
+    }
+
+    </style>
+  </head>
+  <body unresolved>
+
+    <template is="dom-bind" id="app">
+      <p>An example of <code>&lt;things-scene-camera&gt;</code>:</p>
+
+      <things-scene-viewer id='scene'
+                           scene='{{scene}}'
+                           selected='{{selected}}'
+                           model='[[model]]'
+                           mode="0">
+        <things-scene-layer type="selection-layer"></things-scene-layer>
+        <things-scene-layer type="modeling-layer"></things-scene-layer>
+        <things-scene-handler type="text-editor"></things-scene-handler>
+        <things-scene-handler type="move-handler"></things-scene-handler>
+      </things-scene-viewer>
+
+      <things-scene-properties scene="[[scene]]"
+                               selected="[[selected]]"
+                               model="{{target}}"
+                               bounds="{{bounds}}">
+        <fieldset class="same-width">
+          <legend>Camera Properties</legend>
+          <div>
+            <label>yaw</label>
+            <input type="number" value-as-number="{{target.yaw::change}}"/>
+            <label>pitch</label>
+            <input type="number" value-as-number="{{target.pitch::change}}"/>
+            <label>roll</label>
+            <input type="number" value-as-number="{{target.roll::change}}"/>
+          </div>
+         </div>
+
+        </fieldset>
+      </things-scene-properties>
+
+    </template>
+
+    <script>
+      window.addEventListener('WebComponentsReady', function(e) {
+        var app = document.querySelector('#app')
+
+        app.model = {
+          width:1000,
+          height: 1000,
+          components: [{
+            id: "hatio-imu",
+            type: 'camera',
+            id: 'imu',
+            left: 100,
+            top: 100,
+            width: 600,
+            height: 400,
+            lineWidth: 1,
+            strokeStyle: 'black',
+            fillStyle: 'yellow',
+            yaw: 0.2,
+            pitch: 0.2,
+            roll: 0.2
+          }, {
+            type: 'mqtt',
+            left: -10,
+            top: -10,
+            width: 30,
+            height: 30,
+            hidden: true,
+            broker: 'test.mosquitto.org',
+            port: 8080,
+            topic: 'hatio-imu',
+            qos: 0,
+            clientId: 'MQTT-DEVICE-001',
+            retain: true,
+            format: 'JSON'
+          }]
+        }
+      });
+
+    </script>
+  </body>
+</html>

package/demo/index-gaussian.html

@@ -0,0 +1,184 @@
+<!doctype html>
+<!--
+@license
+Copyright © HatioLab Inc. All rights reserved.
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
+    <title>things-scene-gaussian Demo</title>
+    <script src="../../webcomponentsjs/webcomponents-lite.min.js"></script>
+
+    <link rel="import" href="../../things-scene-viewer/things-scene-viewer.html">
+    <link rel="import" href="../../things-scene-modeler/things-scene-properties.html">
+
+    <link rel="import" href="./things-scene-indoor-map.html">
+
+    <style is="custom-style">
+
+    things-scene-viewer {
+      display: block;
+      width: 100%;
+      height: 500px;
+    }
+
+    </style>
+  </head>
+  <body unresolved>
+
+    <template is="dom-bind" id="app">
+      <p>An example of <code>&lt;things-scene-gaussian&gt;</code>:</p>
+
+      <things-scene-viewer id='scene'
+                           scene='{{scene}}'
+                           selected='{{selected}}'
+                           model='[[model]]'
+                           mode="1">
+        <things-scene-layer type="selection-layer"></things-scene-layer>
+        <things-scene-layer type="modeling-layer"></things-scene-layer>
+        <things-scene-handler type="text-editor"></things-scene-handler>
+        <things-scene-handler type="move-handler"></things-scene-handler>
+      </things-scene-viewer>
+
+      <things-scene-properties scene="[[scene]]"
+                               selected="[[selected]]"
+                               model="{{target}}"
+                               bounds="{{bounds}}">
+        <fieldset class="same-width">
+          <legend>Camera Properties</legend>
+          <div>
+            <label>yaw</label>
+            <input type="number" value-as-number="{{target.yaw::change}}"/>
+            <label>pitch</label>
+            <input type="number" value-as-number="{{target.pitch::change}}"/>
+            <label>roll</label>
+            <input type="number" value-as-number="{{target.roll::change}}"/>
+          </div>
+         </div>
+
+        </fieldset>
+      </things-scene-properties>
+
+    </template>
+
+    <script>
+      window.addEventListener('WebComponentsReady', function(e) {
+        var app = document.querySelector('#app')
+
+        app.model = {
+          width:1000,
+          height: 1000,
+          components: [{
+            type: 'indoor-map',
+            left: 50,
+            top: 20,
+            width: 800,
+            height: 400,
+            fontSize: 80,
+            fontColor: '#000000',
+            lineWidth: 10,
+            activeIndex: 0,
+            components: [{
+              type: 'floor',
+              name: 'floor A',
+              fillStyle: 'orange',
+              width: 100,
+              height: 100,
+              depth: 100,
+              components: [{
+                type: 'beacon',
+                id: '1',
+                left: 0,
+                top: 0,
+                width: 100,
+                height: 100,
+                depth: 100,
+                fillStyle: 'red',
+                lineWidth: 4,
+                strokeStyle: 'black',
+                locked: true
+              }, {
+                type: 'beacon',
+                id: '2',
+                left: 100,
+                top: 300,
+                sheaf: 1,
+                width: 100,
+                height: 100,
+                depth: 100,
+                fillStyle: 'navy',
+                lineWidth: 1,
+                strokeStyle: 'black',
+                locked: true
+              }, {
+                type: 'beacon',
+                id: '3',
+                left: 200,
+                top: 0,
+                sheaf: 1,
+                width: 100,
+                height: 100,
+                depth: 100,
+                fillStyle: 'blue',
+                lineWidth: 4,
+                locked: true
+              }
+              , {
+                type: 'beacon',
+                id: '4',
+                left: 300,
+                top: 300,
+                sheaf: 1,
+                width: 100,
+                height: 100,
+                depth: 100,
+                fillStyle: 'blue',
+                lineWidth: 4,
+                locked: true
+              }, {
+                type: 'beacon',
+                id: '5',
+                left: 400,
+                top: 0,
+                sheaf: 1,
+                width: 100,
+                height: 100,
+                depth: 100,
+                fillStyle: 'blue',
+                lineWidth: 4,
+                locked: true
+              }, {
+                type: 'beacon',
+                id: '6',
+                left: 500,
+                top: 300,
+                sheaf: 1,
+                width: 100,
+                height: 100,
+                depth: 100,
+                fillStyle: 'blue',
+                lineWidth: 4,
+                locked: true
+              }, {
+                type: 'beacon',
+                id: '7',
+                left: 600,
+                top: 0,
+                sheaf: 1,
+                width: 100,
+                height: 100,
+                depth: 100,
+                fillStyle: 'blue',
+                lineWidth: 4,
+                locked: true
+              }
+            ]
+            }]
+          }]
+        }
+      });
+
+    </script>
+  </body>
+</html>

package/demo/index-indoor-map-property.html

@@ -0,0 +1,96 @@
+<!doctype html>
+<!--
+@license
+Copyright © HatioLab Inc. All rights reserved.
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
+    <title>things-scene-indoor-map-properties Demo</title>
+    <script src="../../webcomponentsjs/webcomponents-lite.min.js"></script>
+
+    <link rel="import" href="../../things-scene-viewer/things-scene-viewer.html">
+    <link rel="import" href="../../things-scene-viewer/things-scene-layer.html">
+    <link rel="import" href="../../things-scene-viewer/things-scene-handler.html">
+
+    <link rel="import" href="../../things-designer-elements/things-editor-properties.html">
+    <link rel="import" href="../../things-designer-elements/things-editor-property.html">
+
+    <link rel="import" href="./things-scene-indoor-map.html">
+
+  </head>
+  <body unresolved>
+
+    <template is="dom-bind" id="app">
+      <style is="custom-style">
+      textarea {
+          width: 600px;
+          height: 300px;
+      }
+
+      #target {
+        width: 300px;
+        height: 300px;
+        background: var(--theme-color, red);
+      }
+      </style>
+
+      <p>An example of <code>&lt;things-scene-indoor-map-properties&gt;</code>:</p>
+      <div>
+        <textarea spellcheck="false">[[propertyValueText]]</textarea>
+      </div>
+
+      <things-editor-properties id="properties"
+                                target="{{value}}"
+                                props="[[props]]">
+        <div>
+          <div>
+            <span id='add-floor' on-click="addFloor">+</span>
+          </div>
+
+          <template is="dom-repeat" items="[[floors]]">
+            <div>
+              <span>[[item.name]]</span>
+              <span>-</span>
+            </div>
+          </template>
+       </div>
+
+      </things-editor-properties>
+
+    </template>
+
+    <script>
+      window.addEventListener('WebComponentsReady', function(e) {
+        var app = document.querySelector('#app')
+
+        app.props = scene.Component.register('indoor-map').nature.props
+
+        app.value = {
+          activeIndex: 0
+        }
+
+        app.floors = [{
+          name: 'B1'
+        }, {
+          name: '1F'
+        }, {
+          name: '2F'
+        }]
+
+        app.$.properties.addEventListener('change', function(e) {
+          app.propertyValueText = JSON.stringify(app.value, "null", "\t");
+        })
+
+        app.$.properties.fire('change');
+
+        setInterval(function() {
+          app.set("value.depth", app.value.depth + 1);
+          app.propertyValueText = JSON.stringify(app.value, "null", "\t");
+        }, 1000)
+      })
+    </script>
+
+  </body>
+</html>