HousePanel

[kewashi]

Thanks ... tracking down the bug that gets new devices confused upon first install. Only shows up on new installs so it’s hard to find. Stay tuned. Michel- I recall you saw this bug show up in your testing. 

[kewashi]

Hi folks ... making steady progress.  New version of HousePanel posted today - Version 2.228

Also I'm excited to share the first wave of tutorial videos for how to install and operate HousePanel. These videos show you how to setup HousePanel on a rPi or a Polisy box, and how to get tiles set up and configured.  More will be added to the same YouTube channel so please be sure to bookmark the channel for future reference.  Enjoy.

 

[asbril]

49 minutes ago, kewashi said:

Hi folks ... making steady progress.  New version of HousePanel posted today - Version 2.228

Also I'm excited to share the first wave of tutorial videos for how to install and operate HousePanel. These videos show you how to setup HousePanel on a rPi or a Polisy box, and how to get tiles set up and configured.  More will be added to the same YouTube channel so please be sure to bookmark the channel for future reference.  Enjoy.

 

I'll wait till it will be as easy as addng a nodeserver on Polisy............

[kewashi]

That’s the plan and the goal. I’m even thinking it can be merged with a Polyglot app so it actually is an install of a poly node - since both can be Node.js servers. More to come

[garybixler]

Perfect. Fits my planes exactly. I mounted a 10" 1080p touch screen on my kitchen wall with a Rpi mounted remotely unseen with all wires out of sight. So far I am using the browser to monitor GenMon and access Polisy but this would be an ideal addition. I'll probably go to a Rpi 4 for better performance.

Gary

[TJF1960]

I had this up and running in less than 30 minutes on a pi3 running Buster lite which I thought was the newest version for pi3 but it is running some old versions of node v10.15.2 and npm v5.8.0 and threw some warnings during install and use. But in any case House Panel seems to be running fine!

I've only set up a couple of switches and lights but so far it is pretty easy to operate and set up. I am excited to spend a little more time playing with it.

Big thumbs up to @kewashi  and thanks for this program and the videos which made set up far easier!

Tim

[garybixler]

My plan is to wait until it can be run on the Polisy and just use the browser on the Rpi for accessing HomePanel. That way I won't need to do any Rpi setups or configurations except for a desktop link.

Gary

Edited March 29, 2020 by garybixler

[kewashi]

16 minutes ago, TJF1960 said:

Big thumbs up to @kewashi  and thanks for this program and the videos which made set up far easier!

Thanks very much - one comment... if you have a polisy box, it runs much better there than on a rPI. Just ssh into your polisy and follow the same instructions. Then use the URL of your polisy box to launch the app. This is how I am running it in my house. 

Edited March 29, 2020 by kewashi

[tazman]

Thanks kewashi I have mine setup kind of like I want. I want to use this for a Magic Mirror to display the status of the house. I might play around with the icons some to make it more what I want but now that it's hard to gather materials I feel I want to start to build my Magic Mirror. Now that I have this setup I am wondering what the update path will be because so far I have had to delete the folder and start over each time you sent out an update kewashi? Any plans for incorporating a RSTP feed from a camera as a tile?

 

[kewashi]

To upgrade just replace the updated files in your install folder. No need to start over. 
 

no rstp plans - I tried that and there are no standards so it became a hornets nest. Instead I opted to support displaying any video file present so you can use your own IP camera app to save a video to the server in the hpserver folder and HP will display it. I had Arlo cams working this way but the python scraper stopped working on the Arlo site. My generic IP cams work this way. So far I haven’t seen anyone get video out of ring’s proprietary system. You can also display static images from cams using the image tiles. 


 

[TJF1960]

Hello @kewashi,

In playing around I have accidently authorized the ISY Hub 3 times, How can I delete all hub database and start over?

Also how can I change the location of where the log is kept?

How is the easiest to perform a backup and restore in the event of a fresh OS install and to not loose the current setup?

Thanks,

Tim

Edited April 2, 2020 by TJF1960
added questions

[TexMike]

@kewashi Thanks for your work so far. I would really like to try HousePanel, but like others have mentioned, I would want a supported method to install/uninstall from Polisy. I know how to SSH into my Polisy, but I try to avoid it because the reason I got a Polisy was to have a supported system and I don't want to do anything to compromise that. When you get to that point, I think you would have a lot more early adopters. I'm looking forward to checking it out when you and UDI get to that point.

[kewashi]

On 3/30/2020 at 9:03 AM, TJF1960 said:

In playing around I have accidently authorized the ISY Hub 3 times, How can I delete all hub database and start over?

