[RELEASE] HousePanel Dashboard for SmartThings and Hubitat

I chose the tile editor as it seems to be the easiest solution. But I could not find how to “commit/apply” after hiding the element. There is a “okay” button below the edit window. When I click it, unwanted element goes off. But to return to the main operation screen I hit “operate” button , all changes are gone…

How shall I “submit” changes ?

Btw, these elements are only information and are not needed. So it could be better if you remove them by default.

Your main directory file is probably not writable so the custom file is not being saved.

Go to your main directory, go up one level, then do sudo chmod 777 housepanel

1 Like

I had done that.
but I copied the housepanel files with user “root”
The webserver is run with user “asterisk”
should I chown all files to user asterisk ?

I’d like to install this new version and I’ve already made some changes using the tile editor now (after chowning files) , how can I keep the changes when I install new version ?

I could not find how to change URL of video tiles on wiki
is it written somewhere ?

Save your customtiles.css file and copy it to the skin folder and the main folder after upgrading.

1 Like

Unfortunately I haven’t documented that yet. Will put something together and post later. If you scan the earlier posts on this thread using keyword video you will see how several others have tackled this. Live video isn’t officially supported but I know others have have coaxed the frame tile into doing it - very camera dependent. I use Arlo cams and I include a python script that scrapes the latest video and puts it where HP video tile wants to see it. Will summarize this later and will update to wiki. Be sure to use the latest doc which isn’t really a wiki - it is a github doc web page.

Doc has been updated to explain how to do this. You can view the docs here online:

https://kewashi.github.io/HousePanel/

or… after you update to the latest version, the doc will be on your local server. The latest version now includes a button in the upper right corner that will open your local docs file in a separate browser window when clicked. This will launch the file docs/index.html that is bundled with HP.

This latest update also improves the Analog clock by adding the other time elements. By default they are hidden, but they can be unhidden using the editor and then styled using borders and backgrounds to create some cool clock effects. Here’s what mine looks like:

2 Likes

Is there a way to implement Stop Motion Video Streams like in smarttiles where I have all my Dahua/Hikvision/Amcrest camera feeds set up for 5 sec refreshes? Also, what’s best practices on tile editor to make tile large enough for video feeds, traffic maps, weather radar, etc like easily done via css in smarttiles?

1 Like

At present the polling is too slow to support this but I like the idea of adding a fast polling loop for just image and frame and video tiles. You can use the img or frame tiles to display random images that get updated by an external script that grabs images out of your camera. These tiles can be sized to your liking either in CSS or using the visual tile editor. They can now even be round.

I’ve arranged frame tiles to show video from my cameras reading the doc.
However, I have 2 issues:

  1. I can’t edit the size of the tile. How can I do that ? If I edit wit tile editor, it just changes the size of the image but not the tile.
  2. I made the change on housepanel.php after putting one frame tile. After changing php file, it shows the correct image (from camera) on Internet Explorer. However on Chrome browser, it still shows Accuweather.
    HOw can I update it ?

thx.

Try selecting whole tile in editor for size.

In chrome it has a stubborn cache so you have to quit browser and restart and do a refresh in HP

I set both frame & “whole title” sizes. but this time the video is not fitting as seen in following photo.
How can I scale the video to fit the frame ?

BTW, I am trying to run this on a 800x600 resolution tablet. How can I make it fit the screen.
Now the app has a wider screen so I have to scroll to right for some part of the screen .

The Frame window size is set in the code in the housepanel.php file roughly around line 940 in the following 4 lines:

        $forecast = "<iframe width=\"490\" height=\"230\" src=\"forecast.html\" frameborder=\"0\"></iframe>";
        $accuweather = "<iframe width=\"490\" height=\"200\" src=\"forecast_accu.html\" frameborder=\"0\"></iframe>";
        $frame3 = "<iframe width=\"490\" height=\"230\" src=\"frame3.html\" frameborder=\"0\"></iframe>";
        $frame4 = "<iframe width=\"490\" height=\"230\" src=\"frame4.html\" frameborder=\"0\"></iframe>";

Notice the width and height parameters. Just change those and upload to your server and refresh the page and you will be all set. I need to figure out how to make this an editable setting. That will come later.

I’ve set width 320 and height 240 in the file. I also set the same in tile editor for both “frame” and “whole tile” (320x240)
however, the output is not fitting as seen in the image below.
what is it that I’m missing ?

Also, how can I “scale” the image to a smaller resolution ? (would like to add it as 320x240)

You can try deleting the customtiles.css file in your skin directory(skin-housepanel if default), click on the Reset button in your tile editor window for the thing you’re editing, clear cache by closing out browser, and then restarting apache with service apache2 stop/start or restart. Those combinations have resolved it for me in the past when dealing with trying to get frame to match up with what I want as far as height and width settings.
I haven’t been able to figure out how to scale/resize as iframe is really limited on what you can do.

1 Like

reset button solved the problem.
but now I really have to scale the image in the tile.
because the image from camera is very large.
@kewashi how can I do that ?

Are you using Frame or Img tiles?

I only use Frame for weather forecast so scaling is only done in the html file. For img tiles you can scale it in tile editor using the img item and picking item size. Or you can just edit the css file directly and add a style for img tags. That should work for both frames and img tiles.

1 Like

I solved the scale issue by changing the request to the IP camera. Added “&resolution=8” to the URL.
Using frame tags. I didn’t know that I could use img tags for video source.

Btw, what is the best way to define a width for the whole page ?
I want to fit the screen to a tablet with 1280x800 resolution by setting 1280 as the width.

Two ways:

The “end user” way is to use TileEditor and edit any page by clicking on the green dot on the tab up top. Change “Effect Scope” from This page to All Pages (there are two versions - pick the first one). Then select “panel” in the box on the right so you are changing the whole panel, and change the overall tile size width to 1280 and the background size to either auto or 1280. Click Okay. This will set the page size of all pages and store the setting in your customtiles.css file.

The fast “power user” way is to edit tileeditor.css and change the body style in lines 14 through 18. Change width from 1190 to 1280

body {
background-color: #ffffff;
color: #000000;
width: 1190px;
}

If you choose the power user method, you can still use tile editor method and override this. You could also change the “greeting” and “greetingopts” styles so your auth page makes use of the entire width of your tablet, but you probably don’t care about that.

1 Like