Skip to content
This repository has been archived by the owner on Nov 1, 2022. It is now read-only.

New UI Proof of Concept #40

Closed
Phr33d0m opened this issue Jan 28, 2015 · 37 comments
Closed

New UI Proof of Concept #40

Phr33d0m opened this issue Jan 28, 2015 · 37 comments
Assignees

Comments

@Phr33d0m
Copy link
Owner

Hi,

As @David3412 said in #33 - the number of options is increasing, and having that small box on the right side of the screen isn't that nice anymore.

I've thought about doing what was suggested in #33 - tabbed settings or make the categories in an accordion style but none of them allowed us to have a fast preview of all the settings at the same time (or a few clicks would have been involved). So I kept the idea of having all the settings in a box.

Check it out: http://flz.politeia.in/nw-bot-poc/
Note1: There's 0 interaction with the bot, that's just a design.
Note2: Check the Leadership profession select, it will solve #39.
Note3: Click the (?) for additional help ;-).
Note4: Just for the sake of the example, the page will reload if you click Cancel or Save.

This is my suggestion of a new UI. If anyone has any suggestions about it or wants to submit their own - here's the place to do so.

@Phr33d0m Phr33d0m self-assigned this Jan 28, 2015
@RottenMind
Copy link
Contributor

Yes, advanced one.

If UI takes over whole screen then character names must retrieved by script, if script retrieves character names then non-working character names are partially blame by script, but is there way to make script "try retrieve char.names automatically" user must test that names are working!?

@Phr33d0m
Copy link
Owner Author

is there way to make script "try retrieve char.names automatically"

No that I know of. The way the gateway shows the list of characters is pretty strange.

user must test that names are working!?

Yes, (s)he must have that enough brain power.

@noonereally
Copy link
Collaborator

Had an idea about the task lists, try https://github.com/noonereally/NW-Profession-Bot
At least this commmit from 12 hours ago
noonereally@d2d22bb
I will probably break/fix stuff later.

it's more of a concept, and i used the same theme @mac-nw choose
I also think that each char should have the 'auto 'vendor settings + check box 'Override global settings for this char.
Also a button "Apply this char settings to all chars" for tasks, and one for the personal settings
I've also added priority to the tasks so it can accommodate a logical listing of the task (leadership on top, events on bottom) and what i think @BigRedBrent wants, to make leadership lower priority for the slot selection.

@mac-nw
Copy link
Collaborator

mac-nw commented Jan 29, 2015

Very cool. Some suggestions:

  • Dropdown list for character names with a Modify Characters button next to it.
  • popup or replace tasks with multiselect list to add/remove characters (perhaps auto sort this list alphabetically).
    • Show/Hide auto login and character ad transfer details depending on selection.
    • Add a border for each section to make it easier visually to distinguish them.
    • Make popup help dialog more visible maybe better placement too.
    • Make branch for it :D
    • If you could make the pref button into a dialog at top right, then we can merge the AD balance and current task info into that corner and also add the play/pause and maybe some basic info about current character wealth and assigned slots summary.

@mac-nw
Copy link
Collaborator

mac-nw commented Jan 29, 2015

Do you want to put the alertifyjs directly into the end of the script or use the @require to load and cache it from current url? Perhaps we can put the alertify.min.js into the main branch and include it via a github url to this repo instead of the one used currently (for version purposes).

@Phr33d0m
Copy link
Owner Author

@mac-nw I still have a couple of changes pending from what you guys suggested and I'm still not sure how to manage all the css/js file imports (where to host etc...).

Yeah initially @require of the files will be used and we can host them here at github in the gh-pages branch.

@mac-nw
Copy link
Collaborator

mac-nw commented Jan 29, 2015

Looking at the full screen pop-out still seems a bit overwhelming. I still think a nice accordion to split the options would be nice:

http://demos.inspirationalpixels.com/Accordion-with-HTML-CSS-&-jQuery/

@mac-nw
Copy link
Collaborator

mac-nw commented Jan 29, 2015

@Phr33d0m Hmm If we tag releases, is it possible to get a URL for external includes to that specific release?

