From f9a659cb15fbd40914ff21d7a6eeda8f5a27f1ea Mon Sep 17 00:00:00 2001 From: Joakim Gustafsson Date: Fri, 3 May 2024 12:20:02 +0200 Subject: [PATCH] demo updates after feedback --- .../Views/Demo/CommonPropertyView.mjs | 4 +- .../Views/Demo/IJTPropertyView.mjs | 16 +++++-- .../Javascripts/Views/Demo/USDemo.mjs | 29 ++++++----- .../Javascripts/Views/Demo/USDemoSettings.mjs | 48 +++++++++++++++++++ .../Views/GraphicSupport/BasicScreen.mjs | 6 ++- .../Views/Servers/EndpointGraphics.mjs | 16 ++++--- .../Release2/IJT_Web_Client/nodeStyle.css | 4 ++ 7 files changed, 96 insertions(+), 27 deletions(-) create mode 100644 OPC_UA_Clients/Release2/IJT_Web_Client/Javascripts/Views/Demo/USDemoSettings.mjs diff --git a/OPC_UA_Clients/Release2/IJT_Web_Client/Javascripts/Views/Demo/CommonPropertyView.mjs b/OPC_UA_Clients/Release2/IJT_Web_Client/Javascripts/Views/Demo/CommonPropertyView.mjs index 86112cb..dc723fe 100644 --- a/OPC_UA_Clients/Release2/IJT_Web_Client/Javascripts/Views/Demo/CommonPropertyView.mjs +++ b/OPC_UA_Clients/Release2/IJT_Web_Client/Javascripts/Views/Demo/CommonPropertyView.mjs @@ -31,8 +31,8 @@ export default class CommonPropertyView { const line2 = document.createElement('div') let value = eval(p) // eslint-disable-line if (line1.innerText === 'ResultEvaluation:') { - line1.innerText = 'ResultStatus' - if (value === '1') { + line1.innerText = 'ResultStatus:' + if (value === 'ResultEvaluationEnum.OK') { value = 'OK' line2.style.color = 'green' } else { diff --git a/OPC_UA_Clients/Release2/IJT_Web_Client/Javascripts/Views/Demo/IJTPropertyView.mjs b/OPC_UA_Clients/Release2/IJT_Web_Client/Javascripts/Views/Demo/IJTPropertyView.mjs index fa4851c..e11f497 100644 --- a/OPC_UA_Clients/Release2/IJT_Web_Client/Javascripts/Views/Demo/IJTPropertyView.mjs +++ b/OPC_UA_Clients/Release2/IJT_Web_Client/Javascripts/Views/Demo/IJTPropertyView.mjs @@ -26,14 +26,22 @@ export default class IJTPropertyView { * Run everytime the tab is opened */ displayProps (result) { + function makeHeading (text) { + const heading = document.createElement('div') + heading.classList.add('demoHeading') + heading.innerText = text + return heading + } const content = result.ResultContent[0] // const peaks = content.getTaggedValues(8) const finals = content.getTaggedValues(1) - this.name.innerHTML = 'VALUE' - this.low.innerHTML = 'LOW' - this.measured.innerHTML = 'MEASURED' - this.high.innerHTML = 'HIGH' + this.name.appendChild(makeHeading('Value')) + + // this.name.innerHTML = 'VALUE' + this.low.appendChild(makeHeading('Low')) + this.measured.appendChild(makeHeading('Measured')) + this.high.appendChild(makeHeading('High')) if (finals && finals.length > 0) { for (const final of finals) { const line1 = document.createElement('div') diff --git a/OPC_UA_Clients/Release2/IJT_Web_Client/Javascripts/Views/Demo/USDemo.mjs b/OPC_UA_Clients/Release2/IJT_Web_Client/Javascripts/Views/Demo/USDemo.mjs index 6095bae..9477065 100644 --- a/OPC_UA_Clients/Release2/IJT_Web_Client/Javascripts/Views/Demo/USDemo.mjs +++ b/OPC_UA_Clients/Release2/IJT_Web_Client/Javascripts/Views/Demo/USDemo.mjs @@ -10,14 +10,14 @@ import IJTPropertyView from './IJTPropertyView.mjs' // The machine properties vi * display of a result for OPC UA Industrial Joining Technologies communication */ export default class USDemo extends BasicScreen { - constructor (methodManager, resultManager, connectionManager) { + constructor (methodManager, resultManager, connectionManager, settings) { super('Demo', 'tighteningsystem') this.methodManager = methodManager this.resultManager = resultManager - this.productId = 'www.atlascopco.com/CABLE-B0000000-' - this.JoiningProcess1 = 'ProgramIndex_1' - this.JoiningProcess2 = 'ProgramIndex_2' - this.JoiningProcess3 = 'ProgramIndex_3' + this.settings = settings + // this.productId = 'www.atlascopco.com/CABLE-B0000000-' + // this.JoiningProcess1 = 'ProgramIndex_1' + // this.JoiningProcess2 = 'ProgramIndex_2' const displayArea = document.createElement('div') // displayArea.classList.add('drawAssetBox') @@ -54,6 +54,7 @@ export default class USDemo extends BasicScreen { buttonArea.style.justifyContent = 'center' this.container.appendChild(buttonArea) + /* const button1 = document.createElement('button') button1.innerText = 'Tigtening program 1' button1.classList.add('demoButton') @@ -102,7 +103,7 @@ export default class USDemo extends BasicScreen { console.log(JSON.stringify(fail)) } ) - }) */ + }) const simulateSingleResult = this.methodManager.getMethod('SimulateSingleResult') @@ -137,10 +138,10 @@ export default class USDemo extends BasicScreen { console.log(JSON.stringify(fail)) } ) - }) + }) */ const button2 = document.createElement('button') - button2.innerText = 'Tightening program 2' + button2.innerText = 'Select program 1' button2.classList.add('demoButton') buttonArea.appendChild(button2) @@ -149,9 +150,11 @@ export default class USDemo extends BasicScreen { return } + console.log(this.settings.productId) + const values = [ { - value: this.productId, + value: this.settings.productId, type: { pythonclass: 'NodeId', Identifier: '12', @@ -172,7 +175,7 @@ export default class USDemo extends BasicScreen { value: '', type: '31918' }, { - value: this.JoiningProcess2, + value: this.settings.JoiningProcess1, type: '31918' }] } @@ -189,7 +192,7 @@ export default class USDemo extends BasicScreen { }) const button3 = document.createElement('button') - button3.innerText = 'Tightening program 3' + button3.innerText = 'Select program 2' button3.classList.add('demoButton') buttonArea.appendChild(button3) @@ -200,7 +203,7 @@ export default class USDemo extends BasicScreen { const values = [ { - value: this.productId, + value: this.settings.productId, type: { pythonclass: 'NodeId', Identifier: '12', @@ -221,7 +224,7 @@ export default class USDemo extends BasicScreen { value: '', type: '31918' }, { - value: this.JoiningProcess3, + value: this.settings.JoiningProcess2, type: '31918' }] } diff --git a/OPC_UA_Clients/Release2/IJT_Web_Client/Javascripts/Views/Demo/USDemoSettings.mjs b/OPC_UA_Clients/Release2/IJT_Web_Client/Javascripts/Views/Demo/USDemoSettings.mjs new file mode 100644 index 0000000..175d511 --- /dev/null +++ b/OPC_UA_Clients/Release2/IJT_Web_Client/Javascripts/Views/Demo/USDemoSettings.mjs @@ -0,0 +1,48 @@ +import BasicScreen from '../GraphicSupport/BasicScreen.mjs' // Basic functionality application code for the screen functionality + +/** + * The purpose of this class is to generate an HTML representation of tightening selection and basic + * display of a result for OPC UA Industrial Joining Technologies communication + */ +export default class USDemo extends BasicScreen { + constructor () { + super('DemoSettings', 'tighteningsystem') + + this.productId = 'www.atlascopco.com/CABLE-B0000000-' + this.JoiningProcess1 = 'ProgramIndex_1' + this.JoiningProcess2 = 'ProgramIndex_2' + + const displayArea = document.createElement('div') + this.backGround.appendChild(displayArea) + + this.container = displayArea + + // this.container.innerHTML += '

ProductId' + const labelElement = document.createElement('label') + labelElement.innerHTML = 'ProductId ' + this.container.appendChild(labelElement) + + this.createInput(this.productId, this.container, (evt) => { + this.productId = evt.srcElement.value + }, '40') + this.container.appendChild(document.createElement('br')) + + const labelElement2 = document.createElement('label') + labelElement2.innerHTML = 'Button 1 selection ' + this.container.appendChild(labelElement2) + + this.createInput(this.JoiningProcess1, this.container, (evt) => { + this.JoiningProcess1 = evt.srcElement.value + console.log(evt.srcElement.value) + }, '40') + this.container.appendChild(document.createElement('br')) + + const labelElement3 = document.createElement('label') + labelElement3.innerHTML = 'Button 2 selection ' + this.container.appendChild(labelElement3) + + this.createInput(this.JoiningProcess2, this.container, (evt) => { + this.JoiningProcess2 = evt.srcElement.value + }, '40') + } +} diff --git a/OPC_UA_Clients/Release2/IJT_Web_Client/Javascripts/Views/GraphicSupport/BasicScreen.mjs b/OPC_UA_Clients/Release2/IJT_Web_Client/Javascripts/Views/GraphicSupport/BasicScreen.mjs index d8f5afc..9315e35 100644 --- a/OPC_UA_Clients/Release2/IJT_Web_Client/Javascripts/Views/GraphicSupport/BasicScreen.mjs +++ b/OPC_UA_Clients/Release2/IJT_Web_Client/Javascripts/Views/GraphicSupport/BasicScreen.mjs @@ -50,13 +50,15 @@ export default class BasicScreen { * @param {*} onchange this function is called when the value changed * @returns a function that tells the value of the input field */ - createInput (title, area, onchange, width = 90) { + createInput (title, area, aaa, width = 90) { const newInput = document.createElement('input') newInput.classList.add('inputStyle') newInput.style.width = width + '%' newInput.value = title newInput.spellcheck = false - newInput.onchange = onchange + newInput.onchange = (x) => { + aaa(x) + } if (area) { area.appendChild(newInput) } diff --git a/OPC_UA_Clients/Release2/IJT_Web_Client/Javascripts/Views/Servers/EndpointGraphics.mjs b/OPC_UA_Clients/Release2/IJT_Web_Client/Javascripts/Views/Servers/EndpointGraphics.mjs index b915f2e..d6fdc45 100644 --- a/OPC_UA_Clients/Release2/IJT_Web_Client/Javascripts/Views/Servers/EndpointGraphics.mjs +++ b/OPC_UA_Clients/Release2/IJT_Web_Client/Javascripts/Views/Servers/EndpointGraphics.mjs @@ -3,7 +3,7 @@ */ import { AddressSpace, - AssetManager, + // AssetManager, MethodManager, EventManager, ResultManager, @@ -15,8 +15,9 @@ import TraceGraphics from 'views/Trace/TraceGraphics.mjs' import AddressSpaceGraphics from 'views/AddressSpace/AddressSpaceGraphics.mjs' import EventGraphics from 'views/Events/EventGraphics.mjs' import MethodGraphics from 'views/Methods/MethodGraphics.mjs' +import USDemoSettings from 'views/Demo/USDemoSettings.mjs' import USDemo from 'views/Demo/USDemo.mjs' -import AssetGraphics from 'views/Assets/AssetGraphics.mjs' +// import AssetGraphics from 'views/Assets/AssetGraphics.mjs' import ConnectionGraphics from 'views/Connection/ConnectionGraphics.mjs' import ResultGraphics from 'views/ComplexResult/ResultGraphics.mjs' import TabGenerator from 'views/GraphicSupport/TabGenerator.mjs' @@ -61,9 +62,9 @@ export default class EndpointGraphics extends BasicScreen { const resultManager = new ResultManager(this.connectionManager, eventManager) - const assets = new AssetManager(addressSpace, this.connectionManager) - const asstetGraphics = new AssetGraphics(assets) - tabGenerator.generateTab(asstetGraphics) + // const assets = new AssetManager(addressSpace, this.connectionManager) + // const asstetGraphics = new AssetGraphics(assets) + // tabGenerator.generateTab(asstetGraphics) const traceGraphics = new TraceGraphics(['angle', 'torque'], addressSpace, resultManager) tabGenerator.generateTab(traceGraphics) @@ -72,7 +73,10 @@ export default class EndpointGraphics extends BasicScreen { const methodGraphics = new MethodGraphics(methodManager, addressSpace) tabGenerator.generateTab(methodGraphics) - const demoGraphics = new USDemo(methodManager, resultManager, this.connectionManager) + const demoSettings = new USDemoSettings() + tabGenerator.generateTab(demoSettings) + + const demoGraphics = new USDemo(methodManager, resultManager, this.connectionManager, demoSettings) tabGenerator.generateTab(demoGraphics) const resultGraphics = new ResultGraphics(resultManager) diff --git a/OPC_UA_Clients/Release2/IJT_Web_Client/nodeStyle.css b/OPC_UA_Clients/Release2/IJT_Web_Client/nodeStyle.css index 5fe1b6c..9149637 100644 --- a/OPC_UA_Clients/Release2/IJT_Web_Client/nodeStyle.css +++ b/OPC_UA_Clients/Release2/IJT_Web_Client/nodeStyle.css @@ -931,4 +931,8 @@ html { .demoMachine { color: black; overflow: hidden; +} + +.demoHeading { + font-weight: 600; } \ No newline at end of file