@rpp
Yeah, here’s a link to my git. I’m not a coder so I’m assuming I’m missing some best practices but each module should be accessible. They’re certainly highly customized for my specific classes, icons, etc.
https://github.com/tjat84
My screen is an ASUS BE24ECSBT.
Thanks. I had zero background in javascript or CSS so started off with prompts like “Provide the full code for a magic mirror module in javascript that can add, edit, and delete events from my Google Calendar”. I did pay for the premium subscription, which gives you access to the more advanced models, which certainly helped. It returns both an initial module file and node_helper if needed. It was a very iterative process early on - the initial code would certainly have some errors in it, but I was able to get through it by pasting errors from the developer console back into Chat GPT and/or adding detailed logging statements to the code itself to see exactly what it was doing.
The most challenging part was getting the Google API set up correctly. I suspect Google changed some aspects after ChatGPTs cutoff date. In some cases, I was able to have it scan the developer docs to give me updated instructions.
Realized as well that I forgot an actual screenshot in my OP.
Some fun updates made over the past 2 weeks, all in my git for anyone interested. Code might be specific to my use, but could be adaptable: https://github.com/tjat84
MMM-ScreenSaver: After a period of inactivity, this module pulls the photo that would otherwise appear in the MMM-GooglePhotos module and bounces it around the darkened screen. Will turn off when the touchscreen is pressed.
MMM-SystemOptions: Displays a drop-down option menu that allows the user to send MMM-RemoteControl notifications straight from the dashboard (e.g refresh screen, minimize window, reboot, shut down, and activate screensaver if available)
MMM-InfoPage: Loads as a collapsed module in the bottom left of the screen. The user then swipes up to expand and displays information my category. I’m using it to display phone numbers of key contacts, town services, and my kid’s login information for school apps. A few pictures below
Here’s a simple menu module that work with MMM-Remote-Control (which is required). For those using a touchscreen, this lets users open a menu to access common controls for their mirror. When an item is clicked, it sends a notification to MMM-Remote-Control to execute the action.
MMM-RemoteControl
{
module: "MMM-SystemOptions",
position: "top_right"
},
@rpp
Yeah, here’s a link to my git. I’m not a coder so I’m assuming I’m missing some best practices but each module should be accessible. They’re certainly highly customized for my specific classes, icons, etc.
https://github.com/tjat84
My screen is an ASUS BE24ECSBT.
Thanks. I had zero background in javascript or CSS so started off with prompts like “Provide the full code for a magic mirror module in javascript that can add, edit, and delete events from my Google Calendar”. I did pay for the premium subscription, which gives you access to the more advanced models, which certainly helped. It returns both an initial module file and node_helper if needed. It was a very iterative process early on - the initial code would certainly have some errors in it, but I was able to get through it by pasting errors from the developer console back into Chat GPT and/or adding detailed logging statements to the code itself to see exactly what it was doing.
The most challenging part was getting the Google API set up correctly. I suspect Google changed some aspects after ChatGPTs cutoff date. In some cases, I was able to have it scan the developer docs to give me updated instructions.
Realized as well that I forgot an actual screenshot in my OP.
I recently completed the software portion of my “Magic Mirror” that is really a touchscreen dashboard for the family to use, running on a Raspberry Pi4. I wanted to allow for family members to add/edit/delete events from the screen so we could replace our messy paper calendar. As shown, the dashboard also provides local weather, family photos, and commute times for both adults in the household. The next step is to build the physical housing around the screen, likely in the form of extending the bookcase it’s currently resting on. The finished product will be a built in.
I’m not a programmer, but with the help of ChatGPT was able to develop a few custom modules to interact with others from the community. The most complex one I needed to develop was the integration with the Google Calendar API which was built entirely from scratch.
Modules used:
Custom Modules
@sdetweil so do I instead need to cause the default calendar module to refresh with my google calendar content?
Everything updates when I close and reload the magic mirror so just trying to update on demand within the same instance.
@sdetweil - It’s within the main module we’re I’m creating the calendar event. I’m following the same syntax being used above, which is working. I’ll also caveat that I’m not really experienced with this stuff so likely am doing something dumb. Am I losing the “this” reference somehow? Appreciate the help
this.sendSocketNotification("ADD_CALENDAR_EVENT", payload);
this.message = "Adding event...";
this.messageType = "info";
this.updateDom();
this.closeForm();
},
notificationReceived: function(notification, payload, sender) {
// TODO: Handle notifications
},
socketNotificationReceived: function(notification, payload) {
if (notification === "EVENT_ADD_SUCCESS_MAIN") {
console.log ("Sending event to calendar");
this.showMessage('Event added!', 'success');
if (payload) {
this.sendNotification("EVENT_ADD_SUCCESS", payload);
} else {
this.sendNotification("EVENT_ADD_SUCCESS");
}
} else if (notification === 'EVENT_ADD_FAILED') {
this.showMessage('Event not added', 'error');
if (payload) {
this.sendNotification("EVENT_ADD_FAILED", payload);
} else {
this.sendNotification("EVENT_ADD_FAILED");
}
}
},
@MMRIZE No worries, it worked perfectly.
My latest issue is that I’m struggling to refresh the calendar when I add a new event to my google calendar. I’m temporarily working on a local copy to play around with the JS and have this step currently. Would this work or is there an easier/better way that you’ve already built?
forceRefresh: function() {
console.log("forceRefresh called");
if (this.refreshTimer) {
clearTimeout(this.refreshTimer);
this.refreshTimer = null;
}
this.tempMoment = null;
this.stepIndex = 0;
this.updateDom(this.config.animationSpeed);
}
Thanks. I was able to build a simple module to advance the month via arrow keys using glance. Let me know if that’d be useful to share anywhere.
This question is basic but driving me nuts, but is it possible for the calendar title to include the year? For instance, it now says “July” but I’d like it to say “July 2023”.
@MMRIZE first, thank you for your development and continued efforts on this module. It is the centerpiece of my home dashboard. I am interested in incorporating user interaction to my calendar module. For instance,is there capability to display the prior or next month based on a user swiping or hitting an arrow key on an attached keyboard? I know other modules are needed to feature event listeners for those actions but I’m not sure if cx3 can handle the notifications those would pass as is.
Alternatively if this would need serious coding, would running multiple instances of the module work (each for a different month) and showing/hiding as appropriate?
(Long term, My dream state for my dashboard is an applet to popup and let the user add/modify an event directly from the screen and update my Google calendar, but that’ll be the last item in my list!)