Steelseries.js gauge

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)

1 Like

Have some one a linkt that explains how to use .js into habpanel

regards

Ronny

Hi

That’s an excellent post, I wish I understood more of it… :frowning_face:

I’m completely shooting in the dark here, but is what you’re looking for anything to do with how Item values are used in SVG files?

Thanks for your respons.

I have to look again into this topic, but i all ready searched the forum om using .js into habpanel.
I found some solutions, for some parts of the main question.

Regards
Ronny

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.