Based upon this thread (thanks for the example), created 3 enhancements for the Custom Component noUISlider.
There are 3 slidebar types: Pips_Slidebar, Toggle_Slidebar, Progress_Slidebar.
Example 1 - The 3 slidebar types
The Pips_Slidebar is shown twice with different orientation.
The Toggle Slidebar triggers creating a random number to set the various slidebars.
Example 2 - IoT Showcase OilTank60 control loading by setting level and flows using the Pips_Slidebar.
Attached
CustSlidebar class with the example.
The www custom folders css and js holds the files nouislider.min.js and nouislider.min.css.
Example snippet from the first example
There are 3 slidebar types: Pips_Slidebar, Toggle_Slidebar, Progress_Slidebar.
Example 1 - The 3 slidebar types
The Pips_Slidebar is shown twice with different orientation.
The Toggle Slidebar triggers creating a random number to set the various slidebars.
Example 2 - IoT Showcase OilTank60 control loading by setting level and flows using the Pips_Slidebar.
Attached
CustSlidebar class with the example.
The www custom folders css and js holds the files nouislider.min.js and nouislider.min.css.
Example snippet from the first example
B4X:
Sub Class_Globals
...
' Slidebars
Private Pips_SlidebarV As CustSlidebar
Private Pips_SlidebarH As CustSlidebar
Private Toggle_Slidebar As CustSlidebar
Private Progress_Slidebar As CustSlidebar
' Timer Simulation
Private Timer_Simulation As Timer
' Helpers with inital values
Private myToastId As Int 'ignore
Private mRowNr As Int = 0
Private mCellNr As Int = 0
Private mDecimals As Int = 1 'ignore
End Sub
Public Sub Initialize
Timer_Simulation.Initialize("Timer_Simulation", 2000)
Timer_Simulation.Enabled = False
BuildPage
End Sub
public Sub BuildPage()
...
'R1
page.AddRows(1,True,"").AddCells12(1, "noUISliders")
'R2
page.AddRows(1,True,"").AddCellsOS(4, 0, 0, 0, 3, 3, 3, "heading")
'R3
page.AddRows(1,True,"").AddCellsOS(4, 0, 0, 0, 3, 3, 3, "slidebar")
'R4
page.AddRows(1,True,"").AddCells12(1, "")
page.BuildGrid
page.AddExtraJavaScriptFile("custom/nouislider.min.js")
page.AddExtraJavaScriptFile("custom/wNumb.js")
page.AddExtraCSSFile("custom/nouislider.min.css")
ABMShared.BuildFooter(page)
End Sub
public Sub ConnectPage()
...
'R1
'R2
mRowNr = 2
mCellNr = 1
Dim Label_Pips_SlidebarV As ABMLabel
Label_Pips_SlidebarV.Initialize(page, "Label_Pips_SlidebarV","Pips_SlidebarV", ABM.SIZE_PARAGRAPH, True, "")
page.Cell(mRowNr,mCellNr).AddComponent(Label_Pips_SlidebarV)
mCellNr = 2
Dim Label_Pips_SlidebarH As ABMLabel
Label_Pips_SlidebarH.Initialize(page, "Label_Pips_SlidebarH","Pips_SlidebarH", ABM.SIZE_PARAGRAPH, True, "")
page.Cell(mRowNr,mCellNr).AddComponent(Label_Pips_SlidebarH)
mCellNr = 3
Dim Label_Toggle_Slidebar As ABMLabel
Label_Toggle_Slidebar.Initialize(page, "Label_Toggle_Slidebar","Toggle_Slidebar", ABM.SIZE_PARAGRAPH, True, "")
page.Cell(mRowNr,mCellNr).AddComponent(Label_Toggle_Slidebar)
mCellNr = 4
Dim Label_Progress_Slidebar As ABMLabel
Label_Progress_Slidebar.Initialize(page, "Label_Progress_Slidebar","Progress_Slidebar", ABM.SIZE_PARAGRAPH, True, "")
page.Cell(mRowNr,mCellNr).AddComponent(Label_Progress_Slidebar)
'R3
mRowNr = 3
Dim R3CellHeight As Int = 170
'Pips_SlidebarV
mCellNr = 1
'#NAME' is replaced by the slidername in custslidebar.bas.
Dim Pips_SlidebarV_CSS As String = $"
##NAME# .noUi-base {
background: grey;
}
##NAME# .noUi-background {
background: blue;
}
##NAME# .noUi-connect {
background: blue;
}
"$
Dim properties As Map = CreateMap("height":R3CellHeight-30, "width":20, "orientation":"vertical", "direction":"rtl", "min":0, "max":100, "step":5, "tooltips":"true", "decimals":1, "css":Pips_SlidebarV_CSS,"suffix":" m3/h")
Pips_SlidebarV.Initialize(page, "Pips_SlidebarV", "Pips_SlidebarV", 1, 0, properties)
page.Cell(mRowNr,mCellNr).AddComponent(Pips_SlidebarV.ABMComp)
page.Cell(mRowNr,mCellNr).SetFixedHeight(R3CellHeight,False)
page.Cell(mRowNr,mCellNr).PaddingTop = 20
page.Cell(mRowNr,mCellNr).PaddingBottom = 20
'Pips_SlidebarH
mCellNr = 2
Dim Pips_SlidebarH_CSS As String = $"
##NAME# .noUi-base {
background: red;
}
##NAME# .noUi-background {
background: blue;
}
##NAME# .noUi-connect {
background: green;
}
"$
Dim properties As Map = CreateMap("height":20, "width":150, "orientation":"horizontal", "direction":"ltr", "min":0, "max":10, "step":1, "tooltips":"true", "decimals":2, "css":Pips_SlidebarH_CSS)
Pips_SlidebarH.Initialize(page, "Pips_SlidebarH", "Pips_SlidebarH", 1, 0, properties)
page.Cell(mRowNr,mCellNr).AddComponent(Pips_SlidebarH.ABMComp)
page.Cell(mRowNr,mCellNr).SetFixedHeight(R3CellHeight,False)
page.Cell(mRowNr,mCellNr).PaddingTop = 20
page.Cell(mRowNr,mCellNr).PaddingBottom = 20
'Toggle_Slidebar
mCellNr = 3
Dim Toggle_Slidebar_CSS As String = $"
##NAME#.on .noUi-handle {
border-color: green;
background: green;
}
##NAME#.off .noUi-handle {
border-color: red;
background: red;
}
"$
Dim properties As Map = CreateMap("height":20, "width":50, "orientation":"horizontal", "css":Toggle_Slidebar_CSS)
Toggle_Slidebar.Initialize(page, "Toggle_Slidebar", "Toggle_Slidebar", 2, 0, properties)
page.Cell(mRowNr,mCellNr).AddComponent(Toggle_Slidebar.ABMComp)
page.Cell(mRowNr,mCellNr).SetFixedHeight(R3CellHeight,False)
page.Cell(mRowNr,mCellNr).PaddingTop = 20
page.Cell(mRowNr,mCellNr).PaddingBottom = 20
'Progress_Slidebar
mCellNr = 4
Dim Progress_Slidebar_CSS As String = $"
##NAME# .noUi-base {
background: yellow;
}
##NAME# .noUi-background {
background: blue;
}
##NAME# .noUi-connect {
background: green;
}
"$
Dim properties As Map = CreateMap("height":20, "width":150, "orientation":"horizontal", "css":Progress_Slidebar_CSS,"suffix":" %","enabled":"false")
Progress_Slidebar.Initialize(page, "Progress_Slidebar", "Progress_Slidebar", 3, 0, properties)
page.Cell(mRowNr,mCellNr).AddComponent(Progress_Slidebar.ABMComp)
page.Cell(mRowNr,mCellNr).SetFixedHeight(R3CellHeight,False)
page.Cell(mRowNr,mCellNr).PaddingTop = 20
page.Cell(mRowNr,mCellNr).PaddingBottom = 20
'R4
mRowNr = 4
Dim R4CellHeight As Int = 30
mCellNr = 1
Dim Label_Message As ABMLabel
Dim Lbl As String
Lbl = $"${DateTime.Time(DateTime.now)} - No messages."$
Label_Message.Initialize(page, "Label_Message",Lbl, ABM.SIZE_PARAGRAPH, True, "")
page.Cell(mRowNr,mCellNr).AddComponent(Label_Message)
page.Cell(mRowNr,mCellNr).SetFixedHeight(R4CellHeight, False)
' refresh the page
page.Refresh
' Tell the browser we finished loading
page.FinishedLoading
' restoring the navigation bar position
page.RestoreNavigationBarPosition
End Sub
#Region Slidebar Actions
Private Sub Pips_SlidebarV_Changed(Params As Map)
'Dim Value As Double = Params.Get("value")
SetMessage($"Pips_SlidebarV Changed: ${Params}"$)
End Sub
Private Sub Pips_SlidebarH_Changed(Params As Map)
'Dim Value As Double = Params.Get("value")
SetMessage($"Pips_SlidebarH Changed: ${Params}"$)
End Sub
Private Sub Toggle_Slidebar_Changed(Params As Map)
SetMessage($"Toggle_Slidebar Changed: ${Params}"$)
Dim Value As Int = Params.Get("value")
Timer_Simulation.Enabled = (Value = 1)
If Not(Timer_Simulation.Enabled) Then
Pips_SlidebarV.Value = 0
Pips_SlidebarV.ABMComp.Refresh
Pips_SlidebarH.Value = 0
Pips_SlidebarH.ABMComp.Refresh
Progress_Slidebar.Value = 0
Progress_Slidebar.ABMComp.refresh
End If
End Sub
#End Region
#Region Simulation Timer
Sub Timer_Simulation_Tick
Dim Dec As Double = Rnd(0,100) * 0.01
Pips_SlidebarV.Value = Rnd(0,100) + Dec
Pips_SlidebarV.ABMComp.Refresh
Pips_SlidebarH.Value = Rnd(0,10) + Dec
Pips_SlidebarH.ABMComp.Refresh
Progress_Slidebar.Value = Progress_Slidebar.Value + 1
If Progress_Slidebar.Value = 100 Then Progress_Slidebar.Value = 0
Progress_Slidebar.ABMComp.refresh
End Sub
#End Region
#Region Helpers
Private Sub SetMessage(Msg As String)
Dim Label_Message As ABMLabel = page.Component("Label_Message")
Dim Lbl As String = $"${DateTime.Time(DateTime.now)} - ${Msg}."$
Log($"${Lbl}"$)
Label_Message.Text = Lbl
Label_Message.Refresh
End Sub
#End Region
Attachments
Last edited: