{"id":28394616,"url":"https://github.com/barraider/streamdeck-easypi-v2","last_synced_at":"2025-07-21T07:33:35.269Z","repository":{"id":267659095,"uuid":"901595118","full_name":"BarRaider/streamdeck-easypi-v2","owner":"BarRaider","description":null,"archived":false,"fork":false,"pushed_at":"2025-01-05T16:13:16.000Z","size":14,"stargazers_count":4,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-27T00:40:25.354Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/BarRaider.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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,"zenodo":null}},"created_at":"2024-12-11T00:34:01.000Z","updated_at":"2025-05-31T08:37:14.000Z","dependencies_parsed_at":"2024-12-11T17:34:37.821Z","dependency_job_id":"4ad0682f-252d-43f8-b4bd-959549c1b27d","html_url":"https://github.com/BarRaider/streamdeck-easypi-v2","commit_stats":null,"previous_names":["barraider/streamdeck-easypi-v2"],"tags_count":1,"template":false,"template_full_name":"BarRaider/streamdeck-easypi","purl":"pkg:github/BarRaider/streamdeck-easypi-v2","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BarRaider%2Fstreamdeck-easypi-v2","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BarRaider%2Fstreamdeck-easypi-v2/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BarRaider%2Fstreamdeck-easypi-v2/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BarRaider%2Fstreamdeck-easypi-v2/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BarRaider","download_url":"https://codeload.github.com/BarRaider/streamdeck-easypi-v2/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BarRaider%2Fstreamdeck-easypi-v2/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266261311,"owners_count":23901289,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":[],"created_at":"2025-05-31T18:37:55.076Z","updated_at":"2025-07-21T07:33:35.253Z","avatar_url":"https://github.com/BarRaider.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# StreamDeck EasyPI-v2\n\nThis library is meant to simplify the communication between the Property Inspector and your plugin.\nBy sticking to a few guidelines, the library will own setting and getting the various settings for your plugin.\n\n## Help / Support\nMake sure to star this repository or follow my [twitter](https://twitter.com/realBarRaider) to get notified when it changes.  \n**Questions, Suggestions, and Support via [Discord](http://discord.barraider.com)**\n\n## New in v1.4\n- Updated styles  to match Elgato's\n\n## New in v1.3\n- Introducing rangedTooltip.js - Instructions how to use it in the ***Ranged Tooltip*** section below\n\n## How to use:\nUse the following tags in your Property Inspector HTML file to use the latest version:\n - Core (sdtools.common.js):\n```\n\u003cscript src=\"https://cdn.jsdelivr.net/gh/barraider/streamdeck-easypi-v2@latest/src/sdtools.common.js\"\u003e\u003c/script\u003e\n```  \n - Core CSS (sdpi.css): \n ```\n\u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/gh/barraider/streamdeck-easypi-v2@latest/src/sdpi.css\"\u003e\n ```  \n - Range Tooltips (see usage examples below):\n```\n\u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/gh/barraider/streamdeck-easypi-v2@latest/src/rangeTooltip.css\"\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/gh/barraider/streamdeck-easypi-v2@latest/src/rangeTooltip.js\"\u003e\u003c/script\u003e\n``` \n\n## Tutorial\n### Common Use-case\nThis section is relevant for the majority of controls. There are a few different controls (such as the CheckBox or FilePicker) that require additional steps, as indicated below.   \nExample1:  \n```\n\u003cinput class=\"sdProperty\" id=\"lastName\" oninput=\"setSettings()\"\u003e\n```\n\nExample2:  \n```\n \u003cselect class=\"sdProperty\" id=\"refreshSeconds\" oninput=\"setSettings()\"\u003e\n\t\u003coption value=\"1\"\u003e1 Second\u003c/option\u003e\n\t\u003coption value=\"15\"\u003e15 Seconds\u003c/option\u003e\n\t\u003coption value=\"30\"\u003e30 Seconds\u003c/option\u003e\n\u003c/select\u003e\n\n```\n\nThere are three things needed for the library to work correctly (as demonstrated in the example above):\n1. Each property must have an ***id*** field. The id must be identical to the name of the property in the payload. In the example above, the library will pass two settings, one named ***lastName*** and one named ***refreshSeconds***. The library will also look for those names to populate the values when new data is received.\n\n2. The property must also have a class called ***sdProperty***. The control can have additional classes too, but this one must be there.\n\n3. Add an ***oninput=\"setSettings()\"*** section to the control, to ensure settings are saved as soon as a user changes input.\n\n### CheckBox\nTo get data to and from checkboxes add an additional class named **sdCheckbox** _in addition_ to the sdProperty indicated above.\n\n```\n\u003cinput id=\"enterMode\" type=\"checkbox\" class=\"sdProperty sdCheckbox\" oninput=\"setSettings()\"\u003e\n```\n\n### FilePicker\nTo support filepickers, as recommended in the SDK follow the following guidelines:\n\n```\n\u003cinput class=\"sdProperty sdFile\" type=\"file\" id=\"userImage\" oninput=\"setSettings()\"\u003e\n\u003clabel class=\"sdpi-file-info \" for=\"userImage1\" id=\"userImageFilename\"\u003eNo file...\u003c/label\u003e\n```\n\n1. On the input element, add an additional class named **sdFile** _in addition_ to the sdProperty indicated above.\n2. Add a label, as indicated above. Make sure the Id of the label has a ***Filename*** suffix (If the input is called userImage than the label is named userImageFilename)\n\n### Dropdown lists\nEasyPI supports passing a dynamic list to be shown in a dropdown. In addition, you can choose the name of the field that will hold value selected by the user.\nTo support dynamic dropdown lists, follow the following guidelines:\n\n```\n\u003cselect class=\"sdpi-item-value select sdProperty sdList\" id=\"sounds\" oninput=\"setSettings()\" sdListTextProperty=\"soundName\" sdListValueProperty=\"soundIndex\" sdValueField=\"soundTitle\"\u003e\u003c/select\u003e\n```\n\n1. On the select element, add an additional class named **sdList** _in addition_ to the sdProperty indicated above.\n2. Add an attribute named **sdListTextProperty** which is the name of the *property* for each item in the list that holds the text you want to show in the dropdown\n3. Add an attribute named **sdListValueProperty** which is the name of the *property* for each item in the list that holds the value you want to return when an item is selected\n4. Add an attribute named **sdValueField** which is the name of a property in the payload which will be used to both retreive the selected value and store it back if the user chooses another option in the dropdown.\n\n#### Example of how this would look on the backend side:\n```\n[JsonProperty(PropertyName = \"sounds\")]\npublic List\u003cSoundData\u003e Sounds { get; set; }\n\n[JsonProperty(PropertyName = \"soundTitle\")]\npublic string SoundTitle { get; set; }\n```\nand `SoundData` would look like this:\n```\nclass SoundData\n    {\n        [JsonProperty(PropertyName = \"soundName\")]\n        public string SoundName { get; set; }\n\n        [JsonProperty(PropertyName = \"soundIndex\")]\n        public int SoundIndex { get; set; }\n    }\n```\n\n\n### HTML Elements\nEasyPI supports passing HTML to be shown in the InnerHTML property of an element in the Property Inspector.\nTo support HTML elements, follow the following guidelines:\n\n```\n\u003cspan class=\"sdHTML sdProperty sdpi-item-value\" id=\"myHtmlElement\"\u003e\u003c/span\u003e\n```\n\n1. On the div/span element, add an additional class named **sdHTML** _in addition_ to the sdProperty indicated above.\n\n## Events\nThe library currently sends out two events\n### websocketCreate\nThis event will be triggered as soon as a websocket is created with the StreamDeck.\nSubscribe by using: \n```\ndocument.addEventListener('websocketCreate', function () {\n\tconsole.log(\"Websocket created!\");\n\t...\n});\n```\n\nYou can also subscribe to the websocket events as part of this event:\n\n```\ndocument.addEventListener('websocketCreate', function () {\n\twebsocket.addEventListener('message', function (event) {\n\t\tconsole.log(\"Got message event!\");\n\t});\n});\n```\n\n### settingsUpdated\nThis even will be triggered when a new payload of settings is sent from the PI to the Plugin itself.\nSubscribe by using: \n\n```\ndocument.addEventListener('settingsUpdated', function (event) {\n    console.log(\"Got settingsUpdated event!\");\n});\n```\n\n### Ranged Tooltip\nThe rangedTooltip.js library allows you to see a tooltip of the current value when modifying a range element.\nTo use:\n1. Add `\u003cscript src=\"rangeTooltip.js\"\u003e\u003c/script\u003e` and `\u003clink rel=\"stylesheet\" href=\"rangeTooltip.css\"\u003e` to the \u003chead\u003e section  \n2. Create a div of `type=\"range\"` and give it the `sdShowTooltip` class (as shown below). The example below will create a range of 1-200\n```\n\u003cdiv type=\"range\" class=\"sdpi-item sdShowTooltip\" id=\"dvSpeed\"\u003e\n\t\u003cdiv class=\"sdpi-item-label\" id=\"speedLabel\"\u003eSpeed\u003c/div\u003e\n\t\u003cdiv class=\"sdpi-item-value\"\u003e\n\t\t\u003cspan class=\"clickable\" value=\"1\"\u003e1\u003c/span\u003e\n\t\t\u003cinput type=\"range\" min=\"1\" max=\"200\" value=100 list=\"numbers\" data-suffix=\" %\" class=\"sdProperty\" id=\"playSpeed\" oninput=\"setSettings()\"\u003e\n\t\t\u003cspan class=\"clickable\" value=\"200\"\u003e200\u003c/span\u003e\n\t\t\u003cdatalist id=\"numbers\"\u003e\n\t\t\t\u003coption\u003e100\u003c/option\u003e\n\t\t\u003c/datalist\u003e\n\t\t\u003clabel for=\"playSpeed\" class=\"rangeLabel\"\u003e\u003c/label\u003e\n\t\u003c/div\u003e\n\u003c/div\u003e\n```  \n3. For the actual range \u003cinput\u003e add the `class=\"sdProperty\"` and the `data-suffix`. You can use `data-suffix` to decide what to show after the number (such as %, 'ms', etc.)\n4. Add the following line somewhere in your HTML file:  \n```\n\u003cdiv class=\"sdpi-info-label hidden\" style=\"top: -1000;\" value=\"\"\u003eTooltip\u003c/div\u003e\n```\n\t\t\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbarraider%2Fstreamdeck-easypi-v2","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbarraider%2Fstreamdeck-easypi-v2","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbarraider%2Fstreamdeck-easypi-v2/lists"}