leopck/microbrowser

Microbrowser for Microcontroller

microbrowser

Microbrowser for Microcontroller

WIP, does not work for now.

Status

• litehtml is now able to compile on ESP32 and Arduino
• Inkplate on Arduino is working
• Currently implementing litehtml document_container to use Inkplate rendering to draw onto the display from the output of the HTML container_esp32_inkplate

About this project

A Microbrowser that is able to render HTML5 and CSS3 on a Microcontroller (ESP32). No Javascript support for now.

Recently I just received my Inkplate 6 from CrowdSupply, an E-paper powered by ESP32 and wanted to browse my website from my Inkplate.

How does it work?

• litehtml for rendering the HTML
• Inkplate library for rendering the text and graphics onto the E-paper
• (Future) LGVL - Light and Versatile Graphics Library https://lvgl.io/

Getting Started

Requirement

• Docker

Compiling and Uploading to your Inkplate ESP32

git clone https://github.com/leopck/microbrowser/
docker run -it --rm --privileged -v /dev/ttyUSB0:/dev/ttyUSB0 -v $PWD/microbrowser/:/go/microbrowser arduino-cli

Compile only

git clone https://github.com/leopck/microbrowser/
docker run -it --rm --privileged -v /dev/ttyUSB0:/dev/ttyUSB0 -v $PWD/microbrowser/:/go/microbrowser arduino-cli make compile

microbrowser's Issues

Implementing the litehtml

In order for litehtml to render/draw onto Inkplate, we need to implement the document_container.

List of functions to implement:

• virtual litehtml::uint_ptr create_font(const litehtml::tchar_t* faceName, int size, int weight, litehtml::font_style italic, unsigned int decoration, litehtml::font_metrics* fm);
• virtual void delete_font(litehtml::uint_ptr hFont) override;
• virtual int text_width(const litehtml::tchar_t* text, litehtml::uint_ptr hFont) override;
• virtual void draw_text(litehtml::uint_ptr hdc, const litehtml::tchar_t* text, litehtml::uint_ptr hFont, litehtml::web_color color, const litehtml::position& pos) override;
• virtual int pt_to_px(int pt) override;
• virtual int get_default_font_size() const override;
• virtual const litehtml::tchar_t* get_default_font_name() const override;
• virtual void load_image(const litehtml::tchar_t* src, const litehtml::tchar_t* baseurl, bool redraw_on_ready) override;
• virtual void get_image_size(const litehtml::tchar_t* src, const litehtml::tchar_t* baseurl, litehtml::size& sz) override;
• virtual void draw_background(litehtml::uint_ptr hdc, const litehtml::background_paint& bg) override;
• virtual void draw_borders(litehtml::uint_ptr hdc, const litehtml::borders& borders, const litehtml::position& draw_pos, bool root) override;
• virtual void draw_list_marker(litehtml::uint_ptr hdc, const litehtml::list_marker& marker) override;
• virtual void set_caption(const litehtml::tchar_t* caption) override;
• virtual void set_base_url(const litehtml::tchar_t* base_url) override;
• virtual void link(const std::shared_ptrlitehtml::document &ptr, const litehtml::element::ptr& el) override;
• virtual void on_anchor_click(const litehtml::tchar_t* url, const litehtml::element::ptr& el) override;
• virtual void set_cursor(const litehtml::tchar_t* cursor) override;
• virtual void transform_text(litehtml::tstring& text, litehtml::text_transform tt) override;
• virtual void import_css(litehtml::tstring& text, const litehtml::tstring& url, litehtml::tstring& baseurl) override;
• virtual void set_clip(const litehtml::position& pos, const litehtml::border_radiuses& bdr_radius, bool valid_x, bool valid_y) override;
• virtual void del_clip() override;
• virtual void get_client_rect(litehtml::position& client) const override;
• virtual std::shared_ptrlitehtml::element create_element(const litehtml::tchar_t *tag_name, const litehtml::string_map &attributes, const std::shared_ptrlitehtml::document &doc) override;
• virtual void get_media_features(litehtml::media_features& media) const override;

https://github.com/leopck/microbrowser/blob/master/container_esp32_inkplate.cpp