[Voltage UI] Q&A and Help

AssetStore - Discord - API Reference (WIP) - Quickstart Guide​

I have recently released an asset, and I'm opening this thread so anyone who needs help or have a question can post it here. Any questions made to me via PM or email I will be adding here as well.

if you want to open a new thread be sure to @ me like this @whileBreak.

For news on new releases, requests for new features or bug reports use this thread.

Kind regards from the Voltage dev.

​

 

Ok yeah, the manual is still a work in progress sorry, in the meantime feel free to ask any questions, use the forum post too if you want to. For now you can try to copy the bases from the DemoWindow and the DemoEditor.

To use Voltage you need to inherit your windows or editors from either VoltageWindow or VoltageEditor, instead of the classic EditorWindow and Editor. And that code just needs to be there on your classes, that should get rid of the override problem. The other thing that I don't show on the manual is the declaration of the Areas and Fields, but I hope that the demos will help you understand how to use them.

if you mean grayed out when you say disable, then not at the moment. But Ill be sure to add it to the next update.

Will do

 

1. You can make your methods and call them either in VoltageInit or VoltageGUI, given that they have the correct sintax for the corresponding method
2. I'm embarrassed to say that I have forgotten to add any sort of boolean implementation. Thanks for pointing that out. Next version will include classic Toggles and On/Off sliders
3. Stored elements Are the ones that are not created on VoltageGUI, so for example a wild Weight Area would be started on VoltageGUI like so

Code (CSharp):

1. protected override VoltageGUI(){
2.     WeightAreaStart(); //You dont need to pass an existing weightArea here, it is created for you
3.           //Add Fields/Areas here
4.     EndArea();
5. }

Just to clarify, stored elements can be added like this to an area on VoltageInit.

Code (CSharp):

1. area.AddStoredElement(field);
2. area.AddStoredElement(otherArea);

So to make a stored WeightArea with a stored Field you should do it like this

Code (CSharp):

1. TypeOfField fieldStored; //any Voltage Field
2. WeightArea weightStored;
3. protected override VoltageInit(){
4.     fieldStored = new TypeOfField(value);
5.     weightStored = new WightArea();
6.     weightStored.AddStoredElement(fieldStored);
7. }
8. protected override VoltageGUI(){
9.     WeightAreaStart(weightStored); //You pass an existing weight area with previously added fields
10.     EndArea();
11. }

Scroll areas cannot be wild because they need to keep the scroll data saved somewhere, so they can't be created for each VoltageGUI call or they wont scroll.
Meanwhile all your fields need to be created on VoltageInit for the same reason, but they are called stored when they are added to an area with the Area.AddStoredElement() method instead of via Field() on the VoltageGUI.
The only Fields that can be trully wild are Label which can be created via the Label and LabeledField method on VoltageGUI without being initialized.

4. The Dropdown Fields available currently are called enumPopup, EnumFlags. Custom Label Popups are on the way.

 

Ok, you need to nest areas to achieve that. So first thing you do after starting the tab area is add a vertical StreamArea so your elements are streamed one after the other instead of being fitted on the same line. Next you can add your Label "Main Tab" and then you should start an horizontal WeightArea and add your "Name:" label and your NameTextField, then close the WightArea and finally close the StreamArea.
Remember that by default WeightAreas will be horizontal and Stream areas will be vertical, so you wont need to specify that, in the case you want to change that you should pass a new VoltageAreaSettings() into the desired area constructor.
Also instead of adding a new label and then a field wrapped inside a weight area you can use LabeledField() which would do exactly that in one line.

Code should look like this.

Code (CSharp):

1. ScrollAreaStart(scroll);
2.      TabAreaStart(storedTabArea);
3.           StartStreamArea();
4.                Label("Main Tab", VoltageStyles.GetStyle("Box"));
5.                //You can label a field manually to have better control over the label and the field
6.                StartWeightArea();
7.                    Label("Name : ", VoltageStyles.GetStyle("Box"));
8.                    Field(NameTextField);
9.                 EndArea();
10.                 //Or you can just use LabeledField, which would do the same with a label of weight 2 and a field of weight 3
11.                 LabeledField("Name:",NameTextField);
12.            EndArea(); //End StreamArea
13.     NextTab();
14.     EndArea();
15. EndArea();

