Skip to content

Commit 303ea5d

Browse files
alexpinelalexpinel
committed
Video Photosphere
1 parent b3bd63d commit 303ea5d

File tree

2 files changed

+161
-66
lines changed

2 files changed

+161
-66
lines changed

‎src/index.js‎

Lines changed: 20 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ const createWindow = () => {
2828

2929

3030
let videoUrls = [];
31+
let apiUrls = []
3132
let dimmingDetailsUrls = [];
3233
let currentRowIndex = 0;
3334
let csvData = [];
@@ -65,35 +66,37 @@ const loadAndProcessCSV = async () => {
6566
const formattedDate = convertDatePicFormat(cmeDate);
6667
const formattedVidDate = convertDateVidFormat(cmeDate);
6768
const videoFileName = `${formattedVidDate}.01.01.mov`;
68-
69+
6970
// Assume the videos are stored in the same directory as the CSV file
7071
const videoFilePath = path.join(__dirname, '..', 'SHARPS', videoFileName);
71-
72-
const apiUrl = `https://helioviewer-api.ias.u-psud.fr/v2/takeScreenshot/?imageScale=2.4204409&layers=[SDO,AIA,AIA,335,1,100]&events=&eventLabels=true&scale=true&scaleType=earth&scaleX=0&scaleY=0&date=${formattedDate}&x1=-1000&x2=1000&y1=-1000&y2=1000&display=true&watermark=true&events=[CH,all,1]`;
73-
74-
// Add dimming_id and generate dimming details URL
72+
73+
//const apiUrl = `https://helioviewer-api.ias.u-psud.fr/v2/takeScreenshot/?imageScale=2.4204409&layers=[SDO,AIA,AIA,335,1,100]&events=&eventLabels=true&scale=true&scaleType=earth&scaleX=0&scaleY=0&date=${formattedDate}&x1=-1000&x2=1000&y1=-1000&y2=1000&display=true&watermark=true&events=[CH,all,1]`;
74+
75+
7576
const dimmingId = parseFloat(row.dimming_id).toString(); // Remove trailing zeros
77+
const apiUrl = `https://www.sidc.be/solardemon/science/dimmings_details.php?science=1&dimming_id=${dimmingId}&delay=80&prefix=raw_derotated&small=1&aid=1&graph=1`;
78+
// Add dimming_id and generate dimming details URL
7679
const dimmingDetailsUrl = `https://www.sidc.be/solardemon/science/dimmings_details.php?science=1&dimming_id=${dimmingId}&delay=80&prefix=dimming_mask_&small=1&aid=0&graph=1`;
77-
78-
data.push({ cmeId, cmeDate, cmePa, cme_width, harpnum, LONDTMIN, LONDTMAX, LATDTMIN, LATDTMAX, flare_id, dimming_id, verification_score, videoFilePath, apiUrl, dimmingDetailsUrl });
80+
81+
data.push({ cmeId, cmeDate, cmePa, cme_width, harpnum, LONDTMIN, LONDTMAX, LATDTMIN, LATDTMAX, flare_id, dimming_id, verification_score, videoFilePath, apiUrl, dimmingDetailsUrl });
7982
})
8083
.on('end', () => {
8184
csvData = data;
82-
imageUrls = data.map((item) => item.apiUrl);
85+
apiUrls = data.map((item) => item.apiUrl);
8386
videoUrls = data.map((item) => item.videoFilePath);
8487
dimmingDetailsUrls = data.map((item) => item.dimmingDetailsUrl);
8588
});
86-
87-
ipcMain.on('load-next-image', loadNextImage);
88-
ipcMain.on('load-previous-image', loadPreviousImage);
89-
ipcMain.on('load-custom-image', loadCustomImage);
9089

91-
loadNextImage();
90+
ipcMain.on('load-next-image', loadNextImage);
91+
ipcMain.on('load-previous-image', loadPreviousImage);
92+
ipcMain.on('load-custom-image', loadCustomImage);
93+
94+
loadNextImage();
9295

