xuan/TestRestructureWechatLymarketDist
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

高级搜索

Browse Source
This commit is contained in:
czm 2022-04-18 18:47:22 +08:00
parent 7c299748c3
commit 4a7f7b316f
26 changed files with 1584 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/app.tsx
View File

@ -1,13 +1,26 @@
import { MovableArea, View } from '@tarojs/components'
import { Component } from 'react'
import ContextBlueTooth from "@/use/contextBlueTooth"
import './app.scss'
class App extends Component {
const App = ({ children }) => {
return (
<>
{children}
</>
)
}
componentDidMount () {}
export default App
componentDidShow () {}
componentDidHide () {}
componentDidCatchError () {}
// this.props.children 是将要会渲染的页面
render () {
return (
<ContextBlueTooth>
{this.props.children}
</ContextBlueTooth>
)
}
}
export default App

86
src/common/bluetooth/color/colorDiff.js Normal file
View File

@ -0,0 +1,86 @@
module.exports = function(lab1, lab2){
var rgb2labArray1 = lab1;
var rgb2labArray2 = lab2;
var l1 = rgb2labArray1[0];
var a1 = rgb2labArray1[1];
var b1 = rgb2labArray1[2];
var l2 = rgb2labArray2[0];
var a2 = rgb2labArray2[1];
var b2 = rgb2labArray2[2];
var avg_lp = (l1 + l2) / 2;
var c1 = Math.sqrt(Math.pow(a1, 2) + Math.pow(b1, 2));
var c2 = Math.sqrt(Math.pow(a2, 2) + Math.pow(b2, 2));
var avg_c = (c1 + c2) / 2;
var g = (1- Math.sqrt(Math.pow(avg_c, 7) / (Math.pow(avg_c, 7) + Math.pow(25, 7)))) / 2;
var a1p = a1 * (1 + g);
var a2p = a2 * (1 + g);
var c1p = Math.sqrt(Math.pow(a1p, 2) + Math.pow(b1, 2));
var c2p = Math.sqrt(Math.pow(a2p, 2) + Math.pow(b2, 2));
var avg_cp = (c1p + c2p) / 2;
var h1p = rad2deg(Math.atan2(b1, a1p));
if(h1p < 0){
h1p = h1p + 360;
}
var h2p = rad2deg(Math.atan2(b2, a2p));
if(h2p < 0){
h2p = h2p + 360;
}
var avg_hp = Math.abs(h1p - h2p) > 180 ? (h1p + h2p + 360) / 2 : (h1p + h1p) / 2;
var t = 1 - 0.17 * Math.cos(deg2rad(avg_hp - 30)) + 0.24 * Math.cos(deg2rad(2 * avg_hp)) + 0.32 * Math.cos(deg2rad(3 * avg_hp + 6)) - 0.2 * Math.cos(deg2rad(4 * avg_hp - 63))
var delta_hp = h2p - h1p;
if(Math.abs(delta_hp) > 180){
if (h2p <= h1p) {
delta_hp += 360;
}
else {
delta_hp -= 360;
}
}
var delta_lp = l2 - l1;
var delta_cp = c2p - c1p;
delta_hp = 2 * Math.sqrt(c1p * c2p) * Math.sin(deg2rad(delta_hp) / 2);
var s_l = 1 + ((0.015 * Math.pow(avg_lp - 50, 2)) / Math.sqrt(20 + Math.pow(avg_lp - 50, 2)));
var s_c = 1 + 0.045 * avg_cp
var s_h = 1 + 0.015 * avg_cp * t;
var delta_ro = 30 * Math.exp( - (Math.pow((avg_hp - 275) / 25, 2)));
var r_c = 2 * Math.sqrt(Math.pow(avg_cp, 7) / (Math.pow(avg_cp, 7) + Math.pow(25, 7)));
var r_t = -r_c * Math.sin(2 * deg2rad(delta_ro));
var kl = 1, kc =1, kh = 1;
var delta_e = Math.sqrt(Math.pow(delta_lp / (kl * s_l), 2) + Math.pow(delta_cp / (kc * s_c), 2) + Math.pow(delta_hp / (kh * s_h), 2) + r_t * (delta_cp / (kc * s_c)) * (delta_hp / (kh * s_h)))
return delta_e
function rad2deg(rad){
return 360 * rad / (2 * Math.PI);
}
function deg2rad(deg){
return (2 * Math.PI * deg) / 360;
}
}

13
src/common/bluetooth/color/colorSpace.js Normal file
View File

@ -0,0 +1,13 @@
import LabCom from './lab'
import XyzCom from './xyz'
import ColorDiff from './colorDiff'
export const toRgb = (lab) => {
let xyz = LabCom.xyz(lab)
return XyzCom.rgb(xyz)
}
export const Ediff = (lab1, lab2) => {
return ColorDiff(lab1, lab2)
}

54
src/common/bluetooth/color/lab.js Normal file
View File

@ -0,0 +1,54 @@
var xyz = require('./xyz');
module.exports = {
name: 'lab',
min: [0,-100,-100],
max: [100,100,100],
channel: ['lightness', 'a', 'b'],
alias: ['LAB', 'cielab'],
xyz: function(lab) {
var l = lab[0],
a = lab[1],
b = lab[2],
x, y, z, y2;
if (l <= 8) {
y = (l * 100) / 903.3;
y2 = (7.787 * (y / 100)) + (16 / 116);
} else {
y = 100 * Math.pow((l + 16) / 116, 3);
y2 = Math.pow(y / 100, 1/3);
}
x = x / 95.047 <= 0.008856 ? x = (95.047 * ((a / 500) + y2 - (16 / 116))) / 7.787 : 95.047 * Math.pow((a / 500) + y2, 3);
z = z / 108.883 <= 0.008859 ? z = (108.883 * (y2 - (b / 200) - (16 / 116))) / 7.787 : 108.883 * Math.pow(y2 - (b / 200), 3);
return [x, y, z];
}
};
//extend xyz
xyz.lab = function(xyz){
var x = xyz[0],
y = xyz[1],
z = xyz[2],
l, a, b;
x /= 95.047;
y /= 100;
z /= 108.883;
x = x > 0.008856 ? Math.pow(x, 1/3) : (7.787 * x) + (16 / 116);
y = y > 0.008856 ? Math.pow(y, 1/3) : (7.787 * y) + (16 / 116);
z = z > 0.008856 ? Math.pow(z, 1/3) : (7.787 * z) + (16 / 116);
l = (116 * y) - 16;
a = 500 * (x - y);
b = 200 * (y - z);
return [l, a, b];
};

9
src/common/bluetooth/color/rgb.js Normal file
View File

