New Pride Theme for HabPanel (Based on Matrix Theme) - Optimized for iPhone

Tutorials & Examples HABPanel Examples
52

First of all - thx for the great theme - it’s the reason I started to play with habpanel :wink:

Just wanted to share a bit different approach to charts - I use grafana a lot but there was always the problem with https://myopenhab.org/ (remote access) and local grafana as probably many of you noticed, unless using image rendering, which is a bit slow, at least on my rpi (+ latest graphana does not support rendering out of the box on ARM AFAIK at the moment) - and did not want to use any additional hardware unless really needed.

Therefore played a bit with habpanel build-in chart widget - so instead of using

<div class="graph">
			<img width="250" height="100" src="..." />
			<div class="legend">Last 24 hours</div>
    </div>

I use

    <div class="graph">
			<div ng-init='model_nik={
                    "type": "chart",
                    "charttype": "interactive",
                    "service": "influxdb",
                    "period": "D",
		            "axis": {
                      "y": { "ticks": 5 },
                      "y2": { "enabled": true },
                    },
		            "series": [
                        {
                            "axis": "y",
                            "display_line": true,
                            "display_area": false,
                            "item": "FF_Nik_Room_temperature",
                            "name": "Temperature",
                            "color": "var(--pride-2-color)"
                        },
                        {
                            "axis": "y2",
                            "display_line": true,
                            "display_area": true,
                            "item": "FF_Nik_Room_humidity",
                            "name": "Humidity",
                            "color": "#2389da"
                        }
                    
                    ]
                }'>

        	<div class="widget-chart-container">
	      		<widget-chart ng-model="model_nik"></widget-chart>          
	        </div>
        </div>
    </div>

and result

image
image1764×796 116 KB

The main benefit is that the charts are now accessible through home.myopenhab.org (i.e. https://home.myopenhab.org/habpanel/index.html#/view/test2 for my test/wip dashboard) with zero additional setup (no reverse proxy, …) + charts being interactive, as the habpanel chart widget is.

While graphana is much more powerful, but for the stuff I need the build-in habpanel chart widget is more than enough - no graphana needed - and chart loading is instantaneous (while graphana rendering took a couple of seconds on my rpi). Just an idea if someone might find it useful. The dashboard is still WIP, but wanted to share the progress :wink:

EDIT: forgot to add the changes in pride-theme.css - I commented out the original .graph section and added the below content to the end of the css file:

.graph {
	width: 100%;
}
.widget-chart-container {
	height: 230px;
}
.graph .box-content {
	padding: 0px;
}
.graph .chart-tooltip {
	background-color: #808080;
}

EDIT2: attaching complete css as requested: pride-theme.css (25.2 KB)

2 Likes