Image url

I found two problems with this simple command in sitemap

  1. Dynamic url
    Can url from “image url” be parametrize ?
    Ie. I don’t have constant link, but dynamic, which include date.
    When I declare a string, assign url I got "expecting Rule String"
    Any work around of it ?

  2. Improper resolution if image
    When I use image url, I got image twice bigger then real. Browser is telling me that picture was up scaled.
    How to make it 1:1 ?

  1. No, it is static. What some people have done is write a script that copies the latest image to a static name that the sitemap picks up. With the refresh interval it will get the new version of the image.

  2. I have no recommendations. I don’t see a way to control the resolution on an Image tag.

There are changes and updates being made in OH 2’s UIs so perhaps these limitations are addressed there.

How it ought to work, in my opinion anyway, is Image item=YourImageItem would use the state of the item YourImageItem as a URL, and clients would refresh the image whenever either 1) the refresh cycle called for it, or 2) the state of the item YourImageItem changed. I don’t think that works in OH1, and I haven’t found the ESH documentation that would explain what sitemap widgets do.

That is up to the client, and I’ve not seen a client that allows the image to be its natural size.

It s a pity :frowning:

I checked on different browsers, result is same. I am just link local png, in properties of this picture, served by openhab server Firefox is telling me that image was upscaled. Path (in properties ) is diiff then original, it looks like a proxy:
http://192.168.1.106:8080/proxy?sitemap=moj.sitemap&widgetId=0101000000&t=1454410276116

Same picture served by lighttpd server on same physical machine, reading by same browser is with correct resolution.

I have checked charts and it same result. Under openhab url all charts are up scaled to full width of webpage /openhab GUI. When copy -paste image /chart url to new window it shows me it with correct resolution.
Does somebody know why ?
Is it any option in Openhab’s webserver which change image size to reach window size ?

It looks ugly on GUI :frowning:

I have checked html code and it looks that Openhab add style options:
<img style="padding:10px;width:90%" src="proxy?sitemap=moj.sitemap&amp;widgetId=0101000000&amp;t=1458658712801"></img>

This width option cause that image is up scaled. How can I change it ?

Does anyone has a problem with up scaled images ?

You could create your own private variation of the Classic UI, changing this file to your liking, building a new org.openhab.ui.webapp-1.8.3-SNAPSHOT.jar, removing the equivalent JAR file from server/plugins, and adding your JAR to the addons directory.

I also suffer from similar problem.
Has anyone created such a JAR file, and can upload it?
(or is there another solution?)

I use a html page that I add as last element to my sitemap to change some styles (e.g. hide the navigation bar, the dummy frame & also change the way how images are shown). Hope this helps as inspiration:

Webview url="/static/HideHeader.html"
<head>
    <style>

    </style>
</head>

<body>
    <script type="text/javascript">
        function addStyleString(str) {
            var node = window.parent.document.createElement('style');
            node.innerHTML = str;
            window.parent.document.head.appendChild(node);
        }

        var _headers = window.parent.document.body.getElementsByClassName("mdl-layout__header mdl-layout__header--scroll navigation navigation-home");
        var _header = _headers[0];
        _header.style.display = "none";

        // Hide the last web element of the page ...
        _webViewElements = window.parent.document.body.getElementsByClassName("mdl-form__row mdl-form__row--height-auto mdl-cell mdl-cell--12-col ");
        _lastWebViewElement = _webViewElements[_webViewElements.length - 1];
        _lastWebViewElement.style.display = "none";

       // Change the style for images ...
       addStyleString('div > img { border-radius: 15px !important; height: 200px !important; width: 200px !important; position: relative; float: right; }');
    </script>
</body>

with kind regards,
Patrik