Interesting find: htmlTile as main tile


#1

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.


Is it possible to have 2 push buttons in 1 tile
(Matt Behnken) #2

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


#3

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:

IMG_8662

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>
"""
		}
	}
}

(Steve White) #4

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) #5

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) #6

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) #7

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


#8

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) #9

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) #10

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) #11

Yeah just adding switches to details ()


(Matt Behnken) #12

Using images


(Mark Harding) #13

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) #14

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) #15

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