London Dev Meetup Rescheduled! Due to unavoidable reasons, the event has been moved to 21st May. Speakers remain the same—any changes will be communicated. Seats are limited—register here to secure your spot!

Sigve Fast
Mar 25, 2014
  3427
(5 votes)

The physical Publish Button

What do you do when you are in between projects and got nothing to do? You build a physical publish button using an Arduino of course!


The Arduino is an Open Source electronics prototyping platform (http://www.arduino.cc/). It basically enables you to program the physical world through sensors, buttons or anything else your heart desires. So using this I am proud to announce that the gap between the physical world and EPiServer is bridged!

I recommend checking out the official arduino blog for more cool projects this wonderful platform has been used for. http://blog.arduino.cc/

See it in action!


Inspired by the “AWSOME button” at Makezine: http://makezine.com/2011/04/08/the-awesome-button/

20130910_104845

Communication between the Arduino and javascript


The Arduino comes with a USB to Serial converter, which means you can communicate with it through the COM port. But how to execute javascript on a webpage every time the button is pressed?


I decided to make a Chrome extension and after some googeling I found this cross platform browser plugin for serial port communication from JavaScript https://github.com/billhsu/jUART

Chrome Extension
So the way this works is that the background page of the extension opens a connection to the COM port to listen for commands from the Arduino. Every time a command is received it passes it on to the contentscript in the tab that is currently open. The content script receives the command, and if the command is “Publish” it finds the publish button and simulate a click.

Just having the page published was kind of boring. So to give it a little more flare I added some fireworks to celebrate the birth/rebirth of a page. The fireworks code is just an adaptation of the code I found here: http://thecodeplayer.com/walkthrough/canvas-fireworks-tutorial


End notes
This was just the simplest and cheapest way of achieving the goal. This could have been done in many other fashions. There are Arduino boards small enough to fit inside the button or the communication could have been done with wifi, ethernet, bluetooth, infrared. You could also make it completely wireless by using batteries as a power source instead of getting power from the arduino board. Only the imagination sets a limit.

Hope you enjoyed this as much as I did making it.

Download full source code here: https://db.tt/x0JD21qC

For a more comprehensive walkthrough of the process download the complete guide here: https://db.tt/s67eUnnD

Mar 25, 2014

Comments

Petter Klang
Petter Klang Mar 25, 2014 11:03 AM

Sweet!

Always wanted a big red button to push for site launch!

Mar 25, 2014 11:39 AM

You might want to change the label of the button before letting a customer publish their brand new site with it ;-)

Mar 25, 2014 12:08 PM

Next step, add a second green button and connect it to the workflow

valdis
valdis Mar 25, 2014 03:44 PM

Sweet! :)

Please login to comment.
Latest blogs
Routing to a page in SaaS CMS

More early findings from using a SaaS CMS instance; setting up Graph queries that works for both visitor pageviews and editor previews.

Johan Kronberg | Apr 14, 2025 |

Developer Meetup - London, 24th April 2025

Next Thursday, 24th April will be Candyspace 's first Optimizely Developer Meetup, and the first one held in London this year! We've have some...

Gavin_M | Apr 14, 2025

Successful Digitalization for SMEs: How Optimizely One can Revolutionize Your Business Processes

"Achieve digital excellence with Optimizely One: Boost efficiency, delight customers, secure growth." In today's digital world, it's crucial for...

Frank Hohmeyer | Apr 11, 2025

Personalized Optimizely CMS Website Search Experiences Azure AI Search & Personalizer

In the last blog, we discussed Integrating the Optimizely CMS website with Azure AI search. Now let’s take a bit more advanced topic to serve...

Naveed Ul-Haq | Apr 10, 2025 |