Deploy v1.2.3

Develop 1.2.3

Author: Leogendra

index.html

@@ -56,7 +56,7 @@ <h1>Pixels Visualiser</h1>
                 <button class="pill active" data-range="99999">All time</button>
             </div>
 
-            <div class="no-data-error" style="display: none;">No data available for the selected range</div>
+            <div class="no-data-error">No data available for the selected range</div>
 
             <div id="stats-content">
                 <div class="stats-grid" id="statsContainer">
@@ -119,8 +119,7 @@ <h2>😊 Average score per tag</h2>
                         <h2>🔁 Weekdays average scores</h2>
                         <div class="options">
                             <div class="option-item">
-                                <label for="firstDayOfWeekSelect"
-                                    title="Which day do you want the week to start on">First day of the week</label>
+                                <label for="firstDayOfWeekSelect" title="Which day do you want the week to start on">First day of the week</label>
                                 <select id="firstDayOfWeekSelect" class="select">
                                     <option value="1">Monday</option>
                                     <option value="2">Tuesday</option>
@@ -155,26 +154,71 @@ <h2>📝 Most frequent words</h2>
 
                     <div class="options">
                         <div class="option-item">
-                            <label for="wordsPercentageCheckbox"
-                                title="Show percentage of appearance among all Pixels instead of raw values">Show percentages</label>
-                            <input type="checkbox" id="wordsPercentageCheckbox" class="checkbox">
+                            <button class="button open-settings" id="openWordsSettingsDialog">
+                                <img src="assets/settings_icon.svg" alt="Settings" class="icon-settings">
+                            </button>
                         </div>
 
-                        <div class="option-item">
-                            <label for="wordsOrderCheckbox" title="Order the words bellow by decreasing score">Order by score</label>
-                            <input type="checkbox" id="wordsOrderCheckbox" class="checkbox">
-                        </div>
+                        <dialog id="dialogWordsSettings" class="div-dialog-settings">
+                            <div class="dialog-settings">
+
+                                <h3>Words settings</h3>
+                                
+                                <div class="dialog-settings-group">
+                                    <label for="wordsPercentageCheckbox" title="Show percentage of appearance among all Pixels instead of raw values">Show percentages</label>
+                                    <input type="checkbox" id="wordsPercentageCheckbox" class="checkbox">
+
+                                    <label for="wordsOrderCheckbox" title="Order the words bellow by decreasing score">Order by score</label>
+                                    <input type="checkbox" id="wordsOrderCheckbox" class="checkbox">
+                                    
+                                    <label for="minCountInput" title="Minimum number of time this words appears in your Pixels">Minimum count</label>
+                                    <input type="number" id="minCountInput" class="input-nb" min="1" value="10">
+
+                                    <label for="excludeStopwordsCheckbox" title="Choose which words you want to exclude from the word list">Customise stopwords</label>
+                                    <button class="button" id="openStopwordsSettingsDialog">Stopwords</button>
+                                </div>
+
+                                <div class="dialog-buttons">
+                                    <button type="submit" class="button button-tertiary" id="saveWordsSettingsDialog">Save</button>
+                                </div>
+                            </div>
+                        </dialog>
+
+                        <dialog id="dialogStopwordsSettings" class="div-dialog-settings">
+                            <div class="dialog-settings">
+
+                                <h3>Stopwords settings</h3>
+                                
+                                <div class="dialog-settings-group">
+
+                                    <label for="stopwordsLanguageSelect" title="Which language do you want the stopwords to be in?">Stopwords language</label>
+                                    <select id="stopwordsLanguageSelect" class="select">
+                                        <option value="no">Don't use</option>
+                                        <option value="en">English</option>
+                                        <option value="fr">French</option>
+                                        <option value="es">Spanish</option>
+                                        <option value="ge">German</option>
+                                        <option value="it">Italian</option>
+                                    </select>
+
+                                    <label for="defaultStopwordsTextarea" title="Words that are excluded for this language, you can delete some">Default stopwords</label>
+                                    <textarea id="defaultStopwordsTextarea" class="textarea long" rows="4" placeholder="One word per line"></textarea>
+
+                                    <label for="customStopwordsTextarea" title="Choose personnal words you want to exclude">Custom stopwords</label>
+                                    <textarea id="customStopwordsTextarea" class="textarea" rows="4" placeholder="Enter one word per line"></textarea>
+                                </div>
+
+                                <div class="dialog-buttons">
+                                    <button type="submit" class="button button-tertiary" id="saveStopwordsSettingsDialog">Save</button>
+                                </div>
+                            </div>
+                        </dialog>
 
                         <div class="option-item">
                             <label for="maxWordsInput" title="Number of words to display">Number of words</label>
                             <input type="number" id="maxWordsInput" class="input-nb" min="1" value="20">
                         </div>
 
