Hi all,
I have found steelseries.js java library, and am looking for info how to use it in habpanel widgets?
I found a lot of information, and i have read that habpanel is using angularjs and the lib is in javajs
https://search.maven.org/search?q=SteelSeries
demo website : https://nicolas-van.github.io/steelseries/
and html 5 canvas is not supported in habpanel ?
I created a html page and displayed into a widget
i have the folowing files in the /conf/html folder :
my files :
- rds2.css
- meter.html
- meter.js
libs :
- steelseries-min.js
- steelseries-min.js.map
- steelseries.js
- tween-min.js
- tween.js
rds2.css
/* from homekit-theme.css */
:root {
font-weight: 100;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
supported by Chrome and Opera */
}
:root {
/* Basic HABpanel styles */
--body-bg: #000000;
--body-color: #a4a4a4;
--primary-color: #bf26bf;
--box-bg: rgba(255, 255, 255, .01);
--header-bg: var(--body-bg);
/* General widget styles */
--widget-design-bg: #191716;
--widget-text-color: #a4a4a4;
--widget-border-radius: 5px;
--widget-box-shadow: 0 1px 8px 0 rgba(113, 133, 80, 0.8), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 2px 1px -1px rgba(0, 0, 0, .12);
/* Icon colors */
--icon-color-filter: invert(34%) sepia(100%) hue-rotate(116deg) saturate(1000%);
/* Should be aligned with --primary-color */
--icon-color-off-filter: invert(60%) sepia(80%) hue-rotate(180deg);
--icon-backdrop-filter: invert(60%) sepia(100%) hue-rotate(165deg) opacity(15%);
/* Chart widget */
--chart-stroke: #456;
--chart-fill: #89a;
--chart-tooltip: #fff;
/* Color picker widget */
--colorpicker-border: #191716;
--colorpicker-stroke: #456;
--colorpicker-fill: #89a;
/* Image widget */
--image-border: #3ff308;
/* Switch widget */
--switch-off-color: #89a;
/* Slider widget */
--slider-pointer-color: #234;
--slider-pointer-bg-color: #def;
--slider-ceil-color: #def;
--slider-bubble-bg-color: #09120f;
--slider-bubble-border-color: #fff;
--slider-bubble-color: #a4a4a4;
}
meter.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="rds2.css" rel="stylesheet" />
</head>
<script id="scriptrds"></script>
<body id="bodyid" onload='init()'>
<div id="root" class="d-flex flex-column justify-content-center flex-grow-1" style="position: absolute; top: 10px; left: 10px; width: calc(100% - 20px); height: calc(100% - 20px);"></div>
<script src="meter.js"></script>
</body>
</html>
meter.js
const app = document.getElementsByTagName('head')[0]
const approot = document.getElementById('root')
const appscript = document.getElementById('scriptrds')
// Add scripts
var newScript = document.createElement("script")
newScript.setAttribute('type', 'text/javascript')
newScript.setAttribute('src', 'tween.js')
app.appendChild(newScript)
var newScript2 = document.createElement("script")
newScript2.setAttribute('type', 'text/javascript')
newScript2.setAttribute('src', 'steelseries.js')
app.appendChild(newScript2)
//add gauge
/* <canvas id='canvas1' width='200' height='200'>
No canvas in your browser...sorry...
</canvas>*/
var newScript3 = document.createElement('canvas')
newScript3.setAttribute('id', "canvas1")
//newScript3.setAttribute('width', "calc(100% - 20px)")
//newScript3.setAttribute('height', "calc(100% - 20px)")
newScript3.setAttribute('class', "d-flex flex-column justify-content-center flex-grow-1")
newScript3.setAttribute('style',"zoom: 0.9 -ms-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); -ms-transform-origin: 0 0; -moz-transform-origin: 0 0; -o-transform-origin: 0 0; -webkit-transform-origin: 0 0; transform-origin: 0 0;")
approot.appendChild(newScript3)
var c = document.getElementById('canvas1')
var ctx = c.getContext ("2d")
ctx.scale (0.9 , 0.9)
//Add gauge script
function init()
{
// Define some sections
var sections = Array(steelseries.Section(0, 25, 'rgba(0, 0, 220, 0.3)'),
steelseries.Section(25, 50, 'rgba(0, 220, 0, 0.3)'),
steelseries.Section(50, 75, 'rgba(220, 220, 0, 0.3)'));
// Define one area
var areas = Array(steelseries.Section(75, 100, 'rgba(220, 0, 0, 0.3)'));
// Create one radial gauge
var radial1 = new steelseries.Radial(
'canvas1', {
gaugeType: steelseries.GaugeType.TYPE2,
size: 300,
section: sections,
area: areas,
titleString: 'Temp',
unitString: '°C',
minValue: -10,
maxValue: 50,
pointerType: steelseries.PointerType.TYPE8,
frameDesign: steelseries.FrameDesign.GOLD,
});
// Create a request variable and assign a new XMLHttpRequest object to it.
var request = new XMLHttpRequest()
// Open a new connection, using the GET request on the URL endpoint
request.open('GET','http://192.168.3.205:8080/rest/items/achterdeurtemp2', true)
request.onload = function() {
// Begin accessing JSON data here
var data = JSON.parse(this.response)
if (request.status >= 200 && request.status < 400) {
radial1.setValueAnimated(data.state);
} else {
//console.log('error')
const errorMessage = document.createElement('marquee')
errorMessage.textContent = `Gah, it's not working!`
app.appendChild(errorMessage)
}
}
// Send request
request.send()
// Let's set some values...
//radial1.setValueAnimated(35);
//itemValue('Weather_GIS_ConditionIcon')
}
Habpanel widget
<iframe id="frame" class="d-flex flex-column justify-content-center flex-grow-1" style="position: absolute; top: 10px; left: 10px; width: calc(100% - 20px); height: calc(100% - 20px);" src="/static/meter.html" frameborder="no" scrolling="no" ></iframe>
Following things i have to find out :
I did a lot of reading on these points, but did find the glue on how to get everithing fixed.
How to get the config settings of this lib into habpanel settings so that we can select the look and feel of the gauges as on this demo page. https://nicolas-van.github.io/steelseries/
How to scale dynamical the gauge into the panel
How to connect in habpanel the item.value to the gauge, now it is coded in meter.js
Habpanel Widget (under construction)
iframe gauge.widget.json (8.0 KB)