Programming

Thoughts on a Self-hosted (local) 3D File Graphical Library

by

I’ve got a few problem with 3D printer file websites…

I’m kind of tired of finding a cool 3D print I’d like to make and putting it in my “saved”  list on the website, only to forget which of the 50 sites it was that I found it at when I finally get around to printing it. Also, each of these sites is changing and features are added/removed/broken and folks complain about them all the time. (lookin’ at you Thingiverse…)

I’m also tired of not being able to preview the STL files in windows as icons, etc since the downloads often have useless names.  I think I’ve come up with an idea for a good solution.

It’d be a Chrome webApp (no installing extra software on the computer like a server or docker image or anything stupid like that since everything we need is built into Chrome) that will:

  1. Allow you to scrape any 3D printer project from the file hosting site (thingiverse, cults, etc.) with the click of a button, hotkey, or right-click option. This would allow you to get description, images, license, and files from whatever website and save them locally. It also embeds a link to the original source into the description. I’d be able to have differently labeled categories or tags and I can add the object to more than one tag. Extra points if it adds a note if the editable source files are in the file download and what program’s can edit them (STEP, SCAD, etc).
  2. Store this data in indexedDB.
  3. Host a webpage interface which previews the STL files using javascript, categorized, all the text and data form the original source with a link to the original source if you want to check for updates (could possibly add this as an automatic feature later), comments, etc. Most importantly, you can search through all your saved files and see them previewed.—all local!~
  4. Can launch the slicer of your choice for any particular STL file with the click of a button a’la External Application Button
  5. Until Persistent data is implemented, you can export the indexedDB data.

Thoughts? Anyone else see the need for this type of thing?

Getting Started with (Git) Version Control and Fab Cloud

by

Fab Cloud is the Git repository for all Fab Academy and FabLab sites. The first thing you have to do as part of Fab Academy is set up your own repository here for your website. Git very powerful tool used to synchronize multiple versions of files and folders that multiple coders are working on in the same project. Don’t let that scare you though, in the beginning we’ll just be using it to update the webpages on Fab Cloud.

I recommend you learn about using Git in the command line, but that’s a bit scary for some folks. Luckily, the simple basic  stuff doesn’t require it (of course, unless you mess something up, then you’ll be learning all about those advanced functions in the command line tool).

Head over to Git for Windows download and install it.

While this downloads and installs, login to your Fab Cloud account. Recall that you’ll login using your FabLabs.io credentials, in fact the two sites are linked. Just click the button to pull in your FabLabs.io login and you’re good to go.

Once in, you’ll be at your dashboard. https://gitlab.fabcloud.org/dashboard/projects . Then click the big green “New Project” button at the top right of the screen. Name this project whatever you want and you can choose whether or not to have a Readme.md file in there. Go ahead and create the Readme.md file. This file is automatically rendered from markdown to html when you visit the directory in your repository it resides in. It’ll start off blank, but we’ll add something to it later.

Now we need to connect the web server and your computer in an encrypted way to transfer files back and forth.

Open Git GUI by clicking your windows start menu button and typing “Git GUI” click the icon when it appears. Since this is the first time you’ll have used the software, it’ll ask you what you’d like to do. Select “Clone Existing Repository” as we will be making a local copy of the one from the web. The local copy will be the one you edit and update and when you are ready, you can upload all your changes to the web.

 

It is at this point that we have 2 options. If you are on Central Piedmont’s campus, you CANNOT use ssh. You can only use the https method of accessing your gitlab site.

If you are using HTTPS:

Step 1: Visit your gitlab repository’s page and click the blue “Clone” button. You’ll need to select the “Clone with HTTPS” link.

Step 2: Open GitGui on your windows machine by clicking the windows icon and searching for it.

Step 3: Click “Clone Existing Repository”

Step 4a:  Paste in your https link in the top box as shown below

Step 4b: Set a target directory on your computer for where you want the files copied to. I created a folder in my Documents named GitGUI. Then you must type in a slash and the name of the folder you want to create. You can’t select a folder that already exists… Here I manually added “/base” after selecting my GitGUI folder.