The reason it didn't stream your elements is because for most complex areas the default is to start with a WeightArea, so each tab of a TabArea starts with a WeightArea. The reason is that any element you add will take the hole space if is not sharing it with anyone else. That allows you to override it with any other area you want, in this case a StreamArea.

 

Is this based on twitter bootstrap?

 

Yes it is, is not %100 the same, but the results are similar. The idea behind this system is to provide an intuitive and flexible layout. With time i will try to add responsiveness as bootstrap does.

 

Thanks you are really helpful.
One more question.
I want to display an image, so I have to use VoltageThumb am I correct?
The thing about it is I can only scale it fully, not seperately on x and y axis and the image is always square even if the image file is rectangular.

I kinda grasped how everything works now, kinda unsecure with the styles and so on.

I still have yet another question:

If I say Have a line with only one VoltageText and normally it takes up the whole thing, how can I make it take exactly 37% (random number used here) wide ?

 

I have yet another problem although not sure where the issue may be.

I have this script which loads a Texture2D for the VoltageThumb and I display that VoltageThumb.
Now it is empty (gray)

logoTexture2D = Helper.LoadTexture2DFromAssets(LOGO_PATH);
System.IO.File.WriteAllBytes("Assets/TEST.PNG", logoTexture2D.EncodeToPNG()); // just testing if saved png looks same
logoThumb = new VoltageThumb(logoTexture2D , 128f);


and the function here
public static Texture2D LoadTexture2DFromAssets(string assetpath)
{
Texture2D tex = new Texture2D(256, 256);

if (System.IO.File.Exists(assetpath))
{
var bytes = System.IO.File.ReadAllBytes(assetpath);
tex.LoadImage(bytes);
Debug.Log("tex width : " + tex.width + " height : " + tex.height);
}

return tex;
}

So it loads the image, the width and height are correct.
The saved image is a little bit bigger (which probably has no compression thats why) but thats ok it looks the same.
But for some reason the VoltageThumb now does not display anything besides the gray area.

This worked before when the image was in Resources folder and I used Resources.Load<Texture2D>(PATH_TO_RESOURCE_TEXTURE2D);

But for some reason it does not work when loaded with this. That is weird because as I can see the texture is correctly loaded . When I write it back to a file it produces a same looking image. So can you please look into this?

 

Yeah right now there isn't a direct way to add an image, and the problem you are having with the Thumbnail is that it uses AssetPreview.GetAssetPreview(), so you need an asset which should be on the asset folder. When you input an object created on memory (using new Texture2D) the preview can't be made for it.

I have tested it and to display your image this should work

Code (CSharp):

