Project Lagertha - a UI/UX redesign



  • Screenshot time!

    Below you can see the design take form. I have minified buttons and made the form-inputs not as bulky as before. All in all, a little less “air” and a more tight UI. In the top right you can see my first test of a settings-button. The JS required to make it work is not yet efficient enough as it makes the page crash from time to time… So a bit more work needed there! ;)

    I am also working on changing the side-bar. I want it to fit better with the main-page, but still offer the ability to use your own background picture to brand it to your liking. There will be more posts like this moving forward so stay tuned!

    The chat-bar has not been coloured yet, so don’t complain that it’s white on the dark theme. ;)

    Kind regards,
    Mindful

    Dark theme! (first sketch)
    0_1490803267679_upload-9f92a4a1-86dd-422d-b939-2b579a5c50dc

    Light theme (trying to find better colours here to make it less “bright”)
    0_1490803418492_upload-99fbf404-93bd-4ab3-be66-399203ce1a1f



  • @Mindfulgaming dark theme looks good i like it!



  • 0_1490963200835_upload-b9226dc9-cef9-4abe-93b9-59746a3c8c22 0_1490963262524_upload-16877a30-c9ef-4a70-b00b-08129c748946

    Sneak peek… ;)



  • 0_1491082137442_upload-bd25683c-058e-4af0-8047-dd1e4f298062 0_1491082173465_upload-f7e58ae3-f7ff-472a-9e84-deeb2f750397

    New in latest release: mobile menu! (links may or may not work as of yet… :angel: )



  • You can now find the status of the project over on Trello. Basically the CSS rewrites are done, but changes has to be made to panels to make them work with the design. I will also look into improving the performance moving forward, as well as more ways for users to change the appearance of panels.

    Kind regards,
    Mindful



  • great work man keep it up!!!



  • It looks great but how’s the customizability of it?

    I’ve edited a bits and pieces of the existing panel, and changing over to this seems like it’d be a lot of work to get my edits to work properly.

    Edits such as: New panels/modules, new web pages, customization to existing panels (Such as coloring the youtube options based on their state).



  • @UsernamesSuck Hi!
    First and foremost sorry for taking some time to answer, I’ve had a lot of stuff to do IRL and haven’t had time to work with Lagertha. The customisation of this project isn’t very complicated, creating new panels are as easy as looking at how the other ones look and just copy the “framing” (the overarching div’s such as col- and row).
    In the CSS’ you’ll find a couple of variables at the top that impacts the overall design of the interface so using different colours etc. aren’t very difficult. (I have yet to solve changing colours set in the scripts though, but I’ll get to that eventually. ;)

    New web pages aren’t really covered by my redesign, but I imagine you’re using iFrames for this? If it’s just pages linked in the side-menu then just adding a li-element should be enough.

    The YouTube feature is something I haven’t even taken a look at yet as I never use it, but I imagine customising it will be following the same pattern as the main Lagertha interface.

    I know the Marvin-project has used my redesign and customised it a bit, and I don’t think it was that difficult for them, at least not with the parts I can see in their fork.

    Kind regards,
    Mindful



  • @Mindfulgaming

    First and foremost sorry for taking some time to answer, I’ve had a lot of stuff to do IRL and haven’t had time to work with Lagertha. The customisation of this project isn’t very complicated, creating new panels are as easy as looking at how the other ones look and just copy the “framing” (the overarching div’s such as col- and row).
    In the CSS’ you’ll find a couple of variables at the top that impacts the overall design of the interface so using different colours etc. aren’t very difficult. (I have yet to solve changing colours set in the scripts though, but I’ll get to that eventually. ;)

    It’s all good, life comes first haha.

    New web pages aren’t really covered by my redesign, but I imagine you’re using iFrames for this? If it’s just pages linked in the side-menu then just adding a li-element should be enough.

    Nah, they’re full blown new pages. Instead of going to localhost:25005/panel you’d go to localhost:25005/mypagename

    With the current system I had to copy a lot of existing styles/etc over, but that also had to do with the structure of the “website” itself.

    The YouTube feature is something I haven’t even taken a look at yet as I never use it, but I imagine customising it will be following the same pattern as the main Lagertha interface.

    That was just a small edit (literally just changes the button color based on state) to make it easier for me to know whether or not a function was enabled.



  • Regarding the pages, you can just add a new li-element, add the correct href and you are done.

    Button colours are set in the standard CSS, I imagine the YouTube page makes use of this as well so it will probably be set there. If you want custom colours on individual buttons, that is manual change. But maybe I should add that natively, I am trying to make the interface more user friendly… :)



  • New release ready!

    New features include:

    • a layout-change option for the dashboard (requested by @KLLSWITCH)
      0_1492272988921_upload-0088977b-25d4-4ab4-9c9b-ed10192bd513
    • panels below the first row are now collapsed by default
      0_1492273051812_upload-6ab1fcbf-1b71-459c-8bc9-1bab7fc0aaa6
    • the redesign progress of individual panels are now at 60% (Utilities and Connections are left) - you can follow the progress on Trello
    • first look at changing the sidebar to better reflect what I think will look great together with the UI versions
      0_1492273142574_upload-e2cd3d45-9f8a-4c9d-bc21-e1fc890157c1
    • some new UX changes such as the audio module and quote system
    • landing page has been changed so that the redesign there is visible for you as well (".gitignored" the background…)
      0_1492273190612_upload-c673383e-43ce-4150-a91a-516c00c66e0e

    As always, please report any errors you may find here or on Github, and if you have a feature request let me know here or post it on Wantoo!

    Kind regards,
    Mindful



  • @Mindfulgaming "New release ready"
    Where can it be downloaded and how to add it?

    Sorry for the noob questions, but I’ve been waiting for a release and I can’t figure out how to get it myself :D

    EDIT:
    I figured out that I just had to read the guide on GitHub.
    Great work so far dude! :)



  • @Mindfulgaming I don’t know if this is simply missing yet or a bug, however, I have a few ‘panels’ that is just blank.
    I.e my Discord area as seen here: https://i.imgur.com/zkeLUmM.png

    Yet another edit:
    I just found your Trello page and noticed the “In development” list and I can see that those I have issues with are indeed WIP :)



  • Indeed they are a WIP. ;) But if you find any other errors let me know!

    The next release (0.2.0) will include among others:
    0_1492636367939_upload-9b2d02b8-93aa-4b2f-968d-c4a06784a588

    This feature will need some user input (namely client-id). Hopefully this won’t be a problem?


  • Bot Developer

    @Mindfulgaming Is that because you are querying the Twitch API for follower count? This might be better if we added followers to the Twitch Cache as we are already hitting the endpoint for Followers (assuming that is what you are polling). We try to hit the Twitch API the least number of times as possible, and, essentially, you would be hitting an endpoint that we already hit on a timer. We do this because the Twitch API does have rate limits, or so Twitch says, and it reduces the overall network traffic as well from the bot.



  • @IllusionaryOne you are absolutely correct. Same goes for the subscriber value (twitch+gamewisp) and the view counter. As I’m not a java developer I couldn’t add that myself, and I don’t want to force the user to run a nodejs instance. So I can’t fetch the clientid in any other way than to ask users to add it to the uri.


  • Bot Developer

    @Mindful-Design A couple of things I see there that concern me:

    1. Are you registering your application for a new set of Client IDs or going to ask the user to do so?
    2. Beware rate limits.
    3. Beware rate limits.
    4. Hopefully (2) and (3) are clear.
    5. If you are polling the last subscriber, Twitch is redesigning the subscriber API and GameWisp uses a Websocket (at least, that is how we talk to GameWisp - recommended over REST calls). Are you planning on determining the most recent subscriber? That again might be better suited to have the Bot write that to a new table for you, even from the JS scripts.

    I guess, what I am getting at is, I wouldn’t try to redesign the wheel. We capture all of this data already, and hitting APIs again for the same data might not be the best idea. Enter requests for things like this, I would personally rather make a few small changes and keep any API calls down as much as possible :)



  • Thanks for the constructive feedback. ;)

    1. I will ask the user to do so, too much to admin otherwise.
    2. The call is made at a one minute interval atm.
    3. The call is made at a one minute interval atm…
    4. Sigh… Yes :P
    5. Why I don’t want to wait for you to deliver an endpoint that I can use is because I believe that will take some time… I wanted to create something that I myself have control over in the mean time, but if you could make this available then that would be great and I would def. move over to using that. As for latest sub, I just utilise localstorage, and the GameWisp-connection can (and might be) delivered from my own setup if I don’t figure out a way to find this in PB.

    I am not trying to redesign the wheel, I just want to create something nice and the better integrated with PB it can be the better for all of us. I did reach out to some of you earlier about joining forces but I didn’t really find any interest in that and therefore I haven’t asked about maybe creating endpoints like these in PB.

    I hope I didn’t sound rude, reading through my post I feel like it might be taken that way, but fear not, I like you all! <3 :)



Looks like your connection to PhantomBot Community Forums was lost, please wait while we try to reconnect.