Step 5: Click “Clone” and it will ask you to login to gitlab.fabcloud.org. If you forget this, simply visit your gitlab.fabcloud page, login via fablabs.io, then look at your account info.

Save your progress locally:

You can now edit the files in that folder, and when you are ready to save your progress locally. You may think “I already saved the files I edited” but you want to make sure to save your progress on the entire repository in gitLab in case you ever need to revert back to this saved point. Think of it like a spawn point in a video game. You WILL break something eventually and need to go back to this save point.

To save your local progress, open gitGUI and open this repo. Then you can click the “scan” button. you’ll see a number of files in the top left pane. These are unsaved changes.

Step 1: Click “ReScan” to scan the folder for changes

Step 2: “Stage Changed” will setup the changes to be committed to your local repository (folder)

Step 3: “Commit” documents this as a save point for the future. You need to enter a comment in the “Commit message” window describing what works and what doesn’t at this point.

Step 4: “Push” Synchronizes these changes with the gitlab.fabcloud server. You’ll likely be asked to login and here you’ll again use your fabcloud credentials.

 

If you can use SSH use these instructions:

Before we can clone anything, we need to generate an SSH key for our computer. SSH is a encrypted (secure) method for communicating between different machines (be they computers or servers). Only devices with the “key” files can unencrypt the messages sent between the machines. We must generate a key pair on your machine. We need to generate what is called “Asymmetrical encryption” key pair. This consists of a private key (the file which stays on your computer and is not shared) and the public key (which you send to the other machines). Basically, the public key can encrypt messages and send them to your computer which can be decrypted by the private key. More info here.

To generate the keys, Go to Help—> Show SSH Key

In the new window click “Generate Key.” It will ask you to enter a password twice. Make sure to enter the same thing. Next, it will fill out the text box with what looks like gibberish. This is good! That’s the public key. You need to copy this to your clipboard so we can paste it into the website.

image

Add the SSH key to your gitlab.fabcloud.org account.

Login to your gitlab.fabcloud.org account (remember that it uses fablabs.io login credentials, don’t make a new account, be sure to click the button regarding FabLabs.io and login there.)

Click on your profile icon at the top right of the screen and visit “settings”

In the left column, click “SSH keys”

Paste your public key into the textbox labeled “key.” When you paste it, it should bring up the name of your computer. You have to then click the “Add key” button at the bottom to save this.

Once you do this, you can close the “Generate Key” window and you’re back to the “Clone Existing Repository” window.

The next window asks for two locations. “Source Location” refers to the one on the web server and “Target Directory” is the folder on your local machine you want to store it in.

To get the source location visit that new project you started earlier at and at https://gitlab.fabcloud.org/. At the top right click the blue “clone” button and copy what it says in the SSH window: Example:

git@gitlab.fabcloud.org:acharris/base.git

My username is acharris and I named my repository “base.”

The important thing here is that the folder you want to put it in cannot already exist. So I typed in “base” at the end of the line. Git GUI will create the “base” folder, then store my “base” project in there.

image

It’ll ask you for your login, so go ahead and type it as many times as it asks for it.

image

Once it is finished, it will open up the regular Git GUI interface window. It has now created a local branch. (Local means your computer, remote means the gitlab.fabcloud.org server)

image

In the future, you won’t need to clone this again, You can just “Open from Existing” at the first screen and it’ll bring you right to this window.

This can look intimidating, but it is really simple. First, take a look at the folder we created on your machine. Go to “Repository—> Explore Working Copy” This is the local copy (local branch) of the folder from the server (remote branch). We can add/delete/change any files or folders in this folder while we are working, then upload them all to the server when we reach a good stopping point for the day and it’ll merge the files with anyone else’s who has been working on the same project.

Let’s do a simply workflow.

Let’s change the README.md file. Open it in a text editor (such as sublime or notepad++) and put some text in there. Something like:

I did it!

Save and close the file. Now go into the Git GUI window and notice the buttons. Each time you want to upload files to the server. We will always click these buttons in order from top to bottom, starting with “Rescan” This will magically detect all changes in the project folder. you’ll see the file names in the left Pink panel and the file contents in the right Yellow panel.  For now you should just see your txt in green with a + sign in front of it. This pane shows any added or removed text from what is on the server.  imageimage

