2c:null 2d:["$","title",null,{"children":"New_TMA-Dearraying | Aaron Ge | Observable"}] 32:T1683,findcentriod_updated = { let minArea = 28; //const scale_factor = 20; //let w = Math.min(width, img.width); let w = img.naturalWidth / scale_factor; //let h = ~~((img.height * w) / img.width); let h = img.naturalHeight / scale_factor; let canvas = DOM.canvas(w, h, 1); let ctx = canvas.getContext("2d"); ctx.drawImage(img, 0, 0, w, h); let imgData = ctx.getImageData(0, 0, w, h); let maskCanvas = DOM.canvas(w, h, 1); let maskCtx = maskCanvas.getContext("2d"); let maskPixelData = maskCtx.createImageData(imgData); let x = 0, y = 0; let newMaskPixelData = null; newMaskPixelData = FillMask(imgData, x, y, distThreshold); maskPixelData = newMaskPixelData; //console.log(maskPixelData) //debugger; //ctx.clearRect(0,0,w,h) // erases the pixels in a rectangular area by setting them to transparent black. maskCtx.putImageData(maskPixelData, 0, 0); //paints data from the given ImageData object onto the canvas. If a dirty rectangle is provided, only the pixels from that rectangle are painted. if (drawSettings[0]) { ctx.putImageData(imgData, 0, 0); ctx.globalCompositeOperation = "destination-in"; //The existing canvas content is kept where both the new shape and existing canvas content overlap. Everything else is made transparent. ctx.drawImage(maskCanvas, 0, 0); //Draw an image onto the canvas. } let connected = getCirculations(maskPixelData); ctx.globalCompositeOperation = "source-over"; //This is the default setting and draws new shapes on top of the existing canvas content. ctx.strokeStyle = "red"; let curves = []; for (let comp of connected.components) { if (comp == undefined || comp.points.length == 0) continue; let curve = new Curve(...comp.points); if (Math.abs(curve.area()) < minArea) continue; curve = curve.subsample(subsampleTol); curves.push(curve); if (drawSettings[1]) { ctx.beginPath(); let { x, y } = curve[0]; ctx.moveTo(x, y); for (let { x, y } of curve) { ctx.lineTo(x, y); } ctx.stroke(); } } ///////////////////////// Centroid Detection //////////////////////////////////// const imgFromCanvas = cv.imread(canvas); //const RGBAmat = new cv.Mat(w,h, cv.CV_8UC1); //cv.cvtColor(imgFromCanvas, RGBAmat, cv.COLOR_RGBA2GRAY); let dst_gray = new cv.Mat(); let dst_binary = new cv.Mat(); let contours = new cv.MatVector(); let hierarchy = new cv.Mat(); cv.cvtColor(imgFromCanvas, dst_gray, cv.COLOR_RGBA2GRAY, 0); cv.threshold( dst_gray, dst_binary, 240, 255, cv.THRESH_BINARY_INV | cv.THRESH_OTSU ); // You can try more different parameters cv.findContours( dst_binary, contours, hierarchy, cv.RETR_CCOMP, cv.CHAIN_APPROX_SIMPLE ); // draw contours with random Scalar //for (let i = 0; i < contours.size(); ++i) { //let color = new cv.Scalar(Math.round(Math.random() * 255), Math.round(Math.random() * 255), //Math.round(Math.random() * 255)); //cv.drawContours(imgFromCanvas, contours, i, color, 1, cv.LINE_8, hierarchy, 100); //} // Now that we have our contours, convert back to RGB so that we can draw with colors. cv.cvtColor(dst_gray, imgFromCanvas, cv.COLOR_GRAY2RGB); for (let i = 0; i < contours.size(); i++) { const { m00, m01, m10 } = cv.moments(contours.get(i)); const center = new cv.Point(m10 / m00, m01 / m00); let cnt_centriod = contours.get(i); var area_centriod = cv.contourArea(cnt_centriod, false); if (area_centriod > coreArea) { cv.circle(imgFromCanvas, center, 1, [0, 0, 255, 0], 2); //console.log(center3) } //cv.circle(imgFromCanvas, center, 1, [0, 255, 0, 255], 2); //console.log(center) } if (drawSettings[2]) { const data_centriod = imgFromCanvas; cv.threshold( data_centriod, data_centriod, distThreshold, 300, cv.THRESH_BINARY_INV ); cv.imshow(canvas, data_centriod); } //////////////////////////// selectCores based on centroid, Area, and radius of each cores /////////////////////////////// const imgFromCanvas3 = cv.imread(canvas); let dst_gray3 = new cv.Mat(); let dst_binary3 = new cv.Mat(); let contours3 = new cv.MatVector(); let hierarchy3 = new cv.Mat(); let center_final = []; cv.cvtColor(imgFromCanvas3, dst_gray3, cv.COLOR_RGBA2GRAY, 0); cv.threshold( dst_gray3, dst_binary3, 240, 255, cv.THRESH_BINARY_INV | cv.THRESH_OTSU ); // You can try more different parameters cv.findContours( dst_binary3, contours3, hierarchy3, cv.RETR_CCOMP, cv.CHAIN_APPROX_SIMPLE ); // Now that we have our contours, convert back to RGB so that we can draw with colors. cv.cvtColor(dst_gray3, imgFromCanvas3, cv.COLOR_GRAY2RGB); for (let i = 0; i < contours.size(); i++) { const { m00, m01, m10 } = cv.moments(contours.get(i)); const center3 = new cv.Point(m10 / m00, m01 / m00); let cnt = contours.get(i); var area = cv.contourArea(cnt, false); let perim = cv.arcLength(cnt, false); if (area > coreArea) { cv.circle(imgFromCanvas3, center3, coreRadius, [255, 0, 0, 0], 2); center_final.push(center3); console.log(center_final); } //console.log(center3) //cv.circle(imgFromCanvas, center, 1, [0, 0, 0, 255], 6); //cv.circle(imgFromCanvas3, center3, 1, [0, 0, 0, 255], 2); //console.log(center) } let find_centriod = find_center(contours); //console.log(find_centriod) if (drawSettings[3]) { const data3 = imgFromCanvas3; //cv.threshold(data3, data3, distThreshold,300, cv.THRESH_BINARY_INV); cv.imshow(canvas, data3); } //return canvas return [canvas, find_centriod, center_final]; //return find_centriod }33:T755,chart = { const container = html``; //let w = Math.min(width, img.width); //const scale_factor = 20; //let w = Math.min(width, img.width); let w = (img.naturalWidth)/scale_factor; //let h = ~~((img.height * w) / img.width); let h = (img.naturalHeight)/scale_factor; const svg = d4 .select(container) .append("svg") .attr("viewBox", `0 0 ${width} ${h}`); const div = d4.select(container).append("div").classed("tooltip", true); // create a new tooltip, // passing it a selection for the tooltip's DOM element. const tooltip = new Tooltip(div); // function that sets the tooltip's HTML when revealed // can be passed the hovered selection's datum function tooltipContents(datum) { const { x, y } = datum; return `x: ${x}, y: ${y}`; } svg .append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`) .selectAll("circle") .data(newArray) .join("circle") .attr("cx", (d) => d.x) .attr("cy", (d) => d.y) .attr("r", coreRadius) .attr("fill", "#333") .on("mouseover", (event, d) => { // reveal the tooltip. // pass the current datum (if desired), // and a render function that returns an HTML string (required) tooltip.display(d, tooltipContents); }) .on("mouseout", () => { // hide the tooltip tooltip.hide(); }) .on("mousemove", (event) => { // move the tooltip, // passing the native browser event tooltip.move(event); }); return container; }34:T8f0,remove_intsession = { let pointSize = 5; let pointSizeDelete = 10; var points = []; var Removpoint = []; var timeout = 300; var clicks = 0; var dblclicks = 0; let new_centropid_find = findcentriod_updated[2]; //console.log(new_centropid_find); let interactive_canvas = findcentriod_updated[0]; var newFinalCentroid = []; // New array with centroid points after REMOVING the odd centroids const ctx_int = interactive_canvas.getContext("2d"); //ctx_int = interactive canvas let cw = Math.min(width, img.width); let ch = ~~((img.height * cw) / img.width); function getPosition(event) { var rect = canvas.getBoundingClientRect(); return { x: event.clientX - rect.left, y: event.clientY - rect.top }; } function drawCoordinates(point, r) { ctx_int.fillStyle = "#52FF33"; // Green color ctx_int.beginPath(); ctx_int.arc(point.x, point.y, r, 0, Math.PI * 2, true); ctx_int.fill(); } function drawGreenCircle(point, r) { //ctx_int.fillStyle = "#000000"; // ctx_int.beginPath(); ctx_int.arc(point.x, point.y, r, 0, Math.PI * 2, true); ctx_int.fill(); ctx_int.strokeStyle = "#000000"; //ctx_int.fillStyle = "#FFFFFF"; ctx_int.fillStyle = "rgba(0, 0, 0, 0)"; ctx_int.stroke(); } function drawCoordinates2(point, r) { ctx_int.fillStyle = "#F50606"; // Green color ctx_int.beginPath(); ctx_int.arc(point.x, point.y, r, 0, Math.PI * 2, true); ctx_int.fill(); } canvas.addEventListener("click", function (e) { clicks++; var m = getPosition(e); if (clicks == 1) { setTimeout(function () { if (clicks == 1) { drawCoordinates(m, pointSize); //drawGreenCircle(m, coreRadius); points.push(m); // New Centroid points will be added to new array "points" } clicks = 0; }, timeout); } }); canvas.addEventListener("dblclick", function (e) { dblclicks++; var RemM = getPosition(e); drawCoordinates2(RemM, pointSize); Removpoint.push(RemM); }); return [ interactive_canvas, // canvas points, //Points from SINGLE click and will be added Removpoint, //Points from DOUBLE click and will be REMOVED new_centropid_find // Automatically selected centroids ]; }35:T417,function FillMask(pixelData, x, y, distThreshold = 10) { let [w,h] = [pixelData.width, pixelData.height]; let src = pixelData.data; let maskData = new ImageData(w,h); let dst = maskData.data; for (let i = 0; i < dst.length; i+=4) dst [i+3] = 255; let visited = new Uint8Array(src.length); let count = 0; let stack = [[x,y]]; let threshold2 = distThreshold*distThreshold while (stack.length) { let [x,y] = stack.pop(); let i = (w*y+x)*4; visited[i] = true; count++; let [R,G,B,A] = src.slice(i,i+4); let dist = (j) => { let [dr,dg,db,da] = [src[j]-R,src[j+1]-G,src[j+2]-B,src[j+3]-A]; return dr*dr+dg*dg+db*db+da*da; } dst[i+3] = 0; if (x > 0 && !visited[i-4] && dist(i-4) < threshold2) stack.push([x-1,y]); if (x+1 < w && !visited[i+4] && dist(i+4) < threshold2) stack.push([x+1,y]); if (y > 0 && !visited[i-w*4] && dist(i-w*4) < threshold2) stack.push([x,y-1]); if (y+1 < h && !visited[i+w*4] && dist(i+w*4) < threshold2) stack.push([x,y+1]); } return maskData }36:Tc31,class ConnectedComponents { constructor () { this.hash = [] this.components = [] this.edges = [] } json () { return JSON.parse(JSON.stringify(this)) } newComponentIndex () { for (let i = 0; i < this.components.length; i++) { if (this.components[i] === undefined) { return i; } } return this.components.length; } addVerticalEdge (edge) { //console.log (edge) this.edges.push(edge) let component = { index : this.newComponentIndex(), ymin : edge[0].y, ymax : edge[1].y, points : [edge[0],edge[1]] }; this.components [component.index] = component; if (this.hash[component.ymin] !== undefined) { let c = this.hash[component.ymin]; this.hash[component.ymin] = undefined; this.components[component.index] = undefined; if (c.ymin == component.ymin) { c.ymin = component.ymax; c.points.unshift(component.points[1]); } else { console.assert(c.ymax == component.ymin); c.ymax = component.ymax; c.points.push (component.points[1]); } component = c; } if (this.hash[component.ymin] != undefined && this.hash[component.ymin].index != component.index) { // console.log (JSON.parse(JSON.stringify (component)), "hit", // JSON.parse (JSON.stringify (this.hash[component.ymin]))); let c2 = this.hash[component.ymin]; console.assert (component.index != c2.index); console.assert (c2.ymin == component.ymin); this.components[c2.index] = undefined; this.hash[c2.ymin] = undefined; c2.points.reverse(); component.points.unshift(...c2.points.slice(0,c2.points.length-1)); component.ymin = c2.ymax; this.hash[c2.ymax] = undefined; } else { if (this.hash[component.ymax] !== undefined) { let c = this.hash[component.ymax]; this.hash[component.ymax] = undefined; if (c !== component) { this.components[component.index] = undefined; if (c.ymax == component.ymax) { c.ymax = component.ymin; component.points.reverse(); c.points.push(...component.points.slice(1)); } else { console.assert(c.ymin == component.ymax); c.ymin = component.ymin; c.points.unshift(...component.points.slice(0,component.points.length-1)); } component = c; } } } if (component.ymin < component.ymax) { this.hash[component.ymin] = this.hash[component.ymax] = component; } } addHorizontalEdge (edge) { this.edges.push(edge) console.assert(edge[0].y==edge[1].y); console.assert(this.hash[edge[0].y]); let c = this.hash[edge[0].y]; if (c != undefined) { if (c.ymin == edge[0].y) { c.points.unshift(edge[1]) } else { console.assert(c.ymax == edge[0].y); c.points.push(edge[1]) } } else { console.log ("Dangling h edge", edge) } } }37:T8b9,function getCirculations (imgdata) { let [w,h] = [imgdata.width,imgdata.height]; let data = imgdata.data; function getRuns (x) { let last = false; let run = null; let runs = []; for (let y = 0; y < h; y++) { let pixel = data[(w*y+x)*4+3]; let current = pixel > 0; if (current) { if (run != null) run.ymax = y+1; else { run = { x:x, ymin: y, ymax:y+1 }; runs.push (run); } } else { run = null } } return runs } function runDifference (runs0,runs1) { runs0 = runs0.slice(0); if (runs0.length == 0) return runs0; if (runs1.length == 0) return runs0; let result = []; let [i0,i1] = [0,0]; while ( i0 < runs0.length && i1 < runs1.length ) { let [r0,r1] = [runs0[i0], runs1[i1]]; if (r0.ymax <= r1.ymin) { result.push(r0); i0++; } else if (r1.ymax <= r0.ymin) { i1++; } else { if (r0.ymin < r1.ymin) { result.push ({x:r0.x, ymin: r0.ymin, ymax:r1.ymin}); r0 = {x:r0.x, ymin:r1.ymin, ymax:r0.ymax}; } else { r0 = {x:r0.x, ymin:r1.ymax, ymax:r0.ymax}; } if (r0.ymax <= r0.ymin) i0++; else runs0[i0] = r0; } } result.push.apply(result,runs0.slice(i0)) return result; } //let edges = []; let prevRuns = []; let connected = new ConnectedComponents(); let vEdge = (x) => { return (run) => [Vec(x,run.ymin),Vec(x,run.ymax)] }; for (let x= 0; x <= w; x++) { let runs = x == w ? [] : getRuns(x); let currMinusPrev = runDifference(runs, prevRuns); let prevMinusCurr = runDifference(prevRuns, runs); let verticalEdges = currMinusPrev.map(vEdge(x)).concat(prevMinusCurr.map(vEdge(x))); let horizontalEdges = []; for (let r of runs) { horizontalEdges.push ([Vec(r.x,r.ymin),Vec(r.x+1,r.ymin)]); horizontalEdges.push ([Vec(r.x,r.ymax),Vec(r.x+1,r.ymax)]); } for (let vEdge of verticalEdges) { connected.addVerticalEdge (vEdge); } for (let hEdge of horizontalEdges) { connected.addHorizontalEdge (hEdge); } prevRuns = runs } return connected; }38:Tbc3,{ dearraybutton; const zip = new jsZip(); const zipFolderName = "dearrayedCores"; const imageFolderName = "img"; const imageFolder = zip.folder(imageFolderName); const metadataFolderName = "metadata"; const metadataFolder = zip.folder(metadataFolderName); //const scale_factor = 20; const anchorTag = document.createElement("a"); //const ctxxx = canvas.getContext("2d"); //let w = Math.max(width, img.naturalWidth); let w = img.naturalWidth //let w = img.width; //let h = ~~((img.height * w) / img.width); let h = img.naturalHeight; //let h = img; let myCanvas = DOM.canvas(w, h, 1); let ctxxx = myCanvas.getContext("2d"); ctxxx.drawImage(img, 0, 0, w, h); await Promise.allSettled( array_centroid.map((row, rowIndex) => Promise.allSettled( row.map(async (column, columnIndex) => { const correspondingMetadata = data_updated.find( (metadata) => metadata.Row == `${rowIndex + 1}` && metadata.Col == `${columnIndex + 1}` ); if (correspondingMetadata) { const ctx = DOM.context2d( 2 * scale_factor * coreRadius, 2 * scale_factor * coreRadius, 1 ); // const ctx = DOM.context2d(2 * coreRadius, 2 * coreRadius, 1); console.log(ctx.canvas.width); //debugger; ctx.putImageData( ctxxx.getImageData( column["x"] * scale_factor - coreRadius * scale_factor, column["y"] * scale_factor - coreRadius * scale_factor, 2 * scale_factor * coreRadius, 2 * scale_factor * coreRadius ), 0, 0 ); // ctx.putImageData( // ctxxx.getImageData( // column["x"] - coreRadius, // column["y"] - coreRadius, // 2 * coreRadius, //150, 150 for figure "a" else 40 // 2 * coreRadius //150, 150 for figure "a" else 40 // ), // 0, // 0 // ); const imageBlob = await new Promise((resolve) => ctx.canvas.toBlob(resolve, "image/PNG", 1.0) ); imageFolder.file( `${correspondingMetadata["SPOT ID#"]}.png`, imageBlob, { binary: true } ); metadataFolder.file( `${correspondingMetadata["SPOT ID#"]}.json`, JSON.stringify(correspondingMetadata) ); } // if (rowIndex == centriod_sort.length - 1 && columnIndex == row.length - 1) { // } }) ) ) ); zip.generateAsync({ type: "blob" }).then((content) => { const urlToBlob = URL.createObjectURL(content); const anchorTag = document.createElement("a"); anchorTag.download = `${zipFolderName}.zip`; anchorTag.href = urlToBlob; anchorTag.click(); }); }39:[{"id":"7fa570802e320a16a228de21648e7d1881083b30114df2a96d9e5a276137aecca146c96f83b90df27516d233f626cd09034e3ca97a0bd0a77dd2e240631e1d08","href":"https://static.observableusercontent.com/files/7fa570802e320a16a228de21648e7d1881083b30114df2a96d9e5a276137aecca146c96f83b90df27516d233f626cd09034e3ca97a0bd0a77dd2e240631e1d08","name":"test2.png","type":"image/png","lastModified":1699291610391.681,"size":3994152}] 30:{"id":"fea8ccf1849265e5","slug":null,"title":"New_TMA-Dearraying","thumbnail":null,"access_level":"public","create_time":"$D2023-11-06T17:26:50.391Z","update_time":"$D2023-11-06T17:26:50.391Z","view_time":null,"first_public_time":"$D2023-11-06T17:26:50.391Z","has_unpublished_edits":null,"fork":{"id":"d40f29315eeac633","slug":null,"title":"New_TMA-Dearraying","owner":{"id":"67a652fa41ec3550","login":"aaronge-2020","name":"Aaron Ge"}},"stars":0,"starred":false,"owner":{"type":"team","id":"67a652fa41ec3550","login":"aaronge-2020","name":"Aaron Ge","avatar_url":"https://avatars-next.observableusercontent.com/d8cc425d5e64ef116e24ef6e701909b44669b7a3088a311d2de0215ac50324e2","tier":"starter_2024","bio":""},"version":2372,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"152d0a566a39ccad","login":"aaronge-2020","name":"Aaron Ge","avatar_url":"https://avatars-next.observableusercontent.com/d8cc425d5e64ef116e24ef6e701909b44669b7a3088a311d2de0215ac50324e2","tier":null,"bio":""}],"members":[{"type":"individual","id":"152d0a566a39ccad","login":"aaronge-2020","name":"Aaron Ge","avatar_url":"https://avatars-next.observableusercontent.com/d8cc425d5e64ef116e24ef6e701909b44669b7a3088a311d2de0215ac50324e2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"New_TMA-Dearraying","cells":[{"id":0,"value":"# New_TMA-Dearraying","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2141,"value":"## STEP 1: Load Image or Select one from Demo image","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3,"value":"md`Select TMA: ${bindFile({multiple:false, accept:\".png,.jpg, .tif, .tiff, .bmp\", size:'20em'},viewof imgfile)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2304,"value":"mutable img = {\n const image = new Image;\n image.crossOrigin = \"anonymous\";\n image.src = imgDemoFile || await FileAttachment(\"test2.png\").url()\n await new Promise(resolve => image.onload = resolve)\n return image;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2233,"value":"## STEP 2: Load TMA","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2226,"value":"viewof loadTMA = html`

${Object.assign(\n html`