skylarmt/glenwing.github.io_withhdmi
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

DIU minor fixes

Browse Source 
Tab order adjustment
Added size to general info for conversion
Added permanent scrollbar to avoid page resizing when page height
changes to >1 page
Fixed multiplication signs in 21:9 warning
This commit is contained in:
Glenwing 2017-10-24 20:10:56 -07:00
parent 6d806d2f5e
commit eff6439af6
2 changed files with 69 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
diu/diuJS.js
View File

@ -6,6 +6,7 @@
var vres1 = $('#INPUT_VRES').val(); var vres1 = $('#INPUT_VRES').val();
var ar1 = hres1 / vres1; var ar1 = hres1 / vres1;
var diag = parseFloat(size);
var width = size * Math.sin(Math.atan(hres1 / vres1)); var width = size * Math.sin(Math.atan(hres1 / vres1));
var height = size * Math.cos(Math.atan(hres1 / vres1)); var height = size * Math.cos(Math.atan(hres1 / vres1));
var area = width * height; var area = width * height;
@ -30,6 +31,7 @@
*/ */
display(new UNIT(unit_select), display(new UNIT(unit_select),
[ [
['RESULT_DIAG', 1, diag.toFixed(3) , (size != '' && size != 0) ],
['RESULT_WIDTH', 1, width.toFixed(3) , (hres1 != '' && vres1 != '' && size != '' && hres1 != 0 && vres1 != 0 && size != 0) ], ['RESULT_WIDTH', 1, width.toFixed(3) , (hres1 != '' && vres1 != '' && size != '' && hres1 != 0 && vres1 != 0 && size != 0) ],
['RESULT_HEIGHT', 1, height.toFixed(3) , (hres1 != '' && vres1 != '' && size != '' && hres1 != 0 && vres1 != 0 && size != 0) ], ['RESULT_HEIGHT', 1, height.toFixed(3) , (hres1 != '' && vres1 != '' && size != '' && hres1 != 0 && vres1 != 0 && size != 0) ],
['RESULT_AREA', 2, area.toFixed(3) , (hres1 != '' && vres1 != '' && size != '' && hres1 != 0 && vres1 != 0 && size != 0) ], ['RESULT_AREA', 2, area.toFixed(3) , (hres1 != '' && vres1 != '' && size != '' && hres1 != 0 && vres1 != 0 && size != 0) ],
@ -171,7 +173,10 @@ function prefixGen(num, precision) {
function pxPrefix(num, precision) { function pxPrefix(num, precision) {
var x = prefixGen(num, precision); var x = prefixGen(num, precision);
return (x['num'] + ' ' + x['prefix'] + 'px'); return (x['num'] + ' ' + x['prefix'] + 'px');
} function GCD(a, b) { }
function GCD(a, b) {
a = Math.abs(a); a = Math.abs(a);
b = Math.abs(b); b = Math.abs(b);
if (b > a) { var temp = a; a = b; b = temp; } if (b > a) { var temp = a; a = b; b = temp; }
@ -181,7 +186,8 @@ function pxPrefix(num, precision) {
if (a == 0) return b; if (a == 0) return b;
b %= a; b %= a;
} }
} }
function commas(x) { function commas(x) {
var parts = x.toString().split("."); var parts = x.toString().split(".");

110
diu/index.html
View File

@ -14,6 +14,7 @@
font-family: "Consolas", "Inconsolata", "Lucida Console", Monospace; font-family: "Consolas", "Inconsolata", "Lucida Console", Monospace;
font-size: 15px; font-size: 15px;
min-height: 100%; min-height: 100%;
overflow-y: scroll;
} }
div.wrapper { div.wrapper {
@ -25,7 +26,6 @@
border: 0px solid transparent; border: 0px solid transparent;
font-size: 15px; font-size: 15px;
padding-bottom: 48px; padding-bottom: 48px;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
} }
@ -38,17 +38,16 @@
vertical-align: middle; vertical-align: middle;
background-color: #DDDDDD; background-color: #DDDDDD;
cursor: pointer; cursor: pointer;
min-width: 512px; min-width: 512px;
} }
div.title { div.title {
margin-left:auto; margin-left: auto;
margin-right:auto; margin-right: auto;
text-align:center; text-align: center;
font-weight:bold; font-weight: bold;
background-color:#DDDDDD; background-color: #DDDDDD;
padding:8px; padding: 8px;
} }
span.title { span.title {
@ -56,41 +55,41 @@
} }
input { input {
padding:4px; padding: 4px;
text-align:center; text-align: center;
} }
input[type="text"] { input[type="text"] {
border:1px solid #CCCCCC; border: 1px solid #CCCCCC;
background-color:#F4F4F8; background-color: #F4F4F8;
} }
input.res_input { input.res_input {
width:50px; width: 50px;
} }
table { table {
margin-left:auto; margin-left: auto;
margin-right:auto; margin-right: auto;
border:0px solid black; border: 0px solid black;
} }
td { td {
padding:8px; padding: 8px;
vertical-align:middle; vertical-align: middle;
border:solid 1px transparent; border: solid 1px transparent;
} }
td.label { td.label {
font-weight:bold; font-weight: bold;
min-width:192px; min-width: 192px;
text-align:right; text-align: right;
} }
td.result { td.result {
min-width:120px; min-width: 120px;
width:100%; width: 100%;
} }
a:link { a:link {
color: #777777; color: #777777;
@ -114,16 +113,25 @@
sup { sup {
vertical-align: baseline; vertical-align: baseline;
position:relative; position: relative;
top:-0.4em; top: -0.4em;
line-height:0; line-height: 0;
} }
sub { sub {
vertical-align: baseline; vertical-align: baseline;
position:relative; position: relative;
top:0.3em; top: 0.3em;
line-height:0; 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> </style>
@ -139,7 +147,7 @@
<body> <body>
<div class="wrapper"> <div class="wrapper">
<div class="main"> <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;">Display Info Utility</a><br /><hr /></div> <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;"> <div style="width:512px; margin-left:auto; margin-right:auto;">
<!-- FIRST SEGMENT --> <!-- FIRST SEGMENT -->
<div class="title">DISPLAY INFO UTILITY</div> <div class="title">DISPLAY INFO UTILITY</div>
@ -147,21 +155,21 @@
<tr> <tr>
<td class="label"><b>Size:</b></td> <td class="label"><b>Size:</b></td>
<td> <td>
<input id="INPUT_SIZE" style="width:50px;" type="text" onchange="update();" oninput="this.onchange();" onfocus="this.select();" tabindex="2" autofocus /> <input id="INPUT_SIZE" style="width:50px;" type="text" onchange="update();" oninput="this.onchange();" onfocus="this.select();" tabindex="3" autofocus />
</td> </td>
<td style="width:100%"> <td style="width:100%">
<form id="unit_select"> <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 />&nbsp;in</label><br /> <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="1" />&nbsp;cm</label> <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> </form>
</td> </td>
</tr> </tr>
<tr> <tr>
<td class="label"><b>Resolution:</b></td> <td class="label"><b>Resolution:</b></td>
<td colspan="2" style="width:100%"> <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" /> <input id="INPUT_HRES" class="res_input" style="text-align:right;" type="text" onchange="update();" oninput="this.onchange()" onfocus="this.select();" tabindex="4" />
<span style="font-size:10px; font-family:'Courier New';">&#10005;</span> <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="4" /> <input id="INPUT_VRES" class="res_input" style="text-align:left;" type="text" onchange="update();" oninput="this.onchange()" onfocus="this.select();" tabindex="5" />
</td> </td>
</tr> </tr>
</table> </table>
@ -180,6 +188,10 @@
<td class="label">Pixel Density:</td> <td class="label">Pixel Density:</td>
<td id="RESULT_PX_DENSITY" class="result"></td> <td id="RESULT_PX_DENSITY" class="result"></td>
</tr> </tr>
<tr>
<td class="label">Diagonal:</td>
<td id="RESULT_DIAG" class="result"></td>
</tr>
<tr> <tr>
<td class="label">Width:</td> <td class="label">Width:</td>
<td id="RESULT_WIDTH" class="result"></td> <td id="RESULT_WIDTH" class="result"></td>
@ -200,7 +212,7 @@
<td class="label">Companion Resolution<br />or Aspect Ratio:</td> <td class="label">Companion Resolution<br />or Aspect Ratio:</td>
<td> <td>
<input class="res_input" id="INPUT_HRES2" style="text-align:right;" type="text" onchange="update();" oninput="this.onchange()" onfocus="this.select();" /> <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';">&#10005;</span> <span class="res_x">&#10005;</span>
<input class="res_input" id="INPUT_VRES2" style="text-align:left;" type="text" onchange="update();" oninput="this.onchange()" onfocus="this.select();" /> <input class="res_input" id="INPUT_VRES2" style="text-align:left;" type="text" onchange="update();" oninput="this.onchange()" onfocus="this.select();" />
</td> </td>
</tr> </tr>
@ -208,9 +220,9 @@
<td class="label">&nbsp;</td> <td class="label">&nbsp;</td>
<td class="result" style="color:#DD1111;"> <td class="result" style="color:#DD1111;">
<b>Warning: Formats commonly known as "21:9" are not an exact 21:9 ratio</b><br /> <b>Warning: Formats commonly known as "21:9" are not an exact 21:9 ratio</b><br />
&nbsp;&nbsp;2560 <span style="font-size:10px;">&#10005;</span> 1080 is a 64:27 ratio<br /> &nbsp;&nbsp;2560 <span class="res_x">&#10005;</span> 1080 is a 64:27 ratio<br />
&nbsp;&nbsp;3440 <span style="font-size:10px;">&#10005;</span> 1440 is a 43:18 ratio<br /> &nbsp;&nbsp;3440 <span class="res_x">&#10005;</span> 1440 is a 43:18 ratio<br />
&nbsp;&nbsp;3840 <span style="font-size:10px;">&#10005;</span> 1600 is a 12:5 ratio<br /> &nbsp;&nbsp;3840 <span class="res_x">&#10005;</span> 1600 is a 12:5 ratio<br />
</td> </td>
</tr> </tr>
<tr> <tr>