@operato/scene-timer 0.0.11

package/helps/scene/component/duetimer.ko.md

@@ -0,0 +1,41 @@
+# duetimer
+
+세팅된 타임아웃값을 매초 카운트다운하는 컴포넌트이다.
+타임아웃값은 days, hours, minutes, seconds 로 모델링시에 정적으로 설정할 수 있으며,
+동적으로 설정하기 위해서는 실행중에 value 속성에 timeout(seconds)값을 설정하면 된다.
+
+카운트다운 과정의 format-run, format-stop 에 의한 결과값이 data 속성에 설정된다.
+
+또한, 듀타이머 컴포넌트는 심플한 수평형 프로그레스바의 표현기능을 제공한다.
+fill-color에 설정된 색상이 카운트다운에 따라 표현된다.
+
+![fill-color]
+
+[fill-color]: ../images/timer-fill-color.png
+
+## properties
+
+- due
+  - timestamp (UTC 기준으로 1970년 1월 1일 0시 0분 0초부터 현재까지 경과된 밀리 초) : 듀 타이머 컴포넌트의 종료시간 타임스탬프 값이다.
+  - 듀 타이머 컴포넌트의 value property 이므로, 듀 타이머의 value 속성(due)에 세팅값을 설정할 수 있다.
+  - getter: 타이머 종료시간을 가지고 있다.
+  - setter: 타이머 종료시간을 설정할 수 있다.
+- format-run
+  - string
+  - format : hh:mm:ss
+  - 카운트다운 결과 표현형식
+- format-stop
+  - string
+  - format : --:--:--
+  - 카운트다운이 종료되었을 때 표현형식
+- background color
+  - string, rgb color
+  - 컴포넌트의 배경 색상
+
+## hidden properties
+
+- countdown
+
+  - readonly
+  - number (seconds)
+  - 타이머 설정값 세팅 시점부터 카운트다운된 현재 값을 가지고 있다.

package/helps/scene/component/duetimer.md

@@ -0,0 +1,40 @@
+# duetimer
+
+this component that counts down the set timeout value every second.
+
+- To set statically, you can set during modeling, options in days, hours, minutes, and seconds.
+- To set it dynamically, set the timeout(seconds) value in the value property during execution.
+- The result value by format-run and format-stop of the countdown process is set in the data property.
+- In addition, the timer component provides a simple horizontal progress bar expression function, you can set fill style on color setting.
+
+  ![fill-color]
+
+  [fill-color]: ../images/timer-fill-color.png
+
+## properties
+
+- due
+
+  - timestamp (the number of milliseconds elapsed since January 1, 1970 00:00:00 UTC.) : due time
+  - this is value property for duetimer, you need to set value (timeout due) to this property
+  - getter: hold due time of the timer
+  - setter: settable due time of the timer
+
+- format-run
+  - string
+  - format : hh:mm:ss
+  - count down running format
+- format-stop
+  - string
+  - format : --:--:--
+  - count down format on stop
+- background color
+  - string, rgb color
+  - component background color
+
+## hidden properties
+
+- countdown
+  - readonly
+  - number (seconds)
+  - when timer set, count down will start automatically

package/helps/scene/component/duetimer.zh.md

