Touchscreen Interactive Multi-Map Wall Console, Star Trek LCARS Style.

The Project:

Welcome dear reader. M.C.A.R.S - Mapping Control & Awareness Response System using HTML. A two part layered Multi-mapping system installed in an interactive touchscreen wall Control panel. This is a project that has a lot of parts, but is something where you can use a single part, some of the parts, or go all in and make the whole mapping and touchscreen wall console. If you haven't done so already, grab a snack, settle back and watch the attached video demonstration to see all of the features in action. So here are the nuts and bolts of the system...

Part One: Using Windows OS and HTML coding, the system monitors and interprets live data (Awareness), including road/air traffic, weather, space activity, and potential environmental threats, and responds in real time response through live data, visual indicators and tracking. Integrated within a Star Trek LCARS (Library Computer and Retrieval System)-style interface, this System transforms raw data into clear and actionable information, giving quick understanding and effective decision making. This multi-mapping console allows users not only to see what is happening, but to plan/respond to it immediately and with precision as well as having aesthetic and fun elements too.

Part Two: is all about Star Trek using an Android emulator. This includes multiple interactive deck maps of some of my favourite starships which are full of graphics and ship data. It also acts as some visually pleasing digital wall art. There's also a smart home device dashboard, a world clock map, and three Star Trek based games to play. Pretty much all built from the ground up, it serves as both a productive and fun system to use.

So what's actually included:

Productivity Maps (Windows OS)

1. Lightmap: A simple sunlight chart map that visualises global daylight with a 'Time' slider.
2. Reachability Map: This gives an estimate of how far you can travel (walk, cycle, car) from a chosen location.
3. Global Ops: Use pinch to zoom and a location search bar to see road, terrain, satellite maps, as well as solar activity, Weather, ISS tracking, Earthquakes, Asteroids and power grid usage.
4. Natural Event Tracker: Event map system for tracking Earthquakes, volcanos, wildfires, severe storms, cyclones, floods, landslides, drought, snow and dust storms.
5. Transport Ops: Includes a detailed road map, live London bus data, traffic conditions, and live London Underground arrivals data with a toggle button to see or hide the train lines on the map.
6. Traffic surveillance: A map with active traffic cameras, click on one and see the camera feed (now updated to show video feeds)
7. U.K Weather Grid: A simple global weather map with local 5 day forecast with dark/light modes (map courtesy of OPENSKY).
8. Solar System: An interactive Solar system map from NASA (as above, I only made the border styling)
9. Asteroid Tracker: Another NASA map system featuring Asteroid data, which I wrapped in a custom boarder.

Star Trek Maps (Android Emulator)

1. LCARS Dashboard: Home page with clock, date, weather which opens the following.
2. Smart Home Dashboard Map: Interactive smart home control interface/map of my apartment.
3. World Time Map: Self made stylised world map showing the time of multiple chosen global locations.
4. U.S.S Voyager: Detailed interactive deck map full of graphics, images and info of the ship.
5. U.S.S Enterprise A: Detailed deck map and key for main areas of the ship.
6. U.S.S Enterprise D: Less detailed (work in progress) of the 'D'.
7. U.S.S Cerritos: A fun interactive deck map of the 'Lower Decks' Cali class ship full of GIFs, images, graphics and ship data.
8. Starbase Data: Station map plans of one of Starfleet's star bases and space dock. All of the above also serve as digital wall pictures.

Some Homemade Games:

1. RED ALERT Borg Attack Game: Borg cubes are attacking Sector 01 (Earth). Shoot down all the Borg cubes/spheres using your map based tactical station. Think digital whack-a-mole, Borg style. Careful though, more than 15 cube on the screen at one time, you loose. And they are sneaky, so you may have to move the map and shoot the cubes in outer space.
2. TACTICAL ALERT: Klingon Attack: Rouge Klingons are on the attack. Using another self-made map with a little Starfleet styling. Think Klingon space invaders.
3. DELTA ATTACK: Absolutely nothing to do with maps, just pure indulgence. A side scroll shoot-em-up with Voyager fending off Species 8472, Kazon, Klingons, Romulans, and a large Borg cube boss at the end of each level.

The Inspiration:

Well, I travel a lot, and I'm a Trekkie, but here it is. This all spawned from binge watching all of the Trek movies and shows then getting an idea of making an LCARS starship deck map from an acrylic sheet, stenciling and backlit to hang on a wall, something i didn't get around to. With that, I also wanted to make a world map to draw, frame, backlight, and if i got around to the LCARS one, I wouldn't have room for both.