I ask because in the jquery-ui branch there is an example of including the external css as well. Using external includes will require keeping all release versions available to users.

@Phr33d0m
Copy link
Owner Author

You can tag a specific point in time (a specific commit) and then you'll be able to download it as .zip/.tar.gz/etc... so I'm not sure if that's what you want.

About storing external includes, github allows you to have sort of a static website for every project you have, so we can store stuff there (to store stuff in the static website we just commit to a branch named 'gh-pages').

@mac-nw
Copy link
Collaborator

mac-nw commented Jan 29, 2015

I mean, for example when we release UI, lets say version 1.11.0 , we could have a custom link in main script to include specifically the 1.11.0 .css or .min.css

@Phr33d0m
Copy link
Owner Author

Yes, but that link has to be stored somewhere and the best place is that static web, so the link would look like:

phr33d0m.github.com/nw-profession-bot/releases/1.11.0/css/file.css
phr33d0m.github.com/nw-profession-bot/releases/1.11.0/js/file.js

Or we can just store them in a folder in the main branch and use rawgit.com. I think there's still time until we get to that point though.

@mac-nw
Copy link
Collaborator

mac-nw commented Jan 29, 2015

The only concern is that changes after ui release might comprise old installations if radical changes are made to the css/ui/includes. Something to think about before new UI release.

@Phr33d0m
Copy link
Owner Author

We'll have a different folder with css/js files for each release as the bold text in my previous comment. So no issues with that.

@Phr33d0m
Copy link
Owner Author

I just updated the design.

  • No longer fullscreen
  • Now you can move the modal around the screen (wherever you want) and pin it there (I made the test page scrollabe so you can test it out)
  • Added some icons to style things up
  • Added icons/actions for edit/remove a character ('remove' will need some further implementation)
  • Added colour to titles and some other thingies to distinguish between the different categories

And no, accordions might look nice and all but they're completely useless here (and moreover a PITA) IMHO.

@mac-nw
Copy link
Collaborator

mac-nw commented Jan 29, 2015

The limit on the length + scroll bar is awesome. I love it :D

Regarding a main (parent dialog) to put the preferences, play, pause and AD + current task info into. I've made a mock json data model that i think would be a good structure to cache data into:

http://codebeautify.org/online-json-editor/1f330f

Of course this would be reset and updated when reloaded. It might be good to include the existing settings, character tasks structure in there or separately in the same fashion to make it easy for reference (will help with UI implementation).

@mac-nw
Copy link
Collaborator

mac-nw commented Jan 29, 2015

Also:

  • Maybe do two column style for general options and character list.
  • Character list should have links on the names for triggering hide/show for character slots.... If character slots updates from data and not hiding/showing like currently, then there will have to be a Save/Undo Changes button needed.. Personally i like the load/save from data into one instance of the task list layout, Though it is more work to implement.

@mac-nw
Copy link
Collaborator

mac-nw commented Jan 29, 2015

The Pin button breaks the layout. Expect that it should probably position top right corner and main dialog width.

@noonereally
Copy link
Collaborator

I think linking to Git is not recommended, perhaps CDNs like https://rawgit.com/ if there is no other option.
Not related to GUI, but if already adding files to the script, is it possible to move the taskList to a separate one ?
Would love to see 'settings' reworked into something with more structure, currently it was not straight forward making 3 inputs per task without breaking it / using it as it is.
And as i wrote before, I've updated the fork with working tabs and accordion
https://github.com/noonereally/NW-Profession-Bot

@RottenMind
Copy link
Contributor

More candies for kids, xD

  • can menu remember last position?
  • is it hard add "sub menus"
    • if "Sell junk"
      • sell "unidentified green"
      • sell "object_trinket, object_mug, etc

That way even "Quality filter" -changes can be added menu if they are hidden from "accidental" clicks, but some filters should stay "hardcoded" to avoid fatalities...

@mac-nw
Copy link
Collaborator

mac-nw commented Jan 30, 2015

