Could you use the "browser" element in Dashboard and change the URL of that browser programmatically to show your image?
ogscript.getComponentsById('browserTest')[0].setUrl('new_image_url');
@josephadams I wasnt clear enough in my previous post, as I ment that I had tested it in a browser element in DashBoard, and that worked :)
But it's not a bad idea, and it "works".
I do however run into two challenges with this sollution. [LIST=1]
- While it works, it's not possible (as I know) to scale the content in a browser tab? Meaning that when the picture is 400x400 pixels, in order to see the entire picture I would have to have a 416x416 (including the white border in a "browser" element) to view the entire content without vertical and horizontal scrollbars. A canvas a background can be positioned center and scale to fit. Wich would be better when you're running out of space in your DashBoard.
- For some reason it seems the browser element is way slower at loading images and updating than what a simple background URL is when changing it.
Now I havent been able to test this towards URLs from Instagram yet, as these arent working on updating backgrounds yet, but yeah, testing other images that seems to be the case.
The canvas bit also seems to be cached when an image has first been loaded. This does not seem to be the case with a browser element (and I wouldnt expect it to either).
Example panel here - just pick an entry in the table, and the images will update in the two squares. Left one is browser element, right one in canvas with a background:
<abs contexttype="opengear" dblinqport="2222" gridsize="20" id="_top">
<meta>
<params>
<param access="1" maxlength="0" name="url" oid="url" type="STRING" value="" widget="text"/>
<param access="1" maxlength="0" name="insta_user" oid="0x2" precision="0" type="STRING_ARRAY" widget="default">
<value>Img 1</value>
<value>Img 2</value>
<value>Img 3</value>
<value>Img 4</value>
<value>Img 5</value>
</param>
<param access="1" maxlength="0" name="insta_text" oid="0x3" precision="0" type="STRING_ARRAY" widget="default">
<value>0</value>
</param>
<param access="1" maxlength="0" name="insta_id" oid="0x4" precision="0" type="STRING_ARRAY" widget="default">
<value>0</value>
</param>
<param access="1" maxlength="0" name="insta_url" oid="0x5" precision="0" type="STRING_ARRAY" widget="default">
<value>https://i.imgur.com/v924YOF.jpg</value>
<value>https://i.imgur.com/mwoHidb.png</value>
<value>https://i.imgur.com/wmQWKtF.png</value>
<value>https://i.imgur.com/9nWJZdy.jpg</value>
<value>https://i.imgur.com/EJsdiET.jpg</value>
</param>
<param access="1" constrainttype="INT_CHOICE" name="insta_table" oid="0x6" precision="0" type="INT16" value="0" widget="default">
<constraint key="2">User</constraint>
<constraint key="5">URL</constraint>
</param>
<param access="1" maxlength="0" name="User" oid="User" type="STRING" value="Img 1" widget="text"/>
<param access="1" maxlength="0" name="Text" oid="Text" type="STRING" value="0" widget="text"/>
<param access="1" maxlength="0" name="img_URL" oid="img_URL" type="STRING" value="https://i.imgur.com/v924YOF.jpg" widget="text"/>
<param access="1" maxlength="0" name="insta_url150x150" oid="0x7" precision="0" type="STRING_ARRAY" widget="default">
<value>0</value>
</param>
</params>
</meta>
<button buttontype="push" height="100" left="20" name="Call JSON" top="80" width="500">
<task tasktype="ogscript">function handleData(resultData)
{
if (resultData == null)
{
ogscript.debug("NO DATA");
}
else
{
ogscript.debug('SUCCESS!');
//ogscript.debug(resultData);
var obj = JSON.parse(resultData);
//ogscript.debug(obj);
for (i in obj.data) {
ogscript.debug('ID: ' + obj.data[i].id);
ogscript.debug('User: ' + obj.data[i].user.username);
ogscript.debug('Img URL: ' + obj.data[i].images.standard_resolution.url);
ogscript.debug('Img 150x150: ' + obj.data[i].images.thumbnail.url);
ogscript.debug('Caption: ' + obj.data[i].caption.text);
ogscript.debug('Likes: ' + obj.data[i].likes.count);
params.setValue(0x4, i, obj.data[i].id);
params.setValue(0x2, i, obj.data[i].user.username);
params.setValue(0x3, i, obj.data[i].caption.text);
params.setValue(0x5, i, obj.data[i].images.standard_resolution.url);
params.setValue(0x7, i, obj.data[i].images.thumbnail.url);
}
}
}
var url = params.getValue('url', 0);
ogscript.asyncPost(url, null, handleData);
ogscript.debug('Trying to get JSON response..');</task>
</button>
<param expand="true" height="40" left="20" oid="url" top="20" width="500"/>
<param expand="true" height="300" left="20" oid="0x6" showlabel="false" top="200" widget="table" width="1220">
<config key="w.reorder">true</config>
<config key="w.cellediting">false</config>
<config key="w.rowheight">50</config>
<task tasktype="ogscript">var i = params.getValue(0x6, 0);
params.setValue('User', 0, params.getValue(0x2, i));
params.setValue('Text', 0, params.getValue(0x3, i));
params.setValue('img_URL', 0, params.getValue(0x5, i));
var img = params.getValue(0x5, i);
var img2 = params.getValue(0x5, i);
ogscript.getComponentsById('insta_preview')[0].setUrl(img);
ogscript.setStyle('canvas_img', 'bg-u:' + img2);</task>
</param>
<param expand="true" height="40" left="20" oid="User" top="520" width="480"/>
<param expand="true" height="40" left="20" oid="Text" top="580" width="480"/>
<param expand="true" height="40" left="20" oid="img_URL" top="640" width="480"/>
<browser height="280" id="insta_preview" left="520" name="insta_preview" style="txt-align:center;" top="520" url="https://discussions.rossvideo.com/images/quarto/asphalt_light/misc/vbulletin5_logo.png" width="300"/>
<abs height="280" id="canvas_img" left="840" name="canvas_img" style="bg-align:center;bg#FFFFFF;bg-fill:fit;" top="520" width="300"/>
</abs>#DashBoard