Touch Display 2【レビュー】手軽さと拡張性を備えた公式ディスプレイ

sudo apt install squeekboard

curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -

sudo apt install -y nodejs

git clone https://github.com/MichMich/MagicMirror

cd MagicMirror/

npm run install-mm

nano config/config.js

let config = {
	address: "localhost",	// Address to listen on, can be:
							// - "localhost", "127.0.0.1", "::1" to listen on loopback interface
							// - another specific IPv4/6 to listen on a specific interface
							// - "0.0.0.0", "::" to listen on any interface
							// Default, when address config is left out or empty, is "localhost"
	port: 8080,
	basePath: "/",	// The URL path where MagicMirrorﾂｲ is hosted. If you are using a Reverse proxy
									// you must set the sub path here. basePath must end with a /
	ipWhitelist: ["127.0.0.1", "::ffff:127.0.0.1", "::1"],	// Set [] to allow all IP addresses
									// or add a specific IPv4 of 192.168.1.5 :
									// ["127.0.0.1", "::ffff:127.0.0.1", "::1", "::ffff:192.168.1.5"],
									// or IPv4 range of 192.168.3.0 --> 192.168.3.15 use CIDR format :
									// ["127.0.0.1", "::ffff:127.0.0.1", "::1", "::ffff:192.168.3.0/28"],

	useHttps: false,			// Support HTTPS or not, default "false" will use HTTP
	httpsPrivateKey: "",	// HTTPS private key path, only require when useHttps is true
	httpsCertificate: "",	// HTTPS Certificate path, only require when useHttps is true

	language: "en",
	locale: "en-US",
	logLevel: ["INFO", "LOG", "WARN", "ERROR"], // Add "DEBUG" for even more logging
	timeFormat: 24,
	units: "metric",

	modules: [
		{
			module: "alert",
		},
		{
			module: "updatenotification",
			position: "top_bar"
		},
		{
			module: "clock",
			position: "top_left"
		},
		{
			module: "calendar",
			header: "Japanese Holidays",
			position: "top_left",
			config: {
				calendars: [
					{
						fetchInterval: 7 * 24 * 60 * 60 * 1000,
						symbol: "calendar-check",
						url: "https://www.google.com/calendar/ical/ja.japanese%23holiday%40group.v.calendar.google.com/public/basic.ics"
					}
				]
			}
		},
		{
			module: "MMM-VideoLoop",
			position: "middle_center", // Central position
			config: {
				videoPath: "http://localhost:8081/radar.mp4"
			}
		},
		{
			module: "weather",
			position: "top_right",
			config: {
				weatherProvider: "openmeteo",
				type: "current",
				lat: 35.6895,
				lon: 139.6917
			}
		},
		{
			module: "weather",
			position: "top_right",
			header: "Weather Forecast",
			config: {
				weatherProvider: "openmeteo",
				type: "forecast",
				lat: 35.6895,
				lon: 139.6917
			}
		},
		{
			module: "newsfeed",
			position: "bottom_bar",
			config: {
				feeds: [
					{
						title: "NHK news",
						url: "https://www3.nhk.or.jp/rss/news/cat0.xml"
					}
				],
				showSourceTitle: true,
				showPublishDate: true,
				broadcastNewsFeeds: true,
				broadcastNewsUpdates: true
			}
		},
	]
};

/*************** DO NOT EDIT THE LINE BELOW ***************/
if (typeof module !== "undefined") { module.exports = config; }

cd modules

mkdir MMM-VideoLoop

cd MMM-VideoLoop

nano MMM-VideoLoop.js

Module.register("MMM-VideoLoop", {
    defaults: {
        videoPath: "http://localhost:8081/radar.mp4" //
    },

    getDom: function() {
        const wrapper = document.createElement("div");
        wrapper.style.textAlign = "center";

        const video = document.createElement("video");
        video.src = this.config.videoPath;
        video.autoplay = true;
        video.loop = true;
        video.muted = true;
        video.style.width = "100%";
        video.style.maxWidth = "800px";

        video.onerror = () => {
            wrapper.innerText = "Failed to load video. Please check the path.";
            console.error("Failed to load video:", this.config.videoPath);
        };

        wrapper.appendChild(video);
        return wrapper;
    }
});

cd

nano /home/pi/MagicMirror/css/custom.css

/* Set all text to a more greenish yellow-green */
* {
    color: #7FFF00 !important; /* Chartreuse */
}

/* Adjust text for the weather module (specify further if necessary) */
.weather .bright,
.weather .dimmed,
.weather .normal,
.weather .small,
.weather .large {
    color: #7FFF00 !important;
}

/* Apply to other modules if text remains */
.clock .bright,
.clock .dimmed,
.calendar .event,
.compliments .compliment,
.newsfeed .newsfeed-title,
.newsfeed .newsfeed-source {
    color: #7FFF00 !important;
}
/* MMM-VideoLoop module to be placed at the back */
.MMM-VideoLoop {
    position: absolute;
    top: -5px;
    left: -110px;
    width: 120%;
    height: auto;
    z-index: 0; /* Set a low z-index to place it behind */
    pointer-events: none; /* Make sure it doesn't interfere with clicks */
    transform: scale(1.2);
}

/* Ensure other modules are above */
.module {
    position: relative;
    z-index: 10; /* Set higher z-index for other modules */
}
.calendar {
    position: relative !important;
    z-index: 120 !important;

cd /home/pi/MagicMirror

python3 -m http.server 8081

cd MagicMirror/ && npm run start