WinJS (WP8.1): update secondary tile from background task - javascript

I'm struggling with problem with my first winJS app. What I want to do is to update all secondary tiles created by my app in interval of a couple of hours when Internet connection is available. I've managed to do that from my app, using a simple "update" button, but I cannot do that from bg task. As for now I'm testing it on timezone change trigger not to wait half an hour for the result. I put simple console.log at the beginning of the bgtask to confirm that it occurs and it does, but none of the live tiles updates. What piece of information am I missing about updating secondary live tiles from bgtask?

Sounds like you've figured it out, but the key piece is the GetDeferral method on the background task instance. You need to call that and then call the Complete method on that only after all your task's work is done (including waiting for promises from any async calls to complete).

Related

Triggering course completion in SCORM 1.2

I've got SCORM 1.2 saving and updating objectives correctly but I can't seem to trigger the actual course completion. When the course is loaded into our test Managed Learning Environment (MLE) we get the following behaviour:
When the last objective is completed, the course completion fires off, as expected.
The SCORM console.log-ing says the course completion has been recorded successfully.
When the user closes the course window, the course completion is in fact NOT registered with our MLE.
When the user returns to the course and completes any objective (which have all previously been completed) the course completion fires off again, as expected - but this time when they close the course window, the course completion HAS registered with our MLE.
So, is there something about the exit characteristics that I should be including?
Here's how we set up an objective:
vault.SCORM.set('cmi.objectives.'+numberOfObjectives+'.id', tempComponentString);
vault.SCORM.save();
vault.SCORM.set('cmi.objectives.'+numberOfObjectives+'.status', 'incomplete');
vault.SCORM.save();
Here's how the objectives get completed:
vault.SCORM.set("cmi.objectives." + pages[pageId-1].componentSCORMIndexesById[element.componentId()] + ".status" , "completed");
vault.SCORM.save();
Those are all working fine. It's the course completion that's the problem. Here's the code for that:
vault.SCORM.set("cmi.core.lesson_status" , "completed");
vault.SCORM.save();
Just to repeat: This course completion console.logs as if it has fired off correctly the first time the course is actually completed, but the course is only registered as complete with our MLE when the user returns to the course and clicks a completed component (which triggers an objective completion and the above course completion again).
Is there something about how we've set up the objectives that would be preventing actual completion the first time? Or is it to do with exit characteristics / suspend data?
If anyone has any pointers, that would be great!
EDIT
I've done some more testing and temporarily taken OUT the calls to set 'cmi.objectives'. The course completion now works correctly. So it's something about the presence of the objectives that's preventing the course completing correctly. Is there some extra property that needs to be set to really complete an objective?

Javascript Animation and Recursion

I have written a Javascript program that solves a puzzle game using a recessive technique.
That is, function solvePuzzle() calls function solvePuzzle() for a simpler puzzle until the solution is found. It alters the data in the board object.
I also have a function board.draw() that can display the state of the puzzle
It draws the initial game board as I expect and once I click on a button (triggering execution of solvePuzzle()) it draws the solved game board again as I expect.
However, I would like to show the intermediate puzzle states.
Initially, I inserted calls to board.draw() in the solvePuzzle() function but this does not do anything.
Researching Javascript animation has led me to create and execute this function
function animationLoop(timestamp) {
// 1 - Clear
ctx.clearRect(0, 0, c.width, c.height);
// 2 Draw
board.draw();
pieces.draw();
// call again mainloop after 16.6 ms (60 frames/s)
requestId = requestAnimationFrame(animationLoop);
}
requestId = requestAnimationFrame(animationLoop);
I am confident this is working as this only place I now call board.draw() and it show the initial state and switches to show the solved state after I press the solve button but... still no intermediate states are shown.
I then hypothesised the issue was that solution was so quick that it happens between frames but discounted this by placing this 'delay' in solvePuzzle
if (solutionCount%1000 == 0) {
confirm("Are you sure you wish to continue?");
};
I am now hypothesising solvePuzzle must run to completion before animationLoop can progress.
Is this hypothesis correct?
If so, how can I resolve my issue?
I am thinking I sort of need to continually end and resume my reclusive function at each state but cannot get my head around how I might do this.
Note: another reason I am confident the animation is working is that if I alter board from the console with say a statement like
board.layout[7].available = true;
the expected change is made to the display
JavaScript is single-threaded, and shares this thread with UI updates. Thus, when a function is started from top level, the browser does not do anything else until that function exits. This includes animation frame - animation is happening any time the page's thread is idle and an animation can be scheduled, but while your code is executing it can't.
If your calculation takes time, you need to split it into discrete pieces and let the browser breathe in between if you want UI updated (normally using setTimeout(f, 0), or inside requestAnimationFrame handler).
Another possibility is using Web Workers. They are a way to launch JavaScript in a separate thread. However, they cannot interact with the DOM at all, and can only communicate with messages. So, you can launch your calculation in a Web Worker, then from the worker periodically send messages to your main JS code in order to make it update the DOM in accordance to the results (both interim and final).
Thanks Alexander O'Mara and Kaiido for making me cover cases I forget.

