Last active
February 14, 2020 13:03
-
-
Save afritsch/abf2decfa1f4d51c9cba to your computer and use it in GitHub Desktop.
This is a simple test written in HTML and Javascript to check your monitor for pixel errors.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> | |
body { | |
background-color: rgb(255,0,0); | |
font-family: liberation sans, arial, sans-serif; | |
font-size: 10pt; | |
} | |
#drag { | |
background-color: rgba(200,200,200,0.7); | |
/* border: 1px solid rgb(0,0,0); */ | |
padding: 3px 20px 20px 20px; | |
width: 360px; | |
height: 200px; | |
position: relative; | |
} | |
.tiny { | |
font-size: 7pt; | |
} | |
.btn { | |
width: 80px; | |
height: 1.4em; | |
border: none; | |
background-color: rgb(225,225,225); | |
} | |
.btn:hover { | |
background-color: rgb(240,240,240); | |
} | |
.btn:active { | |
background-color: rgb(210,210,210); | |
} | |
</style> | |
<script> | |
/* http://stackoverflow.com/a/197761 */ | |
function changeBackground(color) { | |
//document.body.style.backgroundColor = document.getElementById("backg").value; | |
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=')"; | |
} | |
/* first 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; | |
/* http://blog.movalog.com/a/javascript-toggle-visibility/ | |
http://javascript.info/tutorial/keyboard-events | |
http://www.w3schools.com/jsref/event_key_keycode.asp */ | |
document.addEventListener('keydown', function toggle_visibility(event) { | |
if(event.code == 'Space') { | |
var elem = document.getElementById("drag"); | |
if(elem.style.display == 'block') | |
elem.style.display = 'none'; | |
else | |
elem.style.display = 'block'; | |
} | |
}); | |
</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 <i>faulty pixels</i>.<br> | |
- To enter (and leave) fullscreen in your browser press <b>F11</b>.<br> | |
- Click the buttons to change the background color.<br> | |
- This box is draggable to check everything.<br> | |
- Press the <b>Space key</b> to hide and show this box. | |
<table> | |
<tr> | |
<td><button class="btn" onclick="changeBackground('rgb(255,0,0)');">Red</button></td> | |
<td><button class="btn" onclick="changeBackground('rgb(0,255,0)');">Green</button></td> | |
<td><button class="btn" onclick="changeBackground('rgb(0,0,255)');">Blue</button></td> | |
<td><button class="btn" onclick="chess();">Chess</button></td> | |
</tr> | |
<tr> | |
<td><button class="btn" onclick="changeBackground('rgb(0,255,255)');">Cyan</button><br/> | |
<span class="tiny">(Absence of red)</span> | |
</td> | |
<td><button class="btn" onclick="changeBackground('rgb(255,0,255)');">Magenta</button><br/> | |
<span class="tiny">(Absence of green)</span> | |
</td> | |
<td><button class="btn" onclick="changeBackground('rgb(255,255,0)');">Yellow</button><br/> | |
<span class="tiny">(Absence of blue)</span> | |
</td> | |
<td><button class="btn" onclick="vertical();">Vertic.</button></td> | |
</tr> | |
<tr> | |
<td><button class="btn" onclick="changeBackground('rgb(255,255,255)');">White</button></td> | |
<td><button class="btn" onclick="changeBackground('rgb(127,127,127)');">Grey</button></td> | |
<td><button class="btn" onclick="changeBackground('rgb(0,0,0)');">Black</button></td> | |
<td><button class="btn" onclick="horizontal();">Horiz.</button></td> | |
</tr> | |
</table> | |
<!-- <a href="#" onclick="toggle_visibility('drag');">hide</a> --> | |
<!-- <select id="backg" onchange="changeBackground();"> | |
<option value="rgb(255,0,0)">Red</option> | |
<option value="rgb(0,255,0)">Green</option> | |
<option value="rgb(0,0,255)">Blue</option> | |
<option value="rgb(0,255,255)">Cyan (Absence of red)</option> | |
<option value="rgb(255,0,255)">Magenta (Absence of green)</option> | |
<option value="rgb(255,255,0)">Yellow (Absence of blue)</option> | |
</select> --> | |
</div> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment