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?

RGB565 to RGB888 Color Conversion

by

While working with Charlotte Latin FabLab students this year, we came across an issue. Alex was using a camera module for her Arduino project (ArduCam) that gave RGB565 formatted pixel data but she needed to convert it to RGB888. Though there are tons of posts on stackExchange about how to do it, I couldn’t find a simplified broken-down explanation of how it works to point her to, so I decided to write one.

RGB565 means there are 5-bits of data for the Red component of the pixel, 6-bits for green and 5-bits for the blue.  It looks like this:
pixel value =
RED= R4, R3, R2, R1, R0,
GREEN= G5, G4, G3, G2, G1, G0,  
BLUE= B4, B3, B2, B1, B0

But Remember RGB565 is stored as two separate values (VL and VH from the example code for the camera we used), with the low value on the left and high value on the right.
VL = G2, G1, G0, B4, B3, B2, B1, B0     VH = R4, R3, R2, R1, R0, G5, G4, G3

Some clever bitmasking can strip out each component color and place them into individual variables. We’ll AND the bits of the values we want from VL and VH with ‘1’ or ‘0’ depending on which we want at a given time.

Of course this has to be done for each and every pixel, and she had 320 x 240 in her original image.

This is a simple nested for loop that already used in the example code to read the data from the camera

for (int i=0; i<240; i++){

  
   for (int j=0; j<320; j++){
  
    //Convert the RGB 565 to RGB 888 of the pixel in the bitmap and store it as PIXEL data type in the new larger array.

  
    //Step A convert to the new PIXELS format

  
    ///Step B scale from 565 to 888

  
    }//end for j

  
 }//end for i

STEP A: Convert the color to a new pixel format.

Based on some example code, it’s best to create a structure to contain the R, G and B values:

typedef struct { 
unsigned char blue; 
unsigned char green; 
unsigned char red; 
} PIXELS;

Then we need a large array to store the pixels of the new image:

PIXELS bigPIXELS [12] [12]; //the resulting RGB888 picture pixels are stored here

Then you can convert each pixel by using logic operations and bit shifting.

/*Blue is the easiest to see how this works so we'll do it first.
  
 The values for Blue is stored in VL So for example if VL = 1011  0101( blue = 21 in decimal) 
 to get the blue values all alone, we can AND them with 1s and AND the green bits with 0s 
 leaving you with an 8-bit number with only the blue data in the right spot. The result 
 is: 0001  0101  or 21 in decimal. 
*/
  bigPIXELS [i][j].blue =    ( VL & 0b00011111 ) ; //0x1F
 
 

/*Red is only slightly more complicated. We first get bits for red alone, then shift them 
 to the decimal point The 0b11111000 gives you only red data as before, but the digits 
 aren't in the right place. 
 
 There are place-holding 0s that make the value of red too big: 
 For example is VH = 1101  0110  The value of red is 26 in decimal here. ANDing as before
 would give you only 1101  0000, but if we convert this number to decimal, it =208, which 
 isn't right at all. Shifting to the right by 3 (>>3) moves the red value down to the 
 decimal point and gives you 0001  1010 = 26 in decimal in 8-bits
*/
  
bigPIXELS [i][j].red =   ((VH & 0b11111000) >> 3); //0xF8
 

/*Green is the most complicated as it has components in each VL and VH so we'll AND the 
 bits with 1s and then shift them to the right places, then we need to OR them to the correct spot
  
 VL = G2, G1, G0, B4, B3, B2, B1, B0  so to get only green values
 */ 

// since we don't use this variable for anything else, we can just dump the result of this operation back into VL
 VL&= 0b11100000 ;  // 0xE0  

 // VH = R4, R3, R2, R1, R0, G5, G4, G3  so to get only green values  
 VH &= 0b00000111; //0x07
  
 //Now shift the bits to the right places and OR them together to glue them into one number
bigPIXELS [i][j].green =  (uint8_t(VL) >> 5) | (VH << 3); //Shift lower 3 bits in VL to the decimal point, and shift the upper 3-bits in VH to their correct positions.

