Skip to content

Commit 18183d1

Browse files
LeogendraLeogendra
authored
Deploy v1.5.19
Develop v1.5.19
2 parents 1f10298 + f175b40 commit 18183d1

File tree

9 files changed

+211
-129
lines changed

9 files changed

+211
-129
lines changed

‎assets/palette_icon.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎index.html‎

Lines changed: 34 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ <h1>Pixels Visualiser</h1>
6767
<div class="div-pill-selector">
6868
<div class="pill-selector">
6969
<button class="pill" data-range="0">Custom</button>
70-
<button class="pill" data-range="7">Last week</button>
70+
<!-- <button class="pill" data-range="7">Last week</button> -->
7171
<button class="pill" data-range="30">Last month</button>
7272
<button class="pill" data-range="180">Last 6 months</button>
7373
<button class="pill" data-range="365">Last year</button>
@@ -91,9 +91,35 @@ <h1>Pixels Visualiser</h1>
9191
<div class="no-data-error">No data available for the selected range</div>
9292

9393
<div id="stats-content">
94-
<div class="stats-grid" id="statsContainer">
94+
<div id="paletteContainer" class="chart-container">
95+
<div class="options small title"><img src="assets/palette_icon.svg" alt="Palette" class="icon-settings"><span>Customise your palette</span></div>
96+
97+
<div id="paletteGrid" class="palette-grid">
98+
<div class="color-cell">
99+
<input type="color" id="color1" />
100+
</div>
101+
<div class="color-cell">
102+
<input type="color" id="color2" />
103+
</div>
104+
<div class="color-cell">
105+
<input type="color" id="color3" />
106+
</div>
107+
<div class="color-cell">
108+
<input type="color" id="color4" />
109+
</div>
110+
<div class="color-cell">
111+
<input type="color" id="color5" />
112+
</div>
113+
</div>
114+
115+
<div class="dialog-buttons">
116+
<button type="button" class="button button-secondary" id="resetPaletteSettings">Reset</button>
117+
<button type="submit" class="button button-tertiary" id="savePaletteSettings">Save</button>
118+
</div>
95119
</div>
96120

121+
<div class="stats-grid" id="statsContainer"></div>
122+
97123
<div class="chart-container">
98124
<h2>📈 Time evolution</h2>
99125
<div class="options">
@@ -121,6 +147,7 @@ <h2>📈 Time evolution</h2>
121147
<option value="mood">Mood</option>
122148
<option value="words">Number of words</option>
123149
<option value="tags">Number of tags</option>
150+
<option value="scores">Number of pixels</option>
124151
</select>
125152
</div>
126153
</div>
@@ -330,7 +357,7 @@ <h2>🖼️ Create Pixels image</h2>
330357
<h3>Image settings</h3>
331358

332359
<div class="dialog-settings-group">
333-
<label for="color1">Score 1</label>
360+
<!-- <label for="color1">Score 1</label>
334361
<input type="color" id="color1">
335362
336363
<label for="color2">Score 2</label>
@@ -343,7 +370,7 @@ <h3>Image settings</h3>
343370
<input type="color" id="color4">
344371
345372
<label for="color5">Score 5</label>
346-
<input type="color" id="color5">
373+
<input type="color" id="color5"> -->
347374

348375
<label for="colorEmpty">Background</label>
349376
<input type="color" id="colorEmpty">
@@ -380,9 +407,7 @@ <h3>Image settings</h3>
380407
</div>
381408

382409
<div class="dialog-buttons">
383-
<button type="button" class="button button-secondary" id="resetSettingsDialog">Reset</button>
384-
<button type="button" class="button" id="cancelSettingsDialog">Cancel</button>
385-
<button type="submit" class="button button-tertiary" id="saveSettingsDialog">Save</button>
410+
<button type="submit" class="button button-tertiary" id="saveDialogSettings">Save</button>
386411
</div>
387412
</div>
388413
</dialog>
@@ -483,8 +508,8 @@ <h2>📅 Search Pixels by date</h2>
483508
<img src="assets/pixels_memories_logo.png" alt="Pixels Memories">
484509
</a>
485510
</div>
486-
<div class="version">Version: v1.5.18</div>
487-
<div class="version">Last update: 2025-09-13</div>
511+
<div class="version">Version: v1.5.19</div>
512+
<div class="version">Last update: 2025-09-22</div>
488513
</footer>
489514

