基于鴻蒙開發的下肢康復外骨骼系統

作者：梅科爾李舒婷 2024-05-09 08:14:52

我們的項目是由硬件和軟件兩部分組成。硬件由下肢康復外骨骼對患者進行康復訓練。軟件部分為鴻蒙APP根據評估患者的結果進行推送，推送的康復動作視頻指導患者對康復動作進行及時的糾正和改善，從而使患者的康復效率得到提高。

為了完成多數據的展示，讓患者更清晰自己的康復情況，我們項目采用鴻蒙APP作為移動端幫助患者隨時隨地的看到自己的康復情況，但是作為初學者，我們的功能還不完善，還需要繼續學習。下面是對我們目前主要的開發功能的介紹。

項目介紹

我們的項目是由硬件和軟件兩部分組成。硬件由下肢康復外骨骼對患者進行康復訓練。軟件部分為鴻蒙APP根據評估患者的結果進行推送，推送的康復動作視頻指導患者對康復動作進行及時的糾正和改善，從而使患者的康復效率得到提高。在訓練結束后，會對其訓練過程中的數據進行整理分析，發送到我們數據展示頁面中，能夠將患者延續性護理的狀況，如平衡能力的提升，走路穩定性的提升，病情在日周月的變化趨勢，讓患者看到自己病情的變換情況，對腦卒中偏癱的再次復發起到預防作用。

開發環境

DevEco Studio版本：DevEco Studio 3.1 Release

HarmonyOS SDK版本：3.1.0（API version9）

DAYU200.4.0.10.16

主要開發功能

賬號的注冊

注冊頁面使用了按鈕、輸入框組件、彈窗組件等組件。彈窗組件是為了提示賬號已經注冊成功可以正常使用。

Text("注冊賬號")
  .fontSize(50)
  .fontWeight(FontWeight.Bold)
  .margin(20)
TextInput({placeholder:'請輸入你的手機號或者郵箱'})
  .placeholderColor("rgb(105,105,105)")
  .placeholderFont({size:20,weight:120,family:'cursive'})
  .height(50)
  .width('80%')
  .fontSize(30)
  .fontWeight(FontWeight.Bold)
  .margin({top:30})
TextInput({placeholder:'請輸入你的密碼'})
  .type(InputType.Password)
  .placeholderColor("rgb(105,105,105)")
  .placeholderFont({size:20,weight:120,family:'cursive'})
  .height(50)
  .width('80%')
  .fontSize(30)
  .fontWeight(FontWeight.Bold)
  .margin({top:30})
TextInput({placeholder:'請再次確定你的密碼'})
  .type(InputType.Password)
  .placeholderColor("rgb(105,105,105)")
  .placeholderFont({size:20,weight:120,family:'cursive'})
  .height(50)
  .width('80%')
  .fontSize(30)
  .fontWeight(FontWeight.Bold)
  .margin({top:30})
Button("確定注冊")
  .height(50)
  .width(180)
  .backgroundColor("#66CDCA")
  .margin({top:40})
  .onClick(() => {
    AlertDialog.show(
      {
        title: '注冊賬號',
        message: '賬號注冊成功',
        confirm: {
          value: '確定',
          action: () => {
            console.info('通過')
          }
        },
        cancel: () => {
          console.info('結束')
        }
      }
    )
  })
Button("返回登錄")
  .height(50)
  .width(180)
  .backgroundColor("#66CDCA")
  .margin({top:40})
  .onClick(()=>{
    router.pushUrl({
      url:'pages/login',
    })})

圖1 注冊頁面

圖2 注冊成功頁面

賬號的登錄

登錄界面使用了，輸入框、按鈕和單選框。同時還使用了一個條件判斷，根據usernam_rag正則表達式驗證用戶名格式，如果不符合要求則顯示錯誤提示。

