@zeppos/zeus-cli 1.3.3 → 1.3.5

package/private-modules/zeppos-app-utils/dist/public/template/os2.0/app/showcase/page/interaction/on_key.js

@@ -0,0 +1,32 @@
+import { prop } from '@zos/ui'
+import { onKey, KEY_SHORTCUT } from '@zos/interaction'
+import PageAdvanced from '../../utils/template/PageAdvanced'
+import TextByLine from '../../utils/UI/TextByLine'
+
+PageAdvanced({
+  state: {
+    pageName: 'onKey'
+  },
+  build() {
+    const textByLine = new TextByLine()
+
+    const text = textByLine.render({
+      text: `key & action`
+    })
+
+    onKey({
+      callback: (key, action) => {
+        text.setProperty(prop.MORE, {
+          text: `key: ${key};action: ${action}`
+        })
+
+        if (key === KEY_SHORTCUT) {
+          this.state.logger.log('key shortcut')
+        }
+
+        return true
+      }
+    })
+  }
+})
+

package/private-modules/zeppos-app-utils/dist/public/template/os2.0/app/showcase/page/interaction/on_wrist_motion.js

@@ -0,0 +1,27 @@
+import { prop } from '@zos/ui'
+import { onWristMotion } from '@zos/interaction'
+import PageAdvanced from '../../utils/template/PageAdvanced'
+import TextByLine from '../../utils/UI/TextByLine'
+
+PageAdvanced({
+  state: {
+    pageName: 'onWristMotion'
+  },
+  build() {
+    const textByLine = new TextByLine()
+
+    const text = textByLine.render({
+      text: `MOTION`
+    })
+
+    onWristMotion({
+      callback: (data = {}) => {
+        const { motion } = data
+        this.state.logger.log('motion', motion)
+        text.setProperty(prop.MORE, {
+          text: `MOTION:${motion}`
+        })
+      }
+    })
+  }
+})

package/private-modules/zeppos-app-utils/dist/public/template/os2.0/app/showcase/page/router/set_launch_app_timeout.js

@@ -0,0 +1,32 @@
+import { createWidget, widget } from '@zos/ui'
+import { px } from '@zos/utils'
+import { Time } from '@zos/sensor'
+import PageAdvanced from '../../utils/template/PageAdvanced'
+import { setLaunchAppTimeout } from '@zos/router'
+
+PageAdvanced({
+  state: {
+    pageName: 'SetLaunchAppTimeOut'
+  },
+  build() {
+    const time = new Time()
+
+    createWidget(widget.BUTTON, {
+      x: px(80),
+      y: px(300),
+      w: px(300),
+      h: px(60),
+      radius: px(12),
+      normal_color: 0xfc6950,
+      press_color: 0xfeb4a8,
+      text: 'setLaunchAppTimeOut',
+      click_func: () => {
+        setLaunchAppTimeout({
+          url: 'page/index',
+          appId: 25107,
+          utc: time.getTime() + 1000
+        })
+      }
+    })
+  }
+})

package/private-modules/zeppos-app-utils/dist/public/template/os2.0/app/showcase/page/sensor/pai.js

@@ -57,6 +57,6 @@ PageAdvanced({
       line: 8,
     });
     lastText.render();
-    new EmptySpace({ y: lastText.y_computed }).render();
+    new EmptySpace({ y: lastText.y }).render();
   },
 });

package/private-modules/zeppos-app-utils/dist/public/template/os2.0/app/showcase/page/ui/widget/arc.js

@@ -0,0 +1,28 @@
+import { createWidget, widget, event, prop } from '@zos/ui'
+import { px } from '@zos/utils'
+import PageAdvanced from '../../../utils/template/PageAdvanced'
+import { DEFAULT_COLOR } from '../../../config/constants'
+
+PageAdvanced({
+  state: {
+    pageName: 'ARC'
+  },
+  build() {
+    const arc = createWidget(widget.ARC, {
+      x: px(100),
+      y: px(100),
+      w: px(250),
+      h: px(250),
+      start_angle: -90,
+      end_angle: 90,
+      color: DEFAULT_COLOR,
+      line_width: 20
+    })
+
+    arc.addEventListener(event.CLICK_DOWN, (info) => {
+      arc.setProperty(prop.MORE, {
+        y: px(150)
+      })
+    })
+  }
+})

package/private-modules/zeppos-app-utils/dist/public/template/os2.0/app/showcase/page/ui/widget/button.js

