UVLightOverlay Control

Overview

The Wisej.AI.Controls.UVLightOverlay control is a straightforward tool designed to simulate an animated UV light effect, reminiscent of a paper scanner. This control is highly user-friendly: you just need to place it over any content you wish to enhance with the UV light "special effect." You can then display the overlay to initiate the animation and hide it when the animation process is complete.

this.smartDataEntryAdapter1.Start += (s, e) =>
{
	this.uvLight1.Show();
	Application.Update(this);
};

this.smartDataEntryAdapter1.Done += (s, e) =>
{
	this.uvLight1.Hide();
	Application.Update(this);
};

To customize the style and animation of the UV light simulation, you can modify the CSS class supplied by Wisej.AI. Below is the default CSS:

.wisej-ai-uv-light {
	position: absolute;
	top: 10px;
	left: 0px;
	width: 100%;
	height: 10px;
	background-color: #ffffff;
	border-radius: 50px;
	animation: wisej-ai-uv-light-blink 3s ease-in-out infinite, wisej-ai-uv-light-scan 3s ease-in-out infinite;
}

@keyframes wisej-ai-uv-light-blink {
	0% {
		box-shadow: 0 0 30px #fff, 0 0 0px #fff, 0 0 10px #fff, 0 0 30px #85b6ff, 0 0 10px #85b6ff, 0 0 10px #85b6ff;
	}

	50% {
		box-shadow: 0 0 0px #fff, 0 0 10px #fff, 0 0 20px #fff, 0 0 40px #85b6ff, 0 0 30px #85b6ff, 0 0 80px #85b6ff;
	}

	100% {
		box-shadow: 0 0 30px #fff, 0 0 0px #fff, 0 0 10px #fff, 0 0 30px #85b6ff, 0 0 10px #85b6ff, 0 0 10px #85b6ff;
	}
}

@keyframes wisej-ai-uv-light-scan {
	0% {
		top: 10px;
	}

	50% {
		top: calc(100% - 20px);
	}

	100% {
		top: 10px;
	}
}