[RELEASE] LCARS FrontEnd for ActionTiles, DakBoard, EnvisaLink, and other Web Controllers

Description:

This is a Star Trek LCARS themed HTML/CSS/JS wrapper for the ActionTiles home automation interface for Samsung SmartThings. LCARS stands for Library Computer Access/Retrieval System, and is the primary interface for all control and information systems in The Next Generation era of Star Trek television shows.

The wrapper uses iframes to embed ActionTiles panels within the unified interface. This also allows additional applications such as web controlled media playback software (Kodi, Roon, etc) or web controlled devices within your home to be embedded in the LCARS interface.

You can view a demo of this in action at http://www.lcarsatalaya.com. You won’t be able to view the ActionTiles Panels as you won’t be authorized, but you can see how the LCARS panel works.

Requirements:

  • Tablet, PC, or other web enabled device with a web browser with a resolution of 800x480 or higher
  • ActionTiles Account
  • Local Web Server Device such as a Raspberry Pi, LAMP or WAMP stack, etc, or host on a public facing website if you want to be able to access the site outside of your home environment. This can also be loaded directly from the device you plan to use as your control panel by opening the index.html file in the browser. The directory structure must remain intact.
    Note: If you intend to directly embed your Google Calendar or other “shared link” type data that does not require authentication within the LCARS interface, we strongly recommend that you do not host externally

Optional, but HIGHLY recommended:

Screenshots, Pictures, and Videos

floorplanlcars
Screenshots on a portrait screen with Roon Audio embedded:
2018-02-03%2019_53_51-Roon 2018-02-03%2019_55_19-WallPanel%20-%20TeamViewer%20-%20Free%20license%20(non-commercial%20use%20only)



2018-02-03%2019_56_44-WallPanel%20-%20TeamViewer%20-%20Free%20license%20(non-commercial%20use%20only)

Updates:

February 6, 2018

• Updated display to percentage. No longer requires user to adjust to their monitor size.
Thanks @kembond from ST community.
• Updated sounds. Now the menu uses several different sounds, as compared to one sound only.

Appreciation

@kembond
@Synthesis
@kewashi

Downloads

19 Likes

Updated ReadMe incoming. :slight_smile: Be patient please.

3 Likes

Really like how you’ve taken an already great product packed with features and managed to add even more functionality. Just a few questions: can the style changes to suit my own tastes using custom CSS? Could this be hosted hosted by a third party such as AWS or even companies that do web hosting such as GoDaddy? Haven’t looked at the code yet but seems like it’s technically possible, but wondering if there’s any security risks in doing so? I’ve seen lots of people going off on Reddit about how dangerous using iframes can be yet I’m still not clear on why.

2 Likes

I thought custom css and such wasn’t possible in the newest release of action tiles.

Never mind. I just read the description again. Now I get it.

1 Like

Good Morning… to answer your question, @GRClark… the CSS can be modified, but at this point, that is up to you, to do. At the moment, this is just a starting ground for those who want a little more flexibility, but love the way ActionTiles looks and performs. I am willing to help anyome who needs the assistance when it comes to modifying the CSS, HTML, or JS. As it is certainly possible to make this look however you want, and edit any images or sound clips.

As for hosting, I am currently hosting the demo, on GoDaddy. So yes, it’s definitely possible… HOWEVER, I would not suggest hosting externally IF you use RTSP as the camera feed… it’s not the iframes that cause a security issue, it’s how the RTSP feed is called.

In my sample page, I used an outside camera, and created a custom user and password, so you guys would be able to see an example of the RTSP cameras working.

1 Like

The security concerns with iframes are primarily related to the way you set them up in their div within the HTML. RTSP cameras and some insecure sources rely on authentication parameters being passed via URL. So, you may see rtsp://username:password@cameraIP/path … Anyone can access your camera when that happens, and if the credentials you supplied are admin credentials, they can change settings. There are other security concerns such as site impersonation and the like, but iframes can’t be hijacked without having access to the source site’s code to update the URL in the code that the iframe points to.

An iframe is literally just a browser window embedded in a website which is viewed in a browser window. You still have to add a URL to view said website, but there’s no address bar to type it into, so you put it in the code and it becomes a page that always loads due to that iframe.

I worked with @Evasilisin yesterday on my own LCARS project here at home (the tall portrait screenshots above are mine) to adjust the CSS for more vertical space, make tweaks to the way DAKboard works, etc, and then in return I wrote the documentation you see above. In the future I’ll be expanding the documents with more “Custom Tweak” stuff I find and change in order to add additional features and the like.

1 Like

I installed this on my PI. Loads and runs ok. I added one of my ActionTiles screens to it. First time I went in it asked for my login info which was expected. But if I close my browser, go back in I have to relog into ActionTiles. Happens every time. Is there somewhere I need to store that info?

I’m running on Pi as well with Chromium browser… no issues for me. It reboots and all, and saves actiontiles. Their cookie is good for a decent amount of time, @tgauchat would have exact number probably lol. Maybe your browser isn’t set up to keep the cookies and other data ?

I’m running within Chrome in Windows 10 on an Intel ComputeStick. I also do not have issues with stored cookies and the like. There’s nothing within the code that would accept a username/password. The iFrame will load whatever URL you ask it to, such as your AT panel, and then from that point forward it relies on the browser cookie to remember you. If you are clearing cache when the browser closes, this will likely purge the cookies.

1 Like

Running Chrome also. Tried it on my laptop and my window tablet. Same result. I can go to Actiontiles directly in the browser and not have to login. Could there be some setting in my web server. I really never used it much before.

Just tried it on my Android phone using Chrome. Same result.

What is the web server software you are running it on?

Apache2 Debian.

I just tried things using Edge. That seems to work fine. So it must be something in my Chrome. I do have cookies turned on.

2 Likes

Glad you figured out the culprit… well, sort of. It’s within Chrome, you now know that much. Post a pic when you have your setup running.

1 Like

So I have mine all finished using Fully Kiosk Browser and I must say it’s friggin AWESOME !

I haven’t been this stoked in years — ya doesn’t say much but hey I’m retired.

I made a few tweaks but the one I love a lot is in the title bar section where LCARS or whatever menu link you are on. I tweaked mine to add STATION to that title so Security shows as SECURITY STATION or TRAFFIC STATION and so on.

If anyone wants to learn how to do that look at https://www.w3schools.com/cssref/sel_after.asp

Fully Kiosk Browser is at http://www.ozerov.de/fully-kiosk-browser/ if you don’t have it and it’s only for Android Tablets.

5 Likes

Oh and it’s running off my Raspberry PI 3 – Raspbian GNU/Linux 9 (stretch)

1 Like

Nice setup!

1 Like

I’m pretty happy with it… thanks for sharing this. Now I need to get Picard saying “Make it so” !!!

1 Like

That looks great! How did the documentation work out for you? Any issues or questions during the process?

Is it possible to tweak ActionTiles styles/colors via userscripts and Tampermonkey? I had heard of userscripts a long time ago but my first use was the Lowes price checker mentioned in these forums. Since then I found one script to tweak the weekend colors in my google calendar and one that embeds the camel^3 chart into amazon product pages.

2 Likes