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.

JavaScript App Uses Advanced Math To Make PCBs Easier To Etch

We all remember the litany from various math classes we’ve taken, where frustration at a failure to understand a difficult concept bubbles over into the classic, “When am I ever going to need to know this in real life?” But as we all know, even the most esoteric mathematical concepts have applications in the real world, and failure to master them can come back to haunt you.

Take Voronoi diagrams, for example. While we don’t recall being exposed to these in any math class, it turns out that they can be quite useful in a seemingly unrelated area: converting PCB designs into easy-to-etch tessellated patterns. Voronoi diagrams are in effect a plane divided into different regions, or “cells”, each centered on a “seed” object. Each cell is the set of points that are closer to a particular seed than they are to any other seed. For PCBs the seeds can be represented by the traces; dividing the plane up into cells around those traces results in a tessellated pattern that’s easily etched.

To make this useful to PCB creators, [Craig Iannello] came up with a JavaScript application that takes an image of a PCB, tessellates the traces, and spits out G-code suitable for a laser engraver. A blank PCB covered with a layer of spray paint, the tessellated pattern is engraved into the paint, and the board is etched and drilled in the usual fashion. [Craig]’s program makes allowances for adding specific features to the board, like odd-shaped pads or traces that need specific routing.

This isn’t the first time we’ve seen Voronoi diagrams employed for PCB design, but the method looks so easy that we’d love to give it a try. It even looks as though it might work for CNC milling of boards too.

aemkei's xor patterns

Alien Art Drawn With Surprisingly Simple Math

Programmer [aemkei] Tweeted the formula (x ^ y) % 9 alongside code for more “alien art”. But how can a formula as simple as (x ^ y) % 9 result in a complex design? The combination of Bitwise XOR (^) and Modulo (%) generate a repeating pattern that’s still complex enough to satisfy the eye, and it’s ok if that doesn’t sound like an explanation. Bitwise operations are useful when working with memory and shift registers, but also worth learning if you want to drive lines or matrices of LEDs or interpret combinations of multiple switches, or in this case a great way to throw an interesting test pattern up on a new flip-dot display or low-res LED matrix. Are you into it? We are, so let’s jump in.

XOR Truth Table
0b00 0b01 0b10 0b11
0b00 0b00 0b01 0b10 0b11
0b01 0b01 0b00 0b11 0b10
0b10 0b10 0b11 0b00 0b01
0b11 0b11 0b10 0b01 0b00

Bitwise XOR compares each binary digit of the two inputs. The XOR returns a 1 when only one of the two digits is a 1, otherwise, it returns a zero for that position. Let’s say the coordinates were 3, 2. Converted to binary we have 0b11 and 0b10. From this truth table, we can see the most-significant digits are both 1, returning a 0, while only one of the least-significant digits is a 1, so the comparison returns a 1.

Moving onto the %, which is the Modulo operator has nothing to do with percentages. This operator divides two numbers and returns the remainder if any. Take 9 % 5. When dividing 9 by 5, 5 goes in once with a remainder of 4 so 9 % 5 = 4. Now our original formula from the top will draw a black box for every ninth number except that the bitwise XOR throws a wrench into that count, varying how often a number divisible by 9 appears and supplying the complexity necessary for these awesome patterns.

detail of aemkei's xor patterns

What are the most interesting designs can you create in a simple formula?

Phishing With Morse Code

All of us have seen our share of phishing emails, but there are a lot more that get caught by secure email gateways and client filters. Threat actors are constantly coming up with new ways to get past these virtual gatekeepers. [BleepingComputer] investigated a new phishing attack that used some old tricks by hiding the malicious script tags as morse code.

The phishing attack targets Microsoft account login credentials with an HTML page posing as an Excel invoice. When opened, it asks the user to re-enter their credentials before viewing the document. Some external scripts are required to render the fake invoice and login window but would be detected if the links were included normally. Instead, the actor encoded the script links using dots and dashes, for example, “.-” equals “a”. A simple function (creatively named “decodeMorse”) is used to decode and inject the scripts when it runs in the victim’s browser.