@@ -0,0 +1,39 @@
+# DUE 计时器
+
+它是每秒对设置的时间值进行递减计数的组件。
+
+- 静态 ： 可以在建模时以天，小时，分钟和秒为单位静态设置时间值。
+- 动态 ： 在运行时在 value 属性中设置时间（seconds）值。
+- 在数据属性中设置倒计时过程的，按格式运行和按格式停止的结果值。
+- 时间格式， 停止格式在运行和结束时以对应的格式设置为data
+- 另外，计时器组件提供了简单的水平进度条功能。填充《填充颜色》中设置的颜色将会表示对应时间的进度条。
+
+  ![fill-color]
+
+  [fill-color]: ../images/timer-fill-color.png
+
+## 属性
+
+- due (截止时间）
+  - timestamp (以UTC时间为准从1970-01-01 0点0分0秒开始到现在为止的毫秒) : 是DUE计时器组件的结束时间的时间戳
+  - 因为是计时器的 value 属性, 可以把数据传递到 value 属性（due）中设置数据值
+
+- 时间格式，
+  - string
+  - format : hh:mm:ss
+  - 计时结果表现格式
+- 停止格式
+  - string
+  - format : --:--:--
+  - 计时结束后显示的时间格式
+- 背景颜色
+  - string, rgb color
+  - 组件背景颜色
+
+## 隐藏属性
+
+- countdown
+
+  - readonly
+  - number (seconds)
+  - 从设置定时器设置值开始，它就将当前值递减计数。

package/helps/scene/component/timer.ko.md

@@ -0,0 +1,64 @@
+# timer
+
+세팅된 타임아웃값을 매초 카운트다운하는 컴포넌트이다.
+타임아웃값은 days, hours, minutes, seconds 로 모델링시에 정적으로 설정할 수 있으며,
+동적으로 설정하기 위해서는 실행중에 value 속성에 timeout(seconds)값을 설정하면 된다.
+
+카운트다운 과정의 format-run, format-stop 에 의한 결과값이 data 속성에 설정된다.
+
+또한, 타이머 컴포넌트는 심플한 수평형 프로그레스바의 표현기능을 제공한다.
+fill-color에 설정된 색상이 카운트다운에 따라 표현된다.
+
+![fill-color]
+
+[fill-color]: ../images/timer-fill-color.png
+
+## properties
+
+- days
+  - number
+  - 타임아웃 날자 설정값(0- )
+- hours
+  - number
+  - 타임아웃 시간 설정값(0-23)
+- minutes
+  - number
+  - 타임아웃 분 설정값(0-59)
+- seconds
+  - number
+  - 타임아웃 초 설정값(0-59)
+- format-run
+  - string
+  - format : hh:mm:ss
+  - 카운트다운 결과 표현형식
+- format-stop
+  - string
+  - format : --:--:--
+  - 카운트다운이 종료되었을 때 표현형식
+- background color
+  - string, rgb color
+  - 컴포넌트의 배경 색상
+
+## hidden properties
+
+- timeout
+
+  - number (seconds)
+  - 타이머의 (초단위) 세팅 값이다.
+  - 타이머 컴포넌트의 value property 이므로, 타이머의 value 속성에 세팅값을 설정할 수 있다.
+
+    > ex) tap event에서 "set value to target component"옵션 사용, 아래 셈플은 class를 통한 데이터 전달 사용
+
+    ![button]
+
+    > ex) 데이터 공유 옵션에서 timer의 value로 데이터 전달, 아래 셈플에서는 key를 사용한 데이터 전달 사용
+
+    ![databind]
+
+  [button]: ../images/rect-button.png
+  [databind]: ../images/timer-data-bind.png
+
+- countdown
+  - readonly
+  - number (seconds)
+  - 타이머 설정값 세팅 시점부터 카운트다운된 현재 값을 가지고 있다.

package/helps/scene/component/timer.md

