Files
IOT_SIM/samples/p8-t2-校园环境界面/task.md
T
xuyueandClaude Opus 5.5 d4b8bf9241 任务说明补齐 23 份;设计器支持窗体改名
- 其余 21 个实验的 task.md:控件名照示例代码,"在平台上怎么试"和评分步骤一致,列出书上的印刷错误和控件名不一致
- 窗体改名:属性窗口里选中窗体可以改名称,类名、构造函数、new X()、Program.cs 和两个文件名一起改;方法名和字符串不变
- 11 个主窗体不叫 Form1 的实验,任务说明提示先改窗体名再双击生成 Load 事件
- 测试:表头只认分隔行上面那一行,数据行里出现"名称"不再被当成表头

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-26 13:55:39 +08:00

4.4 KiB
Raw Blame History

任务目标

在任务 1 的程序里新建"校园环境"窗体 Environment,把界面搭好:顶部标题栏和"<返回主窗体",中间是路灯场景的背景图,底部一栏显示火焰、烟雾、光照度、温度、湿度,右边是"路灯控制"和"LED推送"两组控件,左下方是显示一周温度的折线图。这个任务只做界面,采集数据、控制路灯、推送 LED 在任务 3 做。

练习重点:多窗体、面板的多层停靠(Top / Fill / Bottom / Right)、透明背景、复选框、图表(Chart)的系列和图例。详细步骤见书 p159–164。

接着任务 1 的程序做。为了能看到效果,这次先让主界面的"校园环境"能打开窗体、"<返回主窗体"能关闭窗体(书上放在后面的任务里)。

界面和控件名

控件 名称(Name) 文字(Text)和用途
窗体 Environment 校园环境;FormBorderStyle 设为 None,StartPosition 设为 CenterScreen
面板 panel1 顶部标题栏:停靠 Top,背景色 100, 116, 133,放标题图 ico_title
面板 panel2 停靠 Fill,下面的面板都放在它里面
面板 panel3 panel2 里停靠 Top,背景色 229, 229, 229
标签 lb_return < 返回主窗体(放在 panel3 上)
面板 panel_bg panel3 下面停靠 Fill,背景图片 day_02(路灯没亮的场景),背景排列 Stretch
面板 panel5 panel_bg 里停靠 Bottom:环境数据栏
文本框 txt_fire、txt_smoke、txt_light、txt_temperature、txt_humidity 火焰、烟雾、光照、温度、湿度(左边各配一个标签)
按钮 btn_dataAnalyse 数据分析
按钮 btn_ledEnvironment1 推送天气信息(环境数据栏里的那个)
面板 panel_form panel_bg 里停靠 Right,背景色 Transparent,背景图片 bg_from2
分组框 groupBox2 路灯控制
复选框 ch_autoLamp 自动控制
文本框 txt_autoLight 设定开灯光照值(后面配标签"lx")
图片框 pic_lampOpen 灯光控制的开关:背景色 Transparent,背景图片 switch_off
分组框 groupBox3 LED推送
文本框 txt_ledMsg LED信息(Multiline 设为 True)
复选框 ch_autoLedFire 自动推送火情
按钮 btn_ledSendMsg 推送LED信息
按钮 btn_ledEnvironment2 推送天气信息(LED推送组里的那个)
图表 chart1 放在 panel_bg 左下方,显示最高温度和平均温度

书上表 8-6、表 8-7 把四个按钮的"名称"写成了"数据分析""推送天气信息""推送LED信息",那是按钮上的文字。名称按上表写,任务 3 的代码和自动评分都用这些名字。

实现步骤

  1. 项目资源里再勾选 day_02、bg_from2、switch_off(任务 3 还要用 day_01、switch_on,可以一起勾上)。
  2. 点 + 新建窗体,建 Environment,设成无边框、屏幕居中,调到合适的大小。
  3. 按"标题栏 → panel2 → panel3 → panel_bg"的顺序拖面板,设好停靠。先放的面板先占地方,放错了可以在属性里改停靠。
  4. 在 panel_bg 上依次放底部的 panel5(环境数据栏)和右边的 panel_form,再把两组控件放进 panel_form 里的两个分组框。书上要求 panel_form 里的其他控件背景色也设成 Transparent,让背景图透出来。
  5. 拖一个图表到 panel_bg 上,在属性窗口点系列和图例:
    • 图例两个:MaxLegend、AVGLegend;
    • 系列两个:MaxSeries(图表类型 Line,图例 MaxLegend,图例文字"最大值",X 值字段 _Time,Y 值字段 MaxTemperature)和 AVGSeries(Line,AVGLegend,"平均值",_Time,AVGTemperature)。
  6. 主窗体 pic_environment 的 Click:new Environment().Show();。
  7. lb_return 的 Click:this.Close();(只关掉这个窗体,主窗体还在)。

和书上不一样的地方

背景图片叫 bg_from2:书上写的是 bg_form2.png,配套资料里的文件名是 bg_from2,素材库也用这个名字。

在平台上怎么试

  1. 运行后在主界面点"校园环境",打开 Environment 窗体:背景是路灯场景,底部有五个文本框和"数据分析""推送天气信息",右边有"路灯控制""LED推送"两组,左下方有图表(现在还没有数据)。
  2. 点"< 返回主窗体",Environment 关闭,主界面还在。