Customizing gauge/indicator visuals

[dave]

This thread is getting long, so here's what I'm up to:

version 0.1


file:
http://www.deskbreaker.com/wiglaf/e30/m ... dave1.dash


EVOLUTION/CONCEPT:




------------------------------------------------------------
original post:

Your software is what I've been looking for to finally make the jump, to an LCD dash.

I'm working on the layout right now and am running into a few hurdles, since it is early and you seem to be keen on having this UI custom-friendly, I want to be open with what I'm trying to do. I drew this up before I ran into your software which is part of why it's difficult to implement.. it's more artistically oriented than anything. Hopefully this is the sort of feedback you are looking for?

basic layout is this:

Code: Select all

 ####((((O))))

the 'O' is large RPM gauge (used analog round)
each '(' is analog meter set up to be concentric w/ rpm gauge. they are skinny, compact. I only left room for numbers, the labels would be angled/vertical at the bottom.

the '#' is the histogram style chart, showing the history of each gauge on the left side of the RPM.
the ones to the right of the RPM will be the less-watched ones, fuel, coolant, etc.

the bulk of the artsy stuff i think I can hack with a background image, and make most of the gauges clear. This takes care of placing labels and such, although being able to add some plain old text labels and maybe basic shapes would be convenient.

hurdles:
changing window size (such as window->full screen) messes up the layout, particularly obvious when you have round analog near rectangular analog.

interface is very clunky when it comes to indicators/gauges overlapping, there is no way to lock anything in place.

analog gauges to the right-hand side read upside down (low values at top). need a mirror option.

historical graph can't overlap another without covering it up. I was hoping to tweak these into colored lines. kinda megalogviewer-esque sort of style. But if you wanted to add adjustable transparency or some kind of fade-out effect that would be cool too.

will eventually want to add indicators for things like turn signals. Adding custom indicators was brought up in another thread, but not the aspect of something with an odd shape that does nothing but change color. would using small images be appropriate for this?
off.jpg, on.jpg or something of that sort seems like it would be the easiest in terms of avoiding a pile of option dialogue and the most customizable to the user. just brainstorming here.


edit:
also I kept wanting to find an option to hide the text in the middle of the analog gauge, want to put speed readout in the middle of the RPM analog

[LT401Vette]

Dave,
Great feedback! I think we are on the same page. I have a long list of enhancements for the Gauge Cluster, but had to shift focus over to getting the tuning parts nailed down first, so I got it to a workable position and moved over. We just about have all gaps covered.

On the histogram, I wrote that renderer for the Accel Wizard, then decided I didn't want to have 3 graphs, and created a separate Graph that supports multiple overlayed lines. The Gauge Histogram can draw a line instead of filling, that is currently an uncomment of 1 line of code. However it would still cause some problem to stack them as all the values would land on top of each other. What you probably want is to be able to use the live graph in the Accel Wizard on the Dashboard. Unfortunately that isn't implemented as a Gauge because a Gauge only has a single OutputChannel, min, max ..... But I think I need to make it a valid Dashboard Component. Currently there are only 2 valid Dashboard Component types, an Indicator and a Gauge. I am planning to add this 3rd type as a Graph, so it can have multiple OutputChannels. Then I can create multiple renderers for it like the Gauges and Indicators.
This will let you do just what you want, run live graphs on the dash and this will happen.

To have the reverse rotating Analog's is not a big deal to support, I will probably just do it as a new renderer, like Analog Counter Clockwise.... Or maybe this is going to happen enough I should just make it an attribute.

I have a plan for doing image indicators too.

I'm not sure I have anything on the layout mess up with changing window shape... The distances stay more consistent with the Analog than the circle Analog, but obviously it won't stay a circle...

[dave]

Dave,
Great feedback! I think we are on the same page. I have a long list of enhancements for the Gauge Cluster, but had to shift focus over to getting the tuning parts nailed down first, so I got it to a workable position and moved over. We just about have all gaps covered.

No prob, just trying to help!

I am planning to add this 3rd type as a Graph, so it can have multiple OutputChannels. Then I can create multiple renderers for it like the Gauges and Indicators.
This will let you do just what you want, run live graphs on the dash and this will happen.

Sounds perfect.

To have the reverse rotating Analog's is not a big deal to support, I will probably just do it as a new renderer, like Analog Counter Clockwise.... Or maybe this is going to happen enough I should just make it an attribute.

I imagined nothing more than a checkbox labeled "ccw", "mirror", or "wierd left-handed mode".

I have a plan for doing image indicators too.

on this, I would also be open to making a set of 100 images (or a tiled image array, old school sprite style) for a 100% imaged gauge. Sounds extreme, but if you've ever browsed through some skins for winamp then you know where this is going. It would let you do anything you could imagine visually.. without you adding 30 more dialogs for color effects and whatnot. Just make sure one of the colors is clear!

I'm not sure I have anything on the layout mess up with changing window shape... The distances stay more consistent with the Analog than the circle Analog, but obviously it won't stay a circle...