Why is Alert working as a pause?

First of all, apologies if this question was answered before.
I'm writing a code in JS to read an Excel File, get the value of the first cell in the column, search for it (it's an ISBN code, which I'm searching with the Google Books API) and get other relevant info, made available through the search (like Title, Subtitle and Author), then proceed to the next line and repeat the process.
My problem is writing the new data back in the Excel File. The code is writing all info in the last used row in the file. While using window.alert to flag the code, I noticed that when the alert was in a for loop, right before the search was initiated, the new data was inserted just fine, but if I tried to use a pause (like a timer function or a while loop to consume time) it didn't help at all.
What I want to know is why that behavior might be happening and, if possible, of course, a possible solution for my problem, since having to use alert as a pause isn't exactly the most interesting solution.
Thanks in advance
Alert will always stop all execution of code, except for web workers. Therefore, If you need to continue execution, use a web worker. Have a look at this for reference (the note part covers this topic partially)
When browsers show a native modal interaction widget, such as an alert, it transitions into a state that waits for the response. In this state, it is allowed to redraw the page and process certain low level events. Here's the code from Mozilla Firefox that alert() and confirm() use:
http://mxr.mozilla.org/mozilla-central/source/toolkit/components/prompts/src/nsPrompter.js#434
This openRemotePrompt function doesn't return until the user clicks "OK" on the alert. However browser behaves differently while the alert is open. A loop repeatedly calls thread.processNextEvent to do certain kinds of work until the dialog is closed. (It doesn't run the application's JavaScript code, since that's meant to be single-threaded.)
When you use a pure JavaScript busy wait, for example, by looping until a certain wall time, the browser doesn't take these measures to keep things moving. Most noticeably, the UI won't redraw while the JavaScript code is looping.

Can the AngularJS ui-router state change event for previously visited states before processing be capture?

ui-router's stateChangeStart and stateChangeSuccess are perfect for capturing the moment I should display a loader overlay for my web app's UI to present to the user that the transition time is expected and the page has not frozen.
Unfortunately, any state that has previously been viewed and is revisited by the user does not perform as expected. Both events still fire, but it appears that a substantial amount of the processing that occurs during the transition occurs before this event is fired, deeming the loader overlay pretty useless for these cases.
Is there a way to capture the state/route change at an earlier stage in the process so the loader will promptly appear?
I would say, that these events are not the proper one. Because lot of processing time (I'd say) will be consumed by $http loading - not just a state transitioning. I.e. if we are talking about showing progress to user maybe try to check this solution:
Angular Loading Bar
And if does not fully fit to your needs, take it as inspiration... (few cites)
What is this?
There are a few projects like this one, but none that were automatic. They all required you to maintain state on behalf of the progress bar, setting its position manually. This is problematic when you have multiple services all making independent XHR requests. You simply can't have loosly-coupled code in this scenario.
This project is different. It automates the loading bar's progress, by using angular interceptors. Multiple requests within the same time period get bundled together such that each response increments the progress bar by the appropriate amount.

Page elements don't visibly update during load

I'm probably missing something really obvious here...
I'm showing a dialog box with progress bar during page load. The dialog and progress bar are both jQueryUI widgets. There are a couple of phases of loading - the page makes a load of jQuery $.get() requests to load resources, then on the $(document).ajaxStop() event, does things with those resources. I'm updating the progress bar and some status text throughout this process.
The issue is that as soon as the ajaxStop event fires, updates stop. The code works nicely during resource loading, but then freezes and I don't see any of the updates during processing. If I put a breakpoint on a post-ajaxStop update in Chrome and step through the code, the screen updates correctly so I know that the code works.
Can anyone explain why everything updates nicely during my AJAX loading phase, but then stops on the ajaxStop event? Is there an easy way to make updates continue afterwards?
Thanks!
Several hours of searching later, the following blog pointed me in the right direction:
There's a jQuery extension described in the entry which allows you to define two functions, one to compute and one to update the UI. It schedules them alternately using the setTimeout function.
I've had to rewrite my code in something akin to continuation passing style so that each function schedules its continuation to run using setTimeout. This returns control to the browser for long enough for the screen to be updated.
This feels like a bit of a hack though to get round browser/Javascript limitations. Anyone know of a better way?

Categories

Resources