Images from server

d.healey

@Christoph-Hart Is it possible to load images into HISE directly from a web server?

orange

@d-healey I think it should be possible. I think you are using woocommerce, you can use Woocommerce REST API for that.
When you make a proper request, it will respond like below. You can grab product images from "images" array.

{
  "id": 794,
  "name": "Premium Quality",
  "slug": "premium-quality-19",
  "permalink": "https://example.com/product/premium-quality-19/",
  "date_created": "2017-03-23T17:01:14",
  "date_created_gmt": "2017-03-23T20:01:14",
  "date_modified": "2017-03-23T17:01:14",
  "date_modified_gmt": "2017-03-23T20:01:14",
  "type": "simple",
  "status": "publish",
  "featured": false,
  "catalog_visibility": "visible",
  "description": "<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>\n",
  "short_description": "<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>\n",
  "sku": "",
  "price": "21.99",
  "regular_price": "21.99",
  "sale_price": "",
  "date_on_sale_from": null,
  "date_on_sale_from_gmt": null,
  "date_on_sale_to": null,
  "date_on_sale_to_gmt": null,
  "price_html": "<span class=\"woocommerce-Price-amount amount\"><span class=\"woocommerce-Price-currencySymbol\">&#36;</span>21.99</span>",
  "on_sale": false,
  "purchasable": true,
  "total_sales": 0,
  "virtual": false,
  "downloadable": false,
  "downloads": [],
  "download_limit": -1,
  "download_expiry": -1,
  "external_url": "",
  "button_text": "",
  "tax_status": "taxable",
  "tax_class": "",
  "manage_stock": false,
  "stock_quantity": null,
  "stock_status": "instock",
  "backorders": "no",
  "backorders_allowed": false,
  "backordered": false,
  "sold_individually": false,
  "weight": "",
  "dimensions": {
    "length": "",
    "width": "",
    "height": ""
  },
  "shipping_required": true,
  "shipping_taxable": true,
  "shipping_class": "",
  "shipping_class_id": 0,
  "reviews_allowed": true,
  "average_rating": "0.00",
  "rating_count": 0,
  "related_ids": [
    53,
    40,
    56,
    479,
    99
  ],
  "upsell_ids": [],
  "cross_sell_ids": [],
  "parent_id": 0,
  "purchase_note": "",
  "categories": [
    {
      "id": 9,
      "name": "Clothing",
      "slug": "clothing"
    },
    {
      "id": 14,
      "name": "T-shirts",
      "slug": "t-shirts"
    }
  ],
  "tags": [],
  "images": [
    {
      "id": 792,
      "date_created": "2017-03-23T14:01:13",
      "date_created_gmt": "2017-03-23T20:01:13",
      "date_modified": "2017-03-23T14:01:13",
      "date_modified_gmt": "2017-03-23T20:01:13",
      "src": "https://example.com/wp-content/uploads/2017/03/T_2_front-4.jpg",
      "name": "",
      "alt": ""
    },
    {
      "id": 793,
      "date_created": "2017-03-23T14:01:14",
      "date_created_gmt": "2017-03-23T20:01:14",
      "date_modified": "2017-03-23T14:01:14",
      "date_modified_gmt": "2017-03-23T20:01:14",
      "src": "https://example.com/wp-content/uploads/2017/03/T_2_back-2.jpg",
      "name": "",
      "alt": ""
    }
  ],
  "attributes": [],
  "default_attributes": [],
  "variations": [],
  "grouped_products": [],
  "menu_order": 0,
  "meta_data": [],
  "_links": {
    "self": [
      {
        "href": "https://example.com/wp-json/wc/v3/products/794"
      }
    ],
    "collection": [
      {
        "href": "https://example.com/wp-json/wc/v3/products"
      }
    ]
  }
}

Casey Kolb

@d-healey We'll probably need to get a cleaner version of the HISE download function first. It's a bit sketch at the moment because the download progress callback is broken, but super excited to use that when it's working. Let me know if you have any luck!

d.healey

The question is less about how to get an image url from a server and more about how do we display that image in HISE?

