This tool lets you input your local URL, web URL, Home Assistant Server IPv4, and optionally a custom icon URL. The output is a bookmark that sends you to your H.A. local URL when on the same network as your H.A. server and otherwise sends your to the web URL for your H.A. interface.
Based on a post by Aljgom I created a simple locally hosted web interface that can be used to generate a bookmarklet. Feedback is very welcome as this is my first project of the sort.
Copy the code below and paste it in your browser adress bar to view the web interface to create the bookmark. (This opens a locally hosted webpage which means non of the input values should be shared on the internet.)
data:text/html;charset=utf-8,<html><head>
<title>Bookmarklet With Icon Generator</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
<link rel="shortcut icon" href="https://www.freefavicon.com/freefavicons/objects/plain-thumbs-up-152-237293.png">
</head>
<body>
<div class="container">
<div class="page-header">
<h2>Create A Single Bookmark For Local & Web Access To Your Home Assistant Interface! </h2> </div>
<div>
<label for="globalurl_href">1. [CHANGE THIS] Webadress of you Home Assistant interface:</label>
<input id="globalurl_href" value='https://myhomeassistantwebsite.com' style='width:100%'></input> </div><br />
<div>
<label for="ipv4_adress">2. [CHANGE THIS] IPv4 adress of local network. Only use 2 or 3 number groups: (When on your local network you can use https://whatismyipaddress.com/ to find your IPv4 adress. For me 3 number groups worked best, don't use the full adress as this is too specific and will probably stop working after a while)</label>
<input id="ipv4_adress" value='192.188.188.' style='width:100%'></input> </div><br />
<div>
<label for="localurl_href">3. [Optional] Local network adress for you Home Assistant server: (If you have changed the location of your Home Assistant server on your local network, you can insert an alternate adress below) </label>
<input id="localurl_href" value='http://homeassistant.local:8123' style='width:100%'></input> </div><br />
<div>
<label for="fav_href">4. [Optional] If you want a different icon for your bookmark, insert the web link to an alternate icon in the box below:</label>
<input id="fav_href" style='width:100%' value="https://www.home-assistant.io/images/favicon.ico">
</div><br />
<label for="bookmarkbutton">5. Drag this box to your bookmarks bar!</label><br />
<a id="bookmarkbutton" href='' ondragend='this.click()' draggable="true" class="btn btn-primary btn-lg" role="button">
Home Assistant </a><br /><br />
<div>
<textarea id="ta_top" hidden>
"> <script type="text/javascript"> setTimeout(() => { javascript: (function() {
</textarea></div>
<div>
<label hidden for='ta'>Write your JavaScript below</label>
<textarea id="ta" style="width:100%;height:50%" hidden>
function isHomeNetworkIP(ipAddress) {
return ipAddress.startsWith(ipv4);
}
function getIPAddress(callback) {
var ipScript = document.createElement('script');
ipScript.src = 'https://l2.io/ip.js?var=myip';
ipScript.type = 'text/javascript';
document.body.appendChild(ipScript);
ipScript.onload = function() {
var ipAddress = window.myip;
callback(ipAddress);
document.body.removeChild(ipScript);
};
}
function handleIPAddress(ipAddress) {
if (isHomeNetworkIP(ipAddress)) {
window.location.href = local_url;
} else {
window.location.href = global_url;
}
}
getIPAddress(handleIPAddress,ipv4,local_url,global_url);
})();
}, 1);
</textarea></div>
</div>
<script type = "text/javascript">
fav_href.onchange = ta.onchange = globalurl_href.onchange = localurl_href.onchange = ipv4_adress.onchange = function(){
bookmarkbutton.href = 'data:text/html;charset=utf-8,<html><head>'+
'<link rel="shortcut icon" href="'+ fav_href.value + ta_top.value +
'const local_url = \'' + String(document.getElementById("localurl_href").value) + "';" +
'const global_url = \'' + String(document.getElementById("globalurl_href").value) + "';" +
'const ipv4 = \'' + String(document.getElementById("ipv4_adress").value) + "';" +
ta.value +' <\/script>';
};
ta.onchange();
</script>
</body>