@operato/scene-mpi 1.3.7

package/src/indicator.ts

@@ -0,0 +1,638 @@
+const IMAGE = new URL('../../icons/indicator.png', import.meta.url).href
+
+import { Component, ComponentNature, RectPath, Shape } from '@hatiolab/things-scene'
+import SegmentDisplay from './segment-display'
+
+import {
+  onMouseDownMButton,
+  onMouseDownFButton,
+  onMouseDownCButton,
+  onMouseDownBigButton
+} from './indicator-user-action'
+
+import { onmessage } from './indicator-on-message'
+import Gateway from './gateway'
+
+const NATURE: ComponentNature = {
+  mutable: false,
+  resizable: true,
+  rotatable: true,
+  properties: [
+    {
+      type: 'string',
+      label: 'segment_role',
+      name: 'segments'
+    },
+    {
+      type: 'select',
+      label: 'button_color',
+      name: 'buttonColor',
+      property: {
+        options: [
+          {
+            display: 'BASIC',
+            value: '#0000'
+          },
+          {
+            display: 'YELLOW',
+            value: '#ff0'
+          },
+          {
+            display: 'GREEN',
+            value: '#0f0'
+          },
+          {
+            display: 'RED',
+            value: '#f00'
+          },
+          {
+            display: 'BLUE',
+            value: '#00f'
+          }
+        ]
+      }
+    },
+    {
+      type: 'select',
+      label: 'boot_flag',
+      name: 'boot_flag',
+      property: {
+        options: [
+          {
+            display: '',
+            value: ''
+          },
+          {
+            display: 'TRUE',
+            value: 'true'
+          },
+          {
+            display: 'FALSE',
+            value: 'false'
+          }
+        ]
+      }
+    },
+    {
+      type: 'select',
+      label: 'reply_target',
+      name: 'reply_target',
+      property: {
+        options: [
+          {
+            display: '',
+            value: ''
+          },
+          {
+            display: 'MQTT',
+            value: 'MQTT'
+          },
+          {
+            display: 'GraphQl',
+            value: 'GraphQl'
+          }
+        ]
+      }
+    }
+  ],
+  help: 'scene/component/indicator'
+}
+
+const WIDTH = 449
+const HEIGHT = 53
+
+const RECT_BUTTON_EDGE = 3
+
+export default class Indicator extends RectPath(Shape) {
+  lit = false
+  ledLit = false
+  store = {} as any
+  conf = {
+    seg_role: ['S', 'S'],
+    alignment: 'R',
+    btn_mode: 'S',
+    btn_intvl: 5,
+    bf_on_msg: '',
+    bf_on_msg_t: 1,
+    bf_on_delay: 1,
+    cncl_delay: 10,
+    blink_if_full: true,
+    off_use_res: false,
+    led_bar_mode: 'S',
+    led_bar_intvl: 5,
+    led_bar_brtns: 6
+  } as any
+  currentTask = 'ready'
+  cookedData: any = {}
+  readOnly?: boolean
+  version?: any
+
+  static _image: HTMLImageElement
+
+  static get image() {
+    if (!Indicator._image) {
+      Indicator._image = new Image()
+      Indicator._image.src = IMAGE
+    }
+
+    return Indicator._image
+  }
+
+  get colors(): { [key: string]: string } {
+    return {
+      R: '#f00',
+      G: '#0f0',
+      B: '#00f',
+      C: '#0ff',
+      M: '#f0f',
+      Y: '#ff0',
+      K: '#0000',
+      W: '#fff'
+    }
+  }
+
+  get btnModes() {
+    return {
+      BLINK: 'B', // 깜박
+      ALWAYS: 'S' // 항상
+    }
+  }
+
+  get tasks(): { [key: string]: string } {
+    return {
+      PICK: 'pick',
+      STOCK: 'stock',
+      FULL: 'full',
+      MODIFY: 'modify',
+      END: 'end',
+      DISPLAY: 'display',
+      READY: 'ready',
+      STRSHOW: 'strshow'
+    }
+  }
+
+  get alignmentOptions() {
+    return {
+      LEFT: 'L',
+      RIGHT: 'R'
+    }
+  }
+
+  get segmentRoles() {
+    return {
+      RELAY_SEQ: {
+        INITIAL: 'R',
+        KEY: 'org_relay'
+      },
+      BOXES: {
+        INITIAL: 'B',
+        KEY: 'org_box_qty'
+      },
+      PCS: {
+        INITIAL: 'P',
+        KEY: 'org_ea_qty'
+      }
+    }
+  }
+
+  get getConf() {
+    return this.conf
+  }
+
+  set setConf(conf: any) {
+    this.conf = conf
+  }
+
+  get gateway(): Gateway {
+    return this.root.findFirst('gateway') as Gateway
+    // var gateway = this.parent
+    // while (gateway.constructor.name !== ('Gateway' || 'Window')) {
+    //   gateway = gateway.parent
+    // }
+
+    // if (gateway.constructor.name === 'Window') return
+
+    // return gateway
+  }
+
+  get ledRect() {
+    return this.parent.findFirst('rect') || {}
+  }
+
+  dispose() {
+    super.dispose()
+  }
+
+  /**
+   *
+   * @param {array} args
+   */
+  setSegmentsState(args: any[]) {
+    var stateArr: any[] = []
+
+    var currentRole = this.store.seg_role ? this.store.seg_role : this.getConf.seg_role
+    currentRole.forEach((role: any) => {
+      var ele
+      args.forEach(arg => {
+        if (role == arg.role && (arg.value || arg.value >= 0)) {
+          ele = arg.value
+        }
+      })
+      stateArr.push(ele)
+    })
+    var stateStr = stateArr.join(',')
+    this.setState('segments', stateStr)
+  }
+
+  /**
+   *
+   * @param {object} data
+   */
+  jobLightOn(data: any, lit = true) {
+    var toutDisplayMessage = (indicator: Indicator) => {
+      indicator.displayMessage(indicator.getConf.bf_on_msg, indicator.cookedData.buttonColor, false)
+      setTimeout(() => {
+        toutDelayBeforeLightOn(indicator)
+      }, indicator.getConf.bf_on_msg_t * 100)
+    }
+
+    var toutDelayBeforeLightOn = (indicator: Indicator) => {
+      indicator.lightOff()
+      setTimeout(() => {
+        indicator.lightOn(data, lit)
+      }, indicator.getConf.bf_on_delay * 100)
+    }
+
+    if (typeof this.getConf.bf_on_msg === 'string' && this.getConf.bf_on_msg.length > 0) {
+      toutDisplayMessage(this)
+    } else if (this.getConf.bf_on_delay > 0) {
+      toutDelayBeforeLightOn(this)
+    } else {
+      this.lightOn(data, lit)
+    }
+  }
+
+  /**
+   *
+   * @param {object} data
+   */
+  lightOn(data: any, lit = true) {
+    var sublen = 6 / this.getConf.seg_role.length
+    switch (this.getConf.alignment) {
+      case this.alignmentOptions.LEFT:
+        {
+          let arr: any[] = []
+          Object.values(this.segmentRoles).forEach(role => {
+            if (data[role.KEY] || data[role.KEY] >= 0) {
+              var obj = {
+                role: role.INITIAL,
+                value: data[role.KEY]
+              }
+              arr.push(obj)
+            }
+          })
+          this.setSegmentsState(arr)
+        }
+        break
+      case this.alignmentOptions.RIGHT:
+      default:
+        {
+          let arr: any[] = []
+          Object.values(this.segmentRoles).forEach(role => {
+            if (data[role.KEY] || data[role.KEY] >= 0) {
+              var obj = {
+                role: role.INITIAL,
+                value: ('  ' + data[role.KEY]).substr(-sublen)
+              }
+              arr.push(obj)
+            }
+          })
+          this.setSegmentsState(arr)
+        }
+        break
+    }
+    if (data.buttonColor) this.setState('buttonColor', String(data.buttonColor))
+    this.lit = lit
+  }
+
+  lightOff() {
+    this.setState('segments', this.displays.length == 3 ? ',,' : ',')
+    this.setState('buttonColor', '#0000')
+
+    this.lit = false
+  }
+
+  /**
+   *
+   * @param {string} msg
+   * @param {string} color
+   */
+  displayMessage(msg: string, color = 'K', lit = true) {
+    var eachSegLen = this.displays[0].pattern.length
+    var allSegLen = eachSegLen * this.displays.length
+
+    var d = msg || this.getConf.bf_on_msg
+
+    switch (this.conf.alignment) {
+      case this.alignmentOptions.LEFT:
+        {
+          d = (d + '      ').substr(0, allSegLen)
+        }
+        break
+      case this.alignmentOptions.RIGHT:
+      default:
+        {
+          d = ('      ' + d).substr(-allSegLen)
+        }
+        break
+    }
+
+    var da = []
+
+    var i = 1
+    var startIdx = 0
+    while (i <= allSegLen) {
+      if (i % eachSegLen == 0) {
+        da.push(d.substr(startIdx, eachSegLen))
+        startIdx = i
+      }
+      i++
+    }
+    this.setState('segments', da.join(','))
+    this.setState('buttonColor', this.colors[color])
+    this.lit = lit
+  }
+
+  rectButtonContains(x: number, y: number, WRATE: number, HRATE: number) {
+    var left = 310 * WRATE
+    var top = 8 * HRATE
+    var width = 62 * WRATE
+    var height = 36 * HRATE
+
+    var extend = RECT_BUTTON_EDGE
+
+    return (
+      x < Math.max(left + width, left) + extend &&
+      x > Math.min(left + width, left) - extend &&
+      y < Math.max(top + height, top) + extend &&
+      y > Math.min(top + height, top) - extend
+    )
+  }
+
+  mfcButtonContains(x: number, y: number, WRATE: number, HRATE: number) {
+    var left = 38 * WRATE
+    var top = 14 * HRATE
+    var width = 17 * WRATE
+    var height = 25 * HRATE
+
+    var extend = RECT_BUTTON_EDGE
+    if (
+      x < Math.max(left + width, left) + extend &&
+      x > Math.min(left + width, left) - extend &&
+      y < Math.max(top + height, top) + extend &&
+      y > Math.min(top + height, top) - extend
+    ) {
+      return 'M'
+    }
+
+    var rx = 9 * WRATE
+    var ry = 9 * HRATE
+    var cx = 70 * WRATE
+    var cy = 17 * HRATE
+    var normx = (x - cx) / (rx * 2 - 0.5)
+    var normy = (y - cy) / (ry * 2 - 0.5)
+
+    if (normx * normx + normy * normy < 0.25) {
+      return 'F'
+    }
+
+    cx = 70 * WRATE
+    cy = 39 * HRATE
+    normx = (x - cx) / (rx * 2 - 0.5)
+    normy = (y - cy) / (ry * 2 - 0.5)
+
+    if (normx * normx + normy * normy < 0.25) {
+      return 'C'
+    }
+  }
+
+  onmousedown(e: MouseEvent, hint: any) {
+    var { left, top, width, height } = this.bounds
+
+    var WRATE = width / WIDTH
+    var HRATE = height / HEIGHT
+
+    var { x, y } = this.transcoordC2S(e.offsetX, e.offsetY)
+
+    if (this.rectButtonContains(x - left, y - top, WRATE, HRATE)) {
+      onMouseDownBigButton(this)
+    } else {
+      switch (this.mfcButtonContains(x - left, y - top, WRATE, HRATE)) {
+        case 'M':
+          onMouseDownMButton(this)
+          break
+        case 'F':
+          onMouseDownFButton(this)
+          break
+        case 'C':
+          onMouseDownCButton(this)
+          break
+        default:
+      }
+    }
+  }
+
+  get displays() {
+    var { width, height } = this.bounds
+
+    var WRATE = width / WIDTH
+    var HRATE = height / HEIGHT
+
+    var { segments = new Array(this.getConf.seg_role.length).join(',') } = this.state
+
+    return (segments as string).split(',', 3).map((value, idx, array) => {
+      var display = new SegmentDisplay(63 * WRATE, 28 * HRATE)
+
+      display.pattern = array.length == 2 ? '###' : array.length == 3 ? '##' : '###' // 3 넘는 건 안 함
+      display.displayAngle = 8
+      display.digitHeight = 20
+      display.digitWidth = 11
+      display.digitDistance = 6
+      display.segmentWidth = 2.5
+      display.segmentDistance = 0.2
+      display.segmentCount = SegmentDisplay.SevenSegment
+      display.cornerType = SegmentDisplay.SymmetricCorner
+      display.colorOn = idx == 0 ? '#007dfe' : idx == 1 ? '#fd0000' : '#fee400'
+      display.colorOff = '#2c2c2c'
+
+      display.setValue(value)
+
+      return display
+    })
+  }
+
+  _drawRectButton(context: CanvasRenderingContext2D, WRATE: number, HRATE: number, color: string) {
+    var w = 62 * WRATE
+    var h = 36 * HRATE
+    var r = Math.min(7 * WRATE, 7 * HRATE)
+    var edge = Math.floor(r / 2)
+    var highlight = Math.floor(r / 5)
+
+    if (w < 2 * r) r = w / 2
+    if (h < 2 * r) r = h / 2
+
+    context.beginPath()
+    context.moveTo(r, 0)
+    context.arcTo(w, 0, w, h, r)
+    context.arcTo(w, h, 0, h, r)
+    context.arcTo(0, h, 0, 0, r)
+    context.arcTo(0, 0, w, 0, r)
+
+    context.globalAlpha = 1
+    context.fillStyle = color
+    context.strokeStyle = color
+    context.lineWidth = edge - 2
+    context.fill()
+    context.stroke()
+    context.strokeStyle = 'black'
+    context.globalAlpha = 0.3
+    context.stroke()
+
+    context.beginPath()
+    context.moveTo(highlight, h - r)
+    context.arcTo(highlight, highlight, r, highlight, r - highlight)
+    context.lineTo(w - r, highlight)
+    context.strokeStyle = 'white'
+    context.globalAlpha = 0.6
+    context.lineWidth = highlight
+    context.stroke()
+
+    context.beginPath()
+    context.moveTo(w - r, highlight)
+    context.arcTo(w - highlight, highlight, w - highlight, r, r - highlight)
+    context.arcTo(w - highlight, h - highlight, w - r, h - highlight, r - highlight)
+    context.arcTo(highlight, h - highlight, highlight, h - r, r - highlight)
+
+    context.strokeStyle = 'white'
+    context.globalAlpha = 0.4
+    context.lineWidth = highlight
+    context.stroke()
+
+    context.globalAlpha = 1
+  }
+
+  _drawMFCButton(context: CanvasRenderingContext2D, WRATE: number, HRATE: number) {
+    context.textAlign = 'center'
+    context.textBaseline = 'middle'
+    context.font = `${Math.min(13 * WRATE, 13 * HRATE)}px Arial`
+
+    context.lineJoin = 'round'
+    var r = Math.min(7 * WRATE, 7 * HRATE)
+    var edge = Math.floor(r / 3)
+    // console.log('r', r, 'wrate', WRATE, 'hrate', HRATE, 'edge', edge)
+    context.lineWidth = edge
+
+    context.beginPath()
+    // context.ellipse(96 * WRATE, 27 * HRATE, 7 * WRATE, 7 * HRATE, 0, 0, 2 * Math.PI)
+    context.fillStyle = 'rgba(255, 0, 0, 0.0)'
+    context.strokeStyle = 'rgba(255, 0, 0, 0.0)'
+    context.strokeRect(38 * WRATE, 14 * HRATE, 17 * WRATE, 25 * HRATE)
+    context.fillRect(38 * WRATE, 14 * HRATE, 17 * WRATE, 25 * HRATE)
+    context.fill()
+
+    // context.fillStyle = 'black'
+    // context.fillText('M', 40 * WRATE, 27 * HRATE)
+
+    context.beginPath()
+    context.ellipse(70 * WRATE, 15 * HRATE, 9 * WRATE, 9 * HRATE, 0, 0, 2 * Math.PI)
+    context.fillStyle = 'rgba(255, 0, 0, 0.0)'
+    context.fill()
+
+    // context.fillStyle = 'white'
+    // context.fillText('F', 70 * WRATE, 17 * HRATE)
+
+    context.beginPath()
+    context.ellipse(70 * WRATE, 39 * HRATE, 9 * WRATE, 9 * HRATE, 0, 0, 2 * Math.PI)
+    context.fillStyle = 'rgba(255, 0, 0, 0.0)'
+    context.fill()
+
+    // context.fillStyle = 'white'
+    // context.fillText('C', 70 * WRATE, 39 * HRATE)
+  }
+
+  render(context: CanvasRenderingContext2D) {
+    var { left, top, width, height } = this.bounds
+
+    var color = this.state.buttonColor || '#0000'
+
+    var WRATE = width / WIDTH
+    var HRATE = height / HEIGHT
+
+    context.translate(left, top)
+    context.save()
+
+    context.beginPath()
+    this.drawImage(context, Indicator.image, 0, 0, width, height)
+
+    this._drawMFCButton(context, WRATE, HRATE)
+
+    var displays = this.displays
+
+    var myCursor = displays.length == 3 ? 1 : 0
+
+    context.translate((135 - myCursor * 12) * WRATE, 12 * HRATE)
+    displays[0].draw(context)
+
+    if (displays.length >= 2) {
+      context.translate((75 - myCursor * 25) * WRATE, 0)
+      displays[1].draw(context)
+    }
+
+    if (displays.length >= 3) {
+      context.translate((75 - myCursor * 25) * WRATE, 0)
+      displays[2].draw(context)
+    }
+
+    context.beginPath()
+
+    context.restore()
+    context.translate(310 * WRATE, 8 * HRATE)
+    this._drawRectButton(context, WRATE, HRATE, color)
+
+    context.beginPath()
+  }
+
+  onchangeData(after: any, before: any) {
+    super.onchangeData(after, before)
+
+    onmessage(this, after.data)
+  }
+
+  get hasTextProperty() {
+    return false
+  }
+
+  get nature() {
+    return NATURE
+  }
+
+  onButton() {
+    switch (this.currentTask) {
+      case this.tasks.END:
+        {
+          //  onMouseDownFButton(this);
+        }
+        break
+      case this.tasks.DISPLAY: {
+        return
+      }
+      default:
+        {
+          onMouseDownBigButton(this)
+        }
+        break
+    }
+  }
+}
+
+Component.register('indicator', Indicator)

