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

Economy UI Mod

Economy UI Mod is a (very) small mod, developed from some of the ideas put forwards in this thread. The goal is to add and alter UI elements to make managing Planetary Annihilation's economy a little more intuitive, particularly for those new to streaming economies. This will be done whilst remaining true to the look and feel of the UI presented in the vanilla game.

A short video of the mod is available here.

Recording of better videos are welcome.

Features Include:

• 
  The Net Metal Income indicator now changes colour gradually based as a function of your income to outcome ratio. This is to lessen the shock of running an economy at a small deficit (which is often regarded as optimum economy management), and seeing big red numbers appear.
  
  The metal storage bar now slowly flashes when full, to draw attention to the fact that the player is wasting metal.
  
  An indicator has been added to the main economy status bar, which shows how much the player is stalling as a percentage of active build power. If the player is limited by energy, it turns yellow, by metal, it turns blue, and nothing, it turns green.
  

Features under development:

• 
  Additional animations to improve how things look.

Possible Future Features:

• 
  Adding an indicator an indicator which appears above a structure/unit under construction on mouseover. This will display estimated time to completion, and the efficiency of the build relative to the number of constructing units/structures

Download

The most recent version of the mod can be found here

To install it, unzip the downloaded file to your Planetary Annihilation directory and overwrite any existing files. The latest version should also be compatable with Jacoby6000's Mod Manager. Future versions will make use of Uber's mod system.

Suggestions and constructive criticism are welcome, although bear in mind, I'm very new to webkit development.

I hope you enjoy the mod, and I look forwards to releasing more ambitious content in the future

Yourlocalmadsci




Original Post

I've decided I'm going to try and make a (hopefully) simple UI mod to try and see if the changes suggested in this thread look reasonable.

Thus, my first goal is to try and make the net metal income indicator change colour gradually based on how hard the player is stalling.

The difficulty is that I have no background in web development. I'm currently coming towards the end of doing a PhD of simulating certain aspects of materials used in nuclear applications, so I have plenty of experience in developing scripts and code for back end stuff. This is along the lines of inputting text, performing arcane and complex procedural mathematical algorithms on it using very large computers, then outputting back to text again.

So when it comes to Javascript, HTML, css documents, KO libraries, or object orientated code, my experience is non-existent. Nil. Nothing. Not a sausage.

The mathematics of what I'm trying to do is quite simple, but I'm entirely unsure as to how the syntax of javascript works in order to do this. I believe the Javascript code for the hex code colour output should be something like this:

Code:

//New metal color	
		self.metalColor = ko.computed(function() {
//Create a 1-0 variable which represents the metal stall amount	
			var metStall = Math.max(0, Math.min(self.metalGain() / (self.metalLoss()+0.01), 1));
//Hex colour based on this value		
			return "#" + ((1 << 24) + (Math.round( Math.abs( Math.min(0.5,metStall))*510 ) << 16) + (Math.round( 1 - Math.max(0.5,.metStall)*510 ) << 8) + 0).toString(16).slice(1);
                 })

I'm sure that those who are experienced with Javascript are laughing and pointing right now. I'm doing a lot of guessing as to how this is meant to look, and I really don't know what I'm doing aside from the maths bit.

My issues are:
1. If I add this into the live_game_alpha.js, I break the UI.

2. Even if the Javascript works, I still need to apply it to the text. I thought that the best way to do this would be to use the knock-out "style" data-bind. Is this even remotely correct or entirely stupid.

Any directed help would be much obliged.

Re: Economy UI Mod

Not sure if this is the only issue, but you have a syntax error on this line, marked in red:

return "#" + ((1 << 24) + (Math.round( Math.abs( Math.min(0.5,metStall))*510 ) << 16) + (Math.round( 1 - Math.max(0.5,.metStall)*510 ) << 8) + 0).toString(16).slice(1);

There's a dot before metStall

Re: Economy UI Mod

Ok, I really should have caught that.

