FINAL
Design PROCESS
原型设计目标
Design Goal
我们使用 8 * 8 - WS2812B LED柔性屏*1 、MPU6050*1、ESP8266-NodeMCU*1 设计并制作了 R-Tattoo System，一种可穿戴的运动设备，其中包括硬件端：R-Tattoo Sleeve 以及 App 端。
We use 8 * 8 - ws2812b LED flexible screen * 1, mpu6050 * 1 and esp8266 nodemcu * 1 to design and manufacture r-tatoo system, a wearable sports device, including hardware end: r-tatoo sleep and app end.
使用R-Tattoo用户可自行设计预期跑步时间，设备会根据跑步进度逐渐显示电子纹身图案。设备以图案的完成度显示整个长跑的进度，以给予跑步者及时的进度反馈，并在跑步结束后给予跑步者勋章奖励。
With r-tatoo, users can design their own expected running time, and the device will gradually display electronic tattoos according to the running progress. The device displays the progress of the whole long-distance run with the completion of the pattern, so as to give the runner timely progress feedback, and give the runner a medal after the run.
该项目使用 Blinker 平台进行通信，实现交互端与 R-Tattoo Sleeve 的互通。
The project uses the blinker platform for communication to realize the interworking between the interactive end and r-tatto sleeve.
功能一：电子纹身
Function 1: electronic tattoo
设备需要根据跑步时长逐渐显示电子纹身图案，并通过显示图案的完成度向用户展示其跑步运动的进度。
The device will gradually display the electronic tattoo pattern according to the running duration, and the device will show the user the progress of running through the completion of the display pattern.
电子纹身原方案 - 导电银胶 ❌
Original scheme of electronic Tattoo - conductive silver glue
原型制作的初期我们尝试使用导电银胶在透明的胶纸上绘制电路，组成LED点阵，从而实现电子纹身效果（希望让纹身真正出现在皮肤上）。但由于时间受限以及疫情的影响，导电银浆的方案没能顺利推进。
In the early stage of prototype production, we tried to use conductive silver paste to draw circuits on transparent adhesive tape to form an LED dot matrix to achieve an electronic tattoo effect. However, due to time constraints and the impact of the epidemic, the conductive silver paste program failed to advance smoothly.
电子纹身最终方案 - WS2812B LED 柔性屏 ✔
Final scheme of electronic Tattoo - ws2812b LED flexible screen
- FastLED.h 简介：
Introduction to FastLED.h
FastLED.h 是一种快速、高效且易于使用的 Arduino 库，用于编程可寻址 LED 条和像素如 WS2810、WS2812B、LPD8806、Neopixel 。FastLED 被成千上万的开发人员、无数的艺术和爱好项目以及无数的商业产品使用。
Fast LED is a fast, efficient and easy-to-use Arduino library for programming addressable LED bars and pixels such as ws2810, ws2811, lpd8806, neopixel and more. Fastled is used by thousands of developers, countless art and hobby projects and countless commercial products.
- 原型制作：
Introduction to FastLED.h
我们使用了规格为 8 * 8 的 WS2812B LED柔性屏 ， 将其缝合在袖套上，并固定于小臂上进行测试，以下测试效果。
We used the WS2812B LED flexible screen in size 8 * 8, which was sewn onto the sleeve and fixed to the small arm.
通过多次测试，最终通过 ARDUINO IDE 进行编程，使用 FastLED.h 实现多种电子纹身的效果。
After many tests, we finally used the ws2812b LED flexible screen with the specification of 8 * 8 ， programmed through Arduino ide ， to achieve the effect of a variety of electronic tattoos.
电子纹身 - Arduino代码：
Electronic Tattoo - Arduino Code:
功能二：检测跑步状态
Function 2: detect running status
设备需要根据用户的位移与运动来判断用户是否处于跑步状态，在用户停止跑步后系统会自动结束运动。
The device needs to judge whether the user is running according to the user's displacement and movement. After the user stops running, the system will automatically end the movement.
跑步状态检测方案 - MPU-6050 ✔
Running status detection scheme - mpu-6050
- MPU-6050 简介：
Introduction to mpu-6050
MPU6050 将一个 3 轴陀螺仪和一个 3 轴加速度计结合在同一个硅芯片上，以及一个处理复杂 6 轴 MotionFusion 算法的板载数字运动处理器 (DMP)。MPU-6050 的角速度感测范围为±250、±500、±1000与±2000°/sec (dps)，可以准确捕捉快速与慢速动作，用户可程式控制的加速器全格感测范围为±2g、±4g±8g与±16g。产品传输可透过最高至400kHz的I2C或最高达20MHz的SPI。
Mpu6050 combines a 3-axis gyroscope and a 3-axis accelerometer on the same silicon chip, and an on-board digital motion processor (DMP) to process complex 6-axis motionfusion algorithm.
在使用 MPU-6050 前，用户需要在 Arduino IDE 中安装库 MPU6050.h ，并在 Github 上下载并导入 I2Cdev.h。
You need to install the library mpu6050 in the Arduino ide before using mpu-6050 h。
I2Cdev.h 在需要在 https://github.com/jrowberg/i2cdevlib 中进行下载
Use the input box for the add-on development board manager web address in preferences
- 跑步状态检测-运动失败：
Running status detection - exercise failure:
使用 MPU-6050 来读取用户的 nowaccx/y/z ，通过判定 abs（nowaccx/y/z）是否低于一个固定值，从而判断用户是否处于运动状态。
Mpu is used to read the user's nowaccX/ Y / Z, and judge whether the user is in motion by determining whether ABS (nowaccX / Y / Z) < 3000 is true.
判断运动状态 - Arduino 代码：
Judge motion status - Arduino Code:
功能三：实现APP控制
Prototyping process - Arduino
我们考虑将R-Tattoo Sleeve与移动端设备进行远程通讯，通过APP来控制R-Tattoo Sleeve
After completing the hardware production, we used figma to produce the app side high fidelity interactive prototype matched with the hardware.
App端交互原型制作 - Figma ✔
App side interactive Prototyping - figma
- Figma 简介：
Introduction to figma:
Figma是一个向量图形编辑器和原型设计工具，主要基于网页进行工作，通过macOS或Windows的桌面应用程序可启用离线编辑功能。适用于Android和iOS的配套程式称为Figma Mirror，可以在移动设备上查看Figma原型。Figma的功能集着重于用户界面设计及用户体验设计，并强调即时协作。
Figma is a vector graphics editor and prototype design tool. It mainly works based on Web pages. Offline editing can be enabled through MacOS or windows desktop applications. The supporting program for Android and IOS is called figma mirror, which can view the figma prototype on mobile devices. Figma's feature set focuses on user interface design and user experience design, and emphasizes real-time collaboration.
- 交互原型：
Interactive prototype：
我们梳理了用户的使用触点以及使用逻辑，并使用 Figma 制作了与硬件配套的高保真交互原型。
We combed the user's use contacts and use logic, and made a high fidelity interaction prototype matched with hardware using figma.
IOT 通信原方案 - 阿里云 IOT Studio & Protopie ❌
App side interactive Prototyping - figma
为了实现手机 APP 端与 R-Tattoo Sleeve 的通讯，我们尝试去使用了阿里云 IOT Studio 以及 Protopie 进行测试。
其中阿里云 IOT Studio 在2020年后已经不提供免费的 App 功能；
而 Protopie 则需要 Protopie Connect 与 Arduino 进行通信，但目前 Protopie Connect 仅对企业开放。
Alibaba cloud IOT studio will no longer provide free app functions after 2020; Protopie} requires protopie connect to communicate with Arduino, but at present, protopie connect is only open to enterprises.
x
IOT 通信最终方案 - Blinker + ESP8266 ✔
IOT communication final solution - blinker + esp8266
最终我们选用 Blinker 进行 App 端与 Esp8266-NodeMcu 进行通信。
Finally, we choose blinker to communicate with esp8266 nodemcu on the app side.
- Blinker 简介：
Blinker introduction:
Blinker 是一套专业且易用物联网解决方案，提供了服务器、应用、设备端 sdk 支持。 基于高性能异步框架开发的服务器端可以承载大量设备连接，让设备所有者方便的进行设备管理；简单便捷的应用配合多设备支持的 sdk ，可以让开发者快速实现设备的接入。
Blinker is a professional and easy-to-use Internet of things solution, which provides server, application and device SDK support. The server-side developed based on high-performance asynchronous framework can carry a large number of device connections, which makes it convenient for device owners to manage devices; Simple and convenient applications and multi device supported SDKs allow developers to quickly access devices.
Blinker 支持多种主流通信方式，如：蓝牙、Wi-Fi ，理论上只要是支持蓝牙或者 WiFi 的设备，都可以使用 Blinker 连接使用 Wi-Fi 接入，当设备和手机在同一个局域网中，为局域网通信，其余情况，使用 MQTT 远程通信 Blinker 提供了对主流硬件平台支持。
Blinker is a professional and easy-to-use Internet of things solution, which provides server, application and device SDK support. The server-side developed based on high-performance asynchronous framework can carry a large number of device connections, which makes it convenient for device owners to manage devices; Simple and convenient applications and multi device supported SDKs allow developers to quickly access devices.
在使用 Blinker 之前，用户需要在 Arduino IDE 中安装库 Blinker.h
You need to install the library mpu6050 in the Arduino ide before using mpu-6050 h
- Esp8266-NodeMCU 简介：
Introduction to Esp8266-Nodemcu:
ESP8266-NodeMCU 是一个开源硬件开发板，由于它支持WIFI功能，所以在物联网（IOT）领域，Arduino开发板最大的对手之一。
Esp8266 nodemocu is an open source hardware development board. Because it supports WiFi function, it is one of the biggest competitors of Arduino development board in the field of Internet of things (IOT).
在使用 Esp8266 之前，用户需要在 Arduino IDE 中设置 Esp8266 的开发环境。
You need to install the library mpu6050 in the Arduino ide before using mpu-6050 h
1. 在 首选项 中的 附加开发板管理器网址 的输入框内输入：
http://arduino.esp8266.com/stable/package_esp8266com_index.json
Use the input box for the add-on development board manager web address
2. 在 工具 中的 开发板管理器 中下载 ESP8266。
最后在 开发板 中选择 NodeMCU 1.0（ESP-12E Module）。
Download esp8266 from the development board manager in the development board. Finally, select nodemocu 1.0 (esp-12e module) in the development board.
- Blinker 交互原型创建：
Blinker interaction prototype creation:
由于 Figma 所创建的交互原型无法与 Esp8266 进行通信，因此我们参照原先设计好的交互图在 Blinker 的手机移动端创建新的可用于交互的 APP 原型。其中包括 01-关键词选择 I 02-开始运动 I 03-获得勋章 I 04-再现纹身 。
Since the interaction prototype created by figma cannot communicate with esp8266, we refer to the originally designed interaction diagram to create a new app prototype for interaction at the mobile terminal of blinker's mobile phone. These include keyword selection, starting sports, obtaining medals and reproducing tattoos.
Blinker 交互原型
Blinker interaction prototype
- Blinker 交互原型与 ESP8266 通信：
Blinker interaction prototype communicates with esp8266:
基于 Blinker 平台的通信，在使用前需要在 Arduino IDE 中引用 Blinker 库，定义设备密钥，设置 Wi-Fi 名称与密码，并新建与交互原型相对应的组件对象（组件对象名称需要与交互端一致）。
For communication based on blinker platform, before use, it is necessary to reference blinker Library in Arduino IDE, define device key, set Wi Fi name and password, create component object corresponding to interaction prototype (component object name needs to be consistent with interaction end) and define interface.
接下来我们使用 Blinker 的移动端与我们的 R-Tattoo 进行通信，从而展示我们的原型功能。
Next, we use blinker's mobile terminal to communicate with our r-tatto to show our prototype function.
1. 打开 Blinker App 端，将其与 Esp8266 进行连接。
在 Monitor 中点击更新♻ {“get”：“state”} 从而获取当前的状态 ，{“state”：“online”}表示连接成功。
Open the blinker app and connect it to esp8266.
2. 用户需要在多个关键词中 Cute / Cool / Colorful / Modern 选择一个关键词，系统会根据关键词推荐一个对应风格的纹身。然后点击 Start 开始跑步，R-Tattoo Sleeve 开始运行跑步程序。
案例以 Cute / Colorful 为例：
点击 Cute 发出{ “ keyword1 ”：“ on ” } ，然后用户点击 Start 发出{ “ running ”：“ on ” }，运行 LED_Cherry_countdown()。
点击 Colorful 发出{ “ keyword2 ”：“ on ” } ，然后用户点击 Start 发出{ “ running ”：“ on ” }，运行 LED_Strawberry_countdown()。
First, you need to select a keyword from multiple keywords: cut / cool / colorful / modern, and the system will recommend a tattoo of corresponding style according to the keyword. Then click start to start running (), and r-tatto sleep starts running the running program.
3. 达成运动目标后，R-Tattoo Sleeve 会反馈一个“ Congratulations！🎉” 的字符串，恭喜用户完成运动。
After reaching the sports goal, r-tatto sleeve will feed back a "integration" 🎉 Congratulations to the user on completing the campaign.
4. 在完成运动后，用户可以点击不同的控件（如 Cherry / Strawberry），R-Tattoo Sleeve显示相对应的电子纹身，以此来进行个性化的展示。
案例以 Cherry / Strawberry 为例：
点击 Cherry 发出{ “ Tattoo ”：“ on ” } ，R-Tattoo Sleeve 运行 Cherry_LED() 同时反馈“展示樱桃勋章”。
点击 Strawberry 发出{ “ Tattoo2 ”：“ on ” } ，R-Tattoo Sleeve 运行 Strawberry_LED() 同时反馈“展示草莓勋章”。
After completing the movement, the user can click different controls (such as cherry / Strawberry), and r-tatto sleep displays the corresponding electronic tattoo for personalized display.
Final - R-Tattoo:
Final - Running-Tattoo
Final 电路图：
Final circuit diagram:
产品的主要硬件包括：8 * 8 - WS2812B LED柔性屏*1 、MPU6050*1、ESP8266-NodeMCU*1，如图所示是我们 Final 的最终电路图。
The main hardware of the product includes: 8 * 8 - ws2812b LED flexible screen * 1, mpu6050 * 1 and esp8266 nodemcu * 1. As shown in the figure, it is the final circuit diagram of our final.
Final 代码：
Final code：
我们最终通过 Arduino IDE 进行编程实现了 1.电子纹身 I 2.运动状态判断 I 3. APP 控制 三大功能点，并将代码整合如下。
Finally, we programmed through Arduino ide to realize the three function points of electronic tattoo, motion state judgment and app control, and integrated the most codes as follows.