@@ -0,0 +1,44 @@
+import { createWidget, widget, prop } from '@zos/ui'
+import { px } from '@zos/utils'
+import { DEVICE_WIDTH } from '../../../config/device'
+import PageAdvanced from '../../../utils/template/PageAdvanced'
+import { DEFAULT_COLOR, DEFAULT_COLOR_TRANSPARENT } from '../../../config/constants'
+
+PageAdvanced({
+  state: {
+    pageName: 'Button'
+  },
+  build() {
+    const img_button = createWidget(widget.BUTTON, {
+      x: (DEVICE_WIDTH - px(96)) / 2,
+      y: 120,
+      text: 'Hello',
+      w: -1,
+      h: -1,
+      normal_src: 'button_normal.png',
+      press_src: 'button_press.png',
+      click_func: () => {
+        this.state.logger.log('button click')
+      }
+    })
+
+    createWidget(widget.BUTTON, {
+      x: (DEVICE_WIDTH - px(400)) / 2,
+      y: px(240),
+      w: px(400),
+      h: px(100),
+      radius: px(12),
+      normal_color: DEFAULT_COLOR,
+      press_color: DEFAULT_COLOR_TRANSPARENT,
+      text: 'Hello',
+      click_func: (button_widget) => {
+        button_widget.setProperty(prop.MORE, {
+          x: (DEVICE_WIDTH - px(400)) / 2,
+          y: px(260),
+          w: px(400),
+          h: px(100)
+        })
+      }
+    })
+  }
+})

package/private-modules/zeppos-app-utils/dist/public/template/os2.0/app/showcase/page/ui/widget/checkbox_group.js

@@ -0,0 +1,45 @@
+import { createWidget, widget, prop } from '@zos/ui'
+import { px } from '@zos/utils'
+import PageAdvanced from '../../../utils/template/PageAdvanced'
+
+PageAdvanced({
+  state: {
+    pageName: 'CHECKBOX_GROUP'
+  },
+  build() {
+    const checkbox_group = createWidget(widget.CHECKBOX_GROUP, {
+      x: px(0),
+      y: px(0),
+      w: px(480),
+      h: px(64),
+      select_src: 'selected.png',
+      unselect_src: 'unselected.png',
+      check_func: (group, index, checked) => {
+        this.state.logger.log('index', index)
+        this.state.logger.log('checked', checked)
+      }
+    })
+
+    const button1 = checkbox_group.createWidget(widget.STATE_BUTTON, {
+      x: px(40),
+      y: px(200),
+      w: px(64),
+      h: px(64)
+    })
+    const button2 = checkbox_group.createWidget(widget.STATE_BUTTON, {
+      x: px(190),
+      y: px(200),
+      w: px(64),
+      h: px(64)
+    })
+    const button3 = checkbox_group.createWidget(widget.STATE_BUTTON, {
+      x: px(340),
+      y: px(200),
+      w: px(64),
+      h: px(64)
+    })
+
+    checkbox_group.setProperty(prop.INIT, button2)
+    checkbox_group.setProperty(prop.CHECKED, button3)
+  }
+})

package/private-modules/zeppos-app-utils/dist/public/template/os2.0/app/showcase/page/ui/widget/circle.js

@@ -0,0 +1,28 @@
+import PageAdvanced from '../../../utils/template/PageAdvanced'
+import { DEFAULT_COLOR } from '../../../config/constants'
+
+PageAdvanced({
+  state: {
+    pageName: 'CIRCLE'
+  },
+  build() {
+    const circle = hmUI.createWidget(hmUI.widget.CIRCLE, {
+      center_x: px(240),
+      center_y: px(240),
+      radius: px(120),
+      color: DEFAULT_COLOR,
+      alpha: 200
+    })
+
+    // 暂时不支持，代码先保留
+    circle.addEventListener(hmUI.event.CLICK_DOWN, () => {
+      this.state.logger.log('circle click')
+      circle.setProperty(hmUI.prop.MORE, {
+        center_x: px(240),
+        center_y: px(300),
+        radius: px(120),
+        color: DEFAULT_COLOR
+      })
+    })
+  }
+})

package/private-modules/zeppos-app-utils/dist/public/template/os2.0/app/showcase/page/ui/widget/cycle_image_text_list.js