The next button “Stage Changed” will move the files from the top pink pane to the bottom green one. If you only want some of the files and not others, then you can click the icon next to the file name to change its location.

Slight detour… Warning: LF will be changes…

At this point you might get a popup on windows stating

Warning: LF will be replaced by CRLF in README.md. The file will have its original  line endings in your working directory

This helps windows and linux compatibility, but in some cases (such as EagleCAD board files) it can break stuff. First we need to unstage the file we just staged by clicking at the top menu bar Commit –> Unstage from Commit then we need to turn that feature off by opening the file base/.git/config and adding autocrlf=false after ignorecase – true line and clicking save. If you can’t see the folder named “.git” it’s because windows is hiding it from you. In the windows file browser, click “view” and check “Hidden items” and “File Name Extensions” and you should be able to see it.

Now you can stage without the issue. This change only affects this one project now, but if you don’t want Git to change ANY files in this manner you can go to a command line, cd into a git project directory and enter the following:

git config core.autocrlf false

Back on track, Sign Off:

Next you want to add text to the comment box:

GIT GUI recommends:

First line : Describe in one sentence what you did.
Second line: Blank
Remaining Lines: Describe why this change is good
Sign Off.

Type your comment, then click the next button in the list to “Sign off” on the changes. It’ll paste a template in the “Comments” textbox. This says that you in particular were the person who uploaded stuff. This is helpful later when something breaks and you want to find out who to yell at.

image

The next button it “Commit” which will add this to the local branch of the Git repository file. When you click this, the files disappear in the Green pane. This does not mean it it available on the web however.

I hear you asking “Well I just copied the file into that folder, isn’t it already there?”…

The answer is yes and no. It’s on your computer, but it isn’t part of the project from the project. You need to tell Git this new version is what you want to use.

You need to click the last button to “Push”  to upload these changes to the server. This will synchronize the entire folder, changes, comments and all to the remote branch (server).   A window will pop up and just click “Push” again. You’ll be asked for the password again.

image

Now what happens if you screwed something up?  Well…. don’t.  You have plenty of opportunity to check things out before actually Staging, Committing, and Pushing. That’s the hope at least. In practice when stuff gets screwed up somehow or another.

You can fix the error quickly, then push a new copy to the server or you can try to rewrite history. This can get really messy and I do not recommend anyone mess with this unless you know what you are doing with Git already (which I assume is not the audience of this tutorial.)

Customizations:

The base version of Git GUI won’t help much as it is too limited. You have to end up using git commands. There’s two ways to do this. One is to go to you’ll have to get into the Git Bash screen (accessible from the “Repository” menu item at the top of the screen.)  Another is to add the commands to Git GUI’s menu. (Wait.. What!?)

Click on Tools –> Add  and you’ll be asked for a name you want to add, and the command. Check this one out for instance. Before you push, this will revert the file back to the version from the remote branch (the server):

image

How to: FabTinyStar Programmer

by

actual boardThe FabTinyStar is a small ISP programmer for AVR chips started at FabLab Amsterdam. You can use it with AVRdude or even from within the Arduino IDE. It is a super cool little USB programmer for AVR chips. You will need something to program this programmer with, so if you happen to have an Arduino that uses the FTDI chip for serial communications, you’re in luck because you can use that as a programmer (just match up the pins on the connector headers) to get the  FabTinyStar up and running. Typically a FabLab has one or two “professional” AVR programmers, then each student builds their own FabISP or FabTinyStar.

The FabTinyStar has gone through multiple revisions, so I’m showing only what I have tested and got working. Zaerc has a good multipart tutorial on FabTinyStar version 12 as well.

Why would you want to use this over the regular FabISP?

  1. Fewer parts (no crystal)
  2. No need to desolder or break off any jumpers after you burn the FabTinyStar Firmware, simply burn the fuses and you are ready to go
  3. It has a switch to power the target board (no need to use external power for the target board)
  4. It has an LED to show that it is connected and powering the target board
  5. It has an LED to show it is programming correctly. This little bit of feedback is awesome for debugging!
  6. The neat-factor of having an 8-pin awesome custom AVR programmer.

