Так как отображение информации на дисплее покупателя представлено в виде веб форм, то можно самостоятельно добавить отображение дополнительных элементов.
Ниже приведен пример донастройки существующего HTML для начала отображения страницы с изображениями после 1 минуты неактивности в кассе. Требуется в файл advertisement.html, который находится по пути \Bars.Cashdesk.CustomerDisplay\Templates\, дописать блок скрипта js в тело HTML:
<script>
// Функция для перехода на другую страницу через некоторое время
function redirectToPage() {
setTimeout(function() {
window.location.href = 'images.html'; // Путь ко второй странице
}, 60000); // Время задержки в миллисекундах (здесь 60000 мс = 60 секунды)
}
// Вызываем функцию после загрузки страницы
window.onload = redirectToPage;
</script>
Длаее потребуется создать файл images.html который вызывается в скрипте из файла advertisement.html (либо дать другое название, тогда потребуется изменить путь к странице в скрипте файла advertisement.html с images.html на ваше название.html). Ниже приведен пример HTML для отображения страницы, в которой последовательно отображаются файлы.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Последовательное отображение адаптивных картинок с плавными переходами</title>
<style>
body, html {
height: 100%;
margin: 0;
}
.container {
position: relative;
width: 100%; /* Ширина контейнера равна ширине окна браузера */
height: 100%; /* Высота контейнера равна высоте окна браузера */
overflow: hidden; /* Чтобы изображения не выходили за пределы контейнера */
}
.image {
position: absolute;
top: 0;
left: 0;
width: 100%; /* Ширина изображения равна ширине контейнера */
height: 100%; /* Высота изображения равна высоте контейнера */
object-fit: cover; /* Заполнение изображения по размерам блока, сохраняя пропорции */
opacity: 0;
transition: opacity 1s ease-in-out;
}
</style>
</head>
<body>
<div class="container">
<img id="image1" class="image" src="pictures\1.png" alt="Image 1">
<img id="image2" class="image" src="pictures\2.png" alt="Image 2">
<!-- Добавьте другие теги <img> по мере необходимости -->
</div>
<script>
window.onload = function() {
var container = document.querySelector('.container');
var images = document.querySelectorAll('.image'); // Получаем все картинки
var interval = 3000; // Интервал между показом каждой картинки в миллисекундах (здесь 3000 мс = 3 секунды)
var index = 0; // Индекс текущей картинки
// Функция для отображения следующей картинки
function showNextImage() {
if (index >= images.length) {
index = 0; // Если достигнут конец списка, перейти к первой картинке
}
var currentImage = images[index];
fadeIn(currentImage); // Показываем текущую картинку
setTimeout(function() {
fadeOut(currentImage); // Скрываем текущую картинку после интервала
index++; // Переходим к следующей картинке
showNextImage(); // Рекурсивно вызываем функцию для показа следующей картинки
}, interval);
}
// Функция для плавного появления картинки
function fadeIn(element) {
var opacity = 0;
var timer = setInterval(function() {
if (opacity >= 1) {
clearInterval(timer);
}
element.style.opacity = opacity;
opacity += 0.1;
}, 100);
}
// Функция для плавного исчезновения картинки
function fadeOut(element) {
var opacity = 1;
var timer = setInterval(function() {
if (opacity <= 0) {
clearInterval(timer);
element.style.opacity = 0;
}
element.style.opacity = opacity;
opacity -= 0.1;
}, 100);
}
// Запускаем показ картинок
showNextImage();
};
</script>
</body>
</html>
Пример готовых файлов приведен в архиве, который можно скачать и вставить содержимое архива в папку \Bars.Cashdesk.CustomerDisplay\Templates\ с заменой.
Архив