Jump to content
STApps

Looking for someone to help me build a UI for my first mod

23 posts in this topic Last Reply

Highlighted Posts

Hi there,

I've been told to post here in a comment to my reddit post, I hope that this is the correct section.

I'm not a modder and I don't have enough experience with Unity3d/time to do this by myself, so I'm posting here to see if someone can help me.

My mod allows to build parallel roads easily, and judging from the response on the linked reddit post, it's something that a lot of players were waiting for. However, for the reasons stated before, I can't seem to be able to create a good and working UI, meaning that I won't be able to release it in a short timeframe.

Here's what I need:

  • A draggable window with tabs support for future updates (just like in Network Skins)
  • Two buttons on top right corner, one is a checkbox used to enable/disable the mod while the other one is a button to add more rows in the panel below
  • A panel containing a variable number of rows (either using a scrollbar or increasing the panel's height), items are added using the second button above
  • Each row is composed by 2x UITextInput, a UIDropDown, 2x UIButton (one should be hidden on the first row only)
    • The second button must have a "x" icon and it's needed to remove rows
  • An icon showing two parallel roads with all the visual states needed for a checkbox
  • An icon with an arrow pointing down (not just the triangle, I need the entire arrow), with the same requirements as the other icon

What I have now? Just the template for the rows, and I'm not even sure if it's fully working.

I understand that I'm asking a lot, but I can't really work on this UI because, besides the lack of time and knowledge, my dev environment is in a virtual machine and I can't even debug, making the entire experience quite frustrating.

If someone is willing to help, here's a link to my GitHub repository.

Thank you for your time!

Share this post


Link to post
Share on other sites

Ah yes, the parallel road tool guy - that mod is gonna be a huge hit! For clarification, you want the icon with two parallel roads to represent each combination of roads, or literally just two roads together

Share this post


Link to post
Share on other sites

Hi! I've been wanting to get into CS modding for a long time. Finally, I am using this project as motivation to get started!

I set up my dev environment today. I have now a pretty good understanding of how everything works and started tweaking the UI. I'm probably going to rewrite most of the UI code to simplify it. I'm also working on icons in Photoshop.

While working on that I realized that the current form of one-super-long-dropdown that shows all the available nets is not very usable. I had the following idea: Why replicate a net selection tool when we can just use the current selection in the in-game toolbar for that?

The UI could convey this easily by showing these rows:

--------------------------------------------------------
[  0 ] [ (Currently Selected Net Name) ] [     ] [ Add ]
--------------------------------------------------------
[ 16 ] [ Saved Net Name                ] [     ] [ Del ]
--------------------------------------------------------

The first row is always at 0 offset and cannot be removed. It always shows the currently selected net. When the user clicks on Add, it is saved as a new row below, with editable offset (we could use halfWidth*2 as a default?)

 

Quote

 

An icon with an arrow pointing down (not just the triangle, I need the entire arrow), with the same requirements as the other icon

 

 

What's that for?

Share this post


Link to post
Share on other sites

@STApps: Welcome to Simtropolis!  This is lazarus-man continuing our conversation from Reddit.  To recap, my ideas (with clarifications) are:

1.  Instead of the slider I mentioned before, keyboard controls would be a nice addition (using arrow keys to control separation in real time.
2.  Controlling the offset of the cursor to the roads being placed (cursor on original/cursor in middle).
3.  Uniform height vs conform to terrain (Not entirely sure how to but have an idea).
4.  Undo button
5.  Also blue outline of parallel road (not sure if you were already planning this for later).

I am probably not going to be much help till next week.  I have two mod updates (MOM and NExt2 to release before ParkLife) and I am going to be out of town for the holiday weekend.  @reasonably1 seems to be making some progress on the UI so that may be your best bet.  I'm not sure what else you were planning to get out for version 1.0 or what you need help with other than the UI.  Perhaps I could look at reusing the in game menus for the nth selection...just let me know *;)

 

Share this post


Link to post
Share on other sites

@andreharv nice ideas. I will comment only on the UI related ones.

1. Control separation of which of the nets? I guess what people might want by default is all roads being exactly adjacent and the keyboard control increasing the separation between all roads equally? (i.e. by default the added roads are at [0, 16, 32], then after pressing the key it would be [0, 17, 34]?)

5.  Blue outline: I think we can take some parts from the Precision Engineering code for this, they have drawing overlays figured out pretty well. Shouldn't be too hard.

I made a super quick sketch of the current UI idea. For the future it has room for more options and presets (just buttons that open another modal, I'd say). @STApps you mentioned some more buttons and text fields for the list, what would they be for?

Artboard.png.982239602e2e9430e50c96dec849ca87.png

Share this post


Link to post
Share on other sites

Update: I figured it out for the most part. I also added the key-bindings for increase and decrease of offset. I recorded a very quick video. In the end you can see a problem with reversing roads - we'll have to turn off the custom segment creation for that.

 

Edit: Another video... This is already pretty fun as it is. I encountered some more bugs though,  especially when connecting to existing segments.

 

Share this post


Link to post
Share on other sites
  • Original Poster
  • Oh dear, I missed just one day of posts and you almost finished the UI lol

    Let me get back on track:

     

    14 hours ago, andreharv said:

    @STApps: Welcome to Simtropolis!  This is lazarus-man continuing our conversation from Reddit.  To recap, my ideas (with clarifications) are:

    1.  Instead of the slider I mentioned before, keyboard controls would be a nice addition (using arrow keys to control separation in real time.
    2.  Controlling the offset of the cursor to the roads being placed (cursor on original/cursor in middle).
    3.  Uniform height vs conform to terrain (Not entirely sure how to but have an idea).
    4.  Undo button
    5.  Also blue outline of parallel road (not sure if you were already planning this for later).

     

    1. By real-time do you mean like in MoveIt! ?
    2. It should be possible, I need to investigate it a little bit more (I work full time so I don't really have enough time during the week)
    3. Can you please share your idea on that? I feel that it needs to be done because it'd save a lot of work with MoveIt!, but I've no idea on where to start
    4. Let's say that the user draws a road with more than one segment, would you want to delete the entire road or the last segment only? My mod intercepts the CreateSegment method, so I know nothing about the rest of the road.
    5. Kind of planned, I should look into Precision Engineering
    13 hours ago, reasonably1 said:

    I made a super quick sketch of the current UI idea. For the future it has room for more options and presets (just buttons that open another modal, I'd say). @STApps you mentioned some more buttons and text fields for the list, what would they be for?

    Artboard.png.982239602e2e9430e50c96dec849ca87.png

    I like the UI outline, however I'd keep the dropdowns and make them auto-select the current road once added. The reason behind this is to allow drawing networks that are not available using the road selector (e.g. Castle Walls).

    About the other things I mentioned, here's what I meant:

    • An extra text-field for the vertical distance, so that we can allow the creation of stacked roads too (it shouldn't be too hard with the current code)
    • A button for each row to reverse road's direction (as above, it shouldn't be too hard but I need to verify it)

    Finally, nice videos and nice catch on the update bug! It seems like that the update feature just redraws the segment, so my mod gets called even when updating. This is not good actually, because I've no way to understand if we're creating a new segment or if it's an upgrade.

     Also, casn you please elaborate more on the bugs when connecting to existing segments? Please note that it shouldn't even work actually :D

    Thanks again to all of you for your help!

    Share this post


    Link to post
    Share on other sites

    I also work full time (I am cheating right now and writing this)...That said I am not by the code at the moment but off the top of my head...

    1.  Yes.  You hit the left/right arrow, the distance between the preview blue road indicators get wider/narrower.  Perhaps up/down arrows could work for elevation. This is just because some people are not as good with numbers and would rather just see the effects on screen before dragging.

    2.  This will take some investigation but I'm sure it is probably straightforward.

    3.  This one is kinda weird but it involves the TerrainManager.  TerrainManager has a method to get the  terrain height at a given position.  As you are creating your parallel roads, the m_position property on the nodes connected to the segment you are creating could possibly have their y set to either the surface terrain at that position (from the TerrainManager) or the y of the m_position of the original road.  This is just an educated guess though.  Perhaps the parallel roads follow the terrain now.  If that is the case, making them stick to the elevation of the original road should be pretty straightforward as well.

    4.  It would be all the segments drawn from that drag.  I don't know exactly how the simulation knows how many segments and nodes were created during a drag.  You will have to step out of that method and see what is calling it.  If you dragged a road with 5 segments and 6 nodes, then the undo button should remove 5 segments and 6 nodes.  Perhaps I could work on this one first.  Undo is especially crucial when there is a lot of stuff that is autogenerated.  It's also a plus because unlike MoveIt, this mod only creates segments (and nodes) so hitting undo will just be responsible for removing roads (most likely).  I will take a deep dive into the code on this one.

    5. I figured as much *:)

    Share this post


    Link to post
    Share on other sites
    10 hours ago, STApps said:

    I'd keep the dropdowns and make them auto-select the current road once added

    This makes a lot of sense. I will add the dropdowns back in. I'll also add the second text field and a checkbox button for reversing the road.

    I see you changed some code after I forked your repo. I kind of replaced the whole UI code, any idea how to merge this? :D

    Share this post


    Link to post
    Share on other sites
  • Original Poster
  • Just merged to the new-ui branch in my repo, you can continue from there :)

    I've noticed a few issues tho, added them as TODO in ParalleRoadTool.cs.

    Please let me know when you're done with the UI so that I can start fixing some things and start adding the other feature I have in my list.

    Share this post


    Link to post
    Share on other sites

    Would it be possible for the mod to detect a nearby road / node with the option to parallel with it?

    Like where the highway enters the tile you build in. You activate the mod, click the end of the one road, draw it, and the parallel road connects to the end of the other highway node end and draws the parallel road.

    Share this post


    Link to post
    Share on other sites

    @STApps Cool, nice! I aim to do the remaining UI stuff by Sunday night (I'm at UTC+9).

    @jumonjii Maybe a kind of measurement tool? Click "Measure", select 2+ nodes, click "OK", and it automatically adds the network infos and offsets for each of the selected nodes. That should be possible somehow but will require a lot of work, not sure it's something for the first version.

    Share this post


    Link to post
    Share on other sites
  • Original Poster
  • @jumonjii it's not possible, we don't have informations on roads that are not placed by the mod itself, sorry.

    @reasonably1 I created a new branch with some bugfixing and some new features (vertical distance + inverse direction), I'll move them into the master branche when you're done with the UI. You can add both text input and the invert road checkbox, I'll do the wiring :) Also, do you think that you can move the toggle checkbox outside mod's main panel? I was thinking about having it on the right of the freeform road button.

    Share this post


    Link to post
    Share on other sites
  • Original Poster
  • @reasonably1 Finished the merge after a day of bugfixing and other annoying stuff!

    Here are the UI issues that I found, please let me know if you can try to solve them:

    • Drag & drop is not "responsive" as before, now the window is moved only when the mouse is released
    • Main window is too narrow and the text inputs are too short
    • Once the dropdown is open, it can't be closed
    • The list with the dropdowns is being redrawn after every change, meaning that adding a new road will reset every other dropdown to the selected road

    As a bonus, do you think that we can add another button on every line? This button should sync the dropdown with the current selected road, making easier to change the selected road.

    Thank you again for your time and your help, we're getting closer to a first beta version!

    Share this post


    Link to post
    Share on other sites
    • Drag & drop is not "responsive" as before, now the window is moved only when the mouse is released

    It works on my machine. Have you tried removing the logging from the OnPositionChanged callback?

    • Main window is too narrow and the text inputs are too short

    I made it a bit wider.

    • Once the dropdown is open, it can't be closed

    That is on Colossal Order, that is the same behavior as all dropdowns in the game. You can only close it by clicking on an item. I fixed the positioning of the dropdown now, so it should be a bit more clear now. I looked into fixing the UIDropDown but it doesn't seem possible without using a completely custom component.

    • The list with the dropdowns is being redrawn after every change, meaning that adding a new road will reset every other dropdown to the selected road

    Can't reproduce that behavior.

    • Reset button

    Can do, but there's already so much going on. To get back to "Same as selected", isn't it easy enough to either scroll up to the first item, or simply remove and add a new one?

    Share this post


    Link to post
    Share on other sites
  • Original Poster
  • On 30/5/2018 at 3:26 PM, reasonably1 said:

    It works on my machine. Have you tried removing the logging from the OnPositionChanged callback?

    I'll try it later.

    On 30/5/2018 at 3:26 PM, reasonably1 said:

    I made it a bit wider.

    Thanks :)

    On 30/5/2018 at 3:26 PM, reasonably1 said:

    That is on Colossal Order, that is the same behavior as all dropdowns in the game. You can only close it by clicking on an item. I fixed the positioning of the dropdown now, so it should be a bit more clear now. I looked into fixing the UIDropDown but it doesn't seem possible without using a completely custom component.

    If it's not our fault it's fine.

    On 30/5/2018 at 3:26 PM, reasonably1 said:

    Can't reproduce that behavior.

    Just try adding one road, chaing its type and then adding one more. Both will reset to the current selected one.

    By the way, do you plan to submit another PR?

    Share this post


    Link to post
    Share on other sites
  • Original Poster
  • Oh yeah, notifications, I disabled them back when I worked on the Pokemon Go porting for Windows 10 and I never re-enabled them :D

    I've merged your PR, just doing some final tests and then I'll get everything ready for the beta release.

    Is there something you'd like to have in Workshop's mod description (maybe a link to some of your social profiles or something)?

    Share this post


    Link to post
    Share on other sites

    Hi,

    BadiBasso here. Thought I post here so as not to spam Github.

    Just got my VS and Github back in order (haven't touched either since I gave up with PoGo-UWP :) ).

    Looking forward to helping you with this project. Need some time though to orientate myself with the new API.

    If you have some better channel to communicate please inform.

    Cheers!

    BTW seems like you made a game changer here. 👍 

     

     

     

     

    Share this post


    Link to post
    Share on other sites
  • Original Poster
  • @BadiBasso we can use this topic for any kind of internal discussion (PMs are fine too).

    I'm getting some reports and I'm sure that any kind of help will be needed (I didn't have a full time job when I worked on PoGo but now I do, so I don't have that much time).

    Keep an eye on opened issues on GitHub, I'll probably open some more based on the reports I'm getting from the Workshop.

    Share this post


    Link to post
    Share on other sites

    Create an account or sign in to comment

    You need to be a member in order to leave a comment

    Create an Account  

    Sign up to join our friendly community. It's easy!  

    Register a New Account

    Sign In  

    Already have an account? Sign in here.

    Sign In Now


    • Similar Content

      • By Mr_Maison
        Hello everyone. This will be my custom content showcase and workshop thread. In all the years I been a member here, I never uploaded any content but enjoying great work by other members. I take this opportunity to say Thank You to all content makers for making our city building experience so enjoyable. I feel that making content is overdue for me and I want to give back to the community. I have some buildings and trees that I will be showing in upcoming updates to this thread. I will also be asking for advice and help.
        6/20/2018 Release: Travelers Palm Link https://steamcommunity.com/sharedfiles/filedetails/?id=1416852452&searchtext=

         
         
        More info on last pages of this thread.
         
         
        Note: This post was edited 5/29/2015 to reserve this first post for all current updates.
         
         
      • By Kanne
        This is my secound map!
        Its not good but its ok
        Have any questions just ask me
         



      • By Badi_Dea
        Hi all!
        Like most of you folks, I have a huge back-catalog in a spreadsheet somewhere of assets I plan on making some day.
        Well, here's my list.. This is just the stuff I want to make, It's alright if there is already a good asset on the workshop for it, it's just for my own pleasure.
        This isn't going to replace the refinery project, I'll still keep updating that thread. I just wanted to have a place to keep my other assets organized and seek advice from everyone.
        I'll have to clean up the list at some point, but for now it's just a data dump. I have some more things I would like to make, but I don't have a design picked out yet, so I left them off for now.
        Oil Refinery - Oil Processing
        https://www.google.com/maps/@30.0065019,-90.4071591,237a,20y,167.44h,35.05t/data=!3m1!1e3?hl=en
        Oil Refinery - Cargo Train Station
        https://www.google.com/maps/@37.9497817,-122.3930365,129a,20y,262.12h,44.54t/data=!3m1!1e3?hl=en
        https://www.google.com/maps/@38.0704488,-122.1403047,380a,20y,244.63h,20.43t/data=!3m1!1e3?hl=en
        Oil Refinery - Cargo Ship Dock
        https://www.google.com/maps/@38.0521921,-122.2629243,523a,20y,11.06h,42.26t/data=!3m1!1e3?hl=en
        Maintained Parking Lot Set
        Park, in road menu
        https://www.google.com/maps/@37.3910437,-121.9274703,223a,20y,25.88h,35.16t/data=!3m1!1e3?hl=en
        Steelworks - Cargo Train Station
        https://www.google.com/maps/@38.2377384,-104.6130184,402a,20y,104.06h,36.41t/data=!3m1!1e3?hl=en

        Steelworks - Ore Processing
        https://www.google.com/maps/@41.6169763,-87.3499964,1970a,20y,91.87h,38.38t/data=!3m1!1e3?hl=en
        Steelworks - Ore Processing
        https://www.google.com/maps/@41.4605099,-81.6761571,433a,20y,24.81h,35.14t/data=!3m1!1e3?hl=en
        Grain Silo
        Food Processing
        https://www.google.com/maps/@37.7160313,-97.3329193,423a,20y,122.76h,37.08t/data=!3m1!1e3?hl=en
        Concrete Plant
        Road Maintenance Building
        https://www.google.com/maps/@37.737851,-97.3243732,421a,20y,25.26h,37.6t/data=!3m1!1e3?hl=en
        City College
        https://www.google.com/maps/@39.5618932,-104.8134453,226a,20y,323.93h,46.24t/data=!3m1!1e3?hl=en
        High School
        https://www.google.com/maps/@39.6024645,-104.803733,322a,20y,114.75h,54.2t/data=!3m1!1e3?hl=en
    • Recently Browsing   0 members

      No registered users viewing this page.

    ×

    Thank You for the Continued Support!

    Simtropolis relies mainly on member donations to continue operating. Without your support, we just would not be able to be entering our 15th year online!  You've really help make this a great community.

    But we still need your support to stay online. If you're able to, please consider a donation to help us stay up and running, so that we can help keep bringing SimCity players together to share our creations.

    Make a Donation, Get a Gift!

    Expand your city with the best from the Simtropolis Echange.
    Make a donation and get one or all three discs today!

    stexcollection-header.png

    By way of a "Thank You" gift, we'd like to send you our STEX Collector's DVD. It's some of the best buildings, lots, maps and mods collected for you over the years. Check out the STEX Collections for more info.

    Each donation helps keep Simtropolis online, open and free!

    Thank you for reading and enjoy the site!

    More About STEX Collections