@ -0,0 +1,9 @@
module.exports = {
name: 'rgb',
min: [0,0,0],
max: [255,255,255],
channel: ['red', 'green', 'blue'],
alias: ['RGB']
};

138
src/common/bluetooth/color/xyz.js Normal file
View File

@ -0,0 +1,138 @@
var rgb = require('./rgb');
var xyz = {
name: 'xyz',
min: [0,0,0],
channel: ['X','Y','Z'],
alias: ['XYZ', 'ciexyz', 'cie1931']
};
/**
* Whitepoint reference values with observer/illuminant
*
* http://en.wikipedia.org/wiki/Standard_illuminant
*/
xyz.whitepoint = {
//1931 2°
2: {
//incadescent
A:[109.85, 100, 35.585],
// B:[],
C: [98.074, 100, 118.232],
D50: [96.422, 100, 82.521],
D55: [95.682, 100, 92.149],
//daylight
D65: [95.045592705167, 100, 108.9057750759878],
D75: [94.972, 100, 122.638],
//flourescent
// F1: [],
F2: [99.187, 100, 67.395],
// F3: [],
// F4: [],
// F5: [],
// F6:[],
F7: [95.044, 100, 108.755],
// F8: [],
// F9: [],
// F10: [],
F11: [100.966, 100, 64.370],
// F12: [],
E: [100,100,100]
},
//1964 10°
10: {
//incadescent
A:[111.144, 100, 35.200],
C: [97.285, 100, 116.145],
D50: [96.720, 100, 81.427],
D55: [95.799, 100, 90.926],
//daylight
D65: [94.811, 100, 107.304],
D75: [94.416, 100, 120.641],
//flourescent
F2: [103.280, 100, 69.026],
F7: [95.792, 100, 107.687],
F11: [103.866, 100, 65.627],
E: [100,100,100]
}
};
/**
* Top values are the whitepoint’s top values, default are D65
*/
xyz.max = xyz.whitepoint[2].D65;
/**
* Transform xyz to rgb
*
* @param {Array} xyz Array of xyz values
*
* @return {Array} RGB values
*/
xyz.rgb = function (_xyz, white) {
//FIXME: make sure we have to divide like this. Probably we have to replace matrix as well then
white = white || xyz.whitepoint[2].E;
var x = _xyz[0] / white[0],
y = _xyz[1] / white[1],
z = _xyz[2] / white[2],
r, g, b;
// assume sRGB
// http://www.brucelindbloom.com/index.html?Eqn_RGB_XYZ_Matrix.html
r = (x * 3.240969941904521) + (y * -1.537383177570093) + (z * -0.498610760293);
g = (x * -0.96924363628087) + (y * 1.87596750150772) + (z * 0.041555057407175);
b = (x * 0.055630079696993) + (y * -0.20397695888897) + (z * 1.056971514242878);
r = r > 0.0031308 ? ((1.055 * Math.pow(r, 1.0 / 2.4)) - 0.055)
: r = (r * 12.92);
g = g > 0.0031308 ? ((1.055 * Math.pow(g, 1.0 / 2.4)) - 0.055)
: g = (g * 12.92);
b = b > 0.0031308 ? ((1.055 * Math.pow(b, 1.0 / 2.4)) - 0.055)
: b = (b * 12.92);
r = Math.min(Math.max(0, r), 1);
g = Math.min(Math.max(0, g), 1);
b = Math.min(Math.max(0, b), 1);
return [r * 255, g * 255, b * 255];
}
/**
* RGB to XYZ
*
* @param {Array} rgb RGB channels
*
* @return {Array} XYZ channels
*/
rgb.xyz = function(rgb, white) {
var r = rgb[0] / 255,
g = rgb[1] / 255,
b = rgb[2] / 255;
// assume sRGB
r = r > 0.04045 ? Math.pow(((r + 0.055) / 1.055), 2.4) : (r / 12.92);
g = g > 0.04045 ? Math.pow(((g + 0.055) / 1.055), 2.4) : (g / 12.92);
b = b > 0.04045 ? Math.pow(((b + 0.055) / 1.055), 2.4) : (b / 12.92);
var x = (r * 0.41239079926595) + (g * 0.35758433938387) + (b * 0.18048078840183);
var y = (r * 0.21263900587151) + (g * 0.71516867876775) + (b * 0.072192315360733);
var z = (r * 0.019330818715591) + (g * 0.11919477979462) + (b * 0.95053215224966);
white = white || xyz.whitepoint[2].E;
return [x * white[0], y * white[1], z * white[2]];
};
module.exports = xyz;

146
src/common/bluetooth/command.js Normal file
View File

@ -0,0 +1,146 @@
import { uint32ToUint8Array, uint8ArrayToHex } from "./utils";
export class Command {
// 测量序号
static measureId = 1;
// 命令完整响应的长度
responseSize = 0;
// 命令发送的数据
content = new Uint8Array(0);
// 命令响应的数据
response = new Uint8Array(0);
// 等待响应的超时时间
timeout = 3000;
// 发送的数据是否需要生成和校验值
needSign = true;
/**
* @param {Uint8Array|ArrayBuffer|number[]} content
* @param {number} responseSize
* @param {number} timeout
* @param {boolean} needSign
*/
constructor(content, responseSize, timeout = 3000, needSign = true) {
if (content instanceof Uint8Array) {
this.content = content;
} else {
this.content = new Uint8Array(content);
}
this.responseSize = responseSize;
if (typeof timeout === 'number' && timeout >= 0) {
this.timeout = timeout;
}
this.needSign = needSign;
}
/**
* 返回一个 ArrayBuffer 数组, 用于发送
* @returns {ArrayBuffer[]}
*/
get data() {
if (this.content.length === 0) throw new Error('正文内容不能为空');
const data = [];
const b = new Uint8Array(this.content.buffer);
if (this.needSign) {
b[b.length - 1] = Command.getSign(b);
}
for (let i = 0; i < b.length; i += 20) {
data.push(b.slice(i, i + 20).buffer);
}
return data;
}
/** 是否接收完成 */
get isComplete() {
return this.response.length >= this.responseSize;
}
/** 是否有效 */
get isValid() {
return Command.getSign(this.response) === this.response[this.response.length - 1];
}
/**
* 填充响应数组
* @param {ArrayBuffer} buffer
*/
fillResponse(buffer) {
this.response = new Uint8Array([...this.response, ...(new Uint8Array(buffer))]);
}
/**
* 获取和校验值
* @param {ArrayBuffer|Uint8Array} buffer
*/
static getSign(buffer) {
const _b = buffer instanceof Uint8Array ? buffer : new Uint8Array(buffer);
let sum = 0;
_b.slice(0, _b.length - 1).forEach(i => sum += i);
return new Uint8Array([sum])[0];
}
// 唤醒命令
static WakeUp = new Command([0xf0], 0, 0, false);
/**
* 获取测量命令
* @param {number} mode
*/
static measure(mode = 0) {
Command.measureId += 1;
const measureId = uint32ToUint8Array(Command.measureId);
return new Command([0xbb, 1, mode, ...measureId, 0, 0xff, 0], 10, 1500);
}
/**
* 获取测量数据 (Lab)
* @param {number} mode
*/
static getLab(mode = 0) {
return new Command([0xbb, 3, mode, 0, 0, 0, 0, 0, 0xff, 0], 20, 1500);
}
/**
* 获取测量数据 (RGB)
* @param {number} mode
*/
static getRGB(mode = 0) {
return new Command([0xbb, 4, mode, 0, 0, 0, 0, 0, 0xff, 0], 20, 1500);
}
/**
* 获取测量的光谱数据
* @param {number} mode
*/
static getSpectral(mode = 0) {
return new Command([0xbb, 2, 0x10 + mode, 0, 0, 0 ,0 ,0, 0xff, 0], 200, 5000);
}
/**
* 白校准
* @param {number} check 是否判断校准成功 1 判断 0 不判断
*/
static whiteCalibrate(check = 1) {
return new Command([0xbb, 0x11, check, 0, 0, 0, 0, 0, 0xff, 0], 10, 1500);
}
/**
* 黑校准
* @param {number} check 是否判断校准成功
*/
static blackCalibrate(check = 1) {
return new Command([0xbb, 0x10, check, 0, 0, 0, 0, 0, 0xff, 0], 10, 1500);
}
/** 获取校准状态 */
static GetCalibrationInf = new Command([0xbb, 0x1e, 0, 0, 0, 0, 0, 0, 0xff, 0], 20, 1500);
static GetDeviceInf = new Command([0xbb, 0x12, 0x01, 0, 0, 0, 0, 0, 0xff, 0], 200, 5000);
}

