unable to use Clay in emulator

This is due initially to the code being hard coded to to open http://clay.pebble.com.s3-website-us-west-2.amazonaws.com/ which has been offline for a while.

However I'm not clear the technique being used is possible since late 2017 with a change to Mozilla Firefox, https://blog.mozilla.org/security/2017/11/27/blocking-top-level-navigations-data-urls-firefox-59/ (also see bug https://bugzilla.mozilla.org/show_bug.cgi?id=1331351).

Hacking in a new URL (into https://github.com/pebble/clay/blob/master/dev/emulator.html ) results in an error in the debugger console in Mozilla Firefox:

Navigation to toplevel data: URI not allowed (Blocked loading of: “data:text/html;charset=utf-8,<!DOCTYPE html>...”)

I'm not yet clear why the emulator uses a web page and doesn't use a data URI like it does on the phone.

In the mean time for emulator debugging/testing I'm using a regular web page.

https://github.com/clach04/clay/tree/%23162/new_emulator_url has a demo that appears to not work for modern browsers.

Its possible pushing data into an iframe may be a viable workaround.

As I'm using a VM I tried Firefox version 55 and whilst it does not error and does update the URL to a data URI the windows content is blank (dark, so the CSS is loading) :(

Same for 49.0.1

I'm trying to recall when/if Firefox worked with Clay as I know initially it targeted Chrome (I do recall issues with Firefox)

Firefox 35.0.1 does not work with clay 1.0.4, errors on decodeURIComponent(location.hash.substring(1));.

Version 54 does not work with dark screen as per above.

So I ended up needing to use custom handlers with Clay and I was going to add some emulator detector code in place so that I could spawn a regular website URL rather than Clay. Using the custom actions made Clay work in the emulator (using Chromium as browser, I've not tried anything else).

I.e. the following worked for Phone and Emulator on desktop:

var Clay = require('./clay.js');
var clayConfig = require('./config');
var clay = new Clay(clayConfig, null, { autoHandleEvents: false });


// as autoHandleEvents set to false need a basic showConfiguration action
Pebble.addEventListener('showConfiguration', function(e) {
	// for what ever reason this then causes Clay display to work in emulatpr
	// // NOTE save works with web app, but then get error and pebble never receives data/config with my quick test
	var emulator = !Pebble || Pebble.platform === 'pypkjs';
	console.log('showConfiguration');
    console.log('emulator  =' + JSON.stringify(emulator));

    Pebble.openURL(clay.generateUrl());
});

Pebble.addEventListener('webviewclosed', function(e) {
    if (e && !e.response) {
    return;
    }

    // Get the keys and values from each config item
    var dict = clay.getSettings(e.response);

    console.log('string config data =' + JSON.stringify(dict));
    console.log('string config data length=' + JSON.stringify(dict).length);
    // Send settings values to watch side
    Pebble.sendAppMessage(dict, function(e) {
	console.log('Sent config data to Pebble');
    }, function(e) {
	console.log('Failed to send config data!');
	//console.log(JSON.stringify(e));
    });
});

NOTE clay modified to point to a server that is up

@clach04

@clach04 It looks like it took many twists and turns for you to get to a working state, can you summarize the proper way to get this all working these days? I have copied the code from your latest comment into my index.js and gone into node_modules/pebble-clay/src/js/index.js (as created by pebble package install pebble-clay) and replaced the old Amazon S3 URL with your copy at http://clach04.github.io/pebble/clay/emulator.html#. When I do a clean, build, and install of my app on the emulator and run

pebble emu-app-config

I still get directed to the old broken S3 address in my default web browser. I imagine this is some simple Node issue that I'm not familiar with. Is there a straightforward series of steps you can provide for people to get Clay emulation working with minimal hacks?

@mattrossman

@mattrossman my Pebble sdk machine is kaput so best I can do is point you at what my notes indicate is a working branch with code that uses the above.

https://github.com/clach04/pebble-rest-timer/commits/emu_clay

I still use this app on my Pebble, I just can't debug it

I saw some one had a docker image of the sdk/emulator but I'm not sure when I will get chance to play with it any time soon :-(

@matthewtole

@matthewtole if you are still getting the AWS url, then the pebble clay package you have is not hacked (correctly). I dug out my old vm and spent the last few hours remembering how pebble node packages work. I'm not convinced I have this all figured out in my head but I do have it working.

I'm using my github hosted clay emulator, its at http://clach04.github.io/pebble/clay/emulator.html# - note the #, my hacked pebble-clay source is in https://github.com/clach04/clay/commits/%23162/new_emulator_url (I did experiment with http://clach04.github.io/pebble/clay/# but not had any success, even though index.html is the same as emulator.html, redirect to data page fails)
You do need the hacked pebble clay installed, I do not have a great mechanism for this but I build it (gulp, npm run build (for good measure, may not be needed), pebble build) and then on the same machine where I have the project I want it issue pebble package install /path/to/build/dir - I've not found a better way yet.
application js needs to handle showConfiguration
I'm using Lubuntu 18.05 LTS and Chrome 48.0.2564.109. If I use Chromium 69 then the redirect is denied - in theory you could copy/paste/edit the redirect URL

Let me know how you get on. I've not figured out how to make deliverable pebble-clay packages otherwise I'd attach to github for you to pull down.

Add re-modded version of clay

@clach04

@clach04 I ended up finding a better solution I think. I ran into some hiccups with the instructions, but I eventually reached the point where Chrome was denying the redirect. I realized that I had already been able to reach this point simply by cloning that rest timer app you linked earlier. I noticed that you included a (modified) copy of the clay.js source in your repo, so there was no need to use any pebble package commands to get up and running. I removed all the pebble-clay stuff from my project that was being managed by node and just copied that clay.js source file into my project, changing the require statment in my index.js accordingly. That left me with the remaining "Navigation to toplevel data: URI not allowed" issue.

This was resolved by adding in this function to replace the HTML content of the current page from within the <script> rather than sending a redirect request. I published this modified version of emulator.html on my own project page at https://mattrossman.github.io/pebble-watchface/clay/emulator.html and updated the reference to it in my modified clay.js copy.

With all this in place, I am able to see a working clay config page after issuing pebble emu-app-config, and there is no need to deal with pebble package whatsoever. At some point I will look into publishing a modified version of pebble-clay that points to the re-modified emulator.html. The instructions make the process look pretty simple.

Thanks a bunch for helping out, now I can get back to work on my watchface!

Resolves pebble#162 - data URI now loads in iframe

Merge pull request #1 from kennedn/pebble#162/unable-to-use-Clay-in-e…

@kennedn

I've merged this into the S3 bucket that Rebble maintains. Thanks, @kennedn!

Navigation Menu

unable to use Clay in emulator #162

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

unable to use Clay in emulator #162

Description

Activity

clach04 commented on Sep 15, 2018

clach04 commented on Sep 15, 2018

clach04 commented on Sep 15, 2018

clach04 commented on Sep 15, 2018

clach04 commented on Sep 16, 2018

clach04 commented on Nov 9, 2018

mattrossman commented on Jul 9, 2019

clach04 commented on Jul 12, 2019

clach04 commented on Jul 18, 2019

mattrossman commented on Jul 19, 2019

jwise commented on Feb 9, 2021

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions