Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Web and WebWorks Development

Reply
Developer
Posts: 101
Registered: ‎06-14-2010
My Device: Passport
My Carrier: Virgin Mobile Canada

Re: Updating Active Frames with Webworks?

I want to create an active frame that displays a dollar figure of three digits or fewer (four characters including the currency symbol) in very large text (filling the full width of the active frame) with a short line of text above it.

 

I was hoping to just use an HTML object styled up to do the job, possibly dinamically sized for the various devices... but I take it I have to use Canvas to convert the styled HTML to a raster graphic and use that as the Active Frame (which seems a bit heavy handed).

 

There are links to code samples above but the links are invalid: Are there any other code samples that can be used to turn arbitrary HTML into the Active Frame contents?

BlackBerry Development Advisor
Posts: 667
Registered: ‎10-01-2009
My Device: All
My Carrier: N/A

Re: Updating Active Frames with Webworks?

This link works, the href was messed up in the previous posts - https://github.com/TheMarco/The-Last-Weather-App/blob/master/js/savecanvas.js

 

I've done a fair bit of work saving canvas data as graphics as well.

 

Erik Oros wrote a good, small, sample which shows this. It might be a bit more useful than picking through the source of a full app. https://github.com/blackberry/BB10-WebWorks-Samples/tree/WebWorks-2.0/canvasToFilesystem

Developer
Posts: 101
Registered: ‎06-14-2010
My Device: Passport
My Carrier: Virgin Mobile Canada

Re: Updating Active Frames with Webworks?

[ Edited ]

Thanks so much for this Chad: I am hoping to get the app done in the next week or so (a couple of niggley bugs are keeping this super-simple app from being published): Active Frame support isn't a showstopper, but I think it would be an extremely handy feature... but I've never worked with "canvas" before, so I guess I'll learn something new in the process.

 

p.s. I see Erik's code is for WebWorks 2.0: I was planning on just forging ahead with WebWorks 1.0 for now, and don't want to make the investment to convert right away... can you advise me whether or not this code should work with WebWorks 1.0? My app uses BBUI.js and my previous attempt to upgrade to WebWorks 2.0 with BBUI.js left me with a blank black screen on the simulator... so I'd like to just use WebWorks 1.0 / BBUI.js as is for now (thanks in advance for any guidance!)

Developer
Posts: 101
Registered: ‎06-14-2010
My Device: Passport
My Carrier: Virgin Mobile Canada

Re: Updating Active Frames with Webworks?

[ Edited ]

I have been able to achieve something like what I want, but the performance is spotty: I've added a "Minimize" button to my Action Bar that does a bit of work before calling the "minimize()" method on the app, and it often results in my Active Frame (Window Cover) being exactly as I wanted it to be... but after leaving it minimized, and going to the hub and coming back, or launching another app etc. (just navigating around generally) sometimes it has hidden the object I want to be 'captured' for use as the Active Frame contents, and shows a zoomed-in area of the larger screen... so as I type this it occurs to me if I instead make my desired "active frame" the same height and width as the standard "swipe up from bottom bezel" snapshot, I will at least get something attractive in the Active Frame even if it's just my "close second" option.

 

EDIT: so what I do is this:

 

I set the snapshot region to a certain part of the full screen (when I leave it at the default, the area is smooshed vertically and distorts the aspect ratio of text and I don't like that).

 

When I use the bezel.swipeUp gesture to minimize the app as normal, something acceptable occurs.

 

The Minimize button on the Action Bar does a bit more: before it actually minimizes, it renders in the same area as the default snapshot an "Active Frame" optimized version of the key data point: a running total, in 128pt text with a pretty border around it.

 

When the "Minimize" action bar button is pressed, the app immediately minimizes to the "smooshed" distorted version of the current screen, but then redraws itself to show the optimized Active Frame screen rendered from the HTML... and when restoring, it immediately returns to the attractive view of the main screen. Nice.

 

There still seems to be inconsistency with whether or not the optimized HTML Active Frame will be rendered or not, and when navigating around the device into and out of the Hub or other apps or to the Application Icon screens, sometimes the pretty optimized Active Frame is replaced by the non-optmized but acceptable Snapshot of the main screen (as though it has been 'restored' in the background and minimized with a bezel.swipeUp gesture) but the worst case scenario is something acceptable, so I'm going to call that a "win" for now. :-)

Developer
Posts: 178
Registered: ‎03-10-2011
My Device: Not Specified

Re: Updating Active Frames with Webworks?

[ Edited ]

Why do you need a minimize button? You can register ActiveFrame events.

 

ondomready: function(element, id, params) {
    if (! bb.device.isRipple) {
        blackberry.event.addEventListener("entercover", function() {
            // create and draw image, file location:
            //   blackberry.io.sharedFolder + '/documents/activeframe.png' 
            createCanvasImage();

            setTimeout(function() {
                blackberry.ui.cover.setContent(blackberry.ui.cover.TYPE_IMAGE, {
                    path: blackberry.io.sharedFolder + '/documents/activeframe.png'
                });

                blackberry.ui.cover.updateCover();
            }, 500);
        });

        blackberry.event.addEventListener("exitcover", function() {
            blackberry.ui.cover.resetCover();
            // clean up image
            deleteCanvasImage();
        });
    }
}

 

Highlighted
Developer
Posts: 101
Registered: ‎06-14-2010
My Device: Passport
My Carrier: Virgin Mobile Canada

Re: Updating Active Frames with Webworks?

[ Edited ]

Thanks for taking the time to provide that code sample, but I didn't get the desired effect trying to capture the events... I need to detect the swipe up gesture then generate and overlay the Active Frame contents (but non-interactive) DIV obstructing the main (interactive) screen at the right scale to become the active frame contents (that is to say the ideal Active Frame is a huge box of text that isn't useful as a feature of the actual foreground ed app)

 

It is my understanding that as soon as the swipe up gesture starts, my app suspends so it can't act on the gesture to generate and position and scale the overlay for the OS to snapshot, so I didn't pursue that too much.

 

Are you saying that there is a degree of "ownership" I can exert over what happens in a Webworks app after the swipe up gesture has already started "minimizing" the app? or even better that I'm wrong about Webworks apps not "running in the background"?

 

If it can do the overlay content generation, scaling, positioning and refresh the OS "snapshot" captured to be used as the active frame, the minimizer button can go... but the Webworks documentation seems to explain how you can can tell the OS how to generate the active frame contents when the OS is minimizing the app, as a grid or list or even image, but you can't write your own code to do as I want: overlay arbitrary HTML optimized for Active Frame and (coupled with Snapshot parameters) just have the OS greater the active frame snapshot from that HTML.