70
src/common/bluetooth/utils.js Normal file
View File

@ -0,0 +1,70 @@
/**
* Uint32 转 Uint8 数组
* @param {number} n
*/
export function uint32ToUint8Array(n) {
return new Uint8Array(new Uint32Array([n]).buffer);
}
/**
* Uint8 数组 转 Float32
* @param {Uint8Array} raw
*/
export function uint8ArrayToFloat32(raw) {
return new Float32Array(raw.buffer)[0];
}
/**
* Uint8 数组 转 Uint16
* @param {Uint8Array} raw
*/
export function uint8ArrayToUint16(raw) {
return new Uint16Array(raw.buffer)[0];
}
/**
* Uint8 数组转 Uint32
* @param {Uint8Array} raw
* @returns
*/
export function uint8ArrayToUnit32(raw) {
return new Uint32Array(raw.buffer)[0];
}
/**
* 等待指定时长
* @param {number} duration
*/
export function waitFor(duration) {
return new Promise(resolve => {
setTimeout(resolve, duration);
});
}
/**
* uint8 数组转 hex 字符串
* @param {Uint8Array} raw
*/
export function uint8ArrayToHex(raw) {
const s = [];
raw.forEach(i => {
const b = i.toString(16);
s.push(b.length > 1 ? b : `0${b}`);
});
return s.join(' ');
}
// 二进制转字符串(ascii)
export function bufferToString(buffer) {
let str = "";
for (let code of buffer) {
if (code === 0) break;
str += utf82string(code);
}
return str;
}

90
src/components/bluetooth/LinkBlueTooth.tsx Normal file
View File

@ -0,0 +1,90 @@
import { View } from "@tarojs/components";
import { memo, useEffect, useMemo, useState } from "react";
import Taro from "@tarojs/taro";
import {useBluetooth} from "@/use/contextBlueTooth"
import SearchInput from "@/components/searchInput";
import Popup from "@/components/bluetooth/Popup"
import classnames from "classnames";
import styles from "./css/linkBlueTooth.module.scss"
export default memo(() => {
const {state, init, startScan, connect, disconnect} = useBluetooth()
useEffect(() => {
init()
}, [])
const [linkStatus, setLinkStatus] = useState(1)
useEffect(() => {
if(!state.available) {
setLinkStatus(1)
} else if(state.available&&state.connected?.name) {
setLinkStatus(3)
} else {
setLinkStatus(2)
}
console.log('aaa:::',state.connected)
}, [state.available, state.connected])
const linkName = useMemo(() => {
return state.connected?.localName||''
}, [state.connected])
//链接设备
const onLinkListen = (item) => {
if(!state.connected&&!state.connecting)
connect(item)
}
const [popupShow, setPopupShow] = useState(false)
//显示设备列表
const onFindDevice = () => {
if(linkStatus == 1) {
Taro.showToast({
title:'请打开蓝牙',
icon:'none'
})
} else {
setPopupShow(true)
onFindEven()
}
}
const onFindEven = () => {
if(!state.discovering&&!state.connected&&!state.connecting)
startScan()
}
//断开链接
const onDisconnect = () => {
disconnect()
setPopupShow(false)
}
return (
<>
<View className={styles.main}>
<SearchInput title="蓝牙设备" showIcon={true}>
<View className={styles.bluetooth_link} onClick={onFindDevice}>
<View className={classnames(styles.link_status, linkStatus == 3 &&styles.link_statused, linkStatus == 2&&styles.link_statused_no)}></View>
{
linkStatus == 1&&<View className={classnames(styles.link_name, styles.link_name_no)}>请开启蓝牙</View>||
linkStatus == 2&&<View className={classnames(styles.link_name,styles.link_name_no_link) }>未连接设备</View>||
linkStatus == 3&&<View className={classnames(styles.link_name)}>{linkName}</View>
}
</View>
</SearchInput>
<Popup
state={state}
show={popupShow}
onClose={() => setPopupShow(false)}
onLink={item => onLinkListen(item)}
onOff={onDisconnect}
onFind={onFindEven}
/>
</View>
</>
);
})

73
src/components/bluetooth/Popup.tsx Normal file
View File

@ -0,0 +1,73 @@
import { ScrollView, View } from "@tarojs/components"
import { memo, useEffect, useState } from "react"
import Loading from "@/components/loading"
import style from "./css/popup.module.scss"
interface params {
state: any,
show: Boolean,
onClose: (Boolean) => void,
onLink: (any) => void,
children?: React.ReactNode
onOff: () => void,
onFind: () => void,
}
export default memo(({state, show=false, onClose, onLink, onOff, onFind}:params) => {
const [popupShow, setPopupShow] = useState(show)
useEffect(() => {
setPopupShow(show)
}, [show])
const onCloseListener = () => {
onClose(false)
}
return (
<>
{
popupShow&&<View className={style.popup}>
<View className={style.content}>
<View className={style.title}>搜索设备</View>
<View className={style.list}>
<ScrollView scrollY className={style.scroll}>
{
(state.devices&&state.devices.length > 0)&&state?.devices.map(item => {
return (
<View className={style.item} onClick={() => onLink(item)}>
<View>{item.name}</View>
{
(!state.connecting&&!state.connected)&&<View >链接</View>||
(state.connecting&&item.deviceId == state.connecting.deviceId)&&<View className={style.link_ing}>正在链接...</View>||
(state.connected&&item.deviceId == state.connected.deviceId)&&<View className={style.link_success}>链接成功</View>
}
</View>
)
})||
<View className={style.noDevice}>
{
(!state.discovering)&& <>
<View>暂无设备,请按以下条件检查</View>
<View className={style.n_item}>1.请确保取色仪处于激活状态</View>
<View className={style.n_item}>2.请确保取色仪没有链接其他设备</View>
<View className={style.n_item}>3.请打开手机定位</View>
</>||
<View>设备搜索中</View>
}
</View>
}
</ScrollView>
</View>
{
state.connected&&<View className={`${style.footer} ${style.footer_off}`} onClick={onOff}>断开链接</View>||
(!state.connected&&state.discovering)&&<View className={`${style.footer} ${style.finding}`}>搜索中<Loading width={30} color='orange'/></View>||
<View className={style.footer} onClick={onFind}>重新搜索</View>
}
</View>
<View className={style.mask} onClick={onCloseListener}></View>
</View>
}
</>
)
})

30
src/components/bluetooth/css/linkBlueTooth.module.scss Normal file
View File

@ -0,0 +1,30 @@
.main{
.bluetooth_link{
display: flex;
align-items: center;
.link_status{
width: 12px;
height: 12px;
background: #f02409;
border-radius: 50%;
}
.link_statused{
background: #07C160;
}
.link_statused_no{
background: #f0ec09;
}
.link_name{
font-size: $font_size;
margin-left: 20px;
}
.link_name_no{
color: #f02409;
}
.link_name_no_link{
color: #f0ec09;
}
}
}

90
src/components/bluetooth/css/popup.module.scss Normal file
View File

@ -0,0 +1,90 @@
.popup{
width: 100vw;
height: 100vh;
position: absolute;
top: 0;
left: 0;
.mask{
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
position: fixed;
top:0;
left:0;
z-index: 9;
}
.content{
z-index: 99;
background-color: #fff;
width: 75vw;
height: 600px;
position: fixed;
top: 50%;
left: 50%;
border-radius: 20px;
transform: translateX(-50%) translateY(-50%);
display: flex;
flex-direction: column;
font-size: 28px;
.title{
text-align: center;
margin: 20px;
}
.list{
height: 480px;
padding: 0 20px;
.scroll{
height: 100%;
}
.item{
margin-bottom: 20px;
display: flex;
justify-content: space-between;
border-bottom: 1px dashed #ccc;
padding: 15px 0;
color: #3b3b3b;
@mixin link{
font-size: 25px;
}
.link_success{
@include link;
color: green;
}
.link_ing {
color: orange;
}
}
.noDevice{
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #a8a8a8;
.n_item{
width: 100%;
text-align: left;
margin-top: 20px;
padding: 0 30px;
box-sizing: border-box;
}
}
}
.footer{
text-align: center;
padding: 20px 0;
background-color: #f1f1f1;
border-radius: 0 0 10px 10px;
display: flex;
justify-content: center;
align-items: center;
}
.finding{
color: orange;
}
.footer_off{
color: red;
}
}
}

3
src/components/search/index.module.scss
View File

