gripper-opened

// Schlumberger Public // visualization for propositional blocksworld with implicit grippers /** * Populates the `planVizDiv` element with the plan visualization of the `finalState`. * @param {HTMLDivElement} planVizDiv host element on the page * @param {Plan} plan plan to be visualized * @param {{variableName: string, value: number | boolean}[]} finalState final state of the `plan` * @param {number} displayWidth desired width in pixels */ function visualizeStateInDiv(planVizDiv, plan, finalState, displayWidth) { for (const v of finalState) { console.log(`${v.variableName}: ${v.value}`); } const valueMap = new Map(finalState.map(i => [i.variableName, i.value])); // get all domain constants plus problem objects const allObjects = plan.problem && plan.problem.getObjectsTypeMap() && plan.domain && plan.domain.getConstants() && plan.domain.getConstants().merge(plan.problem.getObjectsTypeMap()); // get block names sorted lexicographically /** @type {string[]} */ const blocks = allObjects ? allObjects.getTypeCaseInsensitive("block").getObjects() : [...new Set(plan.steps.map(s => s.getObjects()).reduce((prev, cur) => prev.concat(cur)))]; const style = document.createElement("style"); style.textContent = blocksCss.split(/[\r\n]/).join(''); planVizDiv.appendChild(style); // todo: this should probably depend on the overall number of blocks const height = 250; planVizDiv.style.height = `${height}px`; // create the host element const canvas = document.createElement("div"); canvas.id = "blocksState"; canvas.style.height = `${height}px`; canvas.style.width = `${displayWidth}px`; planVizDiv.appendChild(canvas); // show the gripper: const gripper = document.createElement('div'); gripper.innerHTML = valueMap.get('handempty') ? gripperOpen : gripperClosed; canvas.appendChild(gripper); const onTableBlocks = blocks .filter(block => valueMap.get(`ontable ${block.toLowerCase()}`)) .sort(); // paint all block towers one by one for (let towerIndex = 0; towerIndex < onTableBlocks.length; towerIndex++) { const blockName = onTableBlocks[towerIndex]; placeBlockIntoTower(blockName, canvas, towerIndex, 0, [], valueMap, blocks); } // find the block that is being held by the gripper for (const block of blocks){ if (valueMap.get(`holding ${block.toLowerCase()}`)) { paintGrippedBlock(block, canvas, blocks); } } } /** * Paints block being gripped by the robotic arm. * @param {string} name block name / background color * @param {HTMLDivElement} canvas host element * @param {string[]} allBlocks all block names */ function paintGrippedBlock(name, canvas, allBlocks) { const block = document.createElement('div'); block.className = "block"; block.id = name; block.style.background =toColor(name, allBlocks); block.textContent = name; block.style.top = 50 + 'px'; block.style.left = 27 + 'px'; canvas.appendChild(block); } /** * Places block in tower and re-cursively continues upwards. * @param {string} blockName block name / background color * @param {HTMLDivElement} canvas host element * @param {number} tower index of the tower (0 is the first on the left) * @param {number} level bottom-up level index (0 is on the bottom) * @param {string[]} blocksInThisTower endless loop breaker to guard against invalid models * @param {Map} valueMap final state value map * @param {string[]} allBlocks all block names */ function placeBlockIntoTower(blockName, canvas, tower, level, blocksInThisTower, valueMap, allBlocks) { paintBlock(blockName, canvas, tower, level, allBlocks); blocksInThisTower = blocksInThisTower + [blockName]; if (!valueMap.get(`clear ${blockName.toLowerCase()}`)) { for (const otherBlockName of allBlocks) { if (valueMap.get(`on ${otherBlockName.toLowerCase()} ${blockName.toLowerCase()}`)) { if (!blocksInThisTower.includes(otherBlockName)) { placeBlockIntoTower(otherBlockName, canvas, tower, level+1, blocksInThisTower, valueMap, allBlocks); } else { console.warn(`Block ${otherBlockName} is already in tower ${blocksInThisTower}. Skipping.`); } } } } } /** * Paints blocks sitting on the table or on another block. * @param {string} name block name / background color * @param {HTMLDivElement} canvas host element * @param {number} tower index of the tower (0 is the first on the left) * @param {number} level bottom-up level index (0 is on the bottom) * @param {string[]} allBlocks all block names */ function paintBlock(name, canvas, tower, level, allBlocks) { const block = document.createElement('div'); block.className = "block"; block.id = name; block.style.background = toColor(name, allBlocks); block.textContent = name; block.style.bottom = level * 50 + 1 + 'px'; block.style.left = tower * 50 + 1 + 'px'; canvas.appendChild(block); } /** * Converts block name to color * @param {string} name block name * @param {string[]} allBlocks all block names * @returns {string} css color name */ function toColor(name, allBlocks) { if (COLORS.includes(name)) { return name; } else { const index = allBlocks.findIndex(b => b === name); console.log(index); return COLORS[(3*index + 11) % COLORS.length]; } } module.exports = { visualizeStateInDiv: visualizeStateInDiv }; const blocksCss = ` div.block { width: 47px; height: 47px; border-radius: 5px; border-width: 1px; border-style: solid; position: absolute; opacity: 0.75; text-align: center; color: black; } div#blocksState { background-color: whitesmoke; border-color: #03A9F4; border-radius: 5px; border-width: 1px; border-style: solid; min-width: 200px; position: relative; /* overflow: scroll; */ } `; const gripperClosed = ``; const gripperOpen = ``; const COLORS = ["Blue", "BlueViolet", "Brown", "BurlyWood", "CadetBlue", "Chartreuse", "Chocolate", "Coral", "CornflowerBlue", "Crimson", "Cyan", "DeepPink", "FireBrick", "GhostWhite", "Gold", "GoldenRod", "Gray", "Green", "GreenYellow", "HotPink", "IndianRed", "Indigo", "Ivory", "Khaki", "Lavender", "Lime", "LimeGreen", "Linen", "Magenta", "Maroon", "Navy", "Olive", "Orange", "OrangeRed", "Orchid", "Peru", "Pink", "Plum", "PowderBlue", "Purple", "Red", "RosyBrown", "RoyalBlue", "SaddleBrown", "Salmon", "SandyBrown", "SeaGreen", "Sienna", "Silver", "SkyBlue", "SpringGreen", "SteelBlue", "Tan", "Teal", "Thistle", "Tomato", "Turquoise", "Violet", "Wheat", "White", "WhiteSmoke", "Yellow", "YellowGreen"] .map(c => c.toLowerCase());

Overview

Configuration

Motion

​Lynch & Park

Lynch & Park