To build this device, you can download all of the EagleCAD files and Firmware here. You can use a variety of PCB fabrication techniques to make your own boards. I’ll leave that part up to you. I milled my PCB but you can etch it just as well.

Below I’ve shown the header pinouts for the ISP pins. I recommend you leave off the bottom two pins of the header (USB D+ and USBD-) because if you solder them on there, you can’t use the regular 6-pin header for programming or connecting up circuits.
fabTinyStar-013_lay

Firmware:

In Windows machines, I install the Arduino IDE which will come with AVRDUDE. Search through the installation folders of the Arduino IDE to find the AVRDUDE executable program.  I then typically use AVRdudess or another AVRDUDE GUI to program it using the following settings:

 

FabTinyStar Drivers:

Before using the FabTinyStar, you must install the appropriate driver in Windows. There are a couple of good guides out there (namely the one on Adafruit) but the one that is closest to the FabISP you just built is here at Sparkfun. Following that guide will install the drivers. To check this driver is recognizing correctly, open the device manager in windows and confirm that “libusb-win32 devices–>USBTiny” appears (and disappears when you remove the device).

When using the FabTinyStar, you might need to flash the target chip multiple times, or you might get a “verification error.”

Installation was simple, but not being super familiar with windows, I hit a couple of stumbling blocks. Here are the steps I got to work on Windows 7.

  1. Download the Windows driver for USBTiny (which the FabISP is a type of)
  2. Unzip the folder to the desktop or somewhere accessible.
  3. Plug in the FabISP
  4. Start–> control panel–> hardware and sound –>Device Manager
  5. Once here, right click on the FabISP icon in the “unknown devices” tree
  6. Select “update driver”  or something to that effect
  7. Select the option to manually select the folder the driver lives in and locate the driver to install it.
  8. Also, install the ATtiny hardware files:  Download them here, and unzip them into your ~/My Documents/Arduno folder.
  9. I also manually added “FabISP” to my programmer.txt file.  You *could* just select “USBTiny” in the Arduino Tools–Programmer menu, but I wanted mine to say “FabISP”.
  10. So when you are ready to test this, open the Arduino IDE, select File–>Examples–> 01Basics–> Blink
  11. Change the pin number on line 10 to the one you LED is connected to (Arduino doesn’t use “PORTB.1” for instance, so look at the map at the bottom of this page to see what number your pins are.  You can use that type of addressing if you want, but most Arduino programs don’t).

 

Using this programmer with custom-built AtTiny circuits in Arduino.

The following is a quick summary of this page at HighLowTech to serve somewhat as a mirror, but mainly as a cheatsheet on how to setup and use AtTiny chips with the FabISP in theArduino IDE..

You can use these programmers in the Arduino IDE to program your boards directly, without using the Arduino bootloader on the target chips.To use Arduino IDE, you can install the AtTiny board library from HighLowTech. I don’t use the built-in function for add-on in Arduino’s IDE because it has never worked for me on any machine I’ve tried it on. Typically, I find it easiest to simply download the Arduino library for 1.6.x  (here’s my copy as a backup) and install it manually by copying the “attiny” folder in the zip file to my arduino’s hardware preferences folder. On my machine this is the path: C:\Users\ALaptop\Documents\Arduino\hardware. I had to create the “hardware” folder inside “Arduino”, but then I just restarted the Arduino IDE and could see the change had taken by finding Tools–>Boards–>AtTiny.)

On Mac or Linux, find the Arduino IDE installation and copy the library to the hardware folder.

How to use this new library:

Restart Arduino (or open it if you hadn’t already) and select “Tools–> Boards”  and now you should see a AtTiny entry.   I’m showing what it looks like in Arduino 1.6.4.  Different versions might look a little different, but you should be able to get the same results pretty easily.

board

Once you select “AtTiny” as the board, you will see different options under “processor”.  Select the chip you are using here.

Chip

 

After selecting the particular chip, you can select the clock frequency and whether it is internal or external. If your design uses a resonator or crystal, it is external.

clock

