Skip to content

Commit

Permalink
change initial comparison views, disable sparkly stuff
Browse files Browse the repository at this point in the history
  • Loading branch information
@jonsneyers
jonsneyers committed Sep 7, 2024
1 parent 6a4cc6e commit 22bd512
Show file tree
Hide file tree
Showing 2 changed files with 19 additions and 16 deletions.
12 changes: 6 additions & 6 deletions new/JPEGvsJXL.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -254,14 +254,14 @@ document.addEventListener("DOMContentLoaded", () => {
]).then(() => {
// After both data sets are loaded, initialize the display
const initialSizeSliderValue = elements.mySizeRange.value;
// const initialQualitySliderValue = elements.myQualityRange.value;
displayData(imagesSizeArray, initialSizeSliderValue, 'JPEGCompareSize');
// displayData(imagesQualityArray, initialQualitySliderValue, 'JPEGCompareQuality');
const initialQualitySliderValue = elements.myQualityRange.value;
// displayData(imagesSizeArray, initialSizeSliderValue, 'JPEGCompareSize');
displayData(imagesQualityArray, initialQualitySliderValue, 'JPEGCompareQuality');

// Ensure the first tab is active
// Ensure the initial tab is active
const jpegTabs = document.querySelector('.jpeg-jxl-tabs');
jpegTabs.querySelector('.tabs__button[data-for-tab="jpeg-size"]').classList.add('tabs__button-active');
jpegTabs.querySelector('.tabs__content[data-tab="jpeg-size"]').classList.add('tabs__content-active');
jpegTabs.querySelector('.tabs__button[data-for-tab="jpeg-quality"]').classList.add('tabs__button-active');
jpegTabs.querySelector('.tabs__content[data-tab="jpeg-quality"]').classList.add('tabs__content-active');
});
setupTabs();
// Initial data display
Expand Down
23 changes: 13 additions & 10 deletions new/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1804,12 +1804,12 @@ <h4 class="text-m-regular">JXL Info:</h4>
</div>
<div class="tabs jpeg-jxl-tabs">
<div class="tabs__sidebar">
<button data-tooltip="Vary Size, Hold Quality Constant." class="tabs__button tabs__button-active"
<button data-tooltip="Vary Size, Hold Quality Constant." class="tabs__button"
data-for-tab="jpeg-size">COMPARE SIZE</button>
<button data-tooltip="Vary Quality, Hold Size Contant." class="tabs__button"
<button data-tooltip="Vary Quality, Hold Size Contant." class="tabs__button tabs__button-active"
data-for-tab="jpeg-quality">COMPARE QUALITY</button>
</div>
<div class="tabs__content tabs__content-active" data-tab="jpeg-size">
<div class="tabs__content" data-tab="jpeg-size">
<div class="label-left">
<h4 class="text-all-caps-micro-medium">Size:</h4>
<div class="label-icon-left">
Expand All @@ -1819,7 +1819,7 @@ <h5 class="headline-s-semibold">KB</h5>
<h6 class="text-medium">SSIMU2: <span id="JPEGCSize_JPEGSSIMU2">99.9</span></h6>
</div>
<div class="slide-container">
<input type="range" min="0" max="75" value="0" step="25" class="slider-size" id="mySizeRange">
<input type="range" min="0" max="75" value="50" step="25" class="slider-size" id="mySizeRange">
<div class="size-range-labels">
<p class="size-label text-all-caps-micro-medium-white ml">Med-Low</p>
<p class="size-label text-all-caps-micro-medium-white s-md">Medium</p>
Expand All @@ -1836,7 +1836,7 @@ <h5 class="headline-s-semibold">KB</h5>
<h6 class="text-medium">SSIMU2: <span id="JPEGCSize_JXLSSIMU2">99.9</span></h6>
</div>
</div>
<div class="tabs__content" data-tab="jpeg-quality">
<div class="tabs__content tabs__content-active" data-tab="jpeg-quality">
<div class="label-left">
<h4 class="text-all-caps-micro-medium">SSIMU2 SCORE:</h4>
<div class="label-icon-left">
Expand All @@ -1845,7 +1845,7 @@ <h5 id="JPEGCQuality_JPEGSSIMU2" class="headline-l-semibold">72.5</h5>
<h6 class="text-medium"><span id="JPEGCQuality_JPEGSize">300</span>&nbsp KB</h6>
</div>
<div class="slide-container">
<input type="range" min="0" max="75" value="0" step="25" class="slider" id="myQualityRange">
<input type="range" min="0" max="75" value="25" step="25" class="slider" id="myQualityRange">
<div class="range-labels">
<p class="quality-label text-all-caps-micro-medium-white sm">Small</p>
<p class="quality-label text-all-caps-micro-medium-white q-md">Medium</p>
Expand Down Expand Up @@ -2204,7 +2204,7 @@ <h5 class="headline-s-semibold">KB</h5>
<h6 class="text-medium">SSIMU2: <span id="AVIFCSize_AVIFSSIMU2">99.9</span></h6>
</div>
<div class="slide-container">
<input type="range" min="0" max="75" value="0" step="25" class="slider-size"
<input type="range" min="0" max="75" value="50" step="25" class="slider-size"
id="mySizeRange_AVIF">
<div class="size-range-labels">
<p class="size-label text-all-caps-micro-medium-white ml">Med-Low</p>
Expand All @@ -2231,7 +2231,7 @@ <h5 id="AVIFCQuality_AVIFSSIMU2" class="headline-l-semibold">72.5</h5>
<h6 class="text-medium"><span id="AVIFCQuality_AVIFSize">300</span>&nbsp KB</h6>
</div>
<div class="slide-container">
<input type="range" min="0" max="75" value="0" step="25" class="slider" id="myQualityRange_AVIF">
<input type="range" min="0" max="75" value="25" step="25" class="slider" id="myQualityRange_AVIF">
<div class="range-labels">
<p class="quality-label text-all-caps-micro-medium-white sm">Small</p>
<p class="quality-label text-all-caps-micro-medium-white q-md">Medium</p>
Expand Down Expand Up @@ -2763,7 +2763,10 @@ <h4 class="headline-s-semibold centered white _2line">Photographic &amp; Non-pho
<div id="w-node-a89a5031-0ff7-675b-f7d6-29d42dd985eb-4703421c" class="container-content-vflex">
<div id="w-node-fedcfc71-bc17-af3f-285c-68c798bcef4e-4703421c" class="wrapper-text">
<div id="w-node-_8e9aaa5d-c4ff-899a-79da-79764703423d-4703421c" class="footer_credit-text">© 2024
JPEG XL and the JPEG XL Community. </div>
JPEG XL and the JPEG XL Community.<br>
Do you want to update something on this website? <a href="https://github.com/jxl-community/jxl-community.github.io">Make a pull request!</a><br>
The old version of this website is archived <a href="old/">here</a>.
</div>
</div>
<div id="w-node-c0d3ad9f-7ad0-819a-9ca1-7b24d38a2a6f-4703421c" class="footer-cookies-links-container">
<a href="#" class="footer_legal-link">Add to the site here.</a>
Expand Down Expand Up @@ -2842,7 +2845,7 @@ <h4 class="headline-s-semibold centered white _2line">Photographic &amp; Non-pho
}
})
}
initNoise()
// initNoise()
</script>
</body>

Expand Down

0 comments on commit 22bd512

Please sign in to comment.