--- a +++ b/src/krang-dataset-loaders.js @@ -0,0 +1,162 @@ +//Branch improve-map-script, TODO: +//Separate loader scripts from map tools scripts +//Remake tools on cuts viewer to match tools in deepzoom-viewer +//Think about storing marker data outside the scripts (in JSON files individual for every image) + +//thumbnails page +const thumbnailsListLink = "https://storage.yandexcloud.net/krang-dataset?list-type=2&prefix=thumbnails/" +const thumbnailsPattern = /[0-9a-f]{12}-preview.jpg/ + +async function insertThumbnails() { + try { + const filenames = await createList(thumbnailsListLink, thumbnailsPattern); + const cutsList = await createList(cutsListLink, cutsPattern); + + let cutsIcon = (data) => { + let resultText = data ? "есть фрагменты" : "нет фрагментов"; + resultStyle = data ? 'green' : 'lightcoral'; + result = { + resultText, + resultStyle + } + return result + } + const cardTemplate = data => ` + <div> + <a href='deepzoom.html#${data.id}' class='preview-card' style='background-image: url(${data.url})'> + <p class='slide-id'>${data.id}</p> + </a> + <p class='preview-info' style="color: ${cutsIcon(data.hasCuts).resultStyle};">${cutsIcon(data.hasCuts).resultText}</p> + </div>`; + + $(document).ready(() => { + const overviewRoot = $("#overview") + list.forEach(data => overviewRoot.append(cardTemplate(data))); + ; + }); + + let prefix = "https://krang-dataset.website.yandexcloud.net/" + const list = filenames.map(filename => { + return { + url: prefix + filename, + id: filename.slice(11, 23), + hasCuts: false + } + }) + compareLists(list, cutsList) + } + catch (e) { + document.body.insertAdjacentHTML('beforeend', `<h2 style="color: darkred">Не могу загрузить список слайдов!</h2>`) + console.error("Can't load list of files: ", e); + } +} +function compareLists(to, from) { + for (cut of from) { + cutId = cut.slice(0, 12) + for (iter of to) { + if (cutId == iter.id){iter.hasCuts = true} + } +} +} + +//cuts page +const cutsListLink = "https://storage.yandexcloud.net/krang-dataset?list-type=2" +const cutsPattern = /^[0-9a-f]{12}-cut__.*/ + +async function insertCuts() { + try { + const filenames = await createList(cutsListLink, cutsPattern); + listTarget = document.getElementById("cuts_list"); + filenames.forEach((filename) => { + const fragmentId = filename.slice(0,53); + listTarget.insertAdjacentHTML('beforeend', `<li><a href="/${filename}">${fragmentId}.tiff</a> (<a href="cut.html#${fragmentId}">просмотреть</a>)</li>`) + }); + } catch (e) { + document.body.insertAdjacentHTML('beforeend', `<h2 style="color: darkred">Не могу загрузить список фрагментов!</h2>`) + console.error("Can't load list of files: ", e); + } +} +//general +function traverseXmlDoc(rootTag, maxDeepness, tagCallback, path = "") { + if(!rootTag.tagName) return; + var myPath = path + "." + rootTag.tagName; + tagCallback(myPath, rootTag); + if(maxDeepness > 0) { + rootTag.childNodes.forEach((child) => {traverseXmlDoc(child, maxDeepness-1, tagCallback, myPath)}) + } +} + +async function createList(link, pattern){ + try { + let response = await fetch(link) + let text = await response.text() + console.log("response", response) + let parser = new DOMParser() + let doc = await parser.parseFromString(text, "text/xml") + const filenames = [] + const previewPattern = pattern + traverseXmlDoc(doc.documentElement, 5, (path, tag)=>{ + if(path == ".ListBucketResult.Contents.Key"){ + //console.log("filename", tag.textContent) + if(previewPattern.test(tag.textContent)){ + filenames.push(tag.textContent); + } + } + }); + //console.log("filenames", filenames); + return filenames + } catch(e) { + console.error("Error while loading list of previews", e) + return null; + } +} + +//deepzoom page +// Init Leaflet +//bounds = {topLeft, bottomRight} +//var bounds = [[0, 0], [-1500, 1000]]; +var map = L.map('map', { + crs: L.CRS.Simple, + //maxBounds: bounds +}); +L.tileLayer('http://krang-dataset.website.yandexcloud.net/deepzoom/{id}/{z}/{y}/{x}.jpg', { + id: createSlideId(), + minZoom: 0, + maxZoom: 8, + minNativeZoom: 0, + maxNativeZoom: 7, + tileSize: 2048, + noWrap: true, + attributionControl: false, + //bounds: bounds +}).addTo(map); + +map.setView([0, 0], 0) + +function createSlideId() { + const slideId = document.URL.slice(-12); + console.log('slideID: ' + slideId) + return slideId; +} +function openDeepzoom() { + let slideId = createSlideId(); + $(document).ready(() => { + $('.slideId').append(slideId) + $('#downloadslide').append(`<a href="https://krang-dataset.website.yandexcloud.net/${slideId}.tiff">Скачать слайд ${slideId}.tiff</a>`); + }); +} +async function insertCutsDeepzoom() { + try { + let slideId = createSlideId() + let cutsPatternDeepzoom = new RegExp(`${slideId}-cut.*`) + const filenames = await createList(cutsListLink, cutsPatternDeepzoom); + let listTarget = document.getElementById("display-cuts"); + filenames.forEach((filename) => { + listTarget.insertAdjacentHTML('beforeend', `<p>Просмотреть фрагмент: <a href="/krang-dataset-viewer/cut.html#${filename.slice(0, -5)}">${filename.slice(0, -5)}</a></p>`) + }); + if (filenames.length == 0){listTarget.remove()} + } + catch (e) { + console.error("Can't load list of files: ", e); + } +} \ No newline at end of file