Image("/common/images/logo.jpg")
                      .width(100).height(100)
                    Column({ space: 5 }) {
                      Text("下肢康復系統")
                        .fontSize(45)
                      Text("登錄賬號以使用更多服務")
                        .fontSize(20).opacity(0.5)
                    }

    TextInput({ placeholder: "請輸入賬號",text:this.username })
      .height(50)
      .width("85%")
    if(this.username_rag.test(this.username)){
      Text("用戶名至少輸入五位")
        .fontSize(12)
        .fontWeight(700)
        .fontColor("#ff0000")
        .width("80%")
    }

    TextInput({ placeholder: "請輸入密碼", text: this.password })
      .type(InputType.Password)
      .height(50)
      .width("85%")
    Row() {
      Button("短信驗證碼登錄")
        .width(180).height(30).backgroundColor("#ffffff").fontColor("#0d110e")
      Button("忘記密碼")
        .width(150).height(30).backgroundColor("#ffffff").fontColor("#0d110e")

    }
    .justifyContent(FlexAlign.SpaceBetween).width("100%")

    Button("登錄")
      .width(180).height(50).backgroundColor("#66CDCA")
      .onClick(()=>{
        router.pushUrl({
        url:'pages/my'
      })})
    Button("注冊賬號")
      .width(180).height(50).backgroundColor("#66CDCA")
      .onClick(()=>{
        router.pushUrl({
        url:'pages/register'
      })})
    Row({ space: 50 }) {
      Column({space:5}) {
        Button("QQ")
          .width(60).height(60).backgroundColor("#66CDCA").fontSize(10)
        Text('QQ登錄')
          .fontSize(15)
      }
      Column({space:5}) {
        Button("微信")
          .width(60).height(60).backgroundColor("#66CDCA").fontSize(10)
        Text('微信登錄')
          .fontSize(15)
      }
      Column({space:5}) {
        Button("微博")
          .width(60).height(60).backgroundColor("#66CDCA").fontSize(10)
        Text('微博登錄')
          .fontSize(15)
      }
    }

點擊同意隱私協議。

Checkbox({name: 'checkbox2'})
    .select(false)
    .selectedColor('#66CDCA')
  Text("請同意《服務條款》《隱私政策》《兒童隱私政策》")
    .fontSize(15).fontColor("rgb(105,105,105)")

圖3 登錄頁面

使用了一個條件判斷，根據usernam_rag正則表達式驗證用戶名格式，如果用戶名輸入少于五位就會出現提示如上圖。

private username_rag = /^[A-Za-z0-9]{5,8}$/;
if(this.username_rag.test(this.username)){
  Text("用戶名至少輸入五位")
    .fontSize(12)
    .fontWeight(700)
    .fontColor("#ff0000")
    .width("80%")
}

評估功能

在評估頁面，使用了輪播圖組件，用于展示評估不同方面的問卷，并且通過ForEach方法遍歷imageSrc數組。在實現的過程中，定義了一個ImageData的類，并且在構造initializeImageData的函數中，對這個類的三個屬性：ID（圖片的表示），img(圖片資源)和name(圖片名稱)，進行賦值。而且還定義了兩個私有屬性，imgSrc：用于儲存數據數組，swiperController:用于控制輪播功能。

export class ImageData {
  id: string
  img: Resource
  name: string

  constructor(id: string, img: Resource, name: string) {
    this.id = id // 圖片唯一表示
    this.img = img // 圖片資源
    this.name = name // 圖片名稱
  }
}
export function initializeImageData(): Array<ImageData> {
  let imageDataArray: Array<ImageData> = [
    { "id": "0", "img": $r('app.media.hunmi'), "name": '格拉斯哥昏迷量表' },
    { "id": "1", "img": $r('app.media.huodong'), "name": '卒中病人運動能力評估表' },
    { "id": "2", "img": $r('app.media.chifan'), "name": '日常生活活動能立量表' },
    {"id":"3","img":$r('app.media.pingheng'), "name":'Berg平衡能力量表'}
  ]
  return imageDataArray
}
@Entry
@Component
struct Index {
  private imageSrc: ImageData[] = initializeImageData()
  private swiperController: SwiperController = new SwiperController()

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Text("腦卒中評估量表")
        .fontSize(60)
        .fontWeight(800)
        .margin(10)
      Swiper(this.swiperController) {
        ForEach(this.imageSrc, item => {
          Image(item.img)
        }, item => item.name)
      }
      .height("60%")
      .width("100%")
      .margin({ top: 0 })

      Row({ space: 60 }) {
        Button('showNext')
          .height(60)
          .width(180)
          .onClick(() => {
            this.swiperController.showNext()
          })
        Button('showPrevious')
          .height(60)
          .width(180)
          .onClick(() => {
            this.swiperController.showPrevious()
          })
      }
      .margin({top:10})
      Text("溫馨提示：" +
      "評估分數僅供參考，以病人的實際情況為例")
        .fontColor("#ff0000")
        .margin({top:10})
    }.margin(30)


  }
}

