Coastal Vectors

LCARS Clock

LCARS, the Library Computer Access and Retrieval System, is the fictional operating system used in the 24th century on Star Trek the Next Generation, Voyager, and Deep Space Nine. LCARS was designed to be a futuristic looking computer interface, while being very cheap and easy to create for the sets. In the show’s production, the effect was made by taking plexiglass sheets, applying vinyl shapes to the glass, then back-lighting it. It was a great effect and really sold the futurism that was felt when looking into the world of the Enterprise D. The entire design of the Enterprise D is very special to me, and seeing it gives me that nostalgic sense of coming home.

I recently found a small 3 inch display for the Raspberry Pi. It was only about 20 dollars, and I thought that was really nifty, and bought it without really having an idea what to do with it. After I got it, It seemed so neat that I thought it would be so cool to display something on it with an LCARS style interface. I like clocks, so why not start there?

After looking for something ready-made and not finding anything I really liked, I decided to make my own. On my list of things to do was to try using SVGs to make a website. This seemed like a perfect opportunity to do just that.

SVG (Scalable Vector Graphics) is a format that describes graphics by lines, curves, and points. I’ve used SVG a lot in design projects but not much in online applications. I started out by creating a basic design on Affinity Designer to the scale of my little screen.

Once the design was prototyped, I saved the file as an SVG and created an HTML wrapper around it, and began getting it set up. I started writing the Javascript that would actually display the time. That was pretty easy as it turns out. I was so pleased by the results, I decided to expand upon it, and add weather to the display.

To add weather, I had to do a few things. The first was get the location of the user. I wanted to avoid having to input anything and wanted the geolocation to be automatic. This is pretty easy using the built in command on most browsers.

navigator.geolocation.getCurrentPosition()

This will pop up one of those confirmation dialogs that the website wants to use the user’s current location. In the event that the user selects no, I wanted a fall-back solution as well. This is done using a free service from geoiplookup.io. They have an API that requires no key that returns JSON data.

Between the two of those options, I now have the approximate latitude and longitude of the user, and can query a weather website about the weather. I am using open weather map for that. They require registration to use the API, but it is free and caps out at 10,000 queries a month. That’s about 13 times an hour. For now I decided that 1 update an hour would be enough.

Their API returns JSON data that is easily parsed to get the weather and other things. Things are looking good.

Now I decide that I have these elements just sitting there, surely I could do something more interesting with them. What’s really cool about SVG is that the elements are just like HTML elements, and that makes it really easy to use with Javascript. I decided to make buttons on the side to do more than just label things. Clicking the time button cycles format (blinking separators, 24 hour, etc) and clicking the date button cycles date formats (US, ISO, Star Date, etc). Lastly, I decide to add a diagram of the Enterprise that replaces the weather data when “Diag” is pressed. I happened to have a vector drawing of the Enterprise that I made a few years ago that I could repurpose.

It looked spectacular. I was very happy. But like all projects, it’s fun to keep fiddling. The next step was to make the diagram less static. This time, instead of using Javascript to affect the image, I decided I would try SVG animations. These were completely new to me.

I wanted the nacelles to have the the flowing blue texture that we often saw in the TV show. I made a mask, and a gradient map in Affinity Design and then created an SVG animation where the gradient would pass behind the mask and move 30 pixels, then reset and repeat. It looked so great!

  <rect x="1" y="20" width="150" height="46" style="fill:url(#_Linear2);">
    <animateMotion
         path="M35,0 5,0"
         begin="0s" dur="1s" repeatCount="indefinite"
         />
  </rect>

Next, I decided to add points of interest to the diagram. I created all the points by hand and then used SVG animations to make them appear and disappear sequentially. This is done by having the animations kick off when they see the previous animation being completed. Once I overcame a few pitfalls, it came together great and was really easy.

Lastly, I wanted to move the diagram out of the main HTML. The SVG data was really cumbersome, and I wanted to have it be isolated for clarity. This was done by moving it to it’s own document, and giving it the proper SVG tags. In the HTML, I created an image tag that links to the SVG file, and then wrapped it in a g tag with a transform command so I can place it correctly within the main graphic.

    <g id="diag_data" transform="matrix(1,0,0,1,75,180)" style="display:none;">
      <image x="0" y="0" width="380" height="150" xlink:href="diagram.svg" />
    </g>

There is only one minor problem now… I’ve defined a custom font in the main HTML, and the embedded SVG can’t use it. Additionally, defining a custom font in the embedded SVG file does work when looking as the file directly, as soon as it is embedded using and image, img, or object tag, the fon’t definitions break. I believe this is a security thing, but I’m not really sure. The only way I could find to solve this problem was to embed the font as data in the SVG file.

I used a service I found at font-converter.net that gave me the encoded data, and then I put it into the SVG file. It worked like a charm. It’s not super pretty, but it worked.

<style type="text/css">
<![CDATA[
@font-face {
    font-family: 'lcars';
    src: url(data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAF2IABEAAAAAkoQAAQAvAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAABgAAAABoAAAAcGo5L0kdERUYAAAGcAAAAHwA... continues ad infinitum...) format('woff');
}
]]>

The result is about a day’s worth of tinkering, and I’m very pleased with the result. I am also really excited about how easy working with SVGs was with Javscript, and want to find another project that gives me an excuse to tinker some more.

Update

I had some trouble configuring the touch screen on my Pi. It seems like there was some information missing. The first thing is that the brand of touchscreen I purchased was Kuman, specifically the 3.5 inch HDMI screen. They have multiple models; some that use HDMI, others that use GPIOs. The original drivers I found for it were outdated and not meant for the current Raspbian OS. The newest drivers are available here on their GitHub page.

The second mistake I made was trying to install with the incorrect install script. I was using the “LCD35-show” script which is actually intended for the screen that does not use HDMI. That resulted in a black screen and no touch input. The correct installer for my screen is the “MPI3508-show”. After executing the script and rebooting, the screen worked correctly.

20,000 Leagues Under the Sea

20,000 Leagues Under the Sea is one of my favorite movies. I watched it repeatedly as a child. My favorite thing in the movie was the iconic Nautilus. The Nautilus was designed by Harper Goff for Disney’s 1954 film. I love the mixture of organic and mechanical design. Even as a child, I thought the submarine was pure beauty.

I’ve attempted many times to capture it’s likeness in drawing. I’m not much of an artist, but I think you can tell what the subject matter is.

I finally decided to purchase a model. I found a highly detailed model from Masterpiece Models for $100. It’s a 16 inch model based off the reproduction fabricated by Scott Brodeen. In the Nautilus community, his is a well-known name. He researched and created master models that are the most accurate reproductions available, going as far as to place all of the thousands of rivets as accurately as possible.

The kit was pretty good. I had a few issues with it as I went. As is common with models, there was a lot of flashing that had to be removed. This is a solid resin casting, and not hollow, so there is some heft to it. A few of the mold lines didn’t seems to be lined up correctly which made some of the smaller pieces less uniform that I would have liked. Specifically, the upper part of the nose, and the support struts for the rear rotor cover.

On the main body, there were some defects. The front of the nose was actually missing. It looks like when they filled the mold with resin (from the tail) the resin never reached all the way to the nose, or there was a large amount of air trapped there. I got some plastic and turned it down to an acceptable approximation and glued it on to the front. Some of the rivets also had bubble problems.

After doing the clean-up and most of the assembly, I did a light primer coat of black.

The interior of the wheelhouse I did a clean steel color. I deviated from what the instructions suggested for colors, and did my own based on memories of watching the movie. The wheel and wheel column are gold.

The lights I painted a mixture of yellow and gold paint.

The remainder was painted using a Modern Master’s Reactive Iron Paint that contains ferrous particles that oxidize using an activator containing acid. Following the instructions, I brushed on two coats of the paint. It comes out as a flat, almost gun-metal grey. A tad darker perhaps.

The magic happens when you apply the activator. I re-purposed a small spray pump that had contained eye-glass cleaning solution. I sprayed it on fairly generously, and then let it sit for 5 minutes. I then applied heat from a hair dryer. You can see the how quickly this take effect form the time lapse footage.

Once everything was painted, I had to apply the bubble domes to the lights and windows. The domes (4) were created using vaccuform, and unfortunately were a bit too large for the openings on the resin model. I ended up using a heat gun to soften the domes in order to place them. Once placed, I tacked them in with super glue.

The lights also needed clear bubble coverings. The kit came with 2 different sizes of googly-eyes. The eyes needed to have the backing removed. I kept dropping them, and they are incredibly hard to see. They too were pretty close in size, but there were a few that didn’t fit as well as I would have liked. I use super glue to place these. Of the entire model, I am most disappointed with how well I executed these, however they are a small enough detail that I think it looks okay from a normal viewing distance.

I assembled the remaining components; Hull, wheel-house covering, upper nose, and observation window structures.

I now have my own recreation of the Nautilus that I can enjoy.

Lego CAD

My first introduction to Lego CAD was an old program I used as a child on Mac OS 7 called Gryphon Bricks. While interesting, it didn’t captivate me very much. I was old enough that I was more interested in the Technic type of Lego set, and there were limitations to the program that I found off-putting.

