Skip to content

Commit

Permalink
big update
Browse files Browse the repository at this point in the history
  • Loading branch information
@SeryiBaran
SeryiBaran committed Sep 29, 2024
1 parent 5411c6b commit 775a8fa
Show file tree
Hide file tree
Showing 4 changed files with 300 additions and 28 deletions.
80 changes: 79 additions & 1 deletion css/main.css
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,86 @@
* {
box-sizing: border-box;
}

body {
background: MintCream;
text-align: center;
}

form, #workspace {
form, #workspace, footer {
margin: 30px;
}

form, footer {
max-width: 640px;
margin-left: auto;
margin-right: auto;
}

canvas {
image-rendering: pixelated; image-rendering: crisp-edges;
}

.config {
text-align: start;
max-width: 250px;
margin-left: auto;
margin-right: auto;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr;
gap: 4px 4px;
grid-template-areas:
"standard_resolutions standard_resolutions"
"width_label width_input"
"height_label height_input"
"generate generate"
"generate_current_resolution quick_test"
"download download"
"go_fullscreen go_fullscreen";
}

#standard_resolutions { grid-area: standard_resolutions; }
.width_label { grid-area: width_label; }
.width_input { grid-area: width_input; }
.height_label { grid-area: height_label; }
.height_input { grid-area: height_input; }
#generate { grid-area: generate; }
#generate_current_resolution { grid-area: generate_current_resolution; }
#quick_test { grid-area: quick_test; }
#download { grid-area: download; }
#go_fullscreen { grid-area: go_fullscreen; }

.advanced_checkboxes {
display: flex;
flex-direction: column;
margin: auto;
width: max-content;
text-align: start;
}

.button {
display: inline-block;
border: 1px solid #444;
border-radius: 2px;
background-color: #F0F0F0;
padding: 0.6em 1em;
text-decoration: none;
color: inherit;
cursor: pointer;
font-family: inherit;
font-size: 0.9em;
text-align: center;
}

.button:hover {
background-color: #FAFAFA;
}

.button:active {
background-color: #E6E6E6;
}

.credits {
font-size: 0.9em;
}
53 changes: 39 additions & 14 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,32 +2,57 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test picture generator</title>
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<title>Display test picture generator</title>
<script src="./jquery-3.7.1.min.js"></script>
<link rel="stylesheet" href="css/main.css">
</head>
<body>

<a href="https://github.com/fknipp/test-picture-generator"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png" alt="Fork me on GitHub"></a>
<h1>Display test picture generator</h1>

<h1>Test picture generator</h1>

<p>This tool draws a simple test image using JavaScript commands.</p>

<p>I use the generated pictures to test the native resolution of displays as well as the implemented scaling strategies.</p>
<p>This tool generates simple picture for testing display with JavaScript & JQuery.</p>

<form action="#">
<label for="width">Width: </label>
<input type="text" id="width" value="480">
<label for="height">Height: </label>
<input type="text" id="height" value="270">
<button id="generate">Generate</button>
<p class="config">
<select id="standard_resolutions" placeholder="---">
<option value="" disabled selected>Select resolution</option>
</select>
<label class="width_label" for="width">Width: </label>
<input class="width_input" type="text" id="width" value="400">
<label class="height_label" for="height">Height: </label>
<input class="height_input" type="text" id="height" value="300">
<button class="button" id="generate">Generate</button>
<button class="button" id="generate_current_resolution">MAKE FOR MY DISPLAY!</button>
<button class="button" id="quick_test">Quick test</button>
<a class="button" id="download" href="#">Download picture (PNG)</a>
<button class="button" id="go_fullscreen">Open fullscreen</button>
</p>
<p>
<label><input type="checkbox" name="advanced_check" id="advanced_check" /> Advanced settings</label>
</p>
<div id="advanced" style="display: none;">
<p>
<label>Width: <input type="range" id="slider_width" min="100" max="1920" value="400" style="width: 300px;"></label>
</p>
<p>
<label>Height: <input type="range" id="slider_height" min="100" max="1080" value="300" style="width: 300px;"></label>
</p>
<p class="advanced_checkboxes">
<label><input type="checkbox" name="only_geometry_mode_check" id="only_geometry_mode_check" /> Only geometry</label>
<label><input type="checkbox" name="disable_antialiasing_check" id="disable_antialiasing_check" /> Disable antialiasing (VERY LAGGY!)</label>
<label><input type="checkbox" name="slider_advanced_check" id="slider_advanced_check" /> Advanced sliders</label>
<label><input type="checkbox" name="slider_advanced_autogen_check" id="slider_advanced_autogen_check" /> Autogenerate by sliders move</label>
</p>
</div>
<hr />
</form>

