Merge pull request #1 from mawrxyz/colour-bars

Colour bars
bellingcat · Oct 17, 2024 · d752f1f · d752f1f
2 parents b017e26 + f76e59e
commit d752f1f
Show file tree

Hide file tree

Showing 12 changed files with 314 additions and 54 deletions.
diff --git a/LICENSE.txt b/LICENSE.txt
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Melissa Zhu
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README.md b/README.md
@@ -0,0 +1,45 @@
+# RGB Visualisation Web App
+
+A responsive web application that visualises the red, green, and blue components of an image. Users can toggle between different colour channels (Red, Green, Blue) to see how each contributes to the overall image. It also supports **fullscreen mode** with an intuitive UI optimised for both desktop and mobile screens.
+
+---
+
+## Features
+
+- **Colour Channel Toggle:** Easily toggle the visibility of red, green, and blue colour channels.
+- **Responsive Design:** Automatically adapts to various screen sizes and devices, with optimised mobile support.
+- **Fullscreen Mode:** View the application in fullscreen mode with a dedicated fullscreen button.
+- **Mix-Blend Mode:** Layers use blend modes for an authentic RGB visualisation.
+- **Visible Colour Bars:** At full colour, this section shows white (made of red + green + blue), yellow (red + green), cyan (green + blue), green, magenta (red + blue), red, blue and black (absence of colour/light). Users can see how these colours change when certain colour channels are toggled off and on. 
+
+---
+
+## Demo
+
+Try the live demo here: [Live Demo on GitHub Pages](https://mawrxyz.github.io/rgb-viz/)
+
+---
+
+## How to Use
+
+1. **Colour Channel Buttons:** 
+   - Click on **Red, Green, or Blue** to toggle the visibility of that colour channel.
+   - Tooltip on hover tells you whether the button will turn the visibility of that colour channel "on" or "off".
+
+2. **Fullscreen Mode:** 
+   - Click the fullscreen icon to enter fullscreen mode.
+   - Click the collapse icon to exit fullscreen mode.
+
+3. **Mobile Support:** 
+   - On mobile devices, the buttons stack vertically to ensure the UI fits smaller screens.
+
+---
+
+## Acknowledgements
+
+- **Pixabay / Pexels**:  
+  The main image used in this visualisation was sourced from [Pexels](https://www.pexels.com/photo/red-orange-and-green-leaves-during-daytime-33817/) and is licensed under [CC0](https://creativecommons.org/publicdomain/zero/1.0/).
+
+## License
+
+This project is licensed under the MIT License. See the [LICENSE](LICENSE.txt) file for details.
diff --git a/imgs/blue_bars.png b/imgs/blue_bars.png
diff --git a/imgs/blue_cat.png b/imgs/blue_cat.png
diff --git a/imgs/colours.png b/imgs/colours.png
diff --git a/imgs/green_bars.png b/imgs/green_bars.png
diff --git a/imgs/green_cat.png b/imgs/green_cat.png
diff --git a/imgs/red_bars.png b/imgs/red_bars.png
diff --git a/imgs/red_cat.png b/imgs/red_cat.png
diff --git a/index.html b/index.html
@@ -6,18 +6,36 @@
     <link rel="stylesheet" href="style.css">
 </head>
 <body>
+
     <div id="image-container">
-        <img id="redLayer" src="imgs/red_leaves.png" class="image-layer">
-        <img id="greenLayer" src="imgs/green_leaves.png" class="image-layer">
-        <img id="blueLayer" src="imgs/blue_leaves.png" class="image-layer">
-        <div id="attribution">Image source: <a href="https://www.pexels.com/photo/red-orange-and-green-leaves-during-daytime-33817/" target="_blank" rel="noopener noreferrer">Pixabay/Pexels</a>
+        <img src="imgs/red_leaves.png" class="image-layer redLayer">
+        <img src="imgs/green_leaves.png" class="image-layer greenLayer">
+        <img src="imgs/blue_leaves.png" class="image-layer blueLayer">
+        <div id="bar-container">
+            <p>Visible Colours:</p>
+            <div id="bar-wrapper">
+                <img src="imgs/red_bars.png" class="bars redLayer">
+                <img src="imgs/green_bars.png" class="bars greenLayer">
+                <img src="imgs/blue_bars.png" class="bars blueLayer">
+            </div>
         </div>
     </div>
     <div id="toggle">
-        <div data-layer="redLayer" class="active">Red</div>
-        <div data-layer="greenLayer" class="active">Green</div>
-        <div data-layer="blueLayer" class="active">Blue</div>
+        <div data-layer="redLayer" class="active" title="Toggle red visibility off">Red</div>
+        <div data-layer="greenLayer" class="active" title="Toggle green visibility off">Green</div>
+        <div data-layer="blueLayer" class="active" title="Toggle blue visibility off">Blue</div>
     </div>
+
+    <button id="fullscreen-button" title="Fullscreen">
+        <svg id="expand-icon" viewBox="0 0 24 24">
+            <path fill="white" d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 
+            7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"></path>
+        </svg>
+        <svg id="collapse-icon" viewBox="0 0 24 24" style="display: none;">
+            <path fill="white" d="M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 
+            11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z"></path>
+        </svg>
+    </button>    
     <script src="script.js"></script>
 </body>
 </html>
diff --git a/script.js b/script.js
@@ -1,38 +1,114 @@
 document.addEventListener('DOMContentLoaded', function() {
     const layers = {
-        redLayer: document.getElementById('redLayer'),
-        greenLayer: document.getElementById('greenLayer'),
-        blueLayer: document.getElementById('blueLayer')
+        redLayer: document.querySelectorAll('.redLayer'),
+        greenLayer: document.querySelectorAll('.greenLayer'),
+        blueLayer: document.querySelectorAll('.blueLayer')
     };
-    const allLayers = Object.values(layers);
+
+    const allLayers = [...layers.redLayer, ...layers.greenLayer, ...layers.blueLayer];
+
+    const fullscreenButton = document.getElementById('fullscreen-button');
+    const expandIcon = document.getElementById('expand-icon');
+    const collapseIcon = document.getElementById('collapse-icon');
 
     // Function to toggle visibility of a layer
     function toggleLayer(layer) {
-        const img = layers[layer];
-        if (img.style.display === 'block') {
-            img.style.display = 'none'; // Hide the layer if it is visible
+        layers[layer].forEach(img => {
+            img.style.display = (img.style.display === 'block' || img.style.display === '')
+                ? 'none' : 'block'; // Toggle visibility
+        });
+    }
+
+    // Update tooltips dynamically for layer buttons
+    function updateTooltip(button) {
+        const dataLayer = button.getAttribute('data-layer');
+        const isActive = button.classList.contains('active');
+        const lightColor = dataLayer.replace('Layer', '').toLowerCase();
+        const action = isActive ? 'off' : 'on';
+
+        const tooltipText = `Toggle ${lightColor} visibility ${action}`;
+        button.setAttribute('title', tooltipText); // Modify the tooltip
+    }
+
+    // Toggle full-screen mode
+    function toggleFullscreen() {
+        if (!document.fullscreenElement) {
+            enterFullscreen();
+        } else {
+            exitFullscreen();
+        }
+    }
+
+    // Enter full-screen mode
+    function enterFullscreen() {
+        const elem = document.documentElement;
+        if (elem.requestFullscreen) {
+            elem.requestFullscreen();
+        } else if (elem.mozRequestFullScreen) {
+            elem.mozRequestFullScreen();
+        } else if (elem.webkitRequestFullscreen) {
+            elem.webkitRequestFullscreen();
+        } else if (elem.msRequestFullscreen) {
+            elem.msRequestFullscreen();
+        }
+        toggleIcons(true);
+        fullscreenButton.setAttribute('title', 'Exit fullscreen');
+    }
+
+    // Exit full-screen mode
+    function exitFullscreen() {
+        if (document.exitFullscreen) {
+            document.exitFullscreen();
+        } else if (document.mozCancelFullScreen) {
+            document.mozCancelFullScreen();
+        } else if (document.webkitExitFullscreen) {
+            document.webkitExitFullscreen();
+        } else if (document.msExitFullscreen) {
+            document.msExitFullscreen();
+        }
+        toggleIcons(false);
+        fullscreenButton.setAttribute('title', 'Fullscreen');
+    }
+
+    // Toggle icons based on full-screen state
+    function toggleIcons(isFullscreen) {
+        if (isFullscreen) {
+            expandIcon.style.display = 'none';
+            collapseIcon.style.display = 'block';
         } else {
-            img.style.display = 'block'; // Show the layer if it is hidden
+            expandIcon.style.display = 'block';
+            collapseIcon.style.display = 'none';
         }
     }
 
-    // Initially show all layers
+    // Listen for full-screen changes
+    document.addEventListener('fullscreenchange', () => {
+        const isFullscreen = !!document.fullscreenElement;
+        toggleIcons(isFullscreen);
+        fullscreenButton.setAttribute('title', isFullscreen ? 'Exit fullscreen' : 'Fullscreen');
+    });
+
+    // Add event listener to full-screen button
+    fullscreenButton.addEventListener('click', toggleFullscreen);
+
+    // Show all layers on page load
     function showAllLayers() {
         allLayers.forEach(img => img.style.display = 'block');
     }
 
     // Add event listeners to toggle buttons
     document.querySelectorAll('#toggle div').forEach(button => {
         button.addEventListener('click', function() {
-            // Toggle the active class for the button
-            button.classList.toggle('active');
-
-            // Toggle the corresponding layer
-            const dataLayer = button.getAttribute('data-layer');
-            toggleLayer(dataLayer);
+            button.classList.toggle('active'); // Toggle active class
+            const dataLayer = button.getAttribute('data-layer'); // Get layer name
+            toggleLayer(dataLayer); // Toggle the corresponding layer
+            updateTooltip(button); // Update tooltip after each click
         });
+
+        // Initialize tooltips on page load
+        updateTooltip(button);
     });
 
-    // On page load, show all layers
+    // Show all layers on page load
     showAllLayers();
 });