{"id":20789554,"url":"https://github.com/victorqribeiro/dial","last_synced_at":"2025-05-05T19:44:49.483Z","repository":{"id":128646920,"uuid":"214688481","full_name":"victorqribeiro/dial","owner":"victorqribeiro","description":"A Rotary Dial menu for input numbers","archived":false,"fork":false,"pushed_at":"2019-10-17T15:47:32.000Z","size":44,"stargazers_count":167,"open_issues_count":3,"forks_count":8,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-03-30T23:11:15.212Z","etag":null,"topics":["dial","gui","javascript","menu","rotary","rotary-dial","rotary-phone","ui","ux"],"latest_commit_sha":null,"homepage":"https://victorribeiro.com/dial","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/victorqribeiro.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","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},"funding":{"patreon":"victorqribeiro"}},"created_at":"2019-10-12T17:36:43.000Z","updated_at":"2025-03-18T08:05:05.000Z","dependencies_parsed_at":"2023-04-15T20:57:31.985Z","dependency_job_id":null,"html_url":"https://github.com/victorqribeiro/dial","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/victorqribeiro%2Fdial","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/victorqribeiro%2Fdial/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/victorqribeiro%2Fdial/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/victorqribeiro%2Fdial/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/victorqribeiro","download_url":"https://codeload.github.com/victorqribeiro/dial/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252564251,"owners_count":21768619,"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":["dial","gui","javascript","menu","rotary","rotary-dial","rotary-phone","ui","ux"],"created_at":"2024-11-17T15:24:54.263Z","updated_at":"2025-05-05T19:44:49.478Z","avatar_url":"https://github.com/victorqribeiro.png","language":"JavaScript","funding_links":["https://patreon.com/victorqribeiro"],"categories":[],"sub_categories":[],"readme":"# Rotary Dial\n\nA [Rotary Dial](https://en.wikipedia.org/wiki/Rotary_dial) for input numbers.\n\n![RotaryDial](favicon.png)\n\nLive version [here](https://victorribeiro.com/dial) | Alternative link [here](https://victorqribeiro.github.io/dial/index.html)\n\n# How to use it\n\nClick / Touch the disc and drag it until the arrow. When the number reaches the arrow, it will turn red, then let go and that's your number.\n\n# How to use it on your web app\n\nInclude the RotaryDial.js file.\n\n```html\n\u003cscript src=\"RotaryDial.js\"\u003e\u003c/script\u003e\n```\n\nThen create a new RotaryDial\n\n```javascript\nconst rd = new RotaryDial();\n```\n\nCreating a callback is easy, just define what your function will do with the number it receives from the RotaryDial.\n\n```javascript\nconst func = function(number){\n\talert( number )\n}\n\nconst rd = new RotaryDial({callback: func});\n\n```\n\nBy default the RotaryDial has the console.log function as the callback.\n\n# Documentation\n\nThe RotaryDial accepts a configuration object on its constructor. The most import parts are the size and the callback. The size will determine the size of your rotary dial menu, and the callback determines which function will be called when a number is selected. Besides that, there are some color configurations you can fiddle with.\n\n**size** - The size of the menu. *Default 400px*\n\n**callback** - The function that will be called when a number is selected. *Default console.log*\n\n**discFillColor** - The disc color.\n\n**discStrokeColor** - The disc border color.\n\n**circlesFillColor** - The circles (where the numbers are displayed) color.\n\n**circlesStrokeColor** - The circles (where the numbers are displayed) border color.\n\n**circlesHighlightColor** - The color that a circle will be displayed when a number is selected.\n\n**textFillColor** - The text color.\n\n**textStrokeColor** - The text border color.\n\n**arrowFillColor** - The arrow color.\n\n**arrowStrokeColor** - The arrow border color.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvictorqribeiro%2Fdial","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvictorqribeiro%2Fdial","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvictorqribeiro%2Fdial/lists"}