@mkart-vrn Apologies for the delay. As promised here is the markup and export of the scripting datasource.
Page Markup:
<div class="ma-designer-root" id="11c26dc1-8e3d-475e-ba22-1b6d9c37eb0c" style="width: 1366px; height: 768px; position: relative; "
>
<ma-get-point-value point-xid="startTime" point="_startTime"></ma-get-point-value>
<ma-get-point-value point-xid="stopTime" point="_stopTime"></ma-get-point-value>
<ma-get-point-value point-xid="Start" point="_Start"></ma-get-point-value>
<ma-get-point-value point-xid="formattedDuration" point="formattedDurationPt" ></ma-get-point-value>
<ma-switch id="0022dde1-a203-4176-a0eb-9b120feb36a3" style="position: absolute; left: 220px; top: 60px; font-weight: bold; font-family: fantasy; text-align: center; width: 100px; height: 70px; background-color: rgb(153, 153, 255); color: rgb(0, 0, 0);" display-type="switch" point="_Start" label="NAME"
ng-click=>Start</ma-switch>
<ma-now update-interval="1 SECONDS" output="time" browser-timezone="browserTz"></ma-now>
<div id="7ebdece1-8366-4df8-b660-62c0c19da235" style="position: absolute; left: 10px; top: 10px; width: 170px; height: 30px; font-weight: normal; line-height: 13px; font-size: 20px; font-family: fantasy;">{{time|maMoment:'format':' DD.MM.YY HH:mm:ss '}}</div>
<div id="b554c70c-e4ab-49f8-89be-0b1348180c96" style="position: absolute; left: 370px; top: 70px; width: 210px; height: 30px;">Start time: {{_startTime.time|maMoment:'format':' DD.MM.YY HH:mm:ss '}}</div>
<div id="55e794bb-b763-4d59-b2c7-b03bfac43d87" style="position: absolute; left: 370px; top: 100px; width: 210px; height: 30px;" ng-show="_Start.value == false">Stop time :{{(_stopTime.time)|maMoment:'format':' DD.MM.YY HH:mm:ss '}}</div>
<div id="36cc40c9-66d1-4369-9b29-b18edf4cb066" style="position: absolute; left: 670px; top: 90px; width: 210px; height: 30px;" ng-show="_Start.value == false">{{_stopTime.time | maMoment:'diff':_startTime.time|maDuration:'as':'seconds'}}{{"sec = "}} {{formattedDurationPt.value}}</div>
<!--|maDuration:'as':'hours'DD [day] HH:mm:ss '}}-->
<ma-indicator id="af49567e-6576-49f5-9bdd-8d8808324cbc" style="position: absolute; width: 30px; height: 30px; left: 330px; top: 80px;" color-false="#ff0000" color-true="#00f500" toggle-on-click="true" point="_Start"></ma-indicator>
<div id="fe605657-ed93-4361-9755-7d4ff023ed1f" style="position: absolute; left: 670px; top: 90px; width: 140px; height: 30px;" ng-show="_Start.value">{{(time|maMoment:'diff':_startTime.time|maMoment|maDuration:'as':'seconds')}} sec</div>
<div id="fffc771a-27b3-463b-b464-fdaf9db2841d" style="position: absolute; left: 590px; top: 90px; width: 150px; height: 30px;">Duration:</div>
</div>
Export of scripting datasource:
{
"dataSources":[
{
"xid":"DS_4c94a9ca-5945-47a3-b769-d03ec7bee8fc",
"name":"Stopwatch script",
"enabled":true,
"type":"SCRIPTING",
"alarmLevels":{
"SCRIPT_ERROR":"URGENT",
"CONTEXT_POINT_DISABLED":"IGNORE",
"DATA_TYPE_ERROR":"URGENT",
"POLL_ABORTED":"URGENT",
"LOG_ERROR":"URGENT"
},
"purgeType":"YEARS",
"updatePeriods":1,
"updatePeriodType":"MINUTES",
"updateEvent":"CHANGE",
"context":[
],
"logLevel":"NONE",
"scriptPermissions":[
"superadmin"
],
"polling":false,
"executionDelaySeconds":0,
"historicalSetting":false,
"logCount":5,
"logSize":1.0,
"script":"var TIMESTAMP = CONTEXT.getTimestamp(); \/\/ Get ts of when script triggered to match when switch was fired\nvar SECONDS = 1000; \/\/ 1000ms\nvar MINUTE_SECONDS = SECONDS * 60; \/\/ 1000ms x 60s\nvar HOUR_SECONDS = MINUTE_SECONDS * 60; \/\/ 1000ms x 60s x 60min\nvar DAY_SECONDS = HOUR_SECONDS * 24; \/\/ 1000ms x 60s x 60min x 24hr\n\nvar days=0,hours=0,mins=0,sec=0; \n\n\nif ( start.value===true )\n{\n startTime.set(TIMESTAMP,TIMESTAMP)\n}\nif ( start.value===false )\n{\n stopTime.set(TIMESTAMP,TIMESTAMP)\n var diff = (TIMESTAMP-startTime.time);\n var formattedStr = \"\";\n\n if(diff>DAY_SECONDS)\n {\n days = Math.floor(diff \/ DAY_SECONDS); \/\/get whole days\n diff = diff % DAY_SECONDS; \/\/ get remainder\n }\n formattedStr += days+\" Days \";\n if(diff>HOUR_SECONDS)\n {\n hours = Math.floor(diff \/ HOUR_SECONDS);\n diff = diff % HOUR_SECONDS;\n }\n formattedStr += hours<10?\"0\"+hours:hours;\n if(diff>MINUTE_SECONDS)\n {\n mins = Math.floor(diff \/ MINUTE_SECONDS);\n diff = diff % MINUTE_SECONDS;\n }\n formattedStr += \":\";\n\n formattedStr += mins<10?\"0\"+mins:mins;\n\n if(diff>SECONDS)\n {\n sec = diff \/ SECONDS;\n\n }\n \n formattedStr += \":\";\n formattedStr += sec<10?\"0\"+sec:sec;\n\n\n formattedDuration.set(formattedStr)\n}\n\n \n ",
"quantize":false,
"useCron":false,
"editPermission":"superadmin",
"purgeOverride":false,
"purgePeriod":1
}
],
"dataPoints":[
{
"xid":"Start",
"name":"Start",
"enabled":true,
"loggingType":"ALL",
"intervalLoggingPeriodType":"MINUTES",
"intervalLoggingType":"INSTANT",
"purgeType":"YEARS",
"pointLocator":{
"dataType":"BINARY",
"contextUpdate":true,
"settable":true,
"varName":"start"
},
"eventDetectors":[
],
"plotType":"STEP",
"rollup":"NONE",
"unit":"",
"simplifyType":"NONE",
"chartColour":"",
"chartRenderer":{
"type":"TABLE",
"limit":10
},
"dataSourceXid":"DS_4c94a9ca-5945-47a3-b769-d03ec7bee8fc",
"defaultCacheSize":1,
"deviceName":"Stopwatch script",
"discardExtremeValues":false,
"discardHighLimit":1.7976931348623157E308,
"discardLowLimit":-1.7976931348623157E308,
"intervalLoggingPeriod":1,
"intervalLoggingSampleWindowSize":0,
"overrideIntervalLoggingSamples":false,
"preventSetExtremeValues":false,
"purgeOverride":false,
"purgePeriod":1,
"readPermission":"user",
"setExtremeHighLimit":1.7976931348623157E308,
"setExtremeLowLimit":-1.7976931348623157E308,
"setPermission":"user",
"tags":{
},
"textRenderer":{
"type":"BINARY",
"oneColour":"#00ff00",
"oneLabel":"ON",
"zeroColour":"#0000ff",
"zeroLabel":"OFF"
},
"tolerance":0.0
},
{
"xid":"startTime",
"name":"startTime",
"enabled":true,
"loggingType":"ON_CHANGE",
"intervalLoggingPeriodType":"MINUTES",
"intervalLoggingType":"AVERAGE",
"purgeType":"YEARS",
"pointLocator":{
"dataType":"NUMERIC",
"contextUpdate":false,
"settable":true,
"varName":"startTime"
},
"eventDetectors":[
],
"plotType":"SPLINE",
"rollup":"NONE",
"unit":"",
"simplifyType":"NONE",
"chartColour":"",
"chartRenderer":{
"type":"IMAGE",
"timePeriodType":"DAYS",
"numberOfPeriods":1
},
"dataSourceXid":"DS_4c94a9ca-5945-47a3-b769-d03ec7bee8fc",
"defaultCacheSize":1,
"deviceName":"Stopwatch script",
"discardExtremeValues":false,
"discardHighLimit":1.7976931348623157E308,
"discardLowLimit":-1.7976931348623157E308,
"intervalLoggingPeriod":1,
"intervalLoggingSampleWindowSize":0,
"overrideIntervalLoggingSamples":false,
"preventSetExtremeValues":false,
"purgeOverride":false,
"purgePeriod":1,
"readPermission":"",
"setExtremeHighLimit":1.7976931348623157E308,
"setExtremeLowLimit":-1.7976931348623157E308,
"setPermission":"",
"tags":{
},
"textRenderer":{
"type":"ANALOG",
"useUnitAsSuffix":false,
"suffix":"",
"format":"0.00"
},
"tolerance":0.0
},
{
"xid":"stopTime",
"name":"stopTime",
"enabled":true,
"loggingType":"ON_CHANGE",
"intervalLoggingPeriodType":"MINUTES",
"intervalLoggingType":"INSTANT",
"purgeType":"YEARS",
"pointLocator":{
"dataType":"NUMERIC",
"contextUpdate":false,
"settable":true,
"varName":"stopTime"
},
"eventDetectors":[
],
"plotType":"SPLINE",
"rollup":"NONE",
"unit":"",
"simplifyType":"NONE",
"chartColour":"",
"chartRenderer":{
"type":"IMAGE",
"timePeriodType":"DAYS",
"numberOfPeriods":1
},
"dataSourceXid":"DS_4c94a9ca-5945-47a3-b769-d03ec7bee8fc",
"defaultCacheSize":1,
"deviceName":"Stopwatch script",
"discardExtremeValues":false,
"discardHighLimit":1.7976931348623157E308,
"discardLowLimit":-1.7976931348623157E308,
"intervalLoggingPeriod":15,
"intervalLoggingSampleWindowSize":0,
"overrideIntervalLoggingSamples":false,
"preventSetExtremeValues":false,
"purgeOverride":false,
"purgePeriod":1,
"readPermission":"",
"setExtremeHighLimit":1.7976931348623157E308,
"setExtremeLowLimit":-1.7976931348623157E308,
"setPermission":"",
"tags":{
},
"textRenderer":{
"type":"ANALOG",
"useUnitAsSuffix":false,
"suffix":"",
"format":"0.00"
},
"tolerance":0.0
},
{
"xid":"formattedDuration",
"name":"formattedDuration",
"enabled":true,
"loggingType":"ON_CHANGE",
"intervalLoggingPeriodType":"MINUTES",
"intervalLoggingType":"INSTANT",
"purgeType":"YEARS",
"pointLocator":{
"dataType":"ALPHANUMERIC",
"contextUpdate":false,
"settable":true,
"varName":"formattedDuration"
},
"eventDetectors":[
],
"plotType":"STEP",
"rollup":"NONE",
"unit":"",
"simplifyType":"NONE",
"chartColour":"",
"chartRenderer":{
"type":"TABLE",
"limit":10
},
"dataSourceXid":"DS_4c94a9ca-5945-47a3-b769-d03ec7bee8fc",
"defaultCacheSize":1,
"deviceName":"Stopwatch script",
"discardExtremeValues":false,
"discardHighLimit":1.7976931348623157E308,
"discardLowLimit":-1.7976931348623157E308,
"intervalLoggingPeriod":1,
"intervalLoggingSampleWindowSize":0,
"overrideIntervalLoggingSamples":false,
"preventSetExtremeValues":false,
"purgeOverride":false,
"purgePeriod":1,
"readPermission":"",
"setExtremeHighLimit":1.7976931348623157E308,
"setExtremeLowLimit":-1.7976931348623157E308,
"setPermission":"",
"tags":{
},
"textRenderer":{
"type":"PLAIN",
"useUnitAsSuffix":false,
"suffix":""
},
"tolerance":0.0
}
]
}
Have a look, let me know if this is closer to what you wanted to achieve
Fox