[RELEASE] HousePanel Dashboard for SmartThings and Hubitat

The best way to customize the accuweather widget is to go to the accuweather website and make one for your location, then copy and paste the whole code snippet into the accuweather.html file. This is how I made the file for Ann Arbor.

I’m working on automating all of this with location info by zip code or city name. For now the manual process described above should get you going.

Edit: Just signed up for the AccuWeatger api which should enable me to do this fairly easily. Stay tuned

I do not see where to get the code on accuweather website other that what I copied previously from the address bar. I did see this linik https://www.accuweather.com/en/free-weather-widgets but it says it is no longer available.

man, you are right. That is where I got it, and it still works but you can’t get another copy. I think I have a workaround for you. I went onto Accuweather’s main site and pulled up Hong Kong weather. Then I inspected the weather displayed in Google Chrome (F12). The calls are similar to those in the widget so I looked for what might be the location Key and sure enough I found it for Hong Kong - it is 1123655. I then plugged that into forecast2.html and changed the text from Ann Arbor to Hong Kong. You also have to change the /en/us to /en/hk and for kicks I changed the data-unit from f to c. The resulting file is here. I tested it and it works like a charm.

<!DOCTYPE html>
<html>
<body>
<a href="https://www.accuweather.com/en/hk/hong-kong/1123655/weather-forecast/1123655" class="aw-widget-legal">
</a><div id="awcc1531959686475" class="aw-widget-current"  data-locationkey="1123655" data-unit="c" data-language="en-us" data-useip="false" data-uid="awcc1531959686475"></div><script type="text/javascript" src="https://oap.accuweather.com/launch.js"></script>
</body>
</html>

Here is the result:
image

1 Like

Folks,

I know it has been quiet around here. Let me update everyone on what I have been quietly working on.

I have moved Blank and Image tiles from the Groovy code to the PHP server code. This allowed me to treat five tile types - Blank, Image, Video, Frame, and Custom - all in the same way. All of these tile types come with a width and a height field that can be customized by the user at run time. They also all have the ability to load a file into the tile based on the name of the tile. For example, if the name of an image tile is “mykitchen” then HP will load mykitchen.jpg or png into the image field of the tile. That image field will have the width and height based on it hose fields values. Files will be searched in the main folder first and then in the media subfolder. This logic applies to image, video, frame, and custom tiles. Blank tiles will just create an empty “div” with the size requested. Frame files will only recognize html and htm extensions and Video tiles will only recognize mp4 and ogg extensions.

There can be any number of all five of these special tiles. The Options page added fields to specify how many of each.

AccuWeather tiles are now generated by the code using the logic in the prior post. You will need the city name and location code to use this. I will document how to get this in the formal release note.

I plan to have all of this uploaded on Wednesday to the master branch. A draft is already there in a separate branch called imageclick if you want to be an early beta tester.

Please note that old blanks and old images will stop working with this update. New images will be super easy to connect to cameras without doing any CSS hacking.

Can’t wait to get this out to everyone later this week.

1 Like

Worked. Many thanks.
FYI. I changed data-language=“en-us” to data-language=“zh-hk”. It can display traditional Chinese.

1 Like

When I use the commands in your instructions to install Node.js

wget http://node-arm.herokuapp.com/node_latest_armhf.deb
sudo dpkg -i node_latest_armhf.deb

It installs version 4.2.1, The latest stable recommended version is 10.16.0. Does Housepanel need to run on an older version?

HousePanel needs Node 6 or later. The instructions should get you that version. If not just find a new version and install it. I haven’t played with Node in awhile so that part of the instructions file might not be up to date. Sorry about that. Anyway, just get a version newer than 6 and you should be good to go

[RELEASE] HousePanel V 2.070

Hi folks - tonight I am releasing HousePanel Version 2.070 which implements a relatively major update to how special tiles are handled. This includes:

  • Images
  • Video
  • Blanks
  • Frames
  • Custom

All five of these types of files are now produced on the PHP server side and all come with hidden width and height fields. These fields can be updated in the Tile Customizer to change the size of the content. This version also adds consistent logic such that the names of these tiles will be used to attempt to load a file with the contents. Frames are for html files that are typically used for weather widgets. Image tiles can be used to display any jpg, png, or gif file. Video tiles can display any mp4 or ogg video file. And custom tiles can load any of the above types as long as the extension is correct. The file is displayed in field matching the type of the tile. For example, frame tiles will load the weather widget in the subid field named “frame”.

IMPORTANT this means that image tiles now load images into a field name “image” instead of the field previously used, which was called “url”.

Hope you enjoy this update.

I forgot to mention that the latest update includes a feature that automatically creates an html frame file for your city of choice after you provide the city name and a location code on the updated Options page. The new options page input looks as follows:

Your city, country, and the AccuWeather location code are provided in the circled fields. This will generate a file called “frame2.html” that can be added to any page as a frame tile and the AccuWeather icon for your location will be shown.

The only catch is you need to obtain the location code for your city. To do this, open www.accuweather.com in a Chrome or Edge desktop browser, and enter your city in the upper right corner, and inspect the contents of the widget showing the weather as I am showing below.

In the inspection window, expand the wrap-content section and look for a div class=“column-1 clearfix” section. In that section look for the URL of the widget. Embedded in that URL will be the city name to use, the region name, and the location code you need. This is illustrated below for Dallas TX, USA.

So putting this all together for Dallas we have: City = dallas-tx, Region = us, Location Code = 351194 and the resulting AccuWeather widget on screen looks as expected:
image

One last catch - is the frame may not refresh, so you may need to close the browser and reload it to clear out the cache. I’m working on a fix for this.