package/src/reply-button.ts

@@ -0,0 +1,88 @@
+const reply = new URL('../../icons/reply-button.png', import.meta.url).href
+
+import { Component, ComponentNature, RectPath, Shape } from '@hatiolab/things-scene'
+
+import { consoleLogger } from './gateway-on-message'
+import Gateway from './gateway'
+
+export const buttons = [
+  {
+    icon: reply,
+    handler: onClickReply
+  }
+]
+
+const NATURE: ComponentNature = {
+  mutable: false,
+  resizable: true,
+  rotatable: true,
+  properties: [
+    {
+      type: 'string',
+      name: 'publisher',
+      label: 'publisher'
+    }
+  ],
+  help: 'scene/component/reply-button'
+}
+
+export default class ReplyButton extends RectPath(Shape) {
+  static _image?: HTMLImageElement
+
+  static get image() {
+    if (!ReplyButton._image) {
+      ReplyButton._image = new Image()
+      ReplyButton._image.src = reply
+    }
+
+    return ReplyButton._image
+  }
+
+  get publisher() {
+    if (this.state.publisher) {
+      return this.root.findById(this.state.publisher)
+    }
+  }
+
+  render(context: CanvasRenderingContext2D) {
+    var { left, top, width, height } = this.bounds
+
+    context.beginPath()
+
+    context.rect(left, top, width, height)
+
+    this.drawFill(context)
+    this.drawStroke(context)
+
+    this.drawImage(context, ReplyButton.image, left, top, width, height)
+  }
+
+  onmousedown(e: MouseEvent, hint: any) {
+    var button = this.buttonContains()
+    if (button) {
+      button.handler(this)
+    }
+  }
+
+  buttonContains() {
+    return buttons[0]
+  }
+
+  get nature() {
+    return NATURE
+  }
+}
+
+function onClickReply(button: Component) {
+  consoleLogger('onClickReply')
+
+  var gateways = button.root.findAll('gateway') as Gateway[]
+
+  gateways.forEach((gw, index) => {
+    gw.indicators.forEach(ind => {
+      ind.onButton()
+    })
+  })
+}
+
+Component.register('reply-button', ReplyButton)