{"id":20675656,"url":"https://github.com/barraider/streamdeck-easypi","last_synced_at":"2025-08-30T10:32:24.355Z","repository":{"id":62181869,"uuid":"174745910","full_name":"BarRaider/streamdeck-easypi","owner":"BarRaider","description":"Javascript library to simplify the communication between the Stream Deck's Property Inspector and the plugin","archived":true,"fork":false,"pushed_at":"2025-01-05T16:11:52.000Z","size":75,"stargazers_count":0,"open_issues_count":2,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-04-08T02:37:28.631Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"CSS","has_issues":false,"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}},"created_at":"2019-03-09T21:03:12.000Z","updated_at":"2025-03-30T10:09:19.000Z","dependencies_parsed_at":"2025-01-05T17:19:11.705Z","dependency_job_id":"b43aba25-17c9-4ce3-96e1-d59fbdf06575","html_url":"https://github.com/BarRaider/streamdeck-easypi","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"purl":"pkg:github/BarRaider/streamdeck-easypi","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BarRaider%2Fstreamdeck-easypi","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BarRaider%2Fstreamdeck-easypi/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BarRaider%2Fstreamdeck-easypi/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BarRaider%2Fstreamdeck-easypi/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BarRaider","download_url":"https://codeload.github.com/BarRaider/streamdeck-easypi/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BarRaider%2Fstreamdeck-easypi/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":272839613,"owners_count":25001860,"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","status":"online","status_checked_at":"2025-08-30T02:00:09.474Z","response_time":77,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":[],"created_at":"2024-11-16T21:10:07.699Z","updated_at":"2025-08-30T10:32:24.325Z","avatar_url":"https://github.com/BarRaider.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# StreamDeck EasyPI\n\n## EasyPI is deprecated in favour of [EasyPi-v2](https://github.com/BarRaider/streamdeck-easypi-v2)\n\n\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@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@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@latest/src/rangeTooltip.css\"\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/gh/barraider/streamdeck-easypi@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","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbarraider%2Fstreamdeck-easypi","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbarraider%2Fstreamdeck-easypi/lists"}