[EDIT] I fixed this using a get variable added to the src. I will post later. Also working on trying to automate all of the steps above.

1 Like

Bugfix Version 2.071 Release

This minor bugix release includes auto-cache bypass for modified frames so when you pick your weather location it will show without a browser restart.

This update also fixes some issues with adding any of the 5 special tiles, such as video. Prior version had a bug that didn’t handle user changes to the number of special tiles properly. This has been fixed.

Also, the Tile Customizer was modified to show existing field data when editing.

A number of other obscure bugs were squashed as usual.

Files that need updating are:
image

Notice that I renamed the video1.mp4 demo video file since most users make their own video1.mp4 file using an offline script like a Python webcam scraper.

Now that I have posted this update with bug fixes I thought I would explain how to use the new special tiles. The main thing you need to know is these tiles read files found in the main folder or in the media sub folder. This is the main media sub folder and not the media folder in your skin folder. Anyway, to use these tiles just add them to any page and then change the name in the tile editor to the name of the file you want to display.

So if you have a Python script that saves your ring doorbell photos as ringphoto.jpg the name any image tile ringphoto. The jpg extension is not needed but can be given.

Likewise if you save videos to ringvideo.mp4 then add a video tile and change its name to ringvideo.

For frames you can load any html file into a frame by saving it in the main folder and then add a frame and change its name to the file. So if you want to display mywidget.html name your frame tile mywidget.

The next update will add code to properly refresh images when they change.

Any type can be displayed in a custom tile.

Blanks are always just that - blank.

These tiles all have width and height fields that are used to create the tags. These values are run time editable by changing them in the tile customizer. Use the blue button to use this. The customizer is slow but effective so be patient.

Thanks again for keeping this application up to date and improving the details!

I am starting to play with the API you provide, with the aim of integrating some of the non-SmartThings items I have into a dashboard. Everything looks straightforward, but can you clarify how to connect to the web sockets to receive the pushed updates? Is it just connecting to the shared port?

I’m not sure what you are asking. That is, the API has nothing to do with the web socket feature used to keep tiles current in the dashboard when state changes outside of the app. To use this feature make sure you have Node.js version 6 or newer installed on your rPI server. Then install the push app in the housepanel-push folder. The install script will do this for you. Now, the API calls are made by making a get or post call to the housepanel.php server from any other web app. The pusher Node app opens a socket that housepanel.js expects but again this is fully separate from the API. The API calls to housepanel.php returns json strings to the caller. By the way the housepanel.js file uses the API internally to get data from the php side. This is done because I only have code to talk to the ST hub on the php side.

To see how housepanel.js connects to the push web socket, take a look at the code starting at line 251 where the listener takes action when a message is received over the socket.

wsSocket.onmessage = function (evt)

The listener code that follows this line parses the message and then updates the screen.

In theory any user app could connect to the socket server and implement a similar listener function.

1 Like

Thank you — just what I was hoping.

As background, I installed HousePanel on an older Raspberry Pi, currently running a Plex server, and it works well, hardly any overhead. I have several smart plugs that are not integrated through SmartThings, but I control with Alexa. These plugs have a public API, though, so I’m looking at building some sort of integration. It may come to nothing, we’ll see.

Take a look at the Tile Customizer that can be used to make any POST web call. You can use this to invoke the API of your plugs.

[RELEASE HousePanel 2.072]

Minor but useful update that enables multiple tiles to be queried at once using the API. I also updated the sample python file called hpapi.py to work with the current version.

To use this feature, invoke the API as usual and separate the tile numbers by a comma as below:

http://192.168.11.20/smartthings/housepanel.php?api=doquery&tile=51,381

This will return an array of results - one for tile 51 and one for tile 381. Tile numbers are obtained from the Show Info page.

The original multi-tile API feature to turn things on at once is still there. As a reminder one does this using the attr feature and doaction as follows:

http://192.168.11.20/smartthings/housepanel.php?api=doaction&tile=51,381&attr=toggle

This will toggle the lights of tiles 51 and 381. Any number of tiles can be listed with each separated by a comma.

One important change is the results are now a proper json array where before it was not. So the above commands will return something like:

[{“switch”:“off”},{“switch”:“off”}]

Types can be mixed and matched. This example returns one of my thermostats in between the two lights:

http://192.168.11.20/smartthings/housepanel.php?api=doquery&tile=51,121,381
[{“name”:“Stairway”,“switch”:“off”,“event_1”:“off 6/16 5:01”,“event_2”:“on 6/16 5:01”},{“name”:“Main Thermostat”,“temperature”:70,“heatingSetpoint”:67,“coolingSetpoint”:72,“thermostatFanMode”:“auto”,“thermostatMode”:“heat”,“thermostatOperatingState”:“idle”,“humidity”:58,“event_1”:“67 6/16 3:03”,“event_2”:“setCoolingSetpoint 6/16 3:02”,“event_3”:“setHeatingSetpoint 6/16 3:02”,“event_4”:“64 6/16 10:28”},{“name”:“Office Lamp”,“switch”:“off”,“event_1”:“off 6/16 5:01”,“event_2”:“on 6/16 5:01”}]

The only restriction is all tiles must be from the same hub. The hubnum must be given if you want to access anything other than the first hub.

How do I update to the latest revision? Do I run the install.sh script again?

Yes - you can but it is probably easier to just download the updated files including replacing the groovy file in the ST system. You can just replace all the files too as that is easier. Be sure to keep your old hmoptions.cfg file and your customtiles.css file.

What is the best way to update the files? I am using WinSCP to copy files from my windows PC to the raspberry pi but I get an error for several files “Upload of file ‘authpage.png’ was successful, but error occurred while setting the permissions and/or timestamp”