{"id":26699025,"url":"https://github.com/darmiel/twitch-poll-overlay","last_synced_at":"2025-04-13T05:50:20.720Z","repository":{"id":40575432,"uuid":"317950075","full_name":"darmiel/twitch-poll-overlay","owner":"darmiel","description":"This is a small project to evaluate \"1\" and \"0\" polls in Twitch streams, and display them live in the stream.","archived":false,"fork":false,"pushed_at":"2023-03-31T20:39:14.000Z","size":4341,"stargazers_count":27,"open_issues_count":1,"forks_count":5,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-26T22:32:01.613Z","etag":null,"topics":["canvas","hacktoberfest","html","polls","twitch","typescript","webpack"],"latest_commit_sha":null,"homepage":"https://poll-overlay.d2a.io/builder.html","language":"TypeScript","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/darmiel.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":"2020-12-02T18:08:37.000Z","updated_at":"2024-08-18T13:47:19.000Z","dependencies_parsed_at":"2025-03-26T22:38:33.609Z","dependency_job_id":null,"html_url":"https://github.com/darmiel/twitch-poll-overlay","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/darmiel%2Ftwitch-poll-overlay","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/darmiel%2Ftwitch-poll-overlay/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/darmiel%2Ftwitch-poll-overlay/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/darmiel%2Ftwitch-poll-overlay/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/darmiel","download_url":"https://codeload.github.com/darmiel/twitch-poll-overlay/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248670501,"owners_count":21142901,"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":["canvas","hacktoberfest","html","polls","twitch","typescript","webpack"],"created_at":"2025-03-26T22:26:59.699Z","updated_at":"2025-04-13T05:50:20.697Z","avatar_url":"https://github.com/darmiel.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Twitch Poll Overlay\u003cimg align=\"right\" width=\"200\" height=\"200\" src=\"https://i.imgur.com/v7TevuS.png\"\u003e\nThis is a small project to evaluate those \"1\" and \"0\" polls in Twitch streams, and display them live in the stream.\n\n---\n\n- [How to use](#how-to-use)\n  - [1. Get the URL of the overlay](#1-get-the-url-of-the-overlay)\n  - [2. Stream-Software setup](#2-stream-software-setup)\n    - [a) Create a browser source:](#a-create-a-browser-source)\n    - [b) Paste the copied URL at `URL`](#b-paste-the-copied-url-at-url)\n    - [c) Adjust Width and Height](#c-adjust-width-and-height)\n    - [d) Enter at Custom CSS:](#d-enter-at-custom-css)\n    - [Done! Finally click again on \"Refresh cache of current active\".](#done-finally-click-again-on-refresh-cache-of-current-active)\n- [Types](#types)\n  - [Bar](#bar)\n  - [Pie](#pie)\n- [URL Parameters](#url-parameters)\n- [Why?](#why)\n\n---\n\n## How to use\nThe overlay can be used without further registration or installation.\n\n### 1. Get the URL of the overlay\nThe overlay is currently hosted on GitHub Pages.  \nSo the base URL currently is: `https://darmiel.github.io/twitch-poll-overlay/`.  \nThe channel has to be specified as the parameter: `?channel=\u003cyour channel name\u003e`:\n\n\n-\u003e http://darmiel.github.io/twitch-poll-overlay/index.html?channel=\\\u003cyour channel here\\\u003e\n\n\u003e **Note**: The hosted version collects the following data about the usage of the overlay:\n\u003e Channel Name and Timestamp of the request. This is used to evaluate the usage of the overlay.\n\u003e And will be removed in the future.\n\nThere are a few more optional parameters.  \nThe easiest way is to use the \n[Parameter-Builder for twitch-poll-overlay](http://darmiel.github.io/twitch-poll-overlay/builder.html)\n\n### 2. Stream-Software setup\nIn the following I will show the setup using [OBS](https://obsproject.com), but this should be possible with any other streaming program.\n\n#### a) Create a browser source:\n![img](assets/hiw-create-browser.png)\n\n#### b) Paste the copied URL at `URL`\n![img](assets/hiw-url-browser-source.png)\n\n#### c) Adjust Width and Height\n**⚠️ Note**: Please make sure that **only here** the size is adjusted.  \nIf you resize the browser source afterwards with your mouse, problems **will** occur.\n\n#### d) Enter at Custom CSS:\n```css\nbody { \n    background-color: rgba(0, 0, 0, 0); \n    margin: 0px auto; \n    overflow: hidden; \n}\n```\n\n#### Done! Finally click again on \"Refresh cache of current active\".\nYour Browser source should look something like this:\n![img](assets/hiw-ov-browser-source.png)\n\n## Types\n### Bar\n![demo-bar](assets/demo-bar.gif)\n\n### Pie\n![demo-pie](assets/demo-pie.gif)\n\n## URL Parameters\n```typescript\n/**\n * @required\n * On this channel the chat is monitored for reactions\n */\nchannel: string;\n\n/**\n * The type of the chart\n * This can be either \"bar\" or \"pie\"\n */\ntype: ChartType;\n\n/**\n * The overlay will be shown if more than {Required Pings} reactions were detected in\n * {Timeout} seconds\n * The overlay will be hidden if less than {Required Pings} reactions were detected in\n * {Timeout} seconds\n */\ntimeout?: number;\nrequiredPings?: number;\n\n\n// +----------------------+\n// |       F O N T        |\n// +----------------------+\n/**\n *\n * The font size of the font that serves as a percentage display above the chart.\n * Use FONT_DYNAMIC to have the font size calculated according to the total size of the chart (dynamic)\n * @default 25\n */\nfontSize?: number;\n\n/**\n * The font family for the values\n * @default calibri\n */\nfontFamily?: string;\n\n/**\n * How much the text color should be darkened\n * @default .65\n */\nfontColorFactor?: number;\n\n/**\n * The font in the calculation by the factor {fontSizeFactor}\n * @default 1/8\n */\nfontSizeFactor?: number;\n\n\n// +---------------------+\n// |      C H A R T      |\n// +---------------------+\nelementId?: string;\n\nx?: number;\n\ny?: number;\n\nwidth?: number;\n\nheight?: number;\n\nbackground?: string;\n\n\n// +---------------------+\n// |        B A R        |\n// +---------------------+\n/**\n * The distance of the height (bottom and top) to the edge of the canvas\n * @default 0\n */\nbarMarginHeight?: number;\n\n/**\n * The distance of the width (left and right) to the edge of the canvas\n * @default 0\n */\nbarMarginWidth?: number;\n\n/**\n * The top and bottom distance between\n * the outline of the ProgressBar and the filled in\n * @default 5\n */\nstrokeMarginHeight?: number;\n\n/**\n * The left and right distance between\n * the outline of the ProgressBar and the filled in\n * @default 5\n */\nstrokeMarginWidth?: number;\n\n/**\n * The colors from this array are gradually used for the colors of the values of the bar.\n * If there are less colors in the array than values,\n * the next color is taken from the beginning again.\n * @default {../color.ts::colors}\n */\nvalueColors?: string[];\n\n/**\n * This color is used for the border of the bar.\n * @default #34495e (light gray)\n */\nstrokeColor?: string;\n\n/**\n * How often should the contour be drawn? (Or also: the thickness of the stroke)\n */\nstrokeIterations?: number;\n\n/**\n * Round the value?\n */\ntextRound?: boolean;\n\n\n// +---------------------+\n// |        P I E        |\n// +---------------------+\n/**\n * Round the value?\n */\nround?: boolean;\n\n/**\n * (height or width) / {radiusFactor}\n */\nradiusFactor?: number;\n```\n\n## Why?\nI don't now.. I had this idea for a while now, and I just wanted to extend my TypeScript knowledge and experiment a bit with Webpack. Besides, it **might** be a little help for one or the other streamer / viewer 😁.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdarmiel%2Ftwitch-poll-overlay","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdarmiel%2Ftwitch-poll-overlay","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdarmiel%2Ftwitch-poll-overlay/lists"}