Also, when you select “Tools–> Programmer” you should see “USBTiny” listed.  Select that as well.

programmer

The first time you connect a particular AtTiny chip to this setup, you’ll need to burn the fuses.  The way to do that is plug your USBTiny into the computer, plug your target board (your custom design with an AtTiny) into the USB Tiny, Select the appropriate Chip, Board, and Crystal.  Then select Tools–>Burn Bootloader.”  After this is done, just the target board is ready to accept the arduino code you write.

bootloader

Not all functions of arduino are possible since the AtTiny series chips have fewer capabilities, but most stuff works fine. If you want to drive servos easily with the AtTiny chips, you can use the 8-bit servo library found here

Keep in mind the following pinouts for the AtTiny 44 and AtTiny45 (or 84/85) when writing your arduino code.

ATtiny45-85

ATtiny44-84

Photo Credit: All glory goes to High-Low Tech

Testing it out:

echoHelloWorldFlashy

You can build a simple multi-use board I made as an example.  Download the EagleCAD files and Arduino code for that project here. I originally made the PCB and the code for my FabAcademy page. Check those links for more detailed info.

Open the Arduino IDE and start a new project. Paste the following code in it and set it up to program an AtTiny44 with a 20MHz external clock. PLug in your FabTinyStar, connect the example board and compile and download the code.:

 

// the setup function runs once when you press reset or power the board
void setup() {
  // initialize digital pin 13 as an output.
  pinMode(7, OUTPUT);
}

// the loop function runs over and over again forever
void loop() {
  digitalWrite(7, HIGH);   // turn the LED on (HIGH is the voltage level)
  delay(1000);              // wait for a second
  digitalWrite(7, LOW);    // turn the LED off by making the voltage LOW
  delay(1000);              // wait for a second
}

Playing with Google Apps Scripts

by

OCRcoverGoogle Apps Scripts (GAS) is an interesting tool that you can use to automate tasks using functions built into Google’s powerful APIs.  Personally, I couldn’t find a ton of info on the syntax and what-not for the language, but it seems to be javascript with some caveats. (It doesn’t like linebreaks in the code, you use only a single quote for Strings, and it will ignore newline characters in strings “\n”).  Oddly though you can’t use the javascript examples from Google’s developer API examples directly (or at least I didn’t have any luck).

As an example project, something I’m working on required me to read the text out of an image then highlight keywords. I broke this down into three steps.

  1. Acquire an image
  2. Use Optical Character Recognition (OCR) to read text
  3. Search and highlight keywords

Background:

I’ll start with giving you access to the finished project code. To run it,  you will have to “File–>Make A Copy” of the project. Then follow the steps on this webpage word-for-word to Activate the DriveAPI and developers console and you’ll be fine.  Sometimes the developers console site doesn’t want to load, just keep trying it until it works. When you want to run the code, you click on “Publish–>Deploy as web app”. The first time you’ll have to set who you will allow to have access to the app. They will also have access to your google drive if you allow them to execute as your account so be careful. Once you’ve set this, click “Deploy”.  Then you’ll get the link to the web app.  The first time you run it you will have to give it access rights to your google drive.

The Guts and Explanation:

OcrTestForm

Luckily while searching, I stumbled across the blog of Amit Agarwal which if full of great example code.  For step one, the simplest solution I could find was his code example that uses a custom HTML form upload an image to your google drive account.   This might seem like overkill. Why didn’t I just use the fileID of something already in my google Drive?   Well, in this particular application, the user might be uploading multiple files from a camera on a mobile device. This form setup seemed to be a simple web-based uploader which gives me complete access to the guts of what’s going on.  This will help me get the fileIDs easily for different files.

For the second step, the OCR, I had attempted multiple times and methods for getting an Android native OCR library to work. Every tutorial I found was highly dependant on the version of Android SDK or Eclipse I had, or I would just hit a dead end when I tried to compile. Plus, those would only work on Android, not every device. I really wanted a web app. That’s actually how I stumbled upon Google Apps Scripts again.  I had played with it a bit in the past, but this time, after finding some great example OCR code from Amit’s website, I found GAS much more accessible. I added this code to the HTML form example from Step 1 above and tweaked it a bit.

