Monday, June 23, 2014

Hosting your HTML5 website with email functionality on Heroku

Building a HTML5 website

Recently, I decided to create my personal website using HTML5. Since I had very little experience with responsive websites, my first action was to look for a template and build my site from it. HTML5 UP presents some nice templates. You should check them out.

After choosing a template, I organized my project structure. At the first moment, it looked like this:
- site
  |- css
  |- images
  |- index.html
  |- js
  |- media

Deploying your website to Heroku

Generally, I work on my project using a couple of different machines, so it would be nice if my website's code used some version control. I've used Heroku on a Rails app before, so I chose to use it as both host and version control. Heroku makes the deployment process really easy.

When I tried to push my project to heroku, I got the error below:

!     Heroku push rejected, no Cedar-supported app detected
As explained here, the problem was that I was missing a key file to identify the type of my app. But wait... I didn't have a php, django or ruby app. How do I create a HTML5 site on Heroku? Well, I found this useful article on Heroku dev center.

Basically, my project structure changed a little bit:

- site
  |- Gemfile
  |- public
    |- css
    |- images
    |- index.html
    |- js
    |- media
The content of the files that already existed on my project didn't change. The content of the new files are described below.
use Rack::Static,
  :urls => ["/images", "/js", "/css"],
  :root => "public"

run lambda { |env|
      'Content-Type'  => 'text/html',
      'Cache-Control' => 'public, max-age=86400'
    },'public/index.html', File::RDONLY)

source ''
gem 'rack'
After that, I just ran bundle install and my app was set. I was able to push my changes at this moment. If I wanted to test my changes locally, I could just use the command rackup.

Implementing the email functionality
At some point, I decided I want to have a contact section in my website, where anyone can send me an email. In order to do that, I needed SMTP support. Fortunately, Heroku has lots of add-ons and some of them are meant for email. I chose to use SendGrid because it was enough for what I wanted.
$ heroku addons:add sendgrid:starter
Now my site wasn't completely static anymore. I needed some server-side logic to handle the email action. I did not want a complete rails structure because I think it would be way too much for what I really needed. After some research, I found the simple Sinatra. I simply added a file which I named index.rb and changed a few things on the files I already had.
require './index'

run Sinatra::Application

Gemfile (remember to run "bundle install" after editing it) 
source ''
gem 'rack'
gem 'sinatra'
gem 'pony'

require 'sinatra'
require 'pony'
require 'rack/env'

get '/' do'public/index.html').readlines

post '/send_mail' do                                                               
            :to => 'your email',                                      
            :from => 'any mail',                      
            :subject => 'subject',                           
            :body => 'body of the email',
            :via => :smtp,         
            :via_options => {
              :address => '',
              :port => '587',
              :domain => '',
              :user_name => ENV['SENDGRID_USERNAME'],
              :password => ENV['SENDGRID_PASSWORD'],
              :authentication => :plain,
              :enable_starttls_auto => true
  redirect back

Configure your domain to point to heroku
The last part was set up my domain to point to my heroku app. My domain host doesn't allow me to do it directly, so I had to use PointDNS add-on. After that, I added my domains to the app and launched the PointDNS dashboard.
$ heroku addons:add pointdns:developer
$ heroku domains:add
$ heroku domains:add
$ heroku addons:open pointdns
There are a few DNS records on the dashboard. They should be put them in the domain's control panel. After doing that, I created an ALIAS and a CNAME record, both pointing to You can check the result here.

Monday, June 25, 2012

In order to simplify even more the user experience with Freeseer on Windows, I extended the script to create some batch files to call freeseer-record, freeseer-config and freeseer-editor directly from Start Menu. The result can be seem on the picture below.

Friday, June 15, 2012

Windows Install Script

As I've mentioned before, I'm currently working on making Freeseer installable on Windows via an install script. The script should download the dependencies, install them, configure some environment variables and download and install freeseer itself. Thus, the user should do as few manual work as possible.

Since the script manipulates environment variables, it should be run with administrator privileges. By default, a batch script executed with administrator privileges is run on directory C:\Windows\System32. We'll use some relative paths on the script, so it's important to keep our current directory. To do that, the lines below should be put on the beginning of the script:
@setlocal enableextensions
@cd /d "%~dp0"

After that, it's time to download the dependencies. Windows doesn't have nice native ways to download files via command-line, so the approach used here is to use a compiled version of wget, which can be downloaded here. It should be in the same folder of the script. The folder should look like as shown on the Figure 1. 

Figure 1 - Script folder.
The dependencies can be on .exe or .msi extensions. Each one should be treated differently. Dependencies with .exe extensions are called directly, while the ones with .msi extensions are called using msiexec command. There's a wizard for each dependency. The user should just accept any license agreements that might occur and choose the default options.

Figure 2 - Downloading dependencies

Figure 3 - Installing dependencies
Then, it's necessary to change the environment variable Path to include Python and Gstreamer. To do that, I used a VBScript that appends Python and Gstreamer locations to Path. There are some dependencies (feedparser, pygtk and yapsi) downloaded via easy_install.

Gstreamer uses the bindings for Python 2.6 by default. The next step is to put the correct files on the correct folders so Gstreamer can use Python 2.7. The script moves Python 2.7 bindings to Gstreamer's main folder (the one that we set in the environment variables before, remember?) and copies Gstreamer's site-packages folder to Python's site-packages folder.

The final step is, of course, install Freeseer itself. I hosted Freeseer installer here, because I was facing authentication problems while trying to wget it from GitHub's page.

Figure 4 - Freeseer installation

Finally, we can run freeseer:
python C:\Python27\Scripts\freeseer-record
Figure 5 - Freeseer running

Monday, May 21, 2012

GSoC 2012


This year I'm participating Google Summer of Code again. This time, I'm involved with the FreeSeer project, a powerful software suite for capturing or streaming video. The main goal of my project is to make Freeseer as easy as possible to install in Windows and in a few Linux Distros.

Until now, I was reading articles about packaging in Fedora, Ubuntu and OpenSUSE. Today, the coding period has started, so I intend to move to my next goal: create a Windows install script to install FreeSeer and all its dependencies automatically. For now, I'm doing the tests on Windows, but late (when the script gets more complete), I intend to create a virtual machine with a fresh Windows installation and test it, to see if everything goes normal.

Saturday, August 6, 2011

Finally, scroll is done.

It's been a while since the last time I posted here. I spent this time to continue working on VScroll and HScroll. Good news: they're ready. I've read a chapter of the Red Book of OpenGL that helped me a lot on the implementation of Scrollers. The most annoying part of that is OpenGL uses a different coordinates system from the usual.

After some reading and testing, I solved the problem I was having in the last post using glOrtho. The results can be seen on the pictures below. The next step is beggining the implementation of collapsible branches.

Sunday, July 10, 2011

It's scrolling :)

From the last post to now, I could progress more. After the entire scrollbar appears on the screen, the next step was the scroll itself also appears. So the correct size to the scroll is now being calculated and it's being drawn on the screen (when it's necessary). The color of the scroll is different from the bar, so we can see it better.

