{"id":19862052,"url":"https://github.com/lewiscollum/buttonsidepanel","last_synced_at":"2026-04-18T19:31:11.880Z","repository":{"id":132333217,"uuid":"264583814","full_name":"LewisCollum/buttonSidePanel","owner":"LewisCollum","description":"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.","archived":false,"fork":false,"pushed_at":"2020-11-16T07:48:43.000Z","size":1066,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-01T00:24:08.232Z","etag":null,"topics":["buttons","opencv","sidebar","webgl"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/LewisCollum.png","metadata":{"files":{"readme":"README.org","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-05-17T04:32:39.000Z","updated_at":"2020-11-16T07:48:45.000Z","dependencies_parsed_at":null,"dependency_job_id":"fef9d78b-2265-4712-bf3d-1202c0849fd5","html_url":"https://github.com/LewisCollum/buttonSidePanel","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/LewisCollum/buttonSidePanel","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LewisCollum%2FbuttonSidePanel","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LewisCollum%2FbuttonSidePanel/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LewisCollum%2FbuttonSidePanel/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LewisCollum%2FbuttonSidePanel/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LewisCollum","download_url":"https://codeload.github.com/LewisCollum/buttonSidePanel/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LewisCollum%2FbuttonSidePanel/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31982440,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-18T17:30:12.329Z","status":"ssl_error","status_checked_at":"2026-04-18T17:29:59.069Z","response_time":103,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["buttons","opencv","sidebar","webgl"],"created_at":"2024-11-12T15:10:38.511Z","updated_at":"2026-04-18T19:31:11.865Z","avatar_url":"https://github.com/LewisCollum.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"#+title: Hide-Away Side Panel with Toggle and Radio Buttons\n\n#+begin_html\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"./figure/2020-05-17.png\" height=\"250\"/\u003e\n  \u003cimg src=\"./figure/exampleOpencv.png\" height=\"250\"/\u003e\n\u003c/p\u003e\n#+end_html\n\n** Making a Collapsible Panel\n   ~PanelOpenButton~ opens and closes the wrapped panel when the \"open\n   button\" is clicked.\n  #+begin_src javascript\nlet panel = new cpanel.Panel(\"panel\")\npanel.style = \"Panel\"\npanel.appendToParent(document.getElementById(\"container\"))\n\nlet openButton = new cpanel.PanelOpenButton(panel)\nopenButton.style = \"PanelOpenButton\"\nopenButton.appendToParent(document.getElementById(\"container\"))\n  #+end_src\n** Making a Fixed-Width Panel\n   The panel has to be opened, since it is closed by default (in Panel.css)\n  #+begin_src javascript\nlet panel = new cpanel.Panel(\"panel\")\npanel.style = \"Panel\"\npanel.appendToParent(document.getElementById(\"container\"))\npanel.open()\n  #+end_src   \n** Button Categories\n*** Adding a Toggle Button Category\n  #+begin_src javascript\nlet annotationCategory = new cpanel.ToggleButtonCategory(\"Annotation\")\nannotationCategory.addButton(\"Foo\")\nannotationCategory.addButton(\"Bar\")\npanel.addCategory(annotationCategory)\n  #+end_src\n\n*** Adding a Radio Button Category\n  #+begin_src javascript\nlet frameCategory = new cpanel.RadioButtonCategory(\"Frame\")\nframeCategory.addButton(\"Foo\")\nframeCategory.addButton(\"Bar\")\npanel.addCategory(frameCategory)\n  #+end_src\n*** Default Button State \n  #+begin_src javascript\nlet frameCategory = new cpanel.RadioButtonCategory(\"Frame\")\nframeCategory.addButton(\"Bar\")\nframeCategory.turnOnButton(\"Bar\") //\"Bar\" button manually turned on\npanel.addCategory(frameCategory)\n  #+end_src\n** JSON Button Change Listening\n  #+begin_src javascript\npanel.addButtonChangeListener((change) =\u003e {\n    console.log(change)\n})\n  #+end_src\n\n  The resulting \"change\" is represented as an object literal:\n  #+begin_src json\n{\n    Annotation: [\"Boo\", \"Foo\"],\n    Frame: \"Foo\"\n}\n  #+end_src\n  \n  We can interpret this object as, we have \"Boo\" and \"Foo\" annotation\n  buttons selected, and the current frame button selected is \"Foo\".\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flewiscollum%2Fbuttonsidepanel","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flewiscollum%2Fbuttonsidepanel","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flewiscollum%2Fbuttonsidepanel/lists"}