Skip to content
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

[Image Lab React]: Fixed errors in opening project #15

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

[Image Lab React]: Fixed errors in opening project #15

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
3 changes: 2 additions & 1 deletion imagelab_react/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"dev": "concurrently -k \"BROWSER=none yarn start\" \"yarn:electron\"",
"dev": "concurrently -k \"cross-env BROWSER=none yarn start\" \"yarn:electron\"",
"electron": "electron ."
},
"eslintConfig": {
Expand All @@ -51,6 +51,7 @@
},
"devDependencies": {
"concurrently": "^8.1.0",
"cross-env": "^7.0.3",
"wait-on": "^7.0.1"
}
}
146 changes: 94 additions & 52 deletions imagelab_react/src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
import './App.css';
import './imagelab-block'
import "./App.css";
import "./imagelab-block";
import React, { useState, useEffect, useRef } from "react";
import { BlocklyWorkspace } from "react-blockly";
import Blockly from "blockly";
import { MY_TOOLBOX } from './toolboxConfiguration';
import { Navbar, Alignment, Button, Card, Elevation } from '@blueprintjs/core';
import './CustomBlockly.css';
import ImageViewer from './components/ImageViewer';
import { workspaceConfiguration } from './workspaceConfig';
import { redo, reset, run, undo } from './utils/main';
import { MY_TOOLBOX } from "./toolboxConfiguration";
import { Navbar, Alignment, Button, Card, Elevation } from "@blueprintjs/core";
import "./CustomBlockly.css";
import ImageViewer from "./components/ImageViewer";
import { workspaceConfiguration } from "./workspaceConfig";
import { redo, reset, run, undo } from "./utils/main";

