hansolo / steelseries-canvas

The HTML5 Canvas port of the SteelSeries component library. Mainly contains gauges.

This repo represents the current state of the steelseries javascript canvas port. There is no documentation or build automation, yet.

The minified versions are produced (generally!) using the Microsoft Ajax Minifier: http://ajaxmin.codeplex.com/

I use the following simple batch file: @echo Minifying %~n1 to %~n1.min.js ... @"C:\Program Files (x86)\Microsoft\Microsoft Ajax Minifier\ajaxmin.exe" -JS "%1" -clobber:true -out "%~p1%~n1-min.js" -enc:in utf-8

See my Google+ page for announcements

steelseries-canvas's Issues

Radial Dial numbered ticks display error

I seem to be getting incorrectly numbered ticks on my radial dials as seen in the attached image. The number sequence should be 23,23.5,24,24.5,25 etc. It seems like the half increments are being rounded up... Is it possible to not display the half increment numbers to avoid this confusion? or have the option to change this behaviour?

var bat_breakpoints = Array(steelseries.Section(23,24, 'rgba(220,0,0,0.3)'),
                            steelseries.Section(24,25.5, 'rgba(0,220,0,0.3)'),
                            steelseries.Section(25.5,27, 'rgba(220,220,0,0.3)'),
                            steelseries.Section(27,28, 'rgba(220,0,0,0.3)'));
var bat_areas = Array(steelseries.Section(23,24, 'rgba(220,0,0,0.3)'),
                      steelseries.Section(27,28, 'rgba(220,0,0,0.3)'));

var radial_bat1 = new steelseries.Radial(
    'canvas_bat1', {
    section: bat_breakpoints,
    area: bat_areas,
    titleString: 'Battery 1',
    unitString: 'V',
    minValue: 23,
    maxValue: 28,
    pointerType: steelseries.PointerType.TYPE11
    });

var radial_bat2 = new steelseries.Radial(
    'canvas_bat2', {
    section: bat_breakpoints,
    area: bat_areas,
    titleString: 'Battery 2',
    unitString: 'V',
    minValue: 23,
    maxValue: 28,
    pointerType: steelseries.PointerType.TYPE11
    });

Question About Steel Canvas

Dear Sir,

I am a beginer android developper and i have devellope some apk for my personnal use . I have a question about your very good Canvas library is it free of use for publish an apk on my console google play.

best regards

M khales naim

Problem to link data receive from my websocket js file to update the setValueAnimated of a gauge

thank you again for that awsome librairy

i have some problem to pass values from websocket file receive good

to

radial1.setValueAnimated(25);
radial2.setValueAnimated(41);
radial3.setValueAnimated(40);
radial5.setValueAnimated(VALUE);
compass1.setValueAnimated(50);

Finally I make it work with websocket amazing the uniq problem is that when the new value arrived the canvas go to zero '0' than go to the next value arrived with websocket

[FR] Feed different values to LCD

I would like to sort of "combine" the gauges to show different values at the pointer and the lcd, e.g.

• Windspeed: Show direction with the pointer, show windspeed on the lcd
• Radial Bargraph: Show Rain intensity on the bargraph, show rain volume on the lcd

Can this be made possible?

Added some functionality, how do I pass it to you?

Excellent library, I'm using it in FreeBoard www.42.co.nz/freeboard . ([email protected])

Ive added a number of extras to my local copy, how do I submit those back to you, I have read-only access?

My changes:
Added VerticalRadial EAST
Fixed neg/pos values in windDirection
Added rotateFace to compass, and fixed compass bug which causes rotate madness!
Reversed direction in level
Added rotateFace:false to Level dial. Set true to get level to be fixed and face to rotate
Added headerText to displaySingle
Added detailText to displayMulti to add legend before small value, eg 'Last:'
detailText:, detailTextVisible
Added linkOldValue:false and setAltValue() to displayMulti. true disengages copy from value to oldvalue, so we can set it specifically, eg average
Added extra options to windInstrument and compass
Added extra options to windInstrument and compass
degreeScaleHalf:true - cause -180 to 180 scale, useful for apparent wind
pointSymbolsVisible:false - dont print pointSymbols, useful for apparent wind
Agressively limited value range to -180/180 or 0/360 as required

Connect SteelSeries with Mysql database

setting min & max measured values with radialVertical control

Hello Gerrit and other!
I don't know if it's an omission or something I misunderstood: is it normal that radialVertical doesn't have these methods

• setMinValue
• setMaxValue
• setMinMeasuredValue
• setMaxMeasuredValue

Thanks.
Pierre

GradientWrappers must start at zero - limitation