Also how can I change the location of where the log is kept?

How is the easiest to perform a backup and restore in the event of a fresh OS install and to not loose the current setup?

1 - The GUI for hub removals is not yet fully tested and debugged so it is not available. It is relatively easy to remove them manually. Just edit your hmoptions.cfg file and remove the undesired hubs in the config.hubs section. I would back up your files first per below. I think the editing will be obvious once you pull the file into an editor. Just search for the string "config" and then look below that for "hubs" and you will see an array of objects. Just remove the one you don't want. Or to remove them all, remove the entire "hubs" section. I'm working on a GUI front end and am close so you can also just wait... 

2 - when you launch hpserver.js just direct stdout to whatever file you want as follows: 

node hpserver.js >& mylogfile.log &

3 - Again, a GUI to do backups is under development. Until then the easy way to save your backups is to just copy the following files somewhere safe. You can then later copy them back to restore your config.

hmoptions.cfg
hm_default.cfg  ( or if you are using a custom user, say "tjf1960" then copy hm_tjf1960.cfg)
skin-housepanel/customtles.css

If you copied over any custom graphics, save those too.

Again, all of this will be automated within the GUI in time.

 

[kewashi]

12 hours ago, TexMike said:

I know how to SSH into my Polisy, but I try to avoid it because the reason I got a Polisy was to have a supported system and I don't want to do anything to compromise that. When you get to that point, I think you would have a lot more early adopters. I'm looking forward to checking it out when you and UDI get to that point.

Thanks...  I fully respect your position and understand this is where many people will land. This is why I am working on a path in that direction. Stay tuned.

[kewashi]

On 3/29/2020 at 11:59 PM, tazman said:

Any plans for incorporating a RSTP feed from a camera as a tile?

Yes, that is on the roadmap. Until then you can use the "video" tile and use a third-party app to save periodic mpg video files to your server. I do this with my Arlo but the Python scraper quit working... Arlo is a closed ecosystem so I can't do a direct RTSP from there but open IP cams will be relatively easy to support. 

[tazman]

Thanks kewashi I am using a video player right now to play the stream on. I saw in one of your pictures you have a weather forecast setup and I was wondering if you could explain to me how to do that so I could place it on screen below my video stream. Below is a picture of what mine has transformed into the fans spin when they are on and has the light in the middle that operates separately.  I am making progress on my mirror that will be mounted in front of the TV for it to show through. 

[kewashi]

8 hours ago, tazman said:

I saw in one of your pictures you have a weather forecast setup and I was wondering if you could explain to me how to do that so I could place it on screen below my video stream

Wow - your setup is looking great. I love that you're exercising a lot of the flexibility of HousePanel.  Regarding weather tiles, you can do that by adding a Frame tile - either frame1 or frame2.  The first option, frame1, uses a weather widget from the website: https://weatherwidget.io/  Their backend is DarkSky that was just acquired by Apple but they insist they will keep this widget available and free going forward by switching to a new back end in the future, so I think it is a good choice for HousePanel.  You will have to go to their website and create your own widget using settings that fit your preferences. Then click on "Get Code" and then save that to Frame1.html.  A file is included called frame1.html but if you are on a Unix server you will have to save your file with a capital "F" as of the latest code version. I wish this was automated but these online free widgets don't allow you to do that.

The second option uses AccuWeather. It is a similar deal but a little harder to set up. The HousePanel code has hooks on the Options page to create a file called Frame2.html (actually there is a bug that makes the file frame2.html, but I am fixing that now). To use this you will need a city code. The following forum post on SmartThings describes how you get that. https://community.smartthings.com/t/release-housepanel-dashboard-for-smartthings-and-hubitat/108342/1674?u=kewashi  You are also free to create your own weather widgets and save them to any file name ending in html and linking them into HousePanel.

 

[UPDATE] Since you asked, I updated the code to fix the cap bug, so you don't have to worry about that. Also, I added a new feature that will auto create Frame1.html just like Frame2.html. The catch is you still have to go to the weatherwidget.io website to get the "code" for your specific location, by typing in your location and then selecting "copy code". You will see the code embedded in the URL much like with Accuweather. There may be a way to automate this with Python - I will investigate this in the future.

I know this is a hassle, but once working here is what it might look like - this shows both frames on a page.

Edited April 12, 2020 by kewashi

[tazman]

Thanks kewashi I got the weather onto the display without the capital "F"for the file but I can not size or move the tile like I want it. Do you know if a window size could be added to the script and what that would look like?

[kewashi]

