There are two new updates that I didn’t see - the first one named:
“Updated to mirror changes from ngredient-Master not included in HP Master”
adds the missing p and n links. I did this manually so to put us back in sync let me pull this one and resolve its differences too as well as the color picker post.
Whooooaaaaa… that’s purrrdy… We’ll need to also add a background-size option to allow the icon to scale to fit other stuff like what is done for dimmers.
I was hoping you’d say that. That will be a requirement when I implement height and width.
So now I have a button group to switch between Tile, Head, and Text
- Tile will show fields for ‘height’, ‘width’, and ‘color’
- Head will show fields for ‘height’, ‘?’, and ‘color’
- Text will show fields for ‘name’, ‘font’, and ‘color’
Below them will be buttons for ‘reset’ (load defaults), ‘toggle’, ‘copy’, and ‘paste’
Below the image list will be a file upload section
‘Close’ will move to upper right
Note: the three rainbow button will only show one at a time, I just need to battle .css some more…
Sounds really good… keep going. I will soon post a published branch called ngredient-master with the merge of your stuff with mine. This will still be behind the master branch with the updates for color, hue, and saturation but I that will come soon enough.
Shoot, I thought I grabbed the latest master to put on my fork.
At some point I’d like to get rooms (or some grouping) so we can change the color of multiple bulbs. I had to create a vSwitch for my fan lights for instance, which doesn’t support that…
Ken,
Maybe we should use this color picker for the lights too? it can do RGB too if need be…
[RELEASE Rev 1.45] This includes a merge of the first version of the tile icon editor developed by Nick @nitwit has been posted in the master branch in GitHub as usual.
Some really good stuff Nick. The color picker has not yet been integrated. All other updates are merged into the master branch.
@nitwit I suggest you either wait until I integrate the color picker into the master and then create a new branch from there then submit a pull request. That will make future integrations so much easier. I like the addition of the center box refinement to the color picker.
I’ll let you catch up / integrate what I posted early this morning to my fork before proceeding. The foundation is all there, and I’m satisfied with the dialog layout as shown in my last post. Now I just need to add in some logic (like populating the text boxes, colors etc. with their current values) and getting sizing to work (which may be painful trying to keep my dialog from getting jacked up. Maybe I’ll need to set a reasonable max height and width?)
Future enhancements:
- Image upload to icon folder
- Put a button somewhere to launch my dialog and edit the default tile settings (size, fonts and colors.) Maybe the default tile settings should all be moved to customtiles.css, with a fallback to housepanel.css if customtiles.css gets corrupted?
- Copy/Paste (should match on size, colors, fonts, icons - everything but the display name text.)
Okay cool. Tonight I will focus on Hue since I just bought my 4-pack starter kit. Can’t wait to see these puppies light up!
Implementing tile sizing will be nice, but before I proceed any further with my dialog I’m going to work on a better layout structure, if that’s okay with you.
Here’s what my panel looks like now, and I’m not diggin it:
I really think we need to set up a grid structure, and have tiles grow and shrink to fit (so my 8" Fire Tablet looks the same as a 4k screen.)
I just found this logic for CSS to maybe do what I’m describing:
A Complete Guide to CSS Grid | CSS-Tricks - CSS-Tricks
I generated this in this editor: https://www.w3schools.com/cssref/tryit.asp?filename=trycss_grid-row
and it fills my fire HD 8 nicely with Fully Kiosk Browser:
I floated Tile J out there just for the heck of it…
There’s also bootstrap cards, but that likely adds a bunch of overhead
Notes:
- I love your drag and drop, but I’m sure would have to be rewritten to work with this. Maybe show an actual grid just highlighting the drop location’s upper left corner on the grid?
- I think each ‘Tab/Room’ would have to be defined as either Portrait or Landscape (which is probably fine, since users would likely want to arrange them differently anyhow.)
What do you think?
Hi tgauchat -
Following up as requested. My fire hd 10 device is now rooted. The process was quite easy.
I am not sure if people are still having trouble with the swipe screen on these tablets. I have found a pretty simple way of getting them to wake in response to a smartthings events using tasker(if i am not mistaken root is not even required). If you are interested let me know. This is going to work out great for my dashboard.
Ken and Nit,
You guys are amazing - I got to play with the new tile editor stuff today it is so simple and easy and I love it.
Ken the Hue bulbs are pretty cool my wife and kids really love them. The light strip is a pretty cool addon.
Looking forward to see what more you guys have in store. Soon I will quit poking everything and try to make a cool looking panel to post screen shots.
Thanks again you guys.
I’m not sure I like the idea of a grid. I like the feel of the drag and drop and the free flowing icons. The issue is the row isn’t filled in with tiles that fit - but I think that can be done with some CSS effort by styling it properly. It just hasn’t been a priority. For example, lets say a big tile shows up on the left - - then smaller tiles should fit in on the right on the same row… we’ll see.
Yea - I got my starter kit installed with 4 color bulbs. They are super cool - I love them. Now that I have this I can clean up the code to work the way it should. Will be in a future edit. I don’t like the up/down arrows for picking saturation and hue - so I’ll probably put in a color wheel picker that looks like the one in the native Hue app. The config screen is getting this in the next release thanks to Nick so I can probably just reuse it on the main icon page too.
Tonight I posted a bug fix. With this bug fix (which requires a Groovy file update) dimmer switchlevel things will only show level (unless you modify the CSS) and bulb things will show level, hue, and saturation. Bulbs previously were broken and didn’t work.
Now that I think about it – I think absolute positioning of each tile is very possible and easy to implement - and that will enable people to put them where-ever they want. We could even do a snap-to-grid to give you the equivalent of a grid thing… This idea I like.
OMG!!! I love jQuery… Using their draggable feature I made this in literally 15 minutes…
Okay - so now I need to implement the logic to keep the things/tiles in the place they were dragged but that will be a piece of cake using a callback $.post call and storing the drag stop absolute location. This jQuery magic is documented here: http://api.jqueryui.com/draggable/
I uploaded the housepanel.js file that does this magic in the branch called “draggable”
Note that it doesn’t yet keep the positions but that will be easy to add next.
This is the only part I’m particularly curious about; though I only have HD7 and H8; I find it incredible that the HD10 is still rootable - Amazon has clamped down hard on the HD7 and HD8 according to XDA-Developers.
Awesome! Any way to make the tiles to be a percentage rather than fixed? I’d like the screen to resize with different resolutions. I guess it isn’t absolutely necessary, because you’d know what the target resolution is when you configure each room
Hi guys,
Quick question - In its current state would any housepanel tile support a iframe video embed?
If so where might I place it.
If not no big deal - thanks guys.
You shouldn’t need to use an iframe; If you are seeing someones sample code, you just need the text inside the quotes of the src tag:
<iframe src="xxx">
…and copy everything inside the quotes to the clipboard.
Open skin-housepanel/housepanel.css and, near the very end of the file, look for the following:
div.image.url.img2 {
background-image: url("/smartthings/garagecam/officecam.jpg");
}
Delete out /smartthings/garagecam/officecam.jpg (leaving the double quotes) and replace it with the text you have in your clipboard from above, and then save the file.
Under Options, turn image 2 on for the desired panel.
Hi Nick,
Thanks for the response - I can make this work with the url from tiny cam it provides a 1 fps mjpg (I do not believe higher fps is achievable with the nest / tiny cam integration per tiny cam documentation.) and displays pretty well in housepanel as we discussed before. VLC has been giving me fits when trying to transcode/stream.
So I have been trying to figure out how to get my public share code or the provided iframe embed code for nest to display in housepanel so I could see if I could get higher fps. Not really a big deal. LOL it is just annoying me url will not display within housepanel no matter where I try to put it.
Not trying to slow you guys down with this, just thought I would ask if there was a simple solution google had not provided with me :).
Looking forward to the upcoming updates - I must say you are a like a mind reader a lot of your changes were things I had been thinking about.
Have a great day!!