Skip to content

Instantly share code, notes, and snippets.

@afritsch afritsch/HTML Monitor test
Last active Aug 29, 2015

Embed
What would you like to do?
This is a simple test written in HTML and Javascript to check your monitor for pixel errors.
<!doctype html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta name="description" content="Monitor test in HTML">
<meta name="keywords" content="Monitor,test,online,html,javascript">
<meta name="author" content="Aande">
<title>HTML Monitor Test</title>
<!-- <link rel="stylesheet" href="css/styles.css?v=1.0"> -->
<style type="text/css">
body {
background-color: rgb(255,0,0);
font-family: liberation sans, sans-serif;
font-size: 10pt;
}
#drag {
background-color: rgba(200,200,200,0.7);
border: 1px solid rgb(0,0,0);
padding: 5px 20px 20px 20px;
width: 360px;
height: 190px;
position: relative;
}
.tiny {
font-size: 7pt;
}
button {
width: 80px;
height: 1.5em;
}
</style>
<script type="text/javascript">
/* http://stackoverflow.com/a/197761 */
function changeBackground(color) {
document.body.style.backgroundColor = color;
document.body.style.backgroundImage = "none";
}
function chess() {
document.body.style.backgroundImage = "url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuM4zml1AAAAARSURBVBhXYwCC////gzEDAwAp5AX7bk/yfwAAAABJRU5ErkJggg==')";
}
function vertical() {
document.body.style.backgroundImage = "url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuM4zml1AAAAARSURBVBhXYwCC////g6n//wEg7QX7HB2JQQAAAABJRU5ErkJggg==')";
}
function horizontal() {
document.body.style.backgroundImage = "url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuM4zml1AAAAAPSURBVBhXY4CC/0Dw/z8AFPkF+55iOkQAAAAASUVORK5CYII=')";
}
/* original js: http://stackoverflow.com/a/13152737
current js: http://jsfiddle.net/tovic/Xcb8d/light/ */
var selected = null, // Object of the element to be moved
x_pos = 0, y_pos = 0, // Stores x & y coordinates of the mouse pointer
x_elem = 0, y_elem = 0; // Stores top, left values (edge) of the element
// Will be called when user starts dragging an element
function _drag_init(elem) {
// Store the object of the element which needs to be moved
selected = elem;
x_elem = x_pos - selected.offsetLeft;
y_elem = y_pos - selected.offsetTop;
}
// Will be called when user dragging an element
function _move_elem(e) {
x_pos = document.all ? window.event.clientX : e.pageX;
y_pos = document.all ? window.event.clientY : e.pageY;
if (selected !== null) {
selected.style.left = (x_pos - x_elem) + 'px';
selected.style.top = (y_pos - y_elem) + 'px';
}
}
// Destroy the object when we are done
function _destroy() {
selected = null;
}
// Bind the functions...
document.addEventListener("DOMContentLoaded", function(event) { // http://stackoverflow.com/a/800010
document.getElementById('drag').onmousedown = function () {
_drag_init(this);
return false;
};
});
document.onmousemove = _move_elem;
document.onmouseup = _destroy;
</script>
<!-- <script src="js/scripts.js"></script> -->
</head>
<body>
<div id="drag">
<h3>Monitor Test</h3>
This is a simple test to check your monitor for pixel errors.<br/>
To enter (and leave) fullscreen in your browser press F11.<br/>
Click the buttons to change the background color.<br/>
This box is draggable to check everything.<br/>
<table>
<tr>
<td><button onclick="changeBackground('rgb(255,0,0)');">Red</button></td>
<td><button onclick="changeBackground('rgb(0,255,0)');">Green</button></td>
<td><button onclick="changeBackground('rgb(0,0,255)');">Blue</button></td>
<td><button onclick="chess();">Chess</button></td>
</tr>
<tr>
<td><button onclick="changeBackground('rgb(0,255,255)');">Cyan</button><br/>
<span class="tiny">(Absence of red)</span>
</td>
<td><button onclick="changeBackground('rgb(255,0,255)');">Magenta</button><br/>
<span class="tiny">(Absence of green)</span>
</td>
<td><button onclick="changeBackground('rgb(255,255,0)');">Yellow</button><br/>
<span class="tiny">(Absence of blue)</span>
</td>
<td><button onclick="vertical();">Vertic.</button></td>
</tr>
<tr>
<td><button onclick="changeBackground('rgb(255,255,255)');">White</button></td>
<td><button onclick="changeBackground('rgb(127,127,127)');">Grey</button></td>
<td><button onclick="changeBackground('rgb(0,0,0)');">Black</button></td>
<td><button onclick="horizontal();">Horiz.</button></td>
</tr>
</table>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.