To drag, move and drop the scroll with pointer, I used some previous work from another PySoy student: Juhani Åhman. Thank him for it. The limits of the scroll are set, so you can't drag the bar beyond the limits it should be dragged. The pictures below show how HScroll looks right now.

As you can see, they're not ready. The total content is being displayed but the screen should show just the content that's inside the widget area and as the scroll rolls, the content should change. I'm trying to make those changes to make the widget work as expected. The expected behaviour of the widget can be visualized below.

Last night and today, Arc made some changes in PySoy properties. He told me to take a look at the widgets I'm writting to see how I'm using them. The result: I made a bit cleanup in the code, changed some attributes' visibility and remove some that were obsolete.

I'd like to thank my mentor, David, again for the help he's giving me. Mid-term is coming and I think I'll have to change my timeline a bit.

Thursday, July 7, 2011

OpenGL and Scrollbar

In the previous post, I said the only thing that was missing for V/HScroll widgets was the scrollbar. So I ran into Gtk/Gdk examples to start the bar implementation. After some tests outside PySoy, I decided to try to integrate the example with the PySoy code. I waste some time doing that and discovered I'm not able to do it. Arc Riley told me I have to implement the bar using OpenGL.

Then I started to read an OpenGL tutorial. My mentor, David, said me I had to use Vertex Buffer Object (VBO) and told me to look at some examples in PySoy's code. After that, we shared the VScroll file, using Gobby, and he explained me a lot about OpenGL and VBO.

Yesterday (actually today), before I get to sleep, the first version of the bar appeared! It's a blank rectangle, placed on the right side of the widgets. The next step is to configure the viewport correctly and make the scroll actually roll.

Sunday, June 26, 2011

Test Improvements

This week David told me to change the HScroll/VScroll tests to better visualize they working. He said I could use canvas to do so. At first I faced some problems, because canvas wasn't rendering as expected. After some debug, I found an inconsistency in the Container code. Containers were rendering their children with their own width/height instead of doing this resize using the children's width/height.

After fix Container render method, I had to overrode render method for VScroll and HScroll, to render their children in the correct position. After that, the test seemed more representative and I believe the only thing is missing for VScroll/HScroll is the scroll bar. VScroll render method is shown below.
  1. def override render (x: int, y : int, width : int, height : int)
  2. // Render each child widget in order
  3. var _x = x
  4. var _y = y
  5. for widget in self.children
  6. widget.render(_x, _y, widget.width, widget.height)

Monday, June 20, 2011


I started to write the resize_children method for HScroll and VScroll. They can be seen below. This code snippet represents the HScroll one. The widgets are resized and the scroll bar is shown only if it's necessary. The scroll size is also calculated on this method, according to the widgets that are on the viewport.

The scroll is not actually implemented yet. I need to figure out how to put a scroll on the screen firtst. Currently, the method is working in an abstract way. I hope to discuss with my mentor, David, this week, to find how to finish this method.
def override resize_children (x: int, y : int, width : int, height : int)
// Arbitrary bar size. Replace it for actual size
// after implement Scroll Bar
scrollBarSize : soy.atoms.Size = new soy.atoms.Size(self.size.width, 10.0, 0.0)

var totalWidth = 0.0
for widget in self.children
totalWidth += widget.width
if widget.size.height > self.size.height
widget.size.height = self.size.height
widget.size.height -= scrollBarSize.height

var scrollWidth = ((double)scrollBarSize.width)/totalWidth * scrollBarSize.width

// Change the viewPort only if widgets total size are greater than HScroll size
var viewPortWidth = totalWidth <= self.size.width ? self.size.width : totalWidth
// bar not needed bar needed
var viewPortHeight = totalWidth <= self.size.width ? self.size.height : self.size.height - scrollBarSize.height

self.viewPort = new soy.atoms.Size(viewPortWidth, viewPortHeight, 0.0)

Thursday, June 16, 2011

It's time to scroll

Today I gave the first step to Scrollable Widgets coding. Talking to Arc Riley, he said it would be a better idea to make two Scrollable Widgets, instead of one: HScroll and VScroll. So I created these classes, inheriting from Container.

The resize_children method will differ from VBox/HBox, because it will not actually resize_children. The idea is this method just resize the widgets subtracting the size the scroll bar will fill. The rest of the children's content can be viewed scrolling the bar, that will be calculated using this method.