【一步步开发AI运动APP】十二、自定义扩展新运动项目2

简介: 本文介绍如何基于uni-app运动识别插件实现“双手并举”自定义扩展运动,涵盖动作拆解、姿态检测规则构建及运动分析器代码实现,助力开发者打造个性化AI运动APP。

之前我们为您分享了【一步步开发AI运动小程序】开发系列博文,通过该系列博文,很多开发者开发出了很多精美的AI健身、线上运动赛事、AI学生体测、美体、康复锻炼等应用场景的AI运动小程序;为了帮助开发者继续深耕AI运动领域市场,今天开始我们将为您分享新系列【一步步开发AI运动APP】的博文,带您开发性能更强、体验更好的AI运动APP。

上一篇为您介绍了uni-app版运动识别插件的自定义扩展运动的基本架构、与小程序版运动识别插件的运动扩展差异,本篇我们就以双手并举为例带你来实现一个扩展运动。

一、动作姿态拆解

image.png

如上图所示,这个运动主要为手部摆动动,包含2个分动作姿态,起始动作姿态1为双手垂放于左右两侧站立,结束动作姿态2双手举过头顶撑直为结束动作,完成动作2时计数加一,如此反复运动。

二、定义运动检测规则

接下来我们为这两个拆解姿态分别构建检测规则,检测规则及自定义姿态的检测可以参考本系列博文的前面章节及插件的pose-calc指南文档。

  • 先构建动作姿态1手垂于两侧并站立的动作的检测规则:

    {
         
       name: '双手下垂',
       calc: '$and',
           rules: [{
         
               name: '站立姿态',
               calc: 'stand',
               offset: 25
           }, {
         
               name: '左腋夹角',
               calc: 'match-angle',
               angleKey: 'left_shoulder',
               secondKey: 'left_hip',
               thirdKey: 'left_wrist',
               angle: 30,
               offset: 30
           }, {
         
               name: '左手下垂',
               calc: 'vertical',
               upperKey: 'left_shoulder',
               centerKey: 'left_elbow',
               lowerKey: 'left_wrist',
               offset: 25
           }, {
         
               name: '右腋夹角',
               calc: 'match-angle',
               angleKey: 'right_shoulder',
               secondKey: 'right_hip',
               thirdKey: 'right_wrist',
               angle: 30,
               offset: 30
           }, {
         
               name: '右手下垂',
               calc: 'vertical',
               upperKey: 'right_shoulder',
               centerKey: 'right_elbow',
               lowerKey: 'right_wrist',
               offset: 25
           }]
    }
    
  • 再构建动作姿态2双手举过头顶伸直站立的检测规则:

    {
         
      name: '双手上举',
      calc: '$and',
      rules: [{
         
          name: '左手上举',
          calc: 'position',
          referenceKey: 'left_eye',
          positionKey: 'left_wrist',
          position: 'top',
          relaxed: true
      }, {
         
          name: '右手上举',
          calc: 'position',
          referenceKey: 'right_eye',
          positionKey: 'right_wrist',
          position: 'top',
          relaxed: true
      }]
    }
    

三、实现运动分析器

定义好动作姿态检测规则后,我们便可以实现此扩展运动的运动分析器了,完整代码如下:

/**
 * 双手并举运动分析器
 */
export class BothHandsUpSport {
   

    context = null;
    calculator = null; //ICalculator
    stateTran = -1;

    /**
     * 初始化运动分析器
     */
    constructor() {
   
        this.calculator = createCalculator();

        this.buildRules();
        const that = this;
        this.context = createExtendSportContext({
   
            key: 'both-hands-up',
            name: '自定义-双手并举',
            tickMode: true,
            view: 'front_back',
            start: () => that.start(),
            // reset: this.reset,
            // stop: this.stop,
            pushing: human => that.pushing(human)
        });
    }

