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!


React with Javascript package managers

13 Nov15

React with Javascript package managers

One of the best ways to learn new software is to take on a commercial project and force yourself to use it. I do this all the time and with all the cool kids ranting about React, I felt that it was time to do a project based on it. It's been a bit painful, but I've come to enjoy the way React works. It's actually quite beautiful!

I've used Angular before and React feels much more solid and natural. It does require that you learn how React thinks (or want you to think), and that part might take a little time. Here's some of what I've learned while using React.

Javascript - the new frontend AND backend favorite

To create a HelloWorld on the web, all you need is a HTML page with a few lines of inline JS. How can a 200+ file download possibly be an upgrade from that? It just does not make sense that a simple HelloWorld-project should become a folder with 139Mb of Javascript based libraries, right? Like it or not - Javascript is the language that takes over both frontend and backend development these days.

You can use it old-style (and write it all by hand) or use one of the many hundred frameworks that are out there to make your life easier. So while the initial download may be large when using frameworks, the files will normally be cached by the browser. If you use a CDN for your framework, odds are that it's already cached.

I've always known JS and it's very close to Actionscript. Learning React has not only been yet another nail in the Flash coffin (it's really completely dead). Learning React has also taught me several new programming concepts that I'll keep using for other projects.

How React is different

I've had to do lots of refactoring every time I've understood how a new thing worked in React and that’s been a bit painful. Initially I tried to fight against how React worked since I wanted to be in control. The React way of doing things is to not do things directly, but to always do things based on state. The data model controls the GUI in reactive programming. React only re-renders if an object has changed, so to change something on screen, you need to implement a visual change in response to an object/variable changing. This happens asyncronously since the React DOM and the browser DOM are two different things. With React, you never manipulate the DOM directly. It always happens because of a change in the data model of the app.

Changing an object/variable to change the GUI sounds cumbersome until you've used it. The super-neat thing about this is that if you do things correctly, you'll be able to start your app from ANY state and also to change it while it's running! You just set the variables and the app will render straight to this state! No more clicking 20 times to get to a certains state for debugging. Now you just set the data of that state and you're there? Understanding how to solve things "the React way" is what really takes time, but once you get the hang of it you'll wonder why not all software is based on this principle.

A React application starts at a root component, that then renders sub-components that renders sub-components. It takes time to understand where in such a hierarchy certain data should be, how it's passed most effectively and how to implement the visual changes in response. I won't say I'm completely on top of this yet, but I really feel that I'm getting a lot back from this approach of working. The very clean separation of responsibilities between each component makes you much less afraid of breaking stuff than with other ways of working with code. You basically jump straight to the module you want to work on and do your thing, knowing that it won't break stuff. I really recommend trying out this way of developing web apps if you haven't!

Getting up to speed

When you start out with React, you'll most likely start like me using the in-browser JSX transformer to convert JSX to pure javascript at runtime. This process is called "transpiling", since you're not really compiling but rather converting the React's custom JS format (JSX) to plain ECMAScript JS. Following the official docs from Facebook, you'll get your project started but to really grasp the full power of React, you should go through setting up the NPM and JSPM package managers.

Why? For one thing - most of the example code you'll find online will require it. Package managers are great tools since they keep track of all the dependencies used in your project and they download all dependencies from CDN's. The most important is however that they can convert your app to a pure JS class that is much faster than the runtime-compiled JSX script.

So how do you get started with Package Managers? There's several to choose from, but if you've played with Node.js you probably already have "npm" installed? If not, click here to learn how to install it. Once you have npm installed, open a terminal window (or CMD command line on Windows) and type:

  sudo npm install jspm -g

This will install JavaScript Package Manager (JSPM) on your system and make it easy to install any library you want to use. JSPM seems like a solid choice among a flurry of others that pop up and then disappear and it can pull in code-packages from both npm and github.

To create a new project from scratch, you'll make a new folder, go into it and type the following:

  npm init
  jspm init

This will create a couple basic files that the package manager needs to keep track of what libraries your project is using. It will also download some base packages you need to start developing: Systemjs makes it easy to include libraries on your app. Babel compiles JSX to a variety of JS (including ECMAScript 6 / ES2015), makes sense out of error messages and adds support for missing features in some browsers. You'll find these and some others in a folder called "jspm_packages". With these files in place, you'll want to get ready for React programming by installing React itself:

  jspm install npm:react

These are now added as dependencies in the package.json file in your folder and you can start using React with a package manager to ease your development.

JS and it's blazing speed of development

This talk from Jack Franklin was of great help to me in learning JSPM, but it's also quite typical in the JS-world that the talk from May (6 months ago) is already full of "bugs". JS libs are rarely consistent over time, and if you try to run his code, you'll get errors like:

  Warning: React.render is deprecated. Please use ReactDOM.render from require('react-dom') instead

If you then try to use that code, you'll realise that you didn't install the package "react-dom" since that wasn't needed 6 months ago. Looking at the official documentation from Facebook you'll see that you should not use the import-statement as Jack does, but rather use "require" like this:

var React = require('react');
var ReactDOM = require('react-dom');

Running that will give you the error:

  Error: require is not defined

Facebook just takes it for granted that you've installed the "browserify" package. This is what give you the require-statement and other goodness since there's no such thing in JS. They take this for granted in all their doumentation, so be aware that you'll need that to have browserify or webpack installed if you want to just cut and paste their examples. They do actually mention it on their Getting Started page, but if you're new to Javascript package managers, it's quick to skip that single mention.

But - armed with your new knowledge about JSPM, you could just pull it down

  jspm install npm:browserify

The problem is that this requires that you reconfigure your app from scratch, and since you're now following Jack's great tutorial, you should rather do the following:

  jspm install npm:react-dom

Once that is in place, you can use "import" rather than "require" like this:

  import React from 'react';
  import ReactDOM from 'react-dom';

I don't find these error messages intuitive at all, so I thought I'd better jot this down for Google to find, so others can skip some frustration

Using "import" or "require" syntax is just a matter of preference. You can use both, but since none of them actually exists in JS they're implemented as Polyfills - placeholder syntax for methods that may or may not end up in the ECMA language.

Why Javascript should become what students learn first

When I started using Node.js on both the server & client some years ago, I never thought it'd become as popular as it is today. Now that I'm teaching a bit, I keep thinking that it's crazy that students don't learn JS in school. Think about it - why should students not learn a language that can cover both the client and the server? It is after all the programming concepts you should be tought at school, not the syntax. The Syntax is bound to change and keep changing, but the general concepts of programming is something that you'll carry with you from one language to the next.

If I could affect the students carriculum at University and higher education, I'd use Javascript as the first programming language to learn. Once students know the basics of the language, I'd make a frontend and a backend track. Having one language for both makes it quicker to get past the syntax and tooling stage, and get into the concepts and useful stuff. The frontend track would be focused on using React, Angular and other frameworks. It would be more about how to learn frameworks than creating big projects. Knowing how to learn a new framework is much more useful than focusing on the fine details of a language.

The backend track would be foused on Node.js making multiuser apps and games, controlling hardware and persisting data. Compared to starting with Java, C,C++ or PHP, this would be much more useful to the students. They'd get results faster, they'd learn skills that are instantly useful in a job situation and they'd have a huge and great community to learn from. Once they've learned JS, they'll easier pick up the more advanced features in more mature languages. JS is basically a much better starting language.

ExpressionEngine: redirecting based on group_id

07 May12

ExpressionEngine: redirecting based on group_id

Just a quick update - I've published a very simple plugin for EECMS that can redirect based on group_id. I made this so that admin users could go to one URL and members somewhere else after login, but you could use it in other ways as well. I also use it for basic redirection in a SAEF-based application based on EE, so it's good for that as well.

SAEF’s annoying default

02 May12

SAEF’s annoying default

I love the Expressionengine CMS and these days I do a lot of projects with it. Today I lost an hour hunting for a stupid bug, due to a strange default. In my current project I needed a tooltip, so I did what I've done in dozens of projects before: I added jQuery + jQuery Tools at the top in addition to my own "ready-function" that would init the tooltip. It didn't work and it took me a long time to figure out what this error meant:

Uncaught TypeError: Object [object Object] has no method 'tooltip'

It looks like there's a problem finding the object, right? All the links I found led to things about the incorrect loading sequence of the Javascript files, but I knew that wasn't the fault here. I DID include the files in the right order. It worked standalone, but not in my EE templates. In other words - there had to be something inside EE that caused the problem? Strange!

A very nice module that I've only had a need for recently is SafeCracker (formerly called Stand Alone Entry Form or SAEF for short). It turns out - even if you don't use any features that require it, SAEF will include it's own version of jQuery and JQuery Tools? The code will be embedded at the bottom of your form, so even if you have everything in order at the top of the file, it'll be overwritten at the bottom. 

Fixing the problem is  as easy as adding a tiny snippet to your Safecracker tag

{exp:safecracker ...  include_jquery="no"}

This is 2012 and JS libs are updated on a weekly basis to fix browser bugs. Auto-incuding unrequested features based on outdated libraries is NOT the way to go (as default). Hope this post can help others to not spend time on this...


Housekeeping time

16 Dec11

Housekeeping time

Back when I started this blog in 2006, I installed Movable Type and just left it there. Kind of scary given the amount of hackers, but apparently MT is pretty safe now that WordPress has taken over? I’ve finally managed to move this blog to a more recent CMS, so that was certainly about time… I didn’t want to spend time on a new setup, so I tried installing Wordpress - just because it takes virtually no time. It turned out that my hosting company had not yet upgraded their PHP to the version required by Wordpress, so I had to look at other options.

I love ExpressionEngine, but setting it up for something as simple as a blog is totally overkill. Then it dawned on me that the brilliant Bjørn Børresen had created some simple and decent looking EE templates over at ThemeForest. Turns out he has found some really good solutions, so if you just want a simple EE site - go check these out. They come complete with a bunch of Bjørn’s nifty extensions as well so the blog has Gravatar support, thumbnail generation and video embedding support. By just copying the theme files to the server at setup time, everything is set up for you automatically. Very neat!

Next part was moving all the contents of the old blog into EE and the excellent DataGrab module by Andrew Weaver came to the rescue. All my content (including comments) converted perfectly on the first attempt and all I’ve had to do are some very minor tweaks to the content and templates. Have to say that I didn’t expect this to go as smooth, so kudos to Bjørn and Andrew! I also threw together a quick, static site for my ltd company while I was at it.

Now that all my projects are finished for this year and I’m almost done with all other private projects, I will kick back with some Android and iPhone development on my brand new 27” monitor (I needed more pixels!). If you have any challenging Flash projects in January/February - please get in touch! I have extensive device experience and I wouldn’t mind doing some Stage 3D either…
(Note: the usual banners and microsites are not challenging/interesting…)

16 Jun11

While on the topic of 3D - we just launched a new version of!. I did the ExpressionEngine part of it, Richard handled the JS/CSS and Alejandro got all the old content into the new site plus a bunch of other things. He also has the role of webmaster for the site.

Great fun to do another EE site and my first time working with the Forum module. Skinning that thing is ... quite a job. It took me about two days to get all the skinning right and it’s far from as easy to work with as EE in general. We also needed a custom field to go with all forum posts (to enable filtering) and adding that wasn’t exactly easy either as the classes are not really written to be extended like that. I ended up extending the base class and overriding the relevant methods. The resulting file contains quite a bit of copied code, but it should be fairly easy to maintain.

Please go check it out and tell me what you think?


EE1 plugin - remove duplicate html

13 Oct10

I recently was hired to clean up a mess of a site done in EE1. I’ve moved most of my projects to EE2 by now, but this was a very fun task! The project was in such a dire state that I’ve never seen anything like it. Every template was strewn with hardcoded php and sql statements and not a single one of the many nice features in EE had been used. These guys had obviously never ever used EE but claimed to be experts. The company worked on the site for several months and eventually more or less gave up.

My first thought was that I had to make this more usable. The control panel looked like a mess so I decided to redo the whole thing from scratch. After 3 days of work, the client now has a site that is much simpler to use. All the features are the same, but 70+ templates have been reduced to ten, 20+ channels have been reduced to four, CSS reduced to half the size, all hardcoded parameters made dynamic and so on. Navigating the EE backend is much, much easier now.

As part of the job, I came across the need to remove duplicate output from EE. I was outputting a list of {categories} but since it was inside an entries loop I got lots of duplicate html. I could have solved this by doing some manual queries, but that may fail if EE is updated. Looping over a dataset of entries is more or less what EE was made for and just stripping off the duplicate code seemed like the most efficient solution.

I couldn’t find a smart way to do this, so I made a quick plugin that solved the problem. I just love how easy these things are with php and EE! The plugin is super easy to use and I’m posting it here so that others still using EE1 can use it.

The plugin works as a tag pair. Wrap it around any block of output to remove duplicate lines:

<img src=‘image1.jpg’ width=‘65’ height=‘30’ />
<img src=‘image1.jpg’ width=‘65’ height=‘30’ />
<img src=‘image2.jpg’ width=‘65’ height=‘30’ />
<img src=‘image2.jpg’ width=‘65’ height=‘30’ />

This will produce an output like this:

<img src=‘image1.jpg’ width=‘65’ height=‘30’ />
<img src=‘image2.jpg’ width=‘65’ height=‘30’ />

Click here to download

Review: ExpressionEngine 2 - A quick-start guide

06 Sep10

ee2_ryan2.jpgThese days I do more and more sites and apps using ExpressionEngine (EE) as the backend. I recently did my 10th EE-driven site and I have request for a couple more in the pipe. It seems that EE is really starting to take off and also so with the publishers. I recently got a request to review an EE2 book from Pragmatic Bookshelf and thought why not?

I’ve read a couple books on EE, but this is the first I’ve seen that covers the new ExpressionEngine 2. The book is written by Ryan Irelan (of EE-insider fame) and has a foreword by Rick Ellis (the creator of EE) so it sure seems solid.

The book covers everything you need to know, from the initial setup to building a complete site. Every core feature is explained and the examples are well written and very easy to follow. When learning to use software through converting a site like I did, you tend to learn only the parts that you think is relevant. Learning from a book that covers all topics is good as you’ll know even more about those not so often used features that a very nice to have. I didn’t learn anything new in the first half of the book, but from there and out there were several useful bits that I picked up.

Especially the chapter explaining how to build relationship between entries is very well thought out and written. This is something I’ve always had a hard time with, but now I feel that I fully understand the power of it. It’s the kind of feature that I’ve had to do a lot of testing to get right, but thanks to this chapter I now feel that I’ll get this right the first time.

On thing I missed in this book was the solid discussion that you’ll find in Michael Boyink’s PDF-book  on how to plan when building a site from scratch. How does it make sense to structure the site? What requires that you make it it’s own ‘channel’ and how can you break down existing designs into smaller bits. The ‘EE2 - A quick-start guide’ is however much more complete in that it goes through and explains every core feature in a pedagogically correct way, but I would probably recommend someone planning to convert a big site to EE to read both books.

All in all - many things to like about this book. Chapter 10 that covers optimizing your EE site alone is worth the money for this book as getting the caching right can actually save you from server upgrades. It’s a well written guide for the complete beginner and covers all the topics that such a book should. It could however have been more complete and covered more ground. This is however enough to get you started and from there on, you can lean on the excellent EE documentation and forums.

Converting from Wordpress to ExpressionEngine

27 Apr10

Some of the sites I convert to ExpressionEngine (EE) are made using Wordpress. I really like Wordpress. It’s super easy to use and set up, but for more complex sites it’s just not up to the task. EE is the soulution, but how do you migrate the old content into EE? There’s several possible solutions, but they all seemed cumbersome or outdated so I figured I’d make something better and easier.

Adobe AIR makes it a breeze to make utility applications like this and the result is “WP2MT”, a small app that reads the XML file you can export from WordPress and saves the contents to the Movable Type Import Format that EE can import from. Click the Badge at the bottom to install the application.

How it works

Start by exporting the Wordpress content to the WordPress eXtended RSS or WXR format. Depending on what version of WordPress you use, you’ll find this under the Tools or the Manage menu in your WordPress control panel.

Install and start the app. Click the “Open File” button at the bottom and browse to the XML file you just exported. The app will now show a summary of the XML file, showing the number of posts, pages, comments and discarded items (revisions of articles or attachments). You’ll also see how many of these that are unpublished and you can choose if you want to include these.

Next hit the export buttons to create a text file containing either the pages or posts. That’s it.

One thing not included in the MovableType format is the original URL of the entry, so I’ve added a custom field for EE that’s called ‘EXTRA FIELD-1’. By making an extra field for this, you’ll be able to look up what url entries had before and you can also check against this field to see if an entry was added after the export.

Feedback is much appreciated and if you have WP files that won’t import, send them to jenschr [at) gmail [dot) com and I’ll see if I can fix it.

Please upgrade your Flash Player
This is the content that would be shown if the user does not have Flash Player 6.0.65 or higher installed.

You can also download the .air file directly from here. If you don’t use the Badge above, you may need to install the AIR runtime as well.

Review: Building websites with ExpressionEngine 1.6

17 Sep08

BuildingWebsitesWithEE.jpgExpressionEngine (EE) is the CMS system I use for Flashmagazine and other sites I build these days. While not related to Flash (as most of the content on this blog is), EE is a flexible way to create advanced websites fast. I review a lot of Flash related books for Flashmagazine and when asked by Packt Publishing to review a book about ExpressionEngine I felt that it could also be of interest to the Flash users reading this blog. Most of us build websites as part of our job and this book provides a basic introduction to a great CMS system.

There are not many books about ExpressionEngine. This is in fact the only book that’s listed on Amazon that covers EE exclusively so that’s certainly what one would call a competitive edge. The only other book that I’m aware of is Michael Boyink’s PDF book that I’ve also read.

TITLE: Building Websites with ExpressionEngine 1.6: A clear, concise, and practical guide to creating a professional ExpressionEngine website
AUTHOR: Leonard Murphy
PUBLISHER: Packt Publishing (August 8, 2008)
ISBN: 978-1847193797
PAGES: 373 pages B/W
CD: Not required as the code is simple enough that you’ll just type it yourself
PRICE: £23.74 UK / $32.97 USA / $42.29 CAN
Click here to order

This is a book for the complete beginner. The only requirements are that you know a bit of HTML and CSS. The book is well written and throughout the book you’ll build a website that sells - guess what - Toast. While a fun example, this book does not dwell a lot on design but if you know your CSS you’ll have no problem building something that looks better looking than the example in the book. Not focusing much on design is probably a good move as well since that would detract from the main purpose of explaining EE.


The book starts off with a quick introduction to EE and what it can do. The next chapter explains setting it up on a Windows development machine. Here the concept of hiding “index.php” from the URLs is covered. Having that at the start of the book is an odd choice. I’d rather stick that in the Appendix as editing .htaccess files is not for the faith at heart.

Next up is the start of the main exercise in the book - building the Toast website. Working with weblogs and templates are well covered and important side-issues such as defining a custom 404 page and static pages are also explained. Chapters 6, 7 and 8 cover the modules for Members, Calendars and Galleries.  Since I already know the basics of EE, these were the only chapters that I really learned anything from as I haven’t used any of these modules yet. Each module is well explained and I gathered that I’ll probably never use the Gallery module. Using custom weblogs with Lumis Image Sizer plugin is just so much more powerful.

The last chapter rushes through the concepts of Plugins, Modules and Extensions. It delivers brief explanations of the Discussion Forums, the E-commerce module, the Wiki, searching, status groups, categories and related entries. Up until this point in the book, everything is very well explained, but I feel that the end of this chapter is kind of a rush. Too many things are touched upon and not explained well enough.

What I am missing

The dynamic nature of EE is not well explained. Every EE user will be bummed at how this works initially and a little on this would be of great help for the beginner. Basically, the URL decides a lot when it comes to what EE displays, so when your URLs get long, some content may no show up as expected. This is usually solved by adding the “dynamic=off” parameter to your weblog:entries tag.

A very powerful feature in EE is related entries and reverse related entries. The book offers a good example of this, but it is not explained well enough. A quick search for “related entries” at the EE Forums will tell you that this is something that is hard to grasp.

The book provides little discussion around how to structure your site. Beginners are usually confused by all the new lingo and it takes a bit of explaining to get this all correct. When it comes to building sites, how you combine Weblogs, Templates, Template Groups, Field Groups will decide how flexible your setup is.

Embeds and Segment variables are explained, but only briefly. These are such an important part of building an EE site so more info on this would have been useful.

Another thing that I would expect in a book like this is some information on how to import an existing site / blog into EE. Many readers will come from a different CMS and while this is explained on the EE wiki, an example of importing for instance a Wordpress blog would be helpful.


This is a beginners book. It explains all the core features of EE and each feature is well explained. It provides insightful information on all topics and if you’re setting out to learn ExpressionEngine, this is a good place to start. The book could certainly do with more real-world examples and better explanations of the more complex things with EE (as mentioned above) but this is a solid book for a first time author.

In the next edition of this book (for EE 2.0?), I’d cut down on the last chapters that just rushes through features of modules such as the forum, gallery and e-commerce and rather explain more of the intricacies of the weblog module. This is after all where most of the work will be done and just rushing through provides little useful information.

A small introduction to online sources of information could be a good idea as well. Here one could briefly mention useful plugins/modules/extensions with links to more information.