Web Pages Via Forth

Forth. You either love it or you hate it. If you have struggled to work on tiny microcontrollers, you probably are in the first camp. After all, bringing up a minimal Forth system is pretty simple and requires very little resources on the CPU. Once you have such an environment it is then easy to extend Forth in Forth. [Remko] decided he wanted to build a Forth compiler that uses WebAssembly and runs in your browser. Why? We’ve learned not to think about that question too much.

The world has changed a lot since the first introduction of the WorldWideWeb browser in 1990. What started out as a way to show text documents over the network has become — for better or worse — an application platform. JavaScript won the browser scripting language wars and security concerns pretty much killed Java applets and Flash. But JavaScript isn’t always fast. Sure, there are ways to do just in time compiling, such as Google’s V8 engine. But that compile step takes time, too. Enter WebAssembly (or Wasm).

Continue reading “Web Pages Via Forth”

Tiny Websites have no Server

A big trend in web services right now is the so-called serverless computing, such as Amazon’s Lambda service. The idea is you don’t have a dedicated server waiting for requests for a specific purpose. Instead, you have one server (such as Amazon’s) listening for lots of requests and on demand, you spin up an environment to process that request. Conceptually, it lets you run a bit of Javascript or some other language “in the cloud” with no dedicated server.  https://itty.bitty.site takes this one step farther. The site creates self-contained websites where the content is encoded in the URL itself.

Probably the best example is to simply go to the site and click on “About itty bitty.” That page is itself encoded in its own URL. If you then click on the App link, you’ll see a calculator, showing that this isn’t just for snippets of text. While this does depend on the itty.bitty.site web host to provide the decoding framework, the decoding is done totally in your browser and the code is open source. What that means is you could host it on your own server, if you wanted to.

At first, this seems like a novelty until you start thinking about it. A small computer with an Internet connection could easily formulate these URLs to create web pages. A bigger computer could even host the itty.bitty server. Then there’s the privacy issue. At first, we were thinking that a page like this would be hard to censor since there is no centralized server with the content. But you still need the decoding framework. However, that wouldn’t stop a sophisticated user from “redirecting” to another — maybe private — decoding website and reading the page regardless of anyone’s disapproval of the content.

Continue reading “Tiny Websites have no Server”

Framed Raspberry Pi Keeps Tabs on Spotify

Perhaps you’ve noticed, but we here at Hackaday have a slight obsession with the over-engineered. One could fairly say there’s a linear relationship between how likely we are to feature a project and how needlessly complex it is. That said, it isn’t as if we are unable to appreciate a minimalist approach. Taking the scenic route can be a lot of fun, but sometimes it’s nice to just get where you’re going before you run out of gas.

This very slick Spotify “Now Playing” display created by [Jon Ashcroft] is a perfect example of that principle. The hardware is so straightforward that it’s barely worth mentioning: a Raspberry Pi with a small HDMI display, tucked neatly into a photo frame. Nothing to get too excited about there. The real hook with this particular project is the software.

[Jon] is a web developer by trade, so it’s natural he would approach his personal projects with that same mentality. Rather than one of the “usual suspects” for a Pi project like Python, he wrote his software in ES6; which the Pi is running through Chromium in kiosk mode (full screen web content, no top bar). For those of you who aren’t keeping up on web languages, ES6 is short for EcmaScript 6: a new version of the standard on which JavaScript is based. It’s a bit heavier on resources than is strictly necessary, but it works well enough in the end.

Using Spotify’s excellent API, his software pulls down the current track information and stores it locally. It does this every ~4 seconds, checking to see if the track has changed. [Jon] isn’t thrilled with this brute force method, but it works for now. It displays the current playing song and artist, and uses a library called node-vibrant to extract a dominant color from the album art and use that to create a complementary background color. Very slick.

[Jon] provides all of his source code and made it easy to connect to your own Spotify account, so don’t be surprised if you see this running on a “Magic Mirror” near you soon.

Turning That Old Hoverboard Into A Learning Platform

[Isabelle Simova] is building Hoverbot, a flexible robotics platform using Ikea plastic trays, JavaScript running on a Raspberry Pi and parts scavenged from commonly available hoverboards.

Self-balancing scooters a.k.a. Hoverboards are a great source of parts for such a project. Their high torque, direct drive brushless motors can drive loads of 100 kg or more. In addition, you also get a matching motor controller board, a rechargeable battery and its charging circuit. Most hoverboard controllers use the STM32F103, so flashing them with your own firmware becomes easy using a ST-link V2 programmer.

The next set of parts you need to build your robot is sensors. Some are cheap and easily available, such as microphones, contact switches or LDRs, while others such as ultrasonic distance sensors or LiDAR’s may cost a lot more. One source of cheap sensors are car parking assist transducers. An aftermarket parking sensor kit usually consists of four transducers, a control box, cables and display. Using a logic analyzer, [Isabelle] shows how you can poke around the output port of the control box to reverse engineer the data stream and decipher the sensor data. Once the data structure is decoded, you can then use some SPI bit-banging and voltage translation to interface it with the Raspberry Pi. Using the Pi makes it easy to add a cheap web camera, microphone and speakers to the Hoverbot.

