Skip to content

Module syntax conversion #7257

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 9 commits into from
Sep 12, 2024
Merged

Module syntax conversion #7257

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
70fae99
Convert utilities to use new module syntax
limzykenneth Sep 9, 2024
02dfb05
Convert events to use new module syntax
limzykenneth Sep 9, 2024
966741e
Remove unused argument in initialization function
limzykenneth Sep 9, 2024
b566b07
Convert io to use new module syntax
limzykenneth Sep 9, 2024
358db9b
Convert image to use new module syntax
limzykenneth Sep 9, 2024
f7f802a
Convert data to use new module syntax
limzykenneth Sep 9, 2024
2c82a0a
Convert color to use new module syntax
limzykenneth Sep 9, 2024
ececa2c
Convert accessibility to use new module syntax
limzykenneth Sep 10, 2024
3a63c37
Add one missing file
limzykenneth Sep 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1,383 changes: 694 additions & 689 deletions src/accessibility/color_namer.js
View file
Open in desktop

Large diffs are not rendered by default.

919 changes: 462 additions & 457 deletions src/accessibility/describe.js
View file
Open in desktop

Large diffs are not rendered by default.

263 changes: 134 additions & 129 deletions src/accessibility/gridOutput.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,151 +4,156 @@
* @for p5
* @requires core
*/
import p5 from '../core/main';

