MagicMirror Forum
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • 3rd-Party-Modules
    • Donate
    • Discord
    • Register
    • Login
    1. Home
    2. sharkbait
    A New Chapter for MagicMirror: The Community Takes the Lead
    Read the statement by Michael Teeuw here.
    S
    Offline
    • Profile
    • Following 0
    • Followers 0
    • Topics 3
    • Posts 11
    • Groups 0

    sharkbait

    @sharkbait

    1
    Reputation
    2
    Profile views
    11
    Posts
    0
    Followers
    0
    Following
    Joined
    Last Online

    sharkbait Unfollow Follow

    Best posts made by sharkbait

    • Query on MMM-CalendarExt3 modification

      Re: Query on MMM-CalendarExt3 modification

      I’d like to thank both @sdetweil and @MMRIZE for taking the time to guide me and help me troubleshoot this query of mine. In the end, I have adopted and implemented @MMRIZE “CustomButtons” solution, as it delivered exactly what I wanted (i.e. allowed me to switch the calendar view to any month that I want), and appears to work flawlessly with any version MMM-CalendarExt3 (1.9.0 and 1.9.4). A Happy New Year and kudos to both of you.

      posted in Development
      S
      sharkbait

    Latest posts made by sharkbait

    • Query on MMM-CalendarExt3 modification

      Re: Query on MMM-CalendarExt3 modification

      I’d like to thank both @sdetweil and @MMRIZE for taking the time to guide me and help me troubleshoot this query of mine. In the end, I have adopted and implemented @MMRIZE “CustomButtons” solution, as it delivered exactly what I wanted (i.e. allowed me to switch the calendar view to any month that I want), and appears to work flawlessly with any version MMM-CalendarExt3 (1.9.0 and 1.9.4). A Happy New Year and kudos to both of you.

      posted in Development
      S
      sharkbait
    • RE: Query on MMM-CalendarExt3 modification

      @MMRIZE I’ve removed the position of the “MMM-CustomInjection” module from the config.js as per your kind advice. The 3 buttons [prev], [current ] and [next] are still not appearing in the Calendar HeaderTitle (i.e. in my case -> DECEMBER 2024).

      This settings for my config.js are as follows:

      ...,
      		{
      		  module: "MMM-CalendarExt3",
      		  position: "bottom_bar",
      		  title: "Our Family Calendar",
      		  config: {
      			mode: "month",
      			cellDateOptions: { day: 'numeric' }, // suppress month from appear in cellDate
      			monthIndex: 0, //0=curr_month, -1=prev, 1=next
      			instanceId: "basicCalendar",
      			maxEventLines: {0:6, 6:5}, // Dynamically sized; 5 events for months with 6 weeks. 6 events for all others.
      			firstDayOfWeek: 0,
      			calendarSet: [],
      			fontSize: '18px',
      		  }
      		},
      
      		{
      			module: "MMM-CustomInjection",
      		}, ...
      
      

      The code deployed for the MMM-CustomInjection.js was:

      /* modules/MMM-CustomInjection/MMM-CustomInjection.js */
      Module.register("MMM-CustomInjection", {
        getStyles: function () {
          return [
            this.file("MMM-CustomInjection.css")
          ]
        },
      
        notificationReceived: function (notification, payload, sender) {
          if (notification === "CX3_DOM_UPDATED") {
            const { instanceId } = payload
            this.inject(instanceId)
          }
        },
      
        inject: function (instanceId) {
          const moduleDom = document.querySelector(`#${instanceId}`)
          if (!moduleDom) return
          moduleDom.classList.add('custom-injected')
          const buttons = document.createElement('div')
          buttons.className = 'calendar-header-buttons'
          const prev = document.createElement('button')
          prev.className = 'calendar-header-button'
          prev.innerHTML = 'PREV'
          prev.onclick = () => {
            this.sendNotification('CX3_GET_CONFIG', {
              callback: (currentConfig) => {
                this.sendNotification('CX3_SET_CONFIG', {
                  monthIndex: currentConfig.monthIndex - 1,
                })
              }
            })
          }
          const current = document.createElement('button')
          current.className = 'calendar-header-button'
          current.innerHTML = 'CURRENT'
          current.onclick = () => {
            this.sendNotification('CX3_RESET', {})
          }
          const next = document.createElement('button')
          next.className = 'calendar-header-button'
          next.innerHTML = 'NEXT'
          next.onclick = () => {
            this.sendNotification('CX3_GET_CONFIG', {
              callback: (currentConfig) => {
                this.sendNotification('CX3_SET_CONFIG', {
                  monthIndex: currentConfig.monthIndex + 1,
                })
              }
            })
          }
          buttons.appendChild(prev)
          buttons.appendChild(current)
          buttons.appendChild(next)
          moduleDom.appendChild(buttons)
        }
      })
      

      The accompanying “MMM-CustomInjection.css” settings were:

      /* modules/MMM-CustomInjection/MMM-CustomInjection.css */
      .custom-injected {
        position: relative;
      
        .calendar-header-buttons {
          position: absolute;
          top: 30px;
          right: 0;
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          gap: 10px;
          width: fit-content;
      
          .calendar-header-button {
            background-color: transparent;
            border: none;
            color: white;
            font-weight: bold;
          }
        }
      }
      
      posted in Development
      S
      sharkbait
    • RE: Query on MMM-CalendarExt3 modification

      @sdetweil I added this entry to custom.css:

      html {
        cursor: default;
      }
      

      For config.js, my settings for “MMM-CalendarExt3”, “MMM-pages” and “MMM-page-indicator” were as follows:

      	{
      		  module: "MMM-CalendarExt3",
      		  position: "bottom_bar",
      		  classes:"page3",
      		  title: "Our Family Calendar",
      		  config: {
      			mode: "month",
      			headerWeekDayOptions: {
      				weekday: "narrow"
      			},
      			cellDateOptions: { day: 'numeric' }, // suppress month from appear in cellDate
      			monthIndex: 0, //0=curr_month, -1=prev, 1=next
      			maxEventLines: {0:6, 6:5}, 
      			firstDayOfWeek: 0,
      			calendarSet: [],
      			fontSize: '18px',
      			refreshInterval: 120000,
      		  },
      		  disabled: false,
      	},
      
      		  {
      			module: "MMM-page-indicator",
      			position: "bottom_bar",
      			order: "*",
      			config: {},
      			disabled: false,
      			classes: "fixed"
      		  },
      	// pages
      		  {
      			module: "MMM-pages",
      			disabled: false,
      			config: {
      			  modules: [
      				[
      				  "page1"
      				],
      				[
      				  "page2"
      				],
      				[
      				  "page3"
      				]
      			  ],
      			  fixed: [
      				"fixed"
      			  ],
      			  animationTime: 10000, // time of fade in/out on page change
      			  rotationTime: 0,  // if you make this 0, then the pages only turn manually or via notification from somewhere else (indicator)
      			  hiddenPages: {
      			  }
      			},
      			order: "*"
      		  },
      

      A white circular dot at the bottom indicates whether the rendered page is page1 or page2 or page3. I tried tapping on the white dots but wasn’t able to switch among page views. Could it be a touchscreen (portrait orientation) xinput issue ?

      posted in Development
      S
      sharkbait
    • RE: Query on MMM-CalendarExt3 modification

      @MMRIZE I tried to implement this CustomInjection code but the rendered display turned out like this ![alt text]https://drive.google.com/file/d/1OUJ3EBz1CNMVqA9ds7kQhc4sTuovUoUA/view?usp=sharing.

      My setting in config.js is as follows:
      …,
      {
      module: “MMM-CustomInjection”,
      position: “bottom_bar”,
      },

      Instead of buttons, what I see is just the module name (MMM-CustomInjection, and below that module_5_MMM-CustomInjection).

      This is definitely a more polished solution, but I’m not sure why the display could not be rendered.

      posted in Development
      S
      sharkbait
    • RE: Query on MMM-CalendarExt3 modification

      @MMRIZE Thank you for the taking the effort to provide me with the set of code. I’ve tested it and it works wonderfully.

      posted in Development
      S
      sharkbait
    • RE: Query on MMM-CalendarExt3 modification

      @sdetweil Thank you for taking the time to read my post and providing the guidance, and the additional modules I could try out. I have tried the 2 extensions as per your recommendation. The transition between pages is slick when set to auto rotate but for some reason, the page indicator module doesn’t allow me to switch (tap) between pages manually on my touchscreen, when I disable the auto-rotate .

      posted in Development
      S
      sharkbait
    • Query on MMM-CalendarExt3 modification

      I’ve setup the MagicMirror as digital calendar using a raspberry pi and portable touchscreen (in portrait orientation). The display in essence resembles the image shown here.
      ![alt text]https://drive.google.com/file/d/1-sQmG7VDPnp1sjRKCc-74JwL0Dd8rJCB/view?usp=sharing

      The calendar module I’ve used is the MMM-CalendarExt3 module. What I am trying to achieve is add 3 buttons to the MMM-CalendarExt3.js code that will allow me dynamically switch (on demand) the current calendar view from the current month, to either the previous month or next, and back.

      The settings of my MMM-CalendarExt3 module in config.js are pretty basic, like so:

      …,
      {
      module: “MMM-CalendarExt3”,
      position: “bottom_bar”,
      title: “Our Family Calendar”,
      config: {
      mode: “month”,
      cellDateOptions: { day: ‘numeric’ }, // suppress month from appear in cellDate
      monthIndex: 0, //0=curr_month, -1=prev, 1=next
      instanceId: “basicCalendar”,
      maxEventLines: 6,
      firstDayOfWeek: 0,
      calendarSet: [],
      fontSize: ‘18px’,
      }
      }, …

      The (failed) modifications I’ve made to the getDom() function in the MMM-CalendarExt3.js module are as follows:

      getDom() {
          let dom = document.createElement("div");
          dom.innerHTML = "";
          dom.classList.add("bodice", `CX3_${this.activeConfig.instanceId}`, "CX3");
      
          if (this.activeConfig.fontSize) {
              dom.style.setProperty("--fontsize", this.activeConfig.fontSize);
          }
      
          // Add button container
          const buttonContainer = document.createElement("div");
          buttonContainer.style.display = "flex";
          buttonContainer.style.justifyContent = "center";
          buttonContainer.style.marginBottom = "10px";
          buttonContainer.style.position = "absolute"; // Ensure it stays on top
          buttonContainer.style.top = "10px"; // Position it at the top
          buttonContainer.style.left = "50%"; // Center horizontally
          buttonContainer.style.transform = "translateX(-50%)"; // Adjust centering
          buttonContainer.style.zIndex = "1000"; // Ensure it stays above other elements
          buttonContainer.style.backgroundColor = "rgba(255, 255, 255, 0.9)"; // Optional: Add background for better visibility
          buttonContainer.style.padding = "5px"; // Optional: Add padding for aesthetics
          buttonContainer.style.borderRadius = "5px"; // Optional: Add rounded corners
      
          const prevButton = document.createElement("button");
          prevButton.innerHTML = "Previous Month";
          prevButton.style.margin = "0 5px";
          prevButton.onclick = () => {
              this.sendNotification("CX3_SET_CONFIG", { monthIndex: this.activeConfig.monthIndex - 1 });
          };
      
          const currentButton = document.createElement("button");
          currentButton.innerHTML = "Current Month";
          currentButton.style.margin = "0 5px";
          currentButton.onclick = () => {
              this.sendNotification("CX3_SET_CONFIG", { monthIndex: 0 });
          };
      
          const nextButton = document.createElement("button");
          nextButton.innerHTML = "Next Month";
          nextButton.style.margin = "0 5px";
          nextButton.onclick = () => {
              this.sendNotification("CX3_SET_CONFIG", { monthIndex: this.activeConfig.monthIndex + 1 });
          };
      
          buttonContainer.appendChild(prevButton);
          buttonContainer.appendChild(currentButton);
          buttonContainer.appendChild(nextButton);
      
          dom.appendChild(buttonContainer);
      
          if (!this.library?.loaded) {
              Log.warn("[CX3] Module is not prepared yet, wait a while.");
              return dom;
          }
      
          dom = this.draw(dom, this.activeConfig);
      
          if (this.refreshTimer) {
              clearTimeout(this.refreshTimer);
              this.refreshTimer = null;
              this.refreshTimer = setTimeout(() => {
                  clearTimeout(this.refreshTimer);
                  this.refreshTimer = null;
                  this.updateAnimate();
              }, this.activeConfig.refreshInterval);
          }
      
          return dom;
      }
      

      The 3 issues I’ve encountered with the above code are as follows:

      1. The above modification added the 3 buttons below the month heading (not beside, as shown in my image link). This is not really an issue.

      2. The buttons appear momentarily at startup, and then get eclipsed (covered over) by the rest of the calendar cells when they render and appear. This is a problem since the buttons are not visible for users to tap.

      3. MagicMirror seems to have disabled the “mouse cursor” and hence the ability for the buttons (previous month, current month, next month) to respond to user taps on the touchscreen.

      Does anyone know of a workaround or suitable modules I can deploy to fit my requirements? If so, I would be grateful to hear from you.

      posted in Development
      S
      sharkbait
    • RE: Touchscreen Family Dashboard

      @jalow Thank you. It worked.

      posted in Show your Mirror
      S
      sharkbait
    • RE: MMM-CalendarExt3 CSS configuration for Month Size

      @sdetweil
      Thank you for the invaluable tip. I studied the HTML elements using your suggested CTRL+SHIFT+I approach, and managed to increase the font size of the header month. This was the snippet I added to custom.css that worked:

      .MMM-CalendarExt3 .module-header {
      font-size:225%;
      font-weight:bold;
      padding: 0 0 20px 0;
      font-color: #FFFFFF;
      }

      posted in Custom CSS
      S
      sharkbait
    • RE: Touchscreen Family Dashboard

      @tjat How did you manage to increase the font-size of the calendar month heading (SEPTEMBER 2023)?

      posted in Show your Mirror
      S
      sharkbait