hansolo / steelseries-canvas Goto Github PK
View Code? Open in Web Editor NEWThe HTML5 Canvas port of the SteelSeries component library. Mainly contains gauges.
The HTML5 Canvas port of the SteelSeries component library. Mainly contains gauges.
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
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
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.
Hello!
When using setValueAnimated(value), when digitalFont=true and value equals to minValue, the lcd doesn't displays with lcdFontName but with stdFontName...
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
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,
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!
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
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
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
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 :( ...
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>
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.
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.
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
Thanks.
Pierre
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.
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
})
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
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.
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');
}
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.
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!
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
I would like to sort of "combine" the gauges to show different values at the pointer and the lcd, e.g.
Can this be made possible?
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.
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!
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
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
});
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.