Auto switch to Grafana PNG for HAB Panel Android tablets

Setup, Configuration and Use Widgets
1

I like Grafana and the charts are rendered fast on PCs but on the wall tablets it is slow. Also seems like the buttons are not responsive till all is rendered.

Is there a way to switch to PNG renderer based on the browser/IP/whatever?

Seems like the widgets are sandboxed a lot. I can not even use Fully kiosk API, not call external HTTP to get back the client, not get the resolution of the tablet screen to make a distinction. Any pointers?

I still use OpenHab 2 :slight_smile: I suppose it is the same later

2

This finally works, Add renderer docker sidecar

renderer:
image: grafana/grafana-image-renderer:latest
container_name: grafana-renderer
environment:
- BROWSER_MIN_WIDTH=100
- BROWSER_MIN_HEIGHT=100
- BROWSER_TIMEZONE=xxx
- TZ=xxx
networks:
- net
restart: unless-stopped

<div ng-init="
    cWidth = (ngModel.sizeX * (config.col_width || 100));
    cHeight = (ngModel.sizeY * (config.col_width || 100));
    
     urlBase = 'https://grafana/grafana/';
    tStamp = Date.now();
    
    androidUrl = urlBase + 'render/d-solo/xxxxx/yyyyy?orgId=1&panelId=' + config.panel_id + '&from=' + config.time_from + '&to=' + config.time_to + '&width=' + renderWidth + '&height=' + renderHeight + '&scale=2&t=' + tStamp;
    
    desktopUrl = urlBase + 'd-solo/xxxxx/yyyyy?orgId=1&panelId=' + config.panel_id + '&from=' + config.time_from + '&to=' + config.time_to + '&refresh=1m'
">

  <style>
    .grafana-container {
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        overflow: hidden;
    }
    .grafana-mobile, .grafana-desktop { width: 100%; height: 100%; }
    .grafana-mobile { display: none; position: relative; }
    .grafana-desktop { display: block; }

    @media only screen and (max-width: 1280px), (pointer: coarse) {
      .grafana-mobile { display: block; }
      .grafana-desktop { display: none; }
    }

    .refresh-btn {
      position: absolute;
      top: 5px; right: 5px;
      background: rgba(0,0,0,0.5);
      color: white;
      border: 1px solid #555;
      border-radius: 3px;
      padding: 5px 10px;
      z-index: 10;
    }

    .full-frame {
        position: absolute;
        top: 0; left: 0;
        width: 100%; height: 100%;
        border: none;
    }
  </style>

  <div class="grafana-container">
    <div class="grafana-mobile">
      <button class="refresh-btn" ng-click="tStamp = Date.now(); androidUrl = urlBase + 'render/d-solo/xxxxx/yyyyy?orgId=1&panelId=' + config.panel_id + '&from=' + config.time_from + '&to=' + config.time_to + '&width=' + renderWidth + '&height=' + renderHeight + '&scale=2&t=' + tStamp">
        <i class="glyphicon glyphicon-refresh"></i>
      </button>
      
      <img ng-src="{{androidUrl}}" style="width: 100%; height: 100%; object-fit: contain; display: block;" />
    </div>

    <div class="grafana-desktop">
      <iframe ng-src="{{desktopUrl}}" class="full-frame"></iframe>
    </div>
  </div>
</div>