aa34088de1
Updated Adapter Guide to 2.4.1 Added HDMI 2.0 to docs Changed DCI labels Split DIU companion resolutions into two sections
269 lines
9.8 KiB
HTML
269 lines
9.8 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<meta name="viewport" content="width=device-width">
|
|
|
|
<style>
|
|
html,
|
|
body {
|
|
margin: 0;
|
|
height: 100%;
|
|
padding: 0;
|
|
}
|
|
|
|
body {
|
|
font-family: "Consolas", "Inconsolata", "Lucida Console", Monospace;
|
|
font-size: 15px;
|
|
min-height: 100%;
|
|
overflow-y: scroll;
|
|
}
|
|
|
|
div.wrapper {
|
|
min-height: 100%;
|
|
position: relative;
|
|
}
|
|
|
|
div.main {
|
|
border: 0px solid transparent;
|
|
font-size: 15px;
|
|
padding-bottom: 48px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
div.footer {
|
|
width: 100%;
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
vertical-align: middle;
|
|
background-color: #DDDDDD;
|
|
cursor: pointer;
|
|
min-width: 512px;
|
|
}
|
|
|
|
div.title {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
background-color: #DDDDDD;
|
|
padding: 8px;
|
|
}
|
|
|
|
span.title {
|
|
font-weight: bold;
|
|
}
|
|
|
|
input {
|
|
padding: 4px;
|
|
text-align: center;
|
|
}
|
|
|
|
input[type="text"] {
|
|
border: 1px solid #CCCCCC;
|
|
background-color: #F4F4F8;
|
|
}
|
|
|
|
input.res_input {
|
|
width: 50px;
|
|
}
|
|
|
|
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%;
|
|
}
|
|
|
|
a:link {
|
|
color: #777777;
|
|
text-decoration: none;
|
|
}
|
|
|
|
a:visited {
|
|
color: #777777;
|
|
text-decoration: none;
|
|
}
|
|
|
|
a:hover {
|
|
color: #000000;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
a:active {
|
|
color: #000000;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
sup {
|
|
vertical-align: baseline;
|
|
position: relative;
|
|
top: -0.4em;
|
|
line-height: 0;
|
|
}
|
|
|
|
sub {
|
|
vertical-align: baseline;
|
|
position: relative;
|
|
top: 0.3em;
|
|
line-height: 0;
|
|
}
|
|
|
|
span.res_x {
|
|
font-family: 'Courier New';
|
|
font-size: 10px;
|
|
vertical-align: baseline;
|
|
position: relative;
|
|
top: -0.1em;
|
|
line-height: 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">
|
|
<div style="font-weight:bold; font-size:16px; padding:16px; padding-bottom:0px; min-width:480px;"><a href="https://glenwing.github.io" style="text-decoration:none; color:#000000;" tabindex="1">Display Info Utility</a><br /><hr /></div>
|
|
<div style="width:512px; margin-left:auto; margin-right:auto;">
|
|
<!-- 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="3" 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="2" 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="2" /> 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="4" />
|
|
<span class="res_x">✕</span>
|
|
<input id="INPUT_VRES" class="res_input" style="text-align:left;" type="text" onchange="update();" oninput="this.onchange()" onfocus="this.select();" tabindex="5" />
|
|
</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">Diagonal Size:</td>
|
|
<td id="RESULT_DIAG" 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">SECONDARY DISPLAY WITH MATCHING HEIGHT</div>
|
|
<table>
|
|
<tr>
|
|
<td class="label">Secondary Display<br />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>:</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 class="res_x">✕</span> 1080 is a 64:27 ratio<br />
|
|
3440 <span class="res_x">✕</span> 1440 is a 43:18 ratio<br />
|
|
3840 <span class="res_x">✕</span> 1600 is a 12:5 ratio<br />
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="label">Diagonal Size:</td>
|
|
<td id="RESULT_D_MATCH" class="result"></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="label">Optimum Resolution:<br />(to also match density)</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>
|
|
<!-- FOURTH SEGMENT -->
|
|
<div class="title">SECONDARY DISPLAY WITH MATCHING PIXEL DENSITY</div>
|
|
<table>
|
|
<tr>
|
|
<td class="label">Secondary Display<br />Resolution:</td>
|
|
<td>
|
|
<input class="res_input" id="INPUT_HRES_DENSITY" style="text-align:right;" type="text" onchange="update();" oninput="this.onchange()" onfocus="this.select();" />
|
|
<span class="res_x">✕</span>
|
|
<input class="res_input" id="INPUT_VRES_DENSITY" style="text-align:left;" type="text" onchange="update();" oninput="this.onchange()" onfocus="this.select();" />
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="label">Companion Size:</td>
|
|
<td id="RESULT_DENSITY_SIZE" class="result"></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="label">Ratio:</td>
|
|
<td id="RESULT_DENSITY_RATIO" class="result"></td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="footer" onclick="document.getElementById('profile_link').click();" style="padding-top:10px; padding-bottom: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> |