    buildRules() {
   
        this.rules = {
   };
        this.rules.ups = {
   
            name: '双手上举',
            calc: '$and',
            rules: [{
   
                name: '左手上举',
                calc: 'position',
                referenceKey: 'left_eye',
                positionKey: 'left_wrist',
                position: 'top',
                relaxed: true
            }, {
   
                name: '右手上举',
                calc: 'position',
                referenceKey: 'right_eye',
                positionKey: 'right_wrist',
                position: 'top',
                relaxed: true
            }]
        };

        this.rules.downs = {
   
            name: '双手下垂',
            calc: '$and',
            rules: [{
   
                name: '站立姿态',
                calc: 'stand',
                offset: 25
            }, {
   
                name: '左腋夹角',
                calc: 'match-angle',
                angleKey: 'left_shoulder',
                secondKey: 'left_hip',
                thirdKey: 'left_wrist',
                angle: 30,
                offset: 30
            }, {
   
                name: '左手下垂',
                calc: 'vertical',
                upperKey: 'left_shoulder',
                centerKey: 'left_elbow',
                lowerKey: 'left_wrist',
                offset: 25
            }, {
   
                name: '右腋夹角',
                calc: 'match-angle',
                angleKey: 'right_shoulder',
                secondKey: 'right_hip',
                thirdKey: 'right_wrist',
                angle: 30,
                offset: 30
            }, {
   
                name: '右手下垂',
                calc: 'vertical',
                upperKey: 'right_shoulder',
                centerKey: 'right_elbow',
                lowerKey: 'right_wrist',
                offset: 25
            }]
        };
    }

    start() {
   
        this.stateTran = -1;
        console.log('运动启动', this);
    }

    pushing(fragment) {
   

        if (fragment.isNobody) {
   
            console.log('未识别到人体');
            return;
        }

        const human = fragment.human;
        if (this.stateTran != 1 && this.calculator.calculating(human, this.rules.downs)) {
   
            this.stateTran = 1;
            return;
        }

        if (this.stateTran == 1 && this.calculator.calculating(human, this.rules.ups)) {
   
            this.stateTran = 2;
            this.context.countTimes();
            this.context.emitTick(1);
        }
    }

    /**
     * 获取当前扩展运动的原生分析器实例
     * @returns 原生运动分析器实例
     */
    getSportInstance() {
   
        return this.context.getSport();
    }

    /**
     * 获取当前扩展运动描述
     * 
     * @returns  运动描述条目实例
     */
    static getDescriptor() {
   
        let item = {
   
            key: 'both-hands-up',
            name: '自定义-双手并举'
        };

        return item;
    }
}

好了,本节就为您介绍到这,下一节我们将为您介绍将实现的自定义扩展运动列表的维护,敬请期待...

image.png

相关文章
|
5月前
|
缓存 移动开发 JavaScript
如何优化UniApp开发的App的启动速度?
如何优化UniApp开发的App的启动速度?
1020 139
|
5月前
|
移动开发 JavaScript weex
UniApp开发的App在启动速度方面有哪些优势和劣势?
UniApp开发的App在启动速度方面有哪些优势和劣势?
496 137
|
5月前
|
移动开发 前端开发 Android开发
【02】建立各项目录和页面标准化产品-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【02】建立各项目录和页面标准化产品-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
919 12
【02】建立各项目录和页面标准化产品-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
|
5月前
|
移动开发 JavaScript 应用服务中间件
【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
758 5
【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
|
5月前
|
人工智能 前端开发 JavaScript
最佳实践3:用通义灵码开发一款 App
本示例演示使用通义灵码,基于React Native与Node.js开发跨平台类通义App,重点展示iOS端实现。涵盖前端页面生成、后端代码库自动生成、RTK Query通信集成及Qwen API调用全过程,体现灵码在全栈开发中的高效能力。(238字)
637 11
|
5月前
|
移动开发 Android开发
【03】建立隐私关于等相关页面和内容-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【03】建立隐私关于等相关页面和内容-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
285 0
|
5月前
|
数据采集 JavaScript 前端开发
开发比分App?你缺的不是程序员
开发体育比分App,关键不在代码,而在懂体育、懂数据、懂用户。明确定位、理清需求、选好数据源,再找专业的产品、数据与技术人才协同,才能少走弯路。程序员最后入场,效率最高。
325 154
|
6月前
|
移动开发 小程序 Android开发
基于 uni-app 开发的废品回收类多端应用功能与界面说明
本文将对一款基于 uni-app 开发的废品回收类多端应用,从多端支持范围、核心功能模块及部分界面展示进行客观说明,相关资源信息也将一并呈现。
226 0
|
8月前
|
人工智能 文字识别 小程序
旅游社用什么工具收报名 + 资料?不开发 App 也能自动收集信息
本文探讨了旅游行业中报名信息收集的常见痛点及解决方案,重点介绍了二维码表单工具在提升信息收集效率、简化操作流程方面的优势。通过对比多种工具,分析其适用场景与实际应用逻辑,为一线旅游从业者提供高效、低成本的执行参考。

热门文章

最新文章