Achaea on two computers, UI issue

Tesha

Hi!

I just got a laptop and I figured out how to synchronize my achaea profile folder from my desktop onto my laptop. It works great!

The only thing is my UI was set up for my desktop and I never thought I'd get a laptop, so it's all in pixel count rather than percentages. I'm unsure how to handle this! I'm thinking there are three possibilities for solutions, ranked from easiest to most difficult!

1. Change all the numbers stuff into percentages. This will be rough because most of it is like... eolUIHeight = 275 eolUIWidth 295, etc

2. Make an alias to disable the UI. This is troublesome because you have to restart mudlet for it to take effect, and if it saves, then it'll save on the other computer too.

3. Make a home directory check like Jacen mentioned and use currect UI if it's one directory, use a giant map if it's laptop directory.


I think the home directory check would work the best. That way if it's one computer it'll make the windows, and if it's another computer, it won't. So if the windows aren't even made, then mudlet doesn't have to restart to get rid of them.

However I have no idea how to make a home directory check or if that's even possible. I asked on mudlet clan and someone was unsure that it's possible. Anyone have any ideas?

Thanks!

Jacen

For my suggestion, you would code something like this:

if getMudletHomeDir():match("Teshas_Laptop") then
    -- Laptop GUI stuff here, maybe like 
    Geyser.Mapper:new({
 	name = "mapper",
  	x = -500, 
	y = -400,
 	width = 480, 
	height = 390
	})
else
    -- Desktop GUI stuff here
    Geyser.Mapper:new({	name = "mapper",
  	x = -300, 
	y = -350,
 	width = 290, 
	height = 340
	})
end

and etc, etc, for whatever consoles and stuff you have. "Teshas_Laptop" would obviously be the username of whatever computer you're designing for.

Cynlael

Percentages would actually work a lot better... Yes it requires a bit more work, but if the GUI helps you then it'll be worth it. Have global variables that define your screen size.

gui_width, gui_height = getMainWindowSize()         (may need to change them around, i forget which is calculated first)

then, as an example for gui pieces...

gui_randomwindow = Geyser.Label:new({
     name = "gui_randomwindow",
     width = "30%", height = "50%",
     x = "70%", y = 0
})
gui_randomwindow:setStyleSheet([[
     background-color: black;
     border-color: red;
     border-width: 2px;
     border-style: groove;
     border-radius: 7
]])

Will create a black background, red bordered, rectangular-ish box 70% of the way across your screen, and at the top. Which covers half your screens height, and the remaining 30% of the width.

Then if you want a box directly below that, just change the 'y' value to "50%"

edit; variables aren't needed for the windows and such specifically, but can be utilised by other things, like setting font size inside the labels.

Jacen

I avoided the percentages answer, since it doesn't always work. Its a cleaner solution, but if you have user windows on the desktop that can't get any smaller, then percentages just don't do it. 

Basically, if you can simply scale your GUI down, use Cynlael's method. If you might have to do some rearranging or nonlinear scaling, use my method. 

Vadimuses

Agreed percentages are better but they don't solve everything. Mobile developers run into the same thing - different screen sizes, you can't have the same UI work nicely on every one of them. You need to group them into categories and then do category-specific tweaks or sometimes entirely different designs. https://developer.android.com/guide/practices/screens_support.html for example has some information on this.

Iocun

In my GUI, I generally try to separate GUI initialisation from GUI "drawing". With that, I mean that I do the creation and naming of GUI elements in a different step than positioning, sizing, and styling them.

For example, instead of doing:

function GUI.init()
  myLabel = Geyser.Label:new({
     width = "100", height = "20%",
     x = 50, y = 50
  })
end

I might do:

function GUI.init()
  myLabel = myLabel or Geyser.Label:new()
  myLabel:move(50, 50)
  myLabel:resize(100, "20%")
  myLabel:setStyleSheet(GUI.styles.myLabel)
end

This has the same effect, but allows me to call GUI.init() any time something changes while my profile is loaded, without labels being re-created needlessly etc.

By doing things in a way similar to this, any run-time changes to your GUI are perfectly easy to do. Having to restart your profile simply to change something in your GUI sucks and I'd really recommend coding your GUI in such a way that this is never needed.

Naisar

Keep in mind that doing things the Right Way isn't always worth the time/effort in an amateur setting like this.  If you're not concerned about making it truly  portable there's nothing wrong with a quick hack to detect which device you're on instead of adjusting everything you already have to work with all screen sizes.  Regardless, you should listen to @Iocun's advice about separating initialization & drawing, and you shouldn't be checking directory names because it's needlessly breakable.  Use getMainWindowSize()

Jonathin

I only swap between my laptop screen (1366x768) and my big screen TV, (1237162876123x43423423) so I just use static positions from the right edge of the screen.


Eta: because positioning via percentage is a nightmare for me. I just use

tx,ty = getMainWindowSize()

x = tx-buttonwidth, y = ty-buttonheight