@@ -0,0 +1,62 @@
+# timer
+
+this component that counts down the set timeout value every second.
+
+- To set statically, you can set during modeling, options in days, hours, minutes, and seconds.
+- To set it dynamically, set the timeout(seconds) value in the value property during execution.
+- The result value by format-run and format-stop of the countdown process is set in the data property.
+- In addition, the timer component provides a simple horizontal progress bar expression function, you can set fill style on color setting.
+
+  ![fill-color]
+
+  [fill-color]: ../images/timer-fill-color.png
+
+## properties
+
+- days
+  - number
+  - timeout days(0- )
+- hours
+  - number
+  - timeout hours(0-23)
+- minutes
+  - number
+  - timeout minutes(0-59)
+- seconds
+  - number
+  - timeout seconds(0-59)
+- format-run
+  - string
+  - format : hh:mm:ss
+  - count down running format
+- format-stop
+  - string
+  - format : --:--:--
+  - count down format on stop
+- background color
+  - string, rgb color
+  - component background color
+
+## hidden properties
+
+- timeout
+
+  - number (seconds)
+  - This is the value of the timer (in seconds).
+  - This is value property, you need to set timeout value to this property
+
+    > ex) on tap event use "set value to target component" option. blowing sample set target with class
+
+    ![button]
+
+    > ex) on data spread share data to timer's value, blowing sample set target value with key
+
+    ![databind]
+
+  [button]: ../images/rect-button.png
+  [databind]: ../images/timer-data-bind.png
+
+- countdown
+  - readonly
+  - number (seconds)
+  - when timer set, count down will start automatically

package/helps/scene/component/timer.zh.md

@@ -0,0 +1,63 @@
+# 计时器
+
+它是每秒对设置的时间值进行递减计数的组件。
+
+- 静态 ： 可以在建模时以天，小时，分钟和秒为单位静态设置时间值。
+- 动态 ： 在运行时在 value 属性中设置时间（seconds）值。
+- 在数据属性中设置倒计时过程的按格式运行和按格式停止的结果值。
+- 时间格式， 停止格式在运行和结束时以对应的格式设置为 data
+- 另外，计时器组件提供了简单的水平进度条功能。填充填充颜色中设置的颜色将会表示对应时间的进度条。
+
+  ![fill-color]
+
+  [fill-color]: ../images/timer-fill-color.png
+
+## 属性
+
+- 天
+  - number
+  - 计时日期配置(0- )
+- 时间
+  - number
+  - 计时时间配置(0-23)
+- 分
+  - number
+  - 计时分配置(0-59)
+- 秒
+  - number
+  - 计时秒配置(0-59)
+- 时间格式
+  - string
+  - format : hh:mm:ss
+  - 计时结果表现格式
+- 停止格式
+  - string
+  - format : --:--:--
+  - 计时结束后显示的时间格式
+- 背景颜色
+  - string, rgb color
+  - 组件背景颜色
+
+## 隐藏属性
+
+- timeout
+
+  - number (seconds)
+  - 计时器的 value 属性(秒).
+  - 因为是计时器的 value 属性, 可以把数据传递到 value 属性中
+
+    > ex) 在点击事件中选择"set value to target component", 使用 class 传递数据
+
+    ![button]
+
+    > ex) 在数据源的数据共享属性中将数据传递到计时器的 value 中, 使用(key)传递数据
+
+    ![databind]
+
+  [button]: ../images/rect-button.png
+  [databind]: ../images/timer-data-bind.png
+
+- countdown
+  - readonly： 只读属性
+  - number (seconds) 
+  - 从设置定时器设置值开始，它就将当前值递减计数。

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@operato/scene-timer",
+  "description": "Timer component for things-scene",
+  "license": "MIT",
+  "author": "heartyoh",
+  "version": "0.0.11",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "things-scene": true,
+  "publishConfig": {
+    "access": "public",
+    "@oprato:registry": "https://registry.npmjs.org"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/things-scene/operato-scene.git",
+    "directory": "packages/timer"
+  },
+  "scripts": {
+    "serve": "tsc && things-factory-dev",
+    "start": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds\"",
+    "build": "tsc",
+    "prepublish": "tsc",
+    "lint": "eslint --ext .ts,.html . --ignore-path .gitignore && prettier \"**/*.ts\" --check --ignore-path .gitignore",
+    "format": "eslint --ext .ts,.html . --fix --ignore-path .gitignore && prettier \"**/*.ts\" --write --ignore-path .gitignore",
+    "migration": "things-factory-migration"
+  },
+  "dependencies": {
+    "@hatiolab/things-scene": "^2.7.23"
+  },
+  "devDependencies": {
+    "@hatiolab/prettier-config": "^1.0.0",
+    "@hatiolab/things-scene": "^2.7.23",
+    "@operato/board": "^0.2.35",
+    "@things-factory/builder": "^4.0.10",
+    "@things-factory/operato-board": "^4.0.10",
+    "@typescript-eslint/eslint-plugin": "^4.33.0",
+    "@typescript-eslint/parser": "^4.33.0",
+    "@web/dev-server": "^0.1.28",
+    "concurrently": "^5.3.0",
+    "eslint": "^7.32.0",
+    "eslint-config-prettier": "^8.3.0",
+    "husky": "^4.3.8",
+    "lint-staged": "^10.5.4",
+    "prettier": "^2.4.1",
+    "tslib": "^2.3.1",
+    "typescript": "^4.5.2"
+  },
+  "prettier": "@hatiolab/prettier-config",
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.ts": [
+      "eslint --fix",
+      "prettier --write"
+    ]
+  },
+  "gitHead": "1421380ee3530169c280b01a21c81af8d1b9f9c4"
+}