HiseSnippet 957.3ocsV0saaaCElxwJHVaFXEn6dAekLPpsT+aCqcXtwIdyXKIF0ccCXnnfUhVhMTjBTTwynnuV6AXuM6t8FrcnnrkbqSQqwltRme024vy4iZlTDRxyERjUmmsJifr9b64q3pjwIXJGM8Tj0WZmSjWSjOIiNigWEKEE7HzIqxv44jHjk0Aeu1UqNsQkO+82cBlg4gjZUHzyEzPxOQSopZsyF8iTFaBNh7LZZCuu+nogB9XAST.v5.aeTFN7JbL4Br1sV1HqCOKhpDx4JrhjC9bhHZ07DwRtw+mSyouhQzBAn4PhLpQiSnrnYqK4bDxp8r5FvAlFvssOmFQ2nutQ7EkFbqinYOvp01Pp8VPJ3lfzDAKRmfa.dVMfWaC7tk87PIMSUaQisOydJWQjKvPauIrL9hZE0xdr.7fqFjhuhLQBBahv6g99G69.e+9OpqSWGn4mqbKjL2u0sWhRkk+MCGtb4xA4IDJCGhYLbBNcPnHc3xr6DZx6vhLl.GkO7t9A2aXf+vLZLinF75r3dMR60Xo6zT3vL.x9ZHESTiEoYBNH30yXtmALFgA4DU4aSnLhG.sicWfY4j9uSlmg4D1MmYi4pLaD1jYSVg9f+Vl00TC68LU06khYvPh5ohBEkS7VTvCUTA2KteWm2z0w00MdPjDuzjn043X2eyu7KpRn4Zj9KzHUhW+ZE+.gFmn75+h0.y04s8ez5z6J3WHTjK4d8cdiSGm2539tlVrXm1zcGofwHxcZVuNJ+PA5wKReEQdLzyYEjMNBynauDb3G2RP0DTCGE7obp5xLRkb8ZRvNVSPUm1va+7zSwJrdyoRG3WFQpnZ3XcJ4ZfFxrG0w9TR9UJQFvnrYDAYcjpzZ2psrxSLDE9zGYaFEQ+dMS0sGspIu2R84Gxx15OAwjxyNsze.RKf4VC80D6+KVoPYhrhrK4OU+QFyngWo21QMJjC2tPJGUqJDyXayB4hFExH1nMExisZVH+UIq86wHA7hhnBFVsMYo9VgJCvvyVrRZlGdNUsU26SfA0emLn6bz3iDt2xdFUElra71ZG3EFw9+FuU2G009rEKHgpZv11dxutuW97I.ECcV74XkjByJ1WTjNGtRNj.HgCSP45YhV50OiruVV2YlS3QkB+C7TYLPKaUYLXsQTJNTJdYngVQei2QkZ.LwK2V5XetV1M.UR0.wY6OvGkBWD+xvPcq3N.12cL2cOh4d6QL2eOh4A6QLObOh4q1iX95OXL5+A5IEJQpYMATL6rRNWKqy3XXJqbhD8u.GqTM.

Christoph Hart

Content.makeFrontInterface(600, 500);

Server.setBaseURL("https://forum.hise.audio");

const var f = FileSystem.getFolder(FileSystem.Downloads).getChildFile("Dave.jpg");

// Add an image for the magic trick..
const var Image1 = Content.getComponent("Image1");
Image1.set("fileName", "");

// this has changed: the callback must not have a parameter, but it will access
// the info through the `this.data` object.
function downloadCallback()
{
    if(this.data.finished)
    {
        // Magic trick in 3, 2, 1:
        Image1.set("fileName", f.toString(0));
    }
}

Server.downloadFile("uploads/profile/12-profileimg.jpg", {}, f, downloadCallback);

d.healey

Any way to do this using a panel and drawImage? The number of images I need is flexible so this would be better than defining lots of image widgets some of which won't be used some of the time.

Something else I noticed, your example worked once, then I deleted the image from my downloads folder and reran the example, but it's not downloading the image again.

Update: I can see in the server controller it keeps a list of downloaded files. If I clear that list then it will download again. Does this list persist in the compiled plugin or is it just in HISE?

d.healey

Seems I'm answering all my own questions tonight :p

function downloadCallback()
{
    if(this.data.finished)
    {
        Panel1.loadImage(f.toString(0), "dave");
        Panel1.repaint();
    }
}

Christoph Hart

If I clear that list then it will download again. Does this list persist in the compiled plugin or is it just in HISE?

Nope, that's also the functionality in the plugin (the goal is to prevent downloading huge sample files again).

You can use Server.cleanFinishedDownloads() which does the same as clicking the button in the ServerController.

d.healey

@Christoph-Hart Oh excellent, that works out really well. I'll probably have a button the user can press to check for updates, and if there are new images that need downloading I can clear the cache.

d.healey

Getting a couple of errors:

Unknown function 'setNumAllowedDownloads'

Function / constant not found: Server.cleanFinishedDownloads

Also, what's the best way to download several images at once (or sequentially). I'm grabbing an array of image URLs from a server via GET then in the callback I'm running a loop over the array. In each iteration I'm running Server.downloadFile() but I'm getting execution timeout after a few iterations.

