Save img to context

[greyser83]

Bart, sorry to bother. Is there any solution to grab heatmap image? And somehow save it to context

[bartbutenaers]

Hi @greyser83,

That is again very easy to implement. When I add an output to this node, and I add following code to my .js file:

$scope.$watch('msg', function(msg) {
   ...
   // Get a reference to the heatmap.js canvas element
   var heatmapCanvas = parentDiv.getElementsByClassName("heatmap-canvas")[0];

   // Get the canvas as a jpeg image inside a data url (data:image/jpeg;base64,/9j/4AAQSkZJRgABAQ...9oADAMBAAIRAxEAPwD/AD/6AP/Z")
   var dataUrl = heatmapCanvas.toDataURL('image/jpeg', 1.0); // 1.0 = full quality

   // Get the base64 image from the data url
   var base64Image = dataUrl.split(';base64,')[1];

   $scope.send({payload: base64Image});
});

Then a jpeg will be send to the output, for every input message that arrives:

In the above example the backend triggers the capture: But it is not clear to me how this would be used. Because the image is generated at the frontend side (i.e. in the dashboard running in the browser) and then send as output message to the backend (where your flow is running). As a result, when the heatmap is currently visible in N dashboards, then N output messages will be send. So you end up with N duplicate messages (each containing the same image). And N can be 0: when no dashboards are open currently, then 0 messages would be send.

To me this only makes sense when frontend triggers the capture. For example you add a button "create heatmap image" on your dashboard. As soon as a user triggers that button, the button will send a message to the backend flow, where it is injected into the heatmap node (e.g. with topic "take_snapshot"). The heatmap node will be send by the heatmap node to the frontend to take a snapshot.

So would be nice to know your use case, before I add this code on my master branch.

[greyser83]

Hi, Bart. Thank you so much for your reply, very impressive.My task is to send a heatmap image to telegram bot. 23:45, 2 марта 2021 г., bartbutenaers notifications@github.com: Hi @greyser83, That is again very easy to implement. When I add an output to this node, and I add following code to my .js file: $scope.$watch('msg', function(msg) { ... // Get a reference to the heatmap.js canvas element var heatmapCanvas = parentDiv.getElementsByClassName("heatmap-canvas")[0];

// Get the canvas as a jpeg image inside a data url (data:image/jpeg;base64,/9j/4AAQSkZJRgABAQ...9oADAMBAAIRAxEAPwD/AD/6AP/Z") var dataUrl = heatmapCanvas.toDataURL('image/jpeg', 1.0); // 1.0 = full quality

// Get the base64 image from the data url var base64Image = dataUrl.split(';base64,')[1];

$scope.send({payload: base64Image}); });

Then a jpeg will be send to the output, for every input message that arrives:

In the above example the backend triggers the capture: But it is not clear to me how this would be used. Because the image is generated at the frontend side (i.e. in the dashboard running in the browser) and then send as output message to the backend (where your flow is running). As a result, when the heatmap is currently visible in N dashboards, then N output messages will be send. So you end up with N duplicate messages (each containing the same image). And N can be 0: when no dashboards are open currently, then 0 messages would be send. To me this only makes sense when frontend triggers the capture. For example you add a button "create heatmap image" on your dashboard. As soon as a user triggers that button, the button will send a message to the backend flow, where it is injected into the heatmap node (e.g. with topic "take_snapshot"). The heatmap node will be send by the heatmap node to the frontend to take a snapshot. So would be nice to know your use case, before I add this code on my master branch.

—You are receiving this because you were mentioned.Reply to this email directly, view it on GitHub, or unsubscribe. -- Отправлено из мобильного приложения Яндекс.Почты

[bartbutenaers]

My task is to send a heatmap image to telegram bot

Hi @greyser83 , That is not really much information for me to understand what you are doing ... How do you trigger the image generation: via a user action (e.g. button click) in the dashboard, or in background automatically by some other nodes in your flow that trigger an input message? Because in the latter case my solution won't work at all, since you can have N dashboards open (where N can be 0): see my explanation above.

[greyser83]

Hi @bartbutenaers

How do you trigger the image generation: via a user action (e.g. button click) in the dashboard, or in background automatically by some other nodes in your flow that trigger an input message? Because in the latter case my solution won't work at all, since you can have N dashboards open (where N can be 0): see my explanation above.

Image generation must be triggerd by bot (user presses a button), which sends a message to NR. Image goes back to bot as a response

[bartbutenaers]

Hi @greyser83,

I have implemented your request on Github. There is also a new section on the readme page which explains it.

Would be nice if you could test it and give feedback! Note that I need a surgery this friday, and I won't be able to do developments for a few months... So not sure whether we will get this published on NPM tomorrow. And otherwise you will need to use the Github version for some time ...

Bart

[greyser83]

Hi, Bart! I tried to install newest version and it is installed as I see in logs. But I cant see new node in palette

But anyway its not urgent to me! Many thanks!

I wish you a quick, easy recovery!

[bartbutenaers]

The command looks good, so not clear to me why it doesn't work. You can have a look at your browser console log (via the browser development tools), to see if there is an error. Or in your Node-RED log on linux. And always refresh your browser window (where the flow editor is running). My time is up. I will bookmark this issue, and come back to you in the near future...

[bartbutenaers]

Hi @greyser83, Long time ago ... Did you see any errors in your browser console log? I have installed it on another system and it works fine. Bart

[greyser83]

Hi, Bart!I successfully installed and it works precisely since when. Really appreciate your stuff and pleased to see you again! Thanks!22.05.2021, 01:17, "bartbutenaers" @.***>: Hi @greyser83, Long time ago ... Did you see any errors in your browser console log? I have installed it on another system and it works fine. Bart

—You are receiving this because you were mentioned.Reply to this email directly, view it on GitHub, or unsubscribe. -- С уважением,Сергей Костромин  

[bartbutenaers]

Hi @greyser83, This feature has been published on npm now, in version 2.2.0. Thanks for testing!! Bart