Maximizing the console height

[wolph]

The tasmota console height is currently fixed to 318 pixels which just wastes a lot of space that could be used. With a tiny bit of css I've increased it to scale to the screen height, but I'm not sure if this works in all cases with all monitors. Perhaps there's some weirdness that I didn't think of :)

In any case, this works for me for both the berry and the regular console:

textarea#t1{
    height: calc(100vh - 340px);
}
div#t1{
    height: calc(100vh - 430px);
}

I've added it as a userstyle right now using the following regex url rule: http://\d+\.\d+\.\d+\.\d+/(cs\?|bc)

Test the userstyle from here: https://userstyles.world/style/11283/tasmota-console-height

[arendst]

How about pulling the right bottom handle down to resize the console?

It needs to work this way to accomodate larger consoles on phones.

[wolph]

That works of course, but it's more convenient if it works automatically.

We can easily make it work only for certain devices by using media rules, so phones should not be an issue.

[wolph]

I've tested it using the chrome developer tools on all available virtual phones and tablets and it seems to work great. It actually works better with than without this rule if you ask me.
For an iphone 12 pro for example:

Versus:

[pkkrusty]

Woah! I didn't know you could do that! Existing method: Any way to make the change persistent with cookies or something?

I agree with wolph that most use cases I would rather the console expand to fill available space vs manually adjusting every time.

[wolph]

I've created a userstyle for others that want to test this fix in the mean time: https://userstyles.world/style/11283/tasmota-console-height

[arendst]

I start to like the idea. Been playing with it. Seems it really needs spaces around the operator (-).

And as always there is the catch of finding the correct value for your current 340px value. Try to enable display of hostname in GUI (SO53 1) and see what happens. The same is true for my iPhone; the default 340px is too small so the header or footer text won't show.

There needs to be a way to find the correct viewport value.

[sfromis]

A question could also be how to apply the height fix to the Berry Scripting console with two resizeable areas and a non-fixed button zone at the bottom (can have an extra button depending on config). And the script editor when scripting is configured.

[wolph]

The 340px was just a quick value that appeared to work correctly for this, but CSS offers other/better ways to do this. We could use a grid or flexbox for example.

Here's how a flexbox could work: https://jsfiddle.net/wolph/dpzxr6sm/

But to implement that we would need to make a few changes to the current HTML and CSS as well.

[arendst]

Thx for the flexbox way. Did make a mockup and indeed some changes need to be made. I'll see how to manage this while still keeping the code as small as possible.

[arendst]

Try latest dev release. I implemented a minimal version of flexbox for default console. While testing on Chrome, Edge and iPhone I was suprised about the result!

Thx for the idea.

[wolph]

Thank you for the quick implementation. That looks fantastic, great work! :)
This makes the console so much more usable!

If I can suggest another useful feature, a meta+enter shortcut (or something similar) for the berry console to immediately execute so you don't have to press Enter twice.

I just wrote up this little snippet to do it:

document.getElementById('c1').addEventListener('keydown', event => {
    if(event.metaKey && event.key === 'Enter')
        l(1);
});

[s-hadinger]

I'm off for 3 weeks. Please feel free to submit a Pull Request

[s-hadinger]

Tried it too. Awesome work!

[arendst]

Have to find a solution for landscape mode on mobile phone (or not)….

[wolph]

Perhaps a min-height could help?

…

On Sat, Aug 5, 2023, 08:10 Theo Arends ***@***.***> wrote: Have to find a solution for landscape mode on mobile phone (or not)…. [image: image] <https://user-images.githubusercontent.com/11044339/258566612-5d8e346e-0d34-42f7-b7ad-50b3fa602ccf.png> — Reply to this email directly, view it on GitHub <#19241 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AACCB26I23KRPL3XUPMD4E3XTXPWJANCNFSM6AAAAAA3AQWA3E> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[arendst]

Yep. It did.