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

Caching closes #15 #27

Closed
wants to merge 7 commits into from
+1,606 −7,841
Closed

Caching closes #15 #27

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
b130190
Update of licence period
tnentwig Jul 19, 2021
b411ef1
Update of dependencies
tnentwig Jul 19, 2021
d9d94be
Run prettier
tnentwig Jul 19, 2021
7eebe89
Remove idb-keyval and use sessionStorage
tnentwig Jul 19, 2021
0dc08e0
Use sessionStorage
tnentwig Jul 19, 2021
fff1aae
Usage of sessionStorage
tnentwig Jul 19, 2021
68990e0
Upgraded dependencies
tnentwig Jul 19, 2021
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
2 changes: 1 addition & 1 deletion LICENSE
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
MIT License

Copyright (c) 2019-2020 Tristan Nentwig and Wago Kontakttechnik GmbH & Co. KG
Copyright (c) 2019-2021 Tristan Nentwig and Wago Kontakttechnik GmbH & Co. KG

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
Expand Down
8,020 changes: 955 additions & 7,065 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

49 changes: 24 additions & 25 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,40 +22,39 @@
},
"homepage": "https://github.com/tnentwig/WebVisu#readme",
"devDependencies": {
"@types/brotli": "^1.3.0",
"@types/react": "^17.0.1",
"@types/react-dom": "^17.0.0",
"@types/brotli": "^1.3.1",
"@types/react": "^17.0.14",
"@types/react-dom": "^17.0.9",
"@types/sprintf-js": "^1.1.2",
"@typescript-eslint/eslint-plugin": "^4.14.2",
"@typescript-eslint/parser": "^4.14.2",
"compression-webpack-plugin": "^7.1.2",
"css-loader": "^5.0.1",
"eslint": "^7.19.0",
"@typescript-eslint/eslint-plugin": "^4.28.3",
"@typescript-eslint/parser": "^4.28.3",
"compression-webpack-plugin": "^8.0.1",
"css-loader": "^5.2.7",
"eslint": "^7.31.0",
"eslint-config-prettier": "^7.2.0",
"eslint-loader": "^4.0.2",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-prettier": "^3.4.0",
"eslint-plugin-react-hooks": "^4.2.0",
"html-webpack-plugin": "^4.5.1",
"prettier": "^2.2.1",
"react-dev-utils": "^11.0.2",
"source-map-loader": "^2.0.0",
"html-webpack-plugin": "^4.5.2",
"prettier": "^2.3.2",
"react-dev-utils": "^11.0.4",
"source-map-loader": "^2.0.2",
"style-loader": "^2.0.0",
"ts-loader": "^8.0.14",
"typescript": "^4.1.3",
"webpack": "^5.20.1",
"webpack-cli": "^4.5.0"
"ts-loader": "^8.3.0",
"typescript": "^4.3.5",
"webpack": "^5.45.1",
"webpack-cli": "^4.7.2"
},
"dependencies": {
"@material-ui/core": "^4.11.3",
"fflate": "^0.6.1",
"idb-keyval": "^3.2.0",
"mobx": "^6.1.4",
"@material-ui/core": "^4.12.1",
"fflate": "^0.7.1",
"mobx": "^6.3.2",
"mobx-react-lite": "^3.2.0",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-error-boundary": "^3.1.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-error-boundary": "^3.1.3",
"react-uid": "^2.3.1",
"reactjs-popup": "^2.0.4",
"reactjs-popup": "^2.0.5",
"sprintf-js": "^1.1.2"
}
}
94 changes: 46 additions & 48 deletions src/app/controlcenter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import { observable, action } from 'mobx';
import Popup from 'reactjs-popup';
import ComSocket from './visu/communication/comsocket';
import StateManager from './visu/statemanagement/statemanager';
import { clear } from 'idb-keyval';
import { Visualisation } from './visu/visuparser';
import { ConnectionFault } from './supplements/InfoBox/infobox';
import { ExecutionPopup } from './supplements/PopUps/popup';
Expand Down Expand Up @@ -242,21 +241,17 @@ export default class HTML5Visu {

// Width, height - Definition of the size of the screen. Regard the possibility to make visible this size
// already during creating a visualization in CoDeSys (Target Settings: Display width/height in pixel).
const appletElement = htmlDoc.getElementsByTagName(
'APPLET',
);
const visuWidth = appletElement[0].getAttribute(
'width',
);
const appletElement =
htmlDoc.getElementsByTagName('APPLET');
const visuWidth =
appletElement[0].getAttribute('width');
stateManager.set('VISUWIDTH', visuWidth);
const visuHeight = appletElement[0].getAttribute(
'height',
);
const visuHeight =
appletElement[0].getAttribute('height');
stateManager.set('VISUHEIGHT', visuHeight);

const htmlElement = htmlDoc.getElementsByTagName(
'param',
);
const htmlElement =
htmlDoc.getElementsByTagName('param');
for (let i = 0; i < htmlElement.length; i++) {
const name = htmlElement[i]
.getAttribute('name')
Expand All @@ -275,9 +270,10 @@ export default class HTML5Visu {
case 'UPDATETIME': {
// Definition of the monitoring interval (msec)
// Default: 100
const updateTime = htmlElement[
i
].getAttribute('value');
const updateTime =
htmlElement[i].getAttribute(
'value',
);
stateManager.set(
name,
updateTime,
Expand All @@ -288,9 +284,10 @@ export default class HTML5Visu {
// Definition whether an automatic change to another visualization will be done,
// as soon as the system variable 'CurrentVisu' is changed by the PLC program.
// Default: FALSE
const useCurrentVisu = htmlElement[
i
].getAttribute('value');
const useCurrentVisu =
htmlElement[i].getAttribute(
'value',
);
stateManager.set(
name,
useCurrentVisu,
Expand Down Expand Up @@ -322,9 +319,10 @@ export default class HTML5Visu {
// CoDeSys in a packed format ('<filename>_<extension original format>.zip').
// Example: FALSE
// Example: TRUE
const compressedFiles = htmlElement[
i
].getAttribute('value');
const compressedFiles =
htmlElement[i].getAttribute(
'value',
);
stateManager.set(
name,
compressedFiles,
Expand Down Expand Up @@ -390,9 +388,10 @@ export default class HTML5Visu {
// Example (German): ISO-8859-1
// Example (Russian): ISO-8859-5
// Example (Japanese): MS932
const encodingString = htmlElement[
i
].getAttribute('value');
const encodingString =
htmlElement[i].getAttribute(
'value',
);
stateManager.set(
name,
encodingString,
Expand Down Expand Up @@ -472,27 +471,27 @@ export default class HTML5Visu {
if (response.ok) {
response.arrayBuffer().then(async (buffer) => {
// Get a reference to the global state manager
const stateManager = StateManager.singleton()
.oState;
const stateManager =
StateManager.singleton().oState;
const decoder = new TextDecoder('iso-8859-1');
const text = decoder.decode(buffer);
const data = new window.DOMParser().parseFromString(
text,
'text/xml',
);
const data =
new window.DOMParser().parseFromString(
text,
'text/xml',
);
// Append the global variables
this.appendGlobalVariables(data);
// Get the download ID
const xmlDownloadID = data.getElementsByTagName(
'download-id',
)[0].textContent;
const xmlDownloadID =
data.getElementsByTagName(
'download-id',
)[0].textContent;
// Check, if saved id and received id are not equal
if (
localStorage.getItem('download-id') !==
xmlDownloadID
) {
// Clear old indexedDB
clear();
// Save the download-id
localStorage.setItem(
'download-id',
Expand All @@ -502,18 +501,19 @@ export default class HTML5Visu {
//await this.preloadVisus();
}
// Get the compression value
const xmlCompression = data.getElementsByTagName(
'compression',
)[0].textContent;
const xmlCompression =
data.getElementsByTagName(
'compression',
)[0].textContent;
if (xmlCompression === 'true') {
stateManager.set('COMPRESSION', 'TRUE');
} else {
stateManager.set('COMPRESSION', 'FALSE');
}
// Get the best-fit value
const xmlBestFit = data.getElementsByTagName(
'best-fit',
)[0].textContent;
const xmlBestFit =
data.getElementsByTagName('best-fit')[0]
.textContent;
if (xmlBestFit === 'true') {
stateManager.set('BESTFIT', 'TRUE');
} else {
Expand Down Expand Up @@ -548,16 +548,14 @@ export default class HTML5Visu {
if (thisVisuXML !== null) {
const xmlDict = StateManager.singleton().xmlDict;
if (!xmlDict.has(visuName)) {
const plainxml = stringifyVisuXML(
thisVisuXML,
);
const plainxml =
stringifyVisuXML(thisVisuXML);
xmlDict.set(visuName, plainxml);
}
loadedVisus.push(visuName);
// Get the visualisations which are used as main visush
const mainVisunames = thisVisuXML.getElementsByTagName(
'expr-zoom',
);
const mainVisunames =
thisVisuXML.getElementsByTagName('expr-zoom');
Array.from(mainVisunames).forEach(function (
nameNode,
) {
Expand Down
12 changes: 12 additions & 0 deletions src/app/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,16 @@
import HTML5Visu from './controlcenter';

/*
Fetched visualisations are stored in session storage for faster loading within a session.
A page reload will clear this storage.
*/

window.onunload = function () {
sessionStorage.clear();
};

/*
Display the WebVisu
*/
const objHTML5Visu = new HTML5Visu();
objHTML5Visu.showMainVisu();
32 changes: 18 additions & 14 deletions src/app/visu/communication/comsocket.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,9 +96,10 @@ export default class ComSocket implements IComSocket {
value,
)
) {
let varContent = ComSocket.singleton().oVisuVariables.get(
value,
)!.value;
let varContent =
ComSocket.singleton().oVisuVariables.get(
value,
)!.value;
if (
varContent === null ||
typeof varContent === 'undefined' ||
Expand Down Expand Up @@ -143,9 +144,10 @@ export default class ComSocket implements IComSocket {
value,
)
) {
const varContent = ComSocket.singleton().oVisuVariables.get(
value,
)!.value;
const varContent =
ComSocket.singleton().oVisuVariables.get(
value,
)!.value;
if (
varContent === null ||
typeof varContent !== 'undefined'
Expand Down Expand Up @@ -210,12 +212,12 @@ export default class ComSocket implements IComSocket {
const decoder = new TextDecoder(
'iso-8859-1',
);
const text = decoder.decode(
buffer,
);
const transferarray: Array<string> = text
.slice(1, text.length - 1)
.split('|');
const text =
decoder.decode(buffer);
const transferarray: Array<string> =
text
.slice(1, text.length - 1)
.split('|');
if (
transferarray.length ===
this.requestFrame.listings
Expand All @@ -225,8 +227,10 @@ export default class ComSocket implements IComSocket {
i < transferarray.length;
i++
) {
const varName = this
.lutKeyVariable[i];
const varName =
this.lutKeyVariable[
i
];
if (
this.oVisuVariables.get(
varName,
Expand Down
8 changes: 4 additions & 4 deletions src/app/visu/pars/Elements/Basicshapes/polyshape.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,8 @@ export const PolyShape: React.FunctionComponent<Props> = ({
section,
}) => {
// Check if its on of the allowed shapes like polygon, bezier or polyline
const shape = section.getElementsByTagName('poly-shape')[0]
.innerHTML;
const shape =
section.getElementsByTagName('poly-shape')[0].innerHTML;
// Parse the common informations
if (['polygon', 'bezier', 'polyline'].includes(shape)) {
// Parsing of the fixed parameters
Expand Down Expand Up @@ -56,8 +56,8 @@ export const PolyShape: React.FunctionComponent<Props> = ({
section.getElementsByTagName('line-width')[0]
.innerHTML,
),
elementId: section.getElementsByTagName('elem-id')[0]
.innerHTML,
elementId:
section.getElementsByTagName('elem-id')[0].innerHTML,
rect: [],
center: util.stringToArray(
section.getElementsByTagName('center')[0].innerHTML,
Expand Down
8 changes: 4 additions & 4 deletions src/app/visu/pars/Elements/Basicshapes/simpleshape.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,8 @@ export const SimpleShape: React.FunctionComponent<Props> = ({
section,
}) => {
// Check if its on of the allowed shapes like rectangle, round-rectangle, circle or line
const shape = section.getElementsByTagName('simple-shape')[0]
.innerHTML;
const shape =
section.getElementsByTagName('simple-shape')[0].innerHTML;
// Parse the common informations
if (
['round-rect', 'circle', 'line', 'rectangle'].includes(shape)
Expand Down Expand Up @@ -59,8 +59,8 @@ export const SimpleShape: React.FunctionComponent<Props> = ({
section.getElementsByTagName('line-width')[0]
.innerHTML,
),
elementId: section.getElementsByTagName('elem-id')[0]
.innerHTML,
elementId:
section.getElementsByTagName('elem-id')[0].innerHTML,
rect: util.stringToArray(
section.getElementsByTagName('rect')[0].innerHTML,
),
Expand Down
4 changes: 2 additions & 2 deletions src/app/visu/pars/Elements/Bitmap/bitmap.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,8 +49,8 @@ export const Bitmap: React.FunctionComponent<Props> = ({
lineWidth: Number(
section.getElementsByTagName('line-width')[0].innerHTML,
),
elementId: section.getElementsByTagName('elem-id')[0]
.innerHTML,
elementId:
section.getElementsByTagName('elem-id')[0].innerHTML,
rect: util.stringToArray(
section.getElementsByTagName('rect')[0].innerHTML,
),
Expand Down
4 changes: 2 additions & 2 deletions src/app/visu/pars/Elements/Button/button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,8 +49,8 @@ export const Button: React.FunctionComponent<Props> = ({
lineWidth: Number(
section.getElementsByTagName('line-width')[0].innerHTML,
),
elementId: section.getElementsByTagName('elem-id')[0]
.innerHTML,
elementId:
section.getElementsByTagName('elem-id')[0].innerHTML,
rect: util.stringToArray(
section.getElementsByTagName('rect')[0].innerHTML,
),
Expand Down
Loading