@ -20,6 +20,7 @@
border-radius: 50px;
padding: 0 60px;
box-sizing: border-box;
z-index:0;
&::-webkit-input-placeholder { /* WebKit browsers */
color: #999;
font-size: 16px;
@ -55,7 +56,7 @@
position: absolute;
left: 10px;
margin-right: 0;
z-index: 10;
}
.icon_out{
margin-right: 10px;

22
src/components/searchInput/index.module.scss
View File

@ -4,20 +4,24 @@
align-items: center;
min-height: 62px;
padding: 10px 0;
border-bottom: 1px solid #f3f3f3;
border-bottom: 1px solid #F0F0F0;
.searchInput_title {
width: 150px;
min-height: 50px;
font-size: 28px;
border-right: 1px solid #f3f3f3;
color: $color_font_on;
border-right: 1px solid #F0F0F0;
color: $color_font_two;
margin-right: 20px;
padding-left: 20px;
&::before{
content: "";
height: 50px;
width: 1px;
background-color: #f3f3f3;
}
display: flex;
align-items: center;
// &::before{
// content: "";
// height: 50px;
// width: 1px;
// background-color: #F0F0F0;
// }
}
.searchInput_con{
flex:1;

11
src/components/searchInput/index.tsx
View File

@ -1,5 +1,5 @@
import { Input, View } from "@tarojs/components";
import { memo, useDebugValue, useMemo } from "react";
import { memo, ReactHTMLElement, ReactNode, useDebugValue, useMemo } from "react";
import styles from './index.module.scss';
type Params = {
@ -10,7 +10,8 @@ type Params = {
showTitle?: false|true,
showBorder?: false|true,
changeOnInput?: (string) => void,
clickOnInput?: () => void
clickOnInput?: () => void,
children?: ReactNode
}
@ -37,9 +38,11 @@ export default memo((props: Params) => {
<View className={styles.searchInput_main} style={stylen}>
{showTitle&&<View className={styles.searchInput_title}>{title}</View>}
<View className={styles.searchInput_con}>
<Input disabled={disabled} placeholder={placeholder} onClick={() => clickOnInput?.()} onInput={(e) => changeOnInput?.(e.detail.value)}/>
{!props.children&&<Input disabled={disabled} placeholder={placeholder} onClick={() => clickOnInput?.()} onInput={(e) => changeOnInput?.(e.detail.value)}/>
||<View>{props.children}</View>
}
</View>
{showIcon&&<View className={`iconfont icon-more ${styles.icon_more_self}`}></View>}
{showIcon&&<View className={`iconfont icon-jiantou ${styles.icon_more_self}`}></View>}
</View>
)
})

24
src/components/tabs/index.module.scss
View File

@ -1,20 +1,28 @@
.tabs_main{
display: flex;
width: 100%;
.tabs_scroll{
width: 100%;
display: flex;
white-space: nowrap;
border-bottom: 1px solid $color_font_two;
border-top: 1px solid $color_font_two;
height: 102px;
::-webkit-scrollbar {
display:none;
width:0;
height:0;
color:transparent;
}
.tabs_item{
flex:1;
display: inline-block;
padding: 10px 20px;
height: 100%;
box-sizing: border-box;
position: relative;
font-size: 24rpx;
background-color: #F0F0F0;
border-radius: 24rpx;
min-width: 126rpx;
height: 46.93rpx;
text-align: center;
line-height: 46.93rpx;
color: #707070;
margin-right: 20px;
.tabs_item_con{
height: 100%;
display: flex;

9
src/components/tabs/index.tsx
View File

@ -13,10 +13,12 @@ type Params = {
list?: ListProps[],
defaultValue?: number|string,
children?: ReactNode,
tabsOnClick?: (ListProps) => void
tabsOnClick?: (ListProps) => void,
style?:Object,
}
export default memo(({list = [], defaultValue = 0, tabsOnClick}: Params) => {
export default memo(({list = [], defaultValue = 0, tabsOnClick, style={}}: Params) => {
const [selected, setSelected] = useState(defaultValue)
const [tabId, setTabId] = useState('')
@ -46,8 +48,7 @@ export default memo(({list = [], defaultValue = 0, tabsOnClick}: Params) => {
list.map((item, index) => {
return (
<View key={item.value} id={`tabs_${item.value}`} className={styles.tabs_item} onClick={() => clickEvent({item,index})}>
<View className={classnames(styles.tabs_item_con, {[styles.tabs_item_select]:selected == item.value})}>{item.title}</View>
{(selected == item.value) && <View className={styles.tabs_index}></View>}
<View className={classnames(styles.tabs_item_con, {[styles.tabs_item_select]:selected == item.value})}>{item.title}</View>
</View>
)
})

15
src/pages/classList/index.module.scss
View File

@ -15,6 +15,8 @@
color: $color_font_three;
.text_one{
color: $color_main;
display: flex;
align-items: center;
}
.text_two{
position: relative;
@ -33,20 +35,11 @@
}
}
}
.filter_btn{
.filter_btns{
display: flex;
justify-content: space-between;
padding: 20px;
view{
font-size: $font_size_medium;
background-color: #F0F0F0;
border-radius: 24px;
width: 126px;
height: 46.93px;
text-align: center;
line-height: 46.93px;
color: $color_font_three;
}
.selected{
background-color: #ecf5ff;
border: 2px solid #cde5ff;

25
src/pages/classList/index.tsx
View File

@ -7,9 +7,22 @@ import Popup from "@/components/popup";
import styles from './index.module.scss'
import { useState } from "react";
import Filter from "./components/filter";
import Tabs from "@/components/tabs";
import SortBtn from "@/components/sortBtn";
export default () => {
const [showPopup, setShowPopup] = useState(false)
const [selectList, setSelectList] = useState([
{title: '系列', value:1},
{title: '系列', value:2},
{title: '系列', value:3},
{title: '系列', value:4},
{title: '系列', value:6},
{title: '系列', value:7},
{title: '系列', value:8},
{title: '系列', value:9},
{title: '系列', value:10},
])
return (
<View className={styles.main}>
<View className={styles.search}>
@ -17,17 +30,17 @@ export default () => {
</View>
<View className={styles.filter}>
<View className={styles.filter_all}>
<View className={styles.text_one}>综合</View>
<View className={styles.text_one}>
<Text>综合</Text>
<SortBtn status="top"/>
</View>
<View className={styles.text_two} onClick={() => setShowPopup(true)}>
<Text>筛选</Text>
<Text className={classnames('iconfont icon-bianji_bianji', styles.miconfont)}></Text>
</View>
</View>
<View className={styles.filter_btn}>
<View>系列</View>
<View>幅宽</View>
<View>克重</View>
<View className={styles.selected}>成分</View>
<View className={styles.filter_btns}>
<Tabs list={selectList} style={{}}/>
</View>
</View>
<View className={styles.list}>

49
src/pages/searchList/components/selectData/index.module.scss Normal file
View File

@ -0,0 +1,49 @@
.tabs_main{
display: flex;
width: 100%;
.tabs_scroll{
width: 100%;
display: flex;
white-space: nowrap;
::-webkit-scrollbar {
display:none;
width:0;
height:0;
color:transparent;
}
.tabs_item{
flex:1;
display: inline-block;
font-size: 24rpx;
background-color: #F0F0F0;
border-radius: 24rpx;
min-width: 126rpx;
height: 46.93rpx;
text-align: center;
line-height: 46.93rpx;
color: #707070;
margin-right: 20px;
.tabs_item_con{
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: $font_size_medium;
}
.tabs_index{
height: 5px;
width: 100%;
background-color:$color_main;
position:absolute;
bottom: 0;
left:0;
border-radius: 50px;
}
.tabs_item_select{
color: $color_main;
}
}
}
}

57
src/pages/searchList/components/selectData/index.tsx Normal file
View File

@ -0,0 +1,57 @@
import { ScrollView, View } from "@tarojs/components";
import { memo, useState, ReactNode, useEffect } from "react";
import classnames from "classnames";
import styles from './index.module.scss'
type ListProps = {
title: string,
value: number
}
type Params = {
list?: ListProps[],
defaultValue?: number|string,
children?: ReactNode,
tabsOnClick?: (ListProps) => void,
}
export default memo(({list = [], defaultValue = 0, tabsOnClick}: Params) => {
const [tabId, setTabId] = useState('')
useEffect(() => {
const index = list?.findIndex(item => {
return item.value == defaultValue
})
if(index !== -1) {
const num = index > 0?( index - 1) : 0
setTabId(list[num].value.toString())
}
}, [])
const clickEvent = ({item, index}: {item:ListProps, index:number}) => {
tabsOnClick?.(item)
setTabId(index.toString())
}
return (
<>
<View className={styles.tabs_main} id="tabs_main_ref">
<ScrollView className={styles.tabs_scroll} scrollX scrollWithAnimation={true} scrollIntoView={`tabs_${tabId}`}>
<View className={styles.tabs_scroll}>
{
list.map((item, index) => {
return (
<View key={index} id={`tabs_${index}`} className={styles.tabs_item} onClick={() => clickEvent({item,index})}>
<View className={classnames(styles.tabs_item_con)}>{item.title}</View>
</View>
)
})
}
</View>
</ScrollView>
</View>
</>
)
})

36
src/pages/searchList/hightSearchList.module.scss
View File

@ -5,13 +5,30 @@
background-color: $color_bg_one;
.search{
padding: 20px;
.SearchInput{
background-color: #fff;
padding: 10px 20px;
box-sizing: border-box;
border-radius: 10px;
}
.bluetooth_color{
.color_bock{
width: 100px;
height: 46px;
}
.color_bock_no{
font-size: $font_size_medium;
color: $color_font_three;
}
}
}
.filter{
.filter_all {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 50px;
padding: 20px 130px;
font-size: $font_size_medium;
color: $color_font_three;
.text_zh, .text_sc{
@ -149,6 +166,23 @@
height: 224px;
background: #e5ad3a;
border-radius: 20px 20px 0px 0px;
position: relative;
image{
width: 100%;
height: 100%;
border-radius: 20px 20px 0px 0px;
}
.color_num {
background: rgba(0,0,0, 0.5);
border-radius: 0px 50px 0px 0px;
font-size: $font_size_min;
color: #fff;
position: absolute;
left:0;
bottom:0;
padding: 5px 20px;
box-sizing: border-box;
}
}
}
.product_info{

57
src/pages/searchList/hightSearchList.tsx
View File

@ -1,12 +1,17 @@
import { ScrollView, Text, View } from "@tarojs/components"
import { Image, ScrollView, Text, View } from "@tarojs/components"
import classnames from "classnames";
import Search from '@/components/search'
import Filter from "@/components/filter";
import InfiniteScroll from '@/components/infiniteScroll'
import SortBtn from "@/components/sortBtn";
import SearchInput from "@/components/searchInput";
import LinkBlueTooth from "@/components/bluetooth/LinkBlueTooth";
import {useBluetooth} from "@/use/contextBlueTooth"
import {toRgb} from '@/common/bluetooth/color/colorSpace'
import Tabs from "@/components/tabs";
import styles from './hightSearchList.module.scss'
import { useCallback, useState } from "react";
import { useCallback, useEffect, useState } from "react";
import Taro, { useReady } from "@tarojs/taro";
export default () => {
const [showFilter, setShowFilter] = useState(false)
@ -29,10 +34,40 @@ export default () => {
setScrollStatus(false)
}
},[])
const {state, measureAndGetLab} = useBluetooth()
const getLab = () => {
if(state.connected) {
measureAndGetLab()
} else {
Taro.showToast({
title: '请链接设备',
icon: 'none'
})
}
}
const [blueToothColor, setBlueToothColor] = useState('')
useEffect(() => {
if(state.deviceLab) {
console.log('颜色：',state.deviceLab)
const rgb = toRgb([state.deviceLab.L, state.deviceLab.a, state.deviceLab.b])
setBlueToothColor(`rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`)
}
}, [state.deviceLab])
return (
<View className={styles.main}>
<View className={styles.search}>
<Search placeIcon="out" btnStyle={{color: '#007AFF'}}/>
<View className={styles.SearchInput}>
<LinkBlueTooth/>
<SearchInput title="提取颜色" showBorder={false}>
<View className={styles.bluetooth_color} onClick={() => getLab()}>
{blueToothColor&&<View className={classnames(styles.color_bock)} style={{background:blueToothColor}}></View>||
<View className={classnames(styles.color_bock_no)} >请取色</View>
}
</View>
</SearchInput>
</View>
</View>
<View className={styles.filter}>
<View className={styles.filter_all}>
@ -44,10 +79,7 @@ export default () => {
<Text>收藏</Text>
<SortBtn status="top"/>
</View>
<View className={styles.text_ss} >
<Text>高级搜索</Text>
<Text className={classnames('iconfont icon-sousuo', styles.miconfont)}></Text>
</View>
</View>
<View className={styles.filter_btn_con}>
<ScrollView scrollX className={styles.filter_scroll}>
@ -76,14 +108,13 @@ export default () => {
<View className={styles.product_list}>
{new Array(9).fill(' ').map(item => {
return <View className={styles.product_item}>
<View className={styles.product_img}></View>
<View className={styles.product_img}>
<Image mode="aspectFill" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F811%2F021315104H2%2F150213104H2-3-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651817947&t=5467a207f845ddfc7737d55934e6b26d"></Image>
<View className={styles.color_num}>25色</View>
</View>
<View className={styles.product_info}>
<View className={styles.title}>0770#21S精棉平纹</View>
<View className={styles.tag_list}>
<View className={styles.tag}>160cm</View>
<View className={styles.tag}>110g</View>
</View>
<View className={styles.introduce}>67.6%棉24%涤纶6.4%氨纶</View>
<View className={styles.introduce}>平纹系列</View>
</View>
</View>
})}

18
src/pages/searchList/searchList.module.scss
View File

@ -57,6 +57,7 @@
.filter_scroll{
flex:1;
width: 0;
padding-left: 20px;
::-webkit-scrollbar {
display:none;
width:0;
@ -149,6 +150,23 @@
height: 224px;
background: #e5ad3a;
border-radius: 20px 20px 0px 0px;
position: relative;
image{
width: 100%;
height: 100%;
border-radius: 20px 20px 0px 0px;
}
.color_num {
background: rgba(0,0,0, 0.5);
border-radius: 50px 0px 0px 0px;
font-size: $font_size_min;
color: #fff;
position: absolute;
right:0;
bottom:0;
padding: 5px 20px;
box-sizing: border-box;
}
}
}
.product_info{

35
src/pages/searchList/searchList.tsx
View File

@ -1,10 +1,12 @@
import { ScrollView, Text, View } from "@tarojs/components"
import { Image, ScrollView, Text, View } from "@tarojs/components"
import classnames from "classnames";
import Search from '@/components/search'
import Filter from "@/components/filter";
import InfiniteScroll from '@/components/infiniteScroll'
import SortBtn from "@/components/sortBtn";
import SelectData from "./components/selectData";
import Tabs from "@/components/tabs";
import { goLink } from "@/common/common";
import styles from './searchList.module.scss'
import { useCallback, useState } from "react";
@ -15,11 +17,11 @@ export default () => {
{title: '系列', value:2},
{title: '系列', value:3},
{title: '系列', value:4},
{title: '系列', value:5},
{title: '系列', value:5},
{title: '系列', value:5},
{title: '系列', value:5},
{title: '系列', value:5},
{title: '系列', value:6},
{title: '系列', value:7},
{title: '系列', value:8},
{title: '系列', value:9},
{title: '系列', value:10},
])
const [scrollStatus, setScrollStatus] = useState(false)
const onscroll = useCallback((e) => {
@ -44,22 +46,16 @@ export default () => {
<Text>收藏</Text>
<SortBtn status="top"/>
</View>
<View className={styles.text_ss} >
<View className={styles.text_ss} onClick={() => goLink('/pages/searchList/hightSearchList')}>
<Text>高级搜索</Text>
<Text className={classnames('iconfont icon-sousuo', styles.miconfont)}></Text>
</View>
</View>
<View className={styles.filter_btn_con}>
<ScrollView scrollX className={styles.filter_scroll}>
<View className={styles.filter_btn}>
<View>系列</View>
<View>幅宽</View>
<View>克重</View>
<View>克重</View>
<View>克重</View>
<View className={styles.selected}>成分</View>
</View>
</ScrollView>
<View className={styles.filter_scroll}>
<SelectData list={selectList}/>
</View>
<View className={styles.filter_more} onClick={() => setShowFilter(true)}>
<Text>筛选</Text>
<Text className={classnames('iconfont icon-shaixuan', styles.miconfont)}></Text>
@ -76,7 +72,10 @@ export default () => {
<View className={styles.product_list}>
{new Array(9).fill(' ').map(item => {
return <View className={styles.product_item}>
<View className={styles.product_img}></View>
<View className={styles.product_img}>
<Image mode="aspectFill" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F811%2F021315104H2%2F150213104H2-3-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651817947&t=5467a207f845ddfc7737d55934e6b26d"></Image>
<View className={styles.color_num}>25色</View>
</View>
<View className={styles.product_info}>
<View className={styles.title}>0770#21S精棉平纹</View>
<View className={styles.tag_list}>

477
src/use/contextBlueTooth.tsx Normal file
View File

@ -0,0 +1,477 @@
import React, {useRef, useState } from "react"
import Taro from "@tarojs/taro";
import { Command } from "@/common/bluetooth/command";
import { uint8ArrayToFloat32, uint8ArrayToHex, waitFor } from "@/common/bluetooth/utils";
interface params {
init: () => void
state: Object,
startScan: () => void,
measureAndGetLab: () => any,
getAdapterState: () => void,
connect: (any) => void,
disconnect: () => void
}
const Context = React.createContext<params|unknown>(null)
interface stateStype {
listeners: any,
discovering: boolean,
available: boolean,
connected: any,
connecting: any,
serviceRule: any,
serviceId: any,
characteristicRule: any,
characteristicId: any,
/** 正在执行的命令 */
command: any,
responseResolve: any,
responseReject: any,
responseTimer: any,
/** 是否显示蓝牙调试信息 */
debug: any,
//搜索到的设备
devices: any,
//取色仪主动返回的数据
deviceLab: any
}
let stateObj: stateStype = {
/** 事件监听器 */
listeners: new Set(),
/** 正在扫描设备 */
discovering: false,
/** 蓝牙是否可用 */
available: true,
/** 当前连接的设备 */
connected: null,
/** 正在连接的设备 */
connecting: null,
serviceRule: /^0000FFE0/,
serviceId: null,
characteristicRule: /^0000FFE1/,
characteristicId: null,
/** 正在执行的命令 */
command: null,
responseResolve: null,
responseReject: null,
responseTimer: null,
/** 是否显示蓝牙调试信息 */
debug: true,
//搜索到的设备
devices: [],
//取色仪主动返回的数据
deviceLab: null
}
export default (props) => {
let refStatus = useRef(stateObj)
let [state, setState] = useState(refStatus.current)
const changeStatus = (obj:Object): void => {
refStatus.current = {...refStatus.current, ...obj}
setState({...refStatus.current})
}
const init = async () => {
try{
await openAdapter();
}catch(e) {
changeStatus({available:false})
}
// 绑定事件通知
Taro.onBluetoothAdapterStateChange(res => {
emit({ type: 'stateUpdate', detail: res });
});
Taro.onBLEConnectionStateChange(res => {
emit({ type: res.connected ? 'connected' : 'disconnect', detail: res });
});
Taro.onBLECharacteristicValueChange(({ value }) => notifySubscriber(value));
subscribe(async ev => {
if (ev.type === 'stateUpdate') {
// 蓝牙状态发生的变化
changeStatus({discovering:ev.detail.discovering, available:ev.detail.available})
} else if (ev.type === 'disconnect' && refStatus.current.connected && refStatus.current.connected.deviceId === ev.detail.deviceId) {
// 断开连接
changeStatus({
connected:null,
serviceId:null,
characteristicId:null,
deviceLab:null,
devices:[]
})
Taro.showToast({ icon: 'none', title: '蓝牙连接已断开' });
} else if (ev.type === 'connected' && refStatus.current.connecting) {
// 连接成功
changeStatus({connected: refStatus.current.connecting, connecting: null})
Taro.showToast({ title: '蓝牙已连接' });
} else if (ev.type === 'measure') {
//监听取色仪主动推送lab
await measureAndGetLab()
}
});
}
/** 打开蓝牙适配器 */
const openAdapter = () => {
return new Promise((resolve, reject) => {
Taro.openBluetoothAdapter({
success: resolve,
fail: reject
});
});
}
/**
* 推送事件
* @param {{type: string; data: any}} event
*/
const emit = (event) => {
refStatus.current.listeners.forEach(cb => {
cb && cb(event);
});
}
const subscribe = (cb) => {
if (cb) {
changeStatus({
listeners: refStatus.current.listeners.add(cb)
})
}
}
/**
* 获取蓝牙适配器状态
* @returns {Promise<{discovering: boolean; available: boolean}>}
*/
const getAdapterState = () => {
return new Promise((resolve, reject) => {
Taro.getBluetoothAdapterState({
success: resolve,
fail: reject
})
})
}
/**
* 启动设备扫描
* @param {(res: { devices: { name: string, deviceId: string, RSSI: number }[] }) => void} cb
* @param {number} duration
*/
const startScan = (duration = 30000) => {
console.log('开始寻找')
changeStatus({devices:[]})
Taro.onBluetoothDeviceFound(getDevices);
return new Promise((resolve, reject) => {
Taro.startBluetoothDevicesDiscovery({
allowDuplicatesKey: true,
success: resolve,
fail: reject
});
if (duration > 0) {
setTimeout(() => {
Taro.offBluetoothDeviceFound(getDevices);
Taro.stopBluetoothDevicesDiscovery();
console.log("停止搜索")
}, duration);
}
});
}
//获取搜索到的设备
const getDevices = (res) => {
res.devices.forEach(device => {
// 排除掉已搜索到的设备和名称不合法的设备, 将新发现的设备添加到列表中
if (/^CM/.test(device.name) && !refStatus.current.devices.find(i => i.deviceId === device.deviceId)) {
changeStatus({devices: [ ...refStatus.current.devices, device ]})
}
});
}
/**
* 连接设备
* @param {{ name: string, deviceId: string, RSSI: number }} device
*/
const connect = async (device) => {
try {
changeStatus({connecting: device})
console.log('connecting::', device)
await createConnection(device.deviceId);
await discoverService(device.deviceId);
await discoverCharacteristic(device.deviceId);
await notifyCharacteristicValueChange(device.deviceId);
} catch (e) {
changeStatus({connecting: null})
Taro.showToast({ icon: 'none', title: '蓝牙连接失败' });
throw e;
}
}
/** 断开当前连接的设备 */
const disconnect = async () => {
if (!refStatus.current.connected && !refStatus.current.connecting) return;
if (refStatus.current.connected) {
await closeConnection(refStatus.current.connected.deviceId);
resetCommand();
changeStatus({
connected: null,
serviceId: null,
characteristicId: null,
devices: [],
deviceLab: null
})
}
if (refStatus.current.connecting) {
await closeConnection(refStatus.current.connecting.deviceId);
changeStatus({connecting:null})
}
}
/** 创建 BLE 连接 */
function createConnection(deviceId) {
return new Promise((resolve, reject) => {
Taro.createBLEConnection({
deviceId,
timeout: 2000,
success: resolve,
fail: reject
});
});
}
/** 关闭 BLE 连接 */
function closeConnection(deviceId) {
return new Promise((resolve, reject) => {
Taro.closeBLEConnection({
deviceId,
success: resolve,
fail: reject
});
});
}
/** 搜索服务 */
function discoverService(deviceId) {
return new Promise((resolve, reject) => {
Taro.getBLEDeviceServices({
deviceId,
success: ({ services }) => {
const service = services.find(i => refStatus.current.serviceRule.test(i.uuid));
if (!service) {
reject(new Error('服务不可用'));
} else {
changeStatus({serviceId: service.uuid})
resolve(service);
}
},
fail: reject
});
});
}
/** 搜索特征 */
function discoverCharacteristic(deviceId) {
return new Promise((resolve, reject) => {
Taro.getBLEDeviceCharacteristics({
deviceId,
serviceId: refStatus.current.serviceId,
success: ({ characteristics }) => {
const characteristic = characteristics.find(i => refStatus.current.characteristicRule.test(i.uuid));
if (!characteristic) {
reject(new Error('特征不可用'));
} else {
changeStatus({characteristicId: characteristic.uuid})
resolve(characteristic);
}
},
fail: reject
})
});
}
/** 启动特征通知 */
function notifyCharacteristicValueChange(deviceId, stateParm = true) {
return new Promise((resolve, reject) => {
Taro.notifyBLECharacteristicValueChange({
deviceId,
serviceId: refStatus.current.serviceId,
characteristicId: refStatus.current.characteristicId,
state:stateParm,
success: resolve,
fail: reject
});
});
}
/**
* 通知订阅器
* @param {ArrayBuffer} buffer
*/
function notifySubscriber(buffer) {
if (refStatus.current.command) {
if (refStatus.current.debug) {
console.log(`[BLE RESP] ${uint8ArrayToHex(new Uint8Array(buffer))}`);
}
refStatus.current.command.fillResponse(buffer);
if (refStatus.current.command.isComplete) {
if (refStatus.current.command.isValid && refStatus.current.responseResolve) {
refStatus.current.responseResolve(refStatus.current.command.response);
} else if (!refStatus.current.command.isValid) {
refStatus.current.responseReject(new Error('无效数据'));
}
resetCommand();
}
} else {
const uint8Array = new Uint8Array(buffer);
if (uint8Array[0] === 0xbb && uint8Array[1] === 1 && uint8Array[3] === 0) {
const ev = { type: 'measure', detail: { mode: uint8Array[2] } };
emit(ev);
}
}
}
/**
* 发送命令
* @param {Command}} command
* @returns {Promise<Uint8Array>}
*/
function exec(command) {
return new Promise(async (resolve, reject) => {
if (refStatus.current.command) {
reject(new Error('正在执行其他命令'));
} else {
try {
refStatus.current.command = command;
const data = command.data;
for (let i = 0; i < data.length; i++) {
await sendData(data[i]);
}
if (command.responseSize <= 0) {
resolve(true);
resetCommand();
} else {
refStatus.current.responseReject = reject;
refStatus.current.responseResolve = resolve;
refStatus.current.responseTimer = setTimeout(() => {
reject(new Error('命令响应超时'));
resetCommand();
}, command.timeout);
}
} catch (e) {
reject(e);
}
}
});
}
/**
* 发送命令
* @param {ArrayBuffer} buffer
*/
function sendData(buffer) {
if (refStatus.current.debug) {
console.log(`[BLE SEND] ${uint8ArrayToHex(new Uint8Array(buffer))}`);
}
return new Promise((resolve, reject) => {
console.log('current:::',refStatus.current)
Taro.writeBLECharacteristicValue({
deviceId: refStatus.current.connected.deviceId,
serviceId: refStatus.current.serviceId,
characteristicId: refStatus.current.characteristicId,
value: buffer,
success: resolve,
fail: reject
})
});
}
function resetCommand() {
if (refStatus.current.responseTimer) {
clearTimeout(refStatus.current.responseTimer);
}
changeStatus({
command: null,
responseResolve: null,
responseReject: null,
responseTimer: null
})
}
/**
* 测量
* @param {number} mode
* @returns {Promise}
*/
async function measure (mode = 0) {
console.log('current1:::',Command.WakeUp)
await exec(Command.WakeUp);
console.log('current2:::',Command.WakeUp)
await waitFor(50);
console.log('current3:::',Command.WakeUp)
return await exec(Command.measure(mode));
}
/**
* 获取测量的 lab 值
* @param {number} mode
* @returns {Promise<{ L: number, a: number, b: number }>}
*/
async function getLab(mode = 0) {
await exec(Command.WakeUp);
await waitFor(50);
const data: any = await exec(Command.getLab(mode));
return {
L: uint8ArrayToFloat32(data.slice(5, 9)),
a: uint8ArrayToFloat32(data.slice(9, 13)),
b: uint8ArrayToFloat32(data.slice(13, 17)),
};
}
/**
* 测量并获取 lab 值
* @param {number} mode
* @returns {Promise<{L: number, a: number, b: number}>}
*/
async function measureAndGetLab(mode = 0) {
await measure(mode);
await waitFor(50);
const lab = await getLab(mode);
console.log('lab2::',lab)
changeStatus({deviceLab:lab})
return lab
}
return <Context.Provider children={props.children} value={{
init,
state,
startScan,
measureAndGetLab,
getAdapterState,
connect,
disconnect
}} />
}
export const useBluetooth = () => {
const res = React.useContext<any>(Context)
if(res) {
return {...res}
} else {
return {}
}
}