|
|
<!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='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js?config=TeX-MML-AM_CHTML'></script>
|
|
|
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
|
|
|
<script>
|
|
|
MathJax.Hub.Config({
|
|
|
jax: ["input/TeX", "output/HTML-CSS"],
|
|
|
displayAlign: "left",
|
|
|
TeX: {
|
|
|
Macros: {
|
|
|
box: ['\\boxed{\\vphantom{^0_0}\\hphantom{\\,} #1 \\hphantom{\\,}}', 1],
|
|
|
},
|
|
|
},
|
|
|
});
|
|
|
WebFont.load({
|
|
|
google: { families: ['Inconsolata'] }
|
|
|
});
|
|
|
</script>
|
|
|
<!----<script src="nice-select.js"></script>-->
|
|
|
|
|
|
|
|
|
|
|
|
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
|
|
|
<head>
|
|
|
<meta charset="utf-8" />
|
|
|
<title>Bandwidth Calculator</title>
|
|
|
<!--<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">-->
|
|
|
<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> Video Bandwidth Calculator (Work In Progress)</a>
|
|
|
<hr />
|
|
|
</div>
|
|
|
|
|
|
<div class="spoiler">
|
|
|
<table id="video_format" class="spoiler">
|
|
|
<tr class="header">
|
|
|
<td class="arrow"><span class="arrow"></span></td>
|
|
|
<td class="title">
|
|
|
Video Format
|
|
|
</td>
|
|
|
<td class="link number"></td>
|
|
|
</tr>
|
|
|
<tr id="video_format_body" style="display:table-row;">
|
|
|
<td colspan="3" class="body">
|
|
|
<table>
|
|
|
<tr>
|
|
|
<td>
|
|
|
<div align="center">
|
|
|
<input id="INPUT_HRES" class="res_input number" style="text-align:right;" type="text" onchange="submitVar(this.id, this.value); calcMain();" oninput="this.onchange();" onfocus="this.select();" autofocus />
|
|
|
<span class="res_x">✕</span>
|
|
|
<input id="INPUT_VRES" class="res_input number" style="text-align:left;" type="text" onchange="submitVar(this.id, this.value); calcMain();" oninput="this.onchange();" onfocus="this.select();" />
|
|
|
<span>@</span>
|
|
|
<input id="INPUT_F" class="freq_input number" type="text" onchange="submitVar(this.id, this.value), calcMain();" oninput="this.onchange();" onfocus="this.select();" />
|
|
|
<span>Hz</span>
|
|
|
</div>
|
|
|
<div id="warning_box" style="text-align:left; width:400px; margin-top:32px; border:1px solid black; padding:16px;" hidden>
|
|
|
<b>Warning: Non-Standard Refresh Rate</b><br />
|
|
|
<div style="padding:8px;">
|
|
|
The CTA-861 standard only defines timing parameters for this resolution at the following refresh rates:<br />
|
|
|
<ul>
|
|
|
<li>50.000 Hz (VIC: 24)</li>
|
|
|
<li>59.940 Hz (VIC: 25)</li>
|
|
|
<li>60.000 Hz (VIC: 26)</li>
|
|
|
</ul>
|
|
|
This calculator uses the timing parameters from 60 Hz for non-standard refresh rates.
|
|
|
</div>
|
|
|
</div>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="spoiler">
|
|
|
<table id="advanced_settings" class="spoiler">
|
|
|
<tr onclick="toggleSpoiler(this)" class="header clickable">
|
|
|
<td class="arrow"><span class="arrow">›</span></td>
|
|
|
<td class="title">
|
|
|
Advanced Settings
|
|
|
</td>
|
|
|
<td class="link"></td>
|
|
|
</tr>
|
|
|
<tr id="advanced_settings_body" style="display:table-row;">
|
|
|
<td colspan="3" class="body">
|
|
|
<table class="adv_options">
|
|
|
<tr style="vertical-align:top;">
|
|
|
<td>
|
|
|
<b>Color Depth:</b><br />
|
|
|
<form id="COLOR_DEPTH_FORM" onchange="submitVar(this.id, $('input[name=COLOR_DEPTH_SLCT]:checked').val()); calcMain();">
|
|
|
<label><input type="radio" name="COLOR_DEPTH_SLCT" value="24" checked /> 8 bpc (24 bit/px)</label><br />
|
|
|
<label><input type="radio" name="COLOR_DEPTH_SLCT" value="30" />10 bpc (30 bit/px)</label><br />
|
|
|
<label><input type="radio" name="COLOR_DEPTH_SLCT" value="36" />12 bpc (36 bit/px)</label><br />
|
|
|
<label><input type="radio" name="COLOR_DEPTH_SLCT" value="48" />16 bpc (48 bit/px)</label><br />
|
|
|
<label><input type="radio" name="COLOR_DEPTH_SLCT" value="Custom" />Custom:</label><br />
|
|
|
</form>
|
|
|
<div class="table">
|
|
|
<div class="trow">
|
|
|
<div class="tcell" style="vertical-align:middle; line-height:125%;">
|
|
|
<input id="CUSTOM_COLOR_DEPTH" class="color_depth_input number" type="text" onchange="submitVar('COLOR_DEPTH_FORM', $('input[name=COLOR_DEPTH_SLCT]:checked').val()); calcMain();" oninput="this.onchange();" onfocus="this.select();" disabled />
|
|
|
</div>
|
|
|
<div class="tcell" style="padding-left:4px; vertical-align:middle; line-height:125%; width:100%;">
|
|
|
<form id="CD_UNIT_FORM" style="line-height:100%;" onchange="document.getElementById('CUSTOM_COLOR_DEPTH').focus(); submitVar('COLOR_DEPTH_FORM', $('input[name=COLOR_DEPTH_SLCT]:checked').val()); calcMain();" disabled>
|
|
|
<label><input type="radio" name="CD_UNIT_SLCT" value="bpc" checked disabled /> bpc</label><br />
|
|
|
<label><input type="radio" name="CD_UNIT_SLCT" value="bpp" disabled /> bit/px</label>
|
|
|
</form>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</td>
|
|
|
<td>
|
|
|
<b>Pixel Format:</b><br />
|
|
|
<form id="PIXEL_FORMAT_FORM" onchange="submitVar(this.id, $('input[name=PX_FORMAT_SLCT]:checked').val()); calcMain();">
|
|
|
<label><input type="radio" name="PX_FORMAT_SLCT" value="RGB" checked />RGB</label><br />
|
|
|
<label><input type="radio" name="PX_FORMAT_SLCT" value="YCBCR 4:4:4" />YC<sub>B</sub>C<sub>R</sub> 4:4:4</label><br />
|
|
|
<label><input type="radio" name="PX_FORMAT_SLCT" value="YCBCR 4:2:2" />YC<sub>B</sub>C<sub>R</sub> 4:2:2</label><br />
|
|
|
<label><input type="radio" name="PX_FORMAT_SLCT" value="YCBCR 4:2:0" />YC<sub>B</sub>C<sub>R</sub> 4:2:0</label><br />
|
|
|
</form>
|
|
|
</td>
|
|
|
<td>
|
|
|
<b>Compression:</b><br />
|
|
|
<form id="COMPRESSION_FORM" onchange="submitVar(this.id, $('input[name=COMPRESSION_SLCT]:checked').val()); calcMain();">
|
|
|
<label><input type="radio" name="COMPRESSION_SLCT" value="Uncompressed" checked />Uncompressed</label><br />
|
|
|
<label><input type="radio" name="COMPRESSION_SLCT" value="DSC 2.0x" />DSC (2.0×)</label><br />
|
|
|
<label><input type="radio" name="COMPRESSION_SLCT" value="DSC 2.5x" />DSC (2.5×)</label><br />
|
|
|
<label><input type="radio" name="COMPRESSION_SLCT" value="DSC 3.0x" />DSC (3.0×)</label><br />
|
|
|
</form>
|
|
|
</td>
|
|
|
<td>
|
|
|
<b>Scan Type:</b><br />
|
|
|
<form id="SCAN_FORM" onchange="submitVar(this.id, $('input[name=SCAN_SLCT]:checked').val()); calcMain();">
|
|
|
<label><input type="radio" name="SCAN_SLCT" value="p" checked />Progressive</label><br />
|
|
|
<label><input type="radio" name="SCAN_SLCT" value="i" />Interlaced</label><br />
|
|
|
</form>
|
|
|
</td>
|
|
|
<td>
|
|
|
<b>Margins:</b><br />
|
|
|
<form id="MARGINS_FORM" onchange="submitVar(this.id, $('input[name=MARGINS_SLCT]:checked').val()); calcMain();">
|
|
|
<label><input type="radio" name="MARGINS_SLCT" value="n" checked />No</label><br />
|
|
|
<label><input type="radio" name="MARGINS_SLCT" value="y" />Yes</label><br />
|
|
|
</form>
|
|
|
<input id="CUSTOM_MARGINS" class="margins_input number" type="text" onchange="submitVar('MARGINS_FORM', $('input[name=MARGINS_SLCT]:checked').val()); calcMain();" disabled /> %
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td colspan="5">
|
|
|
<table class="timing_format">
|
|
|
<tr>
|
|
|
<td rowspan="4" style="text-align:left;">
|
|
|
<b>Timing Format:</b><br />
|
|
|
<select id="TIMING_DROP" onchange="submitVar(this.id, this.value); calcMain();" style="padding:4px; margin-top:8px;">
|
|
|
<option value="None">None</option>
|
|
|
<option value="DMT">DMT</option>
|
|
|
<option value="GTF">GTF</option>
|
|
|
<option value="CVT">CVT</option>
|
|
|
<option value="CTA-861">CTA-861</option>
|
|
|
<option value="CVT-RB">CVT-RB</option>
|
|
|
<option value="CVT-R2" selected>CVT-R2</option>
|
|
|
<option value="Custom">Custom</option>
|
|
|
</select><br />
|
|
|
<div style="padding:4px;">
|
|
|
<span id="TIMING_FORMAT_NAME"></span>
|
|
|
</div>
|
|
|
|
|
|
</td>
|
|
|
<td></td>
|
|
|
<td>Front Porch:</td>
|
|
|
<td>Sync Width:</td>
|
|
|
<td>Back Porch:</td>
|
|
|
<td>Total:</td>
|
|
|
</tr>
|
|
|
<tr style="height:30px;">
|
|
|
<td style="text-align:right; width:100px; padding-right:8px;">
|
|
|
H<sub>blank</sub>
|
|
|
</td>
|
|
|
<td class="timing_field">
|
|
|
<input id="H_FP" class="timing_param" oldvalue="" onchange="submitVar(this.id, this.value); calcMain();" oninput="this.onchange();" onfocus="this.select();" disabled /> px
|
|
|
</td>
|
|
|
<td class="timing_field">
|
|
|
<input id="H_SW" class="timing_param" oldvalue="" onchange="submitVar(this.id, this.value); calcMain();" oninput="this.onchange();" onfocus="this.select();" disabled /> px
|
|
|
</td>
|
|
|
<td class="timing_field">
|
|
|
<input id="H_BP" class="timing_param" oldvalue="" onchange="submitVar(this.id, this.value); calcMain();" oninput="this.onchange();" onfocus="this.select();" disabled /> px
|
|
|
</td>
|
|
|
<td style="text-align:right; min-width:60px;">
|
|
|
<span id="H_BLANK"></span> px
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr style="height:30px;">
|
|
|
<td id="V_BLANK_EVEN_LABEL" style="text-align:right; width:100px; padding-right:8px;">
|
|
|
V<sub>blank</sub>
|
|
|
</td>
|
|
|
<td class="timing_field">
|
|
|
<input id="V_FP" class="timing_param" oldvalue="" onchange="submitVar(this.id, this.value); calcMain();" oninput="this.onchange();" onfocus="this.select();" disabled /> px
|
|
|
</td>
|
|
|
<td class="timing_field">
|
|
|
<input id="V_SW" class="timing_param" oldvalue="" onchange="submitVar(this.id, this.value); calcMain();" oninput="this.onchange();" onfocus="this.select();" disabled /> px
|
|
|
</td>
|
|
|
<td class="timing_field">
|
|
|
<input id="V_BP" class="timing_param" oldvalue="" onchange="submitVar(this.id, this.value); calcMain();" oninput="this.onchange();" onfocus="this.select();" disabled /> px
|
|
|
</td>
|
|
|
<td style="text-align:right; width:100px;">
|
|
|
<span id="V_BLANK"></span> px
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr id="Interlaced_Timing_Row" style="height:30px;">
|
|
|
<td id="V_BLANK_INT_LABEL" style="text-align:right; width:100px; padding-right:8px;">
|
|
|
(Odd) V<sub>blank</sub>
|
|
|
</td>
|
|
|
<td id="V_FP_INT_CONTAINER">
|
|
|
<input id="V_FP_INT" class="timing_param" oldvalue="" onchange="submitVar(this.id, this.value); calcMain();" oninput="this.onchange();" onfocus="this.select();" disabled /> px
|
|
|
</td>
|
|
|
<td id="V_SW_INT_CONTAINER">
|
|
|
<input id="V_SW_INT" class="timing_param" oldvalue="" onchange="submitVar(this.id, this.value); calcMain();" oninput="this.onchange();" onfocus="this.select();" disabled /> px
|
|
|
</td>
|
|
|
<td id="V_BP_INT_CONTAINER">
|
|
|
<input id="V_BP_INT" class="timing_param" oldvalue="" onchange="submitVar(this.id, this.value); calcMain();" oninput="this.onchange();" onfocus="this.select();" disabled /> px
|
|
|
</td>
|
|
|
<td id="V_BLANK_INT_CONTAINER" style="text-align:right; width:100px;">
|
|
|
<span id="V_BLANK_INT"></span> px
|
|
|
</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="spoiler">
|
|
|
<table id="results" class="spoiler">
|
|
|
<tr class="header">
|
|
|
<td class="arrow"><span class="arrow"></span></td>
|
|
|
<td class="title">
|
|
|
Detailed Results
|
|
|
</td>
|
|
|
<td class="link"></td>
|
|
|
</tr>
|
|
|
<tr id="results_body" style="display:table-row;">
|
|
|
<td colspan="3" class="body">
|
|
|
<table style="border-collapse:collapse; border:0px solid transparent; padding:0px;">
|
|
|
<!----<tr>
|
|
|
<tr>
|
|
|
<td style="overflow-x:auto; white-space:nowrap; vertical-align:top; width:300px; padding:12px; background-color:#E0E0E0;">
|
|
|
<b>Video Format:</b><br />
|
|
|
<div style="padding-left:16px; padding-top:8px; line-height:140%;">
|
|
|
4096 × 2560 (8:5 ratio), progressive scan<br />
|
|
|
120 Hz vertical refresh rate (frame rate)<br />
|
|
|
10 bpc (30 bit/px) color depth (1,073,741,824 colors)<br />
|
|
|
YC<sub>B</sub>C<sub>R</sub> 4:4:4 pixel format<br />
|
|
|
Uncompressed<br />
|
|
|
CTA-861 timing (VIC: 63)<br />
|
|
|
</div>
|
|
|
</td>
|
|
|
</tr>-->
|
|
|
<tr>
|
|
|
<td id="results_container" class="results_container">
|
|
|
<table style='width:100%;' onclick='deselectRow();'><tr>
|
|
|
<td><div>Results</div></td>
|
|
|
<td style='text-align:right;'><label for='moar_decimals' style='font-size:80%;'>Moar Decimal Places<input type='checkbox' id='moar_decimals' class='moar_decimals' /></label></td>
|
|
|
</tr></table>
|
|
|
<table class="results">
|
|
|
<!--<table class="results" style="border-top-width: 0px;">-->
|
|
|
<tr id='results_data_transmission'>
|
|
|
<th class="label">Data Transmission</th><th class="val">Value</th><th class="unit">Unit</th></tr>
|
|
|
<tr id='results_data_rate'>
|
|
|
<td class="label">Data Rate</td><td class="val"></td><td class="unit"></td></tr>
|
|
|
<tr id='results_bit_rate'>
|
|
|
<td class="label">Bandwidth:</td><td></td><td></td></tr>
|
|
|
<tr id='results_8b10b'>
|
|
|
<td class="label depth2">8b/10b Encoding</td><td class="val"></td><td class="unit"></td></tr>
|
|
|
<tr id='results_16b18b'>
|
|
|
<td class="label depth2">16b/18b Encoding</td><td class="val"></td><td class="unit"></td></tr>
|
|
|
<!----<tr id='results_char_rate'>
|
|
|
<td class="label">TMDS Character Rate ("Pixel Clock")</td><td class="val">346</td><td class="unit">MHz</td></tr>-->
|
|
|
<tr id='results_pixel_rate'>
|
|
|
<td class="label">Pixel Rate (Effective)</td><td class="val"></td><td class="unit"></td></tr>
|
|
|
<tr id='results_pixel_rate_active'>
|
|
|
<td class="label">Pixel Rate (Active Pixels Only)</td><td class="val"></td><td class="unit"></td></tr>
|
|
|
</table>
|
|
|
<table class="results">
|
|
|
<tr class="triple" id='results_resolution'>
|
|
|
<th class="label">Resolution</th><th class="val">Hor.</th><th class="val">Ver.</th><th class="val">Total</th><th class="unit">Unit</th></tr>
|
|
|
<tr class="triple" id='results_active_px'>
|
|
|
<td class="label">Active</td><td class="val half"></td><td class="val half"></td><td class="val"></td><td class="unit"></td></tr>
|
|
|
<tr class="triple" id='results_blank_px'>
|
|
|
<td class="label">Blank</td><td class="val half"></td><td class="val half"></td><td class="val"></td><td class="unit"></td></tr>
|
|
|
<tr class="triple" id='results_total_px'>
|
|
|
<td class="label">Effective Total</td><td class="val half"></td><td class="val half"></td><td class="val"></td><td class="unit"></td></tr>
|
|
|
<tr class="triple" id='results_overhead_px'>
|
|
|
<td class="label">Overhead</td><td class="val half"></td><td class="val half"></td><td class="val"></td><td class="unit"></td></tr>
|
|
|
</table>
|
|
|
<table class="results">
|
|
|
<tr id='results_format'>
|
|
|
<th class="label">Format</th><th class="val">Value</th><th class="unit">Unit</th></tr>
|
|
|
<tr id='results_bpc'>
|
|
|
<td class="label">Color Depth (Per Channel)</td><td class="val"></td><td class="unit"></td></tr>
|
|
|
<tr id='results_bpp'>
|
|
|
<td class="label">Color Depth (Per Pixel)</td><td class="val"></td><td class="unit"></td></tr>
|
|
|
<tr id='results_palette'>
|
|
|
<td class="label">Palette Size</td><td class="val"></td><td class="unit"></td></tr>
|
|
|
<tr id='results_px_format'>
|
|
|
<td class="label">Pixel Format</td><td class="val"></td><td class="unit"></td></tr>
|
|
|
<tr id='results_scan'>
|
|
|
<td class="label">Scan Type</td><td class="val"></td><td class="unit"></td></tr>
|
|
|
</table>
|
|
|
<table class="results" id='results_v_progressive'>
|
|
|
<tr id='results_v_refresh'>
|
|
|
<th class="label">Vertical Refresh</th><th class="val">Value</th><th class="unit">Unit</th></tr>
|
|
|
<tr id='results_v_freq'>
|
|
|
<td class="label">Frequency (Target)</td><td class="val"></td><td class="unit"></td></tr>
|
|
|
<tr id='results_v_freq_actual'>
|
|
|
<td class="label">Frequency (Actual)</td><td class="val"></td><td class="unit"></td></tr>
|
|
|
<tr id='results_v_freq_dev'>
|
|
|
<td class="label depth2">Deviation</td><td class="val"></td><td class="unit"></td></tr>
|
|
|
<tr id='results_v_freq_dev_perc'>
|
|
|
<td class="label depth2"></td><td class="val"></td><td class="unit"></td></tr>
|
|
|
<tr id='results_v_per'>
|
|
|
<td class="label">Period (Target)</td><td class="val"></td><td class="unit"></td></tr>
|
|
|
<tr id='results_v_per_actual'>
|
|
|
<td class="label">Period (Actual)</td><td class="val"></td><td class="unit"></td></tr>
|
|
|
<tr id='results_v_per_dev'>
|
|
|
<td class="label depth2">Deviation</td><td class="val"></td><td class="unit"></td></tr>
|
|
|
<tr id='results_v_per_dev_perc'>
|
|
|
<td class="label depth2"></td><td class="val"></td><td class="unit"></td></tr>
|
|
|
</table>
|
|
|
<table class="results" id='results_v_interlaced' style='display:none;'>
|
|
|
<tr id='results_v_refresh_int'>
|
|
|
<th class="label">Vertical Refresh</th><th class="val">Value</th><th class="unit">Unit</th></tr>
|
|
|
<tr id='results_v_field'>
|
|
|
<td class="label">Field Rate (Target)</td><td class="val"></td><td class="unit"></td></tr>
|
|
|
<tr id='results_v_field_actual'>
|
|
|
<td class="label">Field Rate (Actual)</td><td class="val"></td><td class="unit"></td></tr>
|
|
|
<tr id='results_v_field_dev'>
|
|
|
<td class="label depth2">Deviation</td><td class="val"></td><td class="unit"></td></tr>
|
|
|
<tr id='results_v_field_dev_perc'>
|
|
|
<td class="label depth2"></td><td class="val"></td><td class="unit"></td></tr>
|
|
|
<tr id='results_v_field_per'>
|
|
|
<td class="label">Field Period (Target)</td><td class="val"></td><td class="unit"></td></tr>
|
|
|
<tr id='results_v_field_per_actual'>
|
|
|
<td class="label">Field Period (Actual)</td><td class="val"></td><td class="unit"></td></tr>
|
|
|
<tr id='results_v_field_per_dev'>
|
|
|
<td class="label depth2">Deviation</td><td class="val"></td><td class="unit"></td></tr>
|
|
|
<tr id='results_v_field_per_dev_perc'>
|
|
|
<td class="label depth2"></td><td class="val"></td><td class="unit"></td></tr>
|
|
|
<tr id='results_v_frame'>
|
|
|
<td class="label">Frame Rate (Target)</td><td class="val"></td><td class="unit"></td></tr>
|
|
|
<tr id='results_v_frame_actual'>
|
|
|
<td class="label">Frame Rate (Actual)</td><td class="val"></td><td class="unit"></td></tr>
|
|
|
<tr id='results_v_frame_dev'>
|
|
|
<td class="label depth2">Deviation</td><td class="val"></td><td class="unit"></td></tr>
|
|
|
<tr id='results_v_frame_dev_perc'>
|
|
|
<td class="label depth2"></td><td class="val"></td><td class="unit"></td></tr>
|
|
|
<tr id='results_v_frame_per'>
|
|
|
<td class="label">Frame Period (Target)</td><td class="val"></td><td class="unit"></td></tr>
|
|
|
<tr id='results_v_frame_per_actual'>
|
|
|
<td class="label">Frame Period (Actual)</td><td class="val"></td><td class="unit"></td></tr>
|
|
|
<tr id='results_v_frame_per_dev'>
|
|
|
<td class="label depth2">Deviation</td><td class="val"></td><td class="unit"></td></tr>
|
|
|
<tr id='results_v_frame_per_dev_perc'>
|
|
|
<td class="label depth2"></td><td class="val"></td><td class="unit"></td></tr>
|
|
|
</table>
|
|
|
<table class="results">
|
|
|
<tr id='results_h_refresh'>
|
|
|
<th class="label">Horizontal Refresh</th><th class="val">Value</th><th class="unit">Unit</th></tr>
|
|
|
<tr id='results_h_freq'>
|
|
|
<td class="label">Frequency</td><td class="val"></td><td class="unit"></td></tr>
|
|
|
<tr id='results_h_per'>
|
|
|
<td class="label">Period</td><td class="val"></td><td class="unit"></td></tr>
|
|
|
</table>
|
|
|
<script>
|
|
|
var tables = document.getElementById('results_container').children;
|
|
|
for (var i = 0; i < tables.length; i++) {
|
|
|
if (tables[i].className != 'results') { continue; }
|
|
|
else {
|
|
|
var rows = tables[i].children[0].children;
|
|
|
for (var j = 0; j < rows.length; j++) {
|
|
|
rows[j].setAttribute('onclick', 'selectRow(this)');
|
|
|
rows[j].setAttribute('onmouseover', 'if(results_selectedRow == "") { $("#results_explanation").html(Detailed_Explanation[this.id]); }');
|
|
|
rows[j].setAttribute('onmouseout', 'if(results_selectedRow == "") { $("#results_explanation").html("Click specifications for details"); }');
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
</td>
|
|
|
<td class="results_explanation" id="results_explanation">
|
|
|
Click specifications for details
|
|
|
</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="spoiler">
|
|
|
<table id="calculations" class="spoiler">
|
|
|
<tr class="header clickable">
|
|
|
<td class="arrow"><span class="arrow">›</span></td>
|
|
|
<td class="title">
|
|
|
Calculations
|
|
|
</td>
|
|
|
<td class="link"></td>
|
|
|
</tr>
|
|
|
<tr id="calculations_body" style="display:table-row;">
|
|
|
<td colspan="3" class="body" style="vertical-align:top;">
|
|
|
<div style="overflow-x:auto; white-space:nowrap;">
|
|
|
$$\textrm{Active pixels per frame:}$$
|
|
|
<div class='equation' id='Math_TotalPixels'>
|
|
|
$$\mathtt{4\:096 \times 2\:560~pixels = 10\:485\:760~px \ (10.5~Mpx)}$$
|
|
|
</div>
|
|
|
$$\textrm{Effective pixels per frame:}$$
|
|
|
<div class='equation' id='Math_EffectiveTotalPixels'>
|
|
|
$$\mathtt{4\:096 \times 2\:560~pixels = 10\:485\:760~px \ (10.5~Mpx)}$$
|
|
|
</div>
|
|
|
$$\textrm{Pixels per second:}$$
|
|
|
<div class='equation' id='Math_PixelRate'>
|
|
|
$$10\,485\,760\;\mathtt{px/frame} \times 120\;\mathtt{frame/s} = 1\,258\,291\,200\;\mathtt{px/s}\;(1.26\;\mathtt{Gpx/s})$$
|
|
|
</div>
|
|
|
$$\textrm{Bits per second:}$$
|
|
|
<div class='equation' id='Math_BitRate'>
|
|
|
$$1\,258\,291\,200\;\mathtt{px/s} \times 30\;\mathtt{bit/px} = 37\,748\,736\,000\;\mathtt{bit/s}\;(37.7\;\mathtt{Gbit/s})$$
|
|
|
</div>
|
|
|
<br /><hr /><br />
|
|
|
$$\textrm{Timing Formula:}$$
|
|
|
<div class='equation'>
|
|
|
$$\texttt{Constants:}$$
|
|
|
$$\texttt{H = 4,096 px}$$
|
|
|
$$\texttt{V = 2,560 px}$$
|
|
|
$$\texttt{F = 120 Hz}$$
|
|
|
</div>
|
|
|
$$\texttt{Formula:}$$
|
|
|
<div class='equation'>$$\texttt{V}_{\texttt{blank}} \texttt{ = } {{\texttt{V × V}_{\texttt{min}}} \over {{\texttt{1} \over \texttt{F}} - \texttt{V}_{\texttt{min}}}}$$</div>
|
|
|
</div>
|
|
|
<div style="padding-left:20px; max-width:100%;">The timing parameters used for these calculations are defined by the <a>CTA-861</a> standard. The definitions for this format are listed under Video Identification Code (VIC) #98, first defined in <a style="white-space:nowrap;">CTA-861-F</a> (formerly CEA-861-F).</div>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="spoiler">
|
|
|
<table id="max_refresh" class="spoiler">
|
|
|
<tr class="header clickable">
|
|
|
<td class="arrow"><span class="arrow">›</span></td>
|
|
|
<td class="title">
|
|
|
Interface Support
|
|
|
</td>
|
|
|
<td class="link"></td>
|
|
|
</tr>
|
|
|
<tr id="max_refresh_body" style="display:table-row;">
|
|
|
<td colspan="3" class="body">
|
|
|
<table class="interface" id="interface_support_table">
|
|
|
<!-- Filled in on page load by JS -->
|
|
|
</table>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</div>
|
|
|
<br />
|
|
|
<br />
|
|
|
|
|
|
</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>
|
|
|
|
|
|
<script src="DebugControl.js"></script>
|
|
|
<script src="jquery.csv.js"></script>
|
|
|
<script src="SI.js"></script>
|
|
|
<script src="bandwidth-spec-details.js"></script>
|
|
|
<script src="bandwidth.js"></script>
|
|
|
|
|
|
<!----
|
|
|
<script>
|
|
|
$(document).ready(function () {
|
|
|
$('select').niceSelect();
|
|
|
});
|
|
|
</script><!----> |