@RottenMind - From a dev point of view i think the initial new UI should not go beyond the current options. Once all the existing options work in new UI then later revisions can extend on it. Otherwise if we do all the nice to have additions now it may result in longer development time and delays on releasing the UI. This is just something i've seen from experience.

@Phr33d0m
Copy link
Owner Author

@noonereally I'm currently unable to test your thing out, could you do me a favor and upload some screens of it? Btw, rawgit is basically linking to git using a cache server in the middle so we'll have to put the files in the repo anyways.

@RottenMind remember last position - not really, I can spawn it at a specific location but even that could cause problems on browser resize or whatever. Given the possibility to move the window at will I don't think that's really needed, IMHO. :-P

Everything else can be expanded after that with no issues.

@mac-nw RERO ftw

@noonereally
Copy link
Collaborator

Yes, it rewrites the headers and uses MaxCDN as global cache, as far as i understand Git discourages direct linking to repos for working software. There are also other CDN solutions.

I've already made a pull request (it works), I think the only thing missing is the amount of gold available to buy asset check that @mac-nw added after i pulled the source, so it will need to be merged if you will choose to merge.

@RottenMind
Copy link
Contributor

...about "last location", I can live without it, but if it spawns "middle" then users automatic moves it corner, so current script spawns "menu" in corner and user must Zoom or do needed adjustment to bring it visible...
, so if menu spawns corner it serve most users behavior, if it spawns midle it makes those users to ask if can spawn else where.

Can you make spawn location selectable,

  • middle(default, recommended)
  • top, bottom, left, right(experimental, can cause visibility problems)

If they are selectable, then each selection depends user preference and each selection problems stays with user, middle is safest others experimental and all can use what they want....

@RottenMind
Copy link
Contributor

@mac-nw ... current release is fine. There is only three known issues with and all they can be addressed with some silly words , -"use brains to avoid" or "gateway_client glitch"...

Sooo we have plenty of time before next release, what would be when,

  • new UI is ready
  • MOD6 is released on NW

, both conditions are good reason make release, but MOD6 will "force" release if UI is ready or not, then UI wait that its completed and that decision is after you guys who create it to say if its ready or NOT, xD.

(Mod6, is hopefully only just "Taskilist" + "craft_ingredients"... still looking it, ;). )

ps. just when I say, -it works.... HOTFIX!!!

@Phr33d0m
Copy link
Owner Author

@noonereally I saw your changes today, pretty good job from what I've seen (haven't tested though). Would you be able to merge it into the new UI? As a webdev, accordions suck 97% of the time.

Anyways, the rest of your changes would be a very good addition indeed so if you have the time, could you put it into the new design as soon as we push it? Thanks in advance.

@noonereally
Copy link
Collaborator

I'm not sure I understand. Why not merge now then, and you can implement the new ui on top of it, like you planned anyway. Otherwise I need to redo the same work twice.....

also if not using an accordion, what is the merit of having the list of characters there ? maybe then a simple select with all the names and on change, change the div below, so it wont be a list long with 20+ chars.
The delete icon can go inside the charblock part near its name.

@Phr33d0m
Copy link
Owner Author

Roger that. A nice searchable select sounds like a plan.

@mac-nw
Copy link
Collaborator

mac-nw commented Jan 31, 2015

I was looking at the data model yesterday and i noticed there is list of objects for each character under the main data model. Could easily make a button to sync characters with gateway (check/prompt for gateway login first ofc).

Anyways, the data is sitting at: client.dataModel.model.loginInfo.choices

@MohammadYounes
Copy link

@mac-nw The Pin button breaks the layout. Expect that it should probably position top right corner and main dialog width.

This is due to having an absolute body without a width, adding width:100% or right:0; fixes the issue.

Even though it's a test page, but I thought you should know!

Thanks.

@dlebedynskyi
Copy link
Contributor

@Phr33d0m
New UI is great. Could you please consider having character specific task list?
EG Id like to have one char doing Alchemy - pots of one kind, another char - another kind?
Right now I "fix" this by adding custom profession aka Leaderhip XP. So Now I have one char for Jew Rings, one for Jew Neck and so on.
Idea how to fix this - make a list of task user editable per each char with defaults applied on slot > 0 per char.

