Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

unable to use Clay in emulator #162

Open
clach04 opened this issue Sep 15, 2018 · 11 comments · May be fixed by #163
Open

unable to use Clay in emulator #162

clach04 opened this issue Sep 15, 2018 · 11 comments · May be fixed by #163

Comments

@clach04
Copy link
Contributor

clach04 commented Sep 15, 2018

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.

@clach04
Copy link
Contributor Author

clach04 commented Sep 15, 2018

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.

@clach04
Copy link
Contributor Author

clach04 commented Sep 15, 2018

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) :(

@clach04
Copy link
Contributor Author

clach04 commented Sep 15, 2018

Same for 49.0.1

@clach04
Copy link
Contributor Author

clach04 commented Sep 15, 2018

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

@clach04
Copy link
Contributor Author

clach04 commented Sep 16, 2018

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.

@clach04
Copy link
Contributor Author

clach04 commented Nov 9, 2018

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

@mattrossman
Copy link

@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?

@clach04
Copy link
Contributor Author

clach04 commented Jul 12, 2019

@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 :-(

@clach04
Copy link
Contributor Author

clach04 commented Jul 18, 2019

@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.

  1. 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)
  2. 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.
  3. application js needs to handle showConfiguration
  4. 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.

mattrossman added a commit to mattrossman/forecaswatch2 that referenced this issue Jul 19, 2019
Thanks to clach04's help in pebble/clay#162
@mattrossman
Copy link

mattrossman commented Jul 19, 2019

@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!

kennedn added a commit to kennedn/clay that referenced this issue Jun 5, 2020
@kennedn kennedn linked a pull request Jun 5, 2020 that will close this issue
kennedn added a commit to kennedn/clay that referenced this issue Jun 5, 2020
…mulator

Resolves pebble#162 - data URI now loads in iframe
@jwise
Copy link

jwise commented Feb 9, 2021

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants