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

Add support to display images in nodes #42

Closed
wants to merge 4 commits into from

Conversation

godiard
Copy link
Contributor

@godiard godiard commented Aug 22, 2016

Mind maps are useful tools in education. One feature usually requested when are used by kids is the support of images in nodes.

This pull request add support to add nodes where a image is displayed, without text. Load/save and screenshots are implemented.

The image can be noted by a url or the data url. In the case od a image noted by a url pointing to a local resource, like the example implemented, a screenshot is not possible, because the canvas is tainted. When the image is selected by the user (or stored as data in the json file) there are no problems.

ant.png image is from http://www.art4apps.org/
and is released under a Creative Commons Attribution-NonCommercial-ShareAlike license.
(CC BY-NC-SA)
A image defined by the url to a local file taint the canvas
and the screenshot funtionality don't work.
This commit add to 2_features.html the logic to add a image node,
and add support to process the dataurl in the canves.
The image is scaled to reduce the data size.
Freemind format support is not added, because image nodes are not supported
apparently by FreeMind.
From http://freemind.sourceforge.net/wiki/index.php/Main_Page#Features

"Weak spots include:
The support of pictures in nodes is in preliminary stage. When you want to carry
a map around with you, you have to take care that you take the image files with you."
this._watermark();
var url = jsm.canvas_elem.toDataURL();
jsm.clean();
return url;
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this return may be wrong.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

True. Probably the only way to return this value is using a callback function. What you think?
Also, I didn't found a use of shootAsDataURL()

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

let me think about it, there must be a way out

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What you think about:

        shootAsDataURL:function(callback){
            this.init();
            this._watermark();
            var jsm = this;
            this._draw(function() {
                var url = jsm.canvas_elem.toDataURL();
                jsm.clean();
                callback(url);
            });
        },

@hizzgdev
Copy link
Owner

great idea and wonderful work.

i will merge it after full testing. thank you very much.

@godiard
Copy link
Contributor Author

godiard commented Aug 23, 2016

Thanks. I wait for your comments and will do the improvements needed.

Different question: do ou plan merge #39 ?

@hizzgdev
Copy link
Owner

yes, i will merge both #39 and #42

@godiard
Copy link
Contributor Author

godiard commented Aug 23, 2016

Tell me when you finish the review, and I will send a new pr to replace #42 with the fixes

@hizzgdev
Copy link
Owner

#39 merged

@hizzgdev hizzgdev mentioned this pull request Aug 23, 2016
var img = this;
if(c.getContext) {
var ctx = c.getContext('2d');
ctx.drawImage(img, 2, 2, imageSize, imageSize);
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i don't think fixed size is good, but i have no idea about how to improve it :(

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The user can change the default image in the options, or we can add logic to enlarge the image later. In the last case, we will need preserve the original image if we don't want get pixelated images. In my use case, I am focused in simple use for kids.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

s/default image/default image size/

@godiard godiard closed this Aug 23, 2016
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants