Posts made by ChrisLeduex

ChrisLeduex

@JohnGalt I just put them directly in the CSS folder with the custom.css file while I was testing everything. But they can certainly go wherever you like based on how you organize stuff.

ChrisLeduex

Sorry @sdetweil, this is my first MM project and I have no idea what I’m doing. So I didn’t understand that “fullscreen_above” was a position option for modules.

In the screen shot below I left my clock the same as before with ‘z-index: 0’ on the apple and ‘z-index: 99’ on all the other classes of the clock. I then set my calendar module to “fullscreen_above” to see what would happen.

Not easy to see in the screen shot but all of the components of the clock that have a z-index are on top of the calendar and the date which doesn’t have any z-index values is underneath the calendar. So it would appear that any z-index value, even 0, puts those components on top of “fullscreen_above”. So yes, it should be used carefully because it will peek through.

{
	module: "clock",
	position: "top_left",
	config: {
		displayType: "analog",
		displaySeconds: false,
	}
},
{
	module: "calendar",
	header: "US Holidays",
	position: "fullscreen_above",
	config: {
		calendars: [
			{

ChrisLeduex

@sdetweil Larger numbers sit on top of smaller numbers. In this case I wanted to make sure the svg image was always underneath the clock face/hands (z-index: 0) and the clock hands were always on top (z-index: 99). I could have used ‘z-index: 0’ and ‘z-index: 1’ instead but picked a larger number just to be sure the clock is always on top of anything else that might get added.

I’m still working on it because I’d like to have a solution that doesn’t require any code changes to the module files. I’d like something that only requires using the custom.css file.

ChrisLeduex

I found a way to make this work, though it’s not the cleanest.

1:
In the clock.js file I add these lines to the bottom of these sections:

/************************************
* Create wrappers for analog and digital clock
*/
const analogBackground = document.createElement("div");
analogBackground.className = "clock-grid-background";

/****************************************************************
* Create wrappers for ANALOG clock, only if specified in config
*/
clockFace.appendChild(analogBackground);

2:
Added this section to the clock_styles.css:
Note the “z-index: 0;”

.clock-grid-background {
  position: absolute;
  display: block;
  z-index: 0;
}

I then added “z-index: 99;” to the following sections to make sure they stay on top:
.clock-circle
.clock-face
.clock-face::after
.clock-hour
.clock-minute
.clock-second

Added this code to the custom.css file:

.clock-grid-background {
  -webkit-mask: url('apple-fresh-fruit-svgrepo-com.svg') center/cover no-repeat;
  //mask: url('apple-fresh-fruit-svgrepo-com.svg');
  display: block;
  margin: auto;
  margin-top: 60px;
  margin-left: 65px;
  height: 120px;
  width: 120px;
  background-color: var(--use_color);
}

ChrisLeduex

Hello, I’m trying to add a svg image to the default analog clock module in a way that will allow me to change it’s color along with the other elements using custom.css.

However the problem is the image hides part of the clock hands and I can’t figure how to fix it. Any suggestions?

Here’s my entry in the custom.css file:

.clock-face {
.clock-face {
  -webkit-mask: url('apple-fresh-fruit-svgrepo-com.svg') center/cover no-repeat;
  mask: url('apple-fresh-fruit-svgrepo-com.svg');
  display: block;
  margin: auto;
  margin-top: 60px;
  height:45%;
  width: 45%;
  background:var(--use_color);
}

ChrisLeduex

@sdetweil Yeah you’re right, that one might be more difficult. But I do have MMM-ModuleToggleButton working with pinctrl. Here’s the updated node_helper.js file just in case anyone’s interested.

node_helper.js

const NodeHelper = require('node_helper'); // eslint-disable-line import/no-extraneous-dependencies
//const Gpio = require('onoff').Gpio;
const { exec } = require("child_process");

module.exports = NodeHelper.create({
  start() {
    this.started = false;
  },

  socketNotificationReceived(notification, payload) {
    if (notification === 'TOGGLE_BUTTON_CONFIG' && !this.started) {
      const self = this;
      this.config = payload;

      //const button = new Gpio(this.config.buttonGpioPin, 'in', 'both', { persistentWatch: true, debounceTimeout: this.config.debounceTimeoutInMilliseconds });
      //button.watch((err, state) => {
      //  if (state === 1) {
      //    self.sendSocketNotification(self.config.notificationName, true);
      //  }
      //});

      //this.started = true;
      
      // Set up GPIO as input using pinctrl command
      const pin = this.config.buttonGpioPin;
      const debounceTimeout = this.config.debounceTimeoutInMilliseconds;
      const notificationName = this.config.notificationName;
      let lastState = null;

      // Function to read the pin state using pinctrl
      const checkPinState = () => {
      exec(`pinctrl get ${pin}`, (err, stdout, stderr) => {
        if (err) {
          console.error(`Error reading GPIO state: ${err.message}`);
          return;
        }
       
        // Parse the pin state from stdout
        const state = stdout.includes("hi") ? 1 : 0;

        // Handle state change with debounce
        if (state !== lastState && state === 1) {
          this.sendSocketNotification(notificationName, true);
        }
       
        // Update last state
        lastState = state;
      });
      };

    // Set up an interval to check the pin state with debounce
    setInterval(checkPinState, debounceTimeout || 100); // Defaults to 100ms if debounce is not defined
      
    }
  }
});

ChrisLeduex

@sdetweil Ah yes, I forgot I have a python script I was kicking off manually that I forgot to run before testing those fixes. It is working now and both files are communicating with each other, thank you.

My next step is to see if I can get this working with the MMM-Buttons/MMM-ModuleToggleButton modules.

ChrisLeduex

@sdetweil Thank you for catching those, too much copying and pasting.

Removed one of the start functions from the module.js file and also updated this line in the node_helper.js file so now it is returning the pin state instead of the pin number.
//const pinState = parseInt(stdout.trim(), 10);
const pinState = stdout.includes(“hi”) ? 1 : 0;

There still seems to be an issue somewhere in my node_helper.js file though because I’m still not seeing anything from that file in the console. Looking through the forum it seems node_helper file issues are common and I’ve tried implementing a few of the solutions I found there but still haven’t found the problem but I will keep trying. I suspect maybe I’m not nesting my socket notifications correctly.

PinToggleTest.js

Module.register("MMM-PinToggleTest", {
  defaults: {
    pin: 19,
    modulesToToggle: ["clock", "calendar"],
    interval: 1000
  },

  start: function() {
    console.log("MMM-PinToggleTest started");
    Log.info("MMM-PinToggleTest is starting, sending CONFIG...");
    this.previousPinState = null;

    // Request initial pin check from the helper
    this.sendSocketNotification("CONFIG", this.config);
  },
  
  socketNotificationReceived: function(notification, payload) {
		if (notification === 'STARTED') {
    console.log("STARTED notification received from node_helper");
    this.config.text = 'Started';
    this.updateDom();
		}
	},

  socketNotificationReceived: function(notification, payload) {
    if (notification === "PIN_STATE") {
      const pinState = payload;
      console.log(`Received pin state: ${pinState}`);  // Log received state

      // Toggle modules based on pin state
      if (pinState !== this.previousPinState) {
        this.previousPinState = pinState;
        this.toggleModules(pinState === 1);
      }
    }
  },

  toggleModules: function(show) {
    console.log(`Toggling modules to ${show ? "show" : "hide"}`);
    this.config.modulesToToggle.forEach(moduleName => {
      const modules = MM.getModules().withClass(moduleName);
      modules.forEach(module => {
        if (show) {
          module.show(1000);  // Show module with fade-in effect
        } else {
          module.hide(1000);  // Hide module with fade-out effect
        }
      });
    });
  },

  getDom: function() {
    const wrapper = document.createElement("div");
    wrapper.innerHTML = "<small>MMM-PinToggleTest</small>";
    return wrapper;
  }
});

node_helper.js

const NodeHelper = require("node_helper");
const exec = require("child_process").exec;
//const rpio = require("rpio");
//const Gpio = require("onoff").Gpio;

//module.exports = NodeHelper.create({
//  start: function() {
//    console.log("Starting node_helper for MMM-PinToggleTest");
//    this.previousPinState = null;
//    this.config = null;
//  },

module.exports = NodeHelper.create({
  start() {
    this.started = false;
  },

  socketNotificationReceived: function(notification, payload) {
    if (notification === "CONFIG" && !this.started) {
      const self = this;
      console.log("CONFIG notification received");
      this.config = payload;
      this.schedulePinCheck();
      this.sendSocketNotification('STARTED', {message: 'test'});
      console.log("STARTED notification sent back to front end");
    }
  },

  schedulePinCheck: function() {
    console.log(`Setting up pin check every ${this.config.interval} ms`);
    setInterval(() => {
      this.checkPinState();
    }, this.config.interval);
  },

  checkPinState: function() {
    const pinNumber = this.config.pin;

    // Execute pinctrl command
    exec(`pinctrl get ${pinNumber}`, (error, stdout, stderr) => {
      if (error) {
        console.error(`Error reading GPIO pin ${pinNumber}: ${stderr}`);
        return;
      }

      //const pinState = parseInt(stdout.trim(), 10);
      const pinState = stdout.includes("hi") ? 1 : 0;
      console.log(`Detected pin state for pin ${pinNumber}: ${pinState}`);  // Log the detected state

      // Only send if state has changed
        if (pinState !== this.previousPinState) {
        this.previousPinState = pinState;
        console.log(`Pin state changed to ${pinState}`);
        this.sendSocketNotification("PIN_STATE", pinState);
        
        // Small delay to avoid multiple triggers
        setTimeout(() => {}, 100);
      }
    });
  }
});

ChrisLeduex

Hi guys, I’ve been trying to figure this out too. I think I’m close with these two files using ‘pinctrl’ instead of ‘/sys/class/gpio/’ but I can’t figure out what I’m missing.

Based on the console log it looks like there’s an issue in my node_helper file, possible with the socketNotification functions because I’m not seeing any of my test messages.

And based on the log files there may be something missing from the package.json file because sometimes I get this error “Error: Cannot find module ‘node helper’ MODULE_NOT_FOUND” but other times I don’t. And I tried running this fix but couldn’t get it to work.
[https://forum.magicmirror.builders/user/jorickjuh](link url)

Other than that I’m not seeing any other errors and module does appear to be working but it’s just not processing any button presses. I’ll keep trying but I’ll post my progress so far on here in case someone can see what I’m missing.

test file:

Module.register("MMM-PinToggleTest", {
  defaults: {
    pin: 19,
    modulesToToggle: ["clock", "calendar"],
    interval: 1000
  },

//consol.log("MMM-PinToggleTest is starting...");

  start: function() {
    Log.info("MMM-PinToggleTest is starting, sending CONFIG...");
    consol.log("MMM-PinToggleTest is starting, sending CONFIG...");
    
    this.sendSocketNotification("CONFIG", {
      interval: this.config.interval,
      pin: this.config.pin
      });
    },

  start: function() {
    console.log("MMM-PinToggleTest started");
    this.previousPinState = null;

    // Request initial pin check from the helper
    this.sendSocketNotification("CONFIG", this.config);
  },

  socketNotificationReceived: function(notification, payload) {
    if (notification === "PIN_STATE") {
      const pinState = payload;
      console.log(`Received pin state: ${pinState}`);  // Log received state

      // Toggle modules based on pin state
      if (pinState !== this.previousPinState) {
        this.previousPinState = pinState;
        this.toggleModules(pinState === 1);
      }
    }
  },

  toggleModules: function(show) {
    console.log(`Toggling modules to ${show ? "show" : "hide"}`);
    this.config.modulesToToggle.forEach(moduleName => {
      const modules = MM.getModules().withClass(moduleName);
      modules.forEach(module => {
        if (show) {
          module.show(1000);  // Show module with fade-in effect
        } else {
          module.hide(1000);  // Hide module with fade-out effect
        }
      });
    });
  },
  

  getDom: function() {
    const wrapper = document.createElement("div");
    wrapper.innerHTML = "<small>MMM-PinToggleTest</small>";
    return wrapper;
  }
});

node_helper:

const NodeHelper = require("node_helper");
const exec = require("child_process").exec;
//const rpio = require("rpio");
//const Gpio = require("onoff").Gpio;

module.exports = NodeHelper.create({
  start: function() {
    console.log("node_helper for MMM-PinToggleTest has started.");  // Confirm helper initialization
    this.previousPinState = null;
    this.lastChangeTime = 0;
    this.debounceDelay = 200;
  },

  socketNotificationReceived: function(notification, payload) {
    if (notification === "CONFIG") {
      console.log("Received CONFIG in node_helper:", payload);  // Log receipt of configuration
      this.config = payload;
      this.schedulePinCheck();
    }
  },

  schedulePinCheck: function() {
    console.log(`Setting up pin check every ${this.config.interval} ms`); // Confirmation log
    setInterval(() => {
      this.checkPinState();
    }, this.config.interval);
  },

  checkPinState: function() {
    const pinNumber = this.config.pin;

    exec(`pinctrl ${pinNumber}`, (error, stdout, stderr) => {
      if (error) {
        console.error(`Error reading GPIO pin ${pinNumber}: ${stderr}`);
        return;
      }

      const pinState = parseInt(stdout.trim(), 10);
      const now = Date.now();

      console.log(`Current pin state for GPIO ${pinNumber}: ${pinState}`);

      if (pinState !== this.previousPinState && (now - this.lastChangeTime > this.debounceDelay)) {
        this.previousPinState = pinState;
        this.lastChangeTime = now;

        console.log(`Pin state changed to ${pinState} at ${new Date(now).toISOString()}`);
        this.sendSocketNotification("PIN_STATE", pinState);
        
        // Small delay to avoid multiple triggers
        //setTimeout(() => {}, 100);
      }
    });
  }
});