"Take componant photo", available on any HTML element :)

Feature Request
1

Hello team,

Would it be possible to envisage: that the functionality of “Take componant photo”, is available on any HTML element?

Named: “Take Photo”
And, the ability to customize the folder, currently “previews”

tkp

Thank you,
I wish you a good day

2

I coded a quick plugin in minutes,
but it would be nice to have functionality on your side
ps: in your coding style

$(function () {
    $('body').one('pinegrow-ready', function (e, pinegrow) {

        let id = 'take_a_photo';
        var f = new PgFramework(id, 'Take a photo');
        f.type = 'Take a photo';
        f.allow_single_type = true
        f.info_badge = 'v1.0.0';
        f.description = 'A José Plugin take a photo';
        f.author = 'José';
        f.author_link = 'https://www.jose.com';
        pinegrow.addFramework(f);

        var path = require('path');
        var fs = require('fs');
        var project = pinegrow.getCurrentProject();

        f.on_build_actions_menu = function (page, menus, pgel) {

            var file_path = 'previews/' + (pgel.getAttr('id') || pgel.getAttr('class')) + '.png';

            menus.push({
                type: 'divider'
            })
            menus.push({
                type: 'header',
                label: 'Take a photo'
            })
            menus.push({
                label: "Take a photo of element",
                class: 'action-take-photo-of-element',
                kbd: null,
                manage_change: true,
                action: function () {
                    pinegrow.showPrompt('Enter the photo file path', 'Photo file path', file_path, "Photo file path", null, function (name) {
                        if (name.length) {

                            var filename = path.join(project.getDir(), name);
                            crsaCreateDirs(path.dirname(filename), fs);

                            var $el = pgel.get$DOMElement();
                            if ($el.outerWidth() === 0 && $el.children().length) {
                                $el = $($el.children().get(0));
                            }

                            pinegrow.takePhotoOfElement($el, 400.0, filename, function () {
                                pinegrow.showQuickMessage('Photo of element saved on :<br><b>' + filename + '</b>');
                                pinegrow.cache_breaker++;
                                var gui = require('nw.gui');
                                gui.App.clearCache();
                                $('body').trigger('crsa-update-lib-display');
                            });
                        }
                    });
                }
            });
            menus.push({
                type: 'divider'
            })
        }
    });
});
3 Likes
3

Hi @JoseFR,
Cool little plugin! One of the things I love about Pinegrow is the fact that through a little JavaScript you can make it your own!

As written, your plugin will work when loaded and activated on an open project. If the plugin is activated then a project is closed and a different one opened, or pinegrow is quit and then reopened, it will fail because of when it defines the project variable. If you move it into the prompt function it will get it at the time the photo is taken. I think you will also find that except the quick message, most of the done function in the takePhotoOfElement isn’t needed. I could be wrong.

Very, very cool!
Bob

4

Thanks Bob for your feedback, if you find the idea cool, add the idea in Pinegrow :slight_smile:

I am constantly: I am forced to always “Unload” “Load” when developing a plugin.
Question: have a solution to develop and reload the plugin without “Unload” “Load” ? Same a watcher …

Thank you

5

I typically do a reload of Pinegrow from the logo by right clicking. It is a bit of a pain!

1 Like