Robot Not a Dev? Buy Now
Not a Dev?

Misty Community Forum

successCallback is not a function

I get an error from the api when trying to post an image to Misty using the SaveImageAssetToRobot method

Here is some of my code:

 uploadQRBtn.onclick = (evt) => {
                if (robo === undefined) {
                    showToastMessage("You must connect to a robot first.");
                    return;
                }
                //get qr data string
                const tmp_filename = `tmp_qr_${new Date().getTime()}.png`;
                const data= convertDataURIToBinary(qrEl.lastChild.src);
                const w = QROptions.width
                const h = QROptions.height
                //console.log(tmp_filename, dataString, w,h, qrEl, qrEl.lastChild)
                //upload
                robo.SaveImageAssetToRobot(tmp_filename, data, w,h, true, true,  (res)=>{
                    console.log(res)
                    if(res.success){
                        showToastMessage("image upload success")
                    }
                });
}

and here is a screen with the resulting error in the console:

I have confirmed that the images are being uploaded to Misty and can be displayed using the API explorer to fetch the images then set them by name, or by manually doing it using a setTimeout after the upload, so while it does error out for the callback it still “technically” work.

I haven’t debugged through this, but maybe try something like:

robo.SaveImageAssetToRobot(tmp_filename, data, w,h, true, true, function (res) {
console.log(res)
if(res.success){
showToastMessage(“image upload success”)
}
});

Matt,
One thing that stands out to me is that “successCallback” will only be called if the response does not have a status of “error”. The response passed into the callback will have a status of “success”.
Can you debug it in the console to to see why successCallback is not being assigned the value of (res)=>console.log(res){showToastMessage(“image upload success”)}} ?

1 Like

I tried looking at logging out in the MistyAjax.ts file itself but I haven’t jumped on the coolkid TS bandwagon (:dark_sunglasses: ) and couldn’t get it to transpile and actually log anything last night. I’ll try the non-arrow function @morgan and see what happens, just think it’s odd that its not registering it as “function”, maybe it doesn’t like annons. thanks for the assist @econnolly and @morgan , will test again this evening.

Thanks Matt. Let us know how it goes and if you have any further issues in the near future.

1 Like

Here is a fun story.
There is definitely something afoot at the circle-k. This time I wasn’t looking at code at 3am…ish, so i realized I was editing the wrong MistyAjax.js file before (derp :face_with_hand_over_mouth: ) However!

done promise in the .js after the post method:

.done(function (data) {
                    theClass._Log2Console("Done-Success", "PostCommand");
                    console.log(successCallback)
                    if (data.status === "Error") {
                        // the web call was successfull, but returned an error.  Display Error.
                        theClass._Error2Console(data[0].errorMessage);
                    }
                    else if (successCallback) {
                        // no errors and there is a successCallback function.
                        successCallback(data);
                    }
})

and the console.log(successCallback) returns:

true

the argument is a boolean, when it should be a function… ok
even more odd, I added a couple logs to MistyAPI.js in the SaveImageAssetToRobot method:

SaveImageAssetToRobot(FileName, imageData, imageWidth, imageHeight, immediatelyApply, overwriteExistingFile, theCallback) {
                let dataString;
                if (typeof imageData === 'string') {
                    dataString = imageData;
                }
                else {
                    dataString = imageData.toString();
                }
                let payload = {
                    FileName: FileName,
                    DataAsByteArrayString: dataString,
                    Width: imageWidth,
                    Height: imageHeight,
                    ImmediatelyApply: immediatelyApply,
                    OverwriteExisting: overwriteExistingFile
                };
                console.log(payload)
                console.log(theCallback)
                this.PostAjaxCommand("images", payload, theCallback);
            }

where the callback there returns true as well… :man_shrugging:
the argument count is right but its a bool somehow?
so then I added:
console.log(FileName, imageData, imageWidth, imageHeight, immediatelyApply, overwriteExistingFile, theCallback)

and here is the result:

tmp_qr_1525497504191.png, Uint8Array(16908) [137, 80, 78, 71, 13, 10, …], 512, 512, false, true, true

…err? super weird, where is that false coming from? clearly i’m sending 2 true bools. So to check my sanity I double check the arguments I pass to SaveAsset…

console.log(tmp_filename, data, w,h, true, true, (res)=>{})

which yields:

tmp_qr_1525497504191.png, Uint8Array(18594) [137, 80, 78, 71, 13, 10, 26, …], 512, 512, true, true, (res)=>{}

what am I missing? somehow we have come up with quantum tunneling in javascript… JUST TO BE SURE, here is a screen shot of the console showing the logs of the seemingly same arguments before they are fed into the method and after they are in it (minus the arrow function of course, that one is diff).

I do notice that although I edit the .js file, its a .ts file that is referenced in the console… maybe a typscript thing?

You have the most amusing support requests. I am sure someone will be able to help unravel this shortly.

1 Like

I guess this might help y’all MistyBeta/QR_example.html at master · mattanimation/MistyBeta · GitHub

@Lenn or @econnolly curious if you got a chance to look into this? I haven’t been able to resolve it.

I’m looking back through the history of this. Will get back to you in a little bit.

Hi Matt,
Unfortunately this API stuff is out of my wheelhouse, so no quick answer here. But I will raise this up in the morning with the folks who can help and get back to you.
To confirm my understanding of the goal here, using the html you reference in your link, the user would ‘Connect’, ‘Create QR’, and then ‘Display QR on Misty’. And its the last step that’s falling down, correct?

That is correct, and it’s specifically the SaveImageAssetToRobot callback method that fails, at least for me. Thanks!

Actually I just got the image to show up on the display. Still getting one error message in the console, but its closer. I modified your code with the following. I assume it will be obvious where this goes, but let me know if it isn’t.

robo.SaveImageAssetToRobot(tmp_filename, data, w,h, true, true, function (res)
{
       console.log(res);
       if(res.success){
             showToastMessage("image upload success");
       }
});
//display
setTimeout(()=>{
    robo.ChangeDisplayImage(tmp_filename, function(res)					
    {
            console.log(res);
    });
}, 1000)

cool, same thing on my end. yeah seem weird the arrow function would make that much a difference, especially since it’s just being used to handle a callback. not really any diff (at least according to this)

Hi Matt,
Got it figured out. There are a couple of objects available to make API calls with: MistyAPI and MistyRobot. You were using the signature for MistyAPI:

SaveImageAssetToRobot(FileName, imageData, imageWidth, imageHeight, immediatelyApply, overwriteExistingFile, theCallback)

But calling the method on MistyRobot:

SaveImageAssetToRobot(FileName, imageData, imageWidth, imageHeight, callback)

So you have a couple of “true” arguments for the former call that aren’t in the latter. So just get rid of those two 'true’s and you should be good.

4 Likes

ah, ok that makes sense I guess. Didn’t notice the difference. I shall update that, thanks!