Archive | May, 2019

How to Display live data from an Arduino on a webpage

08 May19

How to Display live data from an Arduino on a webpage

For a recent project I needed to use a large screen to display instructions to the user. It's for a simple game where you use a pinball-style plunger to shoot balls at 1 of 4 holes. An Arduino checks laser sensors in each hole to detect where the ball went. If you hit the correct hole, you'll get a new hole to hit. Based on balls falling through a hole, I needed to display one of 3 images (instructions/correct/wrong) per hole and I also have a physical button that change the language between Norwegian and English. 4 holes X 3 images X 2 languages = 24 possible images. What should I use to display these images?

Formerly I'd just whip up an AIR application, but I have not done that since 2012. I have used Fusetools a few times the last years, but it no longer supports output to PC. What to use in 2019? Unity or C# I guess, but what's a simple way to solve this if you know the size of the screen and you only need to display images at full screen? Well node.js of course!

I guessed that all I would need to do was to Google a bit and I'd find som good code to start from, but I couldn't find anything suitable. So to solve this I've now published a minimal solution on my github that anyone can use to build a similar solution.

The setup uses an Arduino (with sensors, inputs or whatever) to generate data. This is sent serially via USB to Node that parses the input using "serialport". I'm using Express to build a lightweight webserver that serves a page and a connection for the live data from the Arduino. Using on the web client, the live data sent from the Arduino is displayed on the webpage.

My final product became pretty advanced, but this simplified project should get you started. Happy coding!


Warming up to browser apps

11 Sep12

Warming up to browser apps

I recenty did a really fun game for my friends at Last Friday in Stavanger. The game itself was a typical fly-in-space-and-shoot-asteroids-type of game. A simple, but easy to understand concept. However - what was special was how you controlled the game and the size of the screen!

The display was projected on a 8x12 meters screen located right in the middle of the Stavanger town square. People walking by could just pick up their smartphone, open a URL and then play the game. I did the code for client, server and game/display while Last Friday delivered the graphics, the physical installation and helped out on bits and pieces.

This is the solution that we came up with:

  • JS/HTML5 game controller that works on any smartphone / pad / desktop
  • Node.js on the server with as the transport
  • AIR app for the game and display

Node.js kept a queue of clients waiting to play the game. This was sent back to the clients so they could see what position they had in the queue. The info was also sent to the huge game display that showed the game-queue in between games along with instructions on how to join. Once it was your turn, your phone displayed a "Get ready"-message and the game controls faded in so you could play.

Sounds simple? It wasn't all smooth sailing and here's some lessons learned along the way.

The original idea

The original idea was to use a local socket server and a native game controller-application that people would have to install. I wanted a challenge and thought this was a good project for testing the maturity of mobile browsers and node.js/ that I had heard so much hype about. Last Friday liked the idea and I started making a "proof of concept" browser-app. This turned out to work really well and Last Friday could sit in Stavanger and play the game running on a display and server in Oslo without serious lag. Not shabby? I hacked together the concept in just one day, including learning node.js… Maybe the hype around node.js could have some substance?

As the game progressed we realized that there was no need for making a custom app and there was also no need to set up a special access point for the players. They simply connected through their 3G connection and that provided sufficient speed. Users with iPhone's got the best experience since they can use WebSockets. For Android the default Webkit browser can't do websockets, so (the transport used with Node.js) falls back to using HTTP-calls. We initially thought that this would prove to be a problem, but it worked rather well.

The solutions

I initially spent 2 days on the server, 2 days on the game/display and initially just 2 days on the mobile client. This is before some minor game tweaks and starting the dreadful job of fixing browser bugs and incompatibilities. That part took another 3 days and then some. Here's some lessons learned:

  • When making a game-controller, it's important that you can hold the button to repeat the action. The problem with this is that if you tap and hold an image in a mobile browser, the Save-as dialogue will appear. This prevents controller input and crashes spaceships… Mobile Safari has a super-neat css property called "-webkit-touch-callout: none !important". Adding this line in your CSS prevents the dialogue from showing, but - oh joy - this is a proprietary CSS tag so it only works on iOS devices.

    For Android, you'll have to hijack all possible events (ontouchstart, ontouchmove, ontouchend, ontouchcancel) for the image and then kill any default responses to this (preventDefault, stopPropagation, cancelBubble, returnValue AND return false).
  • Another problem with mobile clients and game-controller input is that if you drag your finger on an image, the browser thinks you're dragging it. As before - mobile Safari has a proprietary CSS-tag for this as well: -webkit-user-drag: none;
    Mobile browsers will also try to highlight selected objects. This can be also be turned off using webkit magic: -webkit-tap-highlight-color: rgba(0,0,0,0);
  • Using jQuery Mobile accelerated development overall, but it also caused some extra debugging when it "killed" the first fix for the above problem. I'm guessing jQuery Mobile comes with its own set of hacks and that we did something that cancelled something that our app need? Not sure how it resolved, but Edvard at Last Friday got it working again.
  • Calling "window.scrollTo(0, 1)" is the clue to remove the address bar in mobile apps. Works well, but not fault free.
  • Mobile clients don't really tell that they've closed a connection. To solve this we implemented a polling from the server that cleaned out clients that didn't reply within a reasonable time - indicating that the browser was wither closed or fully disconnected.