-                        <div class="option-item">
-                            <label for="minCountInput" title="Minimum number of time this words appears in your Pixels">Minimum count</label>
-                            <input type="number" id="minCountInput" class="input-nb" min="1" value="10">
-                        </div>
-
                         <div class="option-item">
                             <label for="minScoreSlider" title="Only count words appearing in a Pixel with a score above the defined threshold">Min score: <span id="minScoreValue">1</span></label>
                             <input type="range" id="minScoreSlider" class="range-slider" min="10" max="50" value="10">
@@ -208,11 +252,11 @@ <h2>📝 Most frequent words</h2>
                 </div>
 
                 <div class="chart-container" id="pixelGridExportContainer">
-                    <h2>🖼️ Export Pixel Grid</h2>
+                    <h2>🖼️ Export Pixels image</h2>
 
                     <div class="options grid-options">
                         <div class="option-item">
-                            <button class="button" id="openSettingsDialog">
+                            <button class="button open-settings" id="openImageSettingsDialog">
                                 <img src="assets/settings_icon.svg" alt="Settings" class="icon-settings">
                             </button>
                         </div>
@@ -236,7 +280,7 @@ <h2>🖼️ Export Pixel Grid</h2>
                             </select>
                         </div>
 
-                        <dialog id="dialogSettings">
+                        <dialog id="dialogSettings" class="div-dialog-settings">
                             <div class="dialog-settings">
 
                                 <h3>Image settings</h3>
@@ -298,7 +342,7 @@ <h3>Image settings</h3>
                 </div>
 
                 <div class="chart-container">
-                    <h2>📅 Search Pixel by Date</h2>
+                    <h2>📅 Search Pixels by date</h2>
 
                     <div class="options">
                         <div class="option-item">
@@ -323,8 +367,8 @@ <h2>📅 Search Pixel by Date</h2>
                 <img src="assets/pixels_memories_logo.png" alt="Pixels Memories">
             </a>
         </div>
-        <div class="version">Version: v1.2.2</div>
-        <div class="version">Last update: 2025-06-23</div>
+        <div class="version">Version: v1.2.3</div>
+        <div class="version">Last update: 2025-06-27</div>
     </footer>
 
     <!-- Charts.js -->
@@ -336,11 +380,11 @@ <h2>📅 Search Pixel by Date</h2>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/wordcloud2.js/1.1.2/wordcloud2.min.js"></script>
 
     <script src="scripts/utils.js"></script>
+    <script src="scripts/stopwords.js"></script>
     <script src="scripts/main.js"></script>
     <script src="scripts/card.js"></script>
     <script src="scripts/graphs.js"></script>
     <script src="scripts/statistics.js"></script>
-    <script src="scripts/stopwords.js"></script>
     <script src="scripts/png.js"></script>
     <script src="scripts/storage.js"></script>
 </body>

scripts/main.js

@@ -14,14 +14,13 @@ const rolling_slider_text_value = document.querySelector("#rollingValue");
 const tag_grid_charts = document.querySelector(".grid-charts");
 const show_average_checkbox = document.querySelector("#showAverageCheckbox");
 const show_years_checkbox = document.querySelector("#showYearsCheckbox");
+const nb_tags_inputs = document.querySelectorAll(".input-max-tag");
 const tag_frequency_checkbox = document.querySelector("#tagFrequencyCheckbox");
 
 const weekday_frequency_select = document.querySelector("#firstDayOfWeekSelect");
-
 const season_colors_checkbox = document.querySelector("#seasonColorsCheckbox");
 
 const word_freq_container = document.querySelector("#wordFrequency");
-const nb_tags_inputs = document.querySelectorAll(".input-max-tag");
 const words_percentage_checkbox = document.querySelector("#wordsPercentageCheckbox");
 const words_order_checkbox = document.querySelector("#wordsOrderCheckbox");
 const words_words_input = document.querySelector("#maxWordsInput");
