No visible icon.

[lxne]

Hi,
I installed the module a view hours ago.
My schedules are working as expected but no matter what I do no icon shows up.
Changed the 'position' to 'top_right' and added a header which is visible on the MagicMirror screen.

The section in my config.js looks like

                {
                        module: "MMM-ScriptScheduler",
                        position: "top_right",
                        header: "Scheduler",
                        config: {
                                schedules: [
            { schedule: "30  6 * * *",   command: "amixer set Playback '70%'", icon: "volume-down", color: "#4875b4" },
            { schedule: "0   9 * * 1-5", command: "amixer set Playback '80%'", /* icon: "bell-slash", color: "#e00" */  },
            { schedule: "0  19 * * *",   command: "amixer set Playback '60%'", icon: "volume-down", color: "#4875b4" },
            { schedule: "2  23 * * 0-4", command: "sudo shutdown -P +58", icon: "warning",  color: "#0d0"    },
            { schedule: "2  00 * * *",   command: "sudo shutdown -P +58", icon: "warning",  color: "#bb0"    },
            { schedule: "2  01 * * *",   command: "sudo shutdown -P +58", icon: "warning",  color: "#d00"    },
                                ]
                        }
                },

Any idea what's wrong?

[ralberth]

I'm sorry it isn't working for you! We'll fix it.

I can see the icons appear when I change the command to "true". Let's start there and see if the command is causing problems for you. You can also see a problem by running "node serveronly" in one window and using FireFox in another window to view the page. The terminal window will show exception traces and the like.

You should see something like this when it starts:

New sched #0: 0 * * * * * run true

That's the server queuing up the updates to fire on your schedule.

Next, right-click in FireFox and select "Inspect Element". Click the "Inspector" tab and navigate down the HTML until you see something like this:

<div id="module_9_MMM-ScriptScheduler" class="module MMM-ScriptScheduler MMM-ScriptScheduler">
   <div class="module-content">
      <div>
         <span id="scriptsched_0" class="fa-stack fa-lg" style="display: block; margin: 20px; color: rgb(0, 221, 0);">
            <i class="fa fa-circle fa-stack-2x"></i><i class="fa fa-warning fa-fw fa-stack-1x fa-inverse">

If you have this, it means the browser correctly drew everything based on your config.

If you see style="display: block; then the scheduler triggered and thinks it's displaying that icon for you. block means "visible" in this context. If it says block and you don't see anything, then ScriptScheduler is working, but the icon isn't correct. Let me know and we'll work this angle. I have a hunch this is the root of the problem since you said the commands are working.

If it doesn't say block, then ScriptScheduler isn't trying to show this icon. That means we aren't triggering when we should. I'm not sure why, and this isn't consistent with your statement that the commands are firing correctly. If so, we'll dig into this more.

Another thing to help gather info is to make sure nothing else is interfereing since all modules are playing in the same DOM and some mess with the css using global-ish matchers. Add disable: true or comment out all other modules so the only module is ScriptScheduler. Restart everything and let me know if icons appear.

Cheers!

[lxne]

Thank you for your detailed answer.
Unfortunately I could not use most of the information.

I am working with a Raspberry Pi 3b+ and I can't do the firefox-stuff.

Disabling most of the modules (except clock, calendar and newsfeed) did not change anything. The schedules are working but no icon shows up.

How could we approach the issue differently?

Cheers

[ralberth]

Let's get a regular browser hooked up to it so we can inspect what HTML is being generated and updated. Your Pi is a Linux box like anything else, so we should be able to run MagicMirror so it's listening on a socket other than loopback. Check your config.js file for something like this:

address: "localhost",
port: 8080,
ipWhitelist: []

"localhost" means MagicMirror will not be available outside your Pi. Change this to "0.0.0.0". If ipWhitelist is anything other than [], change it to [].

This config means you can point a web browser on your local network to MagicMirror running on your Pi. From a laptop/desktop at home, try going to "http://1.2.3.4:8080/" where "1.2.3.4" is the IP address of your Pi.

From there, try the steps above to see what HTML is being rendered!

[lxne]

Thank you. Pretty cool.
Got MM in Firefox on my Laptop.
My HTML looks like you described it but the attribute doesn't say 'block' it's always 'none'.
Schedules are still firing. Double checked it via 'pm2 log MagicMirror'.