Since then, I haven’t delved into the world of Lego CAD until this month. I bumped into Bricksmith while searching for something, and decided to download it. Brick Smith is an unofficial Lego CAD program. I read about it years ago, but never gave it a chance. I downloaded the newest version and was blown away. It uses an extensive library of Lego pieces (from ldraw.org) which include pretty much every Lego piece I’ve ever seen as well as the various prints for these pieces dating all the way back to the 70’s.

As an exercise, I built a T-16 Skyhopper. It went together pretty easily. Bricksmith has some convenient features, as well as some limitations. Everything is grid aligned, and you can move and orient pieces along these divisions. There doesn’t appear to be any concept of mating and piece intersection (which could be seen as a good thing or a bad thing). There is certainly lots of freedom. Once you pick a part, you place it, and you can move it using the arrow keys and rotate it, and select a color. You can copy and paste pieces too.

I’m not enamored with the coloring process. In this case, the problem is that there are so many colors to choose from, that finding them can be tedious.

What I found really neat was the concept of grouping. The pieces can be grouped into steps. Once you complete your model, you can then print the steps out. Step reordering and modification seemed pretty straightforward too.

As a whole, this program is pretty amazing.

While playing with Bricksmith, I spent some time googling to find out more about it, and ran into Lego Digital Designer (LDD), the official Lego CAD system. I somehow had never heard of it even though it was introduced in 2004, so I decided to give it a whirl as well. I played around doing some free builds, and then built a MicroFighter X-Wing.

The experience was very different from Brick Smith. At first, I was annoyed that all the color variation of pieces are displayed as separate pieces int he parts bin, but it actually made getting the correct pieces faster and easier. The other thing I love is that pieces automatically mate to each other. By dragging the piece around with the mouse, the piece automatically snaps to surfaces that are appropriate for mating. This can be faster. Unfortunately, I haven’t found a way of moving a piece directly with the arrows as one can do in Bricksmith. Generally, the auto snapping works well, and if you can’t get it to snap right where you want, usually rotating the camera can do the trick.

The program also knows when two pieces can hinge. The hinge tool is very impressive! After getting comfortable with that, I decided to do a bigger build to put LDD through it’s paces.

The Millennium Falcon. This is one of the larger Lego sets, at over 5,000 pieces. It is no longer sold, and as such, I never had the opportunity to build it in real life. This seemed like a fun way to dive in and see how the program handled. I had the PDF instructions and LDD on screen side by side.

I began constructing this set investing bits of time here and there. Along the way, I fought with some apparent limitations of the program (or it’s user).

However, I did finally complete the model within about a week’s time.

The automatic mating of pieces is a huge time saver when it works. Unfortunately, when there is an intersection problem, the selected pieces are transparent indicating that they can’t be placed. I wish it would highlight the intersection problems in red as it can be difficult to discern where problem areas are. When there are alignment issues, the program is very strict. There are no integrated physics, so hinged pieces don’t fall into place, but stay wherever they are placed. All of the exterior sheets of the Falcon had to be hand adjusted in place to make it fit together.

In some cases, the strict alignment prevented me from following the instruction precisely. In the example above, the hinge pieces are not allowed to bend beyond 90 degrees. In real life, you can forcibly bend them a bit further allowing this configuration shown in the instructions on the left. On the right, you can see that the holes are just barely misaligned, preventing the axle from being inserted.

In other case, I was probably too hasty in finding the proper alignment for elements, and improvised modifications to the model. In the above image, you will note that the angled wing shapes had to be shortened because they were interfering with the adjoining side. This could probably have been resolved by manipulating all the joint angles.

Overall, the tool seems very powerful, and fun. LDD is easy enough to use, that my seven year old can build things on his own, for example, this small Millennium Falcon. The hinging tool and part placement is intuitive enough that he only needed to observe me using the tools a few times to get it, and then be able to do it on his own.

One thing to note though is that some of the part categorization in LDD seems illogical (or at least, not how I would do it). There is a category that appears to be the catch-all for hard-to-classify pieces, and I find myself sifting through there quite often for specific things. Also, one category with an icon of a small wing is in fact home to flat angled, round, and curved pieces, and not just wing shapes which I find bewildering. They were kind enough to include a search feature that lets you filter by part number, size or description. I have had multiple instances where searching by part number provided by the instruction yields no result, yet I could find the part by visual searching through each category.

It’s also been fun using these programs to be able to build sets that are no longer available. While LDD has an easy-to-use UI, and fancy mating and hinge logic, Bricksmith has a superior part catalogue and flexibility for piece placement.