Project Lagertha - a UI/UX redesign

  • @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)
    • panels below the first row are now collapsed by default
    • 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
    • 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…)

    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,

  • @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

    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:

    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:

    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 :)

  • Hey guys! Just wanted to give a quick heads up that I am now working on adapting the redesign to the latest version of PB. Once that is complete, and some other fixes and additions have been implemented, I will release version 1.0.0.

    This version will be free-ish of bugs and production ready for all to enjoy, together with an install and personalisation guide.

    In the mean time you can as always follow the project on Trello and github!

    Kind regards,

  • @Mindful-Design I noticed that the bot design is done.
    I took the GitHub files and uploaded again, but I still can’t see Discord page etc.

    Any ideas?

    Also I would love, if I could force the CP to always be “dark themed”, instead of having to do it manually every time.
    Not that it’s a big issue. Just a nice little nifty thing ;)

    Great job so far! Really loving the design.

  • Cant wait for the new version, I’ll see if my server manager and see if he can do this!

  • @EchersDK Look at index.html
    you will find line that looks like this.
    <link rel=“stylesheet” id=“themeChange” type=“text/css” href=“panel/css/mindfuldesign.css”>

    change it to
    <link rel=“stylesheet” id=“themeChange” type=“text/css” href=“panel/css/mindfuldesignDark.css”>

    This will make the panel always start in Dark theme

  • @Strayz Thanks! :)

  • Thanks for helping him out there with the css “hack”!
    I have implemented a caching service in v1 for the theme change so your choice will stay as long as you don’t clear your browser cache. :)

    BTW - is there any links you think would be nice to have in the footer menu? Right now there’s just placeholder links.

    Kind regards,

  • @Mindful-Design np. was just a small fix til something easier came along :D

  • Absolutely stunning, the streamer I run Phantombot for has trouble navigating the default web panel and this looks absolutely perfect. That it’s also mobile-friendly is just amazing, the streamer can keep their phone nearby and quickly make some changes without worrying about their game losing focus.

    This should totally become the new default UI so that it updates automatically with the rest of Phantombot, with as well laid out as this is I can’t think of any reason to stick with the old UI other than familiarity.

  • Thank you so much for those kind words @HelmicNewciv! Glad you appreciate it!

    1.0.0 will be a bit delayed, I am struggling with getting the tables to load on request. Hopefully I’ll figure it out soon…

  • @Mindful-Design Dont worry man, you got this!!

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