The game was made only for the annual ONS conference so unfortunately you can no longer play it. While having a short lifespan, the project was a great learning experience. I have to say that overall, I'm not impressed by the current state of mobile browsers. However - node.js really is a beautiful piece of Open Source software!


Working with Node has more or less changed my mind about making apps based on Javascript. A library that allow you to learn, implement and run a custom server in just hours is nothing less than stunning. If you're a Flash developer reluctant to move into Javascript - I urge you to go check out node.js and work through this tutorial. It's fun to play with, you can easily use it with your Flash / AIR projects and you'll probably learn something new about Javascript along the way :-)

Oh - did I mention the coolest part? As you can see from the screenshot above - the client was IRIS & NASA. I've actually made a space game for NASA! How cool is that?

The game in all it's 100m2 glory in Stavanger


Friday fun - Bloody Rage 2

20 Mar09

It’s friday, so it’s time to kick back (!) and relax a little with a brand new action game made with Away3D! Bloody Rage 2 is a full 3D Fighter game with a bunch of opponents to take on ( Super-Obama, Snake, Bruise Lee, Piccolo and many more). The game is almost Console quality and offers advanced features such as a character editor that allows you to freely paint and decorate your characters.

Click here to play Bloody Rage 2!


Best Flash game of 2008? (Now with url as well)

06 Jan09

I just wasted (too much) time on a classic platform game done in Flash called The Fancy Pants Adventure World 2. Why? It’s just so well executed. The levels are clever and varied, the controls are intuitive and responsive and while the graphics may look simple, but they’re really well animated with lot’s of humor.


There’s an incredibly high level of detail in this game - from the characters hair blowing in the direction you’re running/jumping, when he’s almost slipping off and edge, fixing his hair or going to sleep if you don’t do anything. It’s full of charm and 100% child-safe, so if you have an hour (or more to waste) check it out! Despite the simple style, I know that making a game with this good flow is incredibly hard so this game gets my vote for best Flash Game 2008!

Friday fun

27 Jun08

Just wasted way too much time play through this game called Splume. Utilizing a classic concept this is a “silent”, but really good time-waster on a rainy Oslo friday.

(via Mims Wright)

Fløjte Hero

07 Oct07

Been a while since I’ve posted any games, but here’s one for the Guitar Hero fans - Fløjte Hero! For those not too steady in Danish, Fløjte means Flute. Go on stage and blow them away! :-P

(via Flash Freebies)

Great looking Flash game - Get the Glass

22 Mar07

This is one of the more inventive games and uses of Flash video that I’ve seen lately. It seems so obvious when you see it, but it’s a beautiful 3D animated board game. Just throw the dice to get milk :)

(Via GT)

Friday fun from Kerb

09 Mar07

Remember Lemmings? I wasted so many hours on that game… I have it on my mobile for those times the train is delayed, but here’s a nice twist to it from Kerb: Guide a bunch of students from the phone-booth to the party-tent :-)

Tower Defence

06 Jan07

Keep It Simple Stupid (KISS) is a priciple not so often used in todays 3D glorified world. Tower Defence is extremely simplistic, but a great game.

(Via Franto)

Flash Physics

16 Dec06

Duhh… Yet again, my gaming PC crashes while playing Rise of Legends, just when it started to get intense and I didn’t save (Glad I switched to Mac so the same don’t happen on my development-machine). Will be some time until we get such a quality (if ever) in Flash-games, but my hopes are high that there will be some sort of 3D engine in the upcoming Flash 10 player. While we wait for that - Andre Michelle just blogged a nice 2D physics engine for Flash and AS3 that was just released as Open Source: Fisix.

Fisix looks promising, but it’s still a little slow, especially when played back on an Intel Mac. Slightly irritating that I get better FPS using virtualization running Parallels and XP in a window on the OSX desktop. One would think that now that all the Adobe-folks are running Intel Macs themselves they’d do something about this?