Blue Iris UI3

aesterling said:
Incredible! The top bar looks great on my iPhone However, the timeline is missing and there’s something overlapping the server name in the top right. I extracted the zip to my www folder and restarted the system.
Click to expand...

1720317389172.png
That icon in the corner is supposed to indicate that the Side Bar is being hidden. See how it has a crude representation of a top bar and a side bar and the side bar is a dashed outline that is slightly faded (maybe it isn't nearly as intuitive as I'd hoped).

Anyway clicking the icon causes UI Settings to open pre-filtered to the Side Bar settings so that a user could more easily turn the side bar back on.

I had to do something to make the hidden side bar more discoverable to a user. I am categorically opposed to letting users hide major UI components without some easy way to restore them. Inevitably people will hide the side bar by accident, forget they hid it, or use a device where someone else hid it.

Depending on feedback from others, I may redesign this "feature" but I'm hoping nearly nobody uses the function and I can just let it slide as-is.

aesterling said:
Update: When I turned the “Show Status Bar” toggle back on, the timeline reappeared and the graphics that were overlapping the server name disappeared. Possible to decouple the status bar and timeline?
Click to expand...

I didn't know about that bug. Only affecting portrait layout it seems. I will fix :)
 
bp2008 said:
@aesterling
Bug fixed in UI3-270.
Click to expand...
Working great, thank you again!

bp2008 said:
That icon in the corner is supposed to indicate that the Side Bar is being hidden. See how it has a crude representation of a top bar and a side bar and the side bar is a dashed outline that is slightly faded (maybe it isn't nearly as intuitive as I'd hoped).
Click to expand...
That makes sense now. I thought that icon looked like the "fullscreen" button appearing in the wrong place.

Unrelated question... When I attempt to resize the side bar by dragging the top divider, it only moves a bit and I have to repeat the action multiple times. Is that expected behavior? I'm on v270. Screen recording:


View attachment resize_sidebar_screenrecording.mp4
 
  • Like
Reactions: bp2008
aesterling said:
Working great, thank you again!


That makes sense now. I thought that icon looked like the "fullscreen" button appearing in the wrong place.

Unrelated question... When I attempt to resize the side bar by dragging the top divider, it only moves a bit and I have to repeat the action multiple times. Is that expected behavior? I'm on v270. Screen recording:
Click to expand...

:)

Yikes. Your touch events are scrolling the whole page along with moving the divider. That isn't supposed to be possible for multiple reasons, but apparently is another bug with progressive web apps (PWAs) on iOS.

I don't own a modern iOS device still, so if you are willing to experiment with a few things to see what fixes it, please try:

First potential solution

in ui3.htm after the <head> element, paste this style block. (by putting it directly in to the HTML file you will be able to avoid caching issues that would occur if modifying ui3.css).
HTML: 
<style type="text/css">
html
{
  margin: 0;
  overscroll-behavior: none;
}

#systemnamewrapper
{
    background-color: red !important;
}
</style>

Then close and reopen the UI3 progressive web app to make sure the new content is loaded. I put a rule in there that changes the system name background to bright red so it will be obvious if your changes got loaded and you won't have to guess.

Test if that fixed the issue properly. Some things I would test:
1. Dragging the divider should work as expected. (the entire page should NEVER move as seen in the video you shared)
2. The clip list should still scroll normally.
3. The UI Settings panel should still be movable by dragging the title bar and its content should be scrollable.
4. Test some other touch behaviors such as switching cameras and scrubbing in a clip or on the timeline.

If the above doesn't fix the issue, here are some more potential solutions based on a stackoverflow question.

Second potential solution

Delete the css rule for html (from the style block you added for the first solution), and paste this in the style block instead:
Code: 
body
{
  touch-action: none;
}

You may leave intact the #systemnamewrapper rule and change its color again, e.g. to green or yellow or black to be able to verify that your changes got loaded onto your iOS device.
Third potential solution

Delete the css rule from the second solution, and paste this in the style block instead:
Code: 
body
{
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}

And then inside any of the script blocks on the page (I'd suggest the last one at the bottom of the page so that error handling stuff will have been initialized already), paste this additional script:
Code: 
window.addEventListener("scroll", (e) => {
  e.preventDefault();
  window.scrollTo(0, 0);
});
 
Last edited:
I wonder if the margin: 0; part is actually necessary or if overscroll-behavior: none; on its own is sufficient. Can you test that for me?
 
It's working correctly with only this added:

Code: 
<style type="text/css">
html
{
  overscroll-behavior: none;
}
</style>
 
  • Like
Reactions: bp2008
Quick question about the convert/export list on UI3. When I export something, in the past, I could go to the "convert/export list" on UI3 and see what I've exported recently. Now, that list is always empty. If I don't save it immediately as a clip is finished exporting, it vanishes.

1723036743577.png

Interestingly, if I go to the clipboard view, I am able to see some of the exported clips:

1723036829714.png

Likewise, in the BI console, under clipboard, I can see the exports.

Is there a disconnect in UI3?

I'm running 1723036886488.png

But it's been this way for quite some time (months?).

Thx
 
erkme73 said:
Quick question about the convert/export list on UI3. When I export something, in the past, I could go to the "convert/export list" on UI3 and see what I've exported recently. Now, that list is always empty. If I don't save it immediately as a clip is finished exporting, it vanishes.

View attachment 200501

Interestingly, if I go to the clipboard view, I am able to see some of the exported clips:

View attachment 200504

Likewise, in the BI console, under clipboard, I can see the exports.

Is there a disconnect in UI3?

I'm running View attachment 200505

But it's been this way for quite some time (months?).

Thx
Click to expand...

I am aware actually. Quite some time ago, Blue Iris changed the behavior, didn't bother telling me, and I didn't bother working around the break, kind of just intending to deal with it if I ever went back into that code to implement the function to delete items from the queue. I will see what I can do now.
 
  • Like
Reactions: MrRobinHood, looney2ns, erkme73 and 4 others
bp2008 said:
I am aware actually. Quite some time ago, Blue Iris changed the behavior, didn't bother telling me, and I didn't bother working around the break, kind of just intending to deal with it if I ever went back into that code to implement the function to delete items from the queue. I will see what I can do now.
Click to expand...
Thank you! Not the end of the world but knowing I wasn't going crazy helps.
 
  • Like
Reactions: bp2008
bp2008 said:
I am aware actually. Quite some time ago, Blue Iris changed the behavior, didn't bother telling me, and I didn't bother working around the break, kind of just intending to deal with it if I ever went back into that code to implement the function to delete items from the queue. I will see what I can do now.
Click to expand...

Your work on UI3 is really appreciated mate, it's the interface of BI that I use daily and what really elevates it to top tier status once the core app is fully configured, so thank you man.
 
  • Like
Reactions: JNDATHP, looney2ns, aham and 2 others
Is there a way to get clips to refresh the image after AI runs? I have AI set to "Zoom-in to objects" on the alert image, but UI3 does not show the updated image until I refresh the entire page.
 
it60630 said:
Is there a way to get clips to refresh the image after AI runs? I have AI set to "Zoom-in to objects" on the alert image, but UI3 does not show the updated image until I refresh the entire page.
Click to expand...

I wasn't aware that thumbnail updates are a thing, but I guess it makes sense that AI processing could result in thumbnail changes.

Clicking on the "Clips" tab should refresh just the clip list, although I am not completely certain it won't just load all the thumbnails from the browser cache.
 
You must log in or register to reply here.
Top Bottom