Yearly Archives: 2015

Detect IFRAME click from parent page

If you need to detect a click on a Web Page, that’s trivial: just catch Document or Body onclick event and any element on the page you click will bubble the event to your handler.

But if one of those elements is an IFRAME – that won’t work. IFRAMEs contain other pages and their events a contained within their content and don’t bubble up. Luckily there’s a way. Take a look this snippet of jQuery code:

$('IFRAME').on('load', function () {
   $(this).contents().on('click', function () {
      alert('Click Detected!');
   })
})

It attaches handler to IFRAME’s content’s onclick event, but only after IFRAME has already been loaded. Place this code in parent page that contains IFRAMEs and it will work universally across all browsers to detect when IFRAME was clicked.

NOTE: As usual in these scenarios, this works only if parent page and children pages comply with Same Origin Policy.

Restore bricked HTC One M8

Today my trusty HTC One M8 informed me that OTA (over the air) update of system software is available. Android security updates. Naturally I let the system download and install the update. Unfortunately after install phone refused to boot – it was getting stuck on HTC logo on white screen. Bummer.

Now I researched “stuck on logo” topic in depth and tried different methods to unstick it. No dice. Moreover, after chat with HTC Support and following their advice phone would simple go to blank screen. Double bummer. Continue reading →

How to make your Pebble smartwatch really tick

“Tick tock, goes the clock, And Now what shall we play?”.

Pebble smartwatch is an amazing piece of hardware with no less amazing software to support it. Pebble appstore boasts huge variety of watchfaces from intricately carved art pieces to simplicity personified. And the apps, my gods the apps! You want to track your sleep, count swimming stokes, automate your home – Pebble can do all those things and more. But something was missing. Something that ordinary mechanical clocks could do since the dawn of time.

Tick tock, goes the clock, And then what shall we see?
Continue reading →

Solution: Windows 10: Unable to start Appstore apps

Ok, I went ahead and upgraded to Windows 10. everything went smoothly, all my settings and installed apps preserved and work without a hitch. I am loving the interface and getting along with Cortana pretty good.

But after a while I encountered a weird issue: Appstore installed apps – e.g. Calendar, Mail etc. even Windows AppStore itself wouldn’t launch. I’d either get a cryptic error message, something along the lines “Application did not start, please contact system administrator” or very briefly a window would appear and immediately closed.

Looking into Event log was a bit more explanatory, but not too much: “Microsoft.WindowsStore_8wekyb3d8bbwe!App failed with error: Access is denied. See the Microsoft-Windows-TWinUI/Operational log for additional information.

If you google it – you will find many possible explanations of the problem and many possible ways to solve it offered, but none of those worked for me. Finally I figured it out (and Event Log entry gave me a clue): C:\Program Files\WindowsApps folder was missing necessary permissions:

WindowsApps

Namely, “ALL APPLICATION PACKAGES” was missing read & execute permissions on that folder (had to to uncheck “Hide protected operating system files” in Control Panel, File Explorer options to be able to see it). Once I added correct permissions – appstore apps started launching with no problems.

Sprite animation on original classic Pebble smartwatch

SDK 3.x for Pebble Time smartwatch offers cool and very convenient set of functions to create animation from your existing GIF or MP4 via APNG support. APNG is an obscure “Animated PNG” format (at the time of the post only Mozilla Firefox supports it) but it’s very powerful and can store animation in much more compressed format than traditional animated GIF, so Pebble chose it for a reason. So if you have a GIF, convert it to APNG with Gif2Apng (or if you have a video, convert MP4 to GIF first and then to APNG) and you’re ready to use it on Pebble Time. Just keep the size in check, since Pebble has to load entire APNG sequence in memory, try not to go overboard. The first video is showing animation from my “Vortex” watchface using this approach on Pebble Time.

But what about original classic Pebbles? Eventually they will get firmware 3.x and SDK 3.x support and with that APNG functions among other advantages, but at the time of this writing it is still hazy when this is going to happen. But where there’s a will there’s a way – you can still use your MP4/GIF source for animation it’s just a bit more tricky. Instead of dealing with a single APNG file as your resource and relying on Pebble firmware to draw the frames you will need to help it a little.

First you will need to split your source into individual frames, for example using this service. Yes, you will be dealing with individual frames, so don’t go creating a Hollywood blockbuster. But don’t fret, it’s a bit more manual work, but you won’t have to hand-crank the moving pictures all the way.
Continue reading →

EffectLayers gets (long overdue) remove function

EffectLayer for Pebble Smartwatch is a library that allows you to easily add special effects to your watchfaces or watch apps. You can even add multiple effects (up to 4 by default) to a single layer. But up until now you couldn’t easily remove added effect.

This feature could be useful when you need to add/remove an effect on the fly. For example user can choose to turn off or on color inversion from watchface config, so instead of creating/showing/destroying/hiding entire layer you can simple add/remove inversion effect.

Another use case is where you need to swap effects, for example remove 90-degree rotation clockwise and add 90-degree rotation counter-clockwise.

Well now you can, the library now has effect_layer_remove_effect function. What it does is simple removes last added effect. The effect showing in the demo above is achieved by this block of code:

switch (anim_count) {
   case 0:
      effect_layer_add_effect(effect_layer, effect_invert, NULL);
      break;
   case 1:
      effect_layer_remove_effect(effect_layer);
      effect_layer_add_effect(effect_layer, effect_rotate_90_degrees, (void *)true);
      break;
   case 2:
      effect_layer_remove_effect(effect_layer);
      effect_layer_add_effect(effect_layer, effect_mirror_vertical, NULL);
      break;
   case 3:
      effect_layer_remove_effect(effect_layer);
      break;
}
  
