Custom widget

[jkandasa]

@esawyja You have to add gauge.min.js as mentioned here,
.

Once done, reload your browser.

[esawyja]

Hi
Sorry yes I did, I just forgot to include the screenshot, still not seeing the gauge, any other suggestions please

[jkandasa]

@esawyja can you post your gauge HTML template and javaScript code?

[esawyja]

Sure, see below

Below is the template file

<div id="wrapper" style="text-align: center">    
  <canvas id="my-gauge-${uuid}" style="display: inline-block;"></canvas>
  <div style="font-size:21px" id="textfield--${uuid}"></div>
</div>
<script>
  var CustomTextRenderer = function(el){
    this.el = el;
    this.render = function(gauge) {
      this.el.innerHTML = gauge.displayedValue.toPrecision(3);
     }
  }
  CustomTextRenderer.prototype = new TextRenderer();
  var cs = new CustomTextRenderer(document.getElementById("textfield--${uuid}"));
  var opts = {
    lines: 32,
    angle: 0,
    lineWidth: 0.24,
    pointer: {
      length: 0.9,
      strokeWidth: 0.035,
      color: '#000066'
    },
    limitMax: 'false', 
    percentColors: [[0.0, "#2B31CF" ], [0.60, "#37CF32"], [1.0, "#ff0000"]],
    strokeColor: '#E0E0E0',
    generateGradient: true
  };
  var target = document.getElementById('my-gauge-${uuid}');
  var gauge = new Gauge(target).setOptions(opts);
  gauge.animationSpeed = 3;
  gauge.maxValue = 40.0;
  gauge.setMinValue(-30.0);
  gauge.setTextField(new CustomTextRenderer(document.getElementById("textfield--${uuid}")))
  gauge.set(${temperatureSen.value});
</script>

[jkandasa]

@esawyja I use this lib and works as expected for your script, https://cdnjs.cloudflare.com/ajax/libs/gauge.js/1.2.1/gauge.min.js

[esawyja]

mmmh ok, then it must be something else

Still getting nothing

Even using Microsoft edge after clearing browser cache, history etc

[esawyja]

This is how I clear the cache

[jkandasa]

@esawyja I have updated this script on our demo server too. You can have a look at http://demo.mycontroller.org/#/dashboard, you can see a dashboard named esawyja

Steps:

1. Create UID tag for your temperature sensor
2. Create Javascript to return value to HTML template
3. Create HTML template
4. Add you javaScript on script files, reload MC server page on your browser
5. Create custom widget with template(step#3) and script(step#2), done!

IMPORTANT: I believe you are with latest SNAPSHOT version.

[esawyja]

aaah ok, so it is something on my computer locally, do you need any external programs etc to display this, I don't see the gauge on the demo server either

[jkandasa]

@esawyja Yes, I see the issue with firefox. I am most of the time with google chrome, hence did not notice this issue.

Thank you for your patience. I will check why this is not happening in FF browser.

[esawyja]

No thank you for the wonderful support, let me download Chrome and see what happens

[esawyja]

Ok confirmed, issue is with FF, works with Chrome

[jkandasa]

@esawyja Created a ticket to track this issue https://github.com/mycontroller-org/mycontroller/issues/338

[esawyja]

Thank you!!!

[esawyja]

Hi all
Did something change with the build

As when I run the scripts after I've upgraded I get this

{
  "uuid": "11d7d0c8-45da-4bc0-988b-40f83bcd7d0e",
  "temperatureSen": {
    "id": 7,
    "uid": "upstairs-temp",
    "resourceType": "SENSOR_VARIABLE",
    "resourceId": 255,
    "resourceName": "[G]:MySensors >> [N]:50:Kiklo Temperature and Hum >> [S]:1:Temperature >> [SV]:Temperature"
  }
}

The UID tag entry seem ok to me

Regards

[jkandasa]

@esawyja What is the issue are you seeing?

[esawyja]

Hi
I don't see the gauges anymore and it does not return a reading for the sensor when I run the script, what I posted above is it, I remember with the previous version, I got the temp reading in the output. Or did that change?
Thanks

[jkandasa]

@esawyja

Yes, there is a change. You have to get resource by calling,

var temperatureSen = mcApi.uidTag().getByUid("my-sensor-1").getResource(); 

[esawyja]

mmmh now I'm getting a new error....

[esawyja]

I do get the readings now, when I run the script, the gauge.min.js is accessible, just the gauge does not want to work, with the error above... Please anyone? I'm out of ideas