9102_LUA/tsb_ui/tsb_mqtt_page.lua

--[[
@module  tsb_mqtt_page
@summary MQTT配置页面
@version 1.0
@date    2026.03.05
@author  李一玮
@usage
本文件是MQTT配置页面，展示MQTT配置的各种用法。
]]

local tsb_mqtt_page = {}

-- 页面UI元素
local main_container = nil
local common_ui = require("tsb_common_page")

-- 创建UI
function tsb_mqtt_page.create_ui()
    main_container = airui.container({
        x = 0,
        y = 0,
        w = 480,
        h = 320,
        color = 0xFFFFFF,
        color_opacity = 0
    })

    --------------------- 标题栏 ------------------------
    local title_bar = airui.container({
        parent = main_container,
        x = 0,
        y = 0,
        w = 480,
        h = 30,
        color = 0xFFB74D,
    })

    airui.label({
        parent = title_bar,
        text = "MQTT配置",
        x = 195,
        y = 8,
        w = 100,
        h = 20,
        font_size = 16,
        color = 0xFFFFFF,
    })

    
    -- 标题栏公共信息展示
    common_ui.add_battery_display(title_bar)
    common_ui.create_back_button(title_bar, tsb_mqtt_page.cleanup)
    ---------------------------------------------------

    -- 滚动容器
    local scroll_container = airui.container({
        parent = main_container,
        x = 0,
        y = 30,
        w = 480,
        h = 260,
        color = 0xFFFFFF,
        
    })

    local keyboard1 = airui.keyboard({
        x = 0,
        y = 0,
        w = 480,
        h = 160,                        -- x, y, 键盘默认打开ALIGN_BOTTOM_MID，位置从中下方开始计算
        mode = "numeric",               -- 键盘模式，可选 "text"/"upper"/"lower"/"numeric"
        auto_hide = true,               -- 自动隐藏键盘
        preview = true,          
        preview_height = 35,
        bg_color = 0xf1f1f1,            -- 键盘背景颜色为灰色，可选，不设置则透明
        on_commit = function()          -- 确认事件回调，只有在按下确认键时才会触发
            log.info("keyboard", "commit")
        end
    })

    local keyboard2 = airui.keyboard({
        x = 0,
        y = 0,
        w = 480,
        h = 160,                        -- x, y, 键盘默认打开ALIGN_BOTTOM_MID，位置从中下方开始计算
        mode = "lower",               -- 键盘模式，可选 "text"/"upper"/"lower"/"numeric"
        auto_hide = true,               -- 自动隐藏键盘
        preview = true,
        preview_height = 35,
        bg_color = 0xf1f1f1,            -- 键盘背景颜色为灰色，可选，不设置则透明
        on_commit = function()          -- 确认事件回调，只有在按下确认键时才会触发
            log.info("keyboard", "commit")
        end
    })

    --------------------- 第一行控制区 ------------------------
    -- 当前lora信道标签
    airui.label({
        parent = scroll_container,
        text = "当前lora信道",
        x = 10,
        y = 10,
        w = 100,
        h = 30,
        font_size = 14,
    })

    -- 当前lora信道值
    local current_channel_label = airui.label({
        parent = scroll_container,
        text = "1",
        x = 110,
        y = 10,
        w = 30,
        h = 30,
        font_size = 14,
    })

    -- 设置lora信道标签
    airui.label({
        parent = scroll_container,
        text = "设置lora信道",
        x = 150,
        y = 10,
        w = 100,
        h = 30,
        font_size = 14,
    })

    -- 设置lora信道下拉框
    local channel_dropdown = airui.dropdown({
        parent = scroll_container,
        x = 250,
        y = 3,
        w = 70,
        h = 30,
        options = {"1", "2", "3", "4", "5", "6"},
        default_index = 0, -- 默认选择1
        on_change = function(self,idx)
            log.info("mqtt_channel", "选择了信道：" .. self.options[idx + 1])
        end
    })
    ---------------------------------------------------

    --------------------- 输入框区域 ------------------------
    -- 左侧输入框容器
    local left_container = airui.container({
        parent = scroll_container,
        x = 10,
        y = 40,
        w = 230,
        h = 230,
        color = 0xFFFFFF,
    })

    -- 左侧第一组：一级设备类型
    airui.label({
        parent = left_container,
        text = "一级设备类型：",
        x = 0,
        y = 0,
        w = 100,
        h = 20,
        font_size = 14,
    })
    local device_type_input = airui.textarea({
        parent = left_container,
        x = 0,
        y = 20,
        w = 150,
        h = 30,
        text = "",
        keyboard = keyboard1
    })

    -- 左侧第二组：一级设备SN
    airui.label({
        parent = left_container,
        text = "一级设备SN：",
        x = 0,
        y = 55,
        w = 100,
        h = 20,
        font_size = 14,
    })
    local device_sn_input = airui.textarea({
        parent = left_container,
        x = 0,
        y = 75,
        w = 150,
        h = 30,
        text = "",
        keyboard = keyboard1,
    })

    -- 左侧第三组：目标设备类型
    airui.label({
        parent = left_container,
        text = "目标设备类型：",
        x = 0,
        y = 110,
        w = 100,
        h = 20,
        font_size = 14,
    })
    local target_type_input = airui.textarea({
        parent = left_container,
        x = 0,
        y = 130,
        w = 150,
        h = 30,
        text = "",
        keyboard = keyboard1,
    })

    -- 左侧第四组：目标设备SN
    airui.label({
        parent = left_container,
        text = "目标设备SN",
        x = 0,
        y = 165,
        w = 100,
        h = 20,
        font_size = 14,
    })
    local target_sn_input = airui.textarea({
        parent = left_container,
        x = 0,
        y = 185,
        w = 150,
        h = 30,
        text = "",
        keyboard = keyboard1,
    })

    -- 右侧输入框容器
    local right_container = airui.container({
        parent = scroll_container,
        x = 240,
        y = 40,
        w = 230,
        h = 230,
        color = 0xFFFFFF,
    })

    -- 右侧第一组：服务器地址
    airui.label({
        parent = right_container,
        text = "服务器地址：",
        x = 0,
        y = 0,
        w = 100,
        h = 20,
        font_size = 14,
    })
    local server_addr_input = airui.textarea({
        parent = right_container,
        x = 0,
        y = 20,
        w = 220,
        h = 30,
        text = "",
        keyboard = keyboard2,
    })

    -- 右侧第二组：服务器端口
    airui.label({
        parent = right_container,
        text = "服务器端口：",
        x = 0,
        y = 55,
        w = 100,
        h = 20,
        font_size = 14,
    })
    local server_port_input = airui.textarea({
        parent = right_container,
        x = 0,
        y = 75,
        w = 220,
        h = 30,
        text = "",
        keyboard = keyboard1,
    })

    -- 右侧第三组：服务器用户名
    airui.label({
        parent = right_container,
        text = "服务器用户名：",
        x = 0,
        y = 110,
        w = 100,
        h = 20,
        font_size = 14,
    })
    local server_user_input = airui.textarea({
        parent = right_container,
        x = 0,
        y = 130,
        w = 220,
        h = 30,
        text = "",
        keyboard = keyboard2,
    })

    -- 右侧第四组：服务器密码
    airui.label({
        parent = right_container,
        text = "服务器密码：",
        x = 0,
        y = 165,
        w = 100,
        h = 20,
        font_size = 14,
    })
    local server_pass_input = airui.textarea({
        parent = right_container,
        x = 0,
        y = 185,
        w = 220,
        h = 30,
        text = "",
        keyboard = keyboard2,
    })
    ---------------------------------------------------

    --------------------- 提示信息 ------------------------
    airui.label({
        parent = scroll_container,
        text = "一级设备SN和目标设备SN同时写1代表全量配置（仅LORA模式）",
        x = 10,
        y = 280,
        w = 460,
        h = 20,
        font_size = 12,
        color = 0x757575,
    })
    ---------------------------------------------------

    --------------------- 控制按钮区 ------------------------
    -- 串口发送标签
    airui.label({
        parent = scroll_container,
        text = "串口发送",
        x = 15,
        y = 312,
        w = 80,
        h = 30,
        font_size = 14,
    })

    -- 串口发送开关
    local serial_switch = airui.switch({
        parent = scroll_container,
        x = 80,
        y = 310,
        w = 50,
        h = 20,
        checked = false,
        on_change = function(self)
            log.info("UART SEND", self:get_state() and "开启" or "关闭")
        end
    })

    -- 串口发送提示信息
    airui.label({
        parent = scroll_container,
        text = "默认为LORA模式，可选串口发送",
        x = 140,
        y = 312,
        w = 200,
        h = 20,
        font_size = 12,
        color = 0x757575,
    })

    -- 新配置下发按钮
    local new_config_btn = airui.button({
        parent = scroll_container,
        x = 10,
        y = 340,
        w = 100,
        h = 35,
        text = "新配置下发",
        style = { bg_color = 0x2B6FF1,border_color = 0x2B6FF1, text_color = 0xFFFFFF, radius = 8 },
        on_click = function(self)
            log.info("mqtt_config", "新配置下发按钮被点击")
        end
    })

    -- 恢复默认配置按钮
    local default_config_btn = airui.button({
        parent = scroll_container,
        x = 120,
        y = 340,
        w = 120,
        h = 35,
        text = "恢复默认配置",
        on_click = function(self)
            log.info("mqtt_config", "恢复默认配置按钮被点击")
        end
    })

    -- 执行结果
    airui.label({
        parent = scroll_container,
        text = "执行结果：",
        x = 300,
        y = 347,
        w = 80,
        h = 30,
        font_size = 16,
    })

    -- 执行结果值
    local result_label = airui.label({
        parent = scroll_container,
        text = "成功",
        x = 380,
        y = 347,
        w = 100,
        h = 30,
        font_size = 16,
    })
    ---------------------------------------------------

    -- 底部信息
    common_ui.create_status_bar(main_container)
end

-- 初始化页面
function tsb_mqtt_page.init(params)
    tsb_mqtt_page.create_ui()
end

-- 清理页面
function tsb_mqtt_page.cleanup()
    if main_container then
        main_container:destroy()
        main_container = nil
    end
end

return tsb_mqtt_page