@@ -0,0 +1,43 @@
+import { createWidget, widget, prop, event } from '@zos/ui'
+import { px } from '@zos/utils'
+import PageAdvanced from '../../../utils/template/PageAdvanced'
+
+PageAdvanced({
+  state: {
+    pageName: 'CYCLE_IMAGE_TEXT_LIST'
+  },
+
+  build() {
+    const dataArray = [
+      { text: '0', src: 'true.png' },
+      { text: '1' },
+      { text: '2' },
+      { text: '3', src: 'false.png' },
+      { text: '4' },
+      { text: '5' },
+      { text: '6' },
+      { text: '7' },
+      { text: '8' },
+      { text: '9' }
+    ]
+
+    const cycle_image_text_list = createWidget(widget.CYCLE_IMAGE_TEXT_LIST, {
+      x: 0,
+      y: px(120),
+      w: px(480),
+      h: px(300),
+      data_array: dataArray,
+      data_size: 10,
+      item_height: px(60),
+      // item_bg_color: 0xffffff,
+      item_text_color: 0xffffff,
+      item_text_size: px(18),
+      item_image_x: px(60)
+    })
+
+    this.state.titleWidget.addEventListener(event.CLICK_DOWN, () => {
+      this.state.logger.log('property', cycle_image_text_list.getProperty(prop.MORE, {}))
+      cycle_image_text_list.setProperty(prop.LIST_TOP, { index: 3 })
+    })
+  }
+})

package/private-modules/zeppos-app-utils/dist/public/template/os2.0/app/showcase/page/ui/widget/cycle_list.js

@@ -0,0 +1,26 @@
+import { createWidget, widget } from '@zos/ui'
+import { px } from '@zos/utils'
+import PageAdvanced from '../../../utils/template/PageAdvanced'
+
+PageAdvanced({
+  state: {
+    pageName: 'CYCLE_LIST'
+  },
+
+  build() {
+    const imgArray = ['number-img/0.png', 'number-img/1.png', 'number-img/2.png', 'number-img/3.png', 'number-img/4.png']
+    const cycleList = createWidget(widget.CYCLE_LIST, {
+      x: px(230),
+      y: px(120),
+      h: px(300),
+      w: px(30),
+      data_array: imgArray,
+      data_size: 5,
+      item_height: 100,
+      item_click_func: (list, index) => {
+        this.state.logger.log(index)
+      },
+      item_bg_color: 0xffffff
+    })
+  }
+})

package/private-modules/zeppos-app-utils/dist/public/template/os2.0/app/showcase/page/ui/widget/dialog.js

@@ -0,0 +1,32 @@
+import { createWidget, widget, align, prop } from '@zos/ui'
+import PageAdvanced from '../../../utils/template/PageAdvanced'
+
+PageAdvanced({
+  state: {
+    pageName: 'DIALOG'
+  },
+  build() {
+    const dialog = createWidget(widget.DIALOG, {
+      ok_text: 'OK',
+      cancel_text: 'CANCEL'
+    })
+    dialog.setProperty(prop.MORE, {
+      text: 'DIALOG TITLE',
+      content_text_size: 40,
+      content_bg_color: 0x000000,
+      content_text_color: 0xffffff,
+      ok_text_color: 0x333333,
+      cancel_text_color: 0x333333,
+      dialog_align_h: align.CENTER_H,
+      content_text_align_h: align.CENTER_H,
+      content_text_align_v: align.CENTER_V,
+      ok_func: () => {
+        console.log('DIALOG OK')
+      },
+      cancel_func: () => {
+        console.log('DIALOG CANCEL')
+      }
+    })
+    dialog.setProperty(prop.SHOW, true)
+  }
+})

package/private-modules/zeppos-app-utils/dist/public/template/os2.0/app/showcase/page/ui/widget/fill_rect.js

@@ -0,0 +1,29 @@
+import { createWidget, widget, event, prop } from '@zos/ui'
+import { px } from '@zos/utils'
+import { DEFAULT_COLOR } from '../../../config/constants'
+import PageAdvanced from '../../../utils/template/PageAdvanced'
+
+PageAdvanced({
+  state: {
+    pageName: 'FILL_RECT'
+  },
+  build() {
+    const fill_rect = createWidget(widget.FILL_RECT, {
+      x: px(125),
+      y: px(125),
+      w: px(230),
+      h: px(150),
+      radius: px(20),
+      color: DEFAULT_COLOR
+    })
+
+    fill_rect.addEventListener(event.CLICK_DOWN, (info) => {
+      fill_rect.setProperty(prop.MORE, {
+        x: px(125),
+        y: px(200),
+        w: px(230),
+        h: px(150)
+      })
+    })
+  }
+})

package/private-modules/zeppos-app-utils/dist/public/template/os2.0/app/showcase/page/ui/widget/histogram.js

