[REL] [Build 51531] Economy UI Mod v4.1

Re: [REL] [Build 50355] Economy UI Mod v2

Here is a GIF'ed version:

Re: [REL] [Build 50355] Economy UI Mod v2

Oh hell yes. I'm getting this next time I'm on!

Re: [REL] [Build 50355] Economy UI Mod v2

Awesome! Mind if I ask how you made that from the vid?

Re: [REL] [Build 50355] Economy UI Mod v2

On Linux using mplayer and ImageMagick this is actually done with three commands.
Movie to PNG > Cropping > PNG to GIF.

Edit:

Code:

mplayer -vo png:z=6 -ao null ./2013-07-04-1501-52.mp4
mogrify -crop 640x80+0+0 +repage -path ./crop/ ./*.png
convert -delay 4 -loop 0 ./crop/*.png movie.gif

Re: [REL] [Build 50355] Economy UI Mod v2

Ok folks, I've almost got the next bit of this mod working, but I'm once again stuck. I've managed to make a simple pie chart, and place it between the two economic bars. The idea is that when a player stalls, it shows how much they are stalling as a percentage of used capacity. It also changes colour depending upon the limiting resource (blue for metal, yellow for energy, green for no stalling at all). A very rough example is shown below. Please note that the boarder graphics for this are very rough, and not done up to a proper standard:



However, this is just a test to see if I can stick the chart in without messing up the UI. It isn't actually connected to any of the variables in the game. The HTML for it is:

Code:

	<div class="div_status_bar_TEI">
		<div class="TEI_container">
			<div style="position: absolute; z-index:5000;" ><img src="img/status_bar/status_bar_indicator_boarder.png" /></div>
			
			<div class="TEI_hold" >
						<div class="TEI_pie TEI_piegradient" style="background-color: #68c8f8 ; -webkit-transform:rotate(180deg) "></div>
			</div>
			
			<div class="TEI_hold" style ="-webkit-transform:rotate(180deg);">
				<div class="TEI_pie TEI_piegradient" style="background-color: #68c8f8 ; -webkit-transform:rotate(100deg) "></div>
			</div>
		</div>
	</div>

I will show the CSS classes if necessary, but the fact that the static part suggests (to me at least) that the CSS is fine.

I have two Javascript functions written to return the hex colour code, and the rotational angle of the pie-chart components. I've tried to pass this information back to the HTML with data-binds, but this simply breaks the UI in the usual manner, suggesting I have the syntax wrong somewhere. Here is one example I've tried for one component of the pie chart code above:

Code:

			<div class="TEI_hold" >
						<div class="TEI_pie TEI_piegradient" data-bind="style:{ backgroundColor: teiColor() }, style: {'-webkit-transform:rotate('+ teiPerc(0) +')'}"></div>
			</div>

I've tried isolating the two functions, and various attempts at moving around the knock-out calls to see if I've just put it in the wrong place. No success at all. For a long time. I've come to the conclusion that I still don't yet have enough experience to debug this. The Javascript functions are shown here:

Code:

//TEI Managment	Colour
		self.teiColor = ko.computed(function() {
			var metaStall = (Math.max(0, Math.min(self.metalGain() / ((self.metalLoss()+0.01)), 1))) ;
			var enegStall = (Math.max(0, Math.min(self.energyGain() / ((self.energyLoss()+0.01)), 1))) ;
		
			if ( self.currentMetal() > 0 && self.currentEnergy() > 0 ) {
				return "#4FFF69";
			}
			if ( self.currentMetal() <= 0 && self.currentEnergy() > 0 ) {
				return "#0279A1";
			}
			if ( self.currentMetal() > 0 && self.currentEnergy() <= 0 ) {
				return "#F9EC31";
			}
			if (self.currentMetal() <= 0 && self.currentEnergy() <= 0) {
				if ( metaStall <= enegStall ){
					return "#0279A1";
				}else{
					return "#F9EC31";
				};
							
			};
		});

	

//TEI Managment	Shape
		self.teiPerc = ko.computed(function(piece) {
			var piece;
			var totStall = Math.min( (Math.max(0, Math.min(self.metalGain() / ((self.metalLoss()+0.01)), 1))) , (Math.max(0, Math.min(self.energyGain() / ((self.energyLoss()+0.01)), 1))) );
					
			if (piece === 0) {
				return Math.max(0,Math.min(totStall,0.5))*360 + "deg";
			};
			
			if (piece === 1) {
				return (Math.max(0.5,Math.min(totStall,1))-0.5)*360 + "deg";
			};
		});

As always, I expect it's some misunderstanding of mine about how the syntax is meant to work. Any help in pointing out what I'm doing wrong would be greatly appreciated.

Re: [REL] [Build 50355] Economy UI Mod v2

If you put the pie chart in it's own divs seperate of everything else, then your css (for positioning) should look something like this:

Code:

div.pie_chart{
    position:absolute;
    top:0px;//Or the distance you want it to be from the top of the screen
    left:50%;//Half way across the screen
    margin-left: This value should be the width of the pie chart in pixels, divided by negative 1/2  
}

That will allow you to insert the pie chart without breaking anything. Using absolute positioning causes an element to not interfere with any other elements of the same parent.


Or is the UI breaking in a different way? I imagine you meant that things were getting offset and funky

EDIT:
Here's what's breaking your code:

Code:

      self.teiPerc = ko.computed(function(piece) {
         var piece;

piece is defined twice.
remove the line that says "var piece;" because piece is passed as a parameter into that function.

Other things to note:

In javascript, you don't need a semi-colon after condition blocks. for example

Code:

if(something){
    doThis();
}

is the correct way to do it. Notice there is no semi-colon after the second curly brace.

Re: [REL] [Build 50355] Economy UI Mod v2

To clarify, when I say breaking the UI, I mean this:



This seams to manifest itself whenever there is a syntax error somewhere.

Thanks. Mistake corrected. However, although it is a problem, it still hasn't fixed the issue.

For debugging purposes, i tried replacing the Javascript code with:

Code:

			self.teiColor = ko.computed(function() {
				return "#68c8f8";
			});
	
			self.teiPerc = ko.computed(function() {
				return "180deg";
			});

No Luck. Whatever else may be wrong with the Javascript portion, it isn't what's breaking the UI. I suspect it's my use of KO, as I'm very unfamiliar with it.

Re: [REL] [Build 50355] Economy UI Mod v2

Update:

So, I've got the colour changes working at the mutual exclusion of the pie-shape-filling.

Code:

<div class="TEI_pie TEI_piegradient" style="-webkit-transform:rotate(180deg)" data-bind="style:{ backgroundColor: teiColor() }"></div>

Makes the colour change correctly, however I can't alter the amount of pie chart filled. If i Try to add a transform rotation into the databind:

Code:

data-bind="style:{ '-webkit-transform: rotate(' + teiPerc() + ')' }"

The UI breaks. Is it something to do with the hyphens? I know Javascript doesn't like them, but earlier bits of code have been ok by having them in single-quotes. Any ideas?

Re: [REL] [Build 50355] Economy UI Mod v2

Victory!

I was trying to be too clever in how I combined my functions. Works fine now. Check original post update and video.

Re: [REL] [Build 50355] Economy UI Mod v3

you sir ARE A GENIUS!

love it!!!!!

purecaldari make a new gif!

Re: [REL] [Build 50355] Economy UI Mod v3

I love you people.

Re: [REL] [Build 50355] Economy UI Mod v3

What do you mean "you people"?

Re: [REL] [Build 50355] Economy UI Mod v3

Could you please PM illysian and BurntCustard to fuse thei mods into yours?

Re: [REL] [Build 50355] Economy UI Mod v3

This looks great! I'll try this on the latest build when I get to try it. Has anyone given it a whirl yet?

Re: [REL] [Build 50355] Economy UI Mod v3

Have my babies. I can't believe, of all the references you could make, THAT movie would be it. The simple fact that you remember that...

Re: [REL] [Build 50355] Economy UI Mod v3

Not to self-promote, but I'm currently working on making my mod-manager merge modified files together, assuming they don't edit the same methods.

The next version out should be able to correctly handle exactly what you're wanting.

Also, from a modders perspective, merging mods is generally not what they want to do (unless they're a team). While modders aren't out there just for glory, it's not common that a modder would willingly merge their mod with somebody elses, simply because there's something about a mod being exclusively yours that makes it more credible when you reference it for a job in the future.

Re: [REL] [Build 50355] Economy UI Mod v3

TY! <3

(personally I'd fuse without a thought, I know it seems like you may lose accreditations, but in the end you can say exactly what you did and all in all I'd be doing it much more for the community and myself than for a future job)

Re: [REL] [Build 50355] Economy UI Mod v3

It isn't about accreditation. At least not for me.

Its more about coordination and effort at such an early stage. At any point, uber could do a design pass on the UI, or change much of the formatting. At which point, all the extra effort of combining the files would be useless. All the mods released at the moment are closer to tech-demos than fully released products. For all we know, uber could decide to implement features along the lines explored in some of the mods about at some point before release. For example, with the Hot-Keys mod, I would be VERY surprised if PA didn't have a feature like this at some point in the future, as key remapping is a pretty common feature in alot of games. Thus ,it's just not worth going to a large combination effort at the moment. I'm perfectly happy to help and collaborate with people if they want to make a combined mod, but I'm not going to go out of my way to start one.

Of course, there's nothing to stop you from downloading the various files, and have a crack at combining them for your personal use. I had no web-development experience, and I managed to make a mod. There are a lot of tutorials on HTML CSS and Javascript out there, and the fundamental concepts aren't that hard to grasp, especially if you've ever done some sort of coding in the past.

Re: [REL] [Build 50355] Economy UI Mod v3

I'll have a go at it.

Re: [REL] [Build 50355] Economy UI Mod v3

Does this still work with the latest build?