You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
215 lines
6.9 KiB
HTML
215 lines
6.9 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<meta name="viewport" content="width=device-width">
|
|
|
|
<style>
|
|
input {
|
|
padding:4px;
|
|
text-align:center;
|
|
}
|
|
|
|
input[type="text"] {
|
|
border:1px solid #CCCCCC;
|
|
background-color:#F4F4F8;
|
|
}
|
|
|
|
table {
|
|
margin-left:auto;
|
|
margin-right:auto;
|
|
border:0px solid black;
|
|
}
|
|
|
|
td {
|
|
padding:8px;
|
|
vertical-align:middle;
|
|
border:solid 1px transparent;
|
|
}
|
|
|
|
td.label {
|
|
font-weight:bold;
|
|
min-width:192px;
|
|
text-align:right;
|
|
}
|
|
|
|
td.result {
|
|
min-width:120px;
|
|
width:100%;
|
|
}
|
|
|
|
input.res_input {
|
|
width:50px;
|
|
}
|
|
|
|
sup {
|
|
vertical-align: baseline;
|
|
position:relative;
|
|
top:-0.4em;
|
|
line-height:0;
|
|
}
|
|
|
|
sub {
|
|
vertical-align: baseline;
|
|
position:relative;
|
|
top:0.3em;
|
|
line-height:0;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
margin:0;
|
|
height:100%
|
|
padding:0;
|
|
}
|
|
|
|
body {
|
|
font-family: "Consolas", "Inconsolata", "Lucida Console", Monospace;
|
|
font-size:15px;
|
|
}
|
|
|
|
div.wrapper {
|
|
position:absolute;
|
|
min-height:100%;
|
|
min-width:512px;
|
|
width:100%;
|
|
}
|
|
|
|
div.title {
|
|
margin-left:auto;
|
|
margin-right:auto;
|
|
text-align:center;
|
|
font-weight:bold;
|
|
background-color:#DDDDDD;
|
|
padding:8px;
|
|
}
|
|
|
|
div.main {
|
|
border:0px solid transparent;
|
|
width:512px;
|
|
padding-bottom:48px;
|
|
margin-left:auto;
|
|
margin-right:auto;
|
|
}
|
|
|
|
div.footer {
|
|
position:absolute;
|
|
width:100%;
|
|
bottom: 0;
|
|
left: 0;
|
|
background-color:#DDDDDD;
|
|
cursor:pointer;
|
|
margin:0;
|
|
}
|
|
|
|
</style>
|
|
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
|
|
<script src="diuJS.js"></script>
|
|
|
|
<html>
|
|
<head>
|
|
<title>Display Info Utility</title>
|
|
</head>
|
|
|
|
|
|
<body>
|
|
<div class="wrapper">
|
|
<div class="main">
|
|
<!-- MAIN START -->
|
|
|
|
<!-- FIRST SEGMENT -->
|
|
<div class="title">DISPLAY INFO UTILITY</div>
|
|
<table>
|
|
<tr>
|
|
<td class="label"><b>Size:</b></td>
|
|
<td>
|
|
<input id="INPUT_SIZE" style="width:50px;" type="text" onchange="update();" oninput="this.onchange();" onfocus="this.select();" tabindex="2" autofocus />
|
|
</td>
|
|
<td style="width:100%">
|
|
<form id="unit_select">
|
|
<label style="cursor:pointer; vertical-align:middle"><input name="unit_select" value="in" type="radio" onchange="document.getElementById('INPUT_SIZE').focus(); update();" style="cursor:pointer; vertical-align:middle; margin-bottom:3px;" tabindex="1" checked /> in</label><br />
|
|
<label style="cursor:pointer; vertical-align:middle"><input name="unit_select" value="cm" type="radio" onchange="document.getElementById('INPUT_SIZE').focus(); update();" style="cursor:pointer; vertical-align:middle; margin-bottom:3px;" tabindex="1" /> cm</label>
|
|
</form>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="label"><b>Resolution:</b></td>
|
|
<td colspan="2" style="width:100%">
|
|
<input id="INPUT_HRES" class="res_input" style="text-align:right;" type="text" onchange="update();" oninput="this.onchange()" onfocus="this.select();" tabindex="3" />
|
|
<span style="font-size:10px; font-family:'Courier New';">✕</span>
|
|
<input id="INPUT_VRES" class="res_input" style="text-align:left;" type="text" onchange="update();" oninput="this.onchange()" onfocus="this.select();" tabindex="4" />
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<!-- SECOND SEGMENT -->
|
|
<div class="title">GENERAL INFO</div>
|
|
<table style="min-width:160px;">
|
|
<tr>
|
|
<td class="label">Ratio:</td>
|
|
<td id="RESULT_RATIO" class="result"></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="label">Total Pixels:</td>
|
|
<td id="RESULT_TOTAL_PX" class="result"></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="label">Pixel Density:</td>
|
|
<td id="RESULT_PX_DENSITY" class="result"></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="label">Width:</td>
|
|
<td id="RESULT_WIDTH" class="result"></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="label">Height:</td>
|
|
<td id="RESULT_HEIGHT" class="result"></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="label">Area:</td>
|
|
<td id="RESULT_AREA" class="result"></td>
|
|
</tr>
|
|
</table>
|
|
|
|
<!-- THIRD SEGMENT -->
|
|
<div class="title">COMPANION FORMATS</div>
|
|
<table>
|
|
<tr>
|
|
<td class="label">Companion Resolution<br />or Aspect Ratio:</td>
|
|
<td>
|
|
<input class="res_input" id="INPUT_HRES2" style="text-align:right;" type="text" onchange="update();" oninput="this.onchange()" onfocus="this.select();" />
|
|
<span style="font-size:10px; font-family:'Courier New';">✕</span>
|
|
<input class="res_input" id="INPUT_VRES2" style="text-align:left;" type="text" onchange="update();" oninput="this.onchange()" onfocus="this.select();" />
|
|
</td>
|
|
</tr>
|
|
<tr id="21_9_warning" style="display:none;">
|
|
<td class="label"> </td>
|
|
<td class="result" style="color:#DD1111;">
|
|
<b>Warning: Formats commonly known as "21:9" are not an exact 21:9 ratio</b><br />
|
|
2560 <span style="font-size:10px;">✕</span> 1080 is a 64:27 ratio<br />
|
|
3440 <span style="font-size:10px;">✕</span> 1440 is a 43:18 ratio<br />
|
|
3840 <span style="font-size:10px;">✕</span> 1600 is a 12:5 ratio<br />
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="label">Companion Size<br />(Matching Height):</td>
|
|
<td id="RESULT_D_MATCH" class="result"></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="label">(Optimum Resolution):</td>
|
|
<td id="RESULT_OPT_RES" class="result"></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="label">Companion Size<br />(Matching Density):</td>
|
|
<td id="RESULT_SIZE" class="result"></td>
|
|
</tr>
|
|
</table>
|
|
|
|
<!-- MAIN END -->
|
|
</div>
|
|
|
|
<div class="footer" onclick="document.getElementById('profile_link').click();" style="padding-bottom:10px; padding-top:10px;">
|
|
<a id="profile_link" target="_blank" href="https://linustechtips.com/main/profile/2466-glenwing/" style="color:#888888; text-decoration:none; vertical-align:middle; padding:10px;">Glenwing</a>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html> |