{"id":23491643,"url":"https://github.com/halfbyte/ableton-push-canvas-display","last_synced_at":"2025-04-15T06:52:00.239Z","repository":{"id":57114529,"uuid":"136479659","full_name":"halfbyte/ableton-push-canvas-display","owner":"halfbyte","description":"Drive the Ableton Push 2 display from a web canvas","archived":false,"fork":false,"pushed_at":"2018-10-05T08:52:53.000Z","size":6,"stargazers_count":20,"open_issues_count":0,"forks_count":3,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-15T06:51:53.754Z","etag":null,"topics":["music","nodejs","usb","webmidiapi"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"isc","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/halfbyte.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-06-07T13:14:04.000Z","updated_at":"2024-12-08T18:29:43.000Z","dependencies_parsed_at":"2022-08-22T06:31:25.798Z","dependency_job_id":null,"html_url":"https://github.com/halfbyte/ableton-push-canvas-display","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/halfbyte%2Fableton-push-canvas-display","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/halfbyte%2Fableton-push-canvas-display/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/halfbyte%2Fableton-push-canvas-display/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/halfbyte%2Fableton-push-canvas-display/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/halfbyte","download_url":"https://codeload.github.com/halfbyte/ableton-push-canvas-display/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249023710,"owners_count":21199958,"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":["music","nodejs","usb","webmidiapi"],"created_at":"2024-12-25T01:28:55.103Z","updated_at":"2025-04-15T06:52:00.221Z","avatar_url":"https://github.com/halfbyte.png","language":"JavaScript","readme":"# ableton-push-canvas-display\n\nAbleton Push 2 has a high resolution color display that can be updated via libusb very easily.\nThe hardest part is drawing pretty graphics. Usually people use frameworks like JUCE for that, but\nwith node and the web, we have something simple, that should also work: The canvas.\n\nThis package does that hard work of converting the image data from a canvas to the slightly weird\npush framebuffer format and sending it via USB.\n\n## How to use\n\nSince this uses node libusb bindings, you need to have a node environment. This means that it\nactually works in electron, even in the renderer process. That also means that you can send a canvas\nthat is actually rendered in a web page.\n\nHere's a minimal example that assumes a set up canvas. The canvas should be 960x160 (the display\nsize of Push 2).\n\n```JavaScript\nconst { initPush, sendFrame } = require('ableton-push-canvas-display')\n\nfunction render() {\n  ctx.clearRect(...)\n  ctx.strokeLine(...)\n  sendFrame(ctx, (err) =\u003e {\n    render() // you probably want to do something like requestAnimationFrame or so.\n  })\n}\n\ninitPush((err) =\u003e {\n  if (!err) {\n    render()\n  }\n})\n```\n\nIf you can't or don't want to use a web canvas, there's a npm package called \"canvas\" that\nreplicates the API using libcairo which works as an image source as well.\n\n## Pitfalls\n\nIf you don't clear the canvas with a solid background, the results will look weird, as the\nconversion process doesn't take the alpha channel into account. As soon as you render to a solid\nbackground, the alpha masks (for antia aliasing for example) are baked and it should look ok.\n\nFor performance reasons I'm using direct access to typed arrays which means that things can go wrong\nin terms of endianness if you are not on a little endian machine. (which is VERY rare nowadays)\n\nThe libusb bulk transfer process takes up almost all of the 16 ms we have to make this a 60fps\noperation on my iMac, so there could be some jank sometimes. I have to test this on other hardware\nto see if it needs additional optimisations.\n\n## Status\n\nThis needs tests (sort of hard to test without actual hardware, but I guess I could at least test\nthe conversion process properly).\n\nIt is not handling multiple push devices. Not sure that this is actually a valid usecase for me.\n\n## Contributions\n\n...are welcome. Fork the project, open up a PR, yadda yadda.\n\n## Credits\n\nThis uses Tessel's node-usb library and Automattic's libcairo based canvas implementation for the\nexample.\n\nThis library is inspired by an awesome weekend at JSConfEU 2019, and especially by my time spent with the\nwonderful people at [live:js](http://livejs.network).\n\nAlso, thank you so much, Ableton for [being very open with Push 2 and documenting almost everything\nabout this](https://github.com/Ableton/push-interface) awesome hardware.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhalfbyte%2Fableton-push-canvas-display","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhalfbyte%2Fableton-push-canvas-display","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhalfbyte%2Fableton-push-canvas-display/lists"}