1. thumb = new Thumb(AssetDatabase.LoadAssetAtPath<Texture2D>("Assets/Project Path");
2.  

As for the size, currently it can only be a square, I'll be sure to add the possibility to give an exact width and height. I will also add a VoltageImage element to the next release so you can have the right tool for this kind of situations.

 

Okay thank you.
The image was in asset folder, but i guess System.IO does not work with this.
We can for now just use square or make a style with the background of the image.

 

Another question:

We want to use several files because the one file gets too much.


Say we have something like 3 Tabs , and a page for each.

Now lets say we have EditorUI.cs which implements your VoltageWindow
then we want 3 more cs files which would each represent a page.
Then in EditorUI.cs we would do something like : MainTab.DrawElements();
how would we do this?

This is because the one file is already really big and we only finished one tab.


EDIT: One really super important thing (!):

Sometimes the editor window does not show. After I click to open it, it de-focuses Unity window but I can't see the custom window anywhere.
I even reverted to last working state and restarted windows but still nothing. (Last time this happened a restart worked but this time nope.)
What could be a fix, or the cause?

 

For this kind of things you can use the stored fields. for example, on one of your tabs script you build a VoltageArea, and thens you pass it to the main window:

Code for the Builder class

Code (CSharp):

1. using Voltage;
2.  
3. public class MyTab
4. {
5.      pubic VoltageText text;
6.      public VoltageNumeric number;
7.      public VoltageArea GetTab(){
8.              WeightArea tab = new WeightArea();
9.              StreamArea stream = new StreamArea();
10.            
11.              text = new VoltageText("");
12.              text = new VoltageText("");
13.  
14.              tab.AddStoredElement(stream);
15.              stream.AddStoredElement(text);
16.              stream.AddStoredElement(number);
17.      }
18. }

Window code

Code (CSharp):

1. using Voltage;
2.  
3. public class Window:VoltageWindow
4. {
5.      /*
6.          Your code
7.     */
8.  
9.      protected override void VoltageGUI()
10.      {
11.             //Code
12.            WeightAreaStart(myTab.GetTab);
13.            //Code
14.      }
15. }

I'll be adding a builder class so you can use all the VoltageWindow functions like Start*Area, Field and Labeled field on your builder MyTab. All the features you requested are already implemented. Once I finish the Builder the update will go live.

I don't know what can be causing this. Could you send me your code so I can test it. Thanks.

 

Update 0.9.2 has gone live, you might not see it yet so wait a bit. I added your requests, including the Builder to help you out.

 

Thank you man really appreciate it!

I am definitely going to enjoy the VoltageBuilder

 

yeah I noticed it after uploading, it will work either way, I already have an update "pending review" which will fix that.

 

I am not sure if this is a big request or not, but I'm just asking.
Lets say I use a Voltagebuilder, but inside the draw function in that builder ( aka GetTabStream )
would it be possible to make yet another call to another VoltageBuilder?

I kinda want a gridview and if I don't use VoltageBuilder on it and rather do the thing you posted 3 posts ago with the GetTab() function I only get empty output for some reason.
Several newlines but no label.

So I thought about doing it VoltageBuilder but saw that you cannot call StartBuilder(gridView.StreamGridView); in the MainTab : VoltageBuilder


Maybe I am just missing something, if so please tell me. This would be really useful to 1. the first intended use from me to export parts of scripts because it gets too long + 2. additional to 1. also be able to create custom elements consisitng of several other elements and place them in these VoltageBuilder scripts



Sorry for annoying so frequently ^^

 

Mm, no you cant call it from a VoltageBuilder, but you can have multiple functions on one. I'll be sure to add that functionality to the builder.

 

Yeah thanks. Also I am sure this might seem easy but its not but can you implement something like .enabled so something like a toggle or switch can be disabled? Or should I rather call it .interactable

 

Sure, next update will take me a bit more than the last though, but I'll try to add this to 0.9.4

 

Now that I have more stuff like something like a table ( not really just a bunch of options neatly layed side by side and in rows)
I get some real lag. Especially when moving the window. Using profiler I could reduce the lag a little now its usable.
I had to replace all calls with VoltageStyles.GetStyle(...) by variables which were set in the beginning. This still does not make the window smooth. I tried looking in profiler again but sadly this time it can not be optimized like the other one.
All I see is some draw methods and so on being called but yeah, only thing to reduce that would be to use less elements.

Its kinda usable now but if i can't add so many elements its kinda impossible to make it look like you want.

Maybe I got something wrong. But as I understand if I want to make something similiar to a table i would simply add several nested areas.

Like StreamArea -> WeightArea and so on am i correct?

 

Ok So as I said I wanted them to be like I want.
So I wanted several centered and did something like this:

WeightAreaStart();
{
Label("");
StreamAreaStart()
{
Label("");
Field(someOptionField);
Label("");
}
Label("");
}
EndArea();



removing all those unneccessary AreaStarts and Labels made it less laggy although its still a little laggy. but better.

What can I use to make them centered otherwise?
Also how do you set the size of an VoltageImage? Or would I resize the texture for that?
Also how do you fix the width? Like say you have only one field in a row and want it to be 33% of window or 300 pixel or similiar.

 

I'm guessing you have a lot of items on your table, what are the dimensions?. The solution might be to create a new VoltageElement > MyTable that displays the table. But you are right, with areas it would be StreamArea (full table) -> WeightArea (Row) -> Label(Row Header + Field (Value) * fieldsCount. It Could also be taking to much resources because is constantly creating new Items try using stored elements and areas on your table to define the structure and only start the base area for the Table (on my example it would be the StreamArea).

Please send me the code so I can test the performance.

You can fix sizes using VoltageElementSettings.FixedSize / FixedHeight / FixedWidth. pass a new VoltageElementSettings on the element constructor or change them after creation using Element.FixedSize/ FixedHeight / FixedWidth. Also, you don't need to use the Image() method (this method only wraps the image inside an horizontal and a vertical StreamArea) you can use Field() to add an image.

To center an item try using new Styles with their alignment changed or use VoltageAreaSettings.Alignment, also accessible through area.Alignment.

But please send me your code on PM, it would go a long way to helping you out.

 

I just realized, instead of using an horizontal weight and labels to center it, use an horizontal StreamArea with center alignment, like in the demo window.

 

Heya thanks I tried using Field(VoltageElement) with VoltageLabel which was stored beforehand and it looks much smoother now , can even move the window again without it lagging out hard. Thats really nice.

I tried to do it like in the demo window but it does not yield the effect which i want.


What I normally have is A but what I want is B

 

Here the code, not full but yeah the most important:

Code (csharp):

1.  
2. WeightAreaStart(new VoltageAreaSettings(true, new RectOffset(5, 5, 5, 5), 5f, VoltageElementAlignment.Center), box);
3. {
4.     StreamAreaStart();
5.     {
6.         // ... // some tabs / tabarea
7.        
8.        
9.         StreamAreaStart();
10.         {
11.             FoldoutAreaStart(mainFoldoutOptions); // for some reason not collapsable ?
12.             {
13.                 // now finally the table starts :
14.                 StreamAreaStart(new VoltageAreaSettings(false, new RectOffset(5, 5, 5, 5), 5f , VoltageElementAlignment.Center));
15.                 {
16.                     // basically a row :
17.                     WeightAreaStart();
18.                     {
19.                         Field(label1);
20.                         Field(toggle1);  // this is not centered in its "cell"
21.                         Field(emptyLabel,1);
22.                         Field(label2);
23.                         Field(switch1); // this is not centered in its "cell"
24.                         Field(label3);
25.                         Field(emptyLabel,1);
26.                     }
27.                     EndArea();
28.                 }
29.                 EndArea();
30.             }
31.             EndArea();
32.         }
33.         EndArea();
34.     }
35.     EndArea();
36. }
37. EndArea();
38.  

 

Try this.

Code (CSharp):

1. WeightAreaStart();
2.                     {
3.                         Field(label1);
4.                         StreamAreaStart(New VoltageAreaSettings(true,VoltageAlignment.center);
5.                             Field(toggle1);
6.                         EndArea();
7.                         Field(label2);
8.                         StreamAreaStart(New VoltageAreaSettings(true,VoltageAlignment.center);
9.                                Field(switch1);
10.                         EndArea();
11.                         Field(label3);
12.                     }
13.                     EndArea();

Edit: The stored version should look like this

Code (CSharp):

1.  
2. WeightArea rowX;
3. VoltageToggle toggle1;
4. VoltageSwitch switch1;
5.  
6. void VoltageInit(){
7.     toggle1 = new VoltageToggle(valueToggle1);
8.     switch1 = new VoltageSwitch(valueSwitch1);
9.  
10.     rowX = new WeightArea();
11.     rowX.AddStoredElement(label1);
12.     StreamArea s = new StreamArea(New VoltageAreaSettings(true,VoltageAlignment.center); //local StreamArea, we won't need the reference anymore
13.     s.AddStoredElement(toggle1);
14.     rowX.AddStoredElement(s);
15.     rowX.AddStoredElement(label2);
16.     s = new StreamArea(New VoltageAreaSettings(true,VoltageAlignment.center); //I use the same identifier but its a new area
17.     s.AddStoredElement(switch1);
18.     rowX.AddStoredElement(s);
19.     rowX.AddStoredElement(label3);
20. }
21. void VoltageGUI(){
22.     WeightAreaStart(rowX);
23.     EndArea();
24. }
25.  
26. void VoltageSerialization(){
27.     valueToggle1 = toggle1.value;
28.     valueSwitch1= switch1.value;
29. }
30.  

You dont even need to save your labels elsewhere, just replace the lines like this:

Code (CSharp):

1. rowX.AddStoredElement(label1);
2. //Replace this line with
3. rowX.AddStoredElement(new VoltageLabel("Label"));

 

@whileBreak We found a way to use icoFont with your asset. It got ALL the icons usefull for any project. icofont.com

 

Oh and I also want to reduce the tab size to a single icon with an over event that will show the full name of the tab.
Is there a radio button in Voltage ?

 

Great to hear that. Radio buttons are going to come as VoltageOption on 0.9.5 (so wait 2 updates from now).

Now for the tabs, Unity OnGUI does not support Over events, it's in practice limited to Action and Normal states. You could, however expand VoltageArea to create a new MyTabArea, then you will be able to access all events (MouseDown, MouseUp, MouseMove, etc). But that's a big challenge, and you will need to wait for 0.9.4 so you can add your own custom areas to the VoltageGUI. Next update is a big one, a lot will change.

 

That will be great !

 

We Have to fix a lot of things, about 400 errors are popping !!!

 

Oh yeah, it's probably the new Constructor

 

Yup. Hope we can fix those without rewriting too much code. And the builder change

 

VoltageElementSetting is ???

 

Found it. Now I got error that tells me that :
file: 'file:///.../MainTab.cs'
severity: 'Erreur'
message: ''MainTab' does not implement inherited abstract member 'VoltageHelper.VoltageInit()' [Assembly-CSharp-Editor]'
at: '9,18'
source: ''
code: 'undefined'

 

Now VoltageInit is abstract and you will need to implement it even if you dont use it, you can leave it empty

 

Fix all our bugs then

 

Code (csharp):

1. NullReferenceException: A null value was found where an object instance was required.
2. RPGWiz.RPGWiz_UI.VoltageGUI () (at Assets/RPGWiz/Editor/Scripts/RPGWiz_UI.cs:176)
3. ......................

This line is where we call our mainTab();

 

We call it like that:
Constructor.StartHelper(mainTab.BuildStream);

 

try debugging if your Helper is null or your Constructor is.

 

It occur only at first run, after that it loads.

Try to guess what was causing the bug

 

What was it?

 

Voltagestyle

 

How do you hard code a font ? Each time you update we lose our icon font.

 

Isn't the font a file?
f you mean its deleting it, then just save it outside the Splime folder.

 

no no it delete the custom style we made, I want to hard code it.

 

do you still have the old style file? you can update it to the new stylebundle. Plus I rearenged the styles folder it shouldnt had deleted the file. Use the Converter window to update it, it will put the new version under the same folder with the other bundles. Then change its name and delete the styles that arent yours from that bundle. I believe I wrote that on the changelog, but now you have Style Bundles, that should fix the problem in the future, just keep the VoltageStyles bundles clear.

 

Can you try to nest your foldout inside a tab ? All my fold out are not responsive.

 

Ok, I'll have a look. I'm already working on the next update so you will see the fixes in short.

 

I made an unofficial discord server : https://discord.gg/NjbCqKe