package/src/duetimer.ts

@@ -0,0 +1,138 @@
+import { Component, Properties, RectPath, Shape, error } from '@hatiolab/things-scene'
+
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+import format from './libs/format'
+
+const NATURE = {
+  mutable: false,
+  resizable: true,
+  rotatable: true,
+  properties: [
+    {
+      type: 'number',
+      label: 'due',
+      name: 'due',
+      placeholder: 'timestamp'
+    },
+    {
+      type: 'string',
+      label: 'format-run',
+      name: 'format-run',
+      placeholder: 'hh:mm:ss'
+    },
+    {
+      type: 'string',
+      label: 'format-stop',
+      name: 'format-stop',
+      placeholder: '--:--:--'
+    },
+    {
+      type: 'color',
+      label: 'background-color',
+      name: 'backgroundColor',
+      property: 'backgroundColor'
+    }
+  ],
+  'value-property': 'due',
+  help: 'scene/component/duetimer'
+}
+
+export default class DueTimer extends RectPath(Shape) {
+  static get nature() {
+    return NATURE
+  }
+
+  ready() {
+    if (!this.app.isViewMode) {
+      return
+    }
+
+    var { due = 0 } = this.state
+
+    this.timeout = Math.max(Math.round((due - Date.now()) / 1000), 0)
+  }
+
+  onchange(after: Properties) {
+    if ('due' in after) {
+      this.timeout = Math.max(Math.round((this.due - Date.now()) / 1000), 0)
+      this.counting()
+    }
+  }
+
+  counting() {
+    requestAnimationFrame(() => {
+      const countdown = this.countdown
+
+      if (countdown > 0) {
+        this.set('data', format(countdown, this.getState('format-run')))
+
+        setTimeout(() => {
+          this.counting()
+        }, 1000)
+      } else {
+        this.set('data', this.getState('format-stop'))
+      }
+    })
+  }
+
+  render(context: CanvasRenderingContext2D) {
+    var { top, left, height, width, backgroundColor = 'transparent' } = this.model
+
+    // background의 색상
+    context.beginPath()
+    context.rect(left, top, width, height)
+
+    context.fillStyle = backgroundColor
+    context.fill()
+
+    // value의 색상
+    context.beginPath()
+
+    var progress = (this.countdown / this.timeout) * 100
+
+    if (!isNaN(progress)) {
+      progress = width - (width * progress) / 100
+      progress = Math.max(Math.min(progress, width), 0)
+
+      context.rect(left, top, progress, height)
+      this.drawFill(context)
+
+      context.beginPath()
+    }
+
+    // stroke
+    context.rect(left, top, width, height)
+  }
+
+  postrender(context: CanvasRenderingContext2D) {
+    this.drawStroke(context)
+    this.drawText(context)
+  }
+
+  get timeout() {
+    return Number(this.getState('timeout') || 0)
+  }
+
+  set timeout(timeout) {
+    this.setState('timeout', Number(timeout) || 0)
+  }
+
+  get due() {
+    return Number(this.getState('due') || 0)
+  }
+
+  set due(due) {
+    this.setState('due', due)
+  }
+
+  get countdown() {
+    const due = this.due
+    const now = Date.now()
+
+    return Math.max(Math.round((due - now) / 1000), 0)
+  }
+}
+
+Component.register('duetimer', DueTimer)

