demo updates after feedback

umati · May 3, 2024 · f9a659c · f9a659c
1 parent ec81a47
commit f9a659c
Show file tree

Hide file tree

Showing 7 changed files with 96 additions and 27 deletions.
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
@@ -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
@@ -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
@@ -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
@@ -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 += '<p>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
@@ -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
@@ -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
@@ -931,4 +931,8 @@ html {
 .demoMachine {
   color: black;
   overflow: hidden;
+}
+
+.demoHeading {
+  font-weight: 600;
 }