490515
<!-- Charts.js for graphs -->

‎scripts/card.js‎

Lines changed: 7 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -12,20 +12,13 @@ let calendar = null;
1212

1313

1414
async function load_colored_score_SVG(score) {
15-
if (!score || (typeof score !== "number") || (score < 1) || (score > 5)) {
16-
return document.createElement("span");
17-
}
18-
const path = `assets/pixels/score_${score}.svg`;
19-
const res = await fetch(path);
20-
const text = await res.text();
21-
const parser = new DOMParser();
22-
const doc = parser.parseFromString(text, "image/svg+xml");
23-
const svg = doc.querySelector("svg");
24-
25-
const color = png_settings.colors[score]
26-
27-
svg.querySelectorAll("[fill='currentColor']").forEach(el => el.setAttribute("fill", color));
28-
return svg;
15+
if (!Number.isInteger(score) || score < 1 || score > 5) return document.createElement("span");
16+
const res = await fetch(`assets/pixels/score_${score}.svg`);
17+
const text = await res.text();
18+
const doc = new DOMParser().parseFromString(text, "image/svg+xml");
19+
const svg = doc.querySelector("svg");
20+
svg.style.color = png_settings.colors[score];
21+
return svg;
2922
}
3023

3124

‎scripts/graphs.js‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -77,15 +77,15 @@ async function create_mood_chart() {
7777
}
7878
else if (moodTimeOption === "words") { // number of words
7979
rawScores = data.map(entry => {
80-
if (!entry || !entry.notes) { return null; }
80+
if (!entry || !entry.notes || (entry.scores.length === 0)) { return null; }
8181
return entry.notes.split(/\s+/).length;
8282
});
8383
minValue = maximum(rawScores);
8484
maxValue = minimum(rawScores);
8585
}
8686
else if (moodTimeOption === "tags") { // number of tags
8787
rawScores = data.map(entry => {
88-
if (!entry || !entry.tags) { return null; }
88+
if (!entry || !entry.tags || (entry.scores.length === 0)) { return null; }
8989
return entry.tags.reduce((count, tag) => {
9090
if (!Array.isArray(tag.entries)) return count;
9191
return count + tag.entries.length;
@@ -94,6 +94,14 @@ async function create_mood_chart() {
9494
minValue = maximum(rawScores);
9595
maxValue = minimum(rawScores);
9696
}
97+
else if (moodTimeOption === "scores") { // number of pixels
98+
rawScores = data.map(entry => {
99+
if (!entry || !entry.scores || (entry.scores.length === 0)) { return null; }
100+
return entry.scores.length;
101+
});
102+
minValue = maximum(rawScores);
103+
maxValue = minimum(rawScores);
104+
}
97105

98106
const annotations = {};
99107
if (moodShowAverage) {

‎scripts/main.js‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,8 @@ const div_date_range_filter = document.querySelector("#dateRangeFilter");
1111
const start_date_filter = document.querySelector("#startDateFilterInput");
1212
const end_date_filter = document.querySelector("#endDateFilterInput");
1313

14+
const palette_container = document.querySelector("#paletteContainer");
15+
const palette_grid = document.querySelector("#paletteGrid");
1416
const stats_container = document.querySelector("#statsContainer");
1517
const rolling_slider = document.querySelector("#rollingSlider");
1618
const rolling_slider_text_value = document.querySelector("#rollingValue");
@@ -53,7 +55,7 @@ const btn_download_wordcloud = document.querySelector("#btnDownloadWordcloud");
5355

5456
const DEV_MODE = false;
5557
const DEV_FILE_PATH = "../data/pixels.json"
56-
const SCROLL_TO = 3500;
58+
const SCROLL_TO = 100;
5759
const isMobile = window.innerWidth <= 800;
5860
let initial_data = [];
5961
let current_data = [];
@@ -230,7 +232,7 @@ async function filter_pixels(numberOfDays) {
230232
else {
231233
endDate = new Date(lastPixelDate);
232234
startDate = new Date(lastPixelDate);
233-
startDate.setDate(startDate.getDate() - numberOfDays);
235+
startDate.setDate(startDate.getDate() - numberOfDays + 1);
234236
}
235237

236238

@@ -276,6 +278,7 @@ async function handle_file_upload(file) {
276278
}
277279

278280
else {
281+
data.sort((a, b) => new Date(a.date) - new Date(b.date));
279282
initial_data = data;
280283
current_data = initial_data;
281284

‎scripts/png.js‎

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@ const div_pixel_export_container = document.querySelector("#pixelGridExportConta
22

33
const dialog_settings = document.querySelector("#dialogSettings");
44
const btn_open_dialog_settings = document.querySelector("#openImageSettingsDialog");
5-
const btn_reset_dialog_settings = document.querySelector("#resetSettingsDialog");
6-
const btn_cancel_dialog_settings = document.querySelector("#cancelSettingsDialog");
7-
const btn_save_dialog_settings = document.querySelector("#saveSettingsDialog");
5+
const btn_reset_palette_settings = document.querySelector("#resetPaletteSettings");
6+
const btn_save_palette_settings = document.querySelector("#savePaletteSettings");
7+
const btn_save_dialog_settings = document.querySelector("#saveDialogSettings");
88
const btn_generate_png = document.querySelector("#btnGeneratePixelGrid");
99
const btn_download_png = document.querySelector("#btnDownloadPixelGrid");
1010
const div_result_png = document.querySelector("#pixelGridResults");
@@ -75,6 +75,9 @@ function set_image_settings(settings) {
7575
setting_color3.value = settings.colors[3];
7676
setting_color4.value = settings.colors[4];
7777
setting_color5.value = settings.colors[5];
78+
for (let i = 1; i <= 5; i++) {
79+
update_svg_color(i, settings.colors[i]);
80+
}
7881
setting_colorEmpty.value = settings.colors.empty;
7982
setting_squareSize.value = settings.squareSize.toString();
8083
setting_borderSize.value = settings.borderSize.toString();
@@ -634,6 +637,7 @@ function close_dialog_settings(save = false) {
634637
dialog_settings.removeEventListener('click', handle_click_dialog);
635638
if (save) { png_settings = get_image_settings(); }
636639
set_image_settings(png_settings);
640+
create_scores_pie_chart();
637641
generate_pixels_PNG();
638642
update_wordcloud();
639643
setup_calendar_frame();
@@ -655,12 +659,13 @@ btn_open_dialog_settings.addEventListener("click", () => {
655659
open_dialog_settings();
656660
});
657661

658-
btn_reset_dialog_settings.addEventListener("click", () => {
659-
set_image_settings(png_default_settings);
662+
btn_reset_palette_settings.addEventListener("click", () => {
663+
png_settings.colors = { ...png_default_settings.colors };
664+
close_dialog_settings();
660665
});
661666

662-
btn_cancel_dialog_settings.addEventListener("click", () => {
663-
close_dialog_settings();
667+
btn_save_palette_settings.addEventListener("click", () => {
668+
close_dialog_settings(save=true);
664669
});
665670

666671
btn_save_dialog_settings.addEventListener("click", () => {
@@ -703,6 +708,6 @@ div_pixel_export_container.addEventListener("keydown", function (e) {
703708
dialog_settings.addEventListener("keydown", function (e) {
704709
if (e.key === "Enter") {
705710
e.preventDefault();
706-
btn_save_dialog_settings.click();
711+
btn_save_palette_settings.click();
707712
}
708713
});

0 commit comments

Comments
 (0)