Coding Adventures

typeahead

Twitter Typeahead.js has been updated and there are a lot of changes.  I’m going to give a an explanation for a few of their examples and explain the key features and changes that they have made.  For those looking to upgrade to this new version it will require a rewrite of your current Typeahead.js methods so please be aware of that.  The biggest changes are outlined in their changelog.

The most important change in 0.10.0 is that typeahead.js was broken up into 2 individual components: Bloodhound and jQuery#typeahead. Bloodhound is an feature-rich suggestion engine. jQuery#typeahead is a jQuery plugin that turns input controls into typeaheads.

Let’s head to the examples.

The most basic of basic.  Here we have a static list of local data.  Bloodhound needs to be initialized with your data and you can see it handles splitting data up by white space with their tokenizers.  This makes things a lot easier because in previous versions you needed to make sure the tokens to be searched through were already split up by white space.  The Bloodhound object is then initialized and the typeahead object is created.  This is a lot more code but it makes the search more robust as we will see with a more advanced example using prefetch and remote data.

Here we see a very similar example to the one above except that we are getting our data from a URL.  The prefetch variable works to get a set of data and cache it locally.  Even if the page is reloaded that data stays with the user’s browser until it expires or is removed.  As the user begins their search it will have that data ready and on hand but if there is no data to be found in the prefetch Typeahead.js has another URL, stored in the remote variable, that it can make a query to and get data back about what the user is searching for.  These two in conjunction work fantastically well for supplying the user with a set of data that has the speed of being static but can be dynamic by querying the URL for more data as the user goes.  Again we initialize the Bloodhound object and add it to the typeahead initialization.  We are again using the Handlebars template rendering engine to make the search results look great so that hasn’t changed.

The changes are drastic but not hard.  This is a major update to Twitter Typeahead.js and because of that there is deprecation.  My other posts are still useful for older versions but may not apply to versions going forward.  I hope this was helpful in getting you up to speed with the latest version of Twitter Typeahead.js.  If you have any questions or comments feel free to leave them below.

bootstraplogo

If you’ve spent any time looking at the Bootstrap docs you’ll notice their nav bar on the right.  Very slick example of both Scrollspy and Affix.  I have written blog posts about both of these topics in conjunction with each other titled Bootstrap ScrollSpy Pitfalls and Fixes.  In my example I use a very simple styling for my nav using nav-pills.  This works out alright but what if we want to get exactly what Bootstrap is doing?  Well, let’s figure out just how they do it.

They are using very similar code to what I had in the pitfalls and tricks post so I’ll bring that in here.

Now that we have a simple navigation let’s style it to have sub menus not be shown until the item is in view of the user, just like Bootstrap.

We’ve added some sub menu items to a few of the nav elements.  At this point if you were to render the page it would show all of the items in the list regardless of it being a sub menu or not.  We want to change that so we only see specific sub menus when they are active.  To do this we just need to add a little bit of CSS that will trigger the display of the sub menus.  When the menu item is not active the sub menus are hidden.  When the menu item is activated it displays the sub menus below.

That’s all there is to it! No tricky JavaScript required, it’s all CSS.   Now just adjust the padding, change the color, and add sub menus to your heart’s content.  You now have a side nav that looks and acts just like Bootstrap’s does in their docs.

replogo

ReportLab is full of different objects that you can place anywhere around the screen.  Following our previous code, we are making a list of elements that we want to draw onto a document.  ReportLab will handle all of the page breaks and lining things up but we can manipulate that a bit to help ourselves get a really clean looking PDF.  You can review the last two guides in the series by clicking these links, ReportLab and Django – Part 1 – The Set Up and a Basic Example, ReportLab and Django – Part 2 – Headers and Footers with Page Numbers.

The two most common elements to get your document to look nice are Paragraphs and Tables.  Paragraphs are, just as they sound, a paragraph of text that can contain some formatting to make it look nice.  It can even include images.  You can set a ParagraphStyle for the entire paragraph or put XML tags inside the Paragraph to get various styles throughout one object.

Paragraphs

A Paragraph is an element that spans the entire width of the area that it is given.  It holds text or images and will wrap when it reaches the end of the drawable area.  You can set a style for a Paragraph by creating a ParagraphStyle and applying it to your Paragraph.  ReportLab comes with a number of built in styles but I found that I preferred creating my own styles to give me more control.

In the example you can see that we first register some fonts.  Fonts are a very important feature of ReportLab because it allows you to use any TrueType Fonts you can find.  This is important because if you are going to be using any foreign language characters you’ll need a font that supports those characters.  If you don’t ReportLab will render them as black squares.

We then got the large amount of style sheets already created for us by ReportLab and then we add to it.  You can see that we add a new ParagraphStyle called ‘RightAlign’ that will use the Arial font and right align any text inside of it.  Simple enough.  To use it we do just like we did in the example in Part 2 but instead of using a prebuilt stylesheet like Heading1 we just call our own RightAlign.  Below is the example with the changed line highlighted.

There are a lot you can do within a Paragraph as well using inline tags.  If you wanted to make changes to a certain section of text and wanted to change it to be a different color, font, or size you can by using the <font> tags.  Adding an image is equally as simple by adding the <img> tag and specifying a file location.  Below is an example of a Paragraph with the same style we created above but with altered font and image added inline.

This creates a right aligned paragraph that has a bold red My followed by a normal Arial User Names and then a image of a smiley face with a height of 5.

Tables

Tables are the biggest help ever for getting things all lined up.  A Table is exactly like every other instance of a table you know.  It has rows and columns and you can specify their size and what is inside of them.  Tables by default will grow to contain whatever object is inside of them.  You can explicitly set the widths and heights of the columns and rows but your text/images can still overflow onto the outside of them.  Getting the widths and heights right is key.  Let’s make a basic table with some user data and set some table styles to make it look great.

This will create a table with all of our users on it, their usernames, and when they last logged in.  The table will be lined, that’s what the INNERGRID and BOX style does.  You can see that the table will span the entire page and that each column will take up a third of the document’s width.  You can customize these for varying column widths.  There are a lot of various customization options for tables.  Read them on the ReportLab docs.

I hope this was helpful.  I spent a lot of time figuring these things out as the documentation and examples are sparse.  If there are any problems you have that you want to know about let me know in the comments below.

Git-Logo-1788C

We recently moved our git repositories over to Amazon Web Services.  We ran into one issue with it which was that now our git requests needed to have a key pair attached.  The Internet was not very kind on explaining how to do this very well so I’m documenting it here.

The key pair you’ll want to use is the one generated for you by AWS.  It is the same one you use when you ssh into your AWS EC2 instances.  Take this key pair file, which I will call keypair.pem from now on, and we’ll need to move it and configure our git to use it.

  1. Copy the keypair.pem into your .ssh folder.
  2. Create/open your .ssh config file.
  3. In your config file
  4.  To clone the repository use the following
  5. To update existing projects on your machine to use the new address follow the instructions below
  6. Open your project’s git config file
  7. Change the url line to be

That’s it. Hope this helps anyone who is getting the error ‘Error: Permission denied (publickey)’.  There are other ways to do this but this way was pretty easy.

replogo

Last time we looked at how to generate a very simple PDF using ReportLab and Django, ReportLab and Django – Part 1 – The Set Up and a Basic Example.  This time let’s make the PDF a little bit more interesting with some headers and footers.  ReportLab gives a pretty good amount of control when it comes to adding headers and footers to your PDF.  To start off let’s bring back the simple __init__ method we had from last time and add a header/footer method to it.

Now we have a method that will draw things onto every page of our header and footer.  Next we need to actually call that method.  Remember last time where we built the document using doc.build(elements) and ReportLab built a PDF using the flowable elements in the list?  Well this time we are just going to add some more parameters to let the build process know that it needs to also draw out the header and footer on every page.  Below is our print_users method from last time with the new parameters added to the build command shown in bold.

That’s it. Now our print_users method will print out a few lines on both the header and the footer of every page. You’ll notice there are two parameters, onFirstPage and onLaterPages. This allows you to have different headers and footers on the front page, which could be a title page, and on later pages that would require page numbers. Speaking of page numbers let’s get into that.

