Skip to content

Commit

Permalink
A click on the left side shows the previous picture
Browse files Browse the repository at this point in the history 
and reverses the playback order.
  • Loading branch information
@j-a-n
j-a-n committed Nov 25, 2023
1 parent 6ccedc0 commit f0e567b
Show file tree
Hide file tree
Showing 2 changed files with 77 additions and 19 deletions.
2 changes: 2 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,6 +90,7 @@ You can set the following configuration parameters for every individual Home Ass
| fetch_address_data | Fetch address data for EXIF GPS coordinates from nominatim.openstreetmap.org? | false |
| image_info_template | Format of image info display (HTML). ${EXIF-tag-name} will be replaced with the corresponding EXIF tag value. The config name was `exif_info_template` before version 4.7. | ${DateTimeOriginal} |
| touch_zone_size_next_image | Size of the area on the right side of the screen at which a click will show the next image (as a percentage of the total screen width, 0 = disabled). | 15 |
| touch_zone_size_previous_image | Size of the area on the left side of the screen at which a click will show the previous image (as a percentage of the total screen width, 0 = disabled). | 15 |
| info_animation_duration_x | Animation duration in seconds for the movement of the info box in x-direction (0 = no animation). | 0 |
| info_animation_duration_y | Animation duration in seconds for the movement of the info box in y-direction (0 = no animation). | 0 |
| info_animation_timing_function_x | The CSS timing-function to use for the animation of the info box movement in x-direction. | ease |
Expand Down Expand Up @@ -186,6 +187,7 @@ Screensaver images will be fetched from this URL.
This can be any HTTP URL, a Home Assistant media-source URL or a Home Assistant entity that has the entity_picture attribute.

Tip: If you click on the far right side of the screen while the screen saver is active, the next image will be displayed.
A click on the left side shows the previous picture and reverses the playback order.

### HTTP URL

Expand Down
94 changes: 75 additions & 19 deletions wallpanel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,7 @@ class ScreenWakeLock {
}
}

const version = "4.22.1";
const version = "4.23.0";
const defaultConfig = {
enabled: false,
enabled_on_tabs: [],
Expand Down Expand Up @@ -135,6 +135,7 @@ const defaultConfig = {
image_excludes: [],
image_background: 'color', // color / image
touch_zone_size_next_image: 15,
touch_zone_size_previous_image: 15,
show_progress_bar: false,
show_image_info: false,
fetch_address_data: false,
Expand Down Expand Up @@ -671,6 +672,7 @@ class WallpanelView extends HuiView {

this.imageList = [];
this.imageIndex = -1;
this.imageListDirection = "forwards"; // forwards, backwards
this.lastImageListUpdate;
this.updatingImageList = false;
this.lastImageUpdate = 0;
Expand Down Expand Up @@ -1237,6 +1239,13 @@ class WallpanelView extends HuiView {
}
return this.imageTwo;
}

getInactiveImageElement() {
if (this.imageOneContainer.style.opacity == 1) {
return this.imageTwo;
}
return this.imageOne;
}

connectedCallback() {
this.style.zIndex = 1000;
Expand Down Expand Up @@ -1642,7 +1651,12 @@ class WallpanelView extends HuiView {
let wp = this;
findImages(this.hass, mediaContentId).then(
result => {
this.imageList = result.sort();
if (config.image_order == "random") {
this.imageList = result.sort((a, b) => 0.5 - Math.random());
}
else {
this.imageList = result.sort();
}
logger.debug("Image list from media-source is now:", this.imageList);
this.updatingImageList = false;
if (preload) {
Expand Down Expand Up @@ -1724,21 +1738,18 @@ class WallpanelView extends HuiView {
}

updateImageIndex() {
if (config.image_order == "random") {
if (this.imageList.length > 1) {
let imageIndex = this.imageIndex;
while (imageIndex == this.imageIndex) {
imageIndex = Math.floor(Math.random() * this.imageList.length);
}
this.imageIndex = imageIndex;
}
if (this.imageListDirection == "forwards") {
this.imageIndex++;
}
else {
this.imageIndex++;
this.imageIndex--;
}
if (this.imageIndex >= this.imageList.length) {
this.imageIndex = 0;
}
else if (this.imageIndex < 0) {
this.imageIndex = this.imageList.length - 1;
}
}

updateImageFromMediaSource(img) {
Expand Down Expand Up @@ -1850,8 +1861,11 @@ class WallpanelView extends HuiView {
next.addEventListener('load', onLoad);
this.updateImage(next);
}

switchActiveImage(crossfadeMillis = null) {
if (this.afterFadeoutTimer) {
clearTimeout(this.afterFadeoutTimer);
}
this.lastImageUpdate = Date.now();

if (crossfadeMillis === null) {
Expand Down Expand Up @@ -1891,7 +1905,7 @@ class WallpanelView extends HuiView {
// only if not media-entity, which will not yet have changed already
if (imageSourceType() !== "media-entity") {
let wp = this;
setTimeout(function() {
this.afterFadeoutTimer = setTimeout(function() {
wp.updateImage(curImg);
}, crossfadeMillis);
}
Expand Down Expand Up @@ -2107,6 +2121,28 @@ class WallpanelView extends HuiView {
}
}

switchImageDirection(direction) {
this.imageListDirection = direction;
if (this.afterFadeoutTimer) {
clearTimeout(this.afterFadeoutTimer);
}
this.updateImageIndex();
const inactiveImage = this.getInactiveImageElement();
this.updateImage(inactiveImage);

const wp = this;
const start = Date.now();
function switchActiveImageAfterLoad() {
if (inactiveImage.getAttribute('data-loading') == "false" || Date.now() - start >= 2000) {
wp.switchActiveImage(500);
}
else {
setTimeout(switchActiveImageAfterLoad, 50);
}
}
setTimeout(switchActiveImageAfterLoad, 50);
}

handleInteractionEvent(evt, isClick) {
let now = Date.now();
this.idleSince = now;
Expand Down Expand Up @@ -2179,12 +2215,32 @@ class WallpanelView extends HuiView {
bottom = (this.screensaverContainer.clientHeight - y) / this.screensaverContainer.clientHeight;
}
if ((config.touch_zone_size_next_image > 0) && (right <= config.touch_zone_size_next_image / 100)) {
if (
isClick && (now - this.lastImageUpdate > 500) &&
(this.imageOne.getAttribute('data-loading') == "false") &&
(this.imageTwo.getAttribute('data-loading') == "false")
) {
this.switchActiveImage(500);
if (isClick) {
if (this.imageListDirection != "forwards") {
this.switchImageDirection("forwards");
}
else if (
(now - this.lastImageUpdate > 500) &&
(this.imageOne.getAttribute('data-loading') == "false") &&
(this.imageTwo.getAttribute('data-loading') == "false")
) {
this.switchActiveImage(500);
}
}
return;
}
else if ((config.touch_zone_size_previous_image > 0) && (right >= (100 - config.touch_zone_size_previous_image) / 100)) {
if (isClick) {
if (this.imageListDirection != "backwards") {
this.switchImageDirection("backwards");
}
else if (
isClick && (now - this.lastImageUpdate > 500) &&
(this.imageOne.getAttribute('data-loading') == "false") &&
(this.imageTwo.getAttribute('data-loading') == "false")
) {
this.switchActiveImage(500);
}
}
return;
}
Expand Down

0 comments on commit f0e567b

Please sign in to comment.