Concept interaction based on your http://flz.politeia.in/nw-bot-poc/
1: press edit char.
2: add +1 to some core profession.
3: now you can see edit for list of task.
4: on edit click -> show popover on slots list with 1- 25 lvl and task list in edit comma separated.
5. press save -> save this prof task.
6: optional - you can save custom profession task list by new name.

Also I notices some interference when you have 1 slot for Jewel-crafting Craft custom profession and 1 more slot for regular default Jewel-crafting.

Thank for your work and hope to see some of UI improvements next.

@noonereally
Copy link
Collaborator

@dlebedynskyi, you can find a working solution for multiple different task types here: https://github.com/noonereally/NW-Profession-Bot

You will need to add profiles for the tasks though, the git version has only leadership split, but it's the same with others, you just make profiles

@dlebedynskyi
Copy link
Contributor

@noonereally
Yeah. the " bug" come from next lines - currentTasks counter returns count for whole profession not profile.

// Check for available slots and start new task
        if (unsafeWindow.client.dataModel.model.ent.main.itemassignments.assignments.filter(function (entry) {
                return (!entry.islockedslot && !entry.uassignmentid);
            }).length) {
            // Go through the professions to assign tasks until specified slots filled
            for (var i = 0; i < tasklist.length; i++) {
                if (settings[tasklist[i].taskListName] > 0) { //MAC-NW
                    var currentTasks = unsafeWindow.client.dataModel.model.ent.main.itemassignments.assignments.filter(function (entry) {
                        return entry.category == tasklist[i].taskName;
                    });
                    if (currentTasks.length < settings[tasklist[i].taskListName]) {
                        unsafeWindow.client.professionFetchTaskList('craft_' + tasklist[i].taskName);
                        window.setTimeout(function () {
                            createNextTask(tasklist[i], 0);
                        }, delay.SHORT);
                        return true;
                    }
                } //MAC-NW
            }

So if you have on same char 2 profiles with diff profiles. Example- Jewelcraft with 2 slots and Jewelcraft Craft with 1 slot. It will still be counting 2 or 1 slot max. Not 3. It counts by number of slots per profession - eg Jewelcraft - not by number of slots by profile. Depends on order of professions in tasklist.

May be a separate bug thought. I have not really looked into it much. Just did same as leadership atm.

@noonereally
Copy link
Collaborator

yes, it was not meant to be used simultaneously on the same char. It was a small addition to allow separate leadership task-lists on several characters.
Those are not the profiles i am talking about, the fork that I linked has a bit different code that use profiles instead of 'separate' task-lists, you can make as many profiles per task that you want, but it meant to be used as a single profile per character as well.

There is no simple way to count occupied slots and assign them to a profile, lets assume all/most your profiles have some common tasks and now one running, to what profile to assign/count it ?

Also there is a tab there for per character settings that meant to override global settings but it was left undone.

@dlebedynskyi
Copy link
Contributor

@noonereally I 'll take a look at that fork. For now i like it. Will give it a try now. I hope something like this will be in main brunch or you will merge latest patches in yours.

There is no simple way to count occupied slots and assign them to a profile, lets assume all/most your profiles have some common tasks and now one running, to what profile to assign/count it ?

You can simply use order or char specific profiles. EG if you have 3 slots open for 1 profession and 2 profiles for same prof with 2 slots and 3 slots requested. First assign 2 slots for profile 1. Then 1 for profile 2. Bases on their order -priority. Same as it is now.

@noonereally
Copy link
Collaborator

The latest patches have been merged as they were added.

@dlebedynskyi
Copy link
Contributor

@noonereally ok. never wind. Send you pull request with some profiles. Would be great if we do char specific stuff. Generally we can set priority there and order too. So we can have 2 profiles on same char respecting order and priority - so that they can share same profession as described above.
only one addition would be is that char specific stuff has to be prior to general stuff.

@dlebedynskyi
Copy link
Contributor

Current UI is good so far. @Phr33d0m close this please.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

6 participants