@@ -0,0 +1,76 @@
+import { createWidget, widget, align } from '@zos/ui'
+import { px } from '@zos/utils'
+import PageAdvanced from '../../../utils/template/PageAdvanced'
+
+PageAdvanced({
+  state: {
+    pageName: 'HISTOGRAM'
+  },
+
+  build() {
+    const fillRect = createWidget(widget.FILL_RECT, {
+      x: px(100),
+      y: px(120),
+      w: px(300),
+      h: px(300),
+      color: 0xffffff
+    })
+
+    const view = createWidget(widget.HISTOGRAM, {
+      x: px(100),
+      y: px(120),
+      h: 300,
+      w: 300,
+      item_width: 20,
+      item_space: 10,
+      item_radius: 10,
+      item_start_y: 50,
+      item_max_height: 230,
+      item_color: 0x304ffe,
+      data_array: [20, 30, 40, 50, 60, 100, 80, 90, 20, 30],
+      data_count: 10,
+      data_min_value: 10,
+      data_max_value: 100,
+      xline: {
+        pading: 20,
+        space: 20,
+        start: 0,
+        end: 300,
+        color: 0x00c853,
+        width: 1,
+        count: 15
+      },
+      yline: {
+        pading: 10,
+        space: 10,
+        start: 0,
+        end: 300,
+        color: 0xff6d00,
+        width: 1,
+        count: 30
+      },
+      xText: {
+        x: px(12),
+        y: px(270),
+        w: px(20),
+        h: px(50),
+        space: 10,
+        align: align.LEFT,
+        color: 0x000000,
+        count: 10,
+        data_array: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10']
+      },
+      yText: {
+        x: 0,
+        y: px(20),
+        w: px(50),
+        h: px(50),
+        space: px(10),
+        align: align.LEFT,
+        color: 0x000000,
+        count: 6,
+        data_array: ['a', 'b', 'c', 'd', 'e', 'f']
+      }
+    })
+  }
+})

package/private-modules/zeppos-app-utils/dist/public/template/os2.0/app/showcase/page/ui/widget/img.js

@@ -0,0 +1,23 @@
+import { createWidget, widget, event, prop } from '@zos/ui'
+import { px } from '@zos/utils'
+import PageAdvanced from '../../../utils/template/PageAdvanced'
+
+PageAdvanced({
+  state: {
+    pageName: 'IMG'
+  },
+  build() {
+    const img = createWidget(widget.IMG, {
+      x: px(125),
+      y: px(125),
+      src: 'zeppos.png'
+    })
+
+    img.addEventListener(event.CLICK_DOWN, (info) => {
+      this.state.logger.log('click down info', info)
+      img.setProperty(prop.MORE, {
+        y: px(200)
+      })
+    })
+  }
+})

package/private-modules/zeppos-app-utils/dist/public/template/os2.0/app/showcase/page/ui/widget/img_anim.js

@@ -0,0 +1,37 @@
+import { createWidget, widget, event, prop, anim_status } from '@zos/ui'
+import { px } from '@zos/utils'
+import PageAdvanced from '../../../utils/template/PageAdvanced'
+
+PageAdvanced({
+  state: {
+    pageName: 'IMG_ANIM'
+  },
+  build() {
+    const imgAnimation = createWidget(widget.IMG_ANIM, {
+      anim_path: 'anim',
+      anim_prefix: 'animation',
+      anim_ext: 'png',
+      anim_fps: 60,
+      anim_size: 36,
+      repeat_count: 1,
+      anim_status: 3,
+      x: px(208),
+      y: px(230),
+      anim_complete_call: () => {
+        this.state.logger.log('animation complete')
+      }
+    })
+
+    imgAnimation.setProperty(prop.ANIM_STATUS, anim_status.START)
+    imgAnimation.addEventListener(event.CLICK_DOWN, () => {
+      const isRunning = imgAnimation.getProperty(prop.ANIM_IS_RUNINNG)
+
+      if (!isRunning) {
+        this.state.logger.log('running', isRunning)
+        imgAnimation.setProperty(prop.ANIM_STATUS, anim_status.START)
+      }
+
+      imgAnimation.setProperty(prop.ANIM_STATUS, anim_status.START)
+    })
+  }
+})

package/private-modules/zeppos-app-utils/dist/public/template/os2.0/app/showcase/page/ui/widget/page_indicator.js