Great! Now we have our RGB values by themselves, now let’s let them stretch their arms to take up the full 8-bits that’s now available to them.

Step B: Converting from one colorspace to another is simply a function of scaling. You’ve already done this a lot actually. Any time you’ve read an analog input, then used that to control an analog output on arduino you’ve done it. Imagine a knob on the Arduino’s analog input. Analog inputs can read values from 0-1023 (10-bits) where 100% is = 1023. Imagine a single red pixel as an LED on an analog output. It can only take values between 0 and 255 (8-bits) where 255 is 100% brightness of the LED.

You can do the same thing here. In a 5-bit number system, 100% is when all bits are 1’s so it is 11111. This needs to be converted to an 8-bit system where 100% is = 1111  1111.

You use Arduino’s map() function to map the values from one scale(0-1023) to the other (the LED’s 0-255), however this is very inefficient and slow.

Since you know what the numbers are going to be for the scaling calculation, and they won’t ever change you can pre-calculate them for your code. You’re scaling from 5-bits to 8-bits for red and blue which is 0xFF / 0x1F = 255 / 31 = 8. For green you start with 6-bits and convert to 8 which is 0xFF / 0x03 = 255 / 63 = 4.  You could multiply these hardcoded numbers to scale red *= 8; green *=4; blue*=8; however since these are powers of 2, there’s a trick to make this code faster. Simply bit shift left. For each bit you shift, it is equal to a power of two so the code would be red and blue << 3 and green << by 2.

//If you want to see the RGB 565 values print them here, or comment out if you don't need them
Serial.print(" RGB565 =");
Serial.write(bigPIXELS [i][j].red);
Serial.write(bigPIXELS [i][j].green);
Serial.write(bigPIXELS [i][j].blue);

bigPIXELS[i][j].blue = bigPIXELS[i][j].blue << 3;//blue and red were 5-bits

bigPIXELS[i][j].red=  bigPIXELS[i][j].red<<3;

bigPIXELS[i][j].green =  bigPIXELS[i][j].green <<2;//Remember that green has 6 pixels to begin with so it only shifts 2 places

Now you can do with these as you please. Add a BMP header and print them to the serial port to be able to view this BMP image on your computer.

Serial.print(" RGB888 R= ");
Serial.write(bigPIXELS [i][j].red);
Serial.write(bigPIXELS [i][j].green);
Serial.write(bigPIXELS [i][j].blue);

 

Cheapest and Fastest COVID-19 Face Shield

by

I’m working with some folks on a project to 3D print a ton of face shields for Charlotte hospitals during the COVID-19 crisis, but I figured there has to be a faster and cheaper way. I worked something out with parts I had in the garage and it costs pennies to make. it even adjusts so you can lift it up or lower it down over your face.

What you’ll need:

Drill a hole with a drill bit or a utility knife (drill with the knife by spinning it, don’t cu ta hole or it will tear and be weak)

It’s adjustable.

 

Make 3D Pictures with Our Free Web App

by

If you didn’t already know, Jess recently wrote a great book full of science experiments for parents and kids to do at home. If you haven’t heard about it, check it out here. All bias aside, it really is the best science experiments book I’ve ever read. The projects are really cool and engaging. This book is written for ages 8 to 12 but there are projects that you would enjoy at any age. Everything is explained in very easy to understand terms from double-pendulums and chaotic motion to making holograms by hand.

One of the really cool projects in the book is making your own 3D glasses with stuff laying around your house. I wrote a little app to help you play around with depth and perspective when drawing your own 3D images. Check out the examples below.  You can adjust the depth and lightness of each line you draw and you can actually edit lines you’ve previously drawn. Click here to play with the 3D anaglyph maker.

Here’s an example of the type of results you can get with the app. You can tell I am no artist… but you can draw with the mouse and adjust the depth and darkness of the lines, then export the image to your computer. Feel free to upload your pic to imgur and paste a link in the comments to show us what you create!

 

 

 

 

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