MMM-Carousel Pagination Icons

doriangrey

I am using MMM-Carousel to rotate through various slides in my Magic Mirror implementation.
image url
I have updated some of the code in the MMM-Carousel.js

The relevant code added:
// Line 75

icons: [object Object],

// Line 538

this.toggleTimer();

// Line 587

label.innerHTML = "<i class='"+Object.values(this.config.icons)[i]+"' style='color: #74C0FC;'></i>";

This line replaces the display of the radio buttons with the specified icons in your config.js. The MMM-Carousel modification supports a new attribute of icons; my example config…

{
module: "MMM-Carousel",
position: "bottom_bar", // Required only for navigation controls
config: {
transitionInterval: 20000,
showPageIndicators: true,
showPageControls: true,
ignoreModules: ["alert"],
mode: "slides",
slides: {
"calendar": ["clock", "MMM-GoogleCalendar"],
"weather": ["MMM-AccuWeatherForecastDeluxe"],
"sports": ["clock", "MMM-MyScoreboard", "MMM-MyStandings"],
"news": ["clock", "newsfeed", "MMM-Reddit-News-Ticker"],
"lights": ["mmm-hue-lights"],
"moode": ["MMM-WebView"]
                },
icons: { 
1: "fa-solid fa-calendar-days",
2: "fa-solid fa-sun",	
3: "fa-solid fa-baseball",
4: "fa-solid fa-newspaper",
5: "fa-solid fa-lightbulb",
6: "fa-solid fa-compact-disc fa-spin"
}, 
}
}

The icons array should be in the format shown with the icon class as referenced over at Font Awesome.

Additionally, I am integrating my mirror with Moode Audio. I adjusted the code to pause the rotation/transition timers when an icon is selected. This allows for interaction with the Moode interace. The Moode “page” itself is referenced using the MMM-Webview module.

{
      module: 'MMM-WebView',
      position: 'fullscreen_above',
      config: {
        url: 'http://mood.local',
        width: '1024px',
        height: '600px',
      },
    }

MMM-Carousel.zip

I also adjusted the CSS a bit for ‘readability’ of the icons.

.slider-pagination label {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-block;
  background: rgb(255 255 255 / 20%);
  margin: 0 2px;
  border: solid 1px rgb(255 255 255 / 40%);
  cursor: pointer !important;
}

BerkSmash1984

Does MMM-Carousel replace both MMM-pages and MMM-page-indicator? I currently use both of these and would love to replace the circle touch button icons used with MMM-page-indicator with icons more meaningful to what is actually being displayed on each page/slide.

sdetweil

@BerkSmash1984 you could override the settings for the buttons in custom.css

he is using the fontawesome icons and so is page indicator.

see this for how to locate the items to set new custom.css entries for
https://forum.magicmirror.builders/topic/14862/help-with-a-couple-css-issues/2?_=1719951675453

BerkSmash1984

@BerkSmash1984 Thanks @sdetweil I just shot you a DM in Discord as well.

I am attempting to do what you referenced in your reply but am having an issue IDing what exactly to spell out in my custom.css.

For example, here is what dev mode shows for the circle icons/buttons for page-indicator. The exact icons being used are shown, but it is not clear on where to change them:

The icons I want to use for the 10 pages of my MM in the exact order are:

<i class="fa-regular fa-calendar-days"></i>
<i class="fa-solid fa-temperature-half"></i>
<i class="fa-solid fa-car"></i>
<i class="fa-solid fa-person-running"></i>
<i class="fa-solid fa-user-graduate"></i>
<i class="fa-regular fa-newspaper"></i>
<i class="fa-solid fa-film"></i>
<i class="fa-brands fa-space-awesome"></i>
<i class="fa-solid fa-compass-drafting"></i>
<i class="fa-solid fa-gear"></i>

How do I spell out icons in my custom.css so each page has the corresponding icon from the list above? Thanks for your help!

doriangrey

