{"id":17412870,"url":"https://github.com/guidoschmidt/zipper","last_synced_at":"2025-03-03T00:12:46.186Z","repository":{"id":150857745,"uuid":"593551981","full_name":"guidoschmidt/zipper","owner":"guidoschmidt","description":"Experimental ziglang image sequence collection server","archived":false,"fork":false,"pushed_at":"2024-10-21T12:11:18.000Z","size":40,"stargazers_count":1,"open_issues_count":1,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-01-13T10:51:45.522Z","etag":null,"topics":["creativecode","p5","threejs","tool","tooling","zig","ziglang"],"latest_commit_sha":null,"homepage":"","language":"Zig","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/guidoschmidt.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":"2023-01-26T09:41:51.000Z","updated_at":"2024-10-07T18:56:50.000Z","dependencies_parsed_at":null,"dependency_job_id":"f8938fa5-e360-4a61-80c0-c26bafb07232","html_url":"https://github.com/guidoschmidt/zipper","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/guidoschmidt%2Fzipper","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/guidoschmidt%2Fzipper/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/guidoschmidt%2Fzipper/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/guidoschmidt%2Fzipper/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/guidoschmidt","download_url":"https://codeload.github.com/guidoschmidt/zipper/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241587853,"owners_count":19986628,"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":["creativecode","p5","threejs","tool","tooling","zig","ziglang"],"created_at":"2024-10-17T00:49:31.202Z","updated_at":"2025-03-03T00:12:46.028Z","avatar_url":"https://github.com/guidoschmidt.png","language":"Zig","funding_links":[],"categories":[],"sub_categories":[],"readme":"# zipper\n\u003e zig REST api server to store image data requests, \n\u003e e.g. for saving web canvas data\n\n### Rationale\nWorking with [Web canvas\nAPI](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API) it's often\ntedious to export animations as movies right from the browser. Usually one ends\nup using a screen recording software (OBS, Quicktime, ...) or the browsers\ndownload feature (resulting in thousand of download prompts opening up).\n\nThis is a quick and dirty image request handler for storing images \u0026 image\nsequences right from canvas API animations.\n\n### Build \u0026 Run\n\n```bash\ngit clone git@github.com:guidoschmidt/zipper.git\ncd zipper\ngit submodule update --recursive --init\nzig build\nzig build run\n```\n\n### Sending image data from the browser\n\nAdd the following Javascript/Typescript code and call it from your animation loop:\n\n```typescript\nfunction saveCanvasToBackend(selector: string, sequence: string, frame: number) {\n  const canvas: HTMLCanvasElement | null = document.querySelector(\n    selector || \"canvas\"\n  );\n  if (canvas === null) {\n    throw new Error(`No canvas element with ${selector} found`);\n  }\n  const dataUrl = canvas!\n    .toDataURL(\"image/png\")\n    ?.replace(\"image/png\", \"image/octet-stream\");\n  const data = {\n    imageData: dataUrl,\n    foldername: `${sequence}`,\n    filename: `${frame}`,\n    ext: \"png\",\n  };\n  fetch(\"http://localhost:3000\", {\n    method: \"POST\",\n    body: JSON.stringify(data),\n  });\n}\n```\n\nImplement any user interaction (button press, key press, etc) to set\n`isRecording` to `true` and call `saveCanvasToBackend` in the animation loop function:\n\n```Typescript\nlet frame = 0;\nlet isRecording = false;\n\nfunction draw() {\n  if (isRecording) {\n    saveCanvasToBackend(\"canvas\", \"Sequence-1\", frame);\n    frame++;\n  }\n}\n```\n\n### TODO\n- Error handling\n- p5.js example\n- three.js example\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fguidoschmidt%2Fzipper","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fguidoschmidt%2Fzipper","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fguidoschmidt%2Fzipper/lists"}