为MMM-WeeklySchedule添加地点详情功能

0. 背景

0.1 关于我的项目

使用 MagicMirror2 可以搭建一个基于NodeJS和JavaScript的展示屏幕。

在本校的计算机应用大赛中，本小组制作了基于树莓派的物联网智能仪容镜，能够在单向玻璃后使用一块常规的IPS屏幕来显示内容。

其中内容的展示我们选用了基于NodeJS和JavaScript的MagicMirror2来展示所需要显示的内容。

由于我们的项目针对学生的需求，希望能够加入展示课程表的功能，所以我们选用了MagicMirror2的插件 MMM-WeeklySchedule 来实现课程表功能，并对其增加显示上课地点的feature。

0.2 关于MagicMirror 2

MagicMirror²: The open source modular smart mirror platform.

MagicMirror² is an open source modular smart mirror platform. With a growing list of installable modules, the MagicMirror² allows you to convert your hallway or bathroom mirror into your personal assistant. MagicMirror² is built by the creator of the original MagicMirror with the incredible help of a growing community of contributors.

0.3 关于MMM-WeeklySchedule

以下是关于本项目的介绍，本项目是一个MagicMirror的插件，能够在MagicMirror页面上根据配置文件按星期显示课程表，课程表包含了上课时间和课程名称。

项目地址

MMM-WeeklySchedule

This a module for the MagicMirror. It displays today’s timetable from a weekly recurring schedule. It is intended for regular weekly schedules, which have a low update frequency and thus can be maintained manually. Examples are:

  • kid’s school classes
  • student lectures
  • teacher’s teaching schedule
  • gym training classes
  • household chores
  • opening hours of bakery, post office, supermarket
preview

Config

The entry in config.js can include the following options:

OptionDescription
scheduleDefines the data the module shows. It consists of a definition for timeslots and lessons. See below.
updateIntervalHow often the content is updated. Default value: 1 • 60 • 60 • 1000 // every 1 hour
showWeekdayinHeaderAppends the module headertext with weekday name, e.g., on Monday Default value: true
showNextDayAfterFrom this time of the day on the module shows the schedule of the next day. This is helpful when, e.g., a school day is over and you want to show what is up tomorrow. If you don’t like this set the value to 23:59 or undefined. Default value: 16:00
allowHTMLWhether timeslot and lesson texts can contain HTML. Can for example be used to color certain lessons. Default value: false

1. 项目需求分析

经过了简单的了解，MMM-WeeklySchedule只能够按照星期显示上课的时间的课程名称，不能够显示上课的地点。

然而我们所设计的项目中需要本模块能够显示上课地点，所以对MMM-WeeklySchedule进行更改，添加显示上课地点的feature

2. 代码修改

2.1 项目代码分析

项目文件的树状结构

1
2
3
4
5
6
7
8
├── MMM-WeeklySchedule.css
├── MMM-WeeklySchedule.js
├── package.json
├── README.md
└── translations
    ├── en.json
    ├── ...
    └── zh-cn.json

简单分析可以知道，MMM-WeeklySchedule.css 和 MMM-WeeklySchedule.js 是本项目最核心的文件，涉及到课程表HTML表单的生成，

package.json 是NodeJS的npm管理器相关的包管理文件，

README.md 是本项目的说明文件，

translations/ 其中存放了本项目的i18n文件。

