Read the statement by Michael Teeuw here.
Trouble with non-broken "broken" images
-
im working on a super basic tarot draw module that draws three cards at random out of seventy eight at random with the chance of inversion of each card. not being a javascript or any other kind of real coder(i am a script kitty at best and not afraid to admit it). i had chat gpt write me a module, which seems well written, ive had it correct itself and i just dont see where the errors are, if anyone would be willing to take a look i would be stoked. thanks in advance
code_text ...
code_textMMM_Tarot.css .tarot-card { max-width: 300px; /* Set maximum width */ max-height: 400px; /* Set maximum height */ width: auto; /* Maintain aspect ratio */ height: auto; /* Maintain aspect ratio */ } .inverted { transform: scaleY(-1); } code_text MMM_Tarot.js Module.register("MMM_Tarot", { defaults: { updateHour: 5, // Update hour (5 am) updateMinute: 0, // Update minute updateInterval: 24 * 60 * 60 * 1000, // Update every day }, start: function() { var self = this; this.tarotData = {}; this.scheduleUpdate(); setInterval(function() { self.scheduleUpdate(); }, 60 * 1000); // Check every minute if it's time to update }, scheduleUpdate: function() { var self = this; var now = new Date(); var scheduledTime = new Date( now.getFullYear(), now.getMonth(), now.getDate(), this.config.updateHour, this.config.updateMinute, 0, 0 ); var delay = scheduledTime.getTime() - now.getTime(); if (delay < 0) { delay += this.config.updateInterval; } setTimeout(function() { self.getTarotData(); setInterval(function() { self.getTarotData(); }, self.config.updateInterval); }, delay); }, getStyles: function() { return ["MMM_Tarot.css"]; }, getTarotData: function() { this.sendSocketNotification("GET_TAROT_DATA"); }, socketNotificationReceived: function(notification, payload) { if (notification === "TAROT_DATA") { this.tarotData = payload; this.updateDom(); } }, getDom: function() { const wrapper = document.createElement("div"); if (this.tarotData.images) { for (let i = 0; i < this.tarotData.images.length; i++) { const cardImg = document.createElement("img"); cardImg.src = this.tarotData.images[i].image; cardImg.className = "tarot-card"; // Add class to set max-width // If the card is inverted, add a class to flip it if (this.tarotData.images[i].inverted) { cardImg.classList.add("inverted"); } wrapper.appendChild(cardImg); } } else { wrapper.innerHTML = "Loading..."; } return wrapper; } });
code_text
node_helper.js
const NodeHelper = require(“node_helper”);
const fs = require(“fs”);
const path = require(“path”);module.exports = NodeHelper.create({
start: function() {
console.log(“Starting node_helper for MMM_Tarot”);
},socketNotificationReceived: function(notification) { if (notification === "GET_TAROT_DATA") { this.getTarotData(); } }, getTarotData: function() { // Array of available card images const cardImages = fs.readdirSync(path.join(__dirname, "..", "MMM_Tarot", "cards")); // Randomly select three card images const selectedCards = []; for (let i = 0; i < 3; i++) { const randomIndex = Math.floor(Math.random() * cardImages.length); selectedCards.push(cardImages[randomIndex]); } // Determine if each card should be inverted const invertedCards = []; for (let i = 0; i < 3; i++) { invertedCards.push(Math.random() < 0.5); // 50% chance of being inverted } // Construct the file paths for the selected cards const cardPaths = selectedCards.map((card, index) => ({ image: path.join(__dirname, "..", "cards", card), inverted: invertedCards[index], })); // Send the selected cards data back to the main module this.sendSocketNotification("TAROT_DATA", { images: cardPaths }); }
});
-
@jedilkeme what do I mean broken?
did u look in the developers window console and elements tab?
ctrl-alt-i
tar in the filter field to see messages from,/about your module
elements tab can see the html being used
-
@sdetweil ctrl-alt-i has no effect???
-
@jedilkeme I’m sorry, brain fart, ctrl-shift-i
-
@jedilkeme what should I be looking for from there?
-
@jedilkeme in the console tab, you might see a 404 error, not found
in the elements tab you can see the actual html used. -
@sdetweil no 404 errors or anything else that pops out at me…
-
@jedilkeme and if you look at the html for the image, it is as you expected. and if you use that url.i a browser, the image is displayed?
-
@sdetweil ah, it wasn’t showing errors because I had it written to load at 5am… I set it to run in one minute, and I did receive a 404 for the images, permissions are all groovy but I noticed I can’t view the images from localhost:8080/path-to-images in the browser, but if I just put in the file path in the address bar I can see the images… then I ran npm start dev and I found an EADDRINUSE error. Stumped. Thanks your you assistance so far!
-
@jedilkeme said in Trouble with non-broken "broken" images:
I ran npm start dev and I found an EADDRINUSE error
pm2 already has an instance running… only one at a time please on the same port
pm2 status to see what pm2 manages
pm2 --help
to see all the things it CAN do
pm2 stop name or row number or all
pm2 stop allthen you can do the npm start …
when u are happy , then ctrl-q or ctrl-c to stop the npm start and pm2 start or restart row or name
then on reboot it will come back up…pm2’s JOB is to keep its managed apps running…