I would like to load multiple files with OpenJSCAD.
I tried 1 without any success.
I'm using OpenJSCAD with Firefox on Ubuntu 18.04. I tried both the offline and online versions.
I have improved the section on include of the Userguide
You should be able to try it out with any of the three examples mentioned by putting the files of the examples in a folder and then drag and drop to OpenJSCAD
The result should be as in https://openjscad.org/#examples/platonics
Welcome in a world where complicated things are easy and easy things are complicated!
The include command of OpenJSCAD will search for include file relatively to the URL of the including file and there are limits to this when you try to drag&drop files via the browser and the behavior seems to be much browser dependent.
So it would be easier if your "workspace" with the file you'd like to use would reside within the webservice that the OpenJSCAD solution offers.
In the examples section of OpenJSCAD there seems to be one use of the "include" statement at this time see:
https://www.openjscad.org/examples/globe.jscad
You can try it out via
https://www.openjscad.org/index.html#examples/globe.jscad
Please note that how on refresh you get an error message:
<html><head>
<title>404 Not Found</title>
</head><body>
<h1>Not Found</h1>
<p>The requested URL /openjscad.jscadplatonics/maths_geodesic.jscad was not found on this server.</p>
<hr>
<address>Apache/2.4.25 (Debian) Server at www.openjscad.org Port 443</address>
</body></html>
To get the same effect locally you'd have to create a sister directory of "examples" in your local installation. This will not work if you call "index.html" with a file url
file:///usr/local/lib/node_modules/#jscad/openjscad/index.html#examples/globe.jscad
To show the principle of a "workspace" directory i have created a dockerized OpenJSCAD version which is available at:
It's also available via Docker Hub so you can simply try it out by running the command:
docker run --publish=8080:8080 --name openjscad bitplan/openjscad:latest
You should now have an OpenJSCAD running in a docker container on your computer which you can try out with e.g.
http://localhost:8080/
and specifically
http://localhost:8080/index.html#examples/globe.jscad
http://localhost:8080/index.html#examples/platonics
to see the include usage.
Now we need to apply this principle to the workspace directory which is prepared in the docker container and ready to be mounted locally.
To get this working some rules need to be followed which are currently discussed at:
https://openjscad.nodebb.com/topic/6/dockerized-openjscad
Mount your workspace directory
docker run \
--publish=8080:8080 \
--name openjscad \
--volume $HOME/openjscad/workspace:/openjscad/packages/web/examples/workspace \
bitplan/openjscad:latest
now the file from your workspace should be available via the corresponding url.
To try things out you might want to copy the platonics folder from
https://github.com/jscad/OpenJSCAD.org/tree/master/packages/examples/platonics
to your workspace folder and try the access with:
http://localhost:8080/index.html#examples/workspace/platonics
now you should be all set to use
include()
as requested
Related
I built an Edge Ledger website, did the HTML and CSS styling using VS Code. When I run it with live server it works fine, the CSS styling I did is implemented but if I just go to the root folder and open the index.html file without using VS Code to run it, it just shows the HTML element without the styling. Can anyone help?
I tried opening the index file without VS Code, it just loads the HTML file without the CSS.
When I run this with live server on VS Code the CSS styling I did is applied to the index.html page
What could be the problem?
Explanation
The issue with opening an HTML file directly is that now your computer's own hard drive is the "server" serving the files. As such, the browser asks your computer for your CSS files at the directory /css, the / indicating the root directory of your whole file-system.
For your computer, there's a couple of issues with that. Routes starting with / are usually used on UNIX-based systems (think of MacOS or Linux distros like Ubuntu), but since you're using Windows, that type of a directory or path won't resolve to anything. And even if you were using MacOS or Linux, you most likely would not have your CSS files in /, as that would be like having them right under C:/ in Windows.
This is the reason why when serving the HTML files over a proper server, the / path is correctly resolved, as there / indicates the root of your web server's directory, and not the root of your file system.
Solution A - Local file server
If you'd like to keep your code as-is and you have either Python or Node.js installed locally on your machine, you can use either of them to spin up a lightweight HTTP server to act as a static file server.
# Python 2.x
python -m SimpleHTTPServer
# Python 3.x
python3 -m http.server
# Node.js with npm
npx serve
Now visiting http://localhost:8080 (or whatever port your terminal tells you), should serve up your HTML file and correctly resolve the CSS asset paths.
You can find a large list of other static servers for different languages here: https://gist.github.com/willurd/5720255
Solution B - Relative file paths
Another solution is to remove the / prefix from your asset paths, making them relative paths to the index.html file. Note that this could lead to other unexpected scenarios in the future, for example if your index.html file is also served for an /about page, then the CSS asset paths would now resolve to /about/css instead of /css (as the css/... path is now relative to the current path and will be appended to it). So even though this is a cheap and quick fix locally, it's not considered the best practise.
I had my react project working correctly in localhost. Then, I decided to deploy it to github pages and it worked perfectly on the server too. Now, I'm trying to work on it again on localhost but it is not showing correctly. For some reason, photos are not loading and some css is not working correctly and after compile it in PowerShell says this:
Compiled successfully!
You can now view myportfolio in the browser.
Local: http://localhost:3000/myportfolio
On Your Network: http://192.168.56.1:3000/myportfolio
Note that the development build is not optimized.
To create a production build, use npm run build.
So if I go to my GitHub pages it is loading correctly but not in localhost (running npm start).
Any suggestion? Thank you in advance and let me know if you need more clarification
I did clone your repositories and found these problems:
You have been directly imported many third-party js given their relative path in the index.html. That doesn't work. You should append %PUBLIC_URL% before them. For e.g.
<script src="%PUBLIC_URL%/js/jquery.flexslider.js"></script> and similary for other script files.
But even this is not the best that you can do. You must not try to use jquery or third party js in a React App. Also, make it a part to install the related JS though npm and make them a part of the package.
You'll have to use <img src={require('/public/images/background.png')}... (Btw, the image name on your gh-pages is different. It's logo.png there)if you want the webpack to compile and make it a part of your project. Also, the path must reside within src and not public folder.
Other errors are are related to keys. Whenever you're mapping and iterating through a list in react you must specify a unique key.
I am trying to create a JavaScript pacman game, but whenever I try and load my script files or images, I get the error:
The browser I'm using is chrome, and the files are stored in the same directory. I am running CHROME OS, so I can't just go into files and edit an existing flag.
Same for the images, except the file name is different.
Does anyone know why I am getting an error Access Denied, or how I could test the files?
The files are loaded using this format
<script src="Scripts/gamescript.js"></script>
<body>
<div class="game" id="game">
<img src="/Images/ghosts/red.png" />
</div>
</body>
Per request, here is my file tree
/Javascript_Pacman_Game/
index.html
/Styles/
stylesheet.css
/Scripts/
gamescript.js
myCustomLibrary.js
setInterval.js
/Images/
/Ghosts/
red.png
blue.png
pink.png
orange.png
scared.png
/GameElements/
board.jpg
bloop.png
superBloop.png
The problem isn't spelling or file permissions, and I can't run a local host because of Chrome-OS.
Try installing Web server for Chrome, telling it to serve files from your /Javascript_Pacman_Game folder, and testing your app at http://127.0.0.1:8887/
If you have to handle this from chromium OS (specially with dual boot cloud ready), follow the steps
Step 1:
Go to the shell prompt Ctrl + Alt + T on shell open the chrome_dev.conf
$ sudo vi /etc/chrome_dev.conf
The sudo default password would be 'chrome', The file may be write protected follow these steps incase if you stuck in step 1
$ sudo cp /etc/chrome_dev.conf /usr/local
$ sudo mount --bind /usr/local/chrome_dev.conf /etc/chrome_dev.conf
$ sudo vi /etc/chrome_dev.conf
Step 2:
Once you open up the file write --allow-file-access-from-files on top of the file
Step 3:
Restart the UI (if you are using windows dual boot press CTRL + ALT + F2) from dev shell
$ sudo restart ui
Once its restart the changes will get affect in chromium OS chrome, to check type chrome://gpu on your chrome browser
Under command line Argument you can find argument options.
You really should be running a local server. Apache, IIS, etc. Than you can run off localhost and have no issues.
BUT if you really want to run off the file system, you need to start up chrome to allow it.
You need to set --allow-file-access-from-files
http://www.chrome-allow-file-access-from-file.com/
It sounds like your permissions have been edited (or defaulted) to restrict your current user from accessing those files.
I managed to reproduce this error by creating the same file structure you have and then
right clicking red.png > properties > security > edit...
then denying access to this file from my current user. It seems that if you deny access via the directory you get a File not found error instead since the browser isn't even able to navigate to the directory in the first place.
Try checking your individual file permissions. If this is a default file permissions issue you may want to ask about how to fix that on a different forum.
The error is from your spelling, the first one you said
gamescript.js
and you called it as
script src="Scripts/gamscript.js"></script>
Check your spelling, you did not include "e"
Use Chrome Dev Editor as your IDE, then you can just hit the run button in the top left.
You could also use this Server.
javascript doesn't have access to the filesystem of a computer for security reasons do
<script src="Scripts/gamescript.js"></script>
How to add WebODF to site on localhost?
I tried to save the webpage and opened in the browser but it looses formatting and everything is messed up.
I got this from the link you gave actually:
How to get WebODF Go to WebODF.org and see if there is already a
version meeting your needs
Search for it directly in your app store
Or download the sourcecode of WebODF and create your own application with it.
Here's the link to the source code: https://github.com/kogmbh/WebODF/archive/master.zip
Update
Well, you're lucky, since I use a Linux distribution that is based on Ubuntu. Here are the steps to install:
Creating webodf.js
webodf.js is compiled by using the closure compiler. This compiler
compacts all JavaScript files, so that they are smaller and execute
faster. CMake is used to setup the buildsystem, so webodf.js can be
created like:
sudo apt-get install cmake cmake-gui sudo apt-get install git git clone https://github.com/kogmbh/WebODF.git webodf mkdir build cd
build cmake ../webodf make webodf.js-target
These commands do not need the installation of any program
You can copy the commands above (in italic), and paste them in the Terminal (CTRL+ALT+T), if everything runs successfully, you should find the folder build in your home directory. Open it up, you should find the folder webodf... Again, open it up, there, you should find webodf.js file or something like that... Put it in the same directory as your HTML file and at this to your <head> tag:
<script src = "webodf.js" type="text/javascript" charset="utf-8"></script>
You can then use WebODF as described here.
Update 2
I believe you only need the following programs : git and cmake, anyway, if you need any other, just install it, there are many instructions online.
To load a file use this JavaScript:
var odfelement = document.getElementById("odf");
/*
you should have a container with the id "odf"
For exmaple a <div>
*/
odfcanvas = new odf.OdfCanvas(odfelement);
odfcanvas.load("myfile.docx"); // the filename (don't forget the extension)
And here is a container for our document, here we use a div with the name "odf"...
Using a container isn't essential, for example the odfelement variable in JavaScript could have just been our body like : var odfelement = document.getElementsByTagName('body')[0];, but results in cleaner, bug-free code... In addition, I only assume that you could do that, so keep on the safe side and use the former way.
<div id="odf"></div>
Note
Don't forget to add webodf's script like I said before:
<script src="webodf.js" type="text/javascript" charset="utf-8"></script>
The ease of creating and deploying a simple WebODF editor has been drastically improved in the 0.5 release, and no longer requires downloading and compiling from source.
Information about the new Wodo editor component can be found at: http://webodf.org/news/2014-06-30.html
Usage instructions are included in the downloadable archive, or can be viewed online at: https://github.com/kogmbh/WebODF/blob/master/programs/editor/HOWTO-wodotexteditor.md
I've been working on an app which will feature a Timelinejs (open source js library) element on the client side. I copied the Timelinejs library into my public/javascripts/ directory of my app. Then I linked it in my html header. When I serve my app up locally everything works fine with the timeline. However, I noticed that when I deployed my app to Heroku it wasn't loading my timeline. Using chrome js console I discovered that it didn't find my files in the public/Javascripts/Timelinejs folder. Using the Heroku run bash command I discovered that none of my Timelinejs files were present in the file structure, although an empty Timelinejs directory was present. Is there any command or configuration I need to specify to get these files to my Heroku deployment?
Heroku has a readonly file system. The directory where you can write are ./tmp or ./log. You can't write inside the public folder.
That's because of how they manage their dynos and the way to scale them. If you want to store something, use the ./tmp or, recommended, a s3 bucket. (as I presume 'tmp' stands for 'temporary' :D)
More info here: https://devcenter.heroku.com/articles/read-only-filesystem