@Nik This might be related to this thread here where people have trouble with certain calendars in MMM-MyCalendar.

But strange that it says rrule doesn’t exist. Does ~/MagicMirror/node_modules/rrule-alt/ exist?

@Damian Do you want 6x or 60%? (The former seems very small). Sorry I misunderstood about your PC; most of us use PCs as dev machines for the RPi.

If 6x (or, inverted, 1/6 or 16.7%):

body {
transform: scale(0.167); /* this might get messy, at least with any raster assets (like images) */
}

Or 60%:

body {
transform: scale(0.6);
}

According to this very interesting StackExchange question, you can also set the document’s zoom property in JavaScript (and via CSS, too):

document.body.style.zoom = 2;

@Damian I was hoping you wouldn’t have to resort to it, but you can use CSS transform: scale():

body {
transform: scale(0.8); /* for 80% */
}

Some CSS transforms are processor intensive, although without animation should be fine on an RPi.

@Damian You don’t need to download anything. Use your mouse on the MagicMirror. Right-click the compliments module, and select “Inspect element”. Or, stop MM, then run npm start dev which will start in development mode with Chromium’s developer tools already open. You then just need to navigate the DOM to find the .compliments element. Follow these instructions to take a screenshot on an RPi.

@Damian Inspect the element, and share a screenshot of the div.module.compliments element styles. At this point, either (1) your CSS is not being applied, or (2) those aren’t the right classes to use to target that element. I suspect the latter.

@Damian Use the built-in DOM inspector to see what styles are currently applied. Right-click on the compliments module and select “Inspect”.

Worst case, using !important should work:

.module.compliments {
font-size: 73% !important;
}

@Damian Does this work?

.module.compliments {
font-size: 73%;
}

Hi @Damian,

I’m on my phone atm, so will try to look in more detail later. It depends on the screen resolution, but also (as I’m sure you realize) you can fit less vertically with a landscape display.

You’re is a complicated question. I recommend a combination of repositioning and resizing.

First, you may want to see what (else) you can move to top_center and bottom_center to make more room. Alternatively, if you don’t want to use those, you could make .region.left and .region.right wider (say, 50%). But you don’t have any text “wrapping” to new lines in your module, so in your case won’t help much.

Second, you can resize by changing the font-size for the entire page (in your custom.css) like this:

body {
font-size: 73%;
}

This value will then be inherited by (or “cascade to”, hence CSS) by all other elements in the DOM (i.e. on the page). You can also change the font-size of a specific module; your “family home” calendar seems like a great contender.

Finally, you may also want to limit the width of your newsfeed.

I think this should put you on the right course. Post any questions, let us know how you fare. I’ll check in later to help if I can.

@yomm There are different regions, but most will expand to try to accommodate your content/text.

See this post moments ago here, where I give advice on how to limit the width. In your case, I believe the selector is .module.calendar.

You can also use the CSS word-wrap property to make your events break to the next line, or text-overflow to display an ellipsis when they’re cut off.

@E3V3A I don’t think there’s a reload mechanism in MM’s config.js. For example, you can have an updateInterval variable in the module config, but it’s the module’s job to then implement the refresh – it isn’t done automagically by MM.

See the code for the default compliments module for where it uses this.config.updateInterval to call setInterval() with updateDom() (to set a timer to reload the DOM after a delay) all within its start() function.

@beeficecream Add this in your custom.css in MagicMirror/css:

.module.newsfeed {
max-width: 500px; // adjust px to taste, or use %, em, etc
}

You can learn more about CSS units here. I think that’s the right selector for newsfeed, but may be mistaken.

@beeficecream Glad to hear it’s fixed.

I think you have one of two options. I think you’re right that the default calendar module won’t support multiple instances.

You could try to make another, second module of the calendar module, renaming certain variables or notifications to avoid collisions.

Alternatively, you could use calendar for personal and another module (e.g. @Sean’s excellent MMM-CalendarExt) to display your work schedule. It even supports multiple views, but don’t know that you could display them in different carousel slides.

Hey @beeficecream (which btw, sounds awful).

First, have you looked at the README.md for MMM-Carousel? It has a slides carousel example. That should be added to the config.modules array with all other module configs (i.e. that cannot be all that appears in your config, or nothing will appear … you’ll need to configure your other modules separately).

Second, keep all of the settings for MMM-Carousel within its module config object. There is nothing, afaik, that you need to put in other module configs. [Edit: wrong, see @shbatm’s post below!]

Third, whenever having trouble with your config.js, I recommend you copy/paste it into JSHint. It will point out the errors you have. If it won’t load after changes, chances are there are syntax problems, albeit there can sometimes be other issues.

Sorry if I missed the point of your questions. Feel free to post your complete config.js (minus any API keys and passwords). Let us know how you fare.

@ameenaziz I think if you change var ajaxResult; to this.ajaxResult = ""; and change all other references (from ajaxResult to this.ajaxResult), you should be able to access it from anywhere in your module, including getDom(). Just remember when getDom() is first called, this.ajaxResult may still be empty until the response is received.

@ameenaziz Have a look at how the default modules do it, like newsfeed. It creates a this.newsItems variable, but also a this.loaded boolean. It uses socketNotificationRecieved() to trigger generateFeed() which updates this.newsItems, then changes this.loaded to true.

@E3V3A Also, @toh1000’s HTTP request included the header Accept-Encoding: gzip, deflate, so the test site responded with Content-Encoding: gzip. That’s totally appropriate, and usually this is handled transparently by the client, which will then provide the uncompressed response. However, the actual service (“My service”) responded with no compression.

@toh1000 Can you reach the JSON service with curl on your MM machine? And @e3v3a is right – ideally put the response through a validator, especially for things like trailing commas.

@Joshrobbs1 Two monitors on each side, or one each/two total? You could run two completely separate mirror instances, or one instance (i.e. server) and hide the modules (via CSS) you don’t want displayed on each one.

I suggest using a Raspberry Pi Zero W to power one display, run a browser and connect to the other instance/server (or run an MM instance on the RPi Zero W). The server could be on a more powerful Raspberry Pi (3b) or some old laptop hardware. You would want to run the simpler, static modules (weather, time, calendar) on the RPi Zero W and the more demanding, processor-intensive modules (voice, video feeds, complex rendering) on the server.

I don’t know how MM feels about running two instances on the same machine – you’d need to set different ports, scripts, etc, but I imagine it’s possible with some reconfiguration to avoid collisions.

@Mykle1 I know, but I figured as the author of MMM-Hello-Lucy you might be able to explain how (and if) it could help (because it wasn’t apparent to me). I only meant to mention you so that you got a notification; it definitely wasn’t meant to be accusatory.

@Baxer An API (and client) give you a way to ask for information; it doesn’t stipulate what information to request, or how to display it. However, you could use MagicMirror-Module-Template then run npm install --save open-shl within your module folder to install open-shl.

You would then add the code featured here to load the API and start querying data. I recommend loading the API in your node_helper.js and passing back the data to display via this.sendSocketNotification(notification, payload).