Created
October 31, 2022 00:20
-
-
Save nelsonjchen/654cefd8bba4811454e2cdf794849ae4 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><base href="https://spektor56.github.io/comma10kreviewer/"><style>body{margin-left:0;margin-right:0;margin-top:0}#bN015htcoyT__google-cache-hdr{background:#f8f9fa;font:13px arial,sans-serif;text-align:left;color:#202124;border:0;margin:0;border-bottom:1px solid #dadce0;line-height:16px;padding:16px 28px 24px 28px}#bN015htcoyT__google-cache-hdr *{display:inline;font:inherit;text-align:inherit;color:inherit;line-height:inherit;background:none;border:0;margin:0;padding:0;letter-spacing:0}#bN015htcoyT__google-cache-hdr a{text-decoration:none;color:#1a0dab}#bN015htcoyT__google-cache-hdr a:hover{text-decoration:underline}#bN015htcoyT__google-cache-hdr a:visited{color:#681da8}#bN015htcoyT__google-cache-hdr div{display:block;margin-top:4px}#bN015htcoyT__google-cache-hdr b{font-weight:bold;display:inline-block;direction:ltr}</style><div id="bN015htcoyT__google-cache-hdr"><div><span>This is Google's cache of <a href="https://spektor56.github.io/comma10kreviewer/">https://spektor56.github.io/comma10kreviewer/</a>.</span> <span>It is a snapshot of the page as it appeared on Sep 5, 2022 06:45:02 GMT.</span> <span>The <a href="https://spektor56.github.io/comma10kreviewer/">current page</a> could have changed in the meantime.</span> <a href="http://support.google.com/websearch/bin/answer.py?hl=en&p=cached&answer=1687222"><span>Learn more</span>.</a></div><div><span style="display:inline-block;margin-top:8px;margin-right:104px;white-space:nowrap"><span style="margin-right:28px"><span style="font-weight:bold">Full version</span></span><span style="margin-right:28px"><a href="http://webcache.googleusercontent.com/search?q=cache:ye9RWDHoYewJ:https://spektor56.github.io/comma10kreviewer/&hl=en&gl=us&strip=1&vwsrc=0"><span>Text-only version</span></a></span><span style="margin-right:28px"><a href="http://webcache.googleusercontent.com/search?q=cache:ye9RWDHoYewJ:https://spektor56.github.io/comma10kreviewer/&hl=en&gl=us&strip=0&vwsrc=1"><span>View source</span></a></span></span></div><span style="display:inline-block;margin-top:8px;color:#70757a"><span>Tip: To quickly find your search term on this page, press <b>Ctrl+F</b> or <b>⌘-F</b> (Mac) and use the find bar.</span></span></div><div style="position:relative;"><!DOCTYPE html> | |
| <html> | |
| <head> | |
| <!-- Compiled and minified CSS --> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"> | |
| <!-- Compiled and minified JavaScript --> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> | |
| <style> | |
| html, body { | |
| height: 100%; | |
| margin: 0; | |
| padding: 0; | |
| width: 100%; | |
| } | |
| .mask-img { | |
| cursor: move; | |
| display: block; | |
| height: 100%; | |
| image-rendering: pixelated; | |
| margin: auto; | |
| position: relative; | |
| transform-origin: 0 0; | |
| } | |
| .zoom-img-pixelated { | |
| cursor: move; | |
| display: block; | |
| height: 100%; | |
| image-rendering: pixelated; | |
| margin: auto; | |
| position: relative; | |
| transform-origin: 0 0; | |
| } | |
| .zoom-img-hq { | |
| cursor: move; | |
| display: block; | |
| height: 100%; | |
| image-rendering: high-quality; | |
| margin: auto; | |
| position: relative; | |
| transform-origin: 0 0; | |
| } | |
| #zoom-container { | |
| background: black; | |
| flex-grow: 1; | |
| margin: 0; | |
| overflow: hidden; | |
| padding: 0 | |
| } | |
| .button { | |
| height: 50px; | |
| width: 100px; | |
| } | |
| .parent { | |
| height: 100%; | |
| left: 0; | |
| position: relative; | |
| top: 0; | |
| width: 100%; | |
| } | |
| #image2 { | |
| } | |
| #image1 { | |
| opacity: 0.5; | |
| } | |
| </style> | |
| </head> | |
| <body id="fullbody"> | |
| <div style="display: flex; flex-flow: column; height: 100%; margin: 0; padding: 0"> | |
| <div id="zoom-container" style="display: flex;"> | |
| <div id="prListDiv" style="display: none" style="height: 100%; position: relative; width: 200px;"> | |
| <select id="prList" style="display: block; height: 100%" id="cars" size="55"> | |
| </select> | |
| </div> | |
| <div class="parent"> | |
| <div style="height: 100%; position: absolute; ;"> | |
| <img ondragstart="return false" id="image2" class="zoom-img-pixelated" style="user-select: none;" /> | |
| </div> | |
| <div id="maskContainer" style="height: 100%; position: absolute; ;"> | |
| <img ondragstart="return false" id="image1" class="mask-img" style="user-select: none;" /> | |
| </div> | |
| </div> | |
| </div> | |
| <div style="display: flex; flex-flow: row; height: 31px; margin: 0; padding: 0;"> | |
| <div style="margin: 0; padding: 0; width: 60px;"> | |
| <input id="index" style="height: 30px; margin: 0; padding: 0; width: 100%;" type="number" value="0" max="1999" min="0"> | |
| </div> | |
| <div style="margin: 0; padding: 0; width: 100px;"> | |
| <label style="float: left"> | |
| <input id="originalMask" type="checkbox" /> | |
| <span style="padding-left: 25px">Original</span> | |
| </label> | |
| </div> | |
| <div style="flex-grow: 1; margin: 0; padding: 0"> | |
| <input style="; margin: 0; padding: 0;" id="opacityControl" type="range" min="0" max="1" step="0.05" value="0.5" oninput="image1.style.opacity = opacityControl.value" /> | |
| </div> | |
| <div style="flex-grow: 1; margin: 0; padding: 0"> | |
| <input style="; margin: 0; padding: 0;" id="brightnessControl" type="range" min="50" max="300" step="1" value="100" oninput="image2.style.filter = 'brightness('+brightnessControl.value+'%) contrast('+contrastControl.value+'%)'" /> | |
| </div> | |
| <div style="flex-grow: 1; margin: 0; padding: 0"> | |
| <input style="; margin: 0; padding: 0;" id="contrastControl" type="range" min="50" max="500" step="1" value="100" oninput="image2.style.filter = 'brightness('+brightnessControl.value+'%) contrast('+contrastControl.value+'%)'" /> | |
| </div> | |
| <div style="width:auto; margin: 0; padding: 0"> | |
| <a href="" onclick="window.open('https://spektor56.github.io/img-labeler/' + '?imageNumber='+ (maskImages[currentIndex].substring(maskImages[currentIndex].indexOf('/')+1).split('.')[0].length == 5 ? maskImages[currentIndex].substring(maskImages[currentIndex].indexOf('/')+1).split('.')[0] : (maskImages[currentIndex].substring(maskImages[currentIndex].indexOf('/')+1).split('_')[1].length == 1 && ['e','f'].includes(maskImages[currentIndex].substring(maskImages[currentIndex].indexOf('/')+1).split('_')[1]) ? maskImages[currentIndex].substring(maskImages[currentIndex].indexOf('/')+1).split('_')[0] + maskImages[currentIndex].substring(maskImages[currentIndex].indexOf('/')+1).split('_')[1] : maskImages[currentIndex].substring(maskImages[currentIndex].indexOf('/')+1).split('_')[0])) + '&showMask=https://raw.githubusercontent.com/commaai/comma10k/' + prHash + '/' + maskImages[currentIndex]);return false;">Open Editor</a> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> | |
| <script> | |
| var maskImages = []; | |
| var currentIndex = 0; | |
| var prHash = ""; | |
| var originalHash = ""; | |
| var folderNumber = ""; | |
| document.addEventListener('DOMContentLoaded', | |
| (event) => { | |
| var currentScale = 1.0, | |
| orig_width = document.getElementById('image1').getBoundingClientRect().width, | |
| orig_height = document.getElementById('image1').getBoundingClientRect().height; | |
| var translateX = 0; | |
| var translateY = 0; | |
| var zoomer = (function () { | |
| var img_ele = null, | |
| img_ele2 = null, | |
| x_cursor = 0, | |
| y_cursor = 0, | |
| x_img_ele = 0, | |
| y_img_ele = 0, | |
| current_top = 0, | |
| current_left = 0; | |
| return { | |
| zoom: function (nextScale, event) { | |
| var mask = document.getElementById('image1'); | |
| var image = document.getElementById('image2'); | |
| const ratio = 1 - nextScale / currentScale; | |
| const { | |
| clientX, | |
| clientY | |
| } = event; | |
| translateX += (clientX - translateX) * ratio; | |
| translateY += (clientY - translateY) * ratio; | |
| if (nextScale < 1) { | |
| nextScale = 1; | |
| translateY = 0; | |
| translateX = (window.innerWidth - document.getElementById("image1").getBoundingClientRect().width) / 2; | |
| } | |
| /* | |
| if (translateY > 0) | |
| { | |
| translateY =0; | |
| } | |
| if (translateY < -(mask.getBoundingClientRect().height- orig_height)) | |
| { | |
| translateY = -(mask.getBoundingClientRect().height- orig_height) | |
| } | |
| */ | |
| mask.style.transform = `translate(${translateX}px, ${translateY}px) scale(${nextScale})`; | |
| image.style.transform = mask.style.transform; | |
| currentScale = nextScale; | |
| }, | |
| start_drag: function () { | |
| img_ele = document.getElementById('image1'); | |
| img_ele2 = document.getElementById('image2'); | |
| translateX = (window.event.clientX - translateX); | |
| translateY = (window.event.clientY - translateY); | |
| }, | |
| stop_drag: function () { | |
| if (img_ele !== null) { | |
| translateX = (window.event.clientX - translateX); | |
| translateY = (window.event.clientY - translateY); | |
| } | |
| img_ele = null; | |
| }, | |
| while_drag: function () { | |
| if (img_ele !== null) { | |
| var x_cursor = window.event.clientX; | |
| var y_cursor = window.event.clientY; | |
| var new_left = (x_cursor - translateX); | |
| var new_top = (y_cursor - translateY); | |
| if (new_top > 0) { | |
| new_top = 0; | |
| } | |
| if (new_top < -(img_ele.getBoundingClientRect().height - orig_height)) { | |
| new_top = -(img_ele.getBoundingClientRect().height - orig_height); | |
| } | |
| img_ele.style.transform = `translate(${new_left}px, ${new_top}px) scale(${currentScale}) `; | |
| img_ele2.style.transform = img_ele.style.transform; | |
| //console.log(img_ele.style.left+' - '+img_ele.style.top); | |
| } | |
| } | |
| }; | |
| }()); | |
| function checkKey(e) { | |
| e = e || window.event; | |
| if (e.keyCode == '38') { | |
| // up arrow | |
| var opacityControl = document.getElementById("opacityControl"); | |
| opacityControl.stepUp(1); | |
| document.getElementById("image1").style.opacity = opacityControl.value; | |
| } else if (e.keyCode == '40') { | |
| var opacityControl = document.getElementById("opacityControl"); | |
| opacityControl.stepDown(1); | |
| document.getElementById("image1").style.opacity = opacityControl.value; | |
| } else if (e.keyCode == '37') { | |
| if ((currentIndex - 1) < document.getElementById('index').min) { | |
| return; | |
| } | |
| currentIndex = currentIndex - 1; | |
| document.getElementById('index').value = currentIndex; | |
| changeImage(currentIndex); | |
| } else if (e.keyCode == '39') { | |
| if ((currentIndex + 1) > document.getElementById('index').max) { | |
| return; | |
| } | |
| currentIndex = currentIndex + 1; | |
| document.getElementById('index').value = currentIndex; | |
| changeImage(currentIndex); | |
| // right arrow | |
| } else if (e.keyCode == '32') { | |
| var originalMask = document.getElementById('originalMask'); | |
| originalMask.checked = !originalMask.checked; | |
| changeImage(currentIndex); | |
| } else if (e.keyCode == '188') { | |
| if (document.getElementById("image1").style.opacity === document.getElementById("opacityControl").value) { | |
| document.getElementById("image1").style.opacity = 0; | |
| } else { | |
| document.getElementById("image1").style.opacity = document.getElementById("opacityControl").value; | |
| } | |
| } else if (e.keyCode == '80') { | |
| if (document.getElementById("image2").classList.contains("zoom-img-pixelated")) { | |
| document.getElementById("image2").classList.remove("zoom-img-pixelated"); | |
| document.getElementById("image2").classList.add("zoom-img-hq"); | |
| } else { | |
| document.getElementById("image2").classList.remove("zoom-img-hq"); | |
| document.getElementById("image2").classList.add("zoom-img-pixelated"); | |
| } | |
| } else if (e.keyCode == '112' || e.keyCode == '113' || e.keyCode == '114' || e.keyCode == '115') { | |
| e.preventDefault(); | |
| var copyLink = ""; | |
| var copyMessage = ""; | |
| if (e.keyCode == '112') { | |
| var prList = document.getElementById('prList'); | |
| copyLink = location.toString().replace(location.search, "") + "?index=" + currentIndex + "&pr=" + prList.options[prList.selectedIndex].text; | |
| copyMessage = "Copied link to current view"; | |
| } | |
| if (e.keyCode == '113') { | |
| copyLink = "https://raw.githubusercontent.com/commaai/comma10k/master/imgs" + folderNumber + "/" + maskImages[currentIndex].substring(maskImages[currentIndex].indexOf('/')); | |
| copyMessage = "Copied base image URL to clipboard"; | |
| } | |
| else if (e.keyCode == '114') { | |
| copyLink = "https://raw.githubusercontent.com/commaai/comma10k/" + prHash + "/" + maskImages[currentIndex]; | |
| copyMessage = "Copied PR segnet mask URL to clipboard"; | |
| } | |
| else if (e.keyCode == '115') { | |
| copyLink = "https://raw.githubusercontent.com/commaai/comma10k/master/masks" + folderNumber + "/" + maskImages[currentIndex].substring(maskImages[currentIndex].indexOf('/')); | |
| copyMessage = "Copied original segnet mask URL to clipboard"; | |
| } | |
| navigator.clipboard.writeText(copyLink).then(function () { | |
| M.Toast.dismissAll(); | |
| M.toast({ html: copyMessage }); | |
| }, function (err) { | |
| console.error('Async: Could not copy text: ', err); | |
| }); | |
| } | |
| } | |
| var prImage = false; | |
| function changeImage(index) { | |
| currentIndex = index; | |
| document.getElementById("image2").src = "https://raw.githubusercontent.com/commaai/comma10k/master/imgs" + folderNumber + "/" + maskImages[index].substring(maskImages[index].indexOf('/')); | |
| if (document.getElementById('originalMask').checked) { | |
| if (prImage) { | |
| document.getElementById("image1").src = "https://raw.githubusercontent.com/commaai/comma10k/" + originalHash + "/" + maskImages[index]; | |
| } | |
| else { | |
| document.getElementById("image1").src = "https://raw.githubusercontent.com/commaai/comma10k/master/masks" + folderNumber + "/" + maskImages[index].substring(maskImages[index].indexOf('/')); | |
| } | |
| } else { | |
| document.getElementById("image1").src = "https://raw.githubusercontent.com/commaai/comma10k/" + prHash + "/" + maskImages[index]; | |
| } | |
| M.Toast.dismissAll(); | |
| M.toast({ html: maskImages[index] }); | |
| } | |
| function imageLoaded() { | |
| if (currentScale === 1.0) { | |
| orig_width = document.getElementById("image2").getBoundingClientRect().width; | |
| orig_height = document.getElementById("image2").getBoundingClientRect().height; | |
| } | |
| } | |
| window.addEventListener("wheel", | |
| event => { | |
| const delta = event.wheelDelta / 120; | |
| const nextScale = currentScale + delta; | |
| zoomer.zoom(nextScale, event); | |
| }); | |
| document.getElementById('image1').addEventListener('mousedown', zoomer.start_drag); | |
| document.getElementById('image2').addEventListener('load', imageLoaded); | |
| document.getElementById('zoom-container').addEventListener('mousemove', zoomer.while_drag); | |
| document.getElementById('zoom-container').addEventListener('mouseup', zoomer.stop_drag); | |
| document.getElementById('zoom-container').addEventListener('mouseout', zoomer.stop_drag); | |
| document.getElementById('index').addEventListener('change', function (evt) { changeImage(Number(this.value)) }); | |
| document.getElementById('image1').addEventListener("dblclick", | |
| event => { | |
| const nextScale = currentScale + 0.25; | |
| zoomer.zoom(nextScale, event); | |
| }); | |
| document.getElementById('prList').addEventListener('change', | |
| function (evt) { | |
| prHash = prWithAllImages[this.selectedIndex].headRefOid; | |
| originalHash = prWithAllImages[this.selectedIndex].baseRefOid; | |
| maskImages = prWithAllImages[this.selectedIndex].files.nodes.map(function (image) { | |
| return image.path; | |
| }); | |
| if (maskImages.length > 0) { | |
| var folder = maskImages[0].split('/')[0]; | |
| folderNumber = folder.substring(5); | |
| } else { | |
| folderNumber = ""; | |
| } | |
| document.getElementById('index').max = maskImages.length - 1; | |
| document.getElementById('index').value = 0; | |
| changeImage(0); | |
| document.getElementById('originalMask').addEventListener('change', function (evt) { changeImage(currentIndex); }); | |
| }); | |
| document.addEventListener('DOMContentLoaded', | |
| function () { | |
| var elems = document.querySelectorAll('select'); | |
| var instances = M.FormSelect.init(elems, options); | |
| }); | |
| document.onkeydown = checkKey; | |
| var query = ''; | |
| const urlParams = new URLSearchParams(window.location.search); | |
| if (urlParams != null) { | |
| const id = urlParams.get('index'); | |
| const pr = urlParams.get('pr'); | |
| if (pr != null) { | |
| query = `query reviewPR { | |
| viewer { | |
| login | |
| } | |
| repository(name: "comma10k", owner: "commaai") { | |
| pullRequest(number: ` + pr + `) { | |
| baseRefOid | |
| headRefOid | |
| url | |
| number | |
| files(first: 100) { | |
| nodes { | |
| path | |
| } | |
| } | |
| } | |
| } | |
| }`; | |
| } | |
| else { | |
| query = `query reviewPR { | |
| viewer { | |
| login | |
| } | |
| repository(name: "comma10k", owner: "commaai") { | |
| pullRequests(states: OPEN, first: 100) { | |
| nodes { | |
| baseRefOid | |
| headRefOid | |
| url | |
| number | |
| files(first: 100) { | |
| nodes { | |
| path | |
| } | |
| } | |
| } | |
| } | |
| } | |
| }`; | |
| } | |
| } | |
| var prWithAllImages = []; | |
| fetch('https://api.github.com/graphql', | |
| { | |
| method: 'POST', | |
| body: JSON.stringify({ | |
| query | |
| }), | |
| headers: { | |
| 'Authorization': 'Bearer' + ' ' + atob('MWMzYTkxZGZkMmJlZDlmZjBmYmQ2NWQ5ZWQzZGQ5NzU5YmQ5NzM5MQ==') | |
| } | |
| }).then(function (resp) { | |
| // Return the response as JSON | |
| return resp.json(); | |
| }).then(function (data) { | |
| var re = /(?:\.([^.]+))?$/; | |
| if (data.data.repository.pullRequests != null) { | |
| prWithAllImages = | |
| data.data.repository.pullRequests.nodes.filter( | |
| function (node) { | |
| return node.files.nodes.every( | |
| function (file) { return re.exec(file.path)[1] === 'png' } | |
| ) | |
| } | |
| ); | |
| } | |
| else { | |
| prWithAllImages = [data.data.repository.pullRequest]; | |
| } | |
| prWithAllImages.forEach(function (files) { | |
| var opt = document.createElement("option"); | |
| opt.text = files.number; | |
| opt.value = files.url; | |
| opt.addEventListener("dblclick", | |
| event => { | |
| window.open(event.srcElement.value); | |
| }); | |
| //opt.value = files.index; | |
| document.getElementById("prList").options.add(opt); | |
| }); | |
| document.getElementById("prListDiv").style.display = "block"; | |
| // Log the API data | |
| console.log('token', data); | |
| const urlParams = new URLSearchParams(window.location.search); | |
| if (urlParams != null) { | |
| const id = urlParams.get('index'); | |
| const pr = urlParams.get('pr'); | |
| if (pr != null) { | |
| var newIndex = (id != null ? Number(id) : 0); | |
| var optionIndex = -1; | |
| var options = document.getElementById('prList').options; | |
| for (var opt of options) { | |
| optionIndex++; | |
| if (opt.text == pr) { | |
| break; | |
| } | |
| } | |
| if (optionIndex < 0) { | |
| return; | |
| } | |
| prImage = true; | |
| document.getElementById('prList').selectedIndex = optionIndex; | |
| originalHash = prWithAllImages[optionIndex].baseRefOid; | |
| prHash = prWithAllImages[optionIndex].headRefOid; | |
| maskImages = prWithAllImages[optionIndex].files.nodes.map(function (image) { | |
| return image.path; | |
| }); | |
| if (maskImages.length > 0) { | |
| var folder = maskImages[0].split('/')[0]; | |
| folderNumber = folder.substring(5); | |
| } else { | |
| folderNumber = ""; | |
| } | |
| document.getElementById('index').max = maskImages.length - 1; | |
| document.getElementById('index').value = newIndex; | |
| changeImage(newIndex); | |
| document.getElementById('originalMask').addEventListener('change', function (evt) { changeImage(currentIndex); }); | |
| } | |
| } | |
| }).catch(function (err) { | |
| // Log any errors | |
| console.log('something went wrong', err); | |
| }); | |
| }) | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment