Interesting find: htmlTile as main tile

jeroenb42 · February 20, 2018, 6:53am

I have been playing around with the htmlTile to see if it can help me solve one of my problems. Found something interesting. You can set an htmlTile as your main and it wil render in your Things list. If you have a small ‘webpage’ , like 1 line, it will move along with the list. If it is bigger, you can scroll the page inside the list (not really convenient).

Below the snippets needed (will post a full working one later if needed. It is now part of a device handler for the Neo plug and a lot of the code is irrelevant for this post):

	htmlTile(name: "tileHtml", action: "getHtml", width:6, height: 5)

	main "tileHtml"
	
mappings {
	path("/getHtml") {
		action: [GET: "getHtml"]
	}
}

def getHtml () {
	renderHTML {
		head {
"""
<style type="text/css">
body {
	background-color: #79b821;
}
</style>
"""
		}
		body {
"""
<div>Test with HTML</div>
"""
		}
	}
}

This produces:

As you can see, the whole line is replaced. I was hoping for just the right hand side because there is one downside I have yet to solve, you cannot click on it anymore so you cannot go to the details of the device. Maybe somebody else has been toying with this and knows how to get this on just the right hand side.

Matt_Behnken · February 22, 2018, 9:05am

Wow awesome! Maybe css z-index values will move it behind the button.

jeroenb42 · February 22, 2018, 11:08am

Good suggestion! So I tried some more things with body size, div size, z-index. I did manage to get the block on the right similar to other forms but I have not yet managed to allow it to be clickable. My work so far which mimics a green box:

def getHtml () {
	renderHTML {
		head {
"""
<style type="text/css">
html, body {margin-top:6px; margin-right:0px; overflow: hidden, text-align:right; z-index:-1000; }
div {
background-color: #79b821;
z-index: -1000;
border-radius: 2px;
overflow: hidden;
width:94px;
height:26px;
color:white;
text-align:center;
margin:auto;
position:absolute;
right:8px;
}
</style>
"""
		}
		body {
"""
<div>HTML</div>
"""
		}
	}
}

SteveWhite · February 22, 2018, 2:04pm

I was playing around with a way to show buttons in an HTML tile as a way to show a list of devices inside within a DTH. I actually got right up to the point where I was going to start making the buttons clickable, but decided to not expend the time trying.
“”";

Here’s my code if it helps…

def switchstatus = ""
    switches.each
    {
    log.trace it.id
    switchstatus += "<div style=\"height:60px;\"><div style=\"float:left;\">${it}</div><div class=\"btn " + it.currentValue("switch") + "\"><a href=\"/testcmd\">" + it.currentValue("switch").toUpperCase() + "</a></div></div>"
    }
       
log.debug switchstatus


