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

smartthings
project_dashboard
actiontiles

(Eric Vasilisin) #1

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


Screenshots on a portrait screen with Roon Audio embedded:



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


ActionTiles Dashboard Custom styles
[RELEASE: v6.7] ActionTiles (formerly called "SmartTiles V6")
[RELEASE] HousePanel Dashboard Beta 1.0 Under Open-Dash Brand
Huge Recessed Wall Mounted Tablet
(The Viking AKA "Holy Crap You're a Giant!") #2

Updated ReadMe incoming. :slight_smile: Be patient please.


[RELEASE] Honeywell / Ademco Vista 20P Integration
(Gene Clark) #3

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.


(Joe) #4

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


(Joe) #5

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


(Eric Vasilisin) #6

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.


(The Viking AKA "Holy Crap You're a Giant!") #7

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.


(JIm) #8

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?


(Eric Vasilisin) #9

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 ?


(The Viking AKA "Holy Crap You're a Giant!") #10

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.


(JIm) #11

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.


(The Viking AKA "Holy Crap You're a Giant!") #12

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


(JIm) #13

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.


(Eric Vasilisin) #14

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.


(Scott Grayban) #15

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.


(Scott Grayban) #16

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


(Eric Vasilisin) #17

Nice setup!


(Scott Grayban) #18

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


(The Viking AKA "Holy Crap You're a Giant!") #19

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


(Kevin) #20

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.