Data centred in gauge LCDs (RESOLVED)

Internet SteelSeries Gauges
1

I would dearly love to show all the LCD data values centred, like wind direction appears to be. . . Is there a global setting for this somewhere?

2

No sorry, they were intended to mimic an LCD display so are always right justified.

The wind direction gauge is different because it uses a fixed three digit display and always displays three digits.

3

Thanks, Mark.

4

How about a global setting for the width of the LCDs themselves?

5

Cracked it! Down from 0.4 to 0.3 * gauge width :slight_smile:

Might play about with this a bit more. . .

EDIT: Rain and UV now down to 0.25 :smiley:

6

As you have found the relative dimensions are all hard coded.

7

Yes :slight_smile:

Hope you don’t mind me throwing up these questions. Truth be told, I enjoy looking for things like this. But it would be a lot simpler if I knew how to combine/minify files so I could just modify, e.g., steelseries.js instead of steelseries_tween.min.js 8O

8

Oh! Definitely work on the source files, it is FAR easier.
Use Google Closure Compiler to minify it again

9

I know!

Use Google Closure Compiler to minify it again

I’ll check that out. Thanks, Mark.

10

Cracked the centred data values, too :smiley:

(Once I’d managed to find out how Canvas ctx.textAlign works. . .)

EDIT: And managed to use Google Closure Compiler :smiley:

11

Only just realised that other sites (and the Wiki setup details) show an LCD font. . . mine doesn’t, but I don’t remember changing line 48 in gauges.js!

12

Bitsostring where are these settings located?

Chuck

13

gauges.js, line 48…

            digitalFont        : false,                  // Font control for the gauges & timer
14

Which ones?

15
Cracked the centred data values, too :D

(Once I’d managed to find out how Canvas ctx.textAlign works. . .)

EDIT: And managed to use Google Closure Compiler :smiley:

This one. Sorry should have been more specific.

Thanks
Chuck

16

OK. For completeness, note that I have changed my UV gauge from TYPE3 to TYPE4 in line 2389 of gauges.js so it looks the same as Rain. If you have other gauge types you may need to search for more locations than the following.

LCD width is in lines 151 and 1416 of steelgauges.js, e.g.

151        var lcdWidth = imageWidth * 0.3;    // was 0.4

Factor of 0.3 was OK for most but I used 0.25 for UV and Rain.

Centred data needs changes to two pairs of lines in steelgauges.js: 291/306 and 1851/1867, e.g.

291            ctx.textAlign = 'center';   // was 'right'; see line 306

306            ctx.fillText(value.toFixed(lcdDecimals), lcdPosX + lcdWidth * 0.5, lcdPosY + lcdHeight * 0.5 + lcdFontHeight * 0.38, lcdWidth * 0.9);   // was lcdPosX + lcdWidth - lcdWidth * 0.05; see line 291

because it is not enough simply to alter ctx.textAlign, you have to alter the ctx.fillText X reference position as well.