Also, I do actually travel a lot, all around the U.K and beyond, and I have friends all over the world. I have apps on my phone for my needs, but there are times I wished I had a bigger screen to plan my journeys along side my phone, also without annoying ads, cookie popups, and in-app purchases. As an example, I could be getting ready to go somewhere, so I'd have to open my laptop, unless its packed, or scramble for my reading glasses to see the details on my phone apps. Then there was one more thing, I wanted to take the challenge and learn HTML, CSS, JS coding. Bottom line, it all came together making custom maps to suit my needs, and having the fun and ascetically pleasing pictures I could choose to display when I wanted, all in one space. A 40 inch TV mounted in a false wall with a touchscreen frame would give it the extra Star Trek look and feel. A simple idea for a wall hanging picture soon snowballed into this mammoth project, and I'm pleased it did.

What's Involved:

This was a 5 month labour of love project, to do all of the digital artwork, animations setting up the Windows and Android interface, and all of the learning from scratch, the HTML coding, but don't let the timeframe put you off. If coding or digital drawing is not in your skills tool box, fear not as a lot of the code, pictures, files needed are included below. I designed the web apps (Client-side web applications) for touchscreen use, but they can all be used with a keyboard, trackpad, and/or mouse, in fact, I made and tested everything on a laptop. This is HTML coding where the map web apps run straight from your browser so they can access the live data they need. I'm still very new to this type of coding so I have left helpful notes within the codes below to help you customise them to how you want. You can use the map apps/code as they are, you can remove the LCARS styling if you like, but my hope is that you will learn from the code, play about with it and learn what the different parts do. I should also mention the wall panel, this is essentially a backward facing, near full height bookcase with supports and a recess for the TV, a shelf for the components, and a flap to hide them. I mentioned this took me around 5 months, but with what's included in this Instructable, you can build the full system in a fraction of that time. So if you're interested in a single map app or game, the wall unit itself, or the whole project... lets dive in.

Wall Unit:

1. 5 x 2.4 meter 36mm x 62mm CLS timber
2. 2 x 2.4 meter 22mm x 35mm softwood timber
3. 5 x 610mm x 122mm x 9mm MDF (or plywood)
4. 1 x 610mm x 122mm x 3mm hardboard sheet
5. Paint of your choice
6. 2 x 50cm piano hinges
7. Magnetic latch
8. Speaker/air vent grilles (also helps with Wi-Fi signal for the mini PC)

Tools:

1. Pencil
2. Ruler
3. Tape measure
4. Spirit level
5. Straight edge (for marking out the sheet wood)
6. Jigsaw
7. Handheld circular saw (or handsaw)
8. Nailgun (or hammer/nails)
9. Hammer
10. Paint brush, 9" roller and paint tray.

Equipment:

1. Big screen TV (I used a 40 inch one)
2. Mini PC (mine is a refurbished Dell OptiPlex 7060)
3. HDMI or DisplayPort to HDMI cable
4. 40 inch, 10 point Infrared touchscreen frame
5. Optional: Soundbar with HDMI or Optical cable
6. Grey tinted acrylic sheet, cut to size to cover the TV with a little 5mm extra around the edges

Software:

