Facility Control

 View Only
Expand all | Collapse all

Display image on button from base64 data

  • 1.  Display image on button from base64 data

    Posted 01-21-2025 00:11

    I am using an API that returns image data that is base64 encoded, and I'd like to display that image on a button. What options do I have to do this other than coming up with a way to save the data to a physical file and then referencing that file path?



    ------------------------------
    Joseph Adams
    ------------------------------


  • 2.  RE: Display image on button from base64 data

    Posted 01-21-2025 10:30
      |   view attached

    Hi,
    I am attaching an example showing how buttons can be styled including background image. I don't see right now an example on how to use base64 data as styling image. It could be possible using external object which can render base64 images. If the attached example does not work for you, perhaps you can explore the external object. I will see if could find example.



    ------------------------------
    Kashif Mushtaq
    Senior Software Developer
    Ross Video
    Ottawa Canada
    ------------------------------

    Attachment(s)

    zip
    Style.zip   4 KB 1 version


  • 3.  RE: Display image on button from base64 data

    Posted 01-21-2025 15:45

    Thank you! I didn't see anything that would work. I even tried making the content HTML with an IMG tag with "data:image/png;base64" but it must not be supported.



    ------------------------------
    Joseph Adams
    Fellowship Church Greenville
    ------------------------------



  • 4.  RE: Display image on button from base64 data

    Posted 01-22-2025 09:37

    Hi Joseph

    DashBoad does not natively or automatically process base64 to binary for image data (except inside of external objects but those can't be easily updated if your apis are returning new/different images).  Your easiest workaround would be to take the base64 data and use ogScript to convert it to a byte array, save the byte array as a file on disk, and set the background to that file.

    <abs contexttype="opengear" keepalive="true" style="bg#panelbg;" virtualheight="200" virtualwidth="1360">
       <meta>
          <api>function base64ToByteArray(base64String) {
        // Define the base64 characters
        var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
    
        // Initialize variables
        var i = 0, len = base64String.length, bin = '', byteArray;
    
        // Convert base64 string to binary string
        while (i &lt; len) {
            var c1 = chars.indexOf(base64String.charAt(i++));
            var c2 = chars.indexOf(base64String.charAt(i++));
            var c3 = chars.indexOf(base64String.charAt(i++));
            var c4 = chars.indexOf(base64String.charAt(i++));
    
            var triple = (c1 &lt;&lt; 18) | (c2 &lt;&lt; 12) | (c3 &lt;&lt; 6) | c4;
            bin += String.fromCharCode((triple &gt;&gt; 16) &amp; 0xFF);
            if (c3 !== 64) bin += String.fromCharCode((triple &gt;&gt; 8) &amp; 0xFF);
            if (c4 !== 64) bin += String.fromCharCode(triple &amp; 0xFF);
        }
    
        // Create the byte array using ogscript function
        byteArray = ogscript.createByteArray(bin.length);
    
        // Fill the byte array
        for (var j = 0; j &lt; bin.length; j++) {
            var byteValue = bin.charCodeAt(j);
            // Convert values greater than 127 to signed byte equivalents
            byteArray[j] = (byteValue &lt;= 127 ? byteValue : byteValue - 256);
        }
    
        return byteArray;
    }
    </api>
       </meta>
       <param expand="true" height="11" left="116" oid="team0.info.name" showlabel="false" top="56" width="248"/>
       <button buttontype="push" height="15" left="35" name="Encode" top="39" width="238">
          <task tasktype="ogscript">bytes = base64ToByteArray("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");
    var success = ogscript.saveToFile('test.jpg', bytes, true); //overwrite = true/false data is String, byte[], or XML
    ogscript.setStyle('_top', 'bg-u:test.jpg');
    </task>
       </button>
    </abs>
    


    ------------------------------
    James Peltzer
    Ross Video
    ------------------------------



  • 5.  RE: Display image on button from base64 data

    Posted 01-28-2025 14:32

    Super helpful - thanks!! I got it working. I took it a step further - my data is base64 encoded 8-bit RGB so I am converting it to a bitmap, into a byte array, and then saving that file.

    (I've made a Dashboard panel that emulates a Bitfocus Companion Satellite Surface. This will allow users to see the actual button style in Dashboard.)



    ------------------------------
    Joseph Adams
    Fellowship Church Greenville
    ------------------------------



  • 6.  RE: Display image on button from base64 data

    Posted 01-28-2025 15:05
    That’s awesome!

    Would you be willing to share any of that code to see how you did that?

    Sent from my iPhone
    Seth Haberman

    Live Production Associate Video Director (SLK)

    <tel:>


    700 Blessed Way
    Southlake, TX, 76092

    [https://smart.gatewaystaff.com/v2/imagebucket/gatewaystaff.com/Gateway_Logo_EmailSig.png] <http: gatewaypeople.com>




  • 7.  RE: Display image on button from base64 data

    Posted 01-28-2025 16:29

    Of course! I will release the panel open source once I'm done with my tweaks. I want to see it loaded up on an UltriTouch first and I'll provide a version of the panel sized for UT, as well as one for larger screens.



    ------------------------------
    Joseph Adams
    Fellowship Church Greenville
    ------------------------------



  • 8.  RE: Display image on button from base64 data

    Posted 01-29-2025 17:38
    Got it up and running today on the UT. It works great! I have a few tweaks I want to make to adjusting settings, and then I will release this.



    ------------------------------
    Joseph Adams
    Fellowship Church Greenville
    ------------------------------



  • 9.  RE: Display image on button from base64 data

    Posted 01-29-2025 18:25
    This looks awesome! I can’t wait to see it in action and see the code

    Sent from my iPhone
    Seth Haberman

    Live Production Associate Video Director (SLK)

    <tel:>


    700 Blessed Way
    Southlake, TX, 76092

    [https://smart.gatewaystaff.com/v2/imagebucket/gatewaystaff.com/Gateway_Logo_EmailSig.png] <http: gatewaypeople.com>




  • 10.  RE: Display image on button from base64 data

    Posted 02-04-2025 12:26

    Any idea when you are going to release this? I'm excited to test it out and see how it could help us!

     






  • 11.  RE: Display image on button from base64 data

    Posted 02-04-2025 20:51

    Soon I hope. It's been running pretty well on that Ultritouch now for a week or so. The last two things I want to do are tweak the settings modal/abs and also implement the unique id string that basically represents a serial number to Companion. Right now it's just 123456 :)



    ------------------------------
    Joseph Adams
    Fellowship Church Greenville
    ------------------------------



  • 12.  RE: Display image on button from base64 data

    Posted 02-04-2025 22:21

    @Seth Haberman https://techministry.blog/2025/02/04/using-ross-dashboard-and-the-companion-satellite-api-to-create-a-virtual-touch-surface-on-a-ross-video-ultritouch/

    :)



    ------------------------------
    Joseph Adams
    Fellowship Church Greenville
    ------------------------------