I think this problem would get amplified if you are using a desktop to tweak a layout intended for a smaller in-dash LCD. I'm not sure what the best way to handle this is. An option to set the workspace size, and use absolute coordinates instead of relative? Maybe that would be a whole different 'mode' than when it adjusts to window size? When using a big screen to make something for a small screen you'd probly want to zoom-in on it but have things stay lined up consistently.
I won't pretend to know what's going on behind the scenes.. I just don't want this to be like old label maker software where the on-screen preview looks absolutely nothing like the printed result.

On the overlapping gauge issue, I used some PCB layout software which handled the issue like this:
when you click and there's multiple things under the pointer, a dialog pops up (on the pointer, kinda like right-clicking does) which lists the items underneath. You select the one that you inteded to click/move/whatever. It's wierd at first because.. well people aren't used to those boxes popping up on a left-click but it does work pretty well.

[LT401Vette]

Maybe a solution to the scaling problem is as simple as me displaying the cluster dimensions while in Designer mode. That way if you are targeting an 800x480 carPC screen, you will be able to set the window to that size, Or we could focus on the aspect so you could work with it larger but know you are looking at the same aspect as when it will be scaled down to the target size.

Images are welcome. It would pretty simple for me to put in an image indicator, the more difficult part will be serializing the images into the .dash files so you don't end up with a bunch of dependencies to a dash file. It would be pretty useless to load a cool looking dash that has references to a bunch of images that are not here, so I'm thinking I will serialize any images used into the .dash file so it will still be a single file.

[dave]

finally found my concept sketch.

[xrattiracer]

Wow thats cool!
Since starting to play around with Tuner Studio, I must admit that I have thought of doing this exact sort of thing as well. I am more worried about how to get the info into TS that the megasquirt doesnt know about though, such as vehicle speed, transmission gear, fuel level, etc.

[LT401Vette]

You will like the new renderer I was building, an analog bar that goes in a circle. That should work well for your design.

xrattiracer , speed is the biggest one I wish there was an easier solution for. One solution I have that will work for some people.... I have designed this to be able to display the output from more than one device on the same dash and have OBDII in the works. So, if you are running a piggy back system you will be able to capture some of the additional data from an OBDII interface.
Alternatively, a simple external circuit can be built.

[dave]

a couple things on there are pure dreams.
transmission gear = pipe dream. at least on my e30.
a lot of work fussing with switches and things. the bump on the rpms is supposed to be a rev-match cheater that pops on when you put the clutch in. getting that to work would be a lot of work, a lot more than I could generate the motivation for over something so superficial.

the datalog is a little bit more realistic, with the speed coming in the software can do as decent a job tracking miles as the odometer can.. but still a lot of work on the software end. Plus setting/resetting oil change reminders and whatnot would require a decent amount of user interface.

knowing the gas level nets the gauge, plus all the mpg/trip/range goods. A high ratio of feature to work on that one.

speed isn't too hard if you're willing to make a circuit on MS, if you do a search you can turn up a few circuits. People have been doing this for traction control and other fun stuff so it's reasonably charted territory.

when it comes to all the other indicators to make a full dash, a supplemental i/o board is needed. taking a signal through MS for every blinker and warning light is just silly, and a waste of valuable cpu time for those injectors.

question is if this software can pull signals from a secondary source like a USB I/O board, or even just a live data file from a secondary driver/program. It's a lot of work, I expect to have some indicators off to the side of the LCD for quite a while.

edit:
also just noticed that the graph on there is logorithmic.
don't sweat it, this is just sort of a concept, i asked myself what i would actually want if i did replace the dash with digital.
obviously some of it will just stay in dreamland

[dave]

so i realized that you can guess the gear pretty well given the speed and rpm given that you know the diff ratio and each gear ratio, so maybe that isn't so far-fetched.

[LT401Vette]

Yeah, you could create an OutputChannel that is right on the gear most of the time, if you have a vss.

[dave]

You will like the new renderer I was building, an analog bar that goes in a circle. That should work well for your design.

btw you are awesome

[dave]

(copied from release thread)


nice!

I will see how close I can get with these new tools and a matching background image. I think the history view might need to get nerfed a little to make it more clear, we still can't do an mslogview style overlap there.
Stay tuned.

[dave]

Trying this again in update 0.982.4.

Two main things working against this turning out well:
1- I'm having a very difficult time with the gauges not staying lined up w/ the background image. This is a prob because I'm trying to use the image to spice it up, 3d rendered outlines with nice labels and such. The gauges I can get to look awesome filling in the blanks but then as soon as I resize the window it all goes to hell.
The way that the gauge stretches/resizes is totally different from how the background image does it's thing. Setting the image to "center" is the least out of whack but still unsuitable for this. Is there any way to pin these down in some sort of absolute-scale mode?
Try a simple background that is nothing more than a circle in the middle and try to lay a gauge on it, you'll see what I mean.

