{"id":13521449,"url":"https://github.com/hxlnt/oledjs-designer","last_synced_at":"2025-09-21T23:33:25.393Z","repository":{"id":147059359,"uuid":"95484362","full_name":"hxlnt/oledjs-designer","owner":"hxlnt","description":"Draw in the browser, display on an OLED hardware screen.","archived":false,"fork":false,"pushed_at":"2017-07-29T02:33:14.000Z","size":252,"stargazers_count":61,"open_issues_count":2,"forks_count":8,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-12-29T18:03:13.788Z","etag":null,"topics":["javascript","johnny-five","oled"],"latest_commit_sha":null,"homepage":"http://ojd.azurewebsites.net","language":"JavaScript","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/hxlnt.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}},"created_at":"2017-06-26T19:59:17.000Z","updated_at":"2024-08-26T01:42:26.000Z","dependencies_parsed_at":"2024-01-13T22:23:31.415Z","dependency_job_id":"11272627-933a-4d27-802a-3ceaf9ea0dc6","html_url":"https://github.com/hxlnt/oledjs-designer","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/hxlnt%2Foledjs-designer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hxlnt%2Foledjs-designer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hxlnt%2Foledjs-designer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hxlnt%2Foledjs-designer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hxlnt","download_url":"https://codeload.github.com/hxlnt/oledjs-designer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":233682445,"owners_count":18713552,"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":["javascript","johnny-five","oled"],"created_at":"2024-08-01T06:00:34.512Z","updated_at":"2025-09-21T23:33:20.048Z","avatar_url":"https://github.com/hxlnt.png","language":"JavaScript","funding_links":[],"categories":["Examples"],"sub_categories":["Robot Programming Plugins"],"readme":"# oledjs-designer\n[oledjs-designer](http://ojd.azurewebsites.net) helps you draw graphics for small monochrome OLED screens. It's built for use with [oled.js](https://github.com/noopkat/oled-js), a super-rad library for drawing to OLEDs via Javascript.\n\n - Use a touchscreen stylus, tablet, or mouse to draw screens directly in the browser\n - Draw on a canvas that matches one of several selectable OLED sizes, pixel for pixel\n - Import or export your drawings as Javascript ready for use with `oled-js`\n\n![Screenshot](screenshot.png)\n\n## Usage\n\n1. Design your image on the [oledjs-designer website](http://ojd.azurewebsites.net), then click \"Save image buffer\" to download the file. The file is saved with the file extension `.js.txt`.\n\n2. Remove the `.txt` extension from the file and include it in your `oledjs` project folder.\n\n3. Include the file at the top of your code like so:\n```javascript\nconst mydrawing = require('path/to/image');\n```\n\n4. After initializing the OLED, draw the buffer to the screen like so:\n```javascript\noled.clearDisplay();\noled.buffer = mydrawing;\noled.update();\n```\n\nThe file `examplebuffer.js.txt`, included in this repo, is available for you to use for testing the tools.\n \n## //TODO\n - DONE! \u003cs\u003eChoose from multiple OLED resolutions\u003c/s\u003e\n - DONE! \u003cs\u003eUpload a `.js` buffer file for editing/preview\u003c/s\u003e\n - DONE! \u003cs\u003eDraw with tablet stylus with less difficulty\u003c/s\u003e\n - DONE! \u003cs\u003eAdd erase tool\u003c/s\u003e\n - Improve UI\n - Fix accidental div dragging\n - Upload a `.png` \n - Select different color schemes, including color-banded monochrome displays\n - Add more drawing tools\n - Add onion-skinned frames for animations (via drawing or `.png` upload)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhxlnt%2Foledjs-designer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhxlnt%2Foledjs-designer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhxlnt%2Foledjs-designer/lists"}