Skip to content

Commit

Permalink
Add option to default to home slide on timeout
Browse files Browse the repository at this point in the history
  • Loading branch information
@shbatm
shbatm committed Feb 1, 2022
1 parent 33805c1 commit 22b64b2
Show file tree
Hide file tree
Showing 3 changed files with 71 additions and 122 deletions.
11 changes: 8 additions & 3 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,10 @@
# Changelog

## <a name="0_3_0"></a>[0.3.0] - Add option to default to home slide on timeout

* Add `homeSlide` and `transitionTimeout` to timeout and return to a home page, similar to MMM-Pages (#30)
* Merge downstream changes from @KristjanESPERANTO and others (Thanks!)

## <a name="0_2_8"></a>[0.2.8] - Add fullscreen positions

* Cleanup
Expand Down Expand Up @@ -80,9 +85,9 @@ Changes:
mode: 'slides',
slides: [
[ {name:'clock', classes:'zoom200', position:"middle_center"} ],
[ {name:'clock', classes:'', position:"top_left"},
{name:'calendar', position:'top_left'},
'MMM-WunderGround',
[ {name:'clock', classes:'', position:"top_left"},
{name:'calendar', position:'top_left'},
'MMM-WunderGround',
'newsfeed'
]
```
Expand Down
64 changes: 47 additions & 17 deletions MMM-Carousel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,75 +7,77 @@ Module.register("MMM-Carousel", {
top_bar: {
enabled: false,
ignoreModules: [],
overrideTransitionInterval: 10000
overrideTransitionInterval: undefined
},
top_left: {
enabled: false,
ignoreModules: [],
overrideTransitionInterval: 10000
overrideTransitionInterval: undefined
},
top_center: {
enabled: false,
ignoreModules: [],
overrideTransitionInterval: 10000
overrideTransitionInterval: undefined
},
top_right: {
enabled: false,
ignoreModules: [],
overrideTransitionInterval: 10000
overrideTransitionInterval: undefined
},
upper_third: {
enabled: false,
ignoreModules: [],
overrideTransitionInterval: 10000
overrideTransitionInterval: undefined
},
middle_center: {
enabled: false,
ignoreModules: [],
overrideTransitionInterval: 10000
overrideTransitionInterval: undefined
},
lower_third: {
enabled: false,
ignoreModules: [],
overrideTransitionInterval: 10000
overrideTransitionInterval: undefined
},
bottom_left: {
enabled: false,
ignoreModules: [],
overrideTransitionInterval: 10000
overrideTransitionInterval: undefined
},
bottom_center: {
enabled: false,
ignoreModules: [],
overrideTransitionInterval: 10000
overrideTransitionInterval: undefined
},
bottom_right: {
enabled: false,
ignoreModules: [],
overrideTransitionInterval: 10000
overrideTransitionInterval: undefined
},
bottom_bar: {
enabled: false,
ignoreModules: [],
overrideTransitionInterval: 10000
overrideTransitionInterval: undefined
},
fullscreen_above: {
enabled: false,
ignoreModules: [],
overrideTransitionInterval: 10000
overrideTransitionInterval: undefined
},
fullscreen_below: {
enabled: false,
ignoreModules: [],
overrideTransitionInterval: 10000
overrideTransitionInterval: undefined
},
slides: [[]],
showPageIndicators: true,
showPageControls: true,
// MMM-KeyBindings mapping.
keyBindings: {
enabled: true
}
},
transitionTimeout: 0,
homeSlide: 0
},

keyBindings: {
Expand Down Expand Up @@ -255,12 +257,17 @@ Module.register("MMM-Carousel", {
// If we're in slides mode and the timer is set to 0, we only use manual transitions
this.transitionTimer = setInterval(this.manualTransition, timer);
}
else if (
this.config.mode === "slides" && timer === 0 && this.config.transitionTimeout > 0
) {
this.transitionTimer = setTimeout(() => { this.transitionTimeoutCallback(); }, this.config.transitionTimeout)
}
},

moduleTransition: function (
goToIndex = -1,
goDirection = 0,
goToSlide = undefined
goToSlide = undefined,
) {
let i,
noChange = false,
Expand Down Expand Up @@ -450,11 +457,34 @@ Module.register("MMM-Carousel", {
this.config.transitionInterval
);
}
else if (this.config.transitionTimeout > 0) {
// Restart the timeout
clearTimeout(this.transitionTimer);
this.transitionTimer = setTimeout(() => {
this.transitionTimeoutCallback();
}, this.config.transitionTimeout);
}
},

transitionTimeoutCallback: () => {
let goToIndex = -1;
let goToSlide = undefined;
if (typeof this.config.homeSlide === "number") {
goToIndex = this.config.homeSlide;
}
else if (typeof this.config.homeSlide === "string") {
goToSlide = this.config.homeSlide;
}
else {
goToIndex = 0;
}
this.moduleTransition(goToIndex, undefined, goToSlide);
this.restartTimer();
},

manualTransitionCallback: function (slideNum) {
manualTransitionCallback: function (slideNum, slideName=undefined) {
// Log.log("manualTransition was called by slider_" + slideNum);
// Perform the manual transitio
// Perform the manual transition
this.manualTransition(slideNum);
this.restartTimer();
},
Expand Down
118 changes: 16 additions & 102 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@
* Modules can be moved to different positions and CSS classes applied to them for each slide.
* Multiple instances of a module can be used on different slides.
* Integration with [MMM-KeyBindings](https://github.com/shbatm/MMM-KeyBindings) for keyboard and bluetooth remote navigation.
* Rotational Home Page - returns to a specified page on timeout

## Installation

Expand Down Expand Up @@ -53,108 +54,21 @@ Note that a `position` setting is required only if you want to show the page nav

The following properties can be configured:

<table width="100%">
<!-- why, markdown... -->
<thead>
<tr>
<th>Option</th>
<th width="100%">Description</th>
</tr>
<thead>
<tbody>
<tr>
<td><code>mode</code></td>
<td><ul><li><code>'global'</code> - All modules not cited in the <code>ignoreModules</code> config are rotated, displaying only one at a time for the duration of <code>transitionInterval</code>. This is particularly useful on small screens where there may not be enough space to display several components at once.
</li><li><code>'positional'</code> - Modules are grouped by <code>position</code> setting and rotated within a position except for modules listed in that position's <code>ignoreModules</code>, an <code>overrideTransitionInterval</code> can also be set to rotated different position at different speeds.
</li><li><code>'slides'</code> - groups of modules can be assigned to be displayed at the same time (regardless of <code>position</code>), an unlimited number of these "slide" groups can be set up.</li></ul>
<br> <br> This value is <b>OPTIONAL</b>
<br><b>Possible values:</b> <code>'global'</code> or <code>'positional'</code> or <code>'slides'</code>
<br><b>Default value:</b> <code>'global'</code>
</td>
</tr>
<tr>
<td><code>transitionInterval</code></td>
<td>The number of milliseconds to display each module for.
<br> <br> This value is <b>OPTIONAL</b>
<br><b>Possible values:</b> Any valid <code>int</code>, passing 0 with <code>mode:"slides"</code> will disable the timer for manual navigation.
<br><b>Default value:</b> <code>10000</code>
</td>
</tr>
<tr>
<td><code>slideTransitionSpeed</code></td>
<td>The speed in milliseconds to fade in each module.
<br> <br> This value is <b>OPTIONAL</b>
<br><b>Possible values:</b> Any valid <code>int</code>
<br><b>Default value:</b> <code>1500</code> (ms)
</td>
</tr>
<tr>
<td><code>ignoreModules</code></td>
<td>A list of module names whom should not be considered as part of the carousel. For example, the `alert` module should be able to display a notification at any time, by ignoring it we can prevent the plugin from hiding any notifications. <b> NOTE: is only used in <code>'global'</code> and <code>'slides'</code> modes. Ignored modules in <code>'slides'</code> mode are shown on every slide.</b>.
<br> <br> This value is <b>OPTIONAL</b>
<br><b>Possible values:</b> <code>String array</code>
<br><b>Default value:</b> <code>[]</code>
</td>
</tr>
<tr>
<td>
<code>top_bar</code>
<br><code>top_left</code>
<br><code>top_center</code>
<br><code>top_right</code>
<br><code>upper_third</code>
<br><code>middle_center</code>
<br><code>lower_third</code>
<br><code>bottom_left</code>
<br><code>bottom_center</code>
<br><code>bottom_right</code>
<br><code>bottom_bar</code>
</td>
<td>Determines if this position should be rotated and which modules in this position should be ignored. <b>NOTE: is only used when <code>mode</code> is <code>'positional'</code> otherwise ignored</b>.
<br> <br> This value is <b>OPTIONAL</b>
<br><b>Possible values:</b> Object with keys;
<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <code>enabled</code>, a boolean to rotate this position or not,
<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <code>ignoreModules</code>, a <code>String array</code> of modules names to ignore.
<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <code>overrideTransitionInterval</code>, a <code>int</code> a transition time for this position only.
<br><b>Default value:</b> <code>{enabled: false, ignoreModules: [], overrideTransitionInterval: 10000}</code>
</td>
</tr>
<tr>
<td><code>slides</code></td>
<td>See Examples below. The slides will be rotated as a complete set using the <code>transitionInterval</code> setting. Ingnored modules (<code>ignoreModules</code>) will be diplayed on all slides.
<br> <br> This value is <b>OPTIONAL</b>
<br><b>Possible values:</b> <code>array of String/Object array</code> <a href="#advanced-slides">(see below)</a>
<br><b>Default value:</b> <code>[[]]</code>
</td>
</tr>
<tr>
<td><code>showPageIndicators</code></td>
<td>A <code>boolean true or false</code> to show or hide the page indication 'bubbles' at the bottom of the screen. Default is <code>true</code>.
</td>
</tr>
<tr>
<td><code>showPageControls</code></td>
<td>A <code>boolean true or false</code> to show or hide the next and previous page buttons. Buttons will only appear when hovered near or over. They can be clicked when not visible. Default is <code>true</code>.
</td>
</tr>
<tr>
<td><code>keyBindings: {</code><br>
&nbsp;&nbsp;<code>enabled: true,</code><br>
&nbsp;&nbsp;<code>mode: "DEFAULT",</code><br>
&nbsp;&nbsp;<code>map: {</code><br>
&nbsp;&nbsp;&nbsp;&nbsp;<code>NextSlide:"ArrowRight",</code><br>
&nbsp;&nbsp;&nbsp;&nbsp;<code>PrevSlide:"ArrowLeft",</code><br>
&nbsp;&nbsp;&nbsp;&nbsp;<code>Slide0:"Home"</code><br>
&nbsp;&nbsp;<code>}</code><br>
<code>}</code></td>
<td>Key bindings to use for navigation with <A href="https://github.com/shbatm/MMM-KeyBindings">MMM-KeyBindings</A> plugin. The values are the KeyNames to respond to from the <code>"KEYPRESS"</code> events generated in MMM-KeyBindings.<br>Note: any <code>Slide##</code> can be assigned to jump to a specific slide.</td>
</tr>
<tr>
<td><code>keyBindings.mode</code></td>
<td>Mode Keyword for responding to key press events sent from <A href="https://github.com/shbatm/MMM-KeyBindings">MMM-KeyBindings</A>. Default: "DEFAULT" which repsonds to any key press when no other module has taken focus or changed the keyword.</td>
</tr>
</tbody>
</table>
|Option|Description|
|--- |--- |
|`mode`|`global` - All modules not cited in the `ignoreModules` config are rotated, displaying only one at a time for the duration of `transitionInterval`. This is particularly useful on small screens where there may not be enough space to display several components at once.<br>`positional` - Modules are grouped by position setting and rotated within a position except for modules listed in that position's `ignoreModules`, an `overrideTransitionInterval` can also be set to rotated different position at different speeds.<br>`slides` - groups of modules can be assigned to be displayed at the same time (regardless of position), an unlimited number of these "slide" groups can be set up.<br><br>This value is **OPTIONAL**<br>Possible values: `global` or `positional` or `slides`<br>Default value: `global`|
| `transitionInterval` | The number of milliseconds to display each module for.<br><br>This value is **OPTIONAL**<br>Possible values: Any valid int, passing 0 with mode:`"slides"` will disable the timer for manual navigation.<br>Default value: `10000`|
| `transitionTimeout` | Time, in milliseconds, before automatically returning to the home page. If a home page is not set, this returns to the first slide instead.<br><br>This value is **OPTIONAL** and is only valid when `transitionInterval` is disabled.<br>Default value: `0` (disabled) |
| `homeSlide` | Which slide index/name is the home page. If none is set, this returns to the first slide instead.<br><br>This value is **OPTIONAL** and is only valid when `transitionInterval` is disabled.<br>Default value: `0`|
|`slideTransitionSpeed`|The speed in milliseconds to fade in each module.<br><br>This value is **OPTIONAL**<br>Possible values: Any valid int<br>Default value: 1500 (ms)|
|`ignoreModules`|A list of module names whom should not be considered as part of the carousel. For example, the `alert` module should be able to display a notification at any time, by ignoring it we can prevent the plugin from hiding any notifications. NOTE: is only used in `global` and `slides` modes. Ignored modules in `slides` mode are shown on every slide.<br>This value is **OPTIONAL**<br>Possible values: String array<br>Default value: `[]`|
`top_bar`<br>`top_left`<br>`top_center`<br>`top_right`<br>`upper_third`<br>`middle_center`<br>`lower_third`<br>`bottom_left`<br>`bottom_center`<br>`bottom_right`<br>`bottom_bar`|Determines if this position should be rotated and which modules in this position should be ignored. NOTE: is only used when mode is '`positional`' otherwise ignored.<br><br>This value is OPTIONAL<br>Possible values: `Object` with keys:<br>&nbsp;&nbsp;&nbsp;&nbsp;`enabled`, a `boolean` to rotate this position or not,<br>&nbsp;&nbsp;&nbsp;&nbsp;`ignoreModules`, a String array of modules names to ignore.<br>&nbsp;&nbsp;&nbsp;&nbsp;`overrideTransitionInterval`, a int a transition time for this position only.<br>Default value:<br>&nbsp;&nbsp;&nbsp;&nbsp;`{enabled: false, ignoreModules: [], overrideTransitionInterval: 10000}`|
|`slides`|See Examples below. The slides will be rotated as a complete set using the `transitionInterval` setting. Ingnored modules (ignoreModules) will be diplayed on all slides.<br><br>This value is **OPTIONAL**<br>Possible values: array of String/Object array (see below)<br>Default value: `[[]]`|
|`showPageIndicators`| A `boolean` true or false to show or hide the page indication 'bubbles' at the bottom of the screen. Default is `true`.|
|`showPageControls`|A `boolean` true or false to show or hide the next and previous page buttons. Buttons will only appear when hovered near or over. They can be clicked when not visible. Default is `true`.|
|`keyBindings`|Key bindings to use for navigation with MMM-KeyBindings module. The values are the KeyNames to respond to from the `"KEYPRESS"` events generated in MMM-KeyBindings.<br><br>This value is **OPTIONAL**<br>Default value:<br><pre>keyBindings: {<br> enabled: true,<br> mode: "DEFAULT",<br> map: {<br>     NextSlide:"ArrowRight",<br>      PrevSlide:"ArrowLeft",<br>     Slide0:"Home"<br> }<br>}</pre><br>Note: any `Slide##` can be assigned to jump to a specific slide.|
|`keyBindings.mode`|Mode Keyword for responding to key press events sent from MMM-KeyBindings. Default: `"DEFAULT"` which repsonds to any key press when no other module has taken focus or changed the keyword.|


#### Example - Global Carousel

Expand Down

0 comments on commit 22b64b2

Please sign in to comment.