https://github.com/lewiscollum/buttonsidepanel

A simple hide-away side panel that contains toggle and radio buttons. I use it for changing viewing options for opencv JPEG livestreams and WebGL canvases.
https://github.com/lewiscollum/buttonsidepanel

buttons opencv sidebar webgl

Last synced: about 2 months ago
JSON representation

A simple hide-away side panel that contains toggle and radio buttons. I use it for changing viewing options for opencv JPEG livestreams and WebGL canvases.

• Host: GitHub
• URL: https://github.com/lewiscollum/buttonsidepanel
• Owner: LewisCollum
• License: mit
• Created: 2020-05-17T04:32:39.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2020-11-16T07:48:43.000Z (over 5 years ago)
• Last Synced: 2025-03-01T00:24:08.232Z (over 1 year ago)
• Topics: buttons, opencv, sidebar, webgl
• Language: JavaScript
• Homepage:
• Size: 1.02 MB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.org
  • License: LICENSE

Awesome Lists containing this project

README

          
#+title: Hide-Away Side Panel with Toggle and Radio Buttons

#+begin_html



  

  



#+end_html


** Making a Collapsible Panel

   ~PanelOpenButton~ opens and closes the wrapped panel when the "open

   button" is clicked.

  #+begin_src javascript

let panel = new cpanel.Panel("panel")

panel.style = "Panel"

panel.appendToParent(document.getElementById("container"))

let openButton = new cpanel.PanelOpenButton(panel)

openButton.style = "PanelOpenButton"

openButton.appendToParent(document.getElementById("container"))

  #+end_src

** Making a Fixed-Width Panel

   The panel has to be opened, since it is closed by default (in Panel.css)

  #+begin_src javascript

let panel = new cpanel.Panel("panel")

panel.style = "Panel"

panel.appendToParent(document.getElementById("container"))

panel.open()

  #+end_src   

** Button Categories

*** Adding a Toggle Button Category

  #+begin_src javascript

let annotationCategory = new cpanel.ToggleButtonCategory("Annotation")

annotationCategory.addButton("Foo")

annotationCategory.addButton("Bar")

panel.addCategory(annotationCategory)

  #+end_src

*** Adding a Radio Button Category

  #+begin_src javascript

let frameCategory = new cpanel.RadioButtonCategory("Frame")

frameCategory.addButton("Foo")

frameCategory.addButton("Bar")

panel.addCategory(frameCategory)

  #+end_src

*** Default Button State 

  #+begin_src javascript

let frameCategory = new cpanel.RadioButtonCategory("Frame")

frameCategory.addButton("Bar")

frameCategory.turnOnButton("Bar") //"Bar" button manually turned on

panel.addCategory(frameCategory)

  #+end_src

** JSON Button Change Listening

  #+begin_src javascript

panel.addButtonChangeListener((change) => {

    console.log(change)

})

  #+end_src

  The resulting "change" is represented as an object literal:

  #+begin_src json

{

    Annotation: ["Boo", "Foo"],

    Frame: "Foo"

}

  #+end_src

  

  We can interpret this object as, we have "Boo" and "Foo" annotation

  buttons selected, and the current frame button selected is "Foo".