Many thanks, that has fixed the borked UI.

My next step is to apply the metalColour to the metalNetString text. I have altered line 138 of live_game_alpha.html from:

Code:

 <div class="div_rate_ctr_overall rate_positive" data-bind="text: metalNetString, css: { rate_positive: metalNet() > 0, rate_negative: metalNet() < 0}">+8888</div>

to

Code:

<div class="div_rate_ctr_overall rate_positive" data-bind="text: metalNetString, style: { color: metalColor() }">+8888</div>

The theory being that instead of taking it's colour cues from the CSS document, it now takes it from the Javascript. Instead, the net metal income number remains green, regardless of the amount of stall.

Furthermore, the number has a subtle colour gradient on it (like normal) indicating it is still inheriting it's style from the CSS, and not form the Javascript, although obviously it no longer goes red for negative values, as that bit of code has been replaced.

Any suggestions as to what I'm doing wrong?

Re: Economy UI Mod

Ah, found it. You need to take out the rate_positive css class, as that is overriding the color with green:

Code:

<div class="div_rate_ctr_overall" data-bind="text: metalNetString, style: { color: metalColor() }">+8888</div>

Re: Economy UI Mod

Cheers once again. I'm at work at the moment, so I'll give this a try later today.

Re: Economy UI Mod

Many thanks raevn. You were correct, and It appears that I got my colour transitions backwards.

However, now that that is sorted, it works!

no metal deficit


Slight metal deficit


Moderate metal deficit


Heavy metal deficit (ba-dum tssssh)


Total Deficit


By itself, this change isn't massively useful, as it doesn't take into account the fact that you can have metal in storage. However, in conjunction with the other ideas I mentioned in the first post, I hope it will make economies a bit more intuitive.

There are three steps from here. The first is to make it look a little more professional. The other economic indicator numbers have a subtle colour gradient applied to them, going from light at the top, to dark at the bottom. This makes them a little more aesthetically pleasing. I need to figure out how to make this number follow a similar gradient. The original gradient comes from the CSS file, however as I'm not using that, I'll need to find another way.

The second thing to do, is that I would like to compress and offset the scaling slightly. Currently, a player can only see full red if their economy has 0 metal income. I'd like to scale this slightly so it occurs a bit higher. I'd appreciate some suggestions as to what percentage of a stall people think is a good target for this. I'm thinking about 30%.

The third thing to do is to start work on the next phase of the UI mod - making the net metal indicator flash when metal is being wasted. I have some ideas of how to do this, and I've looked up documentation on using the CSS files to make fades and transitions.

Apart from this, I'm very impressed with how straight forwards it is to mod the UI. I have literally no web-development experience, and I can already see how powerful and user-friendly (once I've figured out/been told what to do) modding the UI is. A tip of the hat to Uber for setting it up this way.

If anyone wants to see what this looks-like themselves, simply unzip the file below to your PA\PA\media\ui\alpha\live_game directory, and overwrite the existing files.

Re: Economy UI Mod

Great job, I'll probably feature this in a video!

Re: Economy UI Mod

Feel Free. It's still at a very early stage yet, so it may take a bit more time for it to become more impressive.

Re: Economy UI Mod

For having no web development experience, you did an amazing job figuring things out to begin with - good work

You'll need to tweak the values to match the defaults, but to do this you need to change the style to:

Code:

<div class="div_rate_ctr_overall rate_general" data-bind="text: metalNetString, style: { backgroundImage: '-webkit-gradient(linear, left bottom, left top, from(' + metalColor() + '), to(#000))' }">+8888</div>

Note the added css class "rate_general", this corresponds to:

Code:

.rate_general {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: bold;
}

Essentially, we are dynamically setting the background-image part of rate_positive and rate_negative, then the common parts are included in rate_general.

Re: Economy UI Mod

Looks good:



I tweaked it to get very slightly lighter towards the top, as that seems to be what the other numbers do.