Update: I changed my for loop to a for...in and no more timeout error.

Christoph Hart

@d-healey or use Engine.extendTimeout()

d.healey

I've set the timeout to 10 seconds but I'm still hitting the issue. Here's my call

    Server.callWithGET("wp-json/my/v1/products", {}, function(status, response)
    {            
            for (r in response)
            {
                var file = FileSystem.getFolder(FileSystem.Downloads).getChildFile(r.name + ".jpg");   
                var url = r.imageUrl.replace(Webstore.baseURL, ""); // Time out is on this line
                Server.downloadFile(url, {}, file, downloadCallback);
            }
                
    });

Christoph Hart

I don‘t see the extend timeout call in the snippet ;)

Call it in the loop and you should be fine.

d.healey

@Christoph-Hart Oh ok, I was calling it at the start of on init

d.healey

I'm going to try the exendTimeout thing now, but while I was waiting 7 whole minutes! for your reply I found another solution

var files = {};
var urls = {};
            
for (r in response)
{
    files[r.name] = FileSystem.getFolder(FileSystem.Downloads).getChildFile(r.name + ".jpg");   
    urls[r.name] = r.image.replace(Webstore.baseURL, "");
}
            
for (r in response)
    Server.downloadFile(urls[r.name], {}, files[r.name], downloadCallback);

Nice to see emojis working again :D :p ;)

Update: And I confirm the timeout method works!

d.healey

I have a strange issue (bug maybe) with the this.data.finished clause being accessed more than once for each download.

Content.makeFrontInterface(600, 500);

Console.clear();

reg count = 0;

Server.setBaseURL("https://forum.hise.audio/uploads/profile");

const images = ["1-profileimg.jpg", "12-profileimg.jpg", "67-profileavatar.jpeg", "121-profileimg.jpg", "338-profileavatar.png"];

function downloadCallback()
{
    if (this.data.finished)
    {
        Console.print(count + " : " + this.getDownloadedTarget().toString(1));
        count++;
    }
}

reg f;

for (i = 0; i < images.length; i++)
{
    f = FileSystem.getFolder(FileSystem.Downloads).getChildFile(images[i]);
    Server.downloadFile(images[i], {}, f, downloadCallback);    
}

I thought it might be something to do with the loop or reusing the f variable so I also wrote it out the long way and the result is the same

reg f0 = FileSystem.getFolder(FileSystem.Downloads).getChildFile(images[0]);
Server.downloadFile(images[0], {}, f0, downloadCallback);

var f1 = FileSystem.getFolder(FileSystem.Downloads).getChildFile(images[1]);
Server.downloadFile(images[1], {}, f1, downloadCallback);

var f2 = FileSystem.getFolder(FileSystem.Downloads).getChildFile(images[2]);
Server.downloadFile(images[2], {}, f2, downloadCallback);

var f3 = FileSystem.getFolder(FileSystem.Downloads).getChildFile(images[3]);
Server.downloadFile(images[3], {}, f3, downloadCallback);

var f4 = FileSystem.getFolder(FileSystem.Downloads).getChildFile(images[4]);
Server.downloadFile(images[4], {}, f4, downloadCallback);

d.healey

Any ideas? Is it possible that there is some shared data between the different instances of the downloadCallback so as each download finishes it's triggering the callback for other downloads?

d.healey

This post is deleted!

d.healey

I think I've found a solution/workaround, recursion. Each download complete triggers the next download start.

Content.makeFrontInterface(600, 500);

Console.clear();

Server.setBaseURL("https://forum.hise.audio/uploads/profile");

const images = ["12-profileimg.jpg", "67-profileavatar.jpeg", "121-profileimg.jpg", "338-profileavatar.png"];

function downloadCallback()
{
    if (this.data.finished)
    {        
        if (count < images.length-1)
        {
            count++;
            startNextDownload(images[count]);
        }
    }
}

inline function startNextDownload(fileName)
{
    Console.print(fileName);
    local f = FileSystem.getFolder(FileSystem.Downloads).getChildFile(fileName);
    Server.downloadFile(fileName, {}, f, downloadCallback);
}

reg count = 0;
startNextDownload(images[0]);

Christoph Hart

I fixed a few things about this, however it still is a bit glitchy if you're hammering the queue - I haven't been able to track down the reason, but sometimes the URL request returns a 404 despite the resource being available (I think it has to do with concurrent requests to the same server). This will make the callback fire multiple times for one download - however the success property is false for the requests that didn't work, so it's still executed once with the success flag set to true.

Images from server

14

1.8k

10.3k

89.9k