@BerkSmash1984
In the Pages.js, it appears the author is hardcoding the indicator buttons.

 for (let i = 0; i < this.config.pages; i += 1) {
      const circle = document.createElement('i');

      if (this.curPage === i) {
        circle.className = 'fa fa-circle indicator';
        if (this.config.activeBright) {
          circle.className += ' bright';
        }
      } else {
        circle.className = 'fa indicator';

Just editing the CSS wouldn’t change the icon itself. Similar to what I did for the Carousel, you would need to pass your array of icons to the .js

sdetweil

@doriangrey no… we worked out how to do it in css…
for example
one entry like this for each page indicator (nth-child(x) to select the correct thing to override)

.MMM-page-indicator div.module-content div i:nth-child(2)::before {
    content: "\f055";  // <-- icon code goes here
    font-family: FontAwesome;
}

doriangrey

@sdetweil said in MMM-Carousel Pagination Icons:

nth-child

Nice work.

sdetweil

@doriangrey yeh, css tricky stuff. there is ALWAYS a way

BerkSmash1984

@sdetweil @doriangrey

Just to show what the final edits look like in my custom.css and how that looks on my mirror, for the good of the group:

The content entries are the unicodes for the respective icons found on Font Awesome’s website (https://fontawesome.com).

For example, F073 in the first entry (for nth-child(1)) is for a calendar-days Font Awesome icon:

You can see this icon, and all others used on my MagicMirror display to change pages, in the red box of the screenshot below:

Thank you @sdetweil for your help, as always!

I hope this helps others looking to accomplish the same thing!

sdetweil

@BerkSmash1984 and he only has that many entries because he has that many pages defined

BerkSmash1984

@sdetweil Yup!

That is correct, I have 10 unique pages on my MM display. Happy to share more info of my config if anyone needs it.

I did share a lot of info on my display (some small things have changed since then) in my post below:

https://forum.magicmirror.builders/topic/18513/my-magic-mirror-desk-display?_=1721136289198

Philip 0

Hello ,
By making a small modification, I colored each icon with a different color.

Line 588 of MMM-carousel.js, I removed the Style.

label.innerHTML = “<i class='”+Object.values(this.config.icons)[i]+“>”;

I copied it into each icon line of config.js.

icons: {
1: “fa-solid fa-sun’ style=‘color: #ffff00;’”,
2: “fa-solid fa-house-flood-water’ style=‘color: #718fea;’”,
3: “fa-solid fa-triangle-exclamation’ style=‘color: #0099ff;’”,
4: “fa-solid fa-gas-pump’ style=‘color: #ff0000;’”,
5: “fa-solid fa-calendar-days’ style=‘color: #ffcc00;’”,
6: “fa-solid fa-person-walking-luggage’ style=‘color: #00cccc;’”,
7: “fa-brands fa-spotify’ style=‘color: #009933;’”,
8: “fa-solid fa-person-hiking’ style=‘color: #ffffff;’”,
9: “fa-solid fa-video’ style=‘color: #cc00ff;’”,
10: “fa-brands fa-raspberry-pi’ style=‘color: #ff0000;’”,
11: “fa-solid fa-umbrella’ style=‘color: #999999;’”,
12: “fa-solid fa-image-portrait’ style=‘color: #ff6600;’”
},

sdetweil

@Philip-0 you could do the same in css.

J2FK

Hi,
I also use pages and page indicator with 7 pages and have successfully replaced the circles with colored icons as described above, thank you for that!!

Is there a way to highlight the icons or make them a little bigger, like with the hollow and solid circles, so you can see which page you are on?

thx

sdetweil

@J2FK yes, somehow wit CSS… maybe they change styles when selected…

use the developers window (see second slink in my signature below)

looking in the dev window when active each icon gets the class

indicator

applied

the default style is (in MMM-page-indicator.css)

.MMM-page-indicator .indicator {
    padding: 0 5px;
    margin: 0;
    font-size: 0.5em;
 }

so you would put this in css/custom.css and change it as you want/need

I tried fiddling with this , but the override for the icon is causing trouble.

com1cedric

Dear @sdetweil , hoping your going well, may I ask you something about the comment you put on this page?
-> see this for how to locate the items to set new custom.css entries for https://forum.magicmirror.builders/topic/14862/help-with-a-couple-css-issues/2?_=1719951675453

I do not find where the https://fontawesome.com is referenced to search for the icones.

has it been erased or could you explain me?

Wishing you a relaxing and sunny week-end,

Cédric

sdetweil

@com1cedric search is under the multi bar icon top
left ( often called the hamburger icon, two buns and patties between)

com1cedric

@sdetweil hum… I have to re-explain my question:

fo the moment, in custom.css, the word “hockey” is used for a page using MMM-page-indicator like this:

.MMM-page-indicator div i:nth-child(5)::after {
content: “Hockey”;
}

Let’s say, I want to replace this word “hockey”, with an image of a hockey-puck --> e.g. image “F453” on https://fontawesome.com/search?q=hockey&o=r

Shoud I “just” write instead in custom.css:

.MMM-page-indicator div.module-content div i:nth-child(2)::before {
    content: "\f453";
    font-family: FontAwesome;
}

When I try that, the word “hockey” has disappeared, but not image of a puck is shownd. I should have missed a step…

Can you help me? (could interest other user as well I hope). Thanks in advance!

sdetweil

@com1cedric is the puck in the free section of icons?

sdetweil

@com1cedric i am traveling and dont have my computer out currently, maybe after lunch time.

can you look in the developers window console tab and see if there are any errors