anim_count++;
if (anim_count == 4)  anim_count = 0;

It is called every time animation movement is initiated for the layer. Layer is moved 4 times in this demo:

  • On 1st call – inversion effect is added to the layer
  • On 2nd call – last added effect (inversion) is removed and 90-degree rotation added
  • On 3rd call – 90-degree rotation removed and vertical mirror effect is added
  • On 4th call – effect is removed so now layer has no effects.

Combined the chain produced the effect shown in the animation above.

Ideally library should have “insert” and “remove_at” function to be able to insert and remove effects from arbitrary index (and not only the end of effect chain). Stay tuned.

Useful Links

“Background” vibes on Pebble smartwatch

Matt Thompson from Pebble G+ community asked a question that got me curious: Is there a way to buzz Pebble vibe at regular intervals in the background, while a regular watchface is displayed in foreground?

Besides running a normal app, Pebble has 2 ways to run code in the background: background worker and Wakeup API.

Background worker can truly run in the background, but has no access to UI (and vibes are considered UI) as well as other limitations. Besides you can have only one background worker, so for example if you’re running MisFit app and want to run another background app – you’re out of luck.

WakeUp API has the ability to act as a timer in the background and launch your app when timer countdown finished. Interesting thing is – if your app doesn’t have any UI (windows) – it exits right away, so from the user’s point of view – it didn’t even ran – then point in the watch interface remains the same (if you’re looking at a watchface, or at settings etc. – you remain at the same spot).

We can use this to wake the app, buzz the vibe, reschedule wakeup time and exit. User will just hear a buzz with no visual indication that something was launched. Here’s a basic code to achieve this:

static uint32_t const segments[] = {1000, 500, 1000, 500, 1000};  

static void init(void) {

  wakeup_service_subscribe(NULL);
  wakeup_schedule(time(NULL) + 60, 0, false);
  
  vibes_cancel();
  
  VibePattern pat = {
    .durations = segments,
    .num_segments = ARRAY_LENGTH(segments),
  };
  vibes_enqueue_custom_pattern(pat);
  
}

int main(void) {
  init();
  app_event_loop();
}

This is pretty straightforward. Line 01 declares an array for custom vibe pattern (3 one-second buzzes separated by half-a-second silence) Line 05 subscribes to WakeUp event. Ordinary you need to specify a callback function as a parameter, but our entire code runs in the Init, so we don’t use it here. Line 06 schedules app wake-up in 60 seconds. Line 08 cancels any current vibes in case any are still running. Lines 10-13 prepare structure for custom vibe sequence and Line 14 runs the vibes.

That’s it. When you launch the app – it schedules its own wakeup, buzzes the vibe and exits immediately. You’re free to do what you want – set a watchface, run another app etc. When time comes – the app wakes up, buzzes the vibe, schedules next wakeup and exits without interfering with whatever user is doing. Etc. Etc. Etc.

Just remember that the only way to stop it is delete the app from the watch and wait for the current buzz sequence to finish.

Useful Links

Colorful watchfaces for Pebble Time

Pebble Time is latest and greatest smartwatch from Pebble corp. And one of the advantages it has over classic model is new epaper screen capable of supporting 64 colors. To test its capabilities I developed several color watchfaces. Some of them are the converted ones that originally were made for classic Pebble, some of them new. Click on the image to get redirected to Pebble appstore.

Long Shadow “Long Shadow” – inspired by stock LG G watchface, features large time and long colorful shadows. Config page allows customization of every color as well as shadow direction
TV Time “TV Time” – old-style TV displays time in cartoon format. Grid on the panel shows battery level
Simpe Striped “Simple Striped – Large time in color-striped font. Thin line at the bottom shows battery level both in length and coior
RusticSlider “Rustic Slider” – Though not in full color, uses Pebble Time gray shades to create realistic blocks with customizable sliding animation
Poochie “Poochie” – spoof of Gucci luxury digital watch
MeyerObjects “Meyer Objects” – Hour. minute and second hands are represented by wireframe design. Shake to display normal digital time. Configurable options
3D Wedge “3D Wedge” – Time displayed in diagonal skewed form along with date, time and battery percentage

Give them a try once you get your PT! Or, you can load them on your classic Pebble as B&W versions 🙂

Pushing pins to Pebble Time timeline from .NET code

Timeline on Pebble Time Pebble Time timeline is a very cool user interface allowing you to see future and past events and act upon them right on your watch. Right out of the box Pebble Time supports calendar pins that shows your future and past appointments in the timeline as well as weather alerts. But the real power comes from 3rd party apps using timeline – they can add anything from sports scores to latest news to TV showtimes – limit is just your imagination.
Pebble has always had open SDK – this is one of its major strengths, and Timeline is not an exception. Timeline API is a very straightforward way to push your own pins to users of your app. There’re various examples and libraries including PHP and node.js on how to deal with the timeline, but I, being mostly a Microsoft developer by trade, decided to bring Timeline into .NET. This particular example is in ASP.NET – pin is pushed from Webpage when user clicks a button, but it’s just one of the possible scenarios.

In order to push timeline pins successfully you will need 2 pieces:

  1. A watchapp that runs on Pebble. In fact after first run, that subscribes user to timeline, the app doesn’t have to be running on the watch anymore. It doesn’t even have to be on the watch. As long as it simple remains in your locker on the phone – you will continue to receive its pins
  2. Your own server that sends calls to Pebble public Timeline API to control pins

Continue reading →