dohertj2/WaterIgnition
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add time range buttons to flow rate popup

Browse Source 
Adds 1H, 6H, 24H, and 7D buttons to the FlowRatePopup view.
Buttons set view custom properties (timeAmount/timeUnits) which
drive the tag-history binding dateRange dynamically.
Active button highlighted blue (#4747FF), inactive grey (#AAAAAA).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
dohertj2
2026-02-22 05:58:18 -05:00
parent 85d1a5c4f0
commit 6ee1c9e522
1 changed files with 185 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

189
projects/watermeter/com.inductiveautomation.perspective/views/FlowRatePopup/view.json
View File

@@ -1,5 +1,8 @@
{
"custom": {},
"custom": {
"timeAmount": 1,
"timeUnits": "HOUR"
},
"params": {},
"props": {
"defaultSize": {
@@ -9,12 +12,190 @@
},
"root": {
"children": [
{
"children": [
{
"events": {
"dom": {
"onClick": {
"config": {
"script": "\tself.view.custom.timeAmount = 1\n\tself.view.custom.timeUnits = \"HOUR\""
},
"scope": "G",
"type": "script"
}
}
},
"meta": {
"name": "Btn1H"
},
"position": {
"basis": "60px",
"shrink": 0
},
"propConfig": {
"props.style.backgroundColor": {
"binding": {
"config": {
"expression": "if({view.custom.timeAmount} = 1 && \"{view.custom.timeUnits}\" = \"HOUR\", '#4747FF', '#AAAAAA')"
},
"type": "expr"
}
}
},
"props": {
"style": {
"color": "#FFFFFF",
"fontWeight": "bold",
"margin": 2
},
"text": "1H"
},
"type": "ia.input.button"
},
{
"events": {
"dom": {
"onClick": {
"config": {
"script": "\tself.view.custom.timeAmount = 6\n\tself.view.custom.timeUnits = \"HOUR\""
},
"scope": "G",
"type": "script"
}
}
},
"meta": {
"name": "Btn6H"
},
"position": {
"basis": "60px",
"shrink": 0
},
"propConfig": {
"props.style.backgroundColor": {
"binding": {
"config": {
"expression": "if({view.custom.timeAmount} = 6 && \"{view.custom.timeUnits}\" = \"HOUR\", '#4747FF', '#AAAAAA')"
},
"type": "expr"
}
}
},
"props": {
"style": {
"color": "#FFFFFF",
"fontWeight": "bold",
"margin": 2
},
"text": "6H"
},
"type": "ia.input.button"
},
{
"events": {
"dom": {
"onClick": {
"config": {
"script": "\tself.view.custom.timeAmount = 24\n\tself.view.custom.timeUnits = \"HOUR\""
},
"scope": "G",
"type": "script"
}
}
},
"meta": {
"name": "Btn24H"
},
"position": {
"basis": "60px",
"shrink": 0
},
"propConfig": {
"props.style.backgroundColor": {
"binding": {
"config": {
"expression": "if({view.custom.timeAmount} = 24 && \"{view.custom.timeUnits}\" = \"HOUR\", '#4747FF', '#AAAAAA')"
},
"type": "expr"
}
}
},
"props": {
"style": {
"color": "#FFFFFF",
"fontWeight": "bold",
"margin": 2
},
"text": "24H"
},
"type": "ia.input.button"
},
{
"events": {
"dom": {
"onClick": {
"config": {
"script": "\tself.view.custom.timeAmount = 7\n\tself.view.custom.timeUnits = \"DAY\""
},
"scope": "G",
"type": "script"
}
}
},
"meta": {
"name": "Btn7D"
},
"position": {
"basis": "60px",
"shrink": 0
},
"propConfig": {
"props.style.backgroundColor": {
"binding": {
"config": {
"expression": "if({view.custom.timeAmount} = 7 && \"{view.custom.timeUnits}\" = \"DAY\", '#4747FF', '#AAAAAA')"
},
"type": "expr"
}
}
},
"props": {
"style": {
"color": "#FFFFFF",
"fontWeight": "bold",
"margin": 2
},
"text": "7D"
},
"type": "ia.input.button"
}
],
"meta": {
"name": "ButtonRow"
},
"position": {
"basis": "40px",
"shrink": 0
},
"props": {
"direction": "row",
"justify": "center",
"alignItems": "center",
"style": {
"gap": 5,
"paddingLeft": 10,
"paddingRight": 10
}
},
"type": "ia.container.flex"
},
{
"meta": {
"name": "TimeSeriesChart"
},
"position": {
"basis": "500px",
"basis": "460px",
"grow": 1
},
"propConfig": {
@@ -24,8 +205,8 @@
"aggregate": "Average",
"avoidScanClassValidation": true,
"dateRange": {
"mostRecent": "1",
"mostRecentUnits": "HOUR"
"mostRecent": "{view.custom.timeAmount}",
"mostRecentUnits": "{view.custom.timeUnits}"
},
"enableValueCache": true,
"ignoreBadQuality": false,