分析 MMM-WeeklySchedule.js ，其中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
{
    //Other function ...
    
	getDom: function() {
		var date = this.getDisplayDate(); 

		// get day of week and access respective element in lessons array
		var dow = date.locale('en').format("ddd").toLowerCase();
		var lessons = this.config.schedule.lessons[dow];

		// no lessons today, we return default text
		if(lessons == undefined)
		{
			return this.createTextOnlyDom(
				this.translate("NO_LESSONS")
			);
		}

		// get timeslots
		var timeslots = this.config.schedule.timeslots;

		// build table with timeslot definitions and lessons
		wrapper = document.createElement("table");
		for (let index = 0; index < lessons.length; index++) {
			const lesson = lessons[index];
			const time = timeslots[index];

			// only create a row if the timeslot's lesson is defined and not an empty string
			if(lesson)
			{
				var row = this.createTimetableRow(time, lesson); 
				wrapper.appendChild(row);
			}
		}
		return wrapper;
        //Other function ...
	},

可以知道，getDom: function() 是关系着DOM生成的函数，在此处生成了将要显示在 MagicMirror 展示屏幕上的内容 。

在 getDom: function() 中，可以知道涉及到生成基于表格的课程表的部分代码在此处：

1
2
3
4
5
// build table with timeslot definitions and lessons
wrapper = document.createElement("table");
for (let index = 0; index < lessons.length; index++) {
	const lesson = lessons[index];
	const time = timeslots[index];

所以我们需要修改的部分主要在此处。

2.2 代码修改

2.2.1 读取课程

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{
    module: "MMM-WeeklySchedule",
    position: "top_left",
    header: "Household chores",
    config: {
            schedule: {
                    timeslots: [ "Feed the fish", "Set the table", "Take out the trash", "Hoover living room" ],
                    lessons: {
                            mon: [ "Bart",  "Marge", "Homer", "Lisa"  ],
                            tue: [ "Lisa",  "Bart",  "Marge", "Homer" ],
                            wed: [ "Homer", "Lisa",  "Bart",  "Marge" ],
                            thu: [ "Marge", "Homer", "Lisa",  "Bart"  ],
                            fri: [ "Bart",  "Marge", "Homer", "Lisa" ]
                    }
            },
            updateInterval: 1 * 60 * 60 * 1000, // every hour
            showNextDayAfter: undefined
    }
},

这是原模块设计的配置文件部分，其中 schedule 字段规定了模块所显示的课程表信息，我们的计划是在每个课程中添加字段，使用 name 字段来表示课程名称，使用 room 来表示上课地点。

根据MagicMirror的 说明文档 Introduction | MagicMirror² Documentation

使用 this.config 可以在模块的js文件中引用 config.js 文件中的本模块部分的配置。

在 getDom: function() 中，使用了

1
var lessons = this.config.schedule.lessons[dow];

来对配置文件进行读取，生成了lessons对象。

对其加以修改

1
2
3
4
5
6
7
8
for (let index = 0; index < lessons.length; index++) {
	const lesson = lessons[index]["name"];
	const room = lessons[index]["room"];
	const time = timeslots[index];

	var row = this.createTimetableRow(time, lesson, room);
	wrapper.appendChild(row);
}

如上述修改即可对配置文件中的内容进行读取了。修改后的配置文件应以如下方法使用：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
lessons: {
	mon: [
		{
			name: "",
			room: "",
		},
		{
			name: "软件工程导论",
			room: "1107",
		},
		{
			name: "离散数学",
			room: "3110",
		},
		{
			name: "大学生体育与健康",
			room: "西看台202",
		},
		{
			name: "",
			room: "",
		}
	],
    ...
}

2.2.2 设置样式

完成了从配置文件读取内容的部分，还需要对读取的内容进行Html样式的设计。

分析原项目的 MMM-WeeklySchedule.js 可以发现和设置样式有关的函数

createTimetableRow: function (time, lesson)

与设置单元格样式有关的部分：

1
2
3
4
5
6
7
8
9
10
var tdlesson = document.createElement("td");
tdlesson.className = "xsmall bright lesson";
if (this.config.allowHTML) {
	tdlesson.innerHTML = lesson;
} else {
	tdlesson.appendChild(
		document.createTextNode(lesson)
	);
}
row.appendChild(tdlesson);

依照原本的函数，可以添加对新增内容 room 的设置：

1
2
3
4
5
6
7
8
9
10
var tdroom = document.createElement("td");
tdroom.className = "xsmall bright lesson";
if (this.config.allowHTML) {
	tdroom.innerHTML = room;
} else {
	tdroom.appendChild(
		document.createTextNode(room)
	);
}
row.appendChild(tdroom);

2.3 CSS修改

由于原本的模块基于英文进行的开发，此处如果有需要可以在CSS文件中对中文样式进行调整

1
2
3
4
5
6
7
8
9
10
11
12
13
{
.lessontime {
    text-align: right;
    white-space: nowrap;
    padding-right: 2em;
    width: 1ex;
}

.lesson{
    text-align: left;
    padding-right: 1em;

}

3. 成果展示

preview

4. 结语

本项目是基于MagicMirror的一个插件，使用JavaScript来编写，也可以使用Html语法来进行修改。

原本是用于制作“魔镜”的插件，在针对本地化的过程中加入了针对中国大学生看课表时也需要注意上课时间的特点，增添了课程上课地点的展示。

总的来说效果令人满意。