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

Jump to bottom

[Image Lab React] Initialized i18n for localization #10

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
+182 −57
Open

[Image Lab React] Initialized i18n for localization #10

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
6 changes: 5 additions & 1 deletion imagelab_react/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,13 @@
"blockly": "^9.3.3",
"electron": "^25.0.1",
"electron-is-dev": "^2.0.0",
"i18next": "^23.10.1",
"i18next-browser-languagedetector": "^7.2.0",
"jimp": "^0.22.8",
"react": "^18.2.0",
"react-blockly": "^7.2.2",
"react-dom": "^18.2.0",
"react-i18next": "^14.1.0",
"react-scripts": "5.0.1",
"react-zoom-pan-pinch": "^3.1.0",
"sharp": "^0.32.1",
Expand All @@ -28,7 +31,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 +54,7 @@
},
"devDependencies": {
"concurrently": "^8.1.0",
"cross-env": "^7.0.3",
"wait-on": "^7.0.1"
}
}
131 changes: 82 additions & 49 deletions imagelab_react/src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,18 @@
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";
import { useTranslation } from "react-i18next";

function App() {
const [t, i18n] = useTranslation();
const [xml, setXml] = useState("");
const [imageUrl, setImageUrl] = useState(null);
const [processedImage, setProcessedImage] = useState(null);
Expand All @@ -20,116 +22,147 @@ function App() {
const start = () => {
const topBlock = Blockly.getMainWorkspace().getTopBlocks()[0];
run(topBlock);
}
};

useEffect(() => {
console.log("Detected language:", i18n.language);
}, [i18n.language]);

//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) => {
const file = event.target.files[0];
const reader = new FileReader();

reader.onload = (event) => {
const xml = Blockly.Xml.textToDom(event.target.result);
const workspace = Blockly.getMainWorkspace();
Blockly.Xml.clearWorkspaceAndLoadFromXml(xml, workspace);
};

reader.readAsText(file);
}
};
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"
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>
<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;
34 changes: 34 additions & 0 deletions imagelab_react/src/i18n.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import LanguageDetector from "i18next-browser-languagedetector";
const resources = {
en: {
translation: {
paragraph: "internationalization",
},
},
si: {
translation: {
paragraph: "ජාත්යන්තරකරණය",
},
},
ta: {
translation: {
paragraph: "சர்வதேசமயமாக்கல்",
},
},
};

i18n
.use(LanguageDetector)
.use(initReactI18next)
.init({
resources,
lng: "en",
fallbackLng: "si",
interpolation: {
escapeValue: false, // not needed for react as it escapes by default
},
});

export default i18n;
13 changes: 7 additions & 6 deletions imagelab_react/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import "./i18n.js";

const root = ReactDOM.createRoot(document.getElementById('root'));
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<React.StrictMode>
<App />
Expand Down
Loading