Problem With Ui Log View Messing With The Spacing

Pizza Pro · July 27, 2016

Hi,

I'm trying to use the UI Log View feature, but for some reason it keeps messing up the spacing between all the elements in my UI.

Is anyone else having this problem? How do you fix it?

Thanks!

deliter · July 27, 2016

I presume you are using the Ubot UI not your own custom code?

If so I have made something a little better,unfortunately I don't know much about css elements,so I was chopping bits and pieces from the code,somebody else here might tweak this code to make it perfect,the code in Button 1 Label,needs to be placed in some label of a UI Element,Log View one doesn't work though

Was a bug in my original post so editing it,maybe another bug I havnt noticed



ui button("Button 2") {

}

ui button("Button 3") {

}

ui button("Button 1<script>window.onload=function()\{for(var x = 0;x < document.querySelectorAll(\".uielement\").length;x++)\{if(document.querySelectorAll(\".uielement\")[x].style.width===\"400px\")\{ document.querySelectorAll(\".uielement\")[x].style.boxSizing =\"\";document.querySelectorAll(\".uielement\")[x].style.width =\"300px\";document.querySelectorAll(\".uielement\")[x].style.height =\"70px\";document.querySelectorAll(\".uielement\")[x].outerHTML =document.querySelectorAll(\".uielement\")[x].outerHTML+\"</BR>\"  \}\}\}</script>") {

}

ui log view("ds")

