Creating Links to external URLs or other Sitemaps in BasicUI

Unfortunately there is no link element for sitemaps. To create links, I integrated the autolinker of gregjacobs (https://github.com/gregjacobs/Autolinker.js) into my sitemaps.

This works as described in Customizing Basic UI with CSS for CSS.

In the directory /etc/openhab2/html you need

  • the file inject_autolinker.html
  • the autolinker directory of gregjacobs

Add a web element to the sitemap:
Webview url="/static/inject_autolinker.html"
If you use blocks, it must be in every single block. You should place it at the end, otherwise the headings are hidden.

inject_autolinker.html:

<!-- 
Place in the sitemap (in every block):
Webview url="/static/inject_autolinker.html"
-->

<head>
    <style>

    </style>
</head>

<body>
     <script src="../static/autolinker/dist/Autolinker.js"></script>
    
    
    <script type="text/javascript"> 
        var contents = window.parent.document.body.getElementsByClassName("mdl-form__label");
        var autolinker = new Autolinker( { newWindow: false, truncate: 25 } );        
        
          for (var i=0, max=contents.length; i < max; i++) {
            var content = contents[i];
            content.innerHTML = autolinker.link(content.innerHTML);
          }        
        
        

    </script>    
       
    
</body>
3 Likes

Nice solution. Thanks for posting. How well does it work through myopenhab.org to look to another sitemap? Do you have to use the myopnhab.org address or the kan address? Does it work in there phone apps too? I suspect not given how webviews in general don’t work in the Android app when not on the lan.

  • BasicUI: works
  • ClassicUI: no
  • Android App: no
  • myopenhab: not tested

I just use it to link to the webinterfaces of my local network devices.

I made something similar where you can define titles and other parameters for links as well like [Title|url], yours should work with myopenhab too, autolinker is a huge script for the job though.

Yes, it’s absolutly not a clean and good solution. An Item type ‘Link’ would be better.

1 Like
Switch item=fboxReboot label="Reboot Fritz!Box |FritzUI|http://192.168.178.1" icon="control_reset" mappings=[ON="REBOOT"]

a
{
    color: #ffffff55;
    text-decoration: none;
    margin-left: 10px;

    -webkit-transition: color 0.4s;
    -moz-transition: color 0.4s;
    -ms-transition: color 0.4s;
    -o-transition: color 0.4s;
    transition: color 0.4s;
}

a i
{
    font-size: 21px;
    vertical-align: middle;
    margin-bottom: 3px;
}

a:hover
{
    color: #ffffffff;
    text-decoration: underline;
}

        //look for urls and apply link html
        $(".mdl-form__label, .mdl-form__text",$parentdoc).each(function()
        {
            var $words = $(this).text().split("|");
            for (i in $words) 
            {
                var $word = $.trim($words[i]);
                if (($word.indexOf('http://') == 0) || $word.indexOf('https://') == 0)
                {
                    var $link = $word;
                    var $title = $words[i-1];
                    //console.log("link","title: "+$title,"link: "+$link);
                    $words[i-1] = ""
                    $words[i] = "<a target=\"_blank\" href=\"" + $link + "\" class=\"link_override\"><i class=\"material-icons\">link</i>" + $title + "</a>";
                }
            }
            $(this).html($words.join(' '));
        });

just some quick copypasta, you’ll have to adjust the code probably

1 Like

Hello,
can you please explain in which files you have to write the code?
Many many Thanks!

See Customizing Basic UI with CSS
It shows how to inject Javascript and CSS.
DimAngelos post descibes the file locations.

To All,

Disclaimer - not AT ALL a full solution, but I just stumbled on this (perhaps this is well known… it wasn’t to me)…

BasicUI Text Items with a label that contains ‘http://’ are rendered by Google Chrome (neither IE nor Opera operate this way) as hyperlinks.

Cheers!

Mike

3 Likes