function App() {
const [xml, setXml] = useState("");
Expand All @@ -20,116 +20,158 @@ function App() {
const start = () => {
const topBlock = Blockly.getMainWorkspace().getTopBlocks()[0];
run(topBlock);
}
};

//Hook to handle updating the image
useEffect(() => {
// Add event listener for the message
window.addEventListener('message', handleMessage);
window.addEventListener("message", handleMessage);

// Cleanup the event listener on unmount
return () => {
window.removeEventListener('message', handleMessage);
window.removeEventListener("message", handleMessage);
};
}, []);

useEffect(() => {
return () => {
localStorage.removeItem('base64Image');
localStorage.removeItem('storedImage');
localStorage.removeItem("base64Image");
localStorage.removeItem("storedImage");
};
}, []);

const handleMessage = (event) => {
if (event.data.type === 'imageSelected') {
if (event.data.type === "imageSelected") {
const imageUrl = event.data.imageUrl;
setImageUrl(imageUrl);
}
if (event.data.type === 'imageProcessed') {
if (event.data.type === "imageProcessed") {
const processedImage = event.data.canvasImageData;
setProcessedImage(processedImage);
}
};

const saveWorkspace = () => {
const xmlText = xml;
const element = document.createElement('a');
const file = new Blob([xmlText], { type: 'text/plain' });
const element = document.createElement("a");
const file = new Blob([xmlText], { type: "text/plain" });
element.href = URL.createObjectURL(file);
element.download = 'blockly-workspace.xml';
element.download = "blockly-workspace.xml";
document.body.appendChild(element);
element.click();
}
};

const loadWorkspace = (event) => {
if (event.target.files.length === 0) {
window.alert("No file selected. Please select a project.");
return;
}
const file = event.target.files[0];
if (!file) {
window.alert("Failed to load the file. Please try again.");
return;
}
const reader = new FileReader();

reader.onload = (event) => {
const xml = Blockly.Xml.textToDom(event.target.result);
const workspace = Blockly.getMainWorkspace();
Blockly.Xml.clearWorkspaceAndLoadFromXml(xml, workspace);
try {
const xml = Blockly.Xml.textToDom(event.target.result);
const workspace = Blockly.getMainWorkspace();
Blockly.Xml.clearWorkspaceAndLoadFromXml(xml, workspace);
} catch (e) {
window.alert("Invalid Project file!");
return;
}
};

reader.readAsText(file);
}
return;
};
const handleDownload = () => {
const imageUrl = localStorage.getItem('storedImage');
const imageUrl = localStorage.getItem("storedImage");

if (!imageUrl) {
window.alert('No processed image found in storage!');
window.alert("No processed image found in storage!");
return;
}

const link = document.createElement('a');
const link = document.createElement("a");
link.href = imageUrl;
link.download = 'processed_image.jpg';
link.download = "processed_image.jpg";

link.click();
};

return (
<>
<Navbar>
<Navbar.Group align={Alignment.LEFT}>
<Navbar.Heading>ImageLab</Navbar.Heading>
<Navbar.Divider />
<Button className="bp4-minimal" icon="document-open" text="Open" onClick={() => fileInputRef.current.click()} />
<input type="file" ref={fileInputRef} onChange={loadWorkspace} style={{ display: 'none' }}/>
<Button className="bp4-minimal" icon="document-share" text="Save" onClick={saveWorkspace} />
<Button className="bp4-minimal" icon="lightbulb" />
</Navbar.Group>
<Navbar.Group align={Alignment.RIGHT}>
<Button onClick={start} className="bp4-minimal" icon="play" text="Run" />
<Navbar.Divider />
<Button onClick={undo} className="bp4-minimal" icon="undo" />
<Button onClick={redo} className="bp4-minimal" icon="redo" />
<Button onClick={reset} className="bp4-minimal" icon="reset" />
</Navbar.Group>
<Navbar.Group align={Alignment.LEFT}>
<Navbar.Heading>ImageLab</Navbar.Heading>
<Navbar.Divider />
<Button
className="bp4-minimal"
icon="document-open"
text="Open Project"
onClick={() => fileInputRef.current.click()}
/>
<input
type="file"
ref={fileInputRef}
onChange={loadWorkspace}
accept=".xml"
style={{ display: "none" }}
/>
<Button
className="bp4-minimal"
icon="document-share"
text="Save Project"
onClick={saveWorkspace}
/>
<Button className="bp4-minimal" icon="lightbulb" />
</Navbar.Group>
<Navbar.Group align={Alignment.RIGHT}>
<Button
onClick={start}
className="bp4-minimal"
icon="play"
text="Run"
/>
<Navbar.Divider />
<Button onClick={undo} className="bp4-minimal" icon="undo" />
<Button onClick={redo} className="bp4-minimal" icon="redo" />
<Button onClick={reset} className="bp4-minimal" icon="reset" />
</Navbar.Group>
</Navbar>
<div className='row'>
<div className="row">
<BlocklyWorkspace
className="fill-height"
toolboxConfiguration={MY_TOOLBOX}
initialXml={xml}
onXmlChange={setXml}
workspaceConfiguration={workspaceConfiguration}
/>
<div className='panel'>
<h3>Preview | <Button className="bp4-minimal" icon="download" onClick={handleDownload} /> </h3>
<div className="panel">
<h3>
Preview |{" "}
<Button
className="bp4-minimal"
icon="download"
onClick={handleDownload}
/>{" "}
</h3>
<Card elevation={Elevation.ONE}>
<p>Original Img</p>
<ImageViewer imageUrl={imageUrl} />
</Card>
<br />
<Card elevation={Elevation.ONE}>
<p>Processed Image</p>
<ImageViewer imageUrl={processedImage}/>
<ImageViewer imageUrl={processedImage} />
</Card>
</div>
</div>
</>
)
</>
);
}

export default App;
export default App;
9 changes: 8 additions & 1 deletion imagelab_react/yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4015,7 +4015,14 @@ cosmiconfig@^7.0.0:
path-type "^4.0.0"
yaml "^1.10.0"

cross-spawn@^7.0.2, cross-spawn@^7.0.3:
cross-env@^7.0.3:
version "7.0.3"
resolved "https://registry.yarnpkg.com/cross-env/-/cross-env-7.0.3.tgz#865264b29677dc015ba8418918965dd232fc54cf"
integrity sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==
dependencies:
cross-spawn "^7.0.1"

cross-spawn@^7.0.1, cross-spawn@^7.0.2, cross-spawn@^7.0.3:
version "7.0.3"
resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6"
integrity sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==
Expand Down