cubing / AnimCubeJS

▶️ Play around with a Rubik's Cube simulator.
https://animcubejs.cubing.net/animcubejs.html
MIT License
29 stars 10 forks source link

simulators are not visible #1

Closed bcube2 closed 9 years ago

bcube2 commented 9 years ago

Hi,

on http://molarmanful.github.io/AnimCubeJS/ I can not see the simulators on my PC (tried both FF 38 and IE 11), on mobile phone they work. On http://www.irbsystems.com/test2/rc/animcube_customization2.html I have no problem (working both FF, IE and mobile phone).

On my PC, I can easily see his AnimCube.html, but your cube.html is invisible.

Also, is that clean.css (and AnimCube.cfg) really necessary? "URL parameter value will be read instead of the .cfg parameter value." and clean.css is located in a gwt/clean directory (and it seems to be related to gwt stuff, not simulator stuff at all...).

P.S. when I download the website http://www.irbsystems.com/test2/rc/animcube_customization2.html (file - save as - complete webpage) and subsequently try to open AnimCube Customization - New Parameters.htm, the simulators are not visible. Why not? I can see that in AnimCube_data folder are different JS files than in here: https://github.com/molarmanful/AnimCubeJS

blonkm commented 9 years ago

It's because of a 404 on FF, strange. Chrome can find the file just find. 404 on: http://molarmanful.github.io/AnimCubeJS/AE36935EDCF07BC5D3A8A7EB084B5271.cache.js

Apparently Chrome is looking for another cache file: 7551EE39E21E6204DAB2374363B779A2.cache.js

bcube2 commented 9 years ago

"It's because of a 404 on FF, strange."

As I said before, IE 11 behaves the same, i.e. I don´t see Benjamin´s simulators, but I see Michael´s ones.

Awaiting responses about CSS, .cfg and downloading too :-)

molarmanful commented 9 years ago

Hmm, I can see the simulators fine in Safari... AnimCube.cfg is not exactly necessary, but it's useful when you have multiple simulators and you want to have certain parameters to be the same for all of them. Not too sure about the CSS... Still looking into it.

molarmanful commented 9 years ago

Okay, I added the the necessary cache.js files. Should be working now.

bcube2 commented 9 years ago

I can confirm I can see the simulators running on your webpage on both FF and IE now on my computer. Why the downloaded version doesn´t work (there are still invisible simulators)? In root there are cube.htm, cube_002 - 006.htm, bootstrap.css, folder cube_data, in which are AE36935EDCF07BC5D3A8A7EB084B5271.js, animcube.js and clean.css.

Oh, and there is obviously AnimCube JS Port Demo.htm

P.S. when I run those cube(number),htm, it gives me a big simulator...

molarmanful commented 9 years ago

Okay, I see what went wrong... First of all, download all of the files directly from Github. Do not change any file names.

Next, keep cube.html, animcube.nocache.js, clean.css, [long alphanumeric string].js in the same folder. You only need 1 cube.html file. Do not be surprised that the cube simulator is big; we will fix that later.

After, in your main file where you want your cube simulators, add an iframe HTML tag wherever you want your cubes to display. See index.html for examples. Iframes are basically embeddings of URLs, meaning that you only need to reference 1 cube.html file as long as you change around the URL parameters. You can also play around with the iframe styles to change height and width to your liking.

Also make sure that you reference files correctly when placing them in different folders (especially if you are using a .cfg file).

bootstrap.css is not necessary, but it's what I use to style the demo webpage and make it look nicer.

Hope this makes sense.

bcube2 commented 9 years ago

Thank you for your patiance, but I am asking something different. I didn´t even try to put your/Michael´s code into my wegpage yet. Instead, when I am viewing some page (let´s say http://molarmanful.github.io/AnimCubeJS/) and I want to view it also offline, I simply save the complete webpage (file-save as - complete webpage in FF). Now it should be viewable offline, shouldn´t it? Trouble is, when I want to view that downloaded webpage from url http://molarmanful.github.io/AnimCubeJS/, the simulators are not visible. Why is that so?

molarmanful commented 9 years ago

Hmm... I tried it too, and it doesn't seem to show the sims. Looking at the developer console, I don't see any errors thrown... Still looking into it.

blonkm commented 9 years ago

If you download a webpage to your file system it becomes a local file, accessed through the file protocol (file://). The web server supports query parameters given using ?x=y&x2=y2. The file URI scheme should support that too, but IE doesn't accept it. This means a file like \Desktop\AnimCubeJS-gh-pages\cube.html?buttonbar=1 can not accept the parameters (you simply see file not found).

I couldn't find a lot of info on bugs in IE regarding this.

https://tools.ietf.org/html/rfc1630 http://blogs.msdn.com/b/ie/archive/2006/12/06/file-uris-in-windows.aspx

I understand why this issue is closed, there's not much of a problem. If you want to have a web site you should certainly have a web server.

bcube2 commented 9 years ago

Michiel, I am trying to run it in FF, not IE (although in IE it doesn´t work either). So are you saying there is no chance how to run the simulators offline? For php I am using XAMPP, will it be working there? I won´t test it for 2 weeks in XAMPP, so I am asking instead.

blonkm commented 9 years ago

Here is a screen grab of Firefox 38.0.5 running the simulators from a local file, no web server. So FF can surely do this.

capture

bcube2 commented 9 years ago

Wait a second. Did you use this process? File-save as-complete webpage? Because I can't find index.html in downloaded files... I find AnimCube JS Port Demo.htm instead.

molarmanful commented 9 years ago

Judging from the URL, he downloaded the files directly from Github...

blonkm commented 9 years ago

@molarmanful That's right, I used 'download zip' from the home page. I don't know if it's ever useful to use 'save as webpage' unless there is really no other way. Browsers tend to change things in the code when you do that.

bcube2 commented 9 years ago

Ok, I couldn´t resist the temptation, so I tried to run it using XAMPP (because I use php files). Not only it works, but it also works perfectly :-)

Thank you molarmanful for easy steps (copy + paste) to follow for implementing it. Worst part was doing ctrl+c/v all over again (from java to JS) but it paid off :-)

It will be online on my webpages on 22th of July.

molarmanful commented 9 years ago

Alright, look forward to seeing it!

blonkm commented 9 years ago

Great, I will still develop my own solution, but not as frantically as before.

bcube2 commented 9 years ago

Molarmanful, don't expect much from my webpages. I only changed from java to JS without changing anything else (and putting one div with display:none into cube.html because of hosting advertisement). I plan to make the changes in both text and design too, but I will wait for a working WebGL simulator first. I am not even sure if I change from java to JS in other pages than on "main" 3x3x3 tutorial. This change is only temporary...

Still, I am happy that my main 3x3x3 tutorial is available to everyone again :-)