基于鴻蒙開發的下肢康復外骨骼系統
作者：梅科爾李舒婷
我們的項目是由硬件和軟件兩部分組成。硬件由下肢康復外骨骼對患者進行康復訓練。軟件部分為鴻蒙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 注冊成功頁面
賬號的登錄
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 康復視頻頁面
展望
作為一個初學者，當我感到困惑時，鴻蒙官方為我們提供了一個學習和展示的平臺，這讓我感到非常振奮。
這個平臺為我們指明了前進的方向，讓我們能夠追求更深層次的知識。我期待著未來能夠跟隨官方文檔進行更深入的學習，以便開發出更多功能豐富的鴻蒙應用程序。與此同時，我也期待著隨著我們的開發技能不斷提升，我們的多數據融合能夠與鴻蒙的多設備融合協同工作，為康復領域和科技創新做出更大的貢獻。
我希望我們的努力能夠幫助更多的腦卒中患者，讓他們早日康復，為他們提供更多的幫助。
責任編輯：姜華
來源：
鴻蒙開發者社區
