Grab image - resize - iframe

Hi All,

Ive been trying to grab a weather radar image from a website which is

then put it in an iframe.. I can get this to happen but its too big and i get this

image

I tried using the image tool palette but I keep getting an error

"Error: Could not find MIME for Buffer "

Any Help appreciated

can you scale it using the standard html image height and width tags ?

Share your flow please (use node-red export CTRL+E) then paste the flow in a reply (formatted correctly to prevent corruption see this post for how to)

1 Like

Hi Steve, Thanks for replying

[{"id":"3105255c.1f84ea","type":"ui_iframe","z":"6ef6c2a5.3bcdbc","group":"99274104.d1d6","name":"Radar","order":1,"width":5,"height":4,"url":"","origin":"*","x":770,"y":340,"wires":[[]],"info":"oneditprepare: function() {\r\n            $('.editor-tray-content').css({\"width\" : $( window ).width() +  \"px\"});\r\n        }"},{"id":"1b28ad5f.0e4a33","type":"inject","z":"6ef6c2a5.3bcdbc","name":"","props":[{"p":"payload"}],"repeat":"600","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"http://www.bom.gov.au/radar/IDR703.gif","payloadType":"str","x":150,"y":340,"wires":[["43f5f344.58142c"]]},{"id":"2baf4f76.2db98","type":"function","z":"6ef6c2a5.3bcdbc","name":"","func":"msg.url = msg.payload;\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":560,"y":340,"wires":[["3105255c.1f84ea"]]},{"id":"43f5f344.58142c","type":"jimp-image","z":"6ef6c2a5.3bcdbc","name":"","data":"payload","dataType":"msg","ret":"img","parameter1":"220","parameter1Type":"num","parameter2":"220","parameter2Type":"num","parameter3":"","parameter3Type":"msg","parameter4":"","parameter4Type":"msg","parameter5":"","parameter5Type":"msg","parameter6":"","parameter6Type":"msg","parameter7":"","parameter7Type":"msg","parameter8":"","parameter8Type":"msg","sendProperty":"payload","sendPropertyType":"msg","parameterCount":3,"jimpFunction":"resize","selectedJimpFunction":{"name":"resize","fn":"resize","description":"resize the image. One of the w or h parameters can be set to automatic (\"Jimp.AUTO\" or -1).","parameters":[{"name":"w","type":"num|auto","required":true,"hint":"the width to resize the image to (or \"Jimp.AUTO\" or -1)"},{"name":"h","type":"num|auto","required":true,"hint":"the height to resize the image to (or \"Jimp.AUTO\" or -1)"},{"name":"mode","type":"resizeMode","required":false,"hint":"a scaling method (e.g. Jimp.RESIZE_BEZIER)"}]},"x":350,"y":340,"wires":[["2baf4f76.2db98"]]},{"id":"99274104.d1d6","type":"ui_group","name":"Weather","tab":"12e195b2.3de9fa","order":3,"disp":false,"width":"5","collapse":false},{"id":"12e195b2.3de9fa","type":"ui_tab","name":"Cameras","icon":"mi-videogame_asset","order":1,"disabled":false,"hidden":false}]

Ah right - yes you can't use an iframe directly as they don't scale the contents directly. Better to just use a ui_template and build your own img tag where you can control the size.

[{"id":"44ef1682.4b53e8","type":"function","z":"cca8d493.5a61e8","name":"","func":"msg.payload = '<img border=\"0\" height=\"300\" width=\"480\" src=\"'+msg.payload+'\" alt=\"Radar images\">';\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":300,"y":760,"wires":[["c99d37ca.90db78"]]},{"id":"c99d37ca.90db78","type":"ui_template","z":"cca8d493.5a61e8","group":"99274104.d1d6","name":"","order":3,"width":"5","height":"4","format":"<div ng-bind-html=\"msg.payload\"></div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":510,"y":760,"wires":[[]]},{"id":"80e5e88.32ed218","type":"inject","z":"cca8d493.5a61e8","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"http://www.bom.gov.au/radar/IDR703.gif","payloadType":"str","x":110,"y":760,"wires":[["44ef1682.4b53e8"]]},{"id":"99274104.d1d6","type":"ui_group","name":"Weather","tab":"12e195b2.3de9fa","order":3,"disp":false,"width":"5","collapse":false},{"id":"12e195b2.3de9fa","type":"ui_tab","name":"Cameras","icon":"mi-videogame_asset","order":1,"disabled":false,"hidden":false}]
2 Likes

Awesome that did the trick.. thank you so much!