Use the self calling Function as the example in the Help tab of the ui_template
that passes scope so it can be accessed anywhere in the code.
then use it as scope.send({ payload: "Home" });
ui_template Code
<script type="text/javascript">
(function (scope) {
if ($('.md-toolbar-tools').length != 0)
loadClock();
else
setTimeout(loadClock, 500);
function loadClock() {
$('#clock').remove();
var toolbar = $('.md-toolbar-tools');
var div = $('<div/ class="clock-style">');
var p = $('<p/ id="clock">');
div.append(p);
div[0].style.margin = '5px 5px 5px auto';
toolbar.append(div);
// Add element for clickable home icon if not already present
var i = document.createElement('i');
i.classList.add("fa");
i.classList.add("fa-home");
i.classList.add("fa-2x");
i.classList.add("icon-padding");
i.addEventListener('click', sendPayload);
toolbar.append(i);
function displayTitle(lh) {
p.text(lh);
}
function upTime() {
var d = new Date();
p.text(d.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' }));
}
if (document.clockInterval) {
clearInterval(document.clockInterval);
document.clockInterval = null;
}
document.clockInterval = setInterval(upTime, 1000);
function sendPayload() {
scope.send({ payload: "Home" });
}
}
})(scope);
</script>