ui text box("wq",#ew)

HelloInsomnia · July 27, 2016

You can use blank ui stat monitors (no label or content to track) to sort of space things out as well. Or if you need more spaces you can add line breaks into the label like so:

ui stat monitor("<br>","")

Each <br> will be another line.

Pizza Pro · July 27, 2016

I presume you are using the Ubot UI not your own custom code?

If so I have made something a little better,unfortunately I don't know much about css elements,so I was chopping bits and pieces from the code,somebody else here might tweak this code to make it perfect,the code in Button 1 Label,needs to be placed in some label of a UI Element,Log View one doesn't work though

Was a bug in my original post so editing it,maybe another bug I havnt noticed
ui button("Button 2") {
}
ui button("Button 3") {
}
ui button("Button 1<script>window.onload=function()\{for(var x = 0;x < document.querySelectorAll(\".uielement\").length;x++)\{if(document.querySelectorAll(\".uielement\")[x].style.width===\"400px\")\{ document.querySelectorAll(\".uielement\")[x].style.boxSizing =\"\";document.querySelectorAll(\".uielement\")[x].style.width =\"300px\";document.querySelectorAll(\".uielement\")[x].style.height =\"70px\";document.querySelectorAll(\".uielement\")[x].outerHTML =document.querySelectorAll(\".uielement\")[x].outerHTML+\"</BR>\"  \}\}\}</script>") {
}
ui log view("ds")
ui text box("wq",#ew)

Thanks deliter!

Yes, I'm using the default Ubot UI. Not doing any custom UI at the moment.

Thanks. I will see if I can give that a try.

Pizza Pro · July 27, 2016

You can use blank ui stat monitors (no label or content to track) to sort of space things out as well. Or if you need more spaces you can add line breaks into the label like so:
ui stat monitor("<br>","")
Each <br> will be another line.

Thanks HelloInsomnia, but...

... unfortunately, I don't need more spaces. I need less spaces.

Here's what I mean:

After some digging, I found TJ had a similar problem. But no resolution:

- https://tracker.ubotstudio.com/issues/920

Screenshots of the issue in the link above.

I'm not sure if this is just a problem some people are having with the Log View, or is it currently broken right now. I'm using the latest version of UBot.

Pizza Pro · July 27, 2016

deliter:

Thanks for the code. Unfortunately, I'm not sure why, but it doesn't work for me.

I'm still getting masses of huge spacing in between UI element columns.

It does make the UI Log View box a bit shorter though.

Brutal · July 28, 2016

Darryls GUI Hero makes this sort of stuff real easy on you. I honestly couldn't function without it.

Pizza Pro · July 28, 2016

Darryls GUI Hero makes this sort of stuff real easy on you. I honestly couldn't function without it.

Thanks Brutal,

Is it better than the UBot UI Editor?

I'm looking for something fast and streamlined right now, so I can get out bots for myself fast. So I haven't really done any UI editing yet.

Pizza Pro · July 28, 2016

Deliter, I managed to fix the code to make it work I think.

The problem was it was too wide for me. That's why it messed up the spacing. So I changed the style.width Here's my reworked code:

<script>
window.onload=function()    {
   for(var x = 0;x < document.querySelectorAll(".uielement").length;x++)     {
            if(document.querySelectorAll(".uielement")[x].style.width==="400px") { 
                document.querySelectorAll(".uielement")[x].style.boxSizing ="";
                document.querySelectorAll(".uielement")[x].style.width ="200px";
                document.querySelectorAll(".uielement")[x].style.height ="70px";
                document.querySelectorAll(".uielement")[x].outerHTML =document.querySelectorAll(".uielement")[x].outerHTML+"</BR>"  
}
}
}
</script>

Also, I just added it to a UI Stat Monitor label. I think it's working perfectly now. Thanks!

I have yet to master javascript, so I'll have to learn a bit more so I can get it to scroll to the bottom automatically as it updates.

deliter · July 28, 2016

Deliter, I managed to fix the code to make it work I think.

The problem was it was too wide for me. That's why it messed up the spacing. So I changed the style.width Here's my reworked code:
<script>
window.onload=function()    {
   for(var x = 0;x < document.querySelectorAll(".uielement").length;x++)     {
            if(document.querySelectorAll(".uielement")[x].style.width==="400px") { 
                document.querySelectorAll(".uielement")[x].style.boxSizing ="";
                document.querySelectorAll(".uielement")[x].style.width ="200px";
                document.querySelectorAll(".uielement")[x].style.height ="70px";
                document.querySelectorAll(".uielement")[x].outerHTML =document.querySelectorAll(".uielement")[x].outerHTML+"</BR>"  
}
}
}
</script>
Also, I just added it to a UI Stat Monitor label. I think it's working perfectly now. Thanks!

I have yet to master javascript, so I'll have to learn a bit more so I can get it to scroll to the bottom automatically as it updates.

nice!

check this out with autoscroll

ui button("Button 2") {
}
ui button("Button 3") {
}
ui text box("wq",#ew)
ui log view("ds")
ui stat monitor("<script>

window.onload=function()    \{
   for(var x = 0;x < document.querySelectorAll(\".uielement\").length;x++)     \{
            if(document.querySelectorAll(\".uielement\")[x].style.width===\"400px\") \{ 
                document.querySelectorAll(\".uielement\")[x].style.boxSizing =\"\";
                document.querySelectorAll(\".uielement\")[x].style.width =\"200px\";
                document.querySelectorAll(\".uielement\")[x].style.height =\"70px\";
                document.querySelectorAll(\".uielement\")[x].outerHTML =document.querySelectorAll(\".uielement\")[x].outerHTML+\"</BR>\"  
\}
\}
checkTextareaHeight()
\}


    function checkTextareaHeight()\{
var elem =  document.getElementsByClassName(\"log-view\")[0]
   if(elem.selectionStart == elem.selectionEnd) \{
      elem.scrollTop = elem.scrollHeight;
   \}
setTimeout(function()\{checkTextareaHeight()\},1000)
\}

</script>","")
ui button("Button 1") {
}
set(#num,1,"Global")
log("ewq")
loop(20) {
    log(#num)
    increment(#num)
    wait(1)
}

Pizza Pro · July 28, 2016

nice!

check this out with autoscroll

ui button("Button 2") {
}
ui button("Button 3") {
}
ui text box("wq",#ew)
ui log view("ds")
ui stat monitor("<script>

window.onload=function()    \{
   for(var x = 0;x < document.querySelectorAll(\".uielement\").length;x++)     \{
            if(document.querySelectorAll(\".uielement\")[x].style.width===\"400px\") \{ 
                document.querySelectorAll(\".uielement\")[x].style.boxSizing =\"\";
                document.querySelectorAll(\".uielement\")[x].style.width =\"200px\";
                document.querySelectorAll(\".uielement\")[x].style.height =\"70px\";
                document.querySelectorAll(\".uielement\")[x].outerHTML =document.querySelectorAll(\".uielement\")[x].outerHTML+\"</BR>\"  
\}
\}
checkTextareaHeight()
\}


    function checkTextareaHeight()\{
var elem =  document.getElementsByClassName(\"log-view\")[0]
   if(elem.selectionStart == elem.selectionEnd) \{
      elem.scrollTop = elem.scrollHeight;
   \}
setTimeout(function()\{checkTextareaHeight()\},1000)
\}

</script>","")
ui button("Button 1") {
}
set(#num,1,"Global")
log("ewq")
loop(20) {
    log(#num)
    increment(#num)
    wait(1)
}

Wow! You're amazing!

Thanks so much.

I'm trying out the new code now, and for some reason, it makes the scrollbox stuck at the bottom. I can't scroll up even if I want to. Hmm... :S

By the way, I was wondering how you can find the class names for the UI elements? For example, I can see that you're able to select the UI Log View by selecting the class name "log-view".

Is there any documentation where I can find the class names, id names, etc for all the UI elements. So I can select and manipulate them with CSS?

deliter · July 28, 2016

yeah that would happen alright it basically scrolls to the bottom every second,what you would need to do is see if the area is focused then do not refresh,otherwise refresh,bit late over here maybe I might try tomorrow

to get the HTML of the UI check out a thread I posted on eval in the UI,add this to your UI

ui button("Button 5 <input id=\"inputEval\" onChange=\" this.value = eval(this.value)\"></input>") {
}

in the box type,document.body.innerHTML

that will get you the innerHTML of the UI

Pizza Pro · July 28, 2016

yeah that would happen alright it basically scrolls to the bottom every second,what you would need to do is see if the area is focused then do not refresh,otherwise refresh,bit late over here maybe I might try tomorrow

to get the HTML of the UI check out a thread I posted on eval in the UI,add this to your UI

ui button("Button 5 <input id=\"inputEval\" onChange=\" this.value = eval(this.value)\"></input>") {
}

in the box type,document.body.innerHTML

that will get you the innerHTML of the UI

I see. Thanks!

I'll see if I can think of how to do it in the meantime.

Pizza Pro · July 28, 2016

Based on your code, I was experimenting with another approach.

Basically, what I tried was, if the height of the scrollbar changes, then scroll to the bottom. If not, then do nothing. But I couldn't get it to work for some reason.

*EDIT*

I finally got it to work!

Yeah! Here's my editing of the code:

Took me a few hours, but glad I managed to figure it out. Though I'm not sure if this is good implementation or not, but it seems to be working so far.

It only scrolls to the bottom when the ScrollHeight of the Scrollbar changes. If not, then it doesn't do anything. And I can scroll up and down when it's done.

The only thing now is, I'm not sure if it's a problem, but it's now in an infinite loop, that keeps on checking the ScrollHeight. It might be better if it stops the loop from checking once the ScrollHeight stays the same after some time.

<script>

window.onload=function()    {
   for(var x = 0;x < document.querySelectorAll(".uielement").length;x++)     {
            if(document.querySelectorAll(".uielement")[x].style.width==="400px") { 
                document.querySelectorAll(".uielement")[x].style.boxSizing ="";
                document.querySelectorAll(".uielement")[x].style.width ="200px";
                document.querySelectorAll(".uielement")[x].style.height ="70px";
                document.querySelectorAll(".uielement")[x].outerHTML =document.querySelectorAll(".uielement")[x].outerHTML+"</BR>"  
}
}
changeHeight();
}


function changeHeight() {
    var startHeight = document.getElementsByClassName("log-view")[0].scrollHeight;
    setTimeout(function() {
        if (startHeight != document.getElementsByClassName("log-view")[0].scrollHeight) {
            document.getElementsByClassName("log-view")[0].scrollTop = document.getElementsByClassName("log-view")[0].scrollHeight;
            startHeight = document.getElementsByClassName("log-view")[0].scrollHeight;
        } 
    }, 1000);
    setTimeout(function(){changeHeight()},1001);
}


</script>

deliter · July 28, 2016

EDIT,CHANGED THE CODE CURLY BRACKET MISTAKE

Nice, I often think of very difficult ways to solve easy problems lol,my biggest downfall

based on your suggestion I have just cleaned up the code a little,

Dont wory about infinite loops,Javascript is full of "Magic" ie dynamics that the coder doesnt even need to know/worry about,

it will wait for a second,but also leave you free to use the UI and not freeze it,and when it has a chance it will then execute the setTimeout function

</script>

Pizza Pro · July 28, 2016

EDIT,CHANGED THE CODE CURLY BRACKET MISTAKE

Nice, I often think of very difficult ways to solve easy problems lol,my biggest downfall

based on your suggestion I have just cleaned up the code a little,

Dont wory about infinite loops,Javascript is full of "Magic" ie dynamics that the coder doesnt even need to know/worry about,
it will wait for a second,but also leave you free to use the UI and not freeze it,and when it has a chance it will then execute the setTimeout function
<script>

window.onload=function()    {
   for(var x = 0;x < document.querySelectorAll(".uielement").length;x++)     {
            if(document.querySelectorAll(".uielement")[x].style.width==="400px") {
                document.querySelectorAll(".uielement")[x].style.boxSizing ="";
                document.querySelectorAll(".uielement")[x].style.width ="200px";
                document.querySelectorAll(".uielement")[x].style.height ="70px";
                document.querySelectorAll(".uielement")[x].outerHTML =document.querySelectorAll(".uielement")[x].outerHTML+"</BR>"
}
}
changeHeight();
}

var currentHeight = document.getElementsByClassName("log-view")[0].scrollHeight;
function changeHeight() {
     startHeight = document.getElementsByClassName("log-view")[0].scrollHeight;
if(currentHeight !== startHeight){
    currentHeight = startHeight

            document.getElementsByClassName("log-view")[0].scrollTop = document.getElementsByClassName("log-view")[0].scrollHeight;

}
    setTimeout(function(){changeHeight()},1001);
}

</script>

Cool!

Thanks for the cleanup! And glad to learn that you can actually use javascript in your UI labels.

I see.

Javascript is pretty awesome! I only know a bit of the basics. Need to start studying up on it so I can use it more.

By the way, your Eval UI HTML trick is pretty ninja!

Problem With Ui Log View Messing With The Spacing

Recommended Posts

Pizza Pro 11

Link to post

Share on other sites

deliter 203

Link to post

Share on other sites

HelloInsomnia 1103

Link to post

Share on other sites

Pizza Pro 11

Link to post

Share on other sites

Pizza Pro 11

Link to post

Share on other sites

Pizza Pro 11

Link to post

Share on other sites

Brutal 164

Link to post

Share on other sites

Pizza Pro 11

Link to post

Share on other sites

Pizza Pro 11

Link to post

Share on other sites

deliter 203

Link to post

Share on other sites

Pizza Pro 11

Link to post

Share on other sites

deliter 203

Link to post

Share on other sites

Pizza Pro 11

Link to post

Share on other sites

Pizza Pro 11

Link to post

Share on other sites

deliter 203

Link to post

Share on other sites

Pizza Pro 11

Link to post

Share on other sites

Join the conversation