//the functions in this file support updating the grid output
function gridOutput(p5, fn){
//the functions in this file support updating the grid output

//updates gridOutput
p5.prototype._updateGridOutput = function(idT) {
//if html structure is not there yet
if (!this.dummyDOM.querySelector(`#${idT}_summary`)) {
return;
}
let current = this._accessibleOutputs[idT];
//create shape details list
let innerShapeDetails = _gridShapeDetails(idT, this.ingredients.shapes);
//create summary
let innerSummary = _gridSummary(
innerShapeDetails.numShapes,
this.ingredients.colors.background,
this.width,
this.height
);
//create grid map
let innerMap = _gridMap(idT, this.ingredients.shapes);
//if it is different from current summary
if (innerSummary !== current.summary.innerHTML) {
//update
current.summary.innerHTML = innerSummary;
}
//if it is different from current map
if (innerMap !== current.map.innerHTML) {
//update
current.map.innerHTML = innerMap;
}
//if it is different from current shape details
if (innerShapeDetails.details !== current.shapeDetails.innerHTML) {
//update
current.shapeDetails.innerHTML = innerShapeDetails.details;
}
this._accessibleOutputs[idT] = current;
};

//creates spatial grid that maps the location of shapes
function _gridMap(idT, ingredients) {
let shapeNumber = 0;
let table = '';
//create an array of arrays 10*10 of empty cells
let cells = Array.from(Array(10), () => Array(10));
for (let x in ingredients) {
for (let y in ingredients[x]) {
let fill;
if (x !== 'line') {
fill = `<a href="#${idT}shape${shapeNumber}">${
ingredients[x][y].color
} ${x}</a>`;
} else {
fill = `<a href="#${idT}shape${shapeNumber}">${
ingredients[x][y].color
} ${x} midpoint</a>`;
}
//updates gridOutput
fn._updateGridOutput = function(idT) {
//if html structure is not there yet
if (!this.dummyDOM.querySelector(`#${idT}_summary`)) {
return;
}
let current = this._accessibleOutputs[idT];
//create shape details list
let innerShapeDetails = _gridShapeDetails(idT, this.ingredients.shapes);
//create summary
let innerSummary = _gridSummary(
innerShapeDetails.numShapes,
this.ingredients.colors.background,
this.width,
this.height
);
//create grid map
let innerMap = _gridMap(idT, this.ingredients.shapes);
//if it is different from current summary
if (innerSummary !== current.summary.innerHTML) {
//update
current.summary.innerHTML = innerSummary;
}
//if it is different from current map
if (innerMap !== current.map.innerHTML) {
//update
current.map.innerHTML = innerMap;
}
//if it is different from current shape details
if (innerShapeDetails.details !== current.shapeDetails.innerHTML) {
//update
current.shapeDetails.innerHTML = innerShapeDetails.details;
}
this._accessibleOutputs[idT] = current;
};

// Check if shape is in canvas, skip if not
if(
ingredients[x][y].loc.locY < cells.length &&
ingredients[x][y].loc.locX < cells[ingredients[x][y].loc.locY].length
){
//if empty cell of location of shape is undefined
if (!cells[ingredients[x][y].loc.locY][ingredients[x][y].loc.locX]) {
//fill it with shape info
cells[ingredients[x][y].loc.locY][ingredients[x][y].loc.locX] = fill;
//if a shape is already in that location
//creates spatial grid that maps the location of shapes
function _gridMap(idT, ingredients) {
let shapeNumber = 0;
let table = '';
//create an array of arrays 10*10 of empty cells
let cells = Array.from(Array(10), () => Array(10));
for (let x in ingredients) {
for (let y in ingredients[x]) {
let fill;
if (x !== 'line') {
fill = `<a href="#${idT}shape${shapeNumber}">${
ingredients[x][y].color
} ${x}</a>`;
} else {
//add it
cells[ingredients[x][y].loc.locY][ingredients[x][y].loc.locX] =
cells[ingredients[x][y].loc.locY][ingredients[x][y].loc.locX] +
' ' +
fill;
fill = `<a href="#${idT}shape${shapeNumber}">${
ingredients[x][y].color
} ${x} midpoint</a>`;
}

// Check if shape is in canvas, skip if not
if(
ingredients[x][y].loc.locY < cells.length &&
ingredients[x][y].loc.locX < cells[ingredients[x][y].loc.locY].length
){
//if empty cell of location of shape is undefined
if (!cells[ingredients[x][y].loc.locY][ingredients[x][y].loc.locX]) {
//fill it with shape info
cells[ingredients[x][y].loc.locY][ingredients[x][y].loc.locX] = fill;
//if a shape is already in that location
} else {
//add it
cells[ingredients[x][y].loc.locY][ingredients[x][y].loc.locX] =
cells[ingredients[x][y].loc.locY][ingredients[x][y].loc.locX] +
' ' +
fill;
}
shapeNumber++;
}
shapeNumber++;
}
}
}
//make table based on array
for (let _r in cells) {
let row = '<tr>';
for (let c in cells[_r]) {
row = row + '<td>';
if (cells[_r][c] !== undefined) {
row = row + cells[_r][c];
//make table based on array
for (let _r in cells) {
let row = '<tr>';
for (let c in cells[_r]) {
row = row + '<td>';
if (cells[_r][c] !== undefined) {
row = row + cells[_r][c];
}
row = row + '</td>';
}
row = row + '</td>';
table = table + row + '</tr>';
}
table = table + row + '</tr>';
return table;
}
return table;
}

//creates grid summary
function _gridSummary(numShapes, background, width, height) {
let text = `${background} canvas, ${width} by ${height} pixels, contains ${
numShapes[0]
}`;
if (numShapes[0] === 1) {
text = `${text} shape: ${numShapes[1]}`;
} else {
text = `${text} shapes: ${numShapes[1]}`;
//creates grid summary
function _gridSummary(numShapes, background, width, height) {
let text = `${background} canvas, ${width} by ${height} pixels, contains ${
numShapes[0]
}`;
if (numShapes[0] === 1) {
text = `${text} shape: ${numShapes[1]}`;
} else {
text = `${text} shapes: ${numShapes[1]}`;
}
return text;
}
return text;
}

//creates list of shapes
function _gridShapeDetails(idT, ingredients) {
let shapeDetails = '';
let shapes = '';
let totalShapes = 0;
//goes trhough every shape type in ingredients
for (let x in ingredients) {
let shapeNum = 0;
for (let y in ingredients[x]) {
//it creates a line in a list
let line = `<li id="${idT}shape${totalShapes}">${
ingredients[x][y].color
} ${x},`;
if (x === 'line') {
line =
line +
` location = ${ingredients[x][y].pos}, length = ${
ingredients[x][y].length
} pixels`;
} else {
line = line + ` location = ${ingredients[x][y].pos}`;
if (x !== 'point') {
line = line + `, area = ${ingredients[x][y].area} %`;
//creates list of shapes
function _gridShapeDetails(idT, ingredients) {
let shapeDetails = '';
let shapes = '';
let totalShapes = 0;
//goes trhough every shape type in ingredients
for (let x in ingredients) {
let shapeNum = 0;
for (let y in ingredients[x]) {
//it creates a line in a list
let line = `<li id="${idT}shape${totalShapes}">${
ingredients[x][y].color
} ${x},`;
if (x === 'line') {
line =
line +
` location = ${ingredients[x][y].pos}, length = ${
ingredients[x][y].length
} pixels`;
} else {
line = line + ` location = ${ingredients[x][y].pos}`;
if (x !== 'point') {
line = line + `, area = ${ingredients[x][y].area} %`;
}
line = line + '</li>';
}
line = line + '</li>';
shapeDetails = shapeDetails + line;
shapeNum++;
totalShapes++;
}
if (shapeNum > 1) {
shapes = `${shapes} ${shapeNum} ${x}s`;
} else {
shapes = `${shapes} ${shapeNum} ${x}`;
}
shapeDetails = shapeDetails + line;
shapeNum++;
totalShapes++;
}
if (shapeNum > 1) {
shapes = `${shapes} ${shapeNum} ${x}s`;
} else {
shapes = `${shapes} ${shapeNum} ${x}`;
}
return { numShapes: [totalShapes, shapes], details: shapeDetails };
}
return { numShapes: [totalShapes, shapes], details: shapeDetails };
}

export default p5;
export default gridOutput;

if(typeof p5 !== 'undefined'){
gridOutput(p5, p5.prototype);
}
13 changes: 13 additions & 0 deletions src/accessibility/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import describe from './describe.js';
import gridOutput from './gridOutput.js';
import textOutput from './textOutput.js';
import outputs from './outputs.js';
import colorNamer from './color_namer.js';

export default function(p5){
p5.registerAddon(describe);
p5.registerAddon(gridOutput);
p5.registerAddon(textOutput);
p5.registerAddon(outputs);
p5.registerAddon(colorNamer);
}
Loading
Loading