Render HTML And CSS On An ESP32

As the available computing power from affordable microcontrollers continues to increase, there is an inevitable blurring of the line between them and the lower tier of application processors capable of running Linux-based operating systems. For the most part a microcontroller busies itself with behind-the-scenes tasks, but as so many projects here have demonstrated, they can be pretty capable when it comes to user-facing applications too. Now [Andy Green] has extended the possibilities with affordable silicon, by producing a proof-of-concept HTML + CSS renderer over h2 on ESP32 for libwebsockets. Surf the web on a microcontroller without settling for a text-only experience? Why not!

He freely admits that this is far from being a complete HTML rendering engine, in that while it parses and renders HTML and CSS with JPEG and PNG image support, it does so only with a subset of HTML and is not tolerant of any malformations. There is also no JS support, which is hardly surprising given the available resources.

Even with those limitations it remains an impressive piece of work, which we hope will one day be able to make some effort at displaying Hackaday on ESP32 devices such as the European conference badges. Definitely a project to watch!

Screen capture of the WWN project, from the project's website, showing the instructions for WWN which are themselves presented as a WWN site.

Making Web Pages With Word?

If you’ve ever examined the messy HTML that results from doing a Save As HTML from Microsoft Word, you can appreciate [Jim Yuill]’s motivation for his WordWebNav (WWN) project. [Jim] uses Word to document his technical projects, and wanted an easy way to generate web pages. Not only is Word-generated HTML nearly unreadable, [Jim] notes there are known bugs, as well. His project attempts to solve these shortcomings, and adds new features like a navigation pane and headers, among others. Here is a link to a dummy project which shows off these features.

There are, of course, other ways of generating web pages from your technical documentation — there is the Markdown / Pandoc combination, various Wiki solutions, or GitHub Pages, for example. If you’re Python-focused, there’s always the Jupyter Notebooks / JupyterLab approach which we wrote about in 2019. But these presume the source documents are in a certain format. If you have years of existing documentation in Word, or you prefer (or are required) to use Word, [Jim]’s WWN tool might be of interest.

The open source, Python-based program can be found in the project’s GitHub repository. [Jim] has a lot of experience writing software, and the clean and well-organized source code reflects this. Do you convert project documentation to HTML for browsing, be it local or online? If so, share your techniques in the comments below.

Tool Generates Interactive PCB Diagrams From KiCAD

Nearly everyone likes nice pinout diagrams, but the more pins and functions are involved, the more cluttered and less useful the diagram becomes. To address this, [Jan Mrázek] created Pinion, a tool to help generate interactive diagrams from KiCad design files.

The result is an interactive diagram that can be viewed in any web browser. Hovering over a pin or pad highlights those signals with a callout for the name, and clicking makes it stay highlighted for easier reference. Further information can be as detailed or as brief as needed.

Interestingly, Pinion isn’t a web service that relies on any kind of backend. The diagrams are static HTML and JavaScript only, easily included in web pages or embedded in GitHub documentation.

If you think Pinion looks a bit familiar, you’re probably remembering that we covered [Jan]’s much earlier PcbDraw tool, which turned KiCad board files into SVG renderings but had no ability to add labels or interactivity. Pinion is an evolution of that earlier idea, and its diagrams are able to act as both documentation and interactive reference, with no reliance on any kind of external service.

Interested? Pinion has a full tutorial and demo and a growing library of parts, so check it out.

Browser Makes Tiny Office Suite

There’s a recent craze of people living in tiny houses of 400 square feet down to as little as 80 square feet. Maybe [zserge] was thinking about that and created a very tiny office suite in which each tool weighs in at less than 1K. If you are guessing you couldn’t squeeze much functionality in C or C++ code or even assembly, you’d be right. The language of choice? HTML and JavaScript. So while the code is small, it relies on a pretty big piece of software. On the other hand, you have a browser open right now, so the incremental cost of using these tools is very small.

We get the idea that there’s not much chance this is going to sweep the shelves of Microsoft Office, Libre Office, and all the many competitors. However, it is a pretty stunning example of what you can do with modern HTML. There’s even a GitHub repo and a subreddit.

Continue reading “Browser Makes Tiny Office Suite”

It Ain’t Over ‘Til The Paperwork Is Done: Test Driving TiddlyWiki

Working on projects is fun. Documenting them is often not so much. However, if you want anyone to duplicate your work — or even just want to remember what you were doing a few years ago when something needs upgrading or repairing.

There’s a ton of ways to keep track of the details of your projects. We love seeing how things come together and of course we’re happy to suggest documenting on But sometimes, you just want to keep your own notes to yourself. There’s always a notebook, of course, but that seems kind of old fashioned. A lot of projects are on Wikis but you hate to stand up a web server and a Wiki instance just to keep notes. But what if you could have a local Wiki with minimal setup?

I recently came across TiddlyWiki and decided to take it for a spin. Join me after to break to see what it’s all about.

Continue reading “It Ain’t Over ‘Til The Paperwork Is Done: Test Driving TiddlyWiki”

Four Years Of Learning ESP8266 Development Went Into This Guide

The ESP8266 is a great processor for a lot of projects needing a small microcontroller and Wi-Fi, all for a reasonable price and in some pretty small form factors. [Simon] used one to build a garage door opener. This project isn’t really about his garage door opener based on a cheap WiFi-enabled chip, though. It’s about the four year process he went through to learn how to develop on these chips, and luckily he wrote a guide that anyone can use so that we don’t make the same mistakes he did.

The guide starts by suggesting which specific products are the easiest to use, and then moves on to some “best practices” for using these devices (with which we can’t argue much), before going through some example code. The most valuable parts of this guide especially for anyone starting out with these chips are the section which details how to get the web server up and running, and the best practices for developing HTML code for the tiny device (hint: develop somewhere else).

[Simon] also makes extensive use of the Chrome developers tools when building the HTML for the ESP. This is a handy trick even outside of ESP8266 development which might be useful for other tasks as well. Even though most of the guide won’t be new to anyone with experience with these boards, there are a few gems within it like this one that might help in other unrelated projects. It’s a good read and goes into a lot of detail about more than just the ESP chips. If you just want to open your garage door, though, you have lots of options.

Explaining Efail And Why It Isn’t The End Of Email Privacy

Last week the PGPocalipse was all over the news… Except that, well, it wasn’t an apocalypse.

A team of researchers published a paper(PDF) where they describe how to decrypt a PGP encrypted email via a targeted attack. The research itself is pretty well documented and, from a security researcher perspective, it’s a good paper to read, especially the cryptography parts.

But we here at Hackaday were skeptical about media claims that Efail had broken PGP. Some media reports went as far as recommending everyone turn off PGP encryption on all email clients., but they weren’t able to back this recommendation up with firm reasoning. In fact, Efail isn’t an immediate threat for the vast majority of people simply because an attacker must already have access to an encrypted email to use the exploit. Advising everyone to disable encryption all together just makes no sense.

Aside from the massive false alarm, Efail is a very interesting exploit to wrap your head around. Join me after the break as I walk through how it works, and what you can do to avoid it.

Continue reading “Explaining Efail And Why It Isn’t The End Of Email Privacy”