圖4 評估頁面

通過onClick觸發點擊圖片。入評估問卷界面，通過對頁面問題的回答來判斷患者具體的身體情況。

Swiper(this.swiperController) {
        Image($r('app.media.pingheng')).width('85%').height(400).onClick(()=>{  router.push({
          url:'pages/pinggu1',
          params:{aa:'333'}
        })})
        Image($r('app.media.huodong')).width('85%').height(400).onClick(()=>{  router.push({
          url:'pages/pinggu2',
          params:{aa:'444'}

        })})
        Image($r('app.media.chifan')).width('85%').height(400).onClick(()=>{  router.push({
          url:'pages/pinggu3',
          params:{aa:'555'}
        })})
        Image($r('app.media.hunmi')).width('85%').height(400).onClick(()=>{  router.push({
          url:'pages/pinggu4',
          params:{aa:'666'}
        })})
/      }

圖5 評估問卷頁面

播放康復視頻

播放康復視頻，讓患者隨著康復視頻一起做動作，從而達到訓練的目的。播放視頻的頁面使用了視頻播放器和按鈕等組件，也是用了視頻源、預覽封面、播放倍速、控制器等屬性，同時還設置了視頻組件的一些行為：靜音、自動播放、控制欄顯示模式、循環播放等。

Text(this.message)
  .fontSize(50)
  .fontWeight(FontWeight.Bold)
Video({
  src: $r('app.media.stage21'),
  previewUri: this.previewUris, // 視頻封面
  currentProgressRate: this.currentProgressRate, // 視頻播放倍速
  controller: this.controller,

})
  .muted(this.muted) // 是否靜音
  .autoPlay(this.autoPlay) // 是否自動播放
  .controls(this.controls) // 控制視頻播放的控制欄是否顯示
  .objectFit(ImageFit.Contain) // 視頻顯示模式
  .loop(this.loop) // 是否單個視頻循環播放
  .height("60%")
  .onStart(() => {
    // 播放時觸發該事件
    console.info('onStart');
  })
  .onPause(() => {
    // 暫停時觸發該事件
    console.info('onPause');
  })
  .onFinish(() => {
    console.info('onFinish');

  })
  .onError(() => {
    // 播放失敗時觸發該事件
    console.error('onError');
  })
  .onFullscreenChange((e) => {
    console.info('視頻進入和退出全屏時觸發該事件：' + e.fullscreen)
  })
  .onPrepared((e) => {
    console.info('視頻準備完成時觸發該事件：' + e.duration)
  })
  .onSeeking((e) => {
    console.info('操作進度條過程時上報時間信息：' + e.time)
  })
  .onSeeked((e) => {
    console.info('操作進度條完成后，上報播放時間信息：' + e.time)
  })
  .onUpdate((e) => {
    console.info('播放進度變化時觸發該事件：' + e.time)
  })
  .height("30%")
Row({}) {
  Flex({ wrap: FlexWrap.Wrap, justifyContent: FlexAlign.SpaceAround, alignItems: ItemAlign.Center }) {
    Button("開始訓練")
      .height(40)
      .width(180)
      .onClick(() => {
        this.controller.start()
      }).margin(8)
    Button("結束訓練")
      .height(40)
      .width(180)
      .onClick(() => {
        this.controller.pause()
      })
  }
  }

圖6 康復視頻頁面

展望

作為一個初學者，當我感到困惑時，鴻蒙官方為我們提供了一個學習和展示的平臺，這讓我感到非常振奮。

這個平臺為我們指明了前進的方向，讓我們能夠追求更深層次的知識。我期待著未來能夠跟隨官方文檔進行更深入的學習，以便開發出更多功能豐富的鴻蒙應用程序。與此同時，我也期待著隨著我們的開發技能不斷提升，我們的多數據融合能夠與鴻蒙的多設備融合協同工作，為康復領域和科技創新做出更大的貢獻。

我希望我們的努力能夠幫助更多的腦卒中患者，讓他們早日康復，為他們提供更多的幫助。

責任編輯：姜華來源：鴻蒙開發者社區

鴻蒙開發軟件

成人免费xxxxx在线视频软件_久久精品久久久_亚洲国产精品久久久_天天色天天色_亚洲人成一区_欧美一级欧美三级在线观看