package/src/index.ts

@@ -0,0 +1,4 @@
+import Timer from './timer'
+import DueTimer from './duetimer'
+
+export default [Timer, DueTimer]

package/src/libs/format.ts

@@ -0,0 +1,47 @@
+/**
+ * 문자열 길이를 늘려주는 함수
+ *
+ * @param {String} i
+ * @param {Number} len
+ */
+function ii(i: number, len?: number) {
+  var s = i + ''
+  len = len || 2
+  while (s.length < len) s = '0' + s
+  return s
+}
+
+/**
+ * 시간 표시 포맷을 맞추는 함수
+ *
+ * @param {Number} seconds seconds
+ * @param {string} format hh:mm:ss
+ */
+export default function format(seconds = 0, format = '') {
+  var h = 0,
+    m = 0,
+    s = 0
+  var formated = ''
+
+  h = Math.floor(seconds / 3600)
+  formated = format.replace(/(^|[^\\])hh+/g, '$1' + ii(h))
+  formated = formated.replace(/(^|[^\\])h/g, '$1' + h)
+  if (format != formated) {
+    format = formated
+    seconds %= 1440
+  }
+
+  m = Math.floor(seconds / 60)
+  formated = format.replace(/(^|[^\\])mm+/g, '$1' + ii(m))
+  formated = formated.replace(/(^|[^\\])m/g, '$1' + m)
+  if (format != formated) {
+    format = formated
+    seconds %= 60
+  }
+
+  s = seconds
+  formated = format.replace(/(^|[^\\])ss+/g, '$1' + ii(s))
+  formated = formated.replace(/(^|[^\\])s/g, '$1' + s)
+
+  return formated
+}

package/src/templates/duetimer.ts

@@ -0,0 +1,24 @@
+import icon from '../../assets/timer.png'
+
+export default {
+  type: 'timer',
+  description: 'timer',
+  group: 'etc',
+  /* line|shape|textAndMedia|chartAndGauge|table|container|dataSource|IoT|3D|warehouse|form|etc */
+  icon,
+  model: {
+    type: 'timer',
+    left: 10,
+    top: 10,
+    width: 100,
+    height: 100,
+    strokeStyle: 'darkgray',
+    text: '#{data}',
+    days: 0,
+    hours: 0,
+    minutes: 0,
+    seconds: 0,
+    'format-run': 'mm:ss',
+    'format-stop': '--:--'
+  }
+}

package/src/templates/index.ts

@@ -0,0 +1,4 @@
+import timer from './timer'
+import duetimer from './duetimer'
+
+export default [timer, duetimer]

package/src/templates/timer.ts

@@ -0,0 +1,20 @@
+import icon from '../../assets/duetimer.png'
+
+export default {
+  type: 'duetimer',
+  description: 'duetimer',
+  group: 'etc',
+  /* line|shape|textAndMedia|chartAndGauge|table|container|dataSource|IoT|3D|warehouse|form|etc */
+  icon,
+  model: {
+    type: 'duetimer',
+    left: 10,
+    top: 10,
+    width: 100,
+    height: 100,
+    strokeStyle: 'darkgray',
+    text: '#{data}',
+    'format-run': 'mm:ss',
+    'format-stop': '--:--'
+  }
+}