{"id":13521461,"url":"https://github.com/studiorabota/meteor-johnny-five-tutorial","last_synced_at":"2026-01-17T16:10:43.986Z","repository":{"id":163469451,"uuid":"46280770","full_name":"studiorabota/meteor-johnny-five-tutorial","owner":"studiorabota","description":"Learn how to use Johnny Five in Meteor and control a Matrix display via Node and Arduino","archived":false,"fork":false,"pushed_at":"2015-11-17T21:21:47.000Z","size":18,"stargazers_count":9,"open_issues_count":1,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-11-02T05:32:55.439Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"lgpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/studiorabota.png","metadata":{"files":{"readme":"Readme.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-11-16T14:45:18.000Z","updated_at":"2017-12-15T13:53:49.000Z","dependencies_parsed_at":"2023-05-10T15:15:25.684Z","dependency_job_id":null,"html_url":"https://github.com/studiorabota/meteor-johnny-five-tutorial","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/studiorabota%2Fmeteor-johnny-five-tutorial","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/studiorabota%2Fmeteor-johnny-five-tutorial/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/studiorabota%2Fmeteor-johnny-five-tutorial/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/studiorabota%2Fmeteor-johnny-five-tutorial/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/studiorabota","download_url":"https://codeload.github.com/studiorabota/meteor-johnny-five-tutorial/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246535925,"owners_count":20793356,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-01T06:00:34.655Z","updated_at":"2026-01-17T16:10:43.980Z","avatar_url":"https://github.com/studiorabota.png","language":"JavaScript","funding_links":[],"categories":["Tutorials"],"sub_categories":["Interesting Nodebots"],"readme":"# Control your Arduino with a web app via Meteor and Johnny Five \n\n\u003eChapter 1: Meteor and Johnny Five  \nChapter 2: LED Matrix\n\n## Chapter 1: Meteor and Johnny Five\n\nIn the first chapter we will set up Meteor with Johnny Five and make an LED blink. Blink! Blink! \n\n- Level: Intermediate. A bit of JS and Node will help\n- Time: 30 - 60 minutes\n- Hardware: Arduino, Led Matrix (or one LED)\n\nYou will need:\n\n* [Meteor](https://www.meteor.com/)\n* [Johnny Five](https://github.com/rwaldron/johnny-five)\n* [Node](https://nodejs.org/en/)\n* Xcode (Mac app store)\n* Xcode command line tools (terminal: `xcode-select --install`)\n\n### 1. Create a Meteor\n \n~~~terminal\n$: meteor create app\n$: cd app\n~~~\n\n### 2. Add Jonny Five package\n\nJohnny Five will allow us to talk to the Arduino via Javascript. \n\nFirst we need to add the meteorhacks:npm package.\n\n~~~terminal\n$: meteor add meteorhacks:npm\n~~~\n\nMeteorhacks:npm is a Meteor package for adding Node modules. - [https://github.com/meteorhacks/npm](https://github.com/meteorhacks/npm).\n\nType the following in your terminal (only for Meteor 1.2 and up):  \n\n~~~terminal\n$: rm -rf packages/npm-container\n$: meteor remove npm-container\n$: meteor update meteorhacks:npm\n$: meteor\n~~~\n\nYou will now have a `Packages.json` file in your root directory. Open the file in your editor and add the packages in between the brackets - like below.\n\n##### packages.json\n\n~~~json\n{\n\t\"serialport\": \"2.0.5\",\n  \t\"johnny-five\": \"0.9.10\"\n}\n~~~\n\n### 3. Johnny Five code\n\nCreate a `server` folder and add a JS file, name it blink.js. Meteor will automatically pick it up.\n\n##### server/blink.js\n\n~~~javascript\nvar JohnnyFive = Meteor.npmRequire('johnny-five'),\n    board;\n\nMeteor.startup(function(){\n    board = new JohnnyFive.Board();\n\n    board.on('error', function (error) {\n        console.error('Johnny Five Error', error);\n    });\n\n    board.on(\"ready\", Meteor.bindEnvironment(function() {\n\n        var led = new JohnnyFive.Led(13);\n\n        led.blink(500);\n\n    }, \"ready\"));\n});\n~~~\n\nStart Meteor:\n\n~~~terminal\n$: meteor\n~~~\n\nThis will be the response if everything went okay: \n\n~~~terminal\n$: 'Board Looking for connected device..'\n~~~\n\n### 4. Arduino\n\nInstall the [Arduino IDE](https://www.arduino.cc/en/Main/Software) and connect your Arduino. Check the terminal, this will now show the port number.. nerd delight.\n\n~~~terminal\n$: Connected /dev/cu.usbserial-****\n~~~\n\nWe now have to upload StandardFirmata to the Arduino. StandardFirmata makes it possible for libraries like Johnny Five to communicate. \n\nOpen the Arduino IDE:\n  \n1. `File -\u003e Examples -\u003e Firmata -\u003e StandardFirmata` \n2. `Sketch -\u003e Upload`\n\nPlace a LED in port 13 and ground - [example](https://raw.githubusercontent.com/rwaldron/johnny-five/master/assets/led-blink.gif). \n\nThese are the lines of code in `blink.js` which make your LED blink.\n\n##### server/blink.js\n\n~~~javascript\nvar led = new JohnnyFive.Led(13);\n\nled.blink(500);\n~~~\n\n## Chapter 2: LED Matrix\n\nIn this chapter we will control a 8 dot led matrix via a web interface.\n\nLet's start with displaying a heart. Connect your board similar as in [this illustration](https://github.com/rwaldron/johnny-five/blob/master/docs/led-matrix.md).\n\nIn `blink.js` replace the code with the following:\n\n##### server/blink.js\n\n~~~javascript\nvar JohnnyFive = Meteor.npmRequire('johnny-five'),\n    board;\n\nMeteor.startup(function(){\n    board = new JohnnyFive.Board();\n\n    board.on('error', function (error) {\n        console.error('Johnny Five Error', error);\n    });\n\n    board.on(\"ready\", function() {\n\n        var heart = [\n            \"01100110\",\n            \"10011001\",\n            \"10000001\",\n            \"10000001\",\n            \"01000010\",\n            \"00100100\",\n            \"00011000\",\n            \"00000000\"\n        ];\n\n        var matrix = new JohnnyFive.Led.Matrix({\n            pins: {\n                data: 2,\n                clock: 3,\n                cs: 4\n            }\n        });\n\n        matrix.on();\n\n        matrix.draw(heart);\n\n    });\n\n});\n~~~\n\nYou might have guessed it already, in the heart array 1 is for LED on and 0 for LED off.\n\nNow open `app.js` and find the following code:\n\n##### app.js\n\n~~~javascript\nTemplate.hello.events({\n    'click button': function () {\n      // increment the counter when button is clicked\n      Session.set('counter', Session.get('counter') + 1);\n    }\n});\n~~~\n\nReplace the code above with the one below:\n\n##### app.js\n\n~~~javascript\nTemplate.hello.events({\n    'click button': function () {\n\n      var m = [\n        \"10000001\",\n        \"11000011\",\n        \"10100101\",\n        \"10011001\",\n        \"10000001\",\n        \"10000001\",\n        \"10000001\",\n        \"10000001\"\n      ];\n\n      Meteor.call('play', m);\n\n    }\n});\n~~~\n   \nWhen you click on the button it will now send an **M** array to a Meteor method via `Meteor.call()`. We do this to parse the data to the server. Create a new file in the root directory called `methods.js`.\n\n##### methods.js\n\n~~~javascript\nserverData = [\n    \"11111111\",\n    \"10011001\",\n    \"10000001\",\n    \"10000001\",\n    \"01000010\",\n    \"00100100\",\n    \"00011000\",\n    \"00000000\"\n];\n\n// Send frames to Arduino\nMeteor.methods({\n    'play': function(data) {\n\n        if(Meteor.isServer) {\n\n            serverData = data;\n\n        }\n\n    }\n});\n~~~\n\n##### server/blink.js\n\nThe last thing to do is to catch this data in `blink.js`. We do this by making a loop with timeout and sending the `serverData` variable to the Arduino.\n\n~~~javascript\nvar JohnnyFive = Meteor.npmRequire('johnny-five'),\n    board;\n\nMeteor.startup(function(){\n    board = new JohnnyFive.Board();\n\n    board.on('error', function (error) {\n        console.error('Johnny Five Error', error);\n    });\n\n    board.on(\"ready\", function() {\n\n        var matrix = new JohnnyFive.Led.Matrix({\n            pins: {\n                data: 2,\n                clock: 3,\n                cs: 4\n            }\n        });\n\n        matrix.on();\n\n        function next() {\n\n            matrix.draw(serverData);\n            setTimeout(next, 1000);\n\n        }\n\n        next();\n\n    });\n\n});\n~~~\n\n## Result\n\nIf everything went okay you should now be able to click the button at `http://localhost:3000/` and see an **M** appear on your LED matrix. \n\n❤ - Meteor","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstudiorabota%2Fmeteor-johnny-five-tutorial","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstudiorabota%2Fmeteor-johnny-five-tutorial","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstudiorabota%2Fmeteor-johnny-five-tutorial/lists"}