skylarmt
/
glenwing.github.io_withhdmi
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
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.
master
gh-pages
Main
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '6e8829894a'
${ noResults }
glenwing.github.io_withhdmi/diu/index.html

143 lines
7.6 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<meta name="viewport" content="width=device-width">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="../DebugControl.js"></script>
<script src="diuJS.js"></script>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Display Info Utility</title>
<link rel="stylesheet" type="text/css" href="./style.css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
</head>
<body>
<div class="wrapper">
<div class="main">
<div class="header">
<a href="https://glenwing.github.io"><i class="material-icons back_arrow">subdirectory_arrow_left</i>&nbsp;Display Info Utility</a>
<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 />&nbsp;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" />&nbsp;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">&#10005;</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="width:32px; text-align:right;" type="text" onchange="update();" oninput="this.onchange()" onfocus="this.select();" />
<span>&#x2236;</span>
<input class="res_input" id="INPUT_VRES2" style="width:32px; 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">&nbsp;</td>
<td class="result" style="color:#DD1111;">
<b>Warning: Formats commonly known as "21&#x2236;9" are not an exact 21&#x2236;9 ratio</b><br />
&nbsp;&nbsp;2560 <span class="res_x">&#10005;</span> 1080 is a 64&#x2236;27 ratio<br />
&nbsp;&nbsp;3440 <span class="res_x">&#10005;</span> 1440 is a 43&#x2236;18 ratio<br />
&nbsp;&nbsp;3840 <span class="res_x">&#10005;</span> 1600 is a 12&#x2236;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">Diagonal 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">&#10005;</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">Diagonal 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();">
<a id="profile_link" target="_blank" href="https://linustechtips.com/main/profile/2466-glenwing/">Glenwing</a>
</div>
</div>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink