Introduction: IBLIT - an Instructable Editor for Offline Use

By plus.google.com/1172655774861597

Old saying, "Give a kid a hammer and everything looks like a nail."

New saying, "Give me Instructables.com and everything looks like an Ible."

I enjoy writing Instructables ("Ibles"). After I wrote my eigth one using the online Ible editor at Instructables.com, I decided I needed to organize my Ible projects on my laptop. Working offline would let me pop in and out with new ideas and new images. Writing offline is quicker and it lets me brainstorm Ible projects before I go online to publish them.

The IBLIT software was my solution. I wrote it for my own use but offer it here for you to try. Suggestions would be very much appreciated.

Here are the main features of IBLIT.

  • Structured project management
  • New-project creation tool
  • Graphics file organization (original and resized copies)
  • Text editing
  • Easy step creation and rearrangement
  • Graphics to be inserted into steps
  • Preview of online step appearance
  • List and view of all available graphics files
  • Tool to assist with Ible upload to online Ible editor
  • MSPaint tool
  • Batch image file resizing tool
  • Import text and image data from an existing online Ible


There are three components to IBLIT (Screen Grab #1).

1. The NotePad text editor that comes with Windows (Screen Grab #2).
2. A toolbar that sits above Notepad (Screen Grab #3).
3. A function-assist window that sits to the right of NotePad (Screen Grab #4).

Please Note that the IBLIT software only works on PCs because that is the only programming I know. The organization described next (Step 1) could be used on a PC, Mac or Linux machine.


Step 1: Organization

For me there are three parts to Ibles that needed organizing: the steps, the descriptions and the images.

I created a folder in the root (C:\) of my laptop where all my Ible stuff would go (C:\-INSTRUCTABLES-). Then I created a subfolder for each project. Each project folder would have a place for the Ible script (a plain text file with an ".IBL" extension) and two subsubfolders for the images: original graphics and sized-for-publication graphics.

This organization alone was enough to save me looking all over my hard drive for the Ible parts I needed as I planned and wrote.

Here is how I arranged my Ible projects on my laptop. You can do this manually or, if you use IBLIT, it can all be handled by the software (see the next step).

(The line numbers are for reference only.)

1: C:\-INSTRUCTABLES-
2:     \IBLIT
3:          \OriginalGraphics
4:          \SizedGraphics
5:          IBLIT.IBL
6:     \Project2
7:          \OriginalGraphics
8:          \SizedGraphics
9:          PROJECT2.IBL

Line 1: The default is as shown. If there is not such a root folder then IBLIT will ask you if you want to create one.

Lines 2 and 6 are project folders.

Lines 3 and 7 are subfolders for the source copies of your images.

Lines 4 and 8 are subfolders for the images that have been resized for publication. (I use a maximum dimension of 500 pixels and JPEG compression for all my images.)

Lines 5 and 9 are the Ible project text files created with IBLIT.

Step 2: Start by Downloading and Installing IBLIT

IBLIT can be downloaded at http://www.pro-know.com/IBLIT in any of three ways

1. As the IBLIT.ZIP file. This will unzip into a directory in that can reside in the root (C:\) of your Windows machine. It will include two projects (IBLIT and SAMPLE) for you to explore.

2. As the IBLIT.EXE file only. This is the only program you need to get started, but you will need to create folders (as described in Step 2) on your own.

3. As the IBLIT.AHK source file. This is not necessary for IBLIT to work, but if you want to see what AutoHotKey programming looks like you can start here.

You could unzip download #1 above to a flash drive if you wanted to keep it portable. You will need to edit the .INI file (see Step 8) if you do this.

Step 3: Start a New Project Folder

IBLIT has a tool that will help you start a new project. Click the "Start" button (Screen Grab #1) and you will be asked for a project name (Screen Grab #2). Enter a single word project name for the project folder. This name is just for the project folder so be descriptive eg. "RepairBike" or "MakeBread".

This tool will then create the folder for the project and put two subfolders in it: 1. OriginalGraphics and 2. SizedGraphics. There isn't an .IBL file there yet, but we will add it next.

Click in the NotePad edit area. Then hold the Alt key down and press the "N" key. This will insert the codes to start your new Ible. Save the new file with a name plus ".IBL" for an extension. You are on your way to being an offline Ible writer!

Step 4: Edit Your New Ible

You can save your Ible and reload it any time. You can exit and return to editing your Ible as you get new ideas or material.

There are some two-character codes, when placed at the start of a line, tell IBLIT to do specific things. You can type these into the NotePad edit area or click on the appropriate line in the "Assist" window.

Place "@@" at the start of a line and IBLIT will make this the first line of a new step (Screen Grab #1). Included on this line is the title for the step. The first @@ in the IBL file is the Intro step (Step 0) and thus the title for the whole Ible when published.

Place "$$" at the start of a line and IBLIT will make this an image (Screen Grab #2). IBLIT will use this when it displays a preview and when it helps you upload your new Ible. The first $$ line in each step will be the image that shows when the step is opened online. Use the Graphics button any time you need to see a list of all the graphics files in the SizedGraphics folder. This view lists the file's name and displays each image.

Place two semicolons (";;") at the start of a line and you can leave yourself a comment. Add cues or visual dividers in your IBL script like I did before each new step (Screen Grab #3).

Here is an example of a very short Ible.




;;================= My Ible
@@My First Ible
See, now I have the first step (Step 0 = the Intro). It was easy to create.
$$myPic.jpg

;;=================
@@My First Big Step
This is the second step I created, but it will be called "Step 1" in the Ible.

I will make DIY history here!
$$History.jpg


The Assist tool (Screen Grab #1) to the right of NotePad has a list of most of the functions available to you.

Note For Programmers: The @@, ;; and $$ codes don't have anything to do with the final Ible. They are only for use in IBLIT by the Preview and Export tools.

Step 5: Alt Plus a Letter

The Alt + Letter key sequences help you by inserting html tags quickly. You can enter the tags by holding down the "alt" key while you press the corresponding letter or you can just click on the desired line in the "Assist" window to the right.

These functions just type in an HTML tag for you. You could type the tags from the keyboard, but IBLIT types them for you at the click of the mouse.

Step 6: Preview Your Ible

The "Preview" button (Screen Grab #1) starts a process that analyzes the IBL script and displays a Web page that simulates how the Ible will look online. This is a rough approximation, but close enough to give you the idea where you are in the development process.

The preview is one of the neat things about IBLIT (IMHO). You will be able to check that the images you put on each page are present and in the order you wanted (Screen Grab #2). It is a quick way to check your organization and planning as you write your Ible. Check it often.

Step 7: Export New Ible to Instructables.com

When you have finished the offline phase of your Ible development you are ready to upload it to the online editor at Instructables.com. The "Export" button (Screen Grab #1) will set you up for the transfer. IBLIT analzes your .IBL script and makes a list of each title line, image and body text as you wrote it (Screen Grab #2) in your new Ible.

The uploading process goes like this.

First run IBLIT and load in your project .IBL script. Next press the "Export "button. Then minimize the NotePad and the IBLIT GUI (the top part). That should leave the Export List (Screen Grab #2) on the screen.

Now log on to the Instructables.com Web site (click on the "Online Ible Ed" button) and start a new Ible by selecting "Submit Instructable" and then "Start A New Instructable". Click on "I have Read the Tips, Let's Start My Instructable" and proceed. The first step (Step 0 = the Intro) will be showing.

Click the "Step0Title" line in the Export list. That will load the title into the clipboard. Now click once in the online editor Intro title field and then press Ctrl+v. That should paste the title from the clipboard into the Intro title field box.

Now click the "Step0Body" line. Click in the body edit field of the online editor and do Ctrl+v. The text from your script should show up in the Intro text field. Check for any misspellings. Use the URL button to insert any links. Note: if you can't get the paste to work, try doing a "Save Now" and then a paste.

Now click the "Add Step" link at the top left of the online editor and repeat the click and paste sequence for Step 1, Step 2, etc.

If there are any graphics included in the step they will be listed. You can use these file names in the image uploading process and to assign images to steps online.

Step 8: Customizing IBLIT

This is an optional item. It is for more advanced users of IBLIT if you need to customize where the files will be located and other details.

Edit the IBLIT.INI file by double clicking on it in the C:\-INSTRUCTABLES-\IBLIT\ folder. This should open IBLIT.INI in NotePad.

You can change:

  • The root directory for your IBLIT projects
  • The width of the NotePad editor
  • The height of the NotePad editor
  • The name of the subfolder for original graphics
  • The name of the subfolder for resized graphics
  • The path to whatever software you want to use for batch resizing

Step 9: Import Ible Text

There may be a few times when you might want to move an Ible's text off of the Instructables.com Web site and onto your computer. The Import button will help you do that.

Begin by opening the Ible online. Then click the "See all steps at once" button (you have to be a Pro member to do this). Now right-click on the Web page and select "View Page Source". Go to File>Save and save the source of the Ible Web page to your Instructable folder.

Start IBLIT and click the Import button. Navigate to the HTML file you just saved and click Open. The IBLIT editor should now fill with most of the script from the online Ible. This process is not 100% accurate, but you should have a good start on the Ible.

Step 10: Software Sources


For the AutoHotKey programming language used to write IBLIT go to WWW.AutoHotKey.com and download the free installer.

For the graphics toolkit used for image resizing go to WWW.IRFANVIEW.COM and download the free viewer.

For help with HTML tags and Web page construction go to http://www.w3schools.com/html/ and browse the lessons.