主应用界面
# 主应用界面

# 界面划分

从主体来看,分成三个部分,顶部状态栏,二维码区域和充电枪状态
# 代码解析
## 顶部状态栏区域
```lua
function makeTop(cont)
local top=lvgl.cont_create(cont)
lvgl.obj_set_size(top,lvgl.obj_get_width(cont),60)
lvgl.obj_align(top, nil, lvgl.ALIGN_IN_TOP_MID, 0, 0)
lvgl.obj_add_style(top, lvgl.CONT_PART_MAIN, style.style_divBox)
-------------------------------------------
--4G 图标
local signImg=lvgl.img_create(top, nil)
lvgl.img_set_src(signImg,"/lua/nosin_icon.png")
lvgl.obj_align(signImg,top, lvgl.ALIGN_IN_LEFT_MID, 20, 0)
sys.subscribe("RSSI_CHANGE",function(img)
lvgl.img_set_src(signImg,img)
end)
------------------------------------------------紧急图标
emergencyIcon=lvgl.img_create(top, nil)
lvgl.img_set_src(emergencyIcon,"/lua/eme.png")
lvgl.obj_align(emergencyIcon,signImg, lvgl.ALIGN_OUT_RIGHT_MID, 20, 0)
------------------------------------------------油枪图标
function gunHandler(obj, event)
if event == lvgl.EVENT_CLICKED then
if lvgl.obj_get_id(obj)==lvgl.obj_get_id(leftGunIcon) or lvgl.obj_get_id(obj)==lvgl.obj_get_id(img_left) then
print("左油枪按下")
lvgl.obj_set_style_local_image_opa(leftGunIcon, lvgl.IMG_PART_MAIN, lvgl.STATE_DEFAULT, 128)
statusFragmentInit(statusCont,gun.left)
else
print("右油枪按下")
lvgl.obj_set_style_local_image_opa(rightGunIcon, lvgl.IMG_PART_MAIN, lvgl.STATE_DEFAULT, 128)
statusFragmentInit(statusCont,gun.right)
end
end
end
leftGunIcon=lvgl.img_create(top, nil)
lvgl.img_set_src(leftGunIcon,"/lua/gun.png")
lvgl.obj_align(leftGunIcon,emergencyIcon, lvgl.ALIGN_OUT_RIGHT_MID, 40, 0)
lvgl.obj_set_click(leftGunIcon,true)
lvgl.obj_set_event_cb(leftGunIcon,gunHandler)
rightGunIcon=lvgl.img_create(top, nil)
lvgl.img_set_src(rightGunIcon,"/lua/gun.png")
lvgl.obj_align(rightGunIcon,leftGunIcon, lvgl.ALIGN_OUT_RIGHT_MID, 40, 0)
lvgl.obj_set_click(rightGunIcon,true)
lvgl.obj_set_event_cb(rightGunIcon,gunHandler)
-------------------------------------------------------------------
timeLabel = lvgl.label_create(top, nil)
lvgl.label_set_recolor(timeLabel, true)
lvgl.obj_set_style_local_text_font(timeLabel, lvgl.LABEL_PART_MAIN, lvgl.STATE_DEFAULT, font32)
lvgl.label_set_text(timeLabel, " ")
lvgl.label_set_align(timeLabel, lvgl.LABEL_ALIGN_CENTER)
lvgl.obj_align(timeLabel, nil, lvgl.ALIGN_IN_RIGHT_MID, -50, 0)
sys.subscribe("SYSTEM_CHANGE_TIME",function(date)
lvgl.label_set_text(timeLabel,"#FFFFFF "..date)
lvgl.obj_align(timeLabel, nil, lvgl.ALIGN_IN_RIGHT_MID, -50, 0)
sys.publish("SCREENSAVER_UNINIT")
end)
end
```
## 二维码区域
```lua
function makeQR(cont)
c = lvgl.cont_create(cont, nil)
lvgl.obj_add_style(c, lvgl.CONT_PART_MAIN, style.style_QR)
lvgl.obj_set_size(c,230, 270)
lvgl.obj_align(c, nil, lvgl.ALIGN_IN_LEFT_MID, 50, 0)
qrcode=lvgl.qrcode_create(c,nil)
lvgl.qrcode_set_txt(qrcode,UIconfig.UI.QR)
lvgl.obj_set_size(qrcode,200,200)
lvgl.obj_align(qrcode, nil, lvgl.ALIGN_IN_TOP_MID, 0, 15)
while misc.getImei()=="" do
sys.wait(5)
end
local label = lvgl.label_create(lvgl.scr_act(), nil)
lvgl.obj_set_style_local_text_font(label, lvgl.LABEL_PART_MAIN, lvgl.STATE_DEFAULT, font32)
lvgl.label_set_text(label, misc.getImei())
lvgl.obj_align(label,qrcode, lvgl.ALIGN_OUT_BOTTOM_MID, 0, 10)
end
```
## 充电枪状态区域
```lua
function makeGunIcon(cont)
local m_img,m_txt=getMsg(gun.left)
img_left = lvgl.img_create(cont, nil)
-- 设置图片显示的图像
lvgl.img_set_src(img_left, m_img)
-- 图片居中
lvgl.obj_align(img_left, nil, lvgl.ALIGN_IN_LEFT_MID, 100,-50)
lvgl.obj_set_click(img_left,true)
lvgl.obj_set_event_cb(img_left,gunHandler)
gun_label_left_txt = lvgl.label_create(cont, nil)
lvgl.label_set_recolor(gun_label_left_txt, true)
lvgl.obj_set_style_local_text_font(gun_label_left_txt, lvgl.LABEL_PART_MAIN, lvgl.STATE_DEFAULT, font24)
lvgl.label_set_text(gun_label_left_txt, "#FFFFFF 左枪")
lvgl.obj_align(gun_label_left_txt, img_left, lvgl.ALIGN_OUT_TOP_MID, 0, 0)
gun_label_left_status = lvgl.label_create(cont, nil)
lvgl.label_set_recolor(gun_label_left_status, true)
lvgl.obj_set_style_local_text_font(gun_label_left_status, lvgl.LABEL_PART_MAIN, lvgl.STATE_DEFAULT, font36)
lvgl.label_set_text(gun_label_left_status, m_txt)
lvgl.obj_align(gun_label_left_status, img_left, lvgl.ALIGN_OUT_BOTTOM_MID, 0, 0)
--------
m_img,m_txt=getMsg(gun.right)
img_right = lvgl.img_create(cont, nil)
-- 设置图片显示的图像
lvgl.img_set_src(img_right, m_img)
-- 图片居中
lvgl.obj_align(img_right, nil, lvgl.ALIGN_IN_RIGHT_MID,-100, -50)
lvgl.obj_set_click(img_right,true)
lvgl.obj_set_event_cb(img_right,gunHandler)
gun_label_right_txt = lvgl.label_create(cont, nil)
lvgl.label_set_recolor(gun_label_right_txt, true)
lvgl.obj_set_style_local_text_font(gun_label_right_txt, lvgl.LABEL_PART_MAIN, lvgl.STATE_DEFAULT, font24)
lvgl.label_set_text(gun_label_right_txt, "#FFFFFF 右枪")
lvgl.obj_align(gun_label_right_txt, img_right, lvgl.ALIGN_OUT_TOP_MID, 0, 0)
gun_label_right_status = lvgl.label_create(cont, nil)
lvgl.label_set_recolor(gun_label_right_status, true)
lvgl.obj_set_style_local_text_font(gun_label_right_status, lvgl.LABEL_PART_MAIN, lvgl.STATE_DEFAULT, font36)
lvgl.label_set_text(gun_label_right_status, m_txt)
lvgl.obj_align(gun_label_right_status, img_right, lvgl.ALIGN_OUT_BOTTOM_MID, 0, 0)
end
```