def html =
"""
<html>
<head>
<meta http-equiv="cache-control" content="max-age=0"/>
<meta http-equiv="cache-control" content="no-cache"/>
<meta http-equiv="expires" content="0"/>
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT"/>
<meta http-equiv="pragma" content="no-cache"/>
<meta name="viewport" content="width = device-width">
<meta name="viewport" content="initial-scale = 1.0, user-scalable=no">   
</head>
<style>
div {
	color:#cccccc;
    height: 30px;
    font-family: san francisco, arial;
}
div .btn {
	width: 90px;
    height: 14px;
	border-radius: 2px;
    padding: 6px 2px 4px 2px;
    float: right;
    text-align: center;
    font-size: 12px;
}
.btn.on {
    border: 1px solid #78b943;
    background: #78b943;
}
.btn.off {
    border: 1px solid #9d9d9d;
    background: white;
}
.btn.on a {
    color: white;
	text-decoration: none;
}
.btn.off a {
	color: #9e9e9e;
	text-decoration: none;
}
</style>
<body>
Page loaded:""" + now() +
"""<div style="width:100%;height100%;">${switchstatus}</div>

</body>
</html>

Matt_Behnken · February 22, 2018, 6:16pm

this has so much potential! I realize now that z-index isn’t helpful since the html tile is the “main” . I’ll look at the dev docs for “main” capabilities and save us some time!

Matt_Behnken · February 22, 2018, 10:16pm

okay, how about inserting an “action tile” or similar “url” ? then you can have the functionality without writing the action for the button from scratch.

maybe just format the html/css to have the switch looking box on the right, then you can have whatever. Authentication is an issue though, i was using smarttiles and the url auth doesn’t propagate from the chrome browser to the ST app. But it’s doable. Even Ifttt or virtual switch etc.

Matt_Behnken · February 23, 2018, 9:28am

This guy figured out two buttons in one tile, could be the holy grail for using htmlTile

jeroenb42 · February 23, 2018, 10:51am

I got his code working. It is however not what we are looking for. It is basically two top sections on the detailed screen, not two buttons on the list of Things screen.

mark_harding · February 23, 2018, 2:29pm

Hi guys,

as jeroenb42 said above all i wanted was 2 clickable buttons in one tile so to speak but not on the main screen. i would like 2 on the main screen but from what i read and saw this is just 100% not possible otherwise would have been exactly what i wanted without having to click into something.

Matt_Behnken · February 24, 2018, 10:16am

I’m close since you can have a link on the tile, or two. It’s just a matter of the link executing the ST command. Maybe cloud service to switch through ifttt or something.

Matt_Behnken · February 24, 2018, 10:28am

Yeah just adding switches to details ()

Matt_Behnken · February 24, 2018, 11:14am

Using images

mark_harding · February 26, 2018, 1:58pm

have you got a copy of the code for the above as this might be something i was looking at for my PS4 but not sure. was the text part actual text or images as got a little confused

Matt_Behnken · February 26, 2018, 8:29pm

Yes just text and images, but we’re close

    /**
 *  A virtual html switch
 *
 *  no Copyright 2018 MATT BEHNKEN
 *
 *  Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
 *  in compliance with the License. You may obtain a copy of the License at:
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 *  Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
 *  on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License
 *  for the specific language governing permissions and limitations under the License.
 *
 */
metadata {
	definition (name: "A virtual html switch", namespace: "mattbehnken", author: "MATT BEHNKEN") {
		capability "Switch"
	}

	tiles(scale: 2) {
		multiAttributeTile(name:"switch", type: "lighting", action: "getHtml", width: 6, height: 4, canChangeIcon: false){
			tileAttribute ("device.switch", action: "gethtml", key: "PRIMARY_CONTROL") {
				attributeState "on", label:'${name}', action:"switch.off", icon:"st.switches.switch.on", backgroundColor:"#00a0dc", nextState:"turningOff"
				attributeState "off", label:'${name}', action:"switch.on", icon:"st.switches.switch.off", backgroundColor:"#ffffff", nextState:"turningOn"
				attributeState "turningOn", label:'${name}', action:"switch.off", icon:"st.switches.switch.on", backgroundColor:"#00a0dc", nextState:"turningOff"
				attributeState "turningOff", label:'${name}', action:"switch.on", icon:"st.switches.switch.off", backgroundColor:"#ffffff", nextState:"turningOn"
			}
			
     }
		
		
        htmlTile(name: "tileHtml", action: "getHtml", width:6, height: 5){
        tileAttribute ("device.switch", key: "PRIMARY_CONTROL") {
				attributeState "on", label:'${name}', action:"switch.off", icon:"st.switches.switch.on", backgroundColor:"#00a0dc", nextState:"turningOff"
				attributeState "off", label:'${name}', action:"switch.on", icon:"st.switches.switch.off", backgroundColor:"#ffffff", nextState:"turningOn"
				attributeState "turningOn", label:'${name}', action:"switch.off", icon:"st.switches.switch.on", backgroundColor:"#00a0dc", nextState:"turningOff"
				attributeState "turningOff", label:'${name}', action:"switch.on", icon:"st.switches.switch.off", backgroundColor:"#ffffff", nextState:"turningOn"
        	
            }
            }
	main "tileHtml"
    details(["switch", "tileHtml"])
    }
	}
mappings {
	path("/getHtml") {
		action: [GET: "getHtml"]
	}
}


def getHtml () {
	renderHTML {
		head {
       
"""
 

<style type="text/css">
body {
	
    background-size: contain;
    background-repeat: no-repeat;
    text-decoration: none;
 
    
    
    
}
</style>
"""
		}
		body { 
        
        """
        
        <a href="https://imgbb.com/"><img src="https://image.ibb.co/bKYOkx/Screenshot_20180224_032919_3.png" alt="Screenshot_20180224_032919_3" width="25%" align="right" border="0"></a>
     
<a color="black" href="https://imgbb.com/"><img src="https://image.ibb.co/jqUw5x/Screenshot_20180224_032919_2.png" alt="Screenshot_20180224_032919_2" width="25%" align="center" border="0">&nbsp;&nbsp; &nbsp; smart wife </a>
        
        
        """
		}
	}
    
    
}


// parse events into attributes
def parse(String description) {
	log.debug "Parsing '${description}'"
	// TODO: handle 'switch' attribute

}

// handle commands
def on() {
	log.debug "Executing 'on'"
	// TODO: handle 'on' command
}

def off() {
	log.debug "Executing 'off'"
	// TODO: handle 'off' command
}

mark_harding · March 24, 2018, 11:38pm

sorry only just had a look. if there was a way of changing the pic of file size etc to something else dynamic that would be awesome

Interesting find: htmlTile as main tile

Customers

Developers

Download the SmartThings App