nicolo/caprigis
1
0
Fork 0
Code Issues 3 Pull Requests Packages Projects Releases Wiki Activity

Support videos

Browse Source
This commit is contained in:
Nicolò P 2024-11-30 18:37:01 +01:00
parent c895894b0d
commit 1393b779ff
8 changed files with 92 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -7,6 +7,7 @@
*.zip
*.pdf
*.tif
*.mp4
vendor/
progetto_QGIS/
conf.json

46
webgis/js/components/SiteMedia.js Normal file
View File

@ -0,0 +1,46 @@
/**
* Component to render data for site media (photos and videos)
* @class SiteMedia
*/
export class SiteMedia {
/**
* @param {object} data
*/
set siteData(data) {
this._siteData = data;
}
renderPhotos() {
return `
<div class="content has-text-centered mb-5 pb-5">
<p class="is-size-5 mt-3">Fotografie</p>
<div style="max-width: 70%; margin: 0 auto">
<p class="is-size-6">Cliccare sull'immagine per aprire la gallery</p>
<figure class="is-relative is-clickable has-text-centered" id="gallery-2">
<img src="img/${this._siteData.filename}" width="300"/>
<div class="icon overlay is-flex is-justify-content-center is-align-items-center">
<i class="is-flex fa fa-2x fa-play-circle"></i>
</div>
</figure>
</div>
</div>
`;
}
renderVideos() {
return `
<div class="content has-text-centered mb-5 pb-5">
<p class="is-size-5 mt-3">Video</p>
<div style="max-width: 70%; margin: 0 auto">
<p class="is-size-6 has-text-centered">Gallery video</p>
<figure class="is-relative is-clickable has-text-centered" id="gallery-video">
<img src="video/${this._siteData.filename.replace('mp4', 'png')}" width="300"/>
<div class="icon overlay is-flex is-justify-content-center is-align-items-center">
<i class="is-flex fa fa-2x fa-play-circle"></i>
</div>
</figure>
</div>
</div>
`;
}
}

31
webgis/js/components/SitePhotos.js
View File

@ -1,31 +0,0 @@
/**
* Component to render data for site photos
* @class SitePhotos
*/
export class SitePhotos {
/**
* @param {object} data
*/
set siteData(data) {
this._siteData = data;
}
render() {
let content = `<div class="content has-text-centered">
<p class="is-size-5 mt-3">Fotografie</p>`;
content += `
<div style="max-width: 70%; margin: 0 auto">
<p class="is-size-6 has-text-centered">Cliccare sull'immagine per aprire la gallery</p>
<figure class="is-relative is-clickable has-text-centered" id="gallery-2">
<img src="img/${this._siteData.filename}" width="300"/>
<div class="icon overlay is-flex is-justify-content-center is-align-items-center">
<i class="is-flex fa fa-2x fa-play-circle"></i>
</div>
</figure>
</div>
</div>
`;
return content;
}
}

10
webgis/js/components/SiteSurveys.js
View File