It appears the current gradientwrapper range must always start at 0 or the gradients are not calculated properly. To get around this limitation I changed

fraction = currentValue / gradRange;

to
if (minValue > 0) {
fraction = (currentValue - (maxValue - minValue)) / gradRange;
} else {
fraction = currentValue / gradRange;
}

there may be a better way but this worked for me.

Cannot view/download steelseries-min.js file

When attempting to view the above file you get an error message "Something went wrong."

As a workaround, if you particularly want the minimised version, download the whole repository as a zip. This will contain a copy of the file.

https://github.com/HanSolo/SteelSeries-Canvas/zipball/master

The GitHub team are investigating this issue and it seems to be quite deeply rooted :( ...

Possibly converting to jQuery

Hi there.

I'm loving your library, however I'm a little unhappy with it's size, I'd like to suggest a conversion to using jQuery to help with some of the repetitiveness.

A very short example I've prepared... I liked the idea of really gutting the codebase but it's huuuuge man!

var radialGaugeDefaults = {
    gaugeType: steelseries.GaugeType.TYPE4,
    size: 200,
    minValue: 0,
    maxValue: undefined,
    niceScale: true,
    threshold: undefined,
    section: null,
    titleString: "",
    frameDesign: steelseries.FrameDesign.METAL,
    frameVisible: true,
    backgroundColor: steelseries.BackgroundColor.DARK_GRAY,
    backgroundVisible: true,
    lcdColor: steelseries.LcdColor.STANDARD,
    lcdVisible: true,
    lcdDeicmals: 2,
    digitalFont: false,
    fractionalScaleDecimals: 1,
    ledColor: steelseries.LedColor.RED_LED,
    ledVisible: true,
    customLayer: null,
    forgroundType: steelseries.ForegroundType.TYPE1,
    foregroundVisible: true,
    playAlarm: false,
    alarmSound: false,
    tickLabelOrientation: undefined,
    trendVisible: false,
    trendColors: [steelseries.LedColor.RED_LED,steelseries.LedColor.GREEN_LED,steelseries.LedColor.CYAN_LED]
}

//*************************************   C O M P O N O N E N T S   *****************************2*******************
var radial = function(canvas, parameters) {
    var cfg = $.extend({}, radialGaugeDefaults, {
        area: null,
        unitString: "",
        pointerType: steelseries.PointerType.TYPE1,
        pointerColor: steelseries.ColorDef.RED,
        knobType: steelseries.KnobStyle.SILVER,
        knobStyle: steelseries.KnobStyle.SILVER,
        thresholdVisible: true,
        minMeasuredValueVisible: false,
        maxMeasuredValueVisible: false,
    }, parameters || {});

    if (cfg.maxValue === undefined)
        cfg.maxValue = cfg.minValue + 100;
    if (cfg.threshold === undefined)
        cfg.threshold = (cfg.maxValue - cfg.minValue) / 2
    if (cfg.tickLabelOrientation === undefined)

snip

var radialBargraph = function(canvas, parameters) {
    var cfg = $.extend({}, radialGaugeDefaults, {
        useSectionColors = false,
        valueColor = steelseries.ColorDef.RED,
        labelNumberFormat = steelseries.LabelNumberFormat.STANDARD,
        valueGradient = null,
        useValueGradient = false
    }, paramters || {});

    if (cfg.maxValue === undefined)
        cfg.maxValue = cfg.minValue + 100;
    if (cfg.threshold === undefined)
        cfg.threshold = (cfg.maxValue - cfg.minValue) / 2
    if (cfg.tickLabelOrientation === undefined)
        cfg.tickLabelOrientation = cfg.gaugeType === steelseries.GaugeType.TYPE1 ? steelseries.TickLabelOrientation.TANGENT : steelseries.TickLabelOrientation.NORMAL   

---- The above suggestion is based on the most cursory of looks, but realistically it seems you could use inheritance to reduce the codebase too.

I know a switch to jquery would mean you need to trim at least 30k from the library to make it worth the effort, but I'm sure this can be done, and more.

I'll even help :D

setAltValue in MultiDisplay not working

Orginal code:
this.setAltValue = function (altValue) {
if (altValue !== altValue) {
altValue = altValue;
this.repaint();
}
return this;
};

When I tried this, it never changed value.

Fixed Code:
this.setAltValue = function (altValueNew) {
if (altValueNew !== altValue) {
altValue = altValueNew;
this.repaint();
}
return this;
};

Thankyoucomeagain

Wrong font in special case

Hello!
When using setValueAnimated(value), when digitalFont=true and value equals to minValue, the lcd doesn't displays with lcdFontName but with stdFontName...

Value shows incorrectly when minValue applied

This screenshot shows an example of the problem I'm running into:

Source is a modified version of demoRadial.html that shows two TYPE4 radial gauges side-by-side. They're set to show the same value, but with differing minValue's (the first being set to 0, the second to 10).

Issue appears to affect TYPE4 linear bargraphs as well.

suggestion: removing translate just before ctx.restore()

There is a number of places where a translate() is called just before ctx.restore(), e.g. at

SteelSeries-Canvas/steelseries.js

Lines 417 to 418 in 80a71a1

	ctx.translate(-centerX, -centerY);
	ctx.restore();

but since translation goes into the transformation matrix and this is part of the save()-ed state and thus restore()-ed it should be possible to remove the translate() call.

Commercial Usage

Hi Mcrossley / Hansolo.

Could you please tell me if this library is available for commercial usage? I am looking to integrate it into a small project of mine.

Kind Regards and thanks!

Dial Values not scaling

Hi Mark,
I've just updated from 0.11.13 of the SteelSeries library to 0.14.14. It looks like the values on the Radial Gauge don't scale up ie make the gauge bigger the numbers look smaller.

Thanks GtC

Clock.setSeconds() weirdness

I'm using the Clock to show the time stamp of data from a server machine. It is therefore disabled. The setter functions are used to set the hands accordingly.

The hours and minutes seem to work. The seconds however are working strange. Once in a while the seconds hand will move. But usually doesn't. While I'm pretty sure the seconds passed are in the expected range of 0 to 59.

PHP 8.0 or 8.1

Anyone with the skills looking at making this PHP 8.0 (1) compatible? Love the looks of the gauges, but I lack any developmental skills necessary to fix it.

Parsererror: Syntax Error: Unexpected end of json input

This set of gauges is used on thousands of weather site all over the world.

SteelSeries-Gauges / Mysql

What do you recommend to show a data generated every 15 seconds in my database hosted on a remote server, specifically in the following component or if you have any ideas that can guide me

function init() {
    // Initialzing gauge

	var sections = [steelseries.Section(0, 70, 'rgba(255, 0, 0, 1.0)'),
             steelseries.Section(70, 95, 'rgba(255, 255, 0, 1.0)'),
              steelseries.Section(95, 100, 'rgba(0, 255, 0, 1.0)') ];

    single1 = new steelseries.DisplaySingle('canvasSingle1', {
                        width: 120,
                        height: 50,
		    section: sections
                        })

radialBargraph

Hi
It seems at the radialBargraph the declaration of minMeasuredValue and maxMeasuredValue value is missing. I got an error "ReferenceError: minMeasuredValue is not defined"
After i insert :
// Properties
var minMeasuredValue = maxValue;
var maxMeasuredValue = minValue;
at Line 1366 (like linear gauge) it's ok

Best Regards
Othmar

playAlarm

I have a doubt with
playAlarm = (undefined === parameters.playAlarm ? false : parameters.playAlarm),
alarmSound = (undefined === parameters.alarmSound ? false : parameters.alarmSound),

It doesn't run, I already have added alarm.mp3 in the js folder as indicated by the path.

// Create audio tag for alarm sound
var audioElement;
if (playAlarm && alarmSound !== false) {
var audioElement = doc.createElement('audio');
//audioElement.setAttribute('src', alarmSound);
audioElement.setAttribute('src', 'js/alarm.mp3');
audioElement.setAttribute('preload', 'auto');
}

Addition of a wind speed canvas with maximum and average

Hello, I have been using your library for several years. http://www.meteo-bindernheim.fr/ A question comes up frequently, can we add the indication of the maximum wind speed.
My station allows me to have the average speed and the maximum on a gust of wind but I do not know how to add the two indications on the same radial type gauge.
Do you have an idea?
The goal would be to make a gauge as for the direction of the wind.
Thanks in advance!

Licensing

Hi Mark, Gerrit,
Awesome library, very cool with lots of customization options. I was wandering if one of you could comment on what type of licensing you are planning on using for this library. I noticed that JavaSwing library is licensed under BSD, but I was not able to find anything on js version.

Thanks!
Martin

P.S. I read other comments and from my perspective it would be cool if this library could be kept independent from other libraries... just fyi.

section, minvalue, maxvalue update problems

Hi,
I use node-red and I need to update section definition, maxvalue and minvalue of my gauge radial.
I set new value but nothing happend.
To update my gaugeradial with new configurations I must change tab and return to the tab where is my gauge,
now I can see a correct visualization of section, maxvalue and minvalue.
Any ideas?
Best Regards,

This is my code in an edit template node:

<script src="/myjs/tween-min.js"></script> <script src="/myjs/steelseries-min.js"></script> <script> var min_value_in; var max_value_in; var allarme_inf_in; var allarme_sup_in; var sections_p_in; var P_in; (function(scope){ scope.$watch('msg', function(msg) { if (typeof(msg.minvalue_in) != "undefined") min_value_in = msg.minvalue_in; if (typeof(msg.maxvalue_in) != "undefined") max_value_in = msg.maxvalue_in; if (typeof(msg.allarme_inf_in) != "undefined") allarme_inf_in = msg.allarme_inf_in; if (typeof(msg.allarme_sup_in) != "undefined") allarme_sup_in = msg.allarme_sup_in; if (typeof(msg.value_in) != "undefined") P_in.setValueAnimated(msg.value_in); }); })(scope); P_in = new steelseries.Radial('P_in', { gaugeType: steelseries.GaugeType.TYPE5, size: 190, section: [steelseries.Section(min_value_in, allarme_inf_in, 'red'), steelseries.Section(allarme_inf_in, allarme_sup_in, 'green'), steelseries.Section(allarme_sup_in, max_value_in, 'red') ], // area: areas_p_in, titleString: "P_in", unitString: "bar", threshold: allarme_inf_in, minValue: min_value_in, maxValue: max_value_in, thresholdRising: false, lcdVisible: true, }); P_in.setFrameDesign(steelseries.FrameDesign.STEEL); P_in.setPointerType(steelseries.PointerType.TYPE6); P_in.setForegroundType(steelseries.ForegroundType.TYPE4); P_in.setValueAnimated(0); </script>

timeZoneOffsetHour works strangely

If I set the time zone offset hour to something other than zero, it doesn't work correctly unless I also change the offset minute. The code is:

        if (timeZoneOffsetHour !== 0 && timeZoneOffsetMinute !== 0) {
            hour = objDate.getUTCHours() + timeZoneOffsetHour;
        } else {
            hour = objDate.getHours();
        }
        hour = hour % 12;

I simply removed the check for offset minute and it works fine now. Similar problem with the offset minute.

Add ability to pass host element as DOM object, not just text ID

At present you can only pass textual IDs of host elements when creating a gauge component. This makes it difficult to use the library in modern "ID-less" development paradigms where no elements are given any sort of ID. In particular, it impedes creation of MVVM databindings for things like Knockout.js. I'm sure there are other use cases where you would want to pass an DOM element object, like for instance the result of a jQuery selector or and element created in code,

N/A

Making it work with shared canvas

Hi!

I recently discovered this library and I have to say it is awesome!

Do you have any plans supporting a shared canvas?
I intend to use fabricjs and have a single canvas where I position several objects; some of them would be SteelSeries gauges. For now it seems the gauge needs its own canvas.

Thank you!

Very first setValueAnimated() invalidates min/max values.

When using a dial with min- & max indicators, the minimum value is set from here the animation started. Which is wrong because such a value never was passed to the gauge.

playAlarm not implemented with setValueAnimated()

Hi Gerrit,

i think i have found a better place to put issues about steelseries,js

playAlarm() only works with setValue() and not with setValueAnimated()

Glad to meet you on friday.

Guido

Min/MaxMeasuredValue anomalies

Hi,
I've just started playing with your library, and have found a problem with the linear gauge if min & max values have been changed, and min/maxMeasured values are used.
It's probably easiest to see the problem than describe, so here's a simple example:

function init(){
    linear = new steelseries.Linear('canvasLinear', {
                            width: 140,
                            height: 320,
                            lcdVisible: true,
                            minValue: 50,
                            maxValue: 150,
                            thresholdVisible: false,
                            ledVisible: false,
                            lcdDecimals: 0,
                            minMeasuredValueVisible: true,
                            maxMeasuredValueVisible: true
               });
            linear.setValueAnimated(75);
            linear.setMaxMeasuredValue(100);
            linear.setMinMeasuredValue(55);

    linear2 = new steelseries.Linear('canvasLinear2', {
                            width: 140,
                            height: 320,
                            gaugeType: steelseries.GaugeType.TYPE2,
                            unitString: 'deg C',
                            lcdVisible: true,
                            minValue: -10,
                            maxValue: 45,
                            thresholdVisible: false,
                            ledVisible: false,
                            lcdDecimals: 0,
                            minMeasuredValueVisible: true,
                            maxMeasuredValueVisible: true
               });
   linear2.setMinMeasuredValue(5);
   linear2.setMaxMeasuredValue(32);
   linear2.setValueAnimated(19);

}

(sorry, had to strip the html wrapper!)

Cheers

Nick