Semi-transparent bitmap on B&W watches (e.g. Instinct 2) - SDK 7.4.3 issue

STeN 2 months ago

Hi,

Could you please advise me on how to display a semi-transparent image on a B&W display (e.g. Instinct 2)? I've tried everything I could think of, but after hours of attempts, I haven't made any progress… Either it's not possible, or I just don't know how to do it.

I was even hoping that combining two images rendered on top of each other (one with white + transparent color and the other with black + transparent color) might work, but I wasn't successful.

But I guess it must be possible somehow, because bitmap fonts are transparent.

However, I have only tested it in the simulator, not on a real watch—maybe that's the difference...

Thanks a lot.

STeN

Some results:

Top Replies

All Replies

0 FlowState 2 months ago

Works for me, with a modified version of the standard New Project > Device App template.

I changed the template project:

- to not draw the layout (so I could control the background colour, in order to prove that transparency is working)

- to set the background colour to black (or white) and clear the screen

- to draw the monkey bitmap programmatically

diff --color -r -u tmp2/TestIT2/source/TestIT2View.mc TestIT2/source/TestIT2View.mc
--- tmp2/TestIT2/source/TestIT2View.mc
+++ TestIT2/source/TestIT2View.mc
@@ -2,9 +2,10 @@
 import Toybox.WatchUi;
 
 class TestIT2View extends WatchUi.View {
-
+    var bitmap;
     function initialize() {
         View.initialize();
+        bitmap = loadResource(Rez.Drawables.id_monkey);
     }
 
     // Load your resources here
@@ -19,9 +20,20 @@
     }
 
     // Update the view
     function onUpdate(dc as Dc) as Void {
         // Call the parent onUpdate function to redraw the layout
-        View.onUpdate(dc);
+        // View.onUpdate(dc);
+
+        // test white bg
+        //var bgColor = Graphics.COLOR_WHITE;
+
+        // test black bg
+        var bgColor = Graphics.COLOR_BLACK;
+
+        dc.setColor(bgColor, bgColor);
+        dc.clear();
+        dc.drawBitmap(30, 30, bitmap);
     }
 
     // Called when this View is removed from the screen. Save the

To be clear, setColor() has no effect on dc.drawBitmap(), beyond the fact that the specified bg colour was used to clear the screen. For example, if I clear the screen with black, then set the fg/bg colours to white, it doesn't affect the above output:

    function onUpdate(dc as Dc) as Void {
        // Call the parent onUpdate function to redraw the layout
        // View.onUpdate(dc);
        
        // test white bg
        //var bgColor = Graphics.COLOR_WHITE;
    
        // test black bg
        var bgColor = Graphics.COLOR_BLACK;
    
        dc.setColor(bgColor, bgColor);
        dc.clear();
        dc.setColor(Graphics.COLOR_WHITE, Graphics.COLOR_WHITE); // doesn't do anything
        dc.drawBitmap(30, 30, bitmap);
    }

0 STeN 2 months ago in reply to FlowState

Hi FlowState

I did the same - I created a new project and just draw the money.png on white background and here is the result:

Here is the the link to the zipped sample: https://we.tl/t-G9jUZx9S6s

My dev environment:

- Windows 10 Pro

- VS Code 1.98.2

- Connect IQ SDK 7.4.3

STeN

0 FlowState 2 months ago in reply to STeN

I tried both SDK 7.4.3 and SDK 8.1.0 on Mac, and both work for me. (The monkey is drawn with transparency)

On Windows, SDK 7.4.3 fails (the monkey is drawn with a solid background), but 7.4.1 (the previous version), 8.0.0 beta (the next version), and 8.1.0 (the next production version) all work. (You shouldn't use 7.4.1 tho, since it was withdrawn.)

I don't see anything in the changelog, but it does seem like a simulator bug was introduced in 7.4.3 and fixed in 8.0.0 beta, but only on Windows.

0 STeN 2 months ago in reply to FlowState

Hi,

I confirm that after installing the new SDK 8.1.0 on Windows, the error has disappeared. Thanks a lot.

I always seem to fall into traps like this…

Have a nice day,
STeN