In the original OCR code snippet the script reads an image, then creates a Google Doc with the image followed by the text that it recognized. This file is saved this into the root folder of google drive.  Since the uploader code (from Step 1) saved its picture into a subfolder, I made the OCR code save into that same folder.  The way to do this is to add a “parents” ID tag to the properties of the OCR file.  Since I already had the folderID from the uploader code, that was pretty easy to sort out. This was not super easy to figure out. As I said, I couldn’t find a lot of info on GAS language and this was one of the things that took me a while to find. By looking at how Google’s other services save a file into a subfolder, I was able to do the same thing in GAS.  You can see the results below.

OceTestDriveFolder

I tweaked the form code to print out the URL of the newly created Doc file with the searchable text.  I couldn’t figure out how to get logging to work in GAS at all.  Every time I tried to run something that should print to the console, a console would briefly appear, but disappear before I could read anything. So I just stuck with having the form print the URLs. Then I could copy and paste them into the address bar to visit the document.

The third step was searching for keywords within the text.  Again, someone else had done the hard work for me.  I simply tweaked the code and pasted it as a function into my script.

To test the code I printed a page of public domain POE-etry and took a picture of the page with my cellphone to simulate how a user might do.  To make sure that I’d get a lot of hits on my text search, I hardcoded the keywords for the search to be the rhyming sounds in the poem.  In this case –oor and –ore.  Then I uploaded the image to my Google Drive using the HTML form. After a couple of seconds (it takes a couple of seconds to upload) all I needed to do was open the newly created OCR DOC file and see how well the OCR worked.

As I said before, the Google Drive’s OCR process pasts the image into the file, then translates the image to text. Even in normal room lighting at night time it was really good at translating the text and easily searchedand highlighted the keywords I hardcoded. Here’s the resulting file.

Student Engineering Portfolios

by

This past semester, we radically changed the curriculum for the Intro to Engineering course at the college where I teach. We are focusing more on competency-based learning via constructivism in this introductory practicum course. To track the student progress we used an online website portfolio.  We tried to base this concept on the webpages we had to make in the FabAcademy.  Here is what tools I used and what I’ve learned.

 

In the FabAcademy, students were required to make an HTML webpage each week chronicling their progress with that week’s project.  This HTML page was saved in a Mercurial repository on the students’ computers, and synchronized with the FabAcademy server.  At my college, the port for doing this was blocked, so it was impossible to synchronize the repository unless I did it at home.

Since we can’t run a Mercurial server (due to the port issue) at my campus, and I didn’t want to have to fix the problems of over 100 students creating multiple heads of the repository, I went another direction.

Instead of HTML pages, I created a multiuser WordPress installation only for students at my school.  It was available online from any computer, and students can upload any code or design files in any format they wanted as long as it was a .zip.   This worked marvelously.  I had worked with WordPressMU years ago creating this exact type of environment but I couldn’t get an audience. In fact, I used the same domain name as my first site from long ago. the concept was supposed to be something like instructables.

WordPress was great due to the very low overhead for students. They didn’t have to install any  funky toolchain, learn to use the terminal, or anything like that. They could focus on the assignments themselves.  It did take a while for them to understand the concept of  technical writing but eventually most students turned their website into a great portfolio.  That was the main objective. The students last assignment was to export their website and import it into their own wordpress.com site to continue documenting their work to create an engineering portfolio they could show prospective employers. This is similar to the concept behind InnovationPortal created by Project Lead The Way and many other services of this sort.

In the end, just like FabAcademy, I wanted to scrape the pages and create a static HTML version of each student’s website at the end of the semester. This way our future students could benefit from previous generations and build upon their ideas and projects just like in the FabAcademy. being static HTML frees up resources on the server and reduces the chances of being hacked by reducing the number of live users and database entries. The static HTML copy of all the websites didn’t seem to be a hard task. I had found a plugin called Really Static that does exactly what I needed. I tested it on my own old senior project website.