Of course, this sort of attack is easy to avoid with the basic precautions we are all familiar with, like not opening suspicious attachments and carefully inspecting URLs. The code used in this attack is simple enough to be used in a tutorial on JavaScript arrays, but it was good enough to slip past a few large company’s filters.

Phishing attacks are probably not going to stop anytime soon, so if you’re bored, you could go phishing for phishers, or write some scripts to flood them with fake information.

Remoticon Video: Meta_Processing Is A Mashup Of Text And Block Programming

Very few people want to invent the universe before they blink their first LED. Sure, with enough interest a lot of folks will drill-down to the atomic level of technology and build their way back up. But there’s something magical about that first time you got your blinky to blink, and knowing how to write makefiles plays no part in that experienc). Now apply that to projects using smartphone as wireless interfaces… how simple can we make it for people?

Meta_Processing can translate the instructions into any of 14 languages

Jose David Cuartas is working to answer that very question and gives us a guided tour of his progress in this Meta_Processing workshop held during the Hackaday Remoticon. Meta-Processing is an IDE based on — as you’ve probably guessed — Processing, the programming language that unlocked higher-level functionality to anyone who wanted to perform visually-interesting things without becoming software zen masters. The “Meta_” part here is that it can now be done with very limited typing and interchangeably between different spoken languages.

The approach is to take the best of text programming and block programming languages and mash them together. In that way, you don’t type new lines, you add them with a click of the mouse and select the instruction you want to use on that line from a list. It means you don’t need to have the instructions memorized, and avoids typos in your code. The docs for that instruction will be shown on the bottom bar of the IDE to help you with parameters. And the kicker is that since you’re selecting the instructions, choosing any of the IDE’s 14 available spoken languages will update your “code” with translations into the new language.

In the workshop, video of which is included below, Jose demonstrates a number if interesting examples including audio, video, and user input, using a surprisingly small amount of code. The IDE even spawns a server on the network so that the apps you’ve written can be loaded by a smartphone. It has support for communicating with Arduino-compatible devices with digital read/write, analog read, and servo control. There’s even a fork of the project called Meta_Javascript that rolls in the ability to work with REST-like APIs.

People learn in many different ways. Having options like this to help people get to blinky very quickly is a great way to break down barriers to understanding and using computers.

Continue reading “Remoticon Video: Meta_Processing Is A Mashup Of Text And Block Programming”

C++ Compiler Targets The Web

It is a common problem these days. You have a piece of code in C or C++. Maybe it is older code. Or maybe you prefer prototyping your ideas using C. But, inevitably, someone now wants your code to run in a Web browser. The options for making this happen have expanded quite a bit lately and one possibility is Cheerp, an open-source compiler that handles up to C++ 17 and can output to WebAssembly, JavaScript, or asm.js.

The compiler is free to use for GPLv2 projects. If you aren’t open yourself, it looks like you have to cut a deal to use Cheerp with its maker, Learning Technologies.

Continue reading “C++ Compiler Targets The Web”

Roll Your Own Photo Sharing, Minus The Social Networking Baggage

[Niklas Roy] rolled his own photo diary, because he found the core functionality of something like instagram attractive, but didn’t want the social network baggage that it came with. His simple system is called my own insta ;) and it consists of some javascript and PHP to create a nice progressive web app photo diary and backend that can be accessed just fine from a mobile device. It is available on GitHub for anyone interested in having their own.

This project came up because [Niklas] sometimes found himself working on small projects or experiments that aren’t destined for proper documentation, but nevertheless could benefit from being shared as a photo with a short description. This dovetails with what many social networks offer, except that those platforms also come with other aspects [Niklas] doesn’t particularly want. His online photo diary solves this by having a simple back end with which he can upload, sort, and caption photos in an easy way even from a mobile device.

Rolling one’s own solution to some small core functionality offered by a social network is one way to avoid all the extra baggage, but another method is to simply automate away all the pesky social bits with a robot.