{"id":756,"date":"2024-07-14T10:47:28","date_gmt":"2024-07-14T14:47:28","guid":{"rendered":"https:\/\/markwheeler.com\/?p=756"},"modified":"2024-07-14T10:47:28","modified_gmt":"2024-07-14T14:47:28","slug":"magic-mirror-add-icons-as-carousel-pagination","status":"publish","type":"post","link":"https:\/\/www.markwheeler.com\/?p=756","title":{"rendered":"Magic Mirror: Add Icons as Carousel Pagination"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">I am using <a href=\"http:\/\/MMM-Carousel\" data-type=\"page\" data-id=\"757\" target=\"_blank\" rel=\"noreferrer noopener\">MMM-Carousel<\/a> to rotate through various slides in my <a href=\"https:\/\/magicmirror.builders\/\">Magic Mirror<\/a> implementation.<br><br> <img decoding=\"async\" src=\"http:\/\/54.91.57.241\/wp-content\/uploads\/2024\/07\/mirror.jpg\"><br><br> I have updated some of the code in the <a href=\"http:\/\/54.91.57.241\/wp-content\/uploads\/2024\/07\/MMM-Carousel.zip\" target=\"_blank\" rel=\"noopener\">MMM-Carousel.js<\/a><br><br> The relevant code added:<br> \/\/ Line 75<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>icons: &#91;&#91;]],<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\/\/ Line 538<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>this.toggleTimer();<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\/\/ Line 587<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>label.innerHTML = \"&lt;i class='\"+Object.values(this.config.icons)&#91;i]+\"' style='color: #74C0FC;'&gt;&lt;\/i&gt;\";<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">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:<br><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{\nmodule: \"MMM-Carousel\",\nposition: \"bottom_bar\", \/\/ Required only for navigation controls\nconfig: {\ntransitionInterval: 20000,\nshowPageIndicators: true,\nshowPageControls: true,\nignoreModules: &#91;\"alert\"],\nmode: \"slides\",\nslides: {\n\"calendar\": &#91;\"clock\", \"MMM-GoogleCalendar\"],\n\"weather\": &#91;\"MMM-AccuWeatherForecastDeluxe\"],\n\"sports\": &#91;\"clock\", \"MMM-MyScoreboard\", \"MMM-MyStandings\"],\n\"news\": &#91;\"clock\", \"newsfeed\", \"MMM-Reddit-News-Ticker\"],\n\"lights\": &#91;\"mmm-hue-lights\"],\n\"moode\": &#91;\"MMM-WebView\"]\n                },\nicons: { \n1: \"fa-solid fa-calendar-days\",\n2: \"fa-solid fa-sun\",\t\n3: \"fa-solid fa-baseball\",\n4: \"fa-solid fa-newspaper\",\n5: \"fa-solid fa-lightbulb\",\n6: \"fa-solid fa-compact-disc fa-spin\"\n}, \n}\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">The icons array should be in the format shown with the icon class as referenced over at <a href=\"https:\/\/fontawesome.com\/icons\">Font Awesome<\/a>.<br><br>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 &#8220;page&#8221; itself is referenced using the <a href=\"https:\/\/github.com\/Iketaki\/MMM-WebView\">MMM-Webview<\/a> module.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{\n      module: 'MMM-WebView',\n      position: 'fullscreen_above',\n      config: {\n        url: 'http:\/\/mood.local',\n        width: '1024px',\n        height: '600px',\n      },\n    }<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">I have also modified the CSS a bit to make the icons larger.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.slider-pagination label {\n  width: 32px;\n  height: 32px;\n  border-radius: 50%;\n  display: inline-block;\n  background: rgb(255 255 255 \/ 20%);\n  margin: 0 2px;\n  border: solid 1px rgb(255 255 255 \/ 40%);\n  cursor: pointer !important;\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>I am using MMM-Carousel to rotate through various slides in my Magic Mirror implementation. I have updated some of the code in the MMM-Carousel.js The relevant code added: \/\/ Line 75 \/\/ Line 538 \/\/ Line 587 This line replaces the display of the radio buttons with the specified icons [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"footnotes":""},"categories":[9],"tags":[65],"class_list":["post-756","post","type-post","status-publish","format-standard","hentry","category-raspberry-pi","tag-magic-mirror"],"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/www.markwheeler.com\/index.php?rest_route=\/wp\/v2\/posts\/756","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.markwheeler.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.markwheeler.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.markwheeler.com\/index.php?rest_route=\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.markwheeler.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=756"}],"version-history":[{"count":0,"href":"https:\/\/www.markwheeler.com\/index.php?rest_route=\/wp\/v2\/posts\/756\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.markwheeler.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=756"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.markwheeler.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=756"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.markwheeler.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=756"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}