Comments (15)
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.
from srvfb.
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
from srvfb.
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 :)
from srvfb.
Please consider adding a "stop streaming"/"restart streaming" button. That would allow people to finish a sketch or phrase before putting it "online".
from srvfb.
@torwag That's a good idea, thanks :)
from srvfb.
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 π
from srvfb.
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 :)
from srvfb.
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.
from srvfb.
merge?
from srvfb.
@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?
from srvfb.
@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 :)
from srvfb.
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.
from srvfb.
@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 :)
from srvfb.
@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!
from srvfb.
No reason to apologize, you didn't spend any less time on it than me :) I'll throw something together.
from srvfb.
Related Issues (20)
- General feedback HOT 2
- Marker pen doesn't render in correct colors HOT 7
- Feedback HOT 2
- Increasing framerate HOT 10
- Unable to execute HOT 1
- Nice idea, and I believe remarkable should update their own tools internally as well HOT 1
- RGB streaming HOT 5
- Add the `remarkable-tablet` topic to the repo HOT 1
- the other way? HOT 1
- Shut down server when idle
- Missing license HOT 3
- adapting to reMarkable 2 HOT 1
- Some documentation on the PNG implementation HOT 1
- Autoupdates HOT 1
- Make framebuffer-handling more robust
- Google cast support HOT 3
- Authentication HOT 1
- Don't send images if they didn't update
- Download PNG HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from srvfb.