2- trying to edit and adjust overlapping gauges/indicators is a PITA. I KNOW you had to have been pulling your hair out with that last layout. Seems like you can't resize anything without accidentally moving something else that happens to be where the red corner lands. A few simple GUI tweaks would go a long way here..
maybe double-click to select so that a single click keeps the selection where it is so that you can keep editing the same thing. (a lot of times these don't have text labels so it is easy to be setting colors or limits on the wrong gauge) if multiple things are overlapping, then maybe with each successive double-click have it go to the next one in the pile.

or.. be able to lock things out from being accidentally selected/moved/etc unless purposely selected from the edit menu.

3- when are realized you screwed up.. hit ESC to bail on the current move/drag, or add the famous CTRL-Z?

[LT401Vette]

Yeah it can still get tedious on complex layouts. There are still many improvement opportunities for designer mode When I made that last layout is when I added several improvements, like being able to tab through the selected gauges.

I did post some tips for doing layouts here:
http://www.msextra.com/viewtopic.php?f=122&t=29464

A background image in that manor would be tough unless you are able to keep the aspect ratio completely locked. Even absolute positioning wouldn't cut it accept I guess it would scale.
What I think would help for what your trying to do is if you could assign a background image for each independent gauge. Then it would be easier to keep the image under the individual gauge than under all the gauges simultaneously.

I have several improvements planned for the dash and designer mode, it is just time and order of execution

[dave]

Yeah it can still get tedious on complex layouts. There are still many improvement opportunities for designer mode When I made that last layout is when I added several improvements, like being able to tab through the selected gauges.

ah, cool. I didn't know about the tab thing. That does help a lil.

[LT401Vette]

The other piece that helps is opening the setting you want to change before tabbing. Change the attribute and tab to the next.
I sort of have an advantage, I know the tricks and when I need one I add it

I know there are a whole bunch of improvements, but if you come up with a couple key ones that help, I can get those in quicker.

[dave]

i have a "key" one.. along the same lines as before but this should help keep things lined up how you left them across different window sizes:

right now you scale the X and Y of each gauge INDEPENDENTLY to the window X and Y. If I resize window to the same aspect ratio, things turn out ok.

can you make it so that the X and Y are linked when it comes to window size? not by limiting how you can move the window but if X has to get smaller then scale both. This may cause dead space if laid out on a widescreen then viewed on a normal monitor, but at least it will stay looking how you wanted it to.

I noticed this mainly when setting the boundaries for the circular gauges, if i get them as square as possible then they would scale similarly. if they were rectangular (despite the gauge staying a circle) the location/size geometry would change differently to others. If the above change is made then maybe this would be unnecessary, but maybe keeping this bounding box square for gauges that always remain circular would avoid more aspect ratio issues.

This might also be a 2 in 1 fix with trying to use the background image, not taking any bets but crossing my fingers since this seems like an easy tweak.

[dave]

bad news for you, i'm still playing around with this

this is pretty vague, but a lot of gauges has the standard set of widgets.. Things like rectangular text readouts having a "face angle" adjustment that does nothing. This doens't hurt anything really, but then there's some other spots where it seems like they should do more.. like on the AFR histogram I tried to use the decimal places adjuster to get rid of the 2 place decimal on the side of the chart. Also on this chart I tried to darken the lines but couldn't figure out what color it was, is this adjustable?

the analog circle bars should have a different color selection than the font label, on some i wanted to hide the text but not the bar that the pointer rides on. Also the ability to adjust how wide this bar is (on both the new analog circle bar readouts) would be nice.

[LT401Vette]

Yeah, that has been on the todo list for a while. The thing is all those are attributes of the Gauge, then it is up to the Gauge Painter what attributes it uses. So it really need to get a filter from the painter to only display what the Painter says he cares about.

On the other request. I need to do some more processing on an easy way to accomplish that, it isn't as straight forward as it might seem, especially without messing up all the existing dashboards.

[dave]

Well here's where I'm at so far.. it's definitely taking shape.
Bailed on the graphics for now, still fighting with trying to have things lined up, I kinda lost some when I copied over to the laptop to try it.. and when you switch from full-screen to windowed it looks really funky.



file:
http://www.deskbreaker.com/wiglaf/e30/m ... dave1.dash

the vertical orange line on the histogram is an artifact that i havn't been able to dump.. i moved the left edge in so that the labels don't overlap.. there really aren't many options to deal with that. but it does work like a live meglogview chart!

The numbers on these are for turbo car, when MAP is over 100 the bar changes color then goes red at 170kpa. the throttle position is the white tick moving along it.
was sort of a dumb move making duty cycle such a similar color, the color coding works pretty well for piling the temperatures and voltage near eachother. the charts are tweaked so that they should usually be about in the middle.

It looks pretty empty over on the right side there. Unless the "counter clockwise rotation" makes the charts go from left to right, i'll be wishing there is a way to move all of the selected gauges at once.

edit:
also, a lot of the readouts aren't keeping the changes to reduce decimal point digits.