This is already supported. There is a width and a height parameter in each frame tile that can be changed using the tile customizer. Use the blue dot to enter the customizer then add a custom text field for width and add the value desired. Same for height. Then save and refresh screen. Then also style the overall tile to fit the size using the editor (green dot - or gear button in new version)

 

[leffertd]

I am loving HousePanel!!!!!

I got my Unifi cameras to "stream" into HP using the Frames.  I got all 8 of my cameras to run on the system.

Is it possible to set a Frame as background image for a Page.

 

[kewashi]

Looking good man — so glad you are loving it. There is no support for using Frames as a page background. Best you can do is to make a frame the size of a window and position it to look like the background. Then any tiles on top of that will sit on top as long as you do the frame first. You could also add a custom CSS for frames to set the z-index to 1 so it forces to the background. Think it will work but haven’t tried it. 

[kewashi]

22 hours ago, leffertd said:

 

I got my Unifi cameras to "stream" into HP using the Frames. 

Would you please share the html file that you used to do this - with any private data removed of course. Thanks

[simplextech]

22 hours ago, leffertd said:

I got my Unifi cameras to "stream" into HP using the Frames.

I'm very curious how you got the Unifi Video stream to display in a browser.  Are you running Unifi Video or Unifi Protect?

[kewashi]

The way the "frame" tiles work is anything contained in the associated html file will be put in an iFrame and displayed. So as long as you can get your camera working in an iFrame, HousePanel will display it. The code uses the name of the tile to look up the hmtl file to embed in the frame. By default this is Frame1, Frame2, ... but you can change it to whatever you want in the tile editor. In the default case you would save your content in Frame1.html and so on. The default Frame1.html and Frame2.html are used to show weather info from weatherwidget.io and accuweather respectively. That default behavior can be changed by just editing the provided Frame1.html and Frame2.html files. So hopefully @leffertd can share his redacted files with us. I will be glad to include a feature to do this automatically for Unifi cameras based on the name of the tile being "Unifi_x" where x is any integer. I'm thinking I can create a library of supported cameras using this same approach. Mine are old D-Link cameras and I haven't tried doing this with them yet. I only have static images grabbed via a crontab.

 

[leffertd]

I need to start of by saying I am a novice at html. So if anyone has a better and or more efficient way of making this work, GREAT!!!!

I started by upping the number of Frames in HP to 15.  Each of my cameras is using a separate Frame html.  Frame3.html is Camera 1, Frame4.html is Camera 2.... and so on.  I only needed to change the CAMERA ID in each of the different Frame html files. 

This is an example of one of the Frame html files.  I have all eight cameras "streaming" into HP and on the same page.  And all seams to be running great.

I am also using Unifi Video to manage my Cameras.

//

<html>
<head>
<script type="text/JavaScript">
var url = "http://<UNIFI VIDEO IP>:7080/api/2.0/snapshot/camera/<CAMERA ID>?force=true&apiKey=<API KEY>"; //url to load image from
// Get the Camera ID from the RTSP address in Unifi Video.  "rtsp://<UNIFI VIDEO IP>:7447/<CAMERA ID>eb_1" My Id's are 22 digits of lower case and numbers.
var refreshInterval = 500; //in ms
var drawDate = true; //draw date string
var img;

function init() {
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    img = new Image();
    img.onload = function() {
        canvas.setAttribute("width", 480)
        canvas.setAttribute("height", 260)
        context.drawImage(this, 0, 0, 480, 260);
        if(drawDate) {
            var now = new Date();
            var text = now.toLocaleDateString() + " " + now.toLocaleTimeString();
            var maxWidth = 100;
            var x = canvas.width-10-maxWidth;
            var y = canvas.height-10;
            context.strokeStyle = 'black';
            context.lineWidth = 2;
            context.strokeText(text, x, y, maxWidth);
            context.fillStyle = 'white';
            context.fillText(text, x, y, maxWidth);
        }
    };
    refresh();
}
function refresh()
{
    img.src = url + "&noCache=" + new Date().getTime();
    setTimeout("refresh()",refreshInterval);
}

</script>
<title>Unifi Camera House Panel v1</title>
</head>

<body onload="JavaScript:init();">
<canvas id="canvas"/>
</body>
</html>

//

Hope this helps... 

I would like to get this to work much how the Camera function in the web interface for the ISY994 works.  I also have the Unifi cameras running through that also. The feed in the ISY will scale the size of the camera feed.

If it matters... I am running HP on a Pi4 while I play with it.  I do have plans on moving it over to Polisy.

Donald

Frame9.html

Edited April 21, 2020 by leffertd
Update Platform that I am running HP on.