MMM-Carousel Pagination Icons

[mumblebaj]

@com1cedric I have submitted a PR for MMM-page-indicator which should give more flexibility per page. See example below:

.MMM-page-indicator .fa.indicator.page-2::before {
    content:"\f005";
    color: orange !important;
}

.MMM-page-indicator .indicator.active-page {
   animation: pulse 1.2s ease-in-out infinite;
}

If PR is accepted you should be able to target specific page indicators as shown in example above from custom.css.

You could use this fork in the meanwhile:
MMM-page-indicator

[sdetweil]

@mumblebaj you know there has to be one of the icon entries for every page the user defined, right?

[mumblebaj]

@sdetweil Not sure if I understand you properly but the other pages would default to the standard circle. The changes I made allows you to target specific pages if you want to change the icon, add animations etc. A little easier to target individuals.

[sdetweil]

@mumblebaj ah, what you meant to say is

.fa.indicator.page-n

where n is a number for each page found, starting at 0

page-0 for first page
page-1 for second page
etc

[mumblebaj]

@sdetweil Correct. Although, MMM-page-indicator is 0 based, same as MMM-pages, so page-0 would be page 1 etc.

[sdetweil]

@mumblebaj i updated my post

[sdetweil]

@mumblebaj i will say, i think for humans. 0 based is unfriendly

[mumblebaj]

@sdetweil Yeah, i would agree. Changing that logic now may have some repercussions for users already using the module.

[sdetweil]

@mumblebaj page- was never there

[mumblebaj]

@sdetweil Yes, that is correct. I added a classname page-${i}. But the standard code was always zero based and I do not want to update that. It is tied in with MMM-pages and seems like it works with others as well.

start() {
  this.curPage = 0;
  this.mmmPagesDetected = false;
},

[mumblebaj]

@sdetweil And just to note, MMM-pages is zero based. This will need to be updated as well. If I understand MMM-Carousel correct, it is also zero based.

[sdetweil]

@mumblebaj one small step!

[com1cedric]

@sdetweil Hello Sam, may I ask you one question about this topic? do you know how it would be possible to show an image stored on the Raspberry or linked from the web, instead of showing an icon from Fontawesome?

[sdetweil]

@com1cedric just point the url() to the file

url('/folder_in_mm_tree/xxx.jpg/png/gif as appropriate')

note the MM web server root is ~/MagicMirror

so the files have to be in THAT folder tree
you can LINK files/folders outside into the MM tree with the -->ln<-- command

so, assume you made a

MagicMirror/icons

folder and in it is

circle.png

then you could use

url('/icons/circle.png')

or

url('http://localhost:mm_port/icons/circle.png')  /* not this ONLY works IF the browser is on the SAME MACHINE as MM..*/

if not you need the relative(url(‘/…’), OR have to hard code the MM machine address
like this

url('http://MM_IP_address:mm_port/icons/circle.png')

if linked from the web use its complete url path

[com1cedric]

@sdetweil said in MMM-Carousel Pagination Icons:

url(‘/icons/circle.png’)

Thank you very much Sam.

currently, I have the following command (which works well and shows an icon from FontAwesom) in custom.css:

.MMM-page-indicator div.module-content div i:nth-child(7)::after {
content: “\f207”;
font-family: FontAwesome;
color: #FF4433;
}

After putting an image called “olympic.png” in the “MagicMirror/icons” folder, it still does not appear if I write:

.MMM-page-indicator div.module-content div i:nth-child(7)::after {
url(‘/icons/olympics.png’);
}

Do I habe to still use “content:” before or something else?

PS. sorry for asking, I am quite new in this CSS topic

[sdetweil]

@com1cedric i will test this out and get back

icons are very small images

[sdetweil]

@com1cedric see here, this is good info

https://forum.magicmirror.builders/post/125833

[com1cedric]

@sdetweil
OK, I looked into it, thank you.

Now, I have this images from Fontawesome. It looks nice, but I would like to be able to use other image if needed.

For example, I would replace the “sun” with a picture “04n.png” in the “icons” forder on my raspberry.

I tried to change line 251 with 250 in the custom.css file

Now, the result is, that the sun has disappeared (correct), but just has been replaced with a gap.

do you maybe see a mistake in my custom.css file? the problem is maybe between lines 221 and 240. this is strange…

[sdetweil]

@com1cedric can you open the developers window (ctrl-shift-i), select the console tab
and put caro in the filter field to limit messages to the carousel module

this info might be of help on the image selection
https://elfsight.com/blog/svg-png-jpeg-choose-the-image-format-for-your-website/

[karsten13]

@com1cedric

the /icons subfolder will not work, you have to use one of these