@@ -30,6 +29,10 @@ const min_score_slider = document.querySelector("#minScoreSlider");
 const min_score_slider_text_value = document.querySelector("#minScoreValue");
 const words_search_input = document.querySelector("#searchInput");
 
+const words_dialog_settings = document.querySelector("#dialogWordsSettings");
+const btn_open_words_dialog_settings = document.querySelector("#openWordsSettingsDialog");
+const btn_save_words_dialog_settings = document.querySelector("#saveWordsSettingsDialog");
+
 const wordcloud_container = document.querySelector("#wordcloudContainer");
 const wordcloud_canvas = document.querySelector("#wordcloudCanvas");
 const wordcloud_size_input = document.querySelector("#wordcloudSize");
@@ -39,7 +42,7 @@ const btn_download_wordcloud = document.querySelector("#btnDownloadWordcloud");
 
 const DEV_MODE = false;
 const DEV_FILE_PATH = "../data/pixels.json"
-const SCROLL_TO = 50;
+const SCROLL_TO = 2000;
 const isMobile = window.innerWidth <= 800;
 let initial_data = [];
 let current_data = [];
@@ -203,7 +206,7 @@ async function handle_file_upload(file) {
         }
     }
     catch (error) {
-        console.error(`Error: ${error.message}`);
+        console.error(`Error in handle file upload: ${error.message}`);
     }
 }
 
@@ -233,6 +236,26 @@ async function auto_load_data(filePath) {
 }
 
 
+// Dialog words settings
+function open_words_dialog_settings() {
+    words_dialog_settings.showModal();
+    words_dialog_settings.addEventListener('click', handle_click_words_dialog);
+}
+
+
+function close_words_dialog_settings() {
+    words_dialog_settings.close();
+    words_dialog_settings.removeEventListener('click', handle_click_words_dialog);
+}
+
+
+function handle_click_words_dialog(e) {
+    if (e.target === words_dialog_settings) {
+        close_words_dialog_settings();
+    }
+}
+
+
 
 
 document.addEventListener("DOMContentLoaded", () => {
@@ -373,6 +396,14 @@ document.addEventListener("DOMContentLoaded", () => {
     });
 
     // Wordcloud
+    btn_open_words_dialog_settings.addEventListener("click", () => {
+        open_words_dialog_settings();
+    });
+
+    btn_save_words_dialog_settings.addEventListener("click", () => {
+        close_words_dialog_settings();
+    });
+
     wordcloud_size_input.addEventListener("input", (e) => {
         wordcloudSize = parseInt(e.target.value);
         update_wordcloud(nbMinCount);

scripts/png.js

@@ -1,5 +1,5 @@
 const dialog_settings = document.querySelector("#dialogSettings");
-const btn_open_dialog_settings = document.querySelector("#openSettingsDialog");
+const btn_open_dialog_settings = document.querySelector("#openImageSettingsDialog");
 const btn_reset_dialog_settings = document.querySelector("#resetSettingsDialog");
 const btn_cancel_dialog_settings = document.querySelector("#cancelSettingsDialog");
 const btn_save_dialog_settings = document.querySelector("#saveSettingsDialog");
@@ -242,13 +242,6 @@ function open_dialog_settings() {
 }
 
 
-function handle_click_dialog(e) {
-    if (e.target === dialog_settings) {
-        close_dialog_settings();
-    }
-};
-
-
 function close_dialog_settings() {
     set_image_settings(png_settings);
     dialog_settings.close();
@@ -264,6 +257,13 @@ function close_and_save_dialog_settings() {
 }
 
 
+function handle_click_dialog(e) {
+    if (e.target === dialog_settings) {
+        close_dialog_settings();
+    }
+}
+
+
 
 
 btn_open_dialog_settings.addEventListener("click", () => {

scripts/statistics.js

@@ -76,7 +76,7 @@ function calculate_and_display_stats(data) {
         ["Number of Pixels", `<p>${data.length}</p>`],
         ["Average score", `<p>${average(allScores).toFixed(2)}</p>`],
         ["Streaks", `<p>Best: ${streaks.bestStreak} | Latest: ${streaks.latestStreak}</p>`],
-        ["Score distribution", "<canvas id='scoresPieChart' class='pie-chart' width='100' height='100'></canvas>"],
+        ["Score distribution", "<canvas title='Update your colors in the \"Export Pixel image\" settings' id='scoresPieChart' class='pie-chart' width='100' height='100'></canvas>"],
     ];
 
     stats_container.innerHTML = stats.map(([title, value]) => `