---
tags: [Amaryllo]
title: Daily Summary
created: '2020-02-12T03:05:58.892Z'
modified: '2020-02-13T06:20:32.610Z'

---

# Daily Summary

[ToC]

## Steps

1. Create hard data version in English with hard data(2 days)
1. css framework: ant design
1. example:　https://github.com/zeit/next.js/tree/master/examples/with-ant-design
2.
2. pagination
3. download
4. zoom in / out image
5. **play video???**
1. play/pause
2. html5 video tag
1. 替 HTML5 Video 額外增加影片控制選項: https://www.wibibi.com/info.php?tid=380
3. Video.js + React 播放器整合: https://ithelp.ithome.com.tw/articles/10209345
4. 自訂 <video> 介面: https://ithelp.ithome.com.tw/articles/10205854
6. **facial recognize** position tag
1. video 截圖
2. image
7. select -> Select all to delete
2. Attach API with hard data version (1 day)
1. CORS-Request set up: go back to vue project, and see what I should do
3. Create i18next version(3 days) - still not learnt
1. loco multi-language strings
2. follow next-i18next github document to set up
3. github:https://github.com/isaachinman/next-i18next
4. example: https://github.com/isaachinman/next-i18next/tree/master/examples/simple
5. localise: https://localise.biz/session/auth/login
4. css style (6 days)

## User stories

1. user can view the biometric alerts in images/video list in thumbnail images, time and video playtime
1. time format: 21:03 PM
2. user can zoom in/zoom out image when clicking on image zoom in/out button
3. user can download image/video when clicking on download button
4. user can delete image/video when clicking on delete button
5. user can check facial recognize position tag(Human/the name of the face/fire) with percentage of confidence
6. user can play/pause video on the when clicking on the video play/pause button
7. user can select image/video in the alert list
8. user can click on select all button to select all image/video in the alert list
9. user can select the video and delete them in the alert list
10. user can view the alert list based on browser's environment language(English/Chinese/French)

## Specs

1. prototype:
1. https://xd.adobe.com/view/5e5145dc-cf82-49b3-6e15-39100c2937e0-2860/
2. https://app.zeplin.io/project/5e4a2c920f48ebaebce67770
2. original home page: https://soteria.amaryllo.eu/hf/amaryllodailysummary.php?tid=1581587683&amid=iSSb0bn9f&z=480&key=9888fd6032c76b884de727fe26cb35eb
3. languages: Traditional Chinese, English, French
1. https://w11i.me/how-to-build-multilingual-website-in-next-js
2. i18next:
1. based on this internationalization needs was built a framework for JavaScript called **i18next**.
2. https://github.com/i18next/react-i18next
3. https://react.i18next.com/
3. next-i18next:
1. integration of **i18next** for **Next.js** framework.
2. https://github.com/isaachinman/next-i18next
3. demo: https://github.com/isaachinman/next-i18next/tree/master/examples/simple
4. loco: https://localise.biz/dashboard
4. upload to /var/www/nginx, It will show in https://34.209.179.83:4443/
5. react load data dynamically
1. [react-infinite-scroller](https://github.com/CassetteRocks/react-infinite-scroller): https://ant.design/components/list/
2. example: https://github.com/CassetteRocks/react-infinite-scroller

## API

`POST https://xxxx/api/getBiometricAlertList/{amid}/{accessKey}/{alertType}`


## structure

Daily summary only deal with front-end react(Next.js)

* SQS知道S3的圖片路徑

Web side S3 image path is different

* app web view? embedded
* web browser to show daily summary from app
* SQS parse(json)
* alert type filter from pic file name

### daily summary current

Parse SQS data -> save to DB -> Daily summary show statistics and chart/report

### front-end

* future: app called with token(OAuth2.0?)
* now: need MD5 & AMID to fetch the data
* show chart and report
* Soteria enterprise simple data

### AWS CDN(content delivery network)

amazon cloudfront

### JSON formatt

JSON 格式: {
  "amid": "iCRa0xx0x",
  "file": "79808891844242-motion-Nov08-155758.jpg",
  "faces": [
    { "userId": -1,
      "user": "Unknown",
      "gender": "M",
      "age": [25, 32],
      "coord": [680, 233, 311, 310],
      "confidence": 0.000000
    },
    { "userId": 0,
      "user": "Iris",
      "gender": "F",
      "age": [25, 32],
      "coord": [300, 134, 250, 252],
      "confidence": 75.284392
    }
  ],
  "humans": [
    { "coord": [1530, 711, 41, 52],
      "confidence": 43.200554
    }
  ],
  "vehicles": [
    { "coord": [1152, 866, 349, 137],
      "confidence": 98.760101
    }
  ],
  "cats": [
    {
      "coord": [1102, 212, 143, 218],
      "confidence": 93.859230
    }
  ],
  "dogs": [
    { "coord": [1716, 754, 194, 155],
      "confidence": 45.464302
    }
  ],
  "birds": [
    { "coord": [1612, 131, 229, 263],
      "confidence": 78.648468
    }
  ],
  "fire": [
    { "coord": [937, 646, 263, 339],
      "confidence": 95.096931
    }
  ],
  "size": [1920, 1080]
}