drawing-board .json

{
  "alias": "drawing_board",
  "name": "drawing board",
  "image": null,
  "description": null,
  "descriptor": {
    "type": "timeseries",
    "sizeX": 7.5,
    "sizeY": 3,
    "resources": [
      {
        "url": "http://leimi.github.io/drawingboard.js/bower_components/drawingboard.js/dist/drawingboard.min.css"
      },
      {
        "url": "http://leimi.github.io/drawingboard.js/bower_components/drawingboard.js/dist/drawingboard.min.js"
      }
    ],
    "templateHtml": "<div id=\"board\" style=\"width:1500px;height:900px;\"></div>",
    "templateCss": "#container {\n    overflow: scroll;\n}\n\n\n",
    "controllerScript": "/****************************************************************************\n * \n * 用法：为仪表板数据源指定任意一设备，遥测名指定为“draw_event”\n * \n * Usage: Specify any device for the dashboard data source, and specify the \n * telemetry name as \"draw_event\"\n * \n****************************************************************************/\n\nfunction uuid() {  \n    var s = [];  \n    var hexDigits = \"0123456789abcdef\";  \n    for (var i = 0; i < 36; i++) {  \n        s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);  \n    }  \n    s[14] = \"4\";  // bits 12-15 of the time_hi_and_version field to 0010  \n    s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);  // bits 6-7 of the clock_seq_hi_and_reserved to 01  \n    s[8] = s[13] = s[18] = s[23] = \"-\";  \n    var uuid = s.join(\"\");  \n    return uuid;  \n}  \n\nself.onInit = function() {\n    console.log('drawingboard init', self, $('#board'));\n    self.ctx.$scope.session = uuid();\n    self.ctx.$scope.drawId = 0;\n    self.ctx.$scope.min_ts = Number.MAX_SAFE_INTEGER;\n    self.ctx.$scope.max_ts = -1;\n    self.ctx.$scope.points = [];\n    self.ctx.$scope.resetting = false;\n    self.ctx.$scope.navigating = false;\n    \n    // 解决相同仪表板部件id不能相同\n    let boardId = self.ctx.$scope.session;\n    self.ctx.$container.find('#board').attr('id', boardId);\n    self.ctx.$scope.board = new DrawingBoard.Board(\n        boardId, {\n            controls: [\n                'Color',\n                'Size',\n                'DrawingMode',\n                'Navigation',\n                'Download'\n            ],\n            droppable: true,\n            webStorage: false\n        });\n    self.ctx.$scope.historyPosition = self.ctx.$scope.board.history.position;\n    \n    self.ctx.$scope.fill = function(params) {\n        console.log('fill', params);\n        let color = self.ctx.$scope.board.ctx.strokeStyle;\n        self.ctx.$scope.board.ctx.strokeStyle = params.color;\n\t\tself.ctx.$scope.board.fill({\n\t\t    coords: params.coords\n\t\t});\n        self.ctx.$scope.board.ctx.strokeStyle = color;\n    }\n    \n    self.ctx.$scope.stroke = function(params) {\n        let color = self.ctx.$scope.board.ctx.strokeStyle;\n        let lineWidth = self.ctx.$scope.board.ctx.lineWidth;\n        self.ctx.$scope.board.ctx.strokeStyle = params.color;\n        self.ctx.$scope.board.ctx.lineWidth = params.lineWidth;\n\t\tself.ctx.$scope.board.ctx.beginPath();\n    \tself.ctx.$scope.board.ctx.moveTo(params.points[0].x, params.points[0].y);\n        for (let p of params.points) {\n    \t\tself.ctx.$scope.board.ctx.lineTo(p.x, p.y);\n        }\n\t\tself.ctx.$scope.board.ctx.stroke();\n        self.ctx.$scope.board.ctx.lineWidth = lineWidth;\n        self.ctx.$scope.board.ctx.strokeStyle = color;\n    }\n    \n    self.ctx.$scope.processFillEvent = function(event) {\n        self.ctx.$scope.sendEvent({\n            name: 'fill',\n            coords: event.coords,\n            color: self.ctx.$scope.board.color\n        });\n    }\n    \n    self.ctx.$scope.sendEvent = function(cmd) {\n        let telemetry = {\n            draw_event: {\n                cmd: cmd,\n                drawId: ++self.ctx.$scope.drawId,\n                userId: self.ctx.currentUser.userId,\n                session: self.ctx.$scope.session\n            }\n        };\n        let entityId = self.ctx.datasources[0].entity.id.id;\n        self.ctx.http.post(`api/plugins/telemetry/DEVICE/${entityId}/timeseries/ANY`, \n            telemetry, \n            {\n                'headers': {\n                    'content-type': 'application/json',\n                    'X-Authorization': 'bearer ' + localStorage.getItem('jwt_token')\n                }\n            }).subscribe(() => {\n                console.log('send', telemetry);\n            });\n    }\n    \n    self.ctx.$scope.board.ev.bind('board:startDrawing', function(event) {\n        // reset之后该事件不触发\n        console.log('board:startDrawing', self.ctx.$scope.board.mode);\n        self.ctx.$scope.navigating = true;\n        if (self.ctx.$scope.board.mode !== 'filler') {\n            self.ctx.$scope.points.push(event.coords);\n        }\n    });\n    \n    self.ctx.$scope.board.ev.bind('board:drawing', function(event){\n        if (!self.ctx.$scope.board.isDrawing || self.ctx.$scope.board.mode === 'filler') return;\n        self.ctx.$scope.navigating = true;\n        self.ctx.$scope.points.push(event.coords);\n    });\n    \n    self.ctx.$scope.board.ev.bind('board:stopDrawing', function(event) {\n        console.log('board:stopDrawing', self.ctx.$scope.board.mode);\n        self.ctx.$scope.navigating = false;\n        if (self.ctx.$scope.board.mode === 'filler') {\n            self.ctx.$scope.processFillEvent(event);\n        } else {\n            // self.ctx.$scope.points.push(event.coords);\n            self.ctx.$scope.sendEvent({\n                name: 'stroke',\n                points: self.ctx.$scope.points,\n                color: self.ctx.$scope.board.mode === 'pencil' ? self.ctx.$scope.board.color : 'white',\n                lineWidth: self.ctx.$scope.board.ctx.lineWidth\n            });\n            self.ctx.$scope.points = [];\n        }\n    });\n    \n    self.ctx.$scope.board.ev.bind('historyNavigation', function(event) {\n        console.log('historyNavigation', self.ctx.$scope.navigating,  self.ctx.$scope.historyPosition, self.ctx.$scope.board.history.position);\n        if (!self.ctx.$scope.navigating) {\n            if (self.ctx.$scope.historyPosition > self.ctx.$scope.board.history.position){\n                self.ctx.$scope.sendEvent({\n                    name: 'goback'\n                });\n            } else if (self.ctx.$scope.historyPosition < self.ctx.$scope.board.history.position) {\n                self.ctx.$scope.sendEvent({\n                    name: 'goforth'\n                });\n            }\n        }\n        self.ctx.$scope.historyPosition = self.ctx.$scope.board.history.position;\n    });\n    \n    self.ctx.$scope.board.ev.bind('board:reset', function(opts) {\n        if (!self.ctx.$scope.resetting) {\n            self.ctx.$scope.sendEvent({\n                name: 'reset',\n                opts\n            });\n        }\n    })\n}\n\nself.onDataUpdated = function() {\n    if (self.ctx.data.length > 0 && self.ctx.data[0].data.length > 0) {\n        let updated = 0;\n        for (let t of self.ctx.data[0].data) {\n            let data = t[1], ts = t[0];\n            if ((typeof data === \"string\") && data[0] === \"{\" && data[data.length - 1] == \"}\"\n                && (ts > self.ctx.$scope.max_ts || ts < self.ctx.$scope.min_ts)) {\n                data = JSON.parse(data);\n                if (ts > self.ctx.$scope.max_ts) {\n                    self.ctx.$scope.max_ts = ts;\n                }\n                if (ts < self.ctx.$scope.min_ts) {\n                    self.ctx.$scope.min_ts = ts;\n                }\n                if (data.session !== self.ctx.$scope.session) {\n                    console.log('receive', data);\n                    if (data.cmd.name === 'stroke') {\n                        self.ctx.$scope.stroke(data.cmd);\n                        updated++;\n                    } else if (data.cmd.name === 'fill') {\n                        self.ctx.$scope.fill(data.cmd);\n                        updated++;\n                    } else if (data.cmd.name === 'goback') {\n                        self.ctx.$scope.navigating = true;\n                        self.ctx.$scope.board.goBackInHistory();\n                        self.ctx.$scope.navigating = false;\n                    } else if (data.cmd.name === 'goforth') {\n                        self.ctx.$scope.navigating = true;\n                        self.ctx.$scope.board.goForthInHistory();\n                        self.ctx.$scope.navigating = false;\n                    } else if (data.cmd.name === 'reset') {\n                        self.ctx.$scope.resetting = true;\n                        self.ctx.$scope.board.reset(data.cmd.opts);\n                        self.ctx.$scope.resetting = false;\n                    }\n                }\n            }\n        }\n        if (updated > 0) {\n            self.ctx.$scope.navigating = true;\n            self.ctx.$scope.board.saveHistory();\n            self.ctx.$scope.navigating = false;\n        }\n    }\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        minDataKeys: 1\n    };\n};\n\nself.onResize = function() {\n}\n\nself.onDestroy = function() {}",
    "settingsSchema": "{}",
    "dataKeySettingsSchema": "{}\n",
    "defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Random\",\"color\":\"#2196f3\",\"settings\":{},\"_hash\":0.15479322438769105,\"funcBody\":\"var value = prevValue + Math.random() * 100 - 50;\\nvar multiplier = Math.pow(10, 2 || 0);\\nvar value = Math.round(value * multiplier) / multiplier;\\nif (value < -1000) {\\n\\tvalue = -1000;\\n} else if (value > 1000) {\\n\\tvalue = 1000;\\n}\\nreturn value;\"}]}],\"timewindow\":{\"realtime\":{\"timewindowMs\":60000}},\"showTitle\":true,\"backgroundColor\":\"#fff\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"8px\",\"settings\":{},\"title\":\"drawing board\"}"
  }
}