Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Background image(s) ? #17

Closed
FrPellegrini opened this issue Nov 2, 2020 · 12 comments
Closed

Background image(s) ? #17

FrPellegrini opened this issue Nov 2, 2020 · 12 comments
Labels
enhancement New feature or request

Comments

@FrPellegrini
Copy link

Great and simple tool, bravo!
In order to use it to comment e.g. geographical or electronics maps, it would be good to be able to upload images as backgrounds. Such backgrounds could be selected for every new (full) screen, that is, after two moves, one would have a full new image. Images would be centered, and scaled to fit on their biggest extent without distorsion. Supporting SVG would be a big plus.

@francoisschwarzentruber
Copy link
Contributor

Thank you for your message. I agree with you that it would be nice. Geographical or electronic maps. To upload several backgrounds, I do not know... may then it is very close to update a presentation right in pdf format for instance?

@francoisschwarzentruber francoisschwarzentruber added the enhancement New feature or request label Nov 8, 2020
@FrPellegrini
Copy link
Author

Uploading a presentation (and browsing through it) would be ok, for sure, a bit like BBB already does. So I think you might want to do it in a lighter way.
Indeed, I was thinking in terms of your already existing interface (which is cool !) in which you allow the user to "slide" the blackboard to the left, half-screen by half-screen. If you imagine that the background does not move, then the result would be awful, because you would move the drawings and the background would not move.
This is why I suggested that one could upload some background image attached to a "full screen". Hence, if the user slides the board, the background would slide with it, by "half-screen" as well, so one is able to upload another background for the next "full screen".
Of course, as you said, one might want to upload a pdf, so that each "full-screen" would display a page as a background. But this could be a later improvement. At the time being, I thought you already have almost all the code for uploading background ".png/.jpg" images, as you already do that for magnets.
P.S.: If you want, I can send you a video of my use of your tool for a class, at your IRISA address. And I'm willing to support you as a developer (beer, wine, etc. ;-) ) considering your tool helps me.

@francoisschwarzentruber
Copy link
Contributor

Hello,
You can now add one background as an image (standard format, png, jpg, svg..). Now, the background does not scroll with the board. I agree with you that sliding only a half-screen is ugly...

There are many TODOs left:

  • importing a pdf as a background (in the BBB style)
  • importing several images
  • handle the scrolling

PS: great! 2 packs of Château Margaux please! (I am joking of course)

@francoisschwarzentruber
Copy link
Contributor

Oh, for geography classes, we could even imagine backgrounds made up with a maps directly coming from Open Street Maps!

@FrPellegrini
Copy link
Author

For geography classes, it is irrelevant to use OSM. Geography teachers prefer to use their own drawings, and there already exist plenty of them, e.g. :
http://histgeo.ac-aix-marseille.fr/webphp/carte.php?num_car=1056

@FrPellegrini
Copy link
Author

Thanks a lot for your quick feedback ! Wow ! B-)
I shared the tool with a real geography teacher in high school, who was really frustrated not to be able to teach with maps during the previous lockdown, and she LOVES your tool. Prepare for success in case of another high school lockdown ! ;-)
I have spotted a few bugs, for which I will open several different issues, so you can process them separately. I will leave below those directly connected with the background feature :

  • resolution scaling : the size of the imported background does not scale with that of the user's screen. Ideally, it means that the image would be scaled so as to fit exactly to the importer's screen. Else, the importer might have to re-scale her image beforehand (e.g. with Gimp) to create a useable drawing ;

  • scaling issues must be addressed when the screen is shared. Imagine the case of a teacher sharing a board with pupils. Pupils may have computers with screens with different resolutions. The teacter's drawings must scale to the background for all the different pupil's computer screens.

@FrPellegrini
Copy link
Author

  • pen color : by default, on a blackboard, you propose the white pen, while on a whiteboard, you propose a black pen. With a background set, one might want to have both black and white pens at the same time.

@FrPellegrini
Copy link
Author

I ran into a bug when loading a background image. In order for the relevant part of the image to be visible on the board, I had to make it bigger (adding space on its bottom) so that the relevant part is fully visible.
Is this geometry issue related to the existence of spare space for the toolbar above ? Dunno...

@francoisschwarzentruber
Copy link
Contributor

francoisschwarzentruber commented Nov 9, 2020

