owncloud
Support for Handwritten Notes
I often use Xournal for handwritten notes but the tool is a bit outdated (last version from 2014). I would like to replace Xournal by owncloud notes because it has synchronization, web interface and an Android App for viewing and editing notes is approaching.
As technical solution I'm thinking about using SVG as handwritten notes, because
- SVG is supported by modern web browsers
- SVG is text based
- there are Javascript libraries which allow drawing SVG in browsers (like this one)
- Markdown allows to embed SVGs as images
I'm also willing to support the implementation process and I want to discuss the feature with the community.
I like this idea! But for now other issues take precedence as this is an advanced feature.
But pull-requests are welcome, of course.
Interested in working on this but I have few questions.
Where would the user select that he wants to use the drawing functionality? We don't have any sort of toolbar or anything to put those settings in.
Also what kind of license restrictions are there? To make it work with smart phones and such I would probably have to use https://github.com/furf/jquery-ui-touch-punch it says
This code is dual licensed under the MIT or GPL Version 2 licenses and is therefore free to use, modify and/or distribute, but if you include Touch Punch in other software packages or plugins, please include an attribution to the original software and a link to this Touch Punch website.
Is that fine to use with this project?
@Henni @schrieveslaach
Yes, would be fine. I did mention those JS libraries to show that it possible to handle SVG with web technologies.
I'm not familiar with your code base and architecture but if you give me the right pointers and some advices I can start to think about an implementation and test some stuff in a fork. ;)
Also how would I save the handwritten notes? If I just make svg image it would cover the whole note section with picture so you couldn't have text on top of it. I could just put the json into the txt file but that would probably mess up some other implentations right?
How about if I make two files per note if the user uses the feature. One with the text and one json file for the drawings? This way it won't affect any other uses for the notes since you can just ignore the drawings if you don't use it.
any thoughts? @schrieveslaach @Henni
what about converting handwritten notes to text? instead of saving the note as an image, the text could be analyzed and converted into text?
@stefan-niedermann I could already do that by putting the json for the handwritten picture into the txt file but then if you check the txt with anything else than the notes app it would be full of random gibberish which probably isn't good.
Current progress
Still lot to do but if you wanna test it out it's at my fork
@ErikPel very cool. :+1: I will give it a try. Currently I'm kind of busy, but I will have a look at the changes you made to get familiar with the code base.
@schrieveslaach
glad you like it. Let me know if you have any questions. I'll get back working on it too in these upcoming days. Just been working on the owncloud mail app for couple of days now to get a break since I worked on this for a while and needed change of scenery.
I think the current to do is:
- [ ] Add eraser button. Thinking of using white brush to draw on top of the current lines. Don't see any downside doing it. What about you?
- [ ] Change of brush size buttons. (These are already features in the library I'm using http://keith-wood.name/signature.html so I just have to add buttons for them).
- [ ] Make it possible to stop using the handwriting without reloading the page. (just have to make button to disable it or just make it so if you click the handwriting button second time it stops using it)
- [ ] Fix the toolbar of handwriting settings so it doesn't go on top of the title
- [ ] Get proper icons since I'm curently using placeholder one for the handwriting feature. Been thinking about using this since it has the ones I need and it's MIT licensed https://github.com/iconic/open-iconic
- [ ] Also there are probably lot of code style problems.
Any thoughts or suggestions?
It would be great if we could store the handwritten note as an image in the notes folder and integrate it in the note via markdown syntax.
@Henni But wouldn't that make it impossible to edit and load it to look like the way it was when I draw it.
If for example I do something like this
Then load it from image and with markdown it would look like this, no?
Option A: load from svg and use markdown
When currently it would be loaded like it was drawn like this
Option B (currently used one): load from json and draw it into the canvas
Or would we store the image as both json and svg and then just hide the markdown tag for the webclient and show it drawn from json but still providing the markdown for 3rd party clients which would see the option A?
I'm not sure. The reason I would like it in an image format is as you said, that 3rd-party clients won't work with JSON.
If we implement option B, 3rd-party clients will render the notes differently (probably like option A). Maybe we should stay consistent and implement option A even though we loose a bit of functionality.
I disagree. Think it's important to show it the way it was written in case you want to do some text highlighting or want to make headers for the drawings.
I don't see reason why we can't have both by storing it in both json and svg. Then add the markdown with the image to the markdown but when using the web client we just hide that and use the json instead.
Maybe put them into folder so it doesn't clutter the note file listing?
What I wanted to say in my last comment was, that we shouldn't allow the user to draw over text, because not all clients are able to render this.
If I understand you correctly you favor to allow the user to draw across text and display this as such in the browser but show it like option B in other clients. Did I understand you correctly?
Yes you did. Just feels like useless feature if you can't use hamdwriting outside small box you add into the note. Just thought it would be good compromise to give the full handwriting to browser users but still allow 3rd party clients to see the notes. Maybe we can add option to allow writing on top of text with disclaimer that it won't work on some clients?
What do @owncloud/designers think?
- Should we allow users to draw over text, even though this won't be supported by 3rd-party clients or
- should we restrict handwritten notes to their own area which will be rendered as a self-contained image
should we restrict handwritten notes to their own area which will be rendered as a self-contained image
As developer of an android client i would prefer this option. This would keep it simple and stupid - as it should be (IMHO).
@ErikPel, I'm very interested in your work and I want to support you with the implementation. I think UI (JS + HTML) would be could place to start. I'm going on a vacation in the next. When I'm back, we should discuss and agree who will implement which feature. What do you think? The list of mentioned features is a good starting point for that. :sunglasses:
Just FYI since I only discovered this issue now. There’s a Sketch app by @ChristophWurst which basically does the same thing.
It seems an interesting idea to combine this. However looking further, we need to make sure it really works well, and that includes the web interface, the mobile view, and all existing apps. That makes it a bit difficult, and please do not underestimate this.
So for that reason I suggest to first work on the Sketch app by @ChristophWurst to see if there’s a merit in having this functionality. Then when it’s more mature we can think more about how to integrate.