Ikea is a hackers favourite, and offers a wide variety of hacker friendly devices and supplies. Their catalog offers a wide selection of fine, Swedish engineered products which can be used as enclosures for building robots. [Isabelle] zeroed in on a deep, circular plastic tray from a storage table set, stiffened with some plywood reinforcement. The tray offers ample space to mount the two motors, two castor wheels, battery and the rest of the electronics. Most of the original hardware from the hoverboard comes handy while putting it all together.

The software glue that holds all this together is JavaScript. The event-driven architecture of Node.js makes it a very suitable framework to use for Hoverbot. [Isabelle] has built a basic application allowing remote control of the robot. It includes a dashboard which shows live video and audio streams from the robot, buttons for movement control, an input box for converting text to speech, ultrasonic sensor visualization, LED lighting control, message log and status display for the motors. This makes the dashboard a useful debugging tool and a starting point for building more interesting applications. Check the build log for all the juicy details. Which other products from the Ikea catalog can be used to build the Hoverbot? How about a robotic Chair?

Continue reading “Turning That Old Hoverboard Into A Learning Platform”

TensorFlow in your Browser

If you want to explore machine learning, you can now write applications that train and deploy TensorFlow in your browser using JavaScript. We know what you are thinking. That has to be slow. Surprisingly, it isn’t, since the libraries use Graphics Processing Unit (GPU) acceleration. Of course, that assumes your browser can use your GPU. There are several demos available, include one where you train a Pac Man game to respond to gestures in your webcam to control the game. If you try it and then disable accelerated graphics in your browser options, you’ll see just what a speed up you can gain from the GPU.

Continue reading “TensorFlow in your Browser”

A Wrencher On Your Oscilloscope

We like oscilloscope art here at Hackaday, so it was natural to recently feature a Javascript based oscilloscope art generator on these pages, along with its companion clock. Open a web page, scribble on the screen, see it on the ‘scope.

As part of our coverage we laid down the challenge: “If any of you would like to take this further and make a Javascript oscilloscope Wrencher, we’d love to make it famous“. Which of course someone immediately did, and that someone was [Ted] with this JSFiddle. Hook up your soundcard’s left and right to X and Y respectively, press the “logo” button in the bottom right hand pane, fiddle with your voltages and trigger levels for a bit, and you should see a Wrencher on the screen. We’re as good as our word, so here we are making the code famous. Thanks, [Ted]!

It’s not an entirely perfect Wrencher generator, as it has a lot of points to draw in the time available, resulting in a flickery Wrencher. (Update: take a look at the comments below, where he has posted an improved JSFiddle and advice on getting a better screen grab.) Thus the screen shot is an imperfect photograph rather than the usual grab to disk, for some reason the Rigol 1054z doesn’t allow the persistence to be turned up in X-Y mode so each grab only had a small part of the whole. But it draws a Wrencher on the screen, so we’re pretty impressed.

The piece that inspired this Wrencher can be found here. If you think you can draw one with a faster refresh rate, get coding and put it in the comments. We can’t promise individual coverage for each effort though, we’re Hackaday rather than Yet-another-scope-Wrencher-aday.

Oscilloscope Art From Your Browser

Oscilloscope art is a fascinating pursuit in which waveforms are generated for the X an Y channels of an oscilloscope to draw pictures on its screen. It’s somewhat distinct from vector computer graphics of the type you might see in older arcade machines or the Vectrex console, in that while it uses a similar approach to creating a display it has a very different purpose. Sometimes these works can be breathtakingly beautiful animations, and other times maybe not so much.

If you’d like to explore the topic as a mild diversion, then maybe this Javascript oscilloscope art generator from [Neil Fraser] might be of interest. In around a hundred lines of code he’s created an in-browser scratchpad upon which a waveform can be drawn which will then be created as an audio signal on your computer’s soundcard. Hook up left and right to X and Y of your oscilloscope, and what you scribbled on the pad should pop up on the screen.

Draw it, see it on screen. Magic!
Draw it, see it on screen. Magic!

It’s an impressive piece of work that you can see in the video below or try for yourself, and your scribe’s Rigol was pressed into service to give it a go. After a bit of tweaking to find the right voltages and selecting slope triggering rather than edge triggering, we too were making squiggles appear on the screen.

It’s rather funny, he’s saved the best for last. As an afterthought, he also provides a link to another piece of his work, an oscilloscope clock in Javascript. If any of you would like to take this further and make a Javascript oscilloscope Wrencher, we’d love to make it famous.

Continue reading “Oscilloscope Art From Your Browser”