Images from server



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



  • @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"
          }
        ]
      }
    }
    


  • @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!



  • 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.
    


  • 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);
    


  • 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?



  • Seems I'm answering all my own questions tonight πŸ˜›

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


  • 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.



  • @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.



  • 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.



  • @d-healey or use Engine.extendTimeout()



  • 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);
                }
                    
        });
    


  • I donβ€˜t see the extend timeout call in the snippet πŸ˜‰

    Call it in the loop and you should be fine.



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



  • 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 πŸ˜„ πŸ˜› πŸ˜‰

    Update: And I confirm the timeout method works! πŸ•

    5706ea93-3393-47ae-a1b5-6e8299abec72-image.png



  • 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);
    


  • 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?



  • This post is deleted!


  • 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]);
    


  • 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.


Log in to reply
 

15
Online

1.2k
Users

3.8k
Topics

33.7k
Posts