@@ -0,0 +1,32 @@
+Page({
+  build() {
+    let page_cnt = 10
+    let vertical = false
+    let page_size = px(480)
+    hmUI.setScrollView(true, page_size, page_cnt, vertical)
+    pg_indicator = hmUI.createWidget(hmUI.widget.PAGE_INDICATOR, {
+      x: 0,
+      y: px(50),
+      w: px(480),
+      h: px(100),
+      align_h: hmUI.align.CENTER_H,
+      h_space: 8,
+      select_src: 'select.png',
+      unselect_src: 'unselect.png'
+    })
+    for (let i = 0; i < page_cnt; i++) {
+      let x_pos = vertical ? 0 : page_size * i
+      let y_pos = vertical ? px(400) + page_size * i : px(400)
+      hmUI.createWidget(hmUI.widget.TEXT, {
+        x: px(x_pos),
+        y: px(y_pos),
+        w: px(480),
+        h: px(120),
+        text_size: 35,
+        color: 0xffffff,
+        align_h: hmUI.align.CENTER_H,
+        text: 'PAGE ' + i.toString()
+      })
+    }
+  }
+})

package/private-modules/zeppos-app-utils/dist/public/template/os2.0/app/showcase/page/ui/widget/pick_date.js

@@ -0,0 +1,43 @@
+import { createWidget, widget, prop, event, align } from '@zos/ui'
+import { px } from '@zos/utils'
+import PageAdvanced from '../../../utils/template/PageAdvanced'
+
+PageAdvanced({
+  state: {
+    pageName: 'PICK_DATE'
+  },
+  build() {
+    const pick_date_date = createWidget(widget.PICK_DATE)
+    pick_date_date.setProperty(prop.MORE, {
+      w: px(480),
+      x: px(20),
+      y: px(120),
+      startYear: 2000,
+      endYear: 2030,
+      initYear: 2021,
+      initMonth: 2,
+      initDay: 3
+    })
+
+    const confirm = createWidget(widget.TEXT, {
+      x: 0,
+      y: px(360),
+      w: px(480),
+      h: px(80),
+      text_size: px(42),
+      color: 0xffffff,
+      align_h: align.CENTER_H,
+      align_v: align.CENTER_V,
+      text: 'confirm'
+    })
+
+    confirm.addEventListener(event.CLICK_UP, (info) => {
+      const dateObj = pick_date_date.getProperty(prop.MORE, {})
+      const { year, month, day } = dateObj
+
+      this.state.logger.log('year', year)
+      this.state.logger.log('month', month)
+      this.state.logger.log('day', day)
+    })
+  }
+})

package/private-modules/zeppos-app-utils/dist/public/template/os2.0/app/showcase/page/ui/widget/polyline.js

@@ -0,0 +1,36 @@
+import { createWidget, widget, event } from '@zos/ui'
+import { px } from '@zos/utils'
+import PageAdvanced from '../../../utils/template/PageAdvanced'
+
+PageAdvanced({
+  state: {
+    pageName: 'GRADKIENT_POLYLINE'
+  },
+  build() {
+    const lineDataList = [
+      { x: 0, y: px(200) },
+      { x: px(100), y: px(10) },
+      { x: px(200), y: px(50) },
+      { x: px(300), y: px(50) },
+      { x: px(400), y: px(200) }
+    ]
+    const polyline = createWidget(widget.GRADKIENT_POLYLINE, {
+      x: 0,
+      y: px(200),
+      w: px(480),
+      h: px(200),
+      line_color: 0x00ffff,
+      line_width: 4,
+      bg_color: 0xffffff
+    })
+    polyline.clear()
+    polyline.addLine({
+      data: lineDataList,
+      count: lineDataList.length
+    })
+
+    this.state.titleWidget.addEventListener(event.CLICK_DOWN, () => {
+      polyline.clear()
+    })
+  }
+})

package/private-modules/zeppos-app-utils/dist/public/template/os2.0/app/showcase/page/ui/widget/qrcode.js

@@ -0,0 +1,22 @@
+import { createWidget, widget } from '@zos/ui'
+import { px } from '@zos/utils'
+import PageAdvanced from '../../../utils/template/PageAdvanced'
+
+PageAdvanced({
+  state: {
+    pageName: 'QRCODE'
+  },
+  build() {
+    createWidget(widget.QRCODE, {
+      x: px(140),
+      y: px(140),
+      w: px(200),
+      h: px(200),
+      bg_x: px(120),
+      bg_y: px(120),
+      bg_w: px(240),
+      bg_h: px(240),
+      content: 'Hello Zepp OS'
+    })
+  }
+})