{"id":17150063,"url":"https://github.com/rahul-thakoor/embedded-graphics-web-simulator","last_synced_at":"2025-06-17T05:02:37.040Z","repository":{"id":40671489,"uuid":"251035209","full_name":"rahul-thakoor/embedded-graphics-web-simulator","owner":"rahul-thakoor","description":"A web simulator for the embedded-graphics library  ","archived":false,"fork":false,"pushed_at":"2023-11-11T12:53:44.000Z","size":2228,"stargazers_count":24,"open_issues_count":24,"forks_count":10,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-05-15T09:44:13.086Z","etag":null,"topics":["embedded-rust","rust","wasm","webassembly"],"latest_commit_sha":null,"homepage":"https://rahul-thakoor.github.io/embedded-graphics-web-simulator/","language":"Rust","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/rahul-thakoor.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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,"zenodo":null}},"created_at":"2020-03-29T13:12:05.000Z","updated_at":"2024-12-14T04:49:45.000Z","dependencies_parsed_at":"2024-02-18T04:00:54.913Z","dependency_job_id":null,"html_url":"https://github.com/rahul-thakoor/embedded-graphics-web-simulator","commit_stats":{"total_commits":24,"total_committers":7,"mean_commits":"3.4285714285714284","dds":0.6666666666666667,"last_synced_commit":"b52274cdf2656a7ab84c3524e959b086c15b3dbe"},"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/rahul-thakoor/embedded-graphics-web-simulator","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rahul-thakoor%2Fembedded-graphics-web-simulator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rahul-thakoor%2Fembedded-graphics-web-simulator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rahul-thakoor%2Fembedded-graphics-web-simulator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rahul-thakoor%2Fembedded-graphics-web-simulator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rahul-thakoor","download_url":"https://codeload.github.com/rahul-thakoor/embedded-graphics-web-simulator/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rahul-thakoor%2Fembedded-graphics-web-simulator/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260294442,"owners_count":22987620,"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":["embedded-rust","rust","wasm","webassembly"],"created_at":"2024-10-14T21:34:46.105Z","updated_at":"2025-06-17T05:02:37.011Z","avatar_url":"https://github.com/rahul-thakoor.png","language":"Rust","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Embedded Graphics Web Simulator\n\nThe web simulator is based on [embedded-graphics-simulator](https://docs.rs/embedded-graphics-simulator/0.2.0/embedded_graphics_simulator/).\nThis is a sample project demonstrating using a `no_std` rust-embedded library with Webassembly.\n\nThe Web Simulator allows you to use a browser to test embedded-graphics code and run graphics. There is no need to install SDL and its development libraries for _running_ the project. You can see [the demo here](https://rahul-thakoor.github.io/embedded-graphics-web-simulator/).\n\n![basic demo](./assets/embedded-graphics-web-simulator.jpg)\n## For Development\n\nThis library is intended to be used in Rust + Webassembly projects. Check the examples which illustrate how to use the library. Look at the [examples](https://github.com/embedded-graphics/simulator/tree/master/examples) in the Embedded Graphics Simulator project for inspiration. You can use [wasm-pack](https://rustwasm.github.io/wasm-pack/) or [trunk](https://trunkrs.dev/)and add this library as a dependency \n\nUsage example:\n\n```rust\nuse embedded_graphics_web_simulator::{\n    display::WebSimulatorDisplay, output_settings::OutputSettingsBuilder,\n};\nuse wasm_bindgen::prelude::*;\nuse web_sys::console;\n\nuse embedded_graphics::{\n    image::Image,\n    mono_font::{ascii::FONT_6X9, MonoTextStyle},\n    pixelcolor::Rgb565,\n    prelude::{Point, Primitive, WebColors},\n    primitives::{Circle, PrimitiveStyle},\n    text::Text,\n    Drawable,\n};\n\nuse tinybmp::Bmp;\n\n// When the `wee_alloc` feature is enabled, this uses `wee_alloc` as the global\n// allocator.\n//\n// If you don't want to use `wee_alloc`, you can safely delete this.\n#[cfg(feature = \"wee_alloc\")]\n#[global_allocator]\nstatic ALLOC: wee_alloc::WeeAlloc = wee_alloc::WeeAlloc::INIT;\n\n// This is like the `main` function, except for JavaScript.\n#[wasm_bindgen(start)]\npub fn main_js() -\u003e Result\u003c(), JsValue\u003e {\n    // This provides better error messages in debug mode.\n    // It's disabled in release mode so it doesn't bloat up the file size.\n    #[cfg(debug_assertions)]\n    console_error_panic_hook::set_once();\n\n    let document = web_sys::window().unwrap().document().unwrap();\n\n    let output_settings = OutputSettingsBuilder::new()\n        .scale(1)\n        .pixel_spacing(1)\n        .build();\n    let mut text_display = WebSimulatorDisplay::new((128, 64), \u0026output_settings, None);\n    let mut img_display = WebSimulatorDisplay::new(\n        (128, 128),\n        \u0026output_settings,\n        document.get_element_by_id(\"custom-container\"),\n    );\n\n    let style = MonoTextStyle::new(\u0026FONT_6X9, Rgb565::CSS_WHITE);\n\n    if Text::new(\"Hello, wasm world!\", Point::new(10, 30), style)\n        .draw(\u0026mut text_display)\n        .is_err()\n    {\n        console::log_1(\u0026\"Couldn't draw text\".into());\n    }\n\n    // Load the BMP image\n    let bmp = Bmp::from_slice(include_bytes!(\"./assets/rust-pride.bmp\")).unwrap();\n    let image = Image::new(\u0026bmp, Point::new(32, 32));\n    if image.draw(\u0026mut img_display).is_err() {\n        console::log_1(\u0026\"Couldn't draw image\".into());\n    }\n\n    if Circle::new(Point::new(29, 29), 70)\n        .into_styled(PrimitiveStyle::with_stroke(Rgb565::CSS_WHITE, 1))\n        .draw(\u0026mut img_display)\n        .is_err()\n    {\n        console::log_1(\u0026\"Couldn't draw circle\".into());\n    }\n\n    img_display.flush().expect(\"Couldn't update\");\n    Ok(())\n}\n\n```\n\n### How it works\n\nEmbedded Graphics Web Simulator implements [`DrawTarget`](https://docs.rs/embedded-graphics/0.6.0/embedded_graphics/prelude/trait.DrawTarget.html) for the HTML `\u003ccanvas\u003e` element.\nIt will attach a `\u003ccanvas\u003e` either to the document body, or to a user-supplied parent element.\nTo minimize overhead, draw operations need to be explicitly `flush()`ed whenver you want to see an actual update.\n\n## Credits\n\nThis project is based on the [embedded-graphics](https://github.com/embedded-graphics/simulator) library, originally by @jamwaffles\n\n\n### Tools\n-  [wasm-pack](https://rustwasm.github.io/wasm-pack/)\n- [cargo-run-wasm](https://crates.io/crates/cargo-run-wasm)\n\n\nThanks to all contributors :)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frahul-thakoor%2Fembedded-graphics-web-simulator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frahul-thakoor%2Fembedded-graphics-web-simulator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frahul-thakoor%2Fembedded-graphics-web-simulator/lists"}