Page numbers on every page was a big challenge for me to find anything on. It was easy enough to put Page X on every page but what I really wanted was Page X of Y and that “of Y” portion was tricky. Luckily, I’ve figured it out and I will present it here for you now.

You can alter the way that the PDF is built using the canvasmaker parameter in the doc.build() process. These canvasmakers can help you inject new things on every page without using a header or footer. Below is the code that I found somewhere online to print the Page X of Y on every page down near the footer. I have placed this all within the printing.py file I created last time.

To use this we just add a new parameter to our doc.build() command. You can see it added below in bold.

There you have it. Now you have a great header and footer on every page, or every page after the first, and page numbers on all of them. How fantastic is that? Next time we will go a bit deeper into Tables and how to use them to line everything up really nicely. They will be usable wherever you want a flowable including your new headers and footers.

send-file-iconupload-files-icon-ts7tteez

As we continue to push forward on development our users have asked for a robust way of dragging and dropping images and linking them to a work order.  I was putting this off for a while because I thought it would be a pretty difficult task but after a few Google searches I found a great jQuery plugin from blueimp called jQuery-File-Upload.  Take a look at their demo and check out how awesome it is.  We didn’t need any of the fancy bells and whistles that came with the Basic Plus UI so this tutorial focuses on just the Basic but you can scale yours how you’d like.  The tutorial will also focus on getting it to work and save to a MySQL database through Django.

To start off let’s get the drag and drop area set up on our page.  To do that you’ll need to add these things to your HTML template, Django tags are added because that is what we are using to render the page.

image_upload.html

With the code above you should be ready to drag and drop files immediately, at least from the front end perspective. Now let’s set up the server side of things. Make sure you add your URL from the fileupload to your urls.py file. Then create a view for that URL that looks something like this.

views.py

The view handles all of the uploaded files one at a time and saves them to wherever we would like. In this case we are making a database entry that houses the file in an ImageField and we have a CharField for a name that we can change without altering the file path used in the ImageField. The JSON output is important as it will read the data sent back and can output our newly added images right to the screen.  That’s all there is to it.

Now there may be some circumstances where you would like to add more data to the request than just the images you have dragged over.  In our case we wanted the work order number to be attached as well and saved in the file name.  Using jQuery File Upload we can add data anytime something is dropped by adding a bind call to all fileuploadsubmit method calls.  I added the following lines of code in the HTML template just underneath the var url line.

This will add the workorder id to the POST request data on every call using the fileupload. Another thing to note is you can add a check to see if you really want to submit the uploads like I have done. If the workorder is not active do not upload any images. You can customize this any way you’d like since it is all just JavaScript and jQuery code.

Another problem I ran into was having multiple file upload elements on the same page. This was really frustrating and reading through their documentation they had a fix that worked pretty well with a couple of tweaks.

First, to make all of the drag and drop areas work independently of one another you change the fileupload elements from having an id of fileupload to a class of fileupload. This will need to change on the above code for bind as well. But you can’t simply change it on the $(‘#fileupload’).fileupload() becuase then it will upload once for every drag and drop element on the page. You instead have to take it a step back and add these lines.

This allows every fileupload classed element to take files individually. But this was annoying because users had to drop the files right on the button to make it work. As you can see there is a new parameter we’ve added called dropZone. This tells the fileupload what area of the page to watch for. If you want to make this area bigger or smaller that is totally up to you. I changed mine to dropZone: $(this).parents(".panel-body") to allow the user to drop images anywhere inside the panel body and they will start the upload.

I hope this was useful to someone. We are actually going in a different direction with our image uploads but we may need this in the future and I wanted to document how I got it all working with both jQuery File Upload and Django.

EDIT

Thanks to Tuan Nguyen for pointing out that in its default configuration each image is uploaded in its own request.  To join these into one request, open up the jQuery-File-Upload/js/jquery.fileupload.js file and search for the line singleUploadFiles: and set it to true.  You can also limit the number of files to be uploaded right below by changing limitMultiFileUploads:.