(【HelloKun】開源鴻蒙車機系統OHCar)
0. OHCar ？
想象一下，現在你正忙完一天的工作準備下班回家，擔心車輛能源不足？天氣太熱或太冷？于是在走到樓下停車位上的Dream Car前，拿出鴻蒙手機打開車輛專屬的管家APP，提前檢測剩餘能量百分比，打開車載空調。到達車前的你不願意掏出鑰匙，順手用手機碰一碰車門，隻需點選彈出視窗中的解鎖按鈕即可進入車中。
坐進駕駛艙，OHCar又一次為你開啟貼心服務。加載頁面中紅黑經典表盤與激情澎湃背景視訊，短暫而又絲滑的過度隻為讓你忘卻一天的疲憊。進入系統後，手指輕輕一戳，一鍵喚醒你的DreamCar。
出發前，你打算先來一首音樂，或者刷一段冰冰的甜美笑容，又或者看一段Jay的最新MV，這些，OHCar都能給你。
當然，安全出行第一步。嫌棄螢幕太暗？打開設定，亮度一步到位。終于，你已經釋放掉50%的疲憊感，準備一腳油門回到家中。别急，馬路擁擠，實時導航能不能有？ 當然，OHCar一直為你保駕護航。
下班回家的路上，一切操作絲般順滑，你享受着空調，聽着Jay的音樂，踩着油門一路向北！
便捷而又炫酷的智慧生活極緻體驗，由OpenHarmony為你打造。再想象一下，通過OHCar，對話家裡的MRobot，為你開啟下一段貼心服務！
1. OHCar項目簡介
1.1 項目說明
- Dayu200體驗官活動之初決定做車載中控，設想是在汽車模型中實作車輛資訊監測、無鑰匙解鎖、車輛控制能力、導航地圖以及影音娛樂等功能，并配備移動端車輛管家。OHCar便是該設想的落地，基于現有開源鴻蒙的系統能力，基本實作了上述功能，隻需手機碰一碰解鎖車輛，還可在APP中控制車載空調、檢視剩餘電量、擷取車輛位置等資訊，進入車輛後，可在dayu200上操控車輛，儀表區、車載APP、系統設定一應俱全。
- 從技術角度而言，車機中使用ArkUI架構中的ets語言開發，結合條件渲染，讓Video、Web等元件實作同框顯示，自定義資料類實作動畫；智能車控硬體方面，dayu200做車輛中控，再使用兩個hi3861 iot核心闆、一個Arduino Nano協同實作車輛控制，電源測量子產品擷取電量，GPS子產品測量位置資訊，筆記本風扇模拟車載空調，為實作影音功能，使用音頻解碼與放大闆實作音響。總的來說，OHCar軟硬體均屬鴻蒙生态，展示出開源鴻蒙在車載系統中極具潛力。本文從OHCar的功能角度分解說明項目，并在其中講解使用到的關鍵技術，更多技術細節移步Gitee倉庫。demo視訊OHCar視訊
-
注：
dayu200: OH系統版本：OpenHarmony3.1Release ；IDE： 3.0.0.900 ； APP：ArkUI -ets
hi3861: OpenHarmony 1.0.1 Release ，C語言
車管家(手機端)： HarmonyOS API 6 ，JS語言
1.2 OHCar軟硬體簡介
OHCar項目架構組成如下圖，dayu200作為上層的控制終端，提供車輛儀表資訊顯示、影音娛樂等服務，使用TCP傳輸駕駛員的操控指令；②号hi3861接收到資料後進行預處理（如擷取車輛溫濕度，車内煙霧監測），非本地指令則通過uart轉給車輛底層的mcu；①号hi3861則提供無鑰匙解鎖、電量、定位的資訊擷取、車載空調操控等功能。底層mcu直接負責車輛的操控，如電機控制，實時性強，同時也友善實作軟硬體隔離。各子產品分工明确但又緊密配合。所有各子產品(除dayu200外)均安裝于經典2003款 Ferrari Enzo 模型中，隻為直覺展示上述功能。
2. OHCar車載系統實作
以APP形式模拟OHCar車載系統，APP基于ArkUI架構中的est語言開發，運作在dayu200之上，APP包括系統啟動頁、操控UI頁、系統設定頁、本地視訊播放頁。啟動頁是模拟車載系統開機；操控UI頁面包含系統展示窗、車載APP（音樂、地圖、Blibili）、儀表盤、車輛操控。系統設定頁目前支援螢幕亮度調節功能；本地視訊播放頁用于播放視訊檔案，提高影音娛樂功能。
車載系統模拟APP架構總結如下圖:
打開DevEco Studio 3.0.0.900， 建立一個基于ets的工程，API為8。詳情見環境搭建。下面對OHCar項目中的關鍵功能子產品的實作進行說明。
2.1 系統啟動頁面
系統啟動頁模拟車機開機啟動畫面，使用到Video元件展示加載視訊，Canvas繪制表盤，結合定時器實作指針擺動，最後使用Stack容器實作覆寫效果。關鍵代碼如下，具體實作可參考這篇文章首頁aito視訊&Canvas繪制儀表盤
Stack()
{
Video({
src: this.srcs,
previewUri: this.previewUris,
currentProgressRate: this.currentProgressRates,
controller: this.controller
}).width('100%').height('100%')
.objectFit(ImageFit.Cover)
.autoPlay(true)
.controls(this.controlsss)
.onFinish(() => {
console.error('onFinish');
router.push({url:'pages/gauge'})
})
// 儀表盤
Row({ space: 0 }) {
//油門表
MyGauge()
Column() {
Canvas(this.car_gauge)
.width('45%')
.height('20%')
.backgroundColor('#000000')
.onReady(() => {
//表環-車速
this.car_gauge.clearRect(-100, -100, 600, 600);
this.car_gauge.beginPath()
this.car_gauge.translate(0, 0)
this.car_gauge.shadowBlur = 30
this.car_gauge.shadowColor = this.car_gauge_col
this.car_gauge.arc(this.gauge_speed_x, this.gauge_speed_y, 100, 0, 6.28)
this.car_gauge.fillStyle = 'black'
this.car_gauge.fill()
this.car_gauge.closePath()
//數字環、指針 操作類似，略過
//車速
Text(this.car_velocity+" KM/H")
.fontSize(40).height(40).fontStyle(FontStyle.Italic).textAlign(TextAlign.Center)
.backgroundColor('black').fontColor('white')
}
//電量表
Gauge({ value: this.fuel_value, min: 0, max: 120 })
.startAngle(240)
.endAngle((this.fuel_value))
.colors([[0x5BA854, 0.5],[0xCFB53B, 0.5],[0xF01020, 0.5] ])
.strokeWidth(30)
.width(120)
.height(120)
.margin({top:30})
}
}
}
2.2 操控頁面——系統展示窗
操控UI頁面的系統展示窗模拟車輛的中控屏，用于顯示車輛狀态、内置app。使用條件渲染将自定義component（音樂、地圖、Blibili）展示出來。内置車載APP用web元件模拟（dayu200 聯網後可實作網頁加載。）
關鍵實作代碼如下：
Column({ space:0 }) {
if(this.display_flag==1) {
Video({
src: this.srcs,
currentProgressRate: this.currentProgressRates,
controller: this.controller
})
.width('100%')
.height('80%')
.objectFit(ImageFit.Fill)
.autoPlay(this.autoPlays)
.controls(this.controlsss)
.onStart(() => {
console.error('onStart');
})
}
else if(this.display_flag==2)
{
Column()
{
qqmusic()
}.height('80%').alignItems(HorizontalAlign.Center)
}
else if(this.display_flag==3)
{
Column()
{
amap()
}.height('80%').alignItems(HorizontalAlign.Center)
}
else if(this.display_flag==4)
{
Column()
{
Bilibili()
}.height('80%').alignItems(HorizontalAlign.Center)
}
//web實作如下：
@Component
struct Bilibili {
@State message: string = 'Hello World'
controller: WebController = new WebController();
build() {
Column()
{
Web({ src: 'https://www.bilibili.com/', controller: this.controller })
}
.width('100%')
.height('100%')
.backgroundColor('black')
}
}
2.3 操控頁面——儀表盤
車輛儀表區用于模拟車機的儀表盤，從左到右依次用于展示能源餘量、時速、油門大小。其中時速表盤、油門大小可随操控按鈕（2.4節介紹）動态加載。時速表盤使用Canvas畫布實作，油門表使用Gauge元件實作。具體實作可參考這篇文章首頁aito視訊&Canvas繪制儀表盤
2.4 操控頁面——車輛控制
車輛控制區用于模拟車輛實際操控，如一鍵啟動、駕駛（油門、方向、刹車）、開門、燈光、甚至是升降Dream Car的尾翼。UI使用Buttom、Image基礎元件布局，實作比較簡單。控件觸發事件後，調用Socket接口，将控制量發送到目标ip中(hi3861中），下面代碼舉例說明如何将一鍵啟動觸發後将消息通過socket接口發送出去，關于Socket tcp通信實作可參考該文檔Socket連接配接。
tcpSend() {
tcp.getState().then((data) => {
if (data.isConnected) {
//發送消息
tcp.send(
{ data: this.message_send, }
).then(() => {
prompt.showToast({message:"send message successful"})
}).catch((error) => {
prompt.showToast({message:"send failed"})
})
} else {
prompt.showToast({message:"tcp not connect"})
}
})
}
//一鍵啟動
Button({ type: ButtonType.Circle, stateEffect: true }) {
Image($r('app.media.engine')).objectFit(ImageFit.Contain)
}
.width(90)
.height(90)
.margin({ top: 1, left: 80 })
.backgroundColor(this.engine_btn_col)
.onClick(() => {
this.car_gauge_col = 'white'
this.srcs = $r('app.media.ferrari_start')
this.controller.start()
this.click_times += 1
this.tcpConnect()
if (this.click_times % 2 != 0) {
this.engine_btn_col = 0x32c5ef
this.update_canvas();
}
else
{
this.engine_btn_col = 0xCBD3D0
this.click_times = 0;
}
prompt.showToast({
message: "Start Engine:" + this.car_velocity,
})
})
2.5 系統設定與視訊播放
系統設定功能頁面主要使用brightness接口調節螢幕亮度。另外，還使用class自定義車輛資訊類，為動态展示車輛提供參考。視訊播放使用Video元件實作，音頻的輸出經過車載的音頻放大器播放，關鍵代碼如下：
import brightness from '@ohos.brightness';
Row()
{
Text('亮度').fontColor('blue').fontSize('35').width('10%').borderRadius(30).margin({top:10,left:30})
Slider({
value: this.brightness,
min: 100,
max: 255,
step: 1,
style: SliderStyle.OutSet
})
.width('80%').height('100%') .blockColor('blue').trackColor(Color.Black)
.onChange((value: number, mode: SliderChangeMode) => {
this.brightness = value
brightness.setValue(this.brightness);
console.info('value:' + value + 'mode:' + mode.toString())
}).width('75%')
Text(this.brightness.toFixed(0)).fontSize(30).width('15%').fontColor('blue')
}.height('10%').backgroundColor('white')
3. OHCar車輛管家介紹
智能時代，車載系統不應該僅僅是獨立的系統，基于OpenHarmony的OHCar可為使用者提供優質全面的服務。車輛管家運作于HarmonyOS 2.0 的移動端，依托NFC短距通信協定，通過碰一碰的互動方式，将手機和OHCar連接配接起來。然後通過手機端的原子化服務能力，快速完成配網、連接配接OHCar，提供無鑰匙開門、監測車輛資訊的服務。 類似的開發案例可參考本人這篇教程 碰一碰系列分享總貼。
3.1 UI開發
UI布局使用js開發，具體方式參考該文檔 JS開發APP。車輛管家UI直覺，展示資訊如下圖，電量、位置資訊的擷取來自于hi3861端，空調、車門控制消息也發送至hi3861端。
3.2 碰一碰與資料傳輸
車輛管家的技術核心是調用JS接口完成裝置配網、消息發送。擷取裝置ID、發送消息接口核心代碼如下(可參考本貼JS通信接口)：
//需引入 import {getApp} from '../../common.js';
sendMessage()
{
var message = this.app_msg;
let commonInfo = {
sessionId: getApp(this).ConfigParams.deviceInfo.sessionId
};
getApp(this).NetConfig.sendMessage(commonInfo, message,(result)=>{
if(result.code ==0) { prompt.showToast({message:'發送成功'})}
else{prompt.showToast({message:'發送失敗'})}
});
},
4. OHCar南向開發
南向開發分為三部分，分别對應車載系統UI南向開發、車輛管家APP南向開發、車輛硬體實時控制系統實作（電機、燈光等）
4.1 車載系統協同
車載系統協同依靠dayu200與hi3861之間的TCP通信，南向開發也主要是針對該通信資料進行處理，hi3861端作為TCP伺服器，接收dayu200發送的操作指令。hi3861也可采集車輛溫濕度、煙霧資訊，有需求可上報至dayu200端。如何建立二者之間的TCP連接配接可參考本人這篇教程 #DAYU200#體驗官Hi3861與dayu200通信 。下圖是南向功能架構。
下面給出将dayu200資料發送值車載mcu、将溫濕度煙霧發送至dayu200的關鍵代碼：
while (1)
{
AHT20_Calibrate();
AHT20_StartMeasure();
AHT20_GetMeasureResult(&EnvData.temp_val, &EnvData.humi_val);
EnvData.ppm_val = Get_MQ2_PPM();
if ((ret = recv(new_fd, recvbuf, sizeof(recvbuf), 0)) == -1)
{
printf("recv error \r\n");
}
printf("recv :%s\r\n", recvbuf);
const unsigned char msg_cmd = recvbuf[0];
//hi_uart_write(1, &msg_cmd, 1);
UartWrite(1, &msg_cmd, 1);
if (msg_cmd == 'x')
{
GpioSetOutputVal(WIFI_IOT_IO_NAME_GPIO_14, 0);
hi_udelay(80000);
GpioSetOutputVal(WIFI_IOT_IO_NAME_GPIO_14, 1);
}
if (msg_cmd == 'y')
{
GpioSetOutputVal(WIFI_IOT_IO_NAME_GPIO_8, 0);
hi_udelay(80000);
GpioSetOutputVal(WIFI_IOT_IO_NAME_GPIO_8, 1);
}
Float2String(buf, EnvData.humi_val, 2);
if ((ret = send(new_fd, buf, strlen(buf) + 1, 0)) == -1)
{
perror("send : ");
}
Float2String(buf, EnvData.ppm_val, 2);
if ((ret = send(new_fd, buf, strlen(buf) + 1, 0)) == -1)
{
perror("send : ");
}
Float2String(buf, EnvData.ppm_val, 2);
if ((ret = send(new_fd, buf, strlen(buf) + 1, 0)) == -1)
{
perror("send : ");
}
GpioSetOutputVal(WIFI_IOT_IO_NAME_GPIO_14, 0);
GpioSetOutputVal(WIFI_IOT_IO_NAME_GPIO_8, 0);
sleep(1);
}
4.2 車輛管家協同
車載系統協同依靠移動端NFC短距通信，碰一碰車門上的NFC标簽後，啟動原子化服務後與hi3861通信，hi3861将GPS子產品采集位置資訊、電壓采集子產品采集汽車電量傳輸至車輛管家APP端；同時也可接收開門指令，實作無鑰匙解鎖。該部分南向工程架構如下（詳細見附件）：
NAN配網關鍵接口如下,具體參考本人這篇教程裝置配網
include:
│ ├── netcfg.h // 無感配網注冊相關接口
│ ├── network_config_service.h //無感配網相關頭檔案。
libs:
├── libs
│ ├── libhilinkadapter_3861.a // 無感配網相關庫檔案。
│ └── libnetcfgdevicesdk.a // 無感配網相關庫檔案。
src:
├── netcfg.c // NAN相關操作和聯網動作
const char *g_ssid = "OHCar ";
const char *g_pinCode = "11111111";
const char *g_productId = "1";
const char *g_sn = "0123/.,.,4567890123450123456789012345";
···
devInfo[0].key = "productId";
devInfo[1].key = "sn";
devInfo[0].value = g_productId;
devInfo[1].value = g_sn;
ret = StartNetCfg(devInfo, DEVICE_INFO_NUM, NETCFG_SOFTAP_NAN); //SoftAP and NAN模式
//上報電量、位置資訊、控制模拟空調
if (strcmp(app_msg, "turn off air") == 0)
{
IoTGpioSetOutputVal(FAN_IO1, IOT_GPIO_VALUE0);
IoTPwmStart(1, 0, 80000);
printf("turn off air \r\n");
app_msg[0] = '9';
return;
}
if (strcmp(app_msg, "car location") == 0)
{
// Bluetooth_read(location2app, 18) //室内GPS信号弱
strncpy(location2app, "N:110.20 E:19.220 addr", 18);
SendRawData(&location2app); // 将消息發到FA
printf("car location\r\n");
app_msg[0] = '9';
return;
}
if (strcmp(app_msg, "car fuel") == 0)
{
fuel_val = GetVoltage();
float percent_vol = 1000 * fuel_val / FULL_FUEL;
Float2String(percent_vol, &temp_str, 2);
strncpy(fuel2app, temp_str, 5);
SendRawData(&fuel2app); // 将消息發到FA
printf("get car fuel \r\n");
app_msg[0] = '9';
return;
}
4.3 車輛控制
車輛電機、車門、尾翼以及燈光控制使用另一塊io接口多一些的mcu實作（5組燈光、6個舵機），mcu實時接收兩塊hi3861的控制指令，完成最底層的控制。從車載系統到車輛管家，再到hi3861，最終到mcu,遵循的封包如下，有助于了解項目：
typedef enum MSG_CMD {
MOVE_GO = 'a',
MOVE_BACK,
MOVE_LEFT,
MOVE_RIGHT, //移動
OPEN_LEFT_DOOR,
CLOSE_LEFT_DOOR,
OPEN_RIGHT_DOOR,
CLOSE_RIGHT_DOOR,//車門
SPOILER_UP,
SPOILER_DOWN, //尾翼
MOVE_GO_LIGHT,
MOVE_BACK_LIGHT,
WARRING_LIGHT_ON,
WARRING_LIGHT_OFF
};
總結
從技術上講，實際的車載系統比文中說的要複雜、嚴苛很多。不過openHarmony作為萬物互聯時代下的産物，未來用于車載系統還是值得期待的。借此項目可了解openHarmony以及在dayu200上的開發方式，學習ARkUI架構、est語言。
都說田家少閑月，五月人倍忙，自從疫情之後很多事被打亂，一到視窗期就是“5月"，不知不覺dayu200體驗官活動也接近尾聲，感謝平台的支援與各位老師的直播分享，讓我天馬行空想法得以實作。
源碼分享：
下載下傳位址：https://ost.51cto.com/resource/2161