Datafield with png background

I'm making a surfing datafield that shows the number of waves ridden, length of ride, distance and max speed based on a speed and time threshold. I have it mostly working when run using a FIT file in the simulator. It will be just one large data field for the 920xt for now:

But now I want to show a png table as a background and put the numbers over top so that it looks better. But I can't get the table to work. I'm thinking that I have something wrong with either the drawbitmap code or even maybe the class. I'm getting this error when I comment out the //dc.drawBitmap code:

Failed invoking <symbol>
Invalid Value
@PC = 0x1000007d
@PC = 0x1000007d
Invalid Value
Invalid Value

Here's my code:

using Toybox.WatchUi as Ui;

using Toybox.Graphics as Gfx;

using Toybox.System as Sys;

using Toybox.Activity as Act;



class bigwavedave1View extends Ui.DataField {

     var info;

     var bmp;

     var SPEED_THRESHOLD = 8*0.277778; //current speed in m/s from km/hr

     var START_EVENT = false;

     var STOP_EVENT = false;

	

    //! Load your resources here

    function onLayout() {

    		bmp = Ui.loadResource(Rez.Drawables.id_background);		

    }

    

	//! Update the view

    function onUpdate(dc) {



        // Call parent’s onUpdate(dc) to redraw the layout

       	dc.setColor(Gfx.COLOR_WHITE, Gfx.COLOR_WHITE);

        dc.clear();

        // show background table

        dc.drawBitmap(205, 0, bmp);	 // => if I comment out this line then it runs fine

        

        // get the activity info details

 	info = Act.getActivityInfo();

 	var clockTime = Sys.getClockTime();

 				

    	if (info.currentSpeed != null) {

            

    		// start of event

    		if (info.currentSpeed >= SPEED_THRESHOLD && START_EVENT == false) {  

etc....

<resources>

    <string id="AppName">bigwavedave</string>

    <bitmap id="LauncherIcon" filename="images/launcher_icon.png" />

    <bitmap id="id_monkey" filename="images/monkey.png" />

    <bitmap id="id_background" filename="images/bwd.png" />    

</resources>

I'm not sure if:
class bigwavedave1View extends Ui.DataField {
should be:
class bigwavedave1View extends Ui.View {

? but that gives an error too:
Unexpected Type Error
Complete
Connection Finished
Closing shell and port

It would be nice if there was a datafield example instead of just the simpledatafield one.

The png file I want to use as a background:

I'm definitely a beginner at this so any help is appreciated. I'm surprised that I got this far :)
Thanks
Dave

Former Member over 10 years ago

The onLayout method never gets called for a data field (I think that's a bug that will be addressed in a future update). If you load your resource in the inilialize method, it will work just fine.

Your class should indeed extend DataField.
The error indicates that the type of the parameter value is incorrect. In this case your because your bmp field has a value of null.

bwd1 over 10 years ago

Thank you TeunMo! I changed the onLayout() function to initialize() and now I get an out of memory error:

Failed invoking <symbol>
Out Of Memory Error
@PC = 0x1000002c
@PC = 0x1000002c
@PC = 0x100009ae
Out Of Memory Error
Complete

I resized my png down to 698 bytes but still get the error. I even tried the mo2Icon.png icon in the samples and get the same thing. Any ideas?

using Toybox.WatchUi as Ui;

using Toybox.Graphics as Gfx;

using Toybox.System as Sys;

using Toybox.Activity as Act;



class bigwavedaveView extends Ui.DataField {



     var bmp;

    

	

    //! Load your resources here

    function initialize() {

 	bmp = Ui.loadResource(Rez.Drawables.id_background);		

    }

    

    //! Update the view

    function onUpdate(dc) {



       	dc.setColor(Gfx.COLOR_WHITE, Gfx.COLOR_WHITE);

        dc.clear();

        // show background table

        dc.drawBitmap(50, 5, bmp);	

    }

}

<resources>

    <string id="AppName">bigwavedave</string>



    <bitmap id="LauncherIcon" filename="images/launcher_icon.png" />

    <bitmap id="id_background" filename="images/mo2Icon.png" />  

</resources>

Former Member over 10 years ago

Resizing your image isn't going to have much of an impact on the size in ConnectIQ because the resource compiler has to convert the image into a bitmap format that can be read by our devices. I'm pretty sure a full screen bitmap is just going to be too large for a data field because the max memory is much more restricted due to running along side native activity code. If you specify a 2 color palette for the image (white/black or transparent/black, whichever you are using), it might compress the image to a small enough size, but probably not. I think you are really just going to want to draw this using lines/rectangles.

bwd1 over 10 years ago

I think you are really just going to want to draw this using lines/rectangles.

Ah, okay, that makes sense. I was wondering how other people where doing it. For some reason I just assumed it was a background image. Thanks.

travis.vitek over 10 years ago

Write the code to render the lines.

bwd1 over 10 years ago

Thanks, done...and it was easier too :) Now my next problem - the datafield runs fine in the simulator on a 2hr FIT file but crashes and reboots the watch when I try to select it as a single datafield. Do I need to simplify the code to decrease memory or have I done something obviously wrong?

In Eclipse > ConnectIQ > Build Project for Device > this created bigwaved.prg

Then I copied it to the watch \GARMIN\APPS\BIGWAVED.PRG

Then when I try to add it as a single data field the watch reboots. I assume this is a bad sign...

bwd1 over 10 years ago

okay...ignore that. Apparently one cannot test for info.currentSpeed != null and assume that info.maxSpeed is then valid. It's all working now.