<div id="workspace">
</div>

<a id="download" href="#">Download as PNG</a>
<footer>
<p class="credits">Written by <a href="https://github.com/fknipp/test-picture-generator/">fknipp</a> and <a href="https://seryibaran.github.io">SeryiBaran</a>.</p>
</footer>

<script src="js/main.js"></script>
</body>
Expand Down
2 changes: 2 additions & 0 deletions jquery-3.7.1.min.js
View file

Large diffs are not rendered by default.

193 changes: 180 additions & 13 deletions js/main.js
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,105 @@
$("#generate").on("click", function() {
/*
Useful sources:
- https://en.wikipedia.org/wiki/Web_colors
- https://en.wikipedia.org/wiki/List_of_common_display_resolutions
- https://wikitable2csv.ggor.de/
- https://onlinetools.com/csv/extract-csv-columns
*/

var resolutions = [["0.26K1",16,16],["0.46K1",42,11],["1.02K1",32,32],["1.20K3",40,30],["1.34K1",42,32],["1.54K2",48,32],["2.00K3",80,25],["2.40K2",60,40],["2.88K5",72,40],["4.03K7∶4",84,48],["4.10K1",64,64],["4.25K3",170,25],["4.61K1",72,64],["4.61K1",128,36],["4.80K1",75,64],["6.00K3.75",150,40],["6.14K2",96,64],["6.14K2",96,64],["6.14K2",128,48],["6.24K2",96,65],["6.53KA",102,64],["7.56K2",108,70],["8.08K4",101,80],["8.19K2∶1",128,64],["9.22K1",96,96],["12.29K2",128,96],["15.36K3.75",240,64],["16.32KA",160,102],["16.38K1",128,128],["20.48K0.8",128,160],["QQVGA",160,120],["23.04K1.111",160,144],["24.19K0.857",144,168],["24.32K1.053",160,152],["25.60K1",160,160],["26.88K3",140,192],["32.00K3",160,200],["32.26K9",224,144],["36.61K13∶11",208,176],["HQVGA",240,160],["38.72K4",220,176],["40.96K3",160,256],["44.64K3",180,248],["43.26K1",208,208],["49.15K3",256,192],["53.76K3",280,192],["54.27K3",256,212],["55.30K1",432,128],["57.34K3",256,224],["57.60K1",240,240],["61.44K3",256,240],["61.44K6",320,192],["61.44K5∶3",320,192],["Color Graphics Adapter (CGA)",320,200],["65.54K1",256,256],["65.54K3",256,256],["66.56K2",320,208],["71.68K2",320,224],["QVGA",320,240],["81.92K4",320,256],["81.92K3",320,256],["86.02K3",384,224],["88.32K3",368,240],["89.28K3",372,240],["90.24K9",376,240],["92.48K0.8",272,340],["WQVGA",400,240],["98.30K3",512,192],["100.35K3",448,224],["102.40K1",320,320],["WQVGA",432,240],["107.52K3",560,192],["108.00K9",400,270],["108.54K3",512,212],["110.59K3",384,288],["WQVGA*",480,234],["qSVGA",400,300],["120.00K3",480,250],["121.68K0.8",312,390],["122.88K3",512,240],["128.00K3",320,400],["Color Graphics Adapter (CGA)",640,200],["130.56K9",480,272],["131.07K2∶1",512,256],["131.07K3",512,256],["0.15M13∶11",416,352],["HVGA",480,320],["HVGA",640,240],["0.15M3",640,240],["0.16M3",640,256],["0.18M2",512,342],["0.18M3",368,480],["0.19M3",496,384],["0.19M6",800,240],["0.20M3",512,384],["0.20M2∶1",640,320],["EGA",640,350],["0.23M9",640,360],["0.24M3",480,500],["0.25M3",512,480],["0.25M3",720,348],["0.25M3",720,350],["0.26M3",640,400],["0.26M3",720,364],["0.28M2.273",800,352],["0.29M4",600,480],["VGA",640,480],["0.33M3",640,512],["WVGA",768,480],["WGA",800,480],["W-PAL",848,480],["FWVGA",854,480],["SVGA",800,600],["qHD",960,540],["0.52M3",832,624],["0.52M9",960,544],["0.59M9",1024,576],["DVGA",960,640],["WSVGA",1024,600],["0.66MA",1024,640],["0.69M3",960,720],["0.73M9",1136,640],["0.73M9",1138,640],["XGA",1024,768],["0.82M3",1024,800],["0.83MA",1152,720],["0.88M2",1152,768],["WXGA",1280,720],["0.93M3",1120,832],["WXGA",1280,768],["XGA+",1152,864],["1.00M9",1334,750],["WXGA",1280,800],["1.04M32∶25",1152,900],["1.05M1∶1",1024,1024],["WXGA HD",1366,768],["1.09M2",1280,854],["SXGA−",1280,960],["1.23M2.083",1600,768],["1.30M0.9",1080,1200],["WSXGA",1440,900],["WXGA+",1440,900],["SXGA",1280,1024],["1.38M2",1440,960],["HD+",1600,900],["SXGA+",1400,1050],["1.47M5",1440,1024],["1.56M3",1440,1080],["1.64M0",1600,1024],["WSXGA+",1680,1050],["1.78M9",1776,1000],["UXGA",1600,1200],["2.05M4",1600,1280],["FHD",1920,1080],["2.07M1",1440,1440],["DCI 2K",2048,1080],["WUXGA",1920,1200],["QWXGA",2048,1152],["2.41M3",1792,1344],["FHD+",1920,1280],["2.46M19∶9",2280,1080],["2.53M19½∶9",2340,1080],["2.58M3",1856,1392],["2.59M09",2400,1080],["2.59M4",1800,1440],["CWSXGA",2880,900],["2.59M9",2160,1200],["2.62MA",2048,1280],["TXGA",1920,1400],["2.72M1B",2520,1080],["2.74M2.165",2436,1125],["2.74M1AD",2538,1080],["2.76M3",1920,1440],["UW-FHD",2560,1080],["3.11M2",2160,1440],["QXGA",2048,1536],["3.32MA",2304,1440],["3.39MA",2256,1504],["WQHD",2560,1440],["3.74M9",2576,1450],["3.98M3",2304,1728],["WQXGA",2560,1600],["4.15M2∶1",2880,1440],["Infinity Display",2960,1440],["4.35M2",2560,1700],["4.61M1.422",2560,1800],["4.67M9",2880,1620],["4.92M3",2560,1920],["Ultra-Wide QHD",3440,1440],["4.99M2",2736,1824],["5.18MA",2880,1800],["5.53M2",2880,1920],["QSXGA",2560,2048],["5.60M3",2732,2048],["WQXGA+",3200,1800],["QSXGA+",2800,2100],["5.90MA",3072,1920],["4.26M1.538",2560,1664],["5.37M17∶11",2880,1864],["5.94M17∶11",3024,1964],["7.72M1.547",3456,2234],["3K",3000,2000],["3K",3000,2120],["UW4K",3840,1600],["WQSXGA",3200,2048],["7.00M2",3240,2160],["DQHD",5120,1440],["QUXGA",3200,2400],["4K UHD-1",3840,2160],["DCI 4K",4096,2160],["WQUXGA",3840,2400],["9.44M9",4096,2304],["UW5K (WUHD)",5120,2160],["11.29M9",4480,2520],["HXGA",4096,3072],["13.50M2",4500,3000],["5K",5120,2880],["WHXGA",5120,3200],["HSXGA",5120,4096],["6K",6016,3384],["WHSXGA",6400,4096],["HUXGA",6400,4800],["–",6480,3240],["8K UHD-2",7680,4320],["WHUXGA",7680,4800],["8K Full Format",8192,4320],["—",8192,4608],["UW10K",10240,4320],["8K Fulldome",8192,8192],["16K",15360,8640],["16K Full Format",16384,8640]]

resolutions.forEach((resolution, i) => $('#standard_resolutions').append(new Option(`${resolution[1]}x${resolution[2]} (${resolution[0]})`, i)));

var slider_advanced_autogen_checked = $("#slider_advanced_autogen_check").is(":checked");
$("#slider_advanced_autogen_check").on("input", function () {
slider_advanced_autogen_checked = this.checked;
})

var disable_antialiasing = $("#disable_antialiasing_check").is(":checked");
$("#disable_antialiasing_check").on("input", function () {
disable_antialiasing = this.checked;
})

var only_geometry_mode = $("#only_geometry_mode_check").is(":checked");
$("#only_geometry_mode_check").on("input", function () {
only_geometry_mode = this.checked;
})

$("#slider_advanced_check").on("input", function () {
$("#slider_width").attr({
"min": this.checked ? 1 : 100,
"max": this.checked ? 4000 : 1920,
"style": this.checked ? "width: 500px;" : "width: 300px;",
})
$("#slider_height").attr({
"min": this.checked ? 1 : 100,
"max": this.checked ? 3000 : 1080,
"style": this.checked ? "width: 500px;" : "width: 300px;",
})
})

$("#advanced_check").on("input", function () {
$("#advanced").attr({
"style": this.checked ? "" : "display: none;",
})
})

$("#slider_width, #slider_height").on("input", function () {
if (slider_advanced_autogen_checked) generatePattern($("#workspace"), $("#slider_width").val(), $("#slider_height").val());
$("#width").val($("#slider_width").val());
$("#height").val($("#slider_height").val());
})

$('#standard_resolutions').on("input", function () {
console.log(this.value)
$("#width").val(resolutions[this.value][1]);
$("#height").val(resolutions[this.value][2]);
$("#slider_width").val(resolutions[this.value][1]);
$("#slider_height").val(resolutions[this.value][2]);
})

function generate() {
generatePattern($("#workspace"), $("#width").val(), $("#height").val());
}

function generate_current_resolution() {
$("#width").val(window.screen.width * window.devicePixelRatio);
$("#height").val(window.screen.height * window.devicePixelRatio);
$("#slider_width").val(window.screen.width * window.devicePixelRatio);
$("#slider_height").val(window.screen.height * window.devicePixelRatio);
generatePattern($("#workspace"), $("#width").val(), $("#height").val());
}

function go_fullscreen() {
var canvas = $("canvas")[0];

if(canvas.requestFullScreen)
canvas.requestFullScreen();
else if(canvas.webkitRequestFullScreen)
canvas.webkitRequestFullScreen();
else if(canvas.mozRequestFullScreen)
canvas.mozRequestFullScreen();
}

$("#generate_current_resolution").on("click", function () {
generate_current_resolution();
return false;
})

$("#quick_test").on("click", function () {
generate_current_resolution();
go_fullscreen();
return false;
})

$("#generate").on("click", function () {
$("#slider_width").val($("#width").val());
$("#slider_height").val($("#height").val());
generate();
return false;
})


function generatePattern(workspace, width, height) {
workspace.empty();

Expand All @@ -13,30 +110,47 @@ function generatePattern(workspace, width, height) {
if (canvas.getContext) {
var ctx = canvas.getContext("2d");

// make canvas context render without antialiasing
if (disable_antialiasing) ctx.filter = "url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxmaWx0ZXIgaWQ9ImZpbHRlciIgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgY29sb3ItaW50ZXJwb2xhdGlvbi1maWx0ZXJzPSJzUkdCIj48ZmVDb21wb25lbnRUcmFuc2Zlcj48ZmVGdW5jUiB0eXBlPSJpZGVudGl0eSIvPjxmZUZ1bmNHIHR5cGU9ImlkZW50aXR5Ii8+PGZlRnVuY0IgdHlwZT0iaWRlbnRpdHkiLz48ZmVGdW5jQSB0eXBlPSJkaXNjcmV0ZSIgdGFibGVWYWx1ZXM9IjAgMSIvPjwvZmVDb21wb25lbnRUcmFuc2Zlcj48L2ZpbHRlcj48L3N2Zz4=#filter)";

function flip(func, deg = 180) {
func();

ctx.translate(width/2, height/2);
ctx.rotate(deg * (Math.PI / 180));
ctx.translate(-width/2, -height/2);

func();

ctx.translate(width/2, height/2);
ctx.rotate(-deg * (Math.PI / 180));
ctx.translate(-width/2, -height/2);
}

ctx.fillStyle = "black";
ctx.fillRect(0, 0, width, height);

ctx.strokeStyle = "white";
ctx.lineWidth = 1;
ctx.strokeRect(0.5, 0.5, width - 1, height - 1);
ctx.strokeStyle = only_geometry_mode ? "#FFFFFF" : "#808080";

var offsetx = Math.floor(width % 20 / 2) + 0.5;
for (var x = offsetx ; x < width ; x += 10) {
for (var x = offsetx ; x < width ; x += 20) {
ctx.beginPath();
ctx.moveTo(x, 0);
ctx.lineTo(x, height);
ctx.stroke();
}

var offsety = Math.floor(height % 20 / 2) + 0.5;
for (var y = offsety ; y < height ; y += 10) {
for (var y = offsety ; y < height ; y += 20) {
ctx.beginPath();
ctx.moveTo(0, y);
ctx.lineTo(width, y);
ctx.stroke();
}

var radius_step = Math.floor(Math.min(width, height) / 40) * 5;
ctx.strokeStyle = only_geometry_mode ? "#FFFFFF" : "#C0C0C0";

var radius_step = Math.floor(Math.min(width, height) / 40) * 4;
for (var i = 1; i <= 4; i++) {
ctx.beginPath();
ctx.arc(
Expand All @@ -46,19 +160,72 @@ function generatePattern(workspace, width, height) {
ctx.stroke();
}

ctx.font = Math.min(Math.floor(height / 4), Math.floor(width / 6)) + "px sans-serif";
ctx.fillStyle = "white";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillText(width + "×" + height, width/2, height/2);
ctx.strokeStyle = only_geometry_mode ? "#FFFFFF" : "#008080";
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(width, height);
ctx.stroke();

ctx.strokeStyle = only_geometry_mode ? "#FFFFFF" : "#008080";
ctx.beginPath();
ctx.moveTo(width, 0);
ctx.lineTo(0, height);
ctx.stroke();

ctx.strokeStyle = only_geometry_mode ? "#FFFFFF" : "#008080";
ctx.lineWidth = 1;
ctx.strokeRect(0.5, 0.5, width - 1, height - 1);

ctx.strokeStyle = only_geometry_mode ? "#FFFFFF" : "#008080";
ctx.lineWidth = 1;
ctx.strokeRect(8 + 0.5, 8 + 0.5, width - 16, height - 16);

if (!only_geometry_mode) {
var centerRectSize = 4;
ctx.fillStyle = only_geometry_mode ? "#FFFFFF" : "#008080";
ctx.fillRect(Math.floor(width / 2)-centerRectSize/2, Math.floor(height / 2)-centerRectSize/2, centerRectSize, centerRectSize);

var centerRect2Size = 2;
ctx.fillStyle = "#FFFFFF";
ctx.fillRect(Math.floor(width / 2)-centerRect2Size/2, Math.floor(height / 2)-centerRect2Size/2, centerRect2Size, centerRect2Size);
}

if (!only_geometry_mode) {
if (!(height < 100)) {
flip(() => {
ctx.font = Math.max(11, Math.min(Math.floor(height / 12), Math.floor(width / 12))) + "px Consolas";
ctx.fillStyle = "white";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillText(width + "×" + height, width/2, height/2-Math.min(width, height)*0.08);
})
}
}

if (!only_geometry_mode) {
if (!(width < 200 && height < 180)) {
flip(() => {
ctx.font = 11 + "px Consolas";
ctx.fillStyle = "white";
ctx.textAlign = "left";
ctx.textBaseline = "middle";
ctx.fillText(width + "×" + height, 12, 18);
})
}
}
}
}

$("#download").on("click", function() {
var canvas = $("canvas")[0];
var image = canvas.toDataURL("image/png");
this.href = image;
this.download = "image-" + canvas.width + "x" + canvas.height + ".png";
this.download = "fknipp_edited_" + canvas.width + "x" + canvas.height + ".png";
});

$("#go_fullscreen").on("click", function() {
go_fullscreen();
return false;
});

generatePattern($("#workspace"), $("#width").val(), $("#height").val());

0 comments on commit 775a8fa

Please sign in to comment.