Preserving Formatted Source Code in HTML

I’m switching some of my WordPress blog content over to other web sites and reorganizing them into logical book type formats. One nice thing about the WordPress blog is the plugin that helps to format my C source code for Arduino programs and Processing.

I’ve tried copying and pasting the Arduino code into an OpenOffice document but the source code’s color formatting gets lost. I haven’t found a way of using the Arduino and Processing environments to save the source code with the formatting intact.

I started looking into ways of capturing the displays and saving them in Rich Text Format (RTF) documents then possibly writing a program to create the proper HTML formatting. Luckily I didn’t have to go that far. I have three different Integrated Development Environments (IDE) loaded on my computer in addition to the Arduino and Processing language IDEs. Since switching to Ubuntu from Windows a couple of months ago I’m experimenting with several new programming tools at the same time.

I loaded up some sample source code into the Code::Blocks IDE. Formatting based on the source code language shows up in the display. I tried the Save As feature but didn’t see alternate document formats listed. Then I noticed the Export feature. Under the menu item File->Export setting there are four options including HTML, RDF, ODT, and PDF. My goal was to produce the souce code in an HTML document anyway so I chose that option and it worked nicely.

After that I tried Eclipse. I didn’t find an export option and the Save As just used the standard dialog function to save the file with a different name. Eclipse is a great editor to work with and I hope to find a way to make this work.

The third IDE I’m getting to know is NetBeans. NetBeans didn’t offer an Export function but it does provide a File->Print to HTML feature that works nicely too. I found a plugin for NetBeans on the Processing web site. I am going to try the NetBeans Processing Template plugin to see how it works.

There seems to be some good articles about using Processing with Eclipse. I hope I can find an already developed function to create HTML from the formatted display. Also, I’m hoping the NetBeans plugin helps by including more formatting and keyword recognition to more closely match the Processing IDE display.

Anyway, I seem to have found an off the shelf way of adding line numbers to the source code display. The color coded formatting is being preserved and white space is not being smashed when converting into the HTML format.

About SomeoneKnows
(c) 2010 Vince Thompson


Notes About Developing Arduino Workshops

I’ve been  developing workshops around the Arduino and various clones over the last year and a half. I have some documents as word processing files using Open Office. Other material is in a Yahoo Group with limited access to keep it kid friendly. Some material is in blogs and more is yet to be written.

I’m publishing new material to the DIY Robotics Lab blog for a new workshop series called “Topics in Robotics, Electronics, and Communications”. Currently the blog is working more as a repository for articles as I write them instead of a sequential series of topics. I have a new Internet domain registered where I’m planning to assemble these articles into on-line tutorials.

Publishing Source Code

Recently it seems I’ve been pushing the limits of blogging technology when displaying an Arduino sketch’s source code. The spaces, tabs, and mono-spaced fonts are important but spaces get removed leaving the source code hard to read. WordPress has a

 tag implemented in a plugin that does a great job maintaining the spacing while adding color coding that many program editors include. It also provides a way of easily copying the source code so you can paste it into your own program editor.

/*--- Minimum Arduino programming functions, setup and loop  ---*/

void setup()

void loop()

In my word processing documents I’ve been using bold text as a way of differentiating between existing source code and new code being added to a program. The tag does not let me include bold text so I need to explore more and see if another option is available.

Electronics Prototyping

Working with Arduino’s and creating a breadboard prototype go hand-in-hand. You can take photographs of your breadboard and the wires connecting to the Arduino but sometimes an illustration provides a nice presentation.

Fritzing Illustration

Fritzing Illustration

This illustration is generated from the Fritzing program. Fritzing is a virtual prototyping tool designed to support Arduino. You can select electronic components and interactively place them onto a virtual breadboard. The bonus from this effort is to push a button and an Eagle schematic and board file are created to manufacture a custom printed circuit board called a shield that attaches to the top of an Arduino.

Cross Platform Development

Among the Arduino’s popular virtues are its open-source hardware and software support. When working in your favorite operating system it’s easy to forget the virtue of its cross platform support too.

As I’m preparing for a workshop based on our Robotic Labyrinth Game, the cross platform issue becomes important. The workshop is part of an introduction to robotics where we’re building a kit to convert the wooden labyrinth into an Arduino controlled device using servo motors. The original WiiFit control was written in a Linux only version of the Wii remote library @digitalJestin wrote while the XBox controller version I wrote runs in Microsoft only. For this workshop I’m not expecting participants to go out and buy expensive WiiFit or XBox controllers anyway.

Processing Language

Inspired by Jestin’s Virtual Labyrinth, the way I chose to solve the controller issue is to create a joystick simulator using the cross platform Processing Language. Processing is a superset of the programming language used for the Arduino and is implemented on Windows, Linux, and Mac operating systems. Processing is a graphics based display system.

This video was captured for the DIY Robotics Lab article “Joystick Simulation with Processing” where this virtual joystick will be operating the robotic labyrinth through an Arduino.

This Mpeg video was created by the open source XVidCap Screen Capture program running on Linux.

Bringing Robotics Home

My focus had been to build a set of resources that keep costs low for students as they learn about robotics and electronics. I’ve helped as a mentor with FIRST robotics teams for several years. It has troubled me that the teams seem limited to major metropolitan areas. Also, the robot kits they use are too expensive for individual students to own one of their own. The Arduino makes a good controller for robots and I believe they are a great supplement to the existing robotics curriculum, particularly when they are affordable enough for home use.

Part of the LabyWiinth Project’s appeal was to create an introduction to robotics.

Other Tips and Tricks?

I’m interested in learning more ways to present educational material. So, what kinds of tips and tricks do you use when creating online material?

About SomeoneKnows