Nicer UI

[Merovius]

trafficstars

The Web-UI is extremely minimal (or… non-existent). We should add some swagger, have hoverable buttons for rotating and maybe animate the rotation and somesuch.

[mlgarchery]

Rotating would be great indeed. The best option would be that it rotate when we use the landscape mode ! (but it would be hard to implement). So maybe a rotate button yes ! But i like the "interface' like it is now, i feel like we don't need much more

[Merovius]

I think landscape mode is implemented completely internally to xochitl. AFAICT there's no way to actually figure out how that's set (e.g. the framebuffer didn't change mode when I tried it a couple of days ago, I think). Personally, I also don't use landscape mode a lot.

Buttons for the functions are IMO pretty important for discoverability - I implemented rotation earlier today, but unless you click the image by accident, you won't notice :) There are also a couple different functions I'd like to add (downloading the current screen as a PNG came up today, for example).

Don't worry, I intend to make any added UI elements discrete and don't want to clutter it either :)

[torwag]

Please consider adding a "stop streaming"/"restart streaming" button. That would allow people to finish a sketch or phrase before putting it "online".

[Merovius]

@torwag That's a good idea, thanks :)

[bordaigorl]

I took the liberty of writing a (hopefully) better UI. srvfb.html.zip What do you think? The only part that might be "controversial" is the loading of the static image to "ping" the server and turn off the loading sign. This is because there's no event that is triggered when the first image of the stream is loaded (I think?). It was originally motivated by the fact that I have this custom html file locally and it tries to contact the server, this way I have some UI feedback even when the server is not connected. For that to work properly one needs to add

w.Header().Set("Access-Control-Allow-Origin", "*")

at line 292.

This is an awesome project, by the way 👍

[Merovius]

I'll take a closer look in a few days. From a first look, it seems to support everything needed, but I haven't actually opened it yet to see :)

For that to work properly one needs to add w.Header().Set("Access-Control-Allow-Origin", "*") at line 292.

To clarify: Do you mean to use a local HTML file, or would we need that if it's served by the webserver as well? Because if the latter, I'd like to understand why :)

[bordaigorl]

For that to work properly one needs to add w.Header().Set("Access-Control-Allow-Origin", "*") at line 292.

To clarify: Do you mean to use a local HTML file, or would we need that if it's served by the webserver as well? Because if the latter, I'd like to understand why :)

It's only needed if you want to use a local HTML file! For me the important bits of this new UI is the pan and zoom (obtained through CSS only!), and the fullscreen support.

[torwag]

I tested the new UI. Looks very nice. I like that the menu points are out of sight. As for zoom, I believe a zoom in with the mouse (scroll wheel, or draw a rectangle) as well as being able to pan the image with the mouse would be nice, but I take that this would take much more effort. Maybe we could change the srvfb behavior that it takes a html-page as an argument and delivers this, if it is not given it uses a hard-coded standard page. That would decouple the core function from the "gui" and makes testing, modification and changes much easier.

edit: If someone finds the icons to small (e.g. for touchscreen devices). You can use the browser zoom-in function. The rM-image remains the same size but the buttons increase.

[torwag]

merge?

[bordaigorl]

@torwag to add pinch&zoom gestures add this to the script bit:

var pinchtimer=0;
window.onwheel = function (e) {
  if (e.ctrlKey) {
    e.preventDefault();
    zoom -= e.deltaY * 0.01;
    clearTimeout(pinchtimer);
    pinchtimer = setTimeout(resize, 10);
  }
};

not amazing but a start?

[Merovius]

@bordaigorl Can you open a PR to serve this as the default page? For now, put the HTML in a constant, like it currently is (though maybe in a separate go-file, or at least at the end of the file, so it's not as much in the way). We can use go generate to bundle separate files in a later commit.

We can discuss it properly in the PR itself, but a couple quick remarks in case you want to incorporate them:

• With my browser (Chrome) this has both horizontal and vertical scrollbars, which is obviously not great :)
• The animations are a bit slow for my taste. I would probably aim for 200ms or so.
• The fourth rotation in the same direction animates into the wrong direction. That's pretty jarring.

Thanks for taking the time :)

[bordaigorl]

I may be able to do something about this next week. I have some local code I could just upload to my fork. Let's see.

[Merovius]

@bordaigorl f you don't have the time (and/or don't want to bother with the extra refactorings I asked for) I can also do it myself. I just asked for a PR to make sure that you are properly attributed and don't feel I'm abusing your work :)

[bordaigorl]

@Merovius hi sorry for being so unresponsive. I really had no time for this. Please don't let me stop this from being incorporated, I am happy if it's useful to others. I have a few improvements in a local version, I'll see if I can put it in a PR at some point but please go ahead!

[Merovius]

No reason to apologize, you didn't spend any less time on it than me :) I'll throw something together.