B4J Code Snippet [ABMaterial] Custom Component noUISlider

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.
upload_2018-8-6_9-26-47.png


Example 2 - IoT Showcase OilTank60 control loading by setting level and flows using the Pips_Slidebar.
upload_2018-8-6_9-39-36.png


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

  • CustSlidebarv1.0.zip
    40.2 KB · Views: 311
Last edited:
Top