I'm currently working on adding a flashing background for the net metal income number, when the storage is full. I'll let you know if I get stuck.

Your help is very much appreciated on this. Although these are fairly small UI changes at the moment I do have some (long-term) plans for the foundation of a somewhat more ambitious mod. I don't know if I'll ever get close to releasing that project, so this kind of stuff is great practice to get me familiar with how the UI works.

Re: Economy UI Mod

Today's adventures in inexperienced UI modding included:

• 
  Making a css radial gradient so I can make it flash behind the metal indicator when a player is wasting metal
  
  Spending an embarrassing amount of time trying to make the gradient animatedly fade in and out like the tutorial examples.
  
  Much total UI borking.
  
  Much swearing.
  
  Finding out that CSS gradients, and CSS animations do not play well together.
  
  More swearing.
  
  Making a Radial gradient .png instead and getting that to animate.
  
  Lessons about how to make HTML elements line up properly.
  
  More UI Borking
  
  Coming to the realisation that it actually looks pretty terrible.
  
  Deciding just to make the metal bar fade in and out instead.
  
  Difficulties in getting the data-binding to realise when the metal storage is full.
  
  Yet more swearing
  
  Feeling somewhat grumpy when finding out the "is equal to" operator is a triple equals sign, not a single, double or two letter expression like any of the languages I know so far.
  
  Ui Borking of the third kind.
  
  SUCCESS!
  

Although a pitifully small mod, if the player wastes metal, the metal bar will now slowly flash (with fading animations!) in order to alert them.

I'd post pictures, but it's a bit awkward to show animations. If you feel like giving this a go, then let me know how it looks. Just copy the files to the same directory as before. Let me know what you think.

The next part of this project will prove even more difficult, and I'm pretty sure it's not possible with the current UI tools.

Re: Economy UI Mod

Here's a quick vid I recorded. Had to zip it to attach it. Pretty cool!

Re: Economy UI Mod

Might I suggest the best way to display that on here would be to make it into a .gif? (Currently unable to download your vid to watch it as on a work machine)

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

Op has been updated to ease reading.

Many thanks for uploading a video. I've been trying to make a video myself, so I could give an example of the mod in action on Youtube. However, the video capture software i tried was somewhat substandard, and it came out very jerky low fidelity.

If I do release a Youtube video, I would like it to be of a reasonably professional standard. I'll try some other video capture software, and see if i can get an improvement.

In other news, development of the next feature is continuing. I think I can do dynamic CSS pie charts, but it is somewhat awkward.

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

You should try obs. Just set it to stream to disk, 1080p (or whatever your monitor is) around 2000ish bitrate. Add the pa window as a game window to a scene (the default one is fine), preview to make sure everythings good, stop preview start recording! It outputs mp4 and records the cursor actual size, so pretty good. The vid above is like 15 bitrate 720p or something since I run an rmpt server on my comp as well to stream my temp/memory/cpu monitors to my phone over lan. It's easier than getting a second screen :mrgreen:

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

Fyi obs video format isn't editable in sony vegas and probably others too. I'll feature this in my next development update video and if it gets more features and I have the time I might make a dedicated showcase video of the features.

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

Could you fuse the Enhanced UI mod into yours since they use the same files?

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

First things first, have you actually tried to run them together? I've not looked at the actual files for that mod, but it could be that it just alters the .png files in the /img directory. If that's the case, then the mods shouldn't conflict as I don't alter any of the image files.

If not, then I'm happy to work with any UI mod developers who want to collaborate. There's a lot of potential to bring mods together. I would not take someone else's work, incorporate it into mine, and then release it without their permission. That's really not cool.

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

the two sets of files are the same ones, sadly..

please PM him and unite for AWESOMENESS


EDIT : please also PM burnt Custard he made an awesome persistent chatt log using the same file that is compatible with team chatt. I want that too.

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

I ended up having to get a codec megapack to edit them in windows movie maker :lol: I forget which one, but just look up editing mp4 files in movie maker to find it.