[ralberth]

Awesome result, thanks for taking the time to rejigger the thing. If things are firing and you aren't seeing "block", then the cron logic on the server is working, but the portion that tells the browser-resident code to update isn't.

Here's the important snippet:

exec(schedCfg.command, function(error, stdout, stderr) {
                        if (stdout) console.log(stdout);
                        if (stderr) console.log(stderr);
                        me.sendSocketNotification("UPDATE", { index: indx });

It runs your command (which is working), it logs everything the command sent to it's terminal (output), and then tells the browser to update.

Because I'm using exec() we can change the config/config.js entry to be any shell things.

Try this:

{
    schedule: "0  19 * * *",
    command: "echo 'amixer 60' && amixer set Playback '60%' ; echo \"RC $?\"; true",
    icon: "volume-down",
    color: "#4875b4"
}

I can't test this where I am right now, but it looks sound (?!).

This will put something in the log then run amixer, then write to the log with the status return from amixer, and then force the return code to be successful (true).

From the logs, we can see if the amixer command is failing for some reason.

Next, you should see messages in the browser's console log from this debugging statement:

console.log("update: " + JSON.stringify(payload, null, 3));

Let me know what it shows. If this appears, it confirms the above sent a message to the browser telling it to update the HTML. If it doesn't appear, it's the smoking gun: the server isn't telling the browser to update.

[lxne]

Your suggested command is firing but still no icon.

MagicMirror-logs:

0|MagicMirror | amixer 60
0|MagicMirror | Simple mixer control 'Playback',0
0|MagicMirror | Capabilities: volume
0|MagicMirror | Playback channels: Front Left - Front Right
0|MagicMirror | Capture channels: Front Left - Front Right
0|MagicMirror | Limits: 0 - 255
0|MagicMirror | Front Left: 153 [60%] [-51.00dB]
0|MagicMirror | Front Right: 153 [60%] [-51.00dB]
0|MagicMirror | RC 0

Unfortunately I don't know what to do with

console.log("update: " + JSON.stringify(payload, null, 3));

But this is what I was able to find in the browser-logs:

Uncaught TypeError: Cannot read property 'style' of null (MMM-ScriptScheduler.js:71)
at Class.setImageVisible (MMM-ScriptScheduler.js:71)
at Class.socketNotificationReceived (MMM-ScriptScheduler.js:61)
at module.js:246
at r. (socketclient.js:25)
at r.emit (index.js:83)
at r.onevent (index.js:83)
at r.MMSocket.self.socket.onevent (socketclient.js:19)
at r.onpacket (index.js:83)
at r. (index.js:83)
at r.emit (index.js:83)

I do get this output from every other schedule, too.

Does it help in any way?

[ralberth]

You found the smoking gun!

Uncaught TypeError: Cannot read property 'style' of null (MMM-ScriptScheduler.js:71)
    at Class.setImageVisible (MMM-ScriptScheduler.js:71)

This means the browser can't find the HTML element it's supposed to turn visible. This is the "MMM-ScriptScheduler.js:71" from the error message above:

span.style.display = shouldBeVisible ? "block" : "none";

It means the schedule entry that fired sent data to the browser for (maybe?) the wrong icon to turn visible. There are troubleshooting entries in the code that will tell us what happened.

From the previous note above, console.log("update: " + JSON.stringify(payload, null, 3)); meant "find an entry in the browser console that starts with "update:" and has json after it. You can find the console from "Inspect Element" right-click menu in Firefox and click the "Console" tab on what comes up.

This message will tell us the number that the server told the browser to turn on.

We're nearly there. Thanks for sticking with me through what must be a confusing set of steps.

[lxne]

I am impressed by your patience and helpfulness!

There's the following in the console starting with "update:"

update: {                                  MMM-ScriptScheduler.js:59:13 
   "index": 0
}

And after the second schedule fires there is a new one saying

update: {                                  MMM-ScriptScheduler.js:59:13 
   "index": 1
}

Is this it?

[ralberth]

Yup, but I was hoping it wasn't 0 or similar small number. OK, this means the server is sending the right thing to the browser. I.e., "index: 1" means the 1st (starting counting from 0) entry in your config is the icon that needs to be shown on the browser display.

Let's see what is drawn in the HTML. In your Firefox browser after "Inspect Element" window is open at the bottom, click on the "Inspector" tab. There's a little "Search HTML" entry box. Type in "scriptscheduler". It should jump and highlight a line that looks like this:

<div id="module_9_MMM-ScriptScheduler" class="module MMM-ScriptSched...

Right-click on this blue line and select "Copy" then "Outer HTML".

Paste it here in the next comment. This is the full HTML that the MMM-ScriptScheduler created in the browser. We'll dissect this together and see why "index:0" and "index:1" weren't found!

Here's what I see when I Copy Outer HTML:

<div id="module_9_MMM-ScriptScheduler" class="module MMM-ScriptScheduler MMM-ScriptScheduler">
   <div class="module-content">
      <div>
         <span id="scriptsched_0" class="fa-stack fa-lg" style="display: block; margin: 20px; color: rgb(0, 221, 0);">
            <i class="fa fa-circle fa-stack-2x"></i>
            <i class="fa fa-warning fa-fw fa-stack-1x fa-inverse"></i>
         </span>
      </div>
   </div>
</div>

[lxne]

Here is what I got

<div id="module_4_MMM-ScriptScheduler" class="module MMM-ScriptScheduler MMM-ScriptScheduler">
  <header class="module-header">Scheduler</header>
  <div class="module-content">
    <div>
      <span id="scriptsched_0" class="fa-stack fa-lg" style="display: none; margin: 20px; color: rgb(72, 117, 180);">
        <i class="fa fa-circle fa-stack-2x"></i>
        <i class="fa fa-volume-down fa-fw fa-stack-1x fa-inverse"></i>
      </span>
      <span id="scriptsched_1" class="fa-stack fa-lg" style="display: none; margin: 20px; color: rgb(72, 117, 180);">
        <i class="fa fa-circle fa-stack-2x"></i>
        <i class="fa fa-volume-down fa-fw fa-stack-1x fa-inverse"></i>
      </span>
      <span id="scriptsched_2" class="fa-stack fa-lg" style="display: none; margin: 20px; color: rgb(72, 117, 180);">
        <i class="fa fa-circle fa-stack-2x"></i>
        <i class="fa fa-volume-down fa-fw fa-stack-1x fa-inverse"></i>
      </span>
      <span id="scriptsched_4" class="fa-stack fa-lg" style="display: none; margin: 20px; color: rgb(72, 117, 180);">
        <i class="fa fa-circle fa-stack-2x"></i>
        <i class="fa fa-volume-down fa-fw fa-stack-1x fa-inverse"></i>
      </span>
      <span id="scriptsched_5" class="fa-stack fa-lg" style="display: none; margin: 20px; color: rgb(238, 238, 0);">
        <i class="fa fa-circle fa-stack-2x"></i>
        <i class="fa fa-warning fa-fw fa-stack-1x fa-inverse"></i>
      </span>
      <span id="scriptsched_6" class="fa-stack fa-lg" style="display: none; margin: 20px; color: rgb(238, 238, 0);">
        <i class="fa fa-circle fa-stack-2x"></i>
        <i class="fa fa-warning fa-fw fa-stack-1x fa-inverse"></i>
      </span>
      <span id="scriptsched_7" class="fa-stack fa-lg" style="display: none; margin: 20px; color: rgb(238, 238, 0);">
        <i class="fa fa-circle fa-stack-2x"></i>
        <i class="fa fa-warning fa-fw fa-stack-1x fa-inverse"></i>
      </span>
    </div>
  </div>
</div>

[ralberth]

Neat. Everything is right where it should be. The id="scriptsched_5 and it's neighbors are drawn correctly and their values are set to what they should be.

At this point, MMM-ScriptScheduler is working correctly and everything is where it should be. You won't like the next sentence, though: there's something wrong with your environment that is affecting ScriptScheduler :-(

Let's start by making sure FontAwesome is installed and has the font files setup correctly. This happens automatically during the MagicMirror installation, but something is wrong somewhere, so let's assume nothing!

make sure you have the following files based on where MagicMirror is installed:

• vendor/css/font-awesome.css
• vendor/node_modules/@fortawesome/fontawesome-free/css/all.min.css
• vendor/node_modules/@fortawesome/fontawesome-free/css/v4-shims.min.css

I'm wondering if the logic is working, but the font images themselves are not available, so the browser is silently failing.

If this is the case, try the below. This updates all the dependencies for MagicMirror, including "fontawesome", the library with all the icons in it:

npm install
cd vendor
npm install
cd fonts
npm install
cd modules
npm install
cd ..

Let's hope this is it!

[lxne]

Unfortunately the wrong shot.
Everything's where it should be.
I can even change the display property value from "none" to "block" in the inspector and the icon instantly shows up.
Pretty strange behavior.

[ralberth]

Ugh, I'm fast running out of ideas here. We at least narrowed it down to the core problem. Here's another thought that doesn't get this fixed, but does leave you with a usable system: switch from icons to image URLs.

Instead of using icon in your config.js file, use imageurl: "http://myserver.com/images/full_volume.png" set to a local file or remote image file. We might run into the same underlying problem, but I'm shrugging my shoulders here :-(

[lxne]

imagurl works flawlessly.
Off course would I like the awesomefonts to function correctly but I can live with this workaround.
Thanks again for trying so hard to fix this with me.

[ralberth]

Thanks for being flexible and working to find something that will get you moving forward. Can we close this issue since we at least proved it isn't ScriptScheduler?

[lxne]

Off course.

[lxne]

Hi, I missed something.

When I tested the imageurl method I did only set up one schedule. And so far everything worked fine. Schedule was firing and image showed up. But when I added more schedules imageurl wouldn't work either. It turned out that both (icon and imageurl) are working, when I have only one schedule and both are not working with multiple schedules defined.

Any clue why this is happening?

[lxne]

I think I found the smoking gun.
Everything works fine if an icon or image is set for each schedule.
But if I have multiple schedules and one of them has no image or icon defined none of the other icons/images will show up. I never thought having schedules without an icon/image would be an issue, because of the example in the installation instructions.

Can you reproduce that behavior or is it only happening with my setup?
Empty attributes like imageurl:"" or icon:"" are giving me the same results, but if I add in nonsense (e.g. imageurl:"xyz") the other schedules do get their icons/images.

Cheers

[ralberth]

Bingo! Again, thank you for running this to ground. It's definitely a bug in my software that I didn't find.

This should be fixed in the latest commit here, which adds important checks that handle when a command, icon, and/or imageurl is not present.

Here's my test config:

{ schedule: "0,6,12,18,24,30,36,42,48,54  * * * *", command: "true" },
{ schedule: "1,7,13,19,25,31,37,43,49,55  * * * *", command: "true", icon: "bell-slash" },
{ schedule: "2,8,14,20,26,32,38,44,50,56  * * * *", command: "true", icon: "",            color: "#0d0" },
{ schedule: "3,9,15,21,27,33,39,45,51,57  * * * *", command: "true",                      color: "#0d0" },
{ schedule: "4,10,16,22,28,34,40,46,52,58 * * * *", command: "true", icon: "volume-down", color: "" },
{ schedule: "5,11,17,23,29,35,41,47,53,59 * * * *",                  icon: "warning",     color: "#f00" }

It's all combinations of missing config items that matter.

I let it run for a few cycles, and it behaves correctly:

• Any entry with no icon still fires the command and turns off any residual icon from the previous sched
• Any entry with no command still triggers the icon changes
• Any entry without a color still shows an icon

Please update your install and see what happens:

1. Stop MagicMirror
2. cd MagicMirror/modules/MMM-ScriptScheduler
3. git pull
4. npm install
5. cd ../..
6. Start MagicMirror

[lxne]

Well done.
Everything seems to be working as expected.
Thank you!

Now I would really love to have GroveGesture icon/image control as discussed in #3.

Sidenote:
It might be a good idea to change the margin style in MMM-ScriptScheduler.js to padding because else margin can not be set in the custom.css. That shouldn't have any negative effect but would make it easier to position the icon/image individually. For example did I center the icon/image in custom.css with margin: 0 auto;

[ralberth]

Moved the padding/margin discussion over to #4