@ -11,11 +11,11 @@ export class SiteSurveys {
}
render() {
let content = `<div class="has-text-centered has-bottom-border mb-5 pb-5">
<p class="is-size-5 mt-3">Rilievi CNR-ISPC, elaborazioni grafiche</p>`;
content += `
return `
<div class="has-text-centered mb-5 pb-5">
<p class="is-size-5 mt-3">Rilievi CNR-ISPC, elaborazioni grafiche</p>
<div style="max-width: 70%; margin: 0 auto">
<p class="is-size-6 has-text-centered">Cliccare sull'immagine per aprire la gallery</p>
<p class="is-size-6">Cliccare sull'immagine per aprire la gallery</p>
<figure class="is-relative has-text-centered is-clickable" id="gallery-1">
<img src="img/${this._siteData.filename}" width="300"/>
<div class="icon overlay is-flex is-justify-content-center is-align-items-center">
@ -25,7 +25,5 @@ export class SiteSurveys {
</div>
</div>
`;
return content;
}
}

5
webgis/js/gis.js
View File

@ -144,6 +144,8 @@ GIS.initMap = async function (mapId, zoomLevel = this.INIT_ZOOM) {
'Vincoli archeologici' : layerVincoli,
'Vincoli paesistici' : layerPaesistici,
};
// TEMP!! Remove point for Lo Pozzo...
sitesGroup.removeLayer(sitesGroup.customGetLayer('lopozzo'));
markersGroup.addTo(map);
sitesGroup.addTo(map);
@ -152,9 +154,6 @@ GIS.initMap = async function (mapId, zoomLevel = this.INIT_ZOOM) {
L.control.layers(baseMap, archeo).addTo(map);
// TEMP!! Remove point for Lo Pozzo...
map.removeLayer(sitesGroup.customGetLayer('lopozzo'));
return map;
}
/**

40
webgis/js/ui.js
View File

@ -4,7 +4,7 @@ import Spotlight from './vendor/spotlight.js/src/js/spotlight.js';
import { SiteSheet } from './components/SiteSheet.js';
import { SiteDocuments } from './components/SiteDocuments.js';
import { SiteSurveys } from './components/SiteSurveys.js';
import { SitePhotos } from './components/SitePhotos.js';
import { SiteMedia } from './components/SiteMedia.js';
import { NotConservedSheet } from './components/NotConservedSheet.js';
import GIS from './gis.js';
import { Finding } from './components/Finding.js';
@ -116,30 +116,42 @@ UI.openSiteModal = async function (data, selector) {
}
let images = modal.querySelector('#photos');
let docs = modal.querySelector('#documents');
if (data.documents?.length) {
let siteDocs = new SiteDocuments;
siteDocs.siteData = data;
modal.querySelector('#documents').innerHTML = siteDocs.render();
docs.innerHTML = siteDocs.render();
} else {
docs.innerHTML = '<p class="has-text-centered">Nessun documento disponibile</p>'
}
let surveys = data.images.filter(i => i.type === 'Survey');
let photos = data.images.filter(i => i.type === 'Photo');
let videos = data.images.filter(i => i.type === 'Video');
if (surveys.length === 0 && photos.length === 0 && videos.length === 0) {
images.innerHTML = '<p class="has-text-centered">Nessuna risorsa visuale disponibile</p>';
}
if (images.innerHTML.length === 0) {
let siteSurveys = new SiteSurveys;
siteSurveys.siteData = surveys[0] ?? undefined;
images.innerHTML += surveys[0] ? siteSurveys.render() : '';
let sitePhotos = new SitePhotos;
sitePhotos.siteData = photos[0] ?? undefined;
images.innerHTML += photos[0] ? sitePhotos.render() : '';
let siteMedia = new SiteMedia;
siteMedia.siteData = photos[0] ?? undefined;
images.innerHTML += photos[0] ? siteMedia.renderPhotos() : '';
siteMedia.siteData = videos[0] ?? undefined;
images.innerHTML += videos[0] ? siteMedia.renderVideos() : '';
}
modal.classList.add('is-active');
this.imageGallery('gallery-1', surveys);
this.imageGallery('gallery-2', photos);
this.imageGallery('gallery-video', videos, true);
}
/**
* @param {object} data The data retrieved from the DB to display as modal content
@ -220,17 +232,27 @@ UI.sitesMenu = function (menuListSel, map, sites) {
* Open Spotlight gallery
* @param {string} galleryId The id of the trigger element
* @param {Array<Object>} images Array of image objects from DB
* @param {boolean} video Is this a video gallery?
*/
UI.imageGallery = function (galleryId, images) {
UI.imageGallery = function (galleryId, images, video = false) {
const element = document.querySelector(`#${galleryId}`);
if (element) {
let gallery = [];
for (let img of images) {
gallery.push({
src: `img/${img.filename}`,
let mediaObj = {
description: `${img.caption} (${img.author})`
});
};
if (video) {
mediaObj.media = 'video';
mediaObj["src-mp4"] = `video/${img.filename}`;
mediaObj.poster = `video/${img.filename.replace('mp4', 'png')}`;
} else {
mediaObj.src = `img/${img.filename}`;
}
gallery.push(mediaObj);
}
document.querySelector(`#${galleryId}`).addEventListener('click', () => {

0
webgis/video/.keep Normal file
View File

BIN
webgis/video/Filmato_DAMECUTA_EMICICLO.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 330 KiB