9396
};
9497

9598
const loadNextImage = () => {
96-
if (currentImageIndex < imageUrls.length) {
99+
if (currentImageIndex < apiUrls.length) {
97100
loadAndSendImage(currentImageIndex);
98101
currentImageIndex++;
99102
} else {
@@ -112,7 +115,7 @@ const loadPreviousImage = () => {
112115
};
113116

114117
const loadCustomImage = (event, customIndex) => {
115-
if (customIndex >= 0 && customIndex < imageUrls.length) {
118+
if (customIndex >= 0 && customIndex < apiUrls.length) {
116119
currentImageIndex = customIndex;
117120
loadAndSendImage(currentImageIndex);
118121
} else {
@@ -121,12 +124,12 @@ const loadCustomImage = (event, customIndex) => {
121124
};
122125

123126
const loadAndSendImage = (index) => {
124-
const imageUrl = imageUrls[index];
127+
const apiUrl = apiUrls[index];
125128
const videoUrl = videoUrls[index];
126129
const dimmingDetailsUrl = dimmingDetailsUrls[index];
127130
const csvRowData = csvData[index];
128131

129-
mainWindow.webContents.send('image-loaded', { imageUrl, videoUrl, dimmingDetailsUrl, csvRowData });
132+
mainWindow.webContents.send('image-loaded', { apiUrl, videoUrl, dimmingDetailsUrl, csvRowData });
130133
};
131134

132135

‎src/render.js‎

Lines changed: 141 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -17,13 +17,14 @@ document.getElementById('goToCustomImage').addEventListener('click', () => {
1717

1818

1919
window.onload = () => {
20-
ipcRenderer.on('image-loaded', (event, { imageUrl, videoUrl, dimmingDetailsUrl }) => {
21-
render(imageUrl);
20+
ipcRenderer.on('image-loaded', (event, { apiUrl, videoUrl, dimmingDetailsUrl }) => {
21+
loadlinkDetails(apiUrl, '#moveJPEG');
2222
playVideo(videoUrl);
2323
loadDimmingDetails(dimmingDetailsUrl, '#moveJPEG');
2424
});
2525
};
2626

27+
/*
2728
function render(imageUrl) {
2829
const resultImage = document.getElementById('resultImage');
2930
@@ -33,6 +34,7 @@ function render(imageUrl) {
3334
3435
resultImage.src = imageUrl;
3536
}
37+
*/
3638

3739
function playVideo(videoUrl) {
3840
// Prepend 'file://' to the local file path
@@ -55,7 +57,97 @@ function playVideo(videoUrl) {
5557
}
5658

5759

60+
let intervalId_1; // Variable to store the interval ID
5861

62+
function loadlinkDetails(apiUrl) {
63+
// Fetch HTML content from the website
64+
fetch(apiUrl)
65+
.then(response => response.text())
66+
.then(html => {
67+
// Extract image information from the JavaScript code
68+
const regex = /my_images\[\d+\]\s*=\s*'([^']+)'/g;
69+
const matches = html.matchAll(regex);
70+
71+
const imageUrls_1 = [];
72+
for (const match of matches) {
73+
// Construct complete URLs using the base URL
74+
const baseUrl = 'https://www.sidc.be/solardemon/science/';
75+
const completeUrl = new URL(match[1], baseUrl);
76+
imageUrls_1.push(completeUrl.href);
77+
}
78+
79+
if (imageUrls_1.length > 0) {
80+
// Display the image URLs (replace this with your own logic)
81+
console.log('Image URLs 1:', imageUrls_1);
82+
83+
// Clear existing interval and display the first image
84+
resetImageSequence_1(imageUrls_1);
85+
} else {
86+
console.error('No image URLs found in the website content.');
87+
}
88+
})
89+
.catch(error => console.error('Error loading website content:', error));
90+
}
91+
92+
function resetImageSequence_1(imageUrls_1) {
93+
clearInterval(intervalId_1); // Clear existing interval
94+
95+
let currentIndex = 0;
96+
97+
// Display the first image
98+
displayImage_1(imageUrls_1[currentIndex]);
99+
100+
// Set interval to change the displayed image
101+
intervalId_1 = setInterval(() => {
102+
currentIndex = (currentIndex + 1) % imageUrls_1.length;
103+
displayImage_1(imageUrls_1[currentIndex]);
104+
}, 100); // Change the interval time (in milliseconds) as needed
105+
}
106+
107+
function displayImage_1(imageUrl_1) {
108+
// Replace this with your logic to display the image
109+
console.log('Displaying image:', imageUrl_1);
110+
// Your display logic here
111+
}
112+
113+
// Event listeners for the buttons
114+
document.getElementById('previousImage').addEventListener('click', () => {
115+
clearInterval(intervalId_1); // Clear existing interval
116+
// Your logic for going to the previous image here
117+
});
118+
119+
document.getElementById('nextImage').addEventListener('click', () => {
120+
clearInterval(intervalId_1); // Clear existing interval
121+
// Your logic for going to the next image here
122+
});
123+
124+
document.getElementById('goToCustomImage').addEventListener('click', () => {
125+
clearInterval(intervalId_1); // Clear existing interval
126+
// Your logic for going to a custom image based on the input value here
127+
});
128+
129+
130+
function displayImage_1(imageUrl_1) {
131+
// Construct the absolute URL using the base URL of the website
132+
const baseURL_1 = new URL(imageUrl_1).origin;
133+
const absoluteURL_1 = new URL(imageUrl_1, baseURL_1).toString();
134+
135+
// Find the container element where you want to display the image
136+
const resultImage = document.getElementById('resultImage');
137+
138+
// Check if the container element is found
139+
if (resultImage) {
140+
141+
142+
resultImage.width = 600; // Replace with your preferred width
143+
resultImage.height = 600; // Replace with your preferred height
144+
145+
// Set the src attribute to trigger the image loading
146+
resultImage.src = absoluteURL_1;
147+
} else {
148+
console.error('Image container not found.');
149+
}
150+
}
59151

60152
// Your existing code...
61153

@@ -147,7 +239,7 @@ function displayImage(imageUrl) {
147239

148240
imgElement.width = 600; // Replace with your preferred width
149241
imgElement.height = 600; // Replace with your preferred height
150-
242+
151243
// Set the src attribute to trigger the image loading
152244
imgElement.src = absoluteURL;
153245
} else {
@@ -166,7 +258,7 @@ ipcRenderer.on('image-loaded', (event, data) => {
166258
function updateCsvTable(csvRowData) {
167259
console.log('Updating table with data:', csvRowData);
168260

169-
const includedProperties = [ 'cmeId', 'cmeDate', 'cmePa', 'cme_width', 'harpnum', 'LONDTMIN', 'LONDTMAX', 'LATDTMIN', 'LATDTMAX', 'flare_id', 'dimming_id', 'verification_score']; // Add properties to include
261+
const includedProperties = ['cmeId', 'cmeDate', 'cmePa', 'cme_width', 'harpnum', 'LONDTMIN', 'LONDTMAX', 'LATDTMIN', 'LATDTMAX', 'flare_id', 'dimming_id', 'verification_score']; // Add properties to include
170262

171263
const tbody = csvDataTable.querySelector('tbody');
172264
const row = document.createElement('tr');
@@ -184,14 +276,14 @@ function updateCsvTable(csvRowData) {
184276
});
185277
}
186278

187-
Object.keys(csvRowData).forEach((key) => {
188-
if (includedProperties.includes(key)) {
189-
const cell = document.createElement('td');
190-
const cellContent = csvRowData[key] !== undefined ? csvRowData[key].toString() : '';
191-
cell.innerHTML = cellContent;
192-
row.appendChild(cell);
193-
}
194-
});
279+
Object.keys(csvRowData).forEach((key) => {
280+
if (includedProperties.includes(key)) {
281+
const cell = document.createElement('td');
282+
const cellContent = csvRowData[key] !== undefined ? csvRowData[key].toString() : '';
283+
cell.innerHTML = cellContent;
284+
row.appendChild(cell);
285+
}
286+
});
195287

196288
// Clear existing rows and append the new row
197289
tbody.innerHTML = '';
@@ -206,55 +298,55 @@ let imageContainer;
206298
let draggableContainers = [];
207299

208300
document.addEventListener('DOMContentLoaded', () => {
209-
const toggleButton = document.getElementById('toggleButton');
210-
imageContainer = document.getElementById('imageContainer');
211-
212-
for (let i = 1; i <= 2; i++) {
213-
const draggableContainer = document.getElementById(`draggableContainer${i}`);
214-
draggableContainers.push(draggableContainer);
215-
216-
interact(draggableContainer)
217-
.draggable({
218-
onmove: (event) => dragMoveListener(event, i),
219-
})
220-
.resizable({
221-
edges: { left: true, right: true, bottom: true, top: true },
222-
onmove: (event) => resizeMoveListener(event, i),
223-
});
224-
}
301+
const toggleButton = document.getElementById('toggleButton');
302+
imageContainer = document.getElementById('imageContainer');
303+
304+
for (let i = 1; i <= 2; i++) {
305+
const draggableContainer = document.getElementById(`draggableContainer${i}`);
306+
draggableContainers.push(draggableContainer);
307+
308+
interact(draggableContainer)
309+
.draggable({
310+
onmove: (event) => dragMoveListener(event, i),
311+
})
312+
.resizable({
313+
edges: { left: true, right: true, bottom: true, top: true },
314+
onmove: (event) => resizeMoveListener(event, i),
315+
});
316+
}
225317

226-
toggleButton.addEventListener('click', toggleImage);
318+
toggleButton.addEventListener('click', toggleImage);
227319

228-
document.addEventListener('keydown', (event) => {
229-
if (event.key === 'Escape') {
230-
toggleImage();
231-
}
232-
});
320+
document.addEventListener('keydown', (event) => {
321+
if (event.key === 'Escape') {
322+
toggleImage();
323+
}
324+
});
233325
});
234326

235327
function toggleImage() {
236-
isImageVisible = !isImageVisible;
237-
imageContainer.classList.toggle('hidden', !isImageVisible);
328+
isImageVisible = !isImageVisible;
329+
imageContainer.classList.toggle('hidden', !isImageVisible);
238330
}
239331

240332
function dragMoveListener(event, index) {
241-
const target = event.target;
242-
const x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx;
243-
const y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
333+
const target = event.target;
334+
const x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx;
335+
const y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
244336

245-
target.style.transform = 'translate(' + x + 'px, ' + y + 'px)';
246-
target.setAttribute('data-x', x);
247-
target.setAttribute('data-y', y);
337+
target.style.transform = 'translate(' + x + 'px, ' + y + 'px)';
338+
target.setAttribute('data-x', x);
339+
target.setAttribute('data-y', y);
248340
}
249341

250342
function resizeMoveListener(event, index) {
251-
const target = event.target;
252-
const x = (parseFloat(target.getAttribute('data-x')) || 0);
253-
const y = (parseFloat(target.getAttribute('data-y')) || 0);
343+
const target = event.target;
344+
const x = (parseFloat(target.getAttribute('data-x')) || 0);
345+
const y = (parseFloat(target.getAttribute('data-y')) || 0);
254346

255-
target.style.width = event.rect.width + 'px';
256-
target.style.height = event.rect.height + 'px';
347+
target.style.width = event.rect.width + 'px';
348+
target.style.height = event.rect.height + 'px';
257349

258-
target.setAttribute('data-x', x);
259-
target.setAttribute('data-y', y);
350+
target.setAttribute('data-x', x);
351+
target.setAttribute('data-y', y);
260352
}

0 commit comments

Comments
 (0)