While testing this plugin on a single site on our server, I accidentally activated it on all 100 blogs.  This was a disaster!  I’m still trying to figure out how to fix this issue.  I emailed the support page and even emailed the author who stated he has used it on many multiuser sites, but I got no replies for help.  I don’t really know PHP, just enough to hack on it to glue code snippets together (if I am lucky) so there’s no way I’d figure out how to fix it.  Also the comments of the code for the plugin are in German, which I’m not great at.

A new solution appears

After this mess, I decided to look more into Static Site Generators (SSGs).  This is a system that creates static HTML pages from the get-go. Users write pages and posts in a markdown language of some type in a plain text file, then the site generator turns this markdown language into a static HTML site. Some common ones are Jekyll and also Hyde.   There are several large lists of Static Site Generators on google as it is the new fad in webhosting.  The issue with almost all of these systems is that it is not user-friendly. For instance, a new post on wordpress is literally as easy as writing an email or word document.  To use most of the systems I’ve seen for SSGs, you have to install a compiler (Ruby or python for instance) then some libraries, then you have to write your code in a text file, compile it into HTML, then manually upload these files to the server or to Github pages.

There is no way my students can handle doing all that without asking millions of questions, even if I make a how-to video showing each step (heck, they asked enough about wordpress as stupid-proof as it is…)

There are some relatively simple solutions out there already. Most notably is Dillinger which seems to be fully featured except missing a toolbar to help complete noobs. Having more features scares me since I’m not great at javascript. I just came across this one and had to mention it because it does integrate dropbox, googledrive, Microsoft onedrive, etc. I like it, but there are some drawbacks:

  1. it is too complicated for me to work on until I learn javascript enough.
  2. There doesn’t seem to be an index page that updates automatically (like Simple below) which is needed
  3. There doesn’t seem to be multiple templates. you get what you get, though it does look quite nice.
  4. There are no buttons to help noobs like I mention below in the RES.

While searching the list of SSGs, I found one solution I think is workable and stripped down enough that I might be able to wrap my heard around it somewhat.  It is called “Simple”  and it uses Github pages.   It is very easy to set up and use and it has a web-based interface with a live preview of the generated HTML from the markdown language.  Markdown is a very simple language to learn and is intuitive enough for freshman students to pick up quickly.  So I forked Simple so I could hack on it.  It has an MIT license, so it is fully manipulable.

While it has a simple interface, I wanted to make it easier for my students to use the Markdown language. I’m taking my cue from the Reddit Enhancement Suite (RES) Chrome plugin.  When you make comments on Reddit using RES, there are little icons almost like a rich text editor.  You have an icon for Bold, Italic, Strikethrough, quote, link, etc.

redditIcons

These icons make it dead simple to use markdown language, and especially if the user can see a live preview of the results using the “Simple” interface.

The template for Simple is currently hardcoded, but looks clean and easy to use.  There are only a couple of issues:

  1. Students must get their own Github account and host their site there, making it a bit tricky to scrape the content at the end of the semester…
  2. Students must link images that already exist online somewhere.  This means they will either have to upload the files to Github (yeah right, like I want to get 1M questions about using the sync app)  or use their google drive from their school account. I’m almost 100% on them creating a folder in google drive to host the pics as long as I can guarantee I can scrape the images well enough. I haven’t tested this yet.
  3. They cannot directly embed youtube videos into the markdown language. I can skirt this by making a button that links to the video with a screenshot of the video pretty simply. I have seen other people extend the Markdown language to be able to embed youtube and vimeo videos, but I’m not savvy with javascript, which is what Simple is written in.
  4. There is currently only one template, and it is hardcoded.

Otherwise, it seems pretty darn good. I expect that it could be extended for use completely in google drive, but I’m not sure.

It is going to take me quite a while to implement the RES-style buttons due to my lack of javascript skills.  If anyone wants to help, check me out here

 

Another strong contendor already has a simplified button interface and can be connected to google drive.  This is called StackEdit. It has a great editor, fast previewer, and can export to several options as well.  Since the buttons are a must, this is a good solution. It is too cocomplicatednot even sure if itis open source) for me to modify in any way, like Dillinger, but we can see how it goes.  I haven’t played around with it enough to see if there is a variety of templates to use.

Adam-Atom