1. I am using Windows 11 with MSI App Player (Bluestacks) Android emulator. Windows handles the productivity maps, and Android takes care of the Trek side of things.
2. A paint/draw program for the artwork. I used an XPPen Deco 01 V3 Drawing Tablet for all of the drawings/GIF frames.
3. Notepad or Notepad++ for writing/editing the coding
4. Ezgif, Adobe Express and/or a video editor of your choice. I discovered that for full screen GIFs (LCARS flashing buttons etc.) Ezgif, is a great tool, but even at best quality, the end results come out a little blurry (It's good for a lot of other things though). So I started used Shotcut video editor to make the GIFs instead, and the results were much better.
5. API Keys: Most of my productivity maps use an API key. All the ones I use are free to use with a decent amount of calls per month. If you just want to copy and paste my codes, you will need to get your own API key from your chosen service. I will make a note in the different codes to where you should put yours in. Treat your API keys like you would your bank card pin, never share it.
6. Winaero Tweaker for desktop customising.
7. And you need a web browser. Choose a well-known one like Google Chrome (recommended and what I use), Firefox, Safari or Edge, based on your platform.

Reference material:

1. For the coding, I found Brilliant.org, Codecademy and W3Schools very useful for codding beginners like me.
2. And for the Star Trek stuff, there is a huge amount of reference material that can be found online.
3. And I want to say ChatGPT. I did use this to help with code debugging when I couldn't figure it out for myself of find the answers online. But, 50% of the time I would send it a partial working code, it would send a good fix back where I could learn from it. But other times, even with specific detailed prompts, it would send me back completely rewritten code that didn't work at all. Very frustrating, so use with caution.

A few things to mention about the overall design of the wall panel and UI. I designed the wall panel to be near full height because I have edge lighting around the apartment ceiling and wanted that clear. The depth was kept shallow so it had a small footprint but just deep enough for the TV and components, and would be anchored to the wall. The location by my front door was a perfect spot as this was wasted space and also the perfect location to use the map functions when I'm getting ready to go out.

For the UI (user interface), on the Windows side, I mainly wanted to use Windows only resources with the exception of Winaero Tweaker to customise the map shortcuts, and a live video wallpaper program for an animated LCARS style desktop I made which would have the productivity map shortcuts. Android was a little different as I used a launcher app called Total Launcher. This has all the features I needed to make the interactive starship maps, world clock displays, and full smart home device control, as well as using all of the LCARS designs I made along with sound effects and animations.

As I mentioned at the end of the intro, I designed interactive maps to be used via touchscreen, but these can also be used just as easily with a keyboard trackpad/mouse. Each web app on Windows were coded to open full screen (no browser/address bar or taskbar) to give them the full screen app look. A few tweaks were needed to achieve this which I will walk you though, below.

For full screen, the browser need to open fresh because if it's already open with active tabs, the app will open up with the taskbar/address bar showing. There is something important to note, especially for touchscreens. I have added 'EXIT' buttons to each one of the productivity maps because when they open full screen, without a keyboard, you can't close the full screen apps. The exit buttons closes the browser to overcome this issue., Not an issue with a physical keyboard, simple press the Windows button > right click the browser in the taskbar> Close window.

The majority of the web apps will open on any size computer screen and will display correctly, but some, especially the games, will need resizing in the code for your chosen display size (don't fear, I will walk you though this too). The HTML codes work best with PC browsers and won't display well on mobile devices, as I purposely designed the apps for large screen PC use only. That's not to say they can't be used on mobile devices with some code tweaking. As I mentioned, I am still pretty new to this coding game and still have lots to learn, but I'm pleased with my results.

As I mentioned earlier, I essentially made a basic backward facing bookcase with a recess and a shelf. here's how I it was made...

1. Cut 4 lengths pf the CLS timber to size, in my case, 230cm. Then I cut two 9mm MDF panels 106cm x 19cm, then glued/screwed them to the CLS lengths to make a top and bottom to make the frame. I also cut and attached a thing MDF length to what would be the back of the unit. This would be used as the anchor point to screw to the wall.
2. After standing the frame up and putting it into position, I fed through an power extension lead for the components, then screwed the unit to the wall using a thick screw and rawl plug. I cut the sheets of MDF to size for the front, put these to one side, then trimmed the leftover pieces (19cm wide) and nailed them to the left side of the frame. the right side didn't need side panels as it was against a wall.
3. For the TV recess, I made a separate box with some more MDF sheet, a back panel, and four sides. this was sized to be a tight fit for the TV. The sides were then covered with narrow strips of hardboard. these were 6mm higher than the side panels as the 5mm acrylic sheet would fit in inside with a press fit (the flexibility of the hardboard allows for this). Air/heat vent cutouts were made in the back panel and what would be the bottom of the box. A wood spacer was also made to hold the top of the box firmly against the wall. I also made some holes in the back panel to feed cables through.
4. The box was painted black so it wouldn't be visible behind the tinted acrylic. Only the edged needed to be painted, but I did the whole inside.
5. Shelf supports were cot from the softwood timber lengths and fitted to the frame to the height I wanted. The height of the screen dictated the height of the lower shelf. A piece of MDF was cot to make the lower shelf, and the recess box would sit on the upper shelf supports.
6. The front panels were nailed to the frame starting from the bottom, then making the flap, two narrow pieces each side of the recess, and along the top of the frame. The flap is held on with two piano hinges and a pair of cabinet door hinges so the flap can be held open at a 90 degree angle.
7. The unit was finished of with three coats of grey wood paint to match the colour of the walls. Then some round air vent grilles were fitted into the holes in the flap I made using a Forstner drill bit. A couple of screws going through the recess box into the shelf supports helped keep the box in place.

With the paint dry I plugged in the HDMI and display cables into the TV then placed it into the recess box, feeding the cables through the holes I made. The protective covering was removed from the tinted acrylic, the touchscreen frame assembled, then the frame was attached to the acrylic. The touchscreen frames USB cable was fed through the the wall unit, rested the acrylic along the bottom of the recess box, then lifted the top and pressed it home along the top of the acrylic sheet/touchscreen frame.

This was actually one of the last project jobs I did, as I didn't want to make it until all of the coding and graphics were done first.

A quick note on the web apps themselves. I made all of the Star trek maps, games and most of the productivity maps from scratch, but the Live Tube map and the NASA stuff are made by someone else, I simply wrapped these in an LCARS styling using HTML code as these were apps I already use regularly. All of the productivity map apps are stored and run on Windows and run in a browser (Chrome in my case). These apps uses services called Leaflet and MapLibre, which are open-source JavaScript map libraries which gives access to interactive maps to use in your projects. The maps in the games, world clock and smart home dashboard I drew myself.

Most of the buttons in the maps/games are toggle buttons (press On/press Off) which saves in screen space and also stops cluttering the map with all the features showing at the same time, becoming cluttered.

Attached at the end of this step are the supporting files for most of the maps I have, all the ones I made myself, and one, the Asteroid Tracker Map, that is a web service made by NASA, but wrapped in a custom border with additional data boxes added (the live tube , Exoplanets, Earth and Solar System maps are the same code, just with different URLs added). They are in Rich text format, so download them, make a My Maps folder in your Pictures folder, then cut/paste the map files into a .txt file (use Notepad etc.) then save them as a .html file in the maps folder. They have to end in .html, for example... Global Ops.html then click on one to make sure it opens. We won't make desktop shortcuts for the maps just yet, so open the maps from your My Maps folder. If you want the button press sound effect, download the keyok3 sound file, and move/save this in the same My Maps folder, we'll set this up later. The NASA map background GIF won't upload here for some reason, so I'll include it at the end of the demo video for you to screen record and convert to a GIF file, Just remember to change the file path in the code. That's the main part of the Windows set up done.

Setting up the games is pretty much the same process, but there are a few tweaks to make everything open full screen (no taskbar or address bars showing), sound effects when the apps open, and to customise the shortcuts so the blend in with the LCARS theme (which is optional)

UPDATE - 22rd April 26: I have updated the Transport Ops Map to now include all of the London Underground train lines. The buttons for these are toggle buttons to show one line at a time. Click on a station to get live train arrival times.

UPDATE - 23th April 26: I have also updated the Traffic Surveillance Map so instead of still traffic camera images, it now shows looping video clips that update every few minutes.

UPDATE - 25th April 26: This update is to mention that I have added an Air Traffic Map. This uses a free Air Labs API key and shows a global map to show current aircraft locations. I have limited it to show U.K and Europe airspace. Click on a plane icon to see a popup of the planes data (speed, altitude, destinations etc.). Download the text file and the Air Space Background GIF above if you want the LCARS look.

For the maps that use personal API keys (Traffic, Weather), you will need to open the map files in Notepad or Notepad++ and enter your own keys. For example, you need to go to traffic data website for your area, create a free account, and there you will receive your free API key. Copy this and paste it into the code where it says INSERT_YOUR_API_KEY_HERE.

To gather the data, most of the map apps uses API keys, some are built into the end points so you don't need to do anything, but for things like the transport map, I use Transport for London (TFL), TomTom, and Thunder (for the trainlines map). TomTom and Thunder are global maps, where as TFL is for London data only (not much use to you if you live in in the U.K), but this can easily be replaced with a transport API service for your location. You’ll need that provider’s API key, endpoints, and data format, then update the fetch() links and how the data is read (lat/lon, arrivals, etc.) to match—same logic, just different data source behind it.

Example: Replace TFL with New York (MTA-style API)

Original (TFL):

Replace with (example MTA-style endpoint):

Then adjust how you read the data

TFL:

MTA-style:

Marker example

In short, swap the URL, add the new API key, update the data fields (lat/lon/names). and you will have the same system with different data feeds.

Once the apps are working, there’s plenty you can tweak safely to change how it looks and behaves. You can change things safely like size, colour, and pulse animation speed etc. You may not want LCARS style borders and want something else or leave them blank, or different shape buttons or colours. Some customisation examples are...

Main CSS (Style) elements:

1. left: 190px; - uses the left hand of the screen as a starting point. the higher the number, the further to the right something is positioned.
2. top: 10px; - Starts from the top of the screen. The higher the number, the lower something goes.
3. color: #12345; - Changes the colour of text on a button for example
4. background; #54321; - changes the colour of the button itself

The hashtag is for colour hex codes. Open a drawing app/program, select the colour picker, choose the colour you want, copy the hex code, then paste it into your code. For basic colours, you can simply leave out the #, and write the word Black, White, Red etc. You can adjust colours, size, position, just keep position: absolute.

Safe vs Risky Changes:

Safe:

1. Colours
2. Text
3. Sizes & spacing
4. Fonts
5. Panel styling
6. Positioning

Be careful:

1. JS functions (update(), createCircle())
2. Map setup (map.on("load"))
3. API calls

This setup lets you heavily customise the look without touching the core logic, so experiment freely. Worst case, it looks awful… and you change it back. And if you use custom elements like pictures, sounds etc. especially if you use mine, make sure the file path is correct, for example, I use C:\Users\steve\MyProject\sound effect.wav, but your user name might be John or Jane so you would need to change this. A quick note on using sound files, it's best to use WAV files as some browsers may not play nice with MP3 formats. Programs like Audacity audio editor is a good free tool to convert MP3s into WAV files. Open your MP3 file, then use Save as or Export and select WAV.

Two of the games use map backgrounds I made using a couple of paint programs, MS Paint 3D and Paint.net. I made both light and dark versions. The maps and games have a light/dark mode toggle button which switched between a dark map and a light one. Both MapLibra and Leaflet have different maps to achieve this, but as the maps in the games, world clock and smart home apps don't need real world map coordinates, I made my own instead, which was a lot of fun.

Like the productivity maps, save the game text files found below, into your My Maps folder in your Pictures folder, then, edit each file name so they end in .html to make them work.

The games use pictures, GIFs and sound files (assets) and the file paths for these are imbedded in the HTML code. These are for the sound effects, ships, projectiles, title cards, maps and borders. Like the game text files, download and save these in your same My Maps folder. As I mentioned in Step 5, you will probably need to change your user name in the code. Best way to be sure the file paths are correct is to open a game in Notepad, then go to your My Maps folder then right click on the game you are working on, the click on Copy as path then go back to Notepad, find the existing file path, select it including the quote marks, then paste in the new file path. Make sure to change the back slashes to forward slashes too.

As mentioned in the design aspects, I made the games to fit my 40" screen properly. I made them on my laptop, fitted everything nicely, then opened them on my big screen... things didn't fit right, so I had to resize a few things (I was, and still am learning to code), so using the tips in Step 5, you may need to resize things to fit your screen. Once I find a way to have things resize automatically, I'll make an update here. Full disclosure, I managed to do this with the productivity maps, but couldn't get the same thing to work on the games. Using the Borg game as an example, you might see the background starfield and the map not fitting the borders correctly. this part of the code will adjust the map size...

And the following will change the starfield background size/position...

Play around with these numbers in your copy of the game file, once you're happy, save it as the main file.

So here's how I drew the global maps.

1. Find a global map image online and save it. Open it in a paint program/app that does layers. I used Paint.net for this, so in front of me is the saved image. I added a blank layer over the top of the map, then traced around it with a black pencil tool for a Light Mode map, white pencil tool for Dark Mode maps (zooming in/out, and the Undo tools are useful here). When the tracing is done, remove the map image so you're left with just a stencil you made.
2. Fill the background (outside of the continents) with a light cream/white, and dark grey/black to fill inside the continents for Light Mode. Do the opposite for Dark Mode maps.
3. Now choose the Gradient tool and go around the outer edges of the continents, light blue for light maps, warm white for dark maps (or pick your own colours). From there I saved the maps to my Picture folder.
4. Here I opened MS Paint 3D as I like using this program, then inserted one of the maps and cropped it if it was needed. Here I used a selection of tools and colour shades to give the maps some light terrain, texture and saved them as light/dark maps. These I used for the world clock map later on. Then I continued to add an LCARS styling to fit the game theme and saved them in the My Maps folder as Light Game Map and Dark Game Map.

So, download all of the assets, the attached pictures above and the rest of the files below, into your My Maps folder. Open the games in Notepad, Open the My Maps folder and right click each file, click Copy as path, then in Notepad, replace the file paths with the ones you just copied. The background GIFs are too large to attach here, so they are included in the attached video for this step. Play the video full screen, make a screen recording of each one, open each one in a video editor like Shotcut, trim the ends so it loops seamlessly, then export the video as GIF. Save it in your My Maps folder, copy the file path and add it into the game code. Or you could give making your very own a try.

Next, we will finish off putting the Windows system together.

We now have our maps, games and all of the assets set up, we now need to make the Windows desktop look loke an LCARS UI with a video wallpaper, map and game shortcuts, and make them all open full screen.

First thing, the video wallpaper. This was a case of making an LCARS design I was happy with, making button place holders the right size for a shortcut to fit in, then making a frame in MS Paint 3D, then saving it in a GIF folder. When the frame was finished I would use Save as, and name it '1'. Next I'd change a button colour, ship graphic positions et. then use Save as, and name it '2'. I'd continue this until I have all the frames I wanted. I opened the Shotcut video editor, dropped all of the frames into the timeline, adjusted the duration of each frame, then export it as an MP4. I downloaded Lively Wallpaper then simply selected my new video wallpaper for the desktop.

Next we make the function to make everything open full screen, and even add an opening LCARS sound effect. we create a simple VBScript file (.vbs) script that acts like a launcher/control system. You run it with a command like map6, and it matches that name to a specific HTML file, plays a short sound, waits a moment, then opens that file in Chrome full-screen (kiosk mode). In other words, it’s acting like a control panel that turns short commands into full-screen maps or games. Here is what my file looks like...

At the top we add our sound file to the sound path (the sound I use is attached below). Then You add all of your map and game file paths here, then give it a kind of nickname, map3, klingon etc. Save this in your My Maps folder and call it Launch_Map.vbs (name it what you like, but it must end with .vbs).

Now we can make the desktop shortcuts. Start off by right clicking an empty area on your desktop, select New, then Shortcut. Now what you need to add into the Item Location, you dont add the map/game file path, but a path that starts the .VBS file, so for example, the Global Ops map path would look something like this... C:\Windows\System32\wscript.exe "C:\Users\steve\Pictures\LCARS Wall Display\My Maps Rescaled\Launch_Map.vbs" map6 (your user name will be different unless your name is Steve, of course), but do you notice the maps nickname at the end (map6), that's why we give it a nickname. Click Ok > Next > then name your shortcut. Drag the shortcut to where you want it over your video wallpaper. It doesn't quite suit the styling, but we will sort that out, next.

There's a few ways to do this, but the way I chose to make the shortcut match the LCARS style was this. First, I opened 3D paint, started a new project, then set the canvas size to 256px x 256px. I made a simple small black dot > Magic select > dragged the crop bars around the dot > then hit Done. Next I saved it as Image, checked the Transparency box and clicked Ok. Then I opened a web app called ICO Converter, added the image I just made, checked all the size boxes, then hit Convert, then Download. Then I right clicked the shortcut> Properties > Change Icon > Browse > then chose the new ICO image > click Ok > and OK again. With a virtually invisible shortcut, the icon name needed a little tweak.

I wanted to change the font style and make the text black (default is white)You cannot change the font style or colour for Windows system text with a system setting, so two things needed to be done to make the shortcut names match the LCARS style.

First the colour, right click the desktop > Personalise > Background > drop down the Personalise your Background box and choose Solid colour. Choose white then exit the window. As we are running a video wallpaper, we don't notice a change... except for the text which is bow black'ish. To finish off, press Win +R, type sysdm.cpl, and tap Enter to open System Properties. Click the Advanced tab > Settings > Visual effects > then uncheck the Use drop shaddows for icon lables on the desktop, > click Ok. Now we have fully black text.

Second job was to change the font. I used Winaero Tweaker, a free Windows OS tuning app that has a lot of useful tool, one of them, changing system font. Open it, scroll down to Advanced Appearance settings > Use the following font > Change system font > then choose the font style you want and click Ok. I chose Impact as it's the closest font to the typeface used in the LCARS displays. Another useful tweak is to get rid of the little shortcut arrow icons. While in Winaero, scroll down to Shortcuts > Shortcut Arrow > No arrow. All that was left to do was to close the app, then make slight adjustment to the shortcut positions, putting the text in the bottom right (or left) of the video wallpaper buttons, and renaming the shortcuts so they were all uppercase to give it the full LCARS look.

There was a couple more shortcuts I wanted to make, and that's for the Android emulator, and a system sleep one too, useful for a touchscreen... Winaero > Shortcuts > Shutdown/Restart/Sleep Shortcuts > then tick the function you want.

Another little tweak is to hide the taskbar. Right click the taskbar > Taskbar Settings > Taskbar Behaviors > Automatically Hide the Taskbar. An if you open Explorer, click the 3 dots near the top center of the screen, Options, then under Click items as follows, select Single click to make the UI experience more like a tablet. It takes a little getting used to, but it's pretty cool.

And that pretty much brings us to the end of the Windows setup. The next steps deal with the Android side of the MCARS console... the Star Trek stuff.

Now we move on to the more fun side of things. But to start, a little setting up is needed.

First off, download and install MSI App Player (or Bluestacks as they are almost identical as they are both Bluestacks apps), then make a desktop shortcut for it.

Open it up then open the Google Play Store, sign in and download the Total Launcher app. This is what's used for the map interface. We will set this for the default home app, but not until the end of the build. That's pretty much all that's needed for now, as all of the graphics needed to be created.

I mentioned in the intro that this entire project took best part of five months to put together, and a large part of that was the coding. But an equally large part of that time was to make all of the graphics (images, GIFS, text). Sure I could have downloaded some of the many ready made pictures found online which would have saved a lot of time, but I wanted the satisfaction of making my own, besides things like this is something I really enjoy doing. I did use online pictures as reference, because I wanted to get my Starship maps as close to accurate as I could (there is room for artistic license as the ships are fiction after all).

The Starship deck maps originally started off as digital wall art, but as I was drawing them, more and more ideas came to me to make them more entertaining and fun. I realise that drawing is not in everyone's skillset, so using free and paid for images is of course perfectly acceptable, and you're more than welcome to use mine. So here is the basics of how I made my graphics.

To start off I did use a side view image of a ship I found online, inserted it as a layer into a new paint project and traced around the outer shape on a second layer, then removed the picture to leave just a stencil, just like I did with the global maps for the games.

Next was to do all of the detailing, the deck maps themselves. This is where the XPPen Deco 01 V3 Drawing Tablet and good reference material came in very useful. This requires patience and a lot of use of the Undo tool, but it's worth the effort. As these deck maps were mainly going to act as wall art, the colour scheme and detailing were important to me, so settling for "that looks okay" wasn't good enough, I wanted these to look the best I could make them. And to give them the full LCARS effect, the main picture for each ship deck map, world time map and smarthome dash were used as frames to make full screen GIFs, flashing buttons, scrolling text, similar the the video wallpaper for the Windows desktop, but kept as GIFs which can run in Total Launcher. These were also made using the Shotcut video editor and exported as a GIF file.

Once the graphics were done, it was finally time to put it all together.

With all of the graphics made, it was time to put all in to Total Launcher and set up the UI. I will lay out the setup but I wont go into detail about Total Launcher (TL) itself as I have a TL Instructable that explains things in detail. SO There is a home page that had an LCARS GIF background showing a clock and date, a weather widget and the buttons that open the deck maps, world clock, dashboard. The buttons open windows (not Windows OS, but more like TL pages) that we create, and that's where we start.

1. Open Bluestacks then open the TL app, press/hold a blank area of the screen and make sure Edit is On. TL has default widgets and a few pages already set up. On the home page, press/hold to highlight these widgets and delete them. Next, press/hold an empty space until the page shrinks down and delete all of the pages until only the home page remains.
2. While the page is still shrunk down, tap the little mountain icon > Landscape > Image > + > Pick from Windows > and choose your home screen image/GIF from your Pictures folder. This will now appear in your TL assets library, tap the image > Stretch to fit screen > Ok > then click on the image to make it full screen.
3. To add elements like the clock, tap + > Graphic > Text > Default (it might also be named Do nothing) > the Cog icon > Text > Date/Time > tap on the text field where it'll say MMMM,d yyyy and delete this and type HH:mm (HH for 24hr, hh for 12hr) > Ok > then choose your font type, colour size etc. Then tap the back button once, drag the clock element to where you want it, tap the back button again to exit the element editor. If you want to add a date element, follow the same process again, but type in the date format of your choice.
4. Now we create the windows that contain the maps. Tap/hold the home background until the page shrinks down > Menu > Launcher Options > Resources > Window > + > enter the Starships name > Ok > then tap the + icon again to make the other windows for the other ships, world clock, smart home dashboard, tap the Back button 3 times then tap on the home screen.
5. Now we make the buttons to open these windows. As we have buttons already baked into the LCARS background, we follow the same process to make the clock, but this time in the cog menu, select Plain text and enter the maps/ships name. Tap Ok > Back button once > Play icon > Action > Window > select the map you want > tap Back twice.
6. Now tap the new button and you will see a blank window. Tap/hold the window > cog icon > Background > Image > + > Pick from Windows > then select your deck maps etc. You can do one at a time, or add all of your images/GIFS to your asset library in one go. Tap Ok > Check the Fit background to window box > then you can tap the Animation tab at the bottom of the menu. This is where you can choose the effect when the window opens and closes, as well as where on the screen it appears from and to, the speed, and sound effects. Add sound effects the same way you add pictures to your asset library. Also, use the Android browser and download font packs to use with your text buttons. To keep the overall Windows/Android theme consistent, I downloaded an 'Impact' font to use across the UI.
7. To make an Exit button to close the window, add another Text button, name it Exit > Ok > Play icon > Action > Launcher Action > scroll down and select Close a window > then select the window you want to close > tap the Sound option > choose your button tap sound effect > tap Back twice.
8. In my Voyager deck map, I have a map key, a bank of buttons along the bottom of the screen that, when pressed, brings up another window showing details about that section of the ship. These were done the same way as above, making a text button, naming it, giving it a button press sound, and opening another window.
9. World clock. This is another window with an 'Exit' button, with a global map I made set ad the window background. I then made a row of text buttons along the bottom of the map and used the Time/Date option in the text editor. But an extra step is needed to set the time for different time zones. In the text editor, tap Text > write HH:mm > now tap the Cog icon > Time Zone > then scroll down and select the time for the Country you want.
10. Smart home dashboard. This is another map I drew, this time of a birds-eye-view of my apartment, with markers pointing out where the smart devices are, a map key on the right hand side, and device control buttons along the bottom. If you are interested in this dashboard setup, I have a complete Smart home Dashboard Instructable for when I made an LCARS wall mounted tablet dashboard. Everything you'll need to know can be found there. I don't really need a smart home map for my modest sized apartment, but its a cool addition, and does show what's achievable for a much larger property without spending a fortune on a professional, dedicated system.

The images above are for Voyager and Cerritos ship data windows. If you watched the video, you'll have seen GIFs playing in the Cerritos data windows. I made GIF of show clips these from the show collection I own (I won't add them here in case of copyright issues).

And that is the setup complete. I would have liked to attach the full TL project, but mine is around 1.3GB compressed, way over the 25MB attachment limit, but once you're used to how to use Total Launcher, its kinda fun to set up. Once you have yours set up, go to the TL menu, backup center, and make a backup of your project.

I few finishing off jobs to complete the build. First off, make a few extra text buttons and use them to open some important apps. Tap/hold the text button > Play icon > Action > Application > then add the 'Bluestacks browser', 'Files', 'App search', 'Launcher settings' and 'Android Settings'. Now you can go to the TL menu > Launcher Options > and set TL as your default launcher, so when you open it, the LCARS home page will load.

As I made the entire MCARS UI on my laptop, I put the Windows My Maps folder, and a Total Launcher backup onto a portable storage drive and transferred them to the mini PC (with the mini PC using my same user name), set up the video wallpaper, added the shortcuts and set up Bluestacks/Total Launcher.

Then finally, it was time to fit the TV into its new home, connecting and feeding the cables through to the lower shelf, then a good clean with some screen cleaner. Next job was to remove the protective covering from the acrylic, assemble the touch screen frame, and attach it to the acrylic. A quick clean with some glass cleaner the line up and press fit the acrylic into the frame. The PC and soundbar were connected, everything powered up... job done.

This was quite an intense project at times, the trial and error of coding, getting the graphics to look the best they could, finding out the tips and tricks for all of the tweaks I made... but it was a fun, enjoyable and satisfying project too. I have found using my MCARS console very productive, informative, and continent to use, not to mention enjoyable too, and when friends and family visit, they all get a kick out of it too. I can't really say this is a complete project, because I see myself making new web apps and improving on the ones I have now. For example, the JamCam map, it shows a still image of the chosen camera from the map, but I know, and have seen that there are actual video feeds available, I just have not figured out how to add that... yet.

Make a single map project, a combination of the maps and games, of making the entire setup, there's plenty of things to try and I hope my project will give you the inspiration to have a go yourself. If your not a Trek fan, no worries, make your own designs and digital art, or choose your own map features that are helpful to you. I will make another Instructable to accompany this one where I will show you HTML coding in more detail which I will link to here, when it is published.

Thanks for reading, and happy making.