Trouble hosting UI on local computer

[davethomaspilot]

I’ve been hosting the UI locally with an older version. I decided to move up to the UI.zip now on the support page, so I could exploit the new gpio capability in the newer firmware releases.

The host apache server is a raspberry pi zero w. Jessie Light Stretch.

Browser (on Windows 10) is Chrome.

I get this on line 372 (the last line) of home.js:

Uncaught SyntaxError: Invalid or unexpected token

The caller stack is pointing to the first line in the try block below (line 131 in home.js) (

insertScript( assetLocation + "js/app." + ( ver < 210 ? "js" : "jgz" ), function() {
		try {
			localStorage.setItem( "testQuota", "true" );
			localStorage.removeItem( "testQuota" );
			init();
		} catch ( err ) {
			if ( err.code === 22 ) {
				document.body.innerHTML = "<div class='spinner'><div class='logo'></div>" +
					"<span class='feedback'>Local storage is not " +
					"enabled on your device and is required by the application. " +
					"You may be in private browsing mode.</span></div>";
				return;
			}
		}
	} );

There was also a warning before the fatal error:

11:44:32.322 home.js:58 Resource interpreted as Stylesheet but transferred with MIME type application/x-gzip: “http://192.168.0.187/css/app.cgz”

Is the UI.zip file the same code that’s running on the Open Sprinkler web site?

[Samer]

Yes, the same code located in the UI.zip file is what’s being hosted on ui.opensprinkler.com.

The error you are getting is because a special file type is being used for the CSS which is CGZ (this is just a CSS file that’s been pre-gzipped). We allowed the Arduino version to support its own web files which needed to be as small as possible (plus reading headers and gzipping on the fly wasn’t really possible). This is why we are using this format. In order for your browser to understand this is gzipped, we have to tell it. This is where the steps in the documentation become important: https://openthings.freshdesk.com/support/solutions/articles/5000164006-using-a-different-server-for-ui-assets. Particularly under Option 2, Step 1, Part 3.

[davethomaspilot]

I followed all the steps on the web page. And, posted a few more to the relevant thread a couple of years ago.

https://opensprinkler.com/forums/topic/ui-assets-on-microsd/

So, the headers are enabled.

I’ll compare what happens when stepping through the java on the opensprinkler website, unless someone has a suggestion.

[davethomaspilot]

My /etc/apache2/apache2.conf file is attached:

These lines are at the bottom of it:

Header always set Access-Control-Allow-Origin "*"
AddEncoding x-gzip .cgz .jgz
AddType text/css cgz
AddType text/javascript jgz

[davethomaspilot]

So, for some reason the AddType or AddEncoding doesn’t seem to be working.

I hacked main.js to reference the .js and .css files instead of .gjz and .cgz files. Now, I get much farther before I get a different error:

(

index):1 Access to Font at ‘http://192.168.0.187/css/lato.fnt’ from origin ‘http://192.168.0.187:8080’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://192.168.0.187:8080’ is therefore not allowed access.

14:47:33.001 (index):1 This page includes a password or credit card input in a non-secure context. A warning has been added to the URL bar. For more information, see https://goo.gl/zmWq3m.

I’m thinking the “Header always set …” directive isn’t being recognized either.

Maybe the newer apache release needs the directives to be in a different file than /etc/apache2/apache2.conf?

I’m going to try researching that next.

[davethomaspilot]

I moved the Header set Access-Control-Allow-Origin to be between

<Directory /var/www/>

and

</Directory>

Now I’m up and running. Probably if I move the AddEncoding and AddTypes I can stick with the zipped version of the js and css–not that it matters on a pi, but I’ll check to be sure and post what I found out.

The way it worked on the older apache release (or maybe it was wheezy vs. Jessie Stretch Lite) was that the directories applied to ALL directories if not inside a directory block. Maybe that changed.

I’m going to try adding the ability to schedule a fixed off time instead of a duration. Turn on at sunset and off at 10:00 pm, for example. Which I think means the UI needs to have an field for the off time and the firmware needs to calculate duration based on each day’s sunset. There are some fragments for calculating the duration when sunset to sunrise is used for the duration, so I should have enough for “monkey see monkey do”.

This is for the deck, pathway, and front entrance lighting. Already I can control them using the same UI as I use for my sprinkler systems. But, for the lighting, I don’t want a fixed on time and it’s really not necessary to run them all night long (dusk to dawn IS currently supported).

If there’s an easier way than hacking a locally hosted copy, I’d appreciate a hint. I have no problem sharing the modified code, once I get it working (if anyone else is interested).

Thanks!

[davethomaspilot]

Confirmed that the only issue was where the apache directives were placed in the apache2.conf file. Placing them at the end of the file no longer works. Putting them inside the <directory> </directory> block for /var/www allows the UI.zip to be used unmodified.

[Samer]

Thanks for updating us and letting us know your underlying issue.

[Author]

Posts