2f:T5ad,viewof token = { const data = [ [ "Bud", "Z2l2SWQvZjZlZWJjMDItNjY1Ny00NmFkLTkxYmEtYTRkZTQ5NTNmMjljL2NoYW5uZWxJZC81YWM4ZjdlZS05NTI0LTQ1ZjItYmYwYS1jYmMwYjE2NGU2Yzk=" ], [ "temp-to-be-deleted", "Z2l2SWQvOGE5YTk5MDgtZGEwYS00MjUwLWE1NDctOTg2ZWEzZjcxYTBmL2NoYW5uZWxJZC81YWM4ZjdlZS05NTI0LTQ1ZjItYmYwYS1jYmMwYjE2NGU2Yzk" ], [ "budwiser", "Z2l2SWQvYTE3OTAzYjYtOWQ0NS00ODQwLWEyMDYtMTQ2Y2M0ZjdkNDQzL2NoYW5uZWxJZC81YWM4ZjdlZS05NTI0LTQ1ZjItYmYwYS1jYmMwYjE2NGU2Yzk" ], [ "face", "Z2l2SWQvMjVlZmExZjktYTVjMy00MTMzLWJiN2QtZDI4ZjQxOGRjN2UyL2NoYW5uZWxJZC82Yzg2ODQxOC0yMzIxLTQxY2QtYjUxOC01YTk1MTMyNjQ1Mjc=" ], [ "rotate", "Z2l2SWQvY2EwZDMzY2UtMDRlMS00OTY5LWIxYTQtODY5MWQ0ODc5YTZkL2NoYW5uZWxJZC85MzIxY2Q1NS0xYTBmLTRiNjYtOGI3MC0zOWYzNzVmZmMzNzk=" ], [ "tomato", "Z2l2SWQvYTQzYWVhMDgtZmNlNy00OTQ3LWFiYzQtNzgyY2NiNWE4YmU5L2NoYW5uZWxJZC82Yzg2ODQxOC0yMzIxLTQxY2QtYjUxOC01YTk1MTMyNjQ1Mjc=" ], [ "face-single", "Z2l2SWQvYjQyNmExMTEtM2NjNy00ZmMxLTg3ZDgtNTJhYmFjMzk2ZjFhL2NoYW5uZWxJZC8xOGJkMTIyYi1kMTgxLTQzNjktYjVhZS1mYTExMTRkY2U3MDk=" ], [ "icecream", "Z2l2SWQvNDE2NjkwMzgtMWViYy00NjY2LTg5ODgtNWEzY2NkOThhMGIxL2NoYW5uZWxJZC8xOGJkMTIyYi1kMTgxLTQzNjktYjVhZS1mYTExMTRkY2U3MDk=" ] ]; return Inputs.radio(data, { label: "Select Token", valueof: (d) => d[1], format: (d) => d[0], value: data[0][1] }); }30:T322c,givTree = (giv, rsRoot, actionTypes) => { const root = d3.hierarchy(giv, (d) => { if (d.$type.name === "RmdRoot") { return [...d.scenes, d.rsRoot]; } else if (d.$type.name === "RmdScene") { return d.objects; } else if (d.$type.name === "RmdObject") { return [...d.actions, ...d.area.coords]; } else if (d.$type.name === "RmdAction") { return [...d.frames, ...d.actionFiles]; } else if (d.$type.name === "RmdFrame") { return [d.area]; } else if (d.$type.name === "RmdArea") { return d.coords; } else if (d.$type.name === "Giv") { return [d.rmdRoot]; } else if (d.$type.name === "RootGiv") { return d.givs; } else if (d.$type.name === "RsRoot") { return d.eventScripts; } else if (d.$type.name === "RsEventScript") { return d.events; } }); const actions = root .descendants() .filter((d) => d.data.$type.name === "RmdAction") .map((d) => d.data); const dx = 15; const dy = width >= 650 ? width / 8 : width / 4; const margin = { top: 10, right: 120, bottom: 10, left: 45 }; const minFrameAction = d3.least(actions, (d) => d.frames.length); root.x0 = dy / 2; root.y0 = 0; root.descendants().forEach((d, i) => { d.id = i; d._children = d.children; // close if ( (d.data.$type.name === "RmdAction" && d.data.actionId !== minFrameAction.actionId) || d.data.$type.name === "RmdFrame" ) { d.children = null; } }); const tree = d3.tree().nodeSize([dx, dy]); const diagonal = d3 .linkHorizontal() .x((d) => d.y) .y((d) => d.x); const linkNode = ({ source, target }) => { if (source.depth === target.depth) { return arcLink( source.y, source.x, target.y, target.x, 5, 30 * (source.x > target.x ? 1 : -1) ); } else { return diagonal({ source, target }); } }; const colorScale = d3 .scaleOrdinal(_.uniqBy(root.descendants(), (d) => d.data.$type.name)) .range(d3.schemeTableau10); const container = d3 .create("div") .style("", "100%") .style("overflow-x", "scroll") .property("value", {}); const svg = container .append("svg") .style("font", "10px sans-serif") .style("user-select", "none"); const gLink = svg .append("g") .attr("fill", "none") .attr("stroke", "#555") .attr("stroke-opacity", 0.4) .attr("stroke-width", 1.5); const gNode = svg .append("g") .attr("cursor", "pointer") .attr("pointer-events", "all"); function update(source) { const nodes = root.descendants().reverse(); // action ↔️ event script links const actionLinks = nodes .filter((d) => d.data.$type.name === "RmdAction") .map((source) => { const target = nodes .filter((d) => d.data.$type.name === "RsEventScript") .find((d) => d.data.actionId === source.data.actionId); return { source, target, ref: true }; }) .filter(({ source, target }) => source && target); // scene ↔️ event links const sceneChangeLinks = nodes .filter( (d) => d.data.$type.name === "RsEvent" && d.data.result.sceneChangeId ) .map((source) => { const target = nodes .filter((d) => d.data.$type.name === "RmdScene") .find((d) => d.data.sceneId === source.data.result.sceneChangeId); return { source, target, ref: true }; }) .filter(({ source, target }) => source && target); // broadcast links const broadcastLinks = nodes .filter( (d) => d.data.$type.name === "RsEvent" && d.data.result.broadcastPayload ) .map((source) => { const target = nodes .filter( (d) => d.data.$type.name === "RmdAction" && d.data.listenOnBroadcast ) .find( (d) => d.data.listenOnBroadcast.eventName === source.data.result.broadcastPayload.eventName ); return { source, target, ref: true }; }) .filter(({ source, target }) => source && target); // instant play links const instantPlayLinks = nodes .filter( (d) => d.data.$type.name === "RsEvent" && d.data.result.instantPlayActionId ) .map((source) => { const target = nodes .filter((d) => d.data.$type.name === "RmdAction") .find( (d) => d.data.actionId === source.data.result.instantPlayActionId ); return { source, target, ref: true }; }) .filter(({ source, target }) => source && target); const links = [ ...root.links(), ...actionLinks, ...sceneChangeLinks, ...broadcastLinks, ...instantPlayLinks ]; tree(root); let left = root; let right = root; root.eachBefore((node) => { if (node.x < left.x) left = node; if (node.x > right.x) right = node; }); const height = right.x - left.x + margin.top + margin.bottom; svg .attr("viewBox", [-margin.left, left.x - margin.top, width * 1.5, height]) .attr("width", width * 1.5); const node = gNode.selectAll("g").data(nodes, (d) => d.id); // Enter any new nodes at the parent's previous position. const nodeEnter = node .enter() .append("g") .attr("transform", (d) => `translate(${source.y0},${source.x0})`) .attr("fill-opacity", 0) .attr("stroke-opacity", 0) .on("click", (event, d) => { if (container.property("value") === d.data) { d.children = d.children ? null : d._children; update(d); } else { container.property("value", d.data).dispatch("input"); } }) .on("mouseover", (event, d) => { const type = d.data.$type.name; const links = gLink.selectAll("path"); if (type === "RmdAction" || type === "RsEventScript") { links .filter( ({ source, target }) => target.data.$type.name === "RsEventScript" && source.data.actionId === d.data.actionId ) .raise() .attr("stroke", "crimson") .attr("stroke-opacity", 1); links .filter( ({ source, target }) => source.data.$type.name === "RsEvent" && source.data.result.instantPlayActionId === d.data.actionId ) .raise() .attr("stroke", "navy") .attr("stroke-opacity", 1); if (d.data.listenOnBroadcast) { links .filter( ({ source, ref }) => source.data.$type.name === "RsEvent" && ref && source.data.result.broadcastPayload ) .filter( ({ source }) => d.data.listenOnBroadcast.eventName === source.data.result.broadcastPayload.eventName ) .raise() .attr("stroke", "navy") .attr("stroke-opacity", 1); } } else if (type === "RsEvent") { links .filter( ({ source, target }) => (source.data.$type.name == "RmdAction" && target.data.$type.name == "RsEventScript") || source.data.$type.name == "RsEventScript" ) .filter(({ source, target }) => { return ( target.data.eventId === d.data.eventId || (target.data.$type.name === "RsEventScript" && source.data.actionId === d.parent.data.actionId) ); }) .raise() .attr("stroke", "crimson") .attr("stroke-opacity", 1); links .filter( ({ target, ref }) => target.data.$type.name === "RmdScene" && ref ) .filter( ({ source, target }) => target.data.sceneId === d.data.result.sceneChangeId ) .raise() .attr("stroke", "navy") .attr("stroke-opacity", 1); if (d.data.result.broadcastPayload) { links .filter( ({ target, ref }) => target.data.$type.name === "RmdAction" && ref ) .filter( ({ target }) => target.data.listenOnBroadcast.eventName === d.data.result.broadcastPayload.eventName ) .attr("stroke", "navy") .attr("stroke-opacity", 1); } if (d.data.result.instantPlayActionId) { links .filter( ({ target, ref }) => target.data.$type.name === "RmdAction" && ref ) .filter( ({ target }) => target.data.actionId === d.data.result.instantPlayActionId ) .attr("stroke", "navy") .attr("stroke-opacity", 1); } } else if (type === "RmdScene") { links .filter( ({ source, ref }) => source.data.$type.name === "RsEvent" && source.data.result.sceneChangeId === d.data.sceneId ) .raise() .attr("stroke", "navy") .attr("stroke-opacity", 1); } }) .on("mouseout", () => { gLink .selectAll("path") .attr("stroke", "#555") .attr("stroke-opacity", (d) => (d.ref ? "0.2" : "0.4")); }); nodeEnter .append("circle") .attr("r", 4.5) .attr("fill", (d) => { if (d._children) { return colorScale(d.data.$type.name); } return "white"; }) .attr("stroke", (d) => { if (!d._children) { return colorScale(d.data.$type.name); } return "none"; }) .attr("stroke-width", 2); nodeEnter .append("text") .attr("dy", "0.31em") .attr("x", (d) => (d._children ? -6 : 6)) .attr("text-anchor", (d) => (d._children ? "end" : "start")) .text((d) => { const type = d.data.$type.name; if (type === "RmdRoot") { return "Rmd"; } else if (type === "RmdScene") { return "Scene"; } else if (type === "RmdObject") { return "Object"; } else if (type === "RmdAction") { return `Action (${actionTypes[d.data.actionType].slice(0, 2)})`; } else if (type === "RmdLocation") { return "Location"; } else if (type === "RmdFrame") { return "Frame"; } else if (type === "RmdActionFile") { return "ActionFile"; } else if (type === "RsEvent") { return "Event"; } else if (type === "RmdArea") { return "Area"; } else { return type; } }) .clone(true) .lower() .attr("stroke-linejoin", "round") .attr("stroke-width", 3) .attr("stroke", "white"); // Transition nodes to their new position. const nodeUpdate = node .merge(nodeEnter) .attr("transform", (d) => `translate(${d.y},${d.x})`) .attr("fill-opacity", 1) .attr("stroke-opacity", 1); // Transition exiting nodes to the parent's new position. const nodeExit = node .exit() .remove() .attr("transform", (d) => `translate(${source.y},${source.x})`) .attr("fill-opacity", 0) .attr("stroke-opacity", 0); // Update the links… const link = gLink.selectAll("path").data(links, (d) => d.target.id); // Enter any new links at the parent's previous position. const linkEnter = link .enter() .append("path") .attr("stroke-opacity", (d) => (d.ref ? "0.2" : "0.4")) .attr("stroke-dasharray", (d) => (d.ref ? "4 4" : "")) .attr("d", (d) => { const o = { x: source.x0, y: source.y0 }; return diagonal({ source: o, target: o }); }); // Transition links to their new position. link .merge(linkEnter) .attr("stroke-opacity", (d) => (d.ref ? "0.2" : "0.4")) .attr("stroke-dasharray", (d) => (d.ref ? "4 4" : "")) .attr("d", linkNode); // Transition exiting nodes to the parent's new position. link .exit() .remove() .attr("d", (d) => { const o = { x: source.x, y: source.y }; return diagonal({ source: o, target: o }); }); // Stash the old positions for transition. root.eachBefore((d) => { d.x0 = d.x; d.y0 = d.y; }); } update(root); return container.node(); }31:T26d8,viewof area = { const maxWidth = 600; const height = 640; const { sceneSizeWidth, sceneSizeHeight } = rmdRoot.scenes[0]; const ratio = maxWidth / Math.max(sceneSizeWidth, sceneSizeHeight); const margin = { top: 35, left: 35, right: 35, bottom: 10 }; const w = sceneSizeWidth * ratio; const h = sceneSizeHeight * ratio; const innerW = w - margin.left - margin.right; const innerH = h - margin.top - margin.bottom; const data = previewAreaData.filter((d) => _.some(selectedActionIds, (actionId) => actionId === d.actionId) ); const getCentroid = ([tl, bl, br, tr]) => { const [x, y] = d3.polygonCentroid([ [tl.x, tl.y], [bl.x, bl.y], [br.x, br.y], [tr.x, tr.y] ]); return { x, y }; }; const byAction = d3.group(data, (d) => d.actionId); const guideData = Array.from(byAction) .map(([key, values]) => [_.first(values), _.last(values)]) .map(([start, end]) => { const actionType = actionTypes[start.actionType]; if (actionType === "DRAG") { return { start: getCentroid(start.coords), end: getCentroid(end.coords), actionId: start.actionId, actionType: start.actionType }; } else if (actionType === "PINCH") { return { start: [start.touch1, start.touch2], end: [end.touch1, end.touch2], actionId: start.actionId, actionType: start.actionType }; } else if (actionType === "PUSH") { return { start: start.coords[0], actionId: start.actionId, actionType: start.actionType }; } else if (actionType === "ROTATE") { return { start: { ...start.coords[0], radius: start.radius, rotationAngle: start.rotationAngle.value }, end: { ...end.coords[0], radius: end.radius, rotationAngle: end.rotationAngle.value }, actionId: start.actionId, actionType: start.actionType }; } return { actionId: start.actionId, actionType: start.actionType }; }); const xScale = d3 .scaleLinear() .domain([0, sceneSizeWidth]) .range([0, innerW]); const yScale = d3 .scaleLinear() .domain([0, sceneSizeHeight]) .range([0, innerH]); const svg = d3 .create("svg") .attr("viewBox", [0, 0, w, h]) .attr("width", w) .attr("height", h) .property("value", {}); svg .append("defs") .selectAll("marker") .data(guideData) .join("marker") .attr("id", (d) => `arrow:${d.actionId}`) .attr("viewBox", [0, -5, 10, 10]) .attr("refX", 6) .attr("markerWidth", 8) .attr("markerHeight", 8) .attr("orient", "auto") .append("path") .attr("d", "M0,-5L10,0L0,5") .attr("fill", (d) => previewAreaColorScale(d.actionId)); const root = svg .append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`); // draw grids root .append("g") .attr("class", "x grid") .call(d3.axisTop(xScale).tickSize(-innerH).tickFormat("")); root .append("g") .attr("class", "y grid") .call(d3.axisLeft(yScale).tickSize(-innerW).tickFormat("")); // draw axis root.append("g").call(d3.axisTop(xScale)); root.append("g").call(d3.axisLeft(yScale)); // draw drag, pinch area root .append("g") .selectAll("polygon") .data(data.filter((d) => d.actionType == 1 || d.actionType == 3)) .join("polygon") .attr("points", ({ coords: [tl, bl, br, tr] }) => [ [xScale(tl.x), yScale(tl.y)], [xScale(bl.x), yScale(bl.y)], [xScale(br.x), yScale(br.y)], [xScale(tr.x), yScale(tr.y)] ]) .attr("fill", "none") .attr("fill-opacity", 0.3) .attr("stroke", (d) => previewAreaColorScale(d.actionId)) .attr("stroke-opacity", 0.2) .attr("pointer-events", "visible") .on("mouseover", (e) => d3 .select(e.target) .attr("stroke-opacity", 1) .attr("fill", (d) => previewAreaColorScale(d.actionId)) ) .on("mouseout", (e) => d3.select(e.target).attr("stroke-opacity", 0.2).attr("fill", "none") ) .on("click", (_, d) => svg.property("value", d).dispatch("input")); // draw push area root .append("g") .selectAll("circle") .data(data.filter((d) => d.actionType === 2 && d.frameNumber === 1)) .join("circle") .attr("cx", (d) => xScale(d.coords[0].x)) .attr("cy", (d) => yScale(d.coords[0].y)) .attr("r", (d) => d.radius * ratio) .attr("fill", (d) => previewAreaColorScale(d.actionId)) .attr("fill-opacity", 0.3) .attr("stroke", (d) => previewAreaColorScale(d.actionId)) .attr("stroke-opacity", 0.2) .on("click", (_, d) => svg.property("value", d).dispatch("input")); // draw rotate area const rotateArea = root.append("g"); rotateArea .selectAll("circle") .data(data.filter((d) => d.actionType === 4 && d.frameNumber === 1)) .join("circle") .attr("cx", (d) => xScale(d.coords[0].x)) .attr("cy", (d) => yScale(d.coords[0].y)) .attr("r", (d) => d.radius * ratio) .attr("fill", (d) => previewAreaColorScale(d.actionId)) .attr("fill-opacity", 0.3) .attr("stroke", (d) => previewAreaColorScale(d.actionId)) .attr("stroke-opacity", 0.2); rotateArea .selectAll("g") .data( d3.group( data.filter((d) => d.actionType === 4), (d) => d.actionId ) ) .join("g") .attr("transform", ([key, values]) => { return `translate(${xScale(values[0].coords[0].x)}, ${yScale( values[0].coords[0].y )})`; }) .selectAll("path") .data((d) => d[1]) .join("path") .attr("d", (d, i) => { const arc = d3 .arc() .startAngle(d.rotationAngle.value * i) .endAngle(d.rotationAngle.value * (i + 1)) .innerRadius(0) .outerRadius(d.radius * ratio); return arc(); }) .attr("fill", "none") .attr("fill-opacity", 0.3) .attr("stroke", (d) => previewAreaColorScale(d.actionId)) .attr("stroke-opacity", 0.2) .attr("pointer-events", "visible") .on("mouseover", (e) => d3 .select(e.target) .attr("stroke-opacity", 1) .attr("fill", (d) => previewAreaColorScale(d.actionId)) ) .on("mouseout", (e) => d3.select(e.target).attr("stroke-opacity", 0.2).attr("fill", "none") ) .on("click", (_, d) => svg.property("value", d).dispatch("input")); const dragGuide = root.append("g").attr("class", "drag guide"); const dragGuideData = guideData.filter((d) => d.actionType === 1); dragGuide .selectAll("circle") .data(dragGuideData) .join("circle") .attr("r", 4) .attr("cx", (d) => xScale(d.start.x)) .attr("cy", (d) => yScale(d.start.y)) .attr("fill", (d) => previewAreaColorScale(d.actionId)); dragGuide .selectAll("line") .data(dragGuideData) .join("line") .attr("x1", (d) => xScale(d.start.x)) .attr("y1", (d) => yScale(d.start.y)) .attr("x2", (d) => xScale(d.end.x)) .attr("y2", (d) => yScale(d.end.y)) .attr("stroke", (d) => previewAreaColorScale(d.actionId)) .attr("stroke-width", 1.5) .attr("stroke-dasharray", [5, 5]) .attr("marker-end", (d) => `url(#arrow:${d.actionId})`); const pinchGuide = root.append("g").attr("class", "pinch guide"); const pinchGuideData = guideData.filter((d) => d.actionType === 3); pinchGuide .selectAll("g") .data(pinchGuideData) .join("g") .selectAll("circle") .data(({ start, actionId }) => start.map((d) => ({ ...d, actionId }))) .join("circle") .attr("r", 4) .attr("cx", (d) => xScale(d.x)) .attr("cy", (d) => yScale(d.y)) .attr("fill", (d) => previewAreaColorScale(d.actionId)); pinchGuide .selectAll("g") .data(pinchGuideData) .join("g") .selectAll("line") .data(({ start, end, actionId }) => { return end.map(({ x, y }, i) => ({ x1: start[i].x, y1: start[i].y, x2: x, y2: y, actionId })); }) .join("line") .attr("x1", (d) => xScale(d.x1)) .attr("y1", (d) => yScale(d.y1)) .attr("x2", (d) => xScale(d.x2)) .attr("y2", (d) => yScale(d.y2)) .attr("stroke", (d) => previewAreaColorScale(d.actionId)) .attr("stroke-width", 1.5) .attr("stroke-dasharray", [5, 5]) .attr("marker-end", (d) => `url(#arrow:${d.actionId})`); const pushGuide = root.append("g").attr("class", "push guide"); const pushGuideData = guideData.filter((d) => d.actionType === 2); pushGuide .selectAll("circle") .data(pushGuideData) .join("circle") .attr("r", 4) .attr("cx", (d) => xScale(d.start.x)) .attr("cy", (d) => yScale(d.start.y)) .attr("fill", (d) => previewAreaColorScale(d.actionId)); const rotateGuide = root.append("g").attr("class", "push rotate"); const rotateGuideData = guideData.filter((d) => d.actionType === 4); rotateGuide .selectAll("circle") .data(rotateGuideData) .join("circle") .attr("r", 4) .attr("cx", (d) => xScale(d.start.x)) .attr("cy", (d) => yScale(d.start.y)) .attr("fill", (d) => previewAreaColorScale(d.actionId)); rotateGuide .selectAll("path") .data(rotateGuideData) .join("path") .attr( "transform", (d) => `translate(${xScale(d.start.x)}, ${yScale(d.start.y)})` ) .attr("d", (d) => { const path = partialCircle( 0, 0, d.start.radius * ratio * 0.9, Math.PI * 1.5, Math.PI * 3.2 ) .map((d) => d.join(" ")) .join(" "); return path; }) .attr("fill", "none") .attr("stroke", (d) => previewAreaColorScale(d.actionId)) .attr("stroke-width", 1.5) .attr("stroke-dasharray", [5, 5]) .attr("marker-end", (d) => `url(#arrow:${d.actionId})`); return svg.node(); }32:T41d,{ const data = [ ...d3.range(8).map(() => ({ type: "read identifire", alias: "I" })), ...d3.range(36).map(() => ({ type: "frameId", alias: "F" })), ...d3.range(1).map(() => ({ type: "image type", alias: "T" })), ...d3.range(1).map(() => ({ type: "reserved", alias: "R" })), ...d3.range(4).map(() => ({ type: "size", alias: "S" })), ...d3.range(20).map(() => ({ type: "image data", alias: "D" })), { type: "rest", alias: "..." } ]; const max = width >= 600 ? 30 : 10; return Plot.plot({ width, x: { axis: "top", label: "frames →", tickSize: 0, tickPadding: 2, ticks: 3 }, marks: [ Plot.cell(data, { x: (d, i) => i % max, y: (d, i) => Math.floor(i / max), fill: "alias", fillOpacity: (d, i) => (i >= 50 ? 0.3 : 1), title: "type" }), Plot.text(data, { x: (d, i) => i % max, y: (d, i) => Math.floor(i / max), text: "alias", fill: "white", title: "type" }) ] }); }33:T5e8,getGivInfo = async (token, populate = false) => { const url = urlcat(...API_URL, { token }); const root = await fetch(url).then((d) => d.json()); if (!populate) { return root; } // populate givs, rmdRoot, rsRoot if (root.metaUrl) { const rmdRoot = await getFile( { file: root.metaUrl, givId: root.givId, channelId: root.channelId }, "RmdRoot" ); const rsRoot = await getFile( { file: rmdRoot.rsRootFileUrl, givId: root.givId, channelId: root.channelId }, "RsRoot" ); rmdRoot.rsRoot = rsRoot; return { ...root, rmdRoot, $type: { name: "Giv" } }; } else { let childGivs = []; for (const childGivId of root.givs.givs) { const childUrl = urlcat(...API_URL, { token: encodeToken(childGivId, root.channelId) }); const childGiv = await fetch(childUrl).then((d) => d.json()); const rmdRoot = await getFile( { file: childGiv.metaUrl, givId: childGiv.givId, channelId: childGiv.channelId }, "RmdRoot" ); const rsRoot = await getFile( { file: rmdRoot.rsRootFileUrl, givId: childGiv.givId, channelId: childGiv.channelId }, "RsRoot" ); rmdRoot.rsRoot = rsRoot; childGivs.push({ ...childGiv, rmdRoot, $type: { name: "Giv" } }); } root.$type = { name: "RootGiv" }; root.givs = childGivs; return root; } }34:T4f7,function parseActionBytes(bytes) { let read_bytes = 0; const frameBlobs = []; const b = Buffer.from(bytes); // return; while (read_bytes < b.byteLength) { let offset = read_bytes; // read identifier if (offset + 8 >= b.byteLength) { break; } // const identifier = Buffer.from(b.subarray(offset, offset + 8)).toString('hex'); offset += 8; // read fid if (offset + 36 >= b.byteLength) { break; } const frameId = Buffer.from(b.subarray(offset, offset + 36)).toString( "utf8" ); offset += 36; // read imagetype if (offset + 1 >= b.byteLength) { break; } // let type = b.readUInt8(offset); offset += 1; // read reserved if (offset + 1 >= b.byteLength) { break; } // let reserved = b.readUInt8(offset); offset += 1; // read size if (offset + 4 >= b.byteLength) { break; } const size = b.readUInt32BE(offset); offset += 4; // read image if (offset + size > b.byteLength) { break; } frameBlobs.push({ frameId, imageBlob: new Blob([b.subarray(offset, offset + size)], { type: "image/jpeg" }) }); offset += size; read_bytes = offset; } return frameBlobs; }35:[{"id":"5838f379d29d8e107d0d428b287be8876c4f6de9cd162b2e29b01b386a8bb61d94c2ff696e2a548b08d0736e0a8f2dc068f0ae6e193f0a462020b62f8c5caa9e","href":"https://static.observableusercontent.com/files/5838f379d29d8e107d0d428b287be8876c4f6de9cd162b2e29b01b386a8bb61d94c2ff696e2a548b08d0736e0a8f2dc068f0ae6e193f0a462020b62f8c5caa9e","name":"image.png","type":"image/png","lastModified":1635268247249.551,"size":244167},{"id":"2ef947a5eebca29f6f80cbfcb070a81450b994bdcb0f9a6ee1e92f4dc3c6a21eb6f302c0d02f1e04ae111f4c797ea0e50f41f17e21e5aa49162d972ffb49cfea","href":"https://static.observableusercontent.com/files/2ef947a5eebca29f6f80cbfcb070a81450b994bdcb0f9a6ee1e92f4dc3c6a21eb6f302c0d02f1e04ae111f4c797ea0e50f41f17e21e5aa49162d972ffb49cfea","name":"models.json","type":"application/json","lastModified":1635182195784.222,"size":29980}] 2d:{"title":"giv browser (old)","cells":[{"id":0,"value":"# giv browser (old)\n\n

\n\n## TODOs\n\n- support to visualize ending property\n- ~~support to show push, pinch action~~\n- support to show rotate action\n- show frame with action polygon\n- ~~link RsEventScript ↔️ Event on givTree (or Event ↔️ Action) [example](https://bl.ocks.org/schutt/91bf0ff0cba3908bf243)~~\n- ~~link sceneChangeId~~\n- ~~link instantPlayActionId~~\n- ~~link broadcast event~~\n- brush like element architecture (support both mouse & touch event)\n- try givtree with https://observablehq.com/@d3/radial-tidy-tree","pinned":false,"hidden":false,"mode":"md"},{"id":806,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":1346,"value":"token","pinned":false,"hidden":false,"mode":"ojs"},{"id":1996,"value":"givInfo = await getGivInfo(token)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1990,"value":"givs = {\n let data = [];\n if (givInfo.metaUrl) {\n data.push(givInfo);\n } else {\n for (const givId of givInfo.givs.givs) {\n const childGiv = await getGivInfo(encodeToken(givId, givInfo.channelId));\n data.push(childGiv);\n }\n }\n return data;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":191,"value":"viewof giv = {\n return Inputs.radio(givs, {\n label: \"Select Giv\",\n value: givs[0],\n format: (d) => d.description\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":847,"value":"giv","pinned":false,"hidden":false,"mode":"ojs"},{"id":223,"value":"rmdRoot = {\n if (giv.metaUrl) {\n return await getFileInGiv(giv.metaUrl, \"RmdRoot\");\n }\n\n let result = [];\n for (const givId of giv.givs.givs) {\n const token = encodeToken(givId, giv.channelId);\n const { metaUrl } = await getGivInfo(token);\n result.push(await getFileInGiv(metaUrl, \"RmdRoot\"));\n }\n return result;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":255,"value":"rsRoot = getFileInGiv(rmdRoot.rsRootFileUrl, \"RsRoot\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":285,"value":"---\n\n## Summary","pinned":false,"hidden":false,"mode":"md"},{"id":2051,"value":"populatedGiv = getGivInfo(token, true)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1975,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":865,"value":"viewof item = givTree(populatedGiv, rsRoot, actionTypes)","pinned":false,"hidden":false,"mode":"ojs"},{"id":928,"value":"item","pinned":false,"hidden":false,"mode":"ojs"},{"id":296,"value":"scenes = rmdRoot.scenes","pinned":false,"hidden":false,"mode":"ojs"},{"id":299,"value":"objects = scenes.map((d) => d.objects).flat()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1165,"value":"objectAreas = objects.map((d) => d.area).flat()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1131,"value":"objectLocations = objects.map((d) => d.area.coords).flat()","pinned":false,"hidden":false,"mode":"ojs"},{"id":303,"value":"actions = objects.map((d) => d.actions).flat()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1775,"value":"actionTypes = models.lookup(\"RmdActionType\").valuesById","pinned":false,"hidden":false,"mode":"ojs"},{"id":1736,"value":"Plot.plot({\n grid: true,\n marks: [\n Plot.barY(\n actions.map((d) => actionTypes[d.actionType]),\n Plot.groupX({ y: \"count\" }, { fill: (d) => d })\n ),\n Plot.ruleY([0])\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":308,"value":"frames = actions\n .map(({ frames, actionId, actionType, fixedActionArea }) => {\n if (fixedActionArea) {\n return frames.map((frame) => ({\n ...frame,\n ...fixedActionArea,\n actionId,\n actionType\n }));\n }\n return frames.map((frame) => ({ ...frame, actionId, actionType }));\n })\n .flat()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1239,"value":"### Areas","pinned":false,"hidden":false,"mode":"md"},{"id":1695,"value":"previewAreaData = {\n const actionAreas = frames\n .map(({ area, ...rest }) => ({\n ...area,\n ...rest\n }))\n .flat()\n .filter((d) => d.coords.length > 0);\n return [...actionAreas];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1710,"value":"actionIds = _.uniq(previewAreaData.map((d) => d.actionId))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1700,"value":"previewAreaColorScale = d3\n .scaleOrdinal()\n .domain(actionIds)\n .range(d3.schemeTableau10)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1686,"value":"viewof selectedActionIds = {\n return Inputs.checkbox(actionIds, {\n label: \"Select Actions\",\n value: actionIds.slice(0, 1),\n format: (d) =>\n html`${d.slice(0, 8)}`\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1481,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1587,"value":"area","pinned":false,"hidden":false,"mode":"ojs"},{"id":314,"value":"locations = frames\n .map(({ area, actionId }) =>\n area.coords.map((coord) => ({ ...coord, actionId }))\n )\n .flat()","pinned":false,"hidden":false,"mode":"ojs"},{"id":620,"value":"### Scenes","pinned":false,"hidden":false,"mode":"md"},{"id":602,"value":"viewof scene = {\n const values = scenes.map((d) => {\n const url = urlcat(...STORAGE_URL, {\n file: d.backgroundImageFileUrl,\n givId: giv.givId,\n channelId: giv.channelId\n });\n const img = html`

${d.sceneId.slice(\n 0,\n 8\n )}

`;\n return { ...d, img };\n });\n return Inputs.radio(values, {\n value: values[0],\n format: (d) => d.img\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1079,"value":"scene","pinned":false,"hidden":false,"mode":"ojs"},{"id":486,"value":"### Givas\n\nin scene `${scene.sceneId}`","pinned":false,"hidden":false,"mode":"md"},{"id":1432,"value":"viewof action = {\n const actions = scene.objects.map((d) => d.actions).flat();\n return Inputs.radio(actions, {\n label: \"Select action\",\n value: actions[0],\n format: (d) => d.actionId.slice(0, 8)\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1453,"value":"// select first resolution\nfiles = action.actionFiles[0].fileUrls","pinned":false,"hidden":false,"mode":"ojs"},{"id":491,"value":"viewof giva = {\n const sizeOffset = 46;\n\n let givas = [];\n for (const file of files) {\n // get range of size bytes\n const size = await getFileInGiv(file, null, {\n headers: { Range: `bytes=${sizeOffset}-${sizeOffset + 4}` }\n }).then((d) => d.readUInt32BE(0));\n\n // get range of image bytes\n const url = await getFileInGiv(file, null, {\n headers: { Range: `bytes=${sizeOffset + 4}-${sizeOffset + 4 + size}` }\n }).then((d) => {\n const blob = new Blob([d], {\n type: \"image/jpeg\"\n });\n return URL.createObjectURL(blob);\n });\n givas.push({ file, preview: url });\n }\n return Inputs.radio(givas, {\n label: \"Select giva\",\n value: givas[0],\n format: (d) =>\n html`

`\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":737,"value":"### Frames\n\nin giva","pinned":false,"hidden":false,"mode":"md"},{"id":707,"value":"frameUrls = {\n const frames = await getFrames(giva.file);\n return frames.map((d) => URL.createObjectURL(d.imageBlob));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":337,"value":"{\n const images = frameUrls\n .map(\n (d) =>\n `

`\n )\n .join(\"\");\n return html`\n

images in giva: ${frameUrls.length}

${images}

\n`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":505,"value":"{\n const scrubber = Scrubber(frameUrls, {\n delay: 1000 / 30,\n alternate: true,\n autoplay: false,\n loopDelay: 500,\n format: (d, i) => i\n });\n const image = html`

`;\n const el = html`

\n ${scrubber}\n

\n ${image}\n

`;\n scrubber.oninput = () => {\n const frame = scrubber.value;\n image.src = frame;\n };\n return el;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":480,"value":"----\n\n### giva file structure","pinned":false,"hidden":false,"mode":"md"},{"id":648,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":580,"value":"### frames in actions","pinned":false,"hidden":false,"mode":"md"},{"id":559,"value":"Plot.plot({\n x: {\n tickRotate: 20\n },\n y: {\n grid: true\n },\n marks: [\n Plot.barY(actions, {\n x: (d) => d.actionId.slice(0, 8),\n y: (d) => d.frames.length,\n fill: \"actionId\"\n }),\n Plot.ruleY([0])\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":311,"value":"actionFiles = actions\n .map((d) => d.actionFiles)\n .flat()\n .map((d) =>\n d.fileUrls.map((file) => ({ resolution: d.resolutionPercent, file }))\n )\n .flat()","pinned":false,"hidden":false,"mode":"ojs"},{"id":364,"value":"sizes = {\n let result = [];\n for (const { file, resolution } of actionFiles) {\n const url = urlcat(...STORAGE_URL, {\n file,\n givId: giv.givId,\n channelId: giv.channelId\n });\n const size = await fetch(url, { method: \"HEAD\" })\n .then((d) => +d.headers.get(\"content-length\"))\n .catch(() => \"Error\");\n result.push({ resolution, file, size: size / (1024 * 1024) });\n if (result.length % 5 == 0 || result.length == actionFiles.length) {\n yield result;\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":584,"value":"### giva files size","pinned":false,"hidden":false,"mode":"md"},{"id":1941,"value":"{\n const data = d3.rollup(\n sizes,\n (v) => d3.sum(v, (d) => d.size),\n (d) => d.resolution\n );\n const el = Array.from(data)\n .map(\n ([resolution, size]) =>\n `

resolution ${resolution} ➡️ ${size.toFixed(\n 1\n )} Mb

`\n )\n .join(\"\");\n return html`

${el}

`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":409,"value":"Plot.plot({\n height: 300,\n x: {\n label: \"size (in MB)\",\n ticks: 10\n },\n y: {\n label: \"count\",\n grid: true\n },\n facet: {\n data: sizes,\n x: \"resolution\"\n },\n color: {\n type: \"categorical\"\n },\n marks: [\n Plot.rectY(\n sizes,\n Plot.binX(\n { y: \"count\" },\n { x: \"size\", thresholds: 10, fill: \"resolution\" }\n )\n ),\n Plot.text(sizes, Plot.binX({ y: \"sum\" })),\n Plot.ruleY([0])\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":168,"value":"---\n\n## APIs","pinned":false,"hidden":false,"mode":"md"},{"id":164,"value":"API_URL = [\"https://momenti.link/\", \"portal/api/v1/webplayer/giv\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":150,"value":"STORAGE_URL = {\n return [\n `https://giv-contents.storage.googleapis.com`,\n \":channelId/:givId/:file\"\n ];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":175,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":212,"value":"getFile = async (pathInfo, type, init = {}) => {\n const url = urlcat(...STORAGE_URL, pathInfo);\n const res = await fetch(url, init);\n const buffer = arrayBufferToUint8Array(await res.arrayBuffer());\n\n if (!type) {\n return buffer;\n }\n return models.lookupType(type).decode(buffer);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":346,"value":"getFrames = async (giva) => {\n const buffer = await getFileInGiv(giva);\n return parseActionBytes(buffer);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":782,"value":"encodeToken = (givId, channelId) =>\n btoa(`givId/${givId}/channelId/${channelId}`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2028,"value":"getFileInGiv = async (file, type, init = {}) => {\n const url = urlcat(...STORAGE_URL, {\n file,\n givId: giv.givId,\n channelId: giv.channelId\n });\n const res = await fetch(url, init);\n const buffer = arrayBufferToUint8Array(await res.arrayBuffer());\n\n if (!type) {\n return buffer;\n }\n return models.lookupType(type).decode(buffer);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"---\n\n## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":1537,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":24,"value":"function arrayBufferToUint8Array(arrayBuffer) {\n const buffer = Buffer.alloc(arrayBuffer.byteLength);\n const view = new Uint8Array(arrayBuffer);\n for (let i = 0; i < buffer.length; ++i) {\n buffer[i] = view[i];\n }\n return buffer;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":339,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":2372,"value":"partialCircle = {\n const module = await import(\"https://cdn.skypack.dev/svg-partial-circle\");\n return module.default;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2445,"value":"arcLink = (x1, y1, x2, y2, n, k) => {\n const cx = (x1 + x2) / 2;\n const cy = (y1 + y2) / 2;\n const dx = (x2 - x1) / 2;\n const dy = (y2 - y1) / 2;\n for (const i = 0; i < n; i++) {\n if (i == (n - 1) / 2) {\n return `M${x1},${y1}L${x2},${y2}`;\n } else {\n const dd = Math.sqrt(dx * dx + dy * dy);\n const ex = cx + (dy / dd) * k * (i - (n - 1) / 2);\n const ey = cy - (dx / dd) * k * (i - (n - 1) / 2);\n return `M${x1},${y1}Q${ex},${ey},${x2},${y2}`;\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":103,"value":"models = protobuf.Root.fromJSON(await FileAttachment(\"models.json\").json())","pinned":false,"hidden":false,"mode":"ojs"},{"id":95,"value":"protobuf = require(\"https://bundle.run/protobufjs@6.11.2\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"Buffer = {\n const { Buffer } = await import(\"https://cdn.skypack.dev/buffer\");\n return Buffer;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":143,"value":"urlcat = {\n const module = await import(\"https://cdn.skypack.dev/urlcat@2.0.4\");\n return module.default;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":499,"value":"import { Scrubber } from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}