I see. It is because tableaunoir is based on Option S (below). Let us discuss some options.

Option S. Resize to screen.

👍 the board has the same scale even if you resize the window all the time. In particular, if you divide the screen (d), it will divide in the middle of the screen.
👎 If you are not fullscreen, you have a partial view of the board. That was your issue.

Option W|W-T. Resize to the visible part (window minus the toolbar or window if toolbar is invisible)

👍 You always see everything
👎 If you do "divide the screen", it is unclear whether it should divide in the middle of the screen, or the middle of the window.
👎 If you toggle the toolbar visibility, the "middle vertical line" for dividing the screen will not have the same abscisse. That was annoying for my use

Option W-T. Resize to the window minus the space for the toolbar, whether or not the toolbar is present.

👍 You always see everything
👎 Removing the toolbar does not save space so that there is always the zoom

Option W. Resize to the window, no care about the toolbar

👎 If the toolbar is present, it will hide a part of the blackboard

Option ANTIKISS. Implement zoom, scrollbars etc. :)

👎 👎 Complicated.

@FrPellegrini
Copy link
Author

FrPellegrini commented Nov 9, 2020

To me, the best option in terms of ease of use is option W. Here is why :

Because the tool's paradigm is KISS, the toolbar should be displayed as little as possible. I must say that only after one single day of use, I start to use keyboard shortcuts to ask for color change, etc. : "c" to change pen color, "ctrl-Z" to discard what I have drawn, etc. Hence, it is good that the toolbar is always displayed at first, to welcome beginners, but in the tutorial you can insist on the fact that is wastes some space and so people should get rid of it and discard it ("h") as soon as they can. It quickly becomes natural.

Option W-T wastes a lot of space. Depending on screen resolution (e.g. for my old laptop), the toolbar may sometimes span on two lines. Hence, it is a lot of wasted space, if the background and drawing space would not be usable to display useful pedagogical stuff that really matters.

Option S does not allow to adapt to the diversity of usage of the tool. As you have seen, in my case, the tool may be used within some tab of a browser, in order to switch quickly between tabs that display different tools : pedagogical simulator, pdf viewer, etc. I did not think about going fullscreen with "tableaunoir", sorry. I might do it in the meantime. Yet, this adds some complexity for the user.

Consequently, the best option in my opinion is option W.

As a refinement of it at a later stage ("W+"), window rescaling should be handled in terms of drawing scaling and magnet position scaling. Hence some teacher might (temporarily) reduce the size of the map window to display e.g. in another part of the screen a short video to illustrate some aspect of the course, etc., still being able to draw on the reduced space. If there is some rescaling, the geometry of the drawing should also be scaled to match that of the background. But for now I can perfectly live with the vanilla option W. ;-)

@francoisschwarzentruber
Copy link
Contributor

Thank you for sharing your thoughts about the layout! I implemented a mix between OptionW and optionW-T. From your message:

  1. Option W is great. Actually, the fact that the toolbar hides a small ribbon is not so annoying. By switching the visibility of the toolbar, it preserves the scale of the board. When the toolbar is here, the top of your background image will then be covered by the toolbar.

  2. Option W is bad when the toolbar takes too much space (like smartphones), because a large part of the board cannot be seen. Thus, in that case, I opted for W-T.

The implemented rule is:
Option W when the height of toolbar < 10% of the window height.
Option W-T otherwise.

PS: you convinced me that OptionS is not suitable.
PS: I do not understand W+. The background and the board both are rescaled at the same time.
PS: Now, that the toolbar takes too much space is...another issue I think :).

@FrPellegrini
Copy link
Author

Thanks a lot for your reactivity. Regarding your comments :
P.S.2: "W+" was in my opinion a version that does rescaling. But in fact I figured out you already do it. Indeed, when making the toolbar disappear, the image and drawings are automagically rescaled. Great!
P.S.3: No problem. At this point, It is not a priority for me, if by hiding the toolbar one can get the usage of the full screen (which is the case). For me, the chat might be more space-consuming, if on some low-resolution computer it covers the screen and the reader cannot hide it. Maybe it can be good that users can hide and show the chat space at will, with some key, like for the toolbar. Hence even if the teacher does not remove messages, users can still see all the screen if they want.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

2 participants