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
Related
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 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
I want to write a script with these requirements:
Can be added using a <script> tag to a web page
Uses NPM packages
Easy to build for production
It will invoke a function doSomething() on being loaded
In the past I've only created full front end or full back end apps using javascript, never a library like this. Is there a specific standard for this? I don't need to deploy to NPM. I just need to be able to run yarn build or something and have it be compressed to a file that I can then deploy and link to.
I am trying to create a Javascript component that replaces the static HTML element Demo v0.1 into the shortened GitHub Commit Hash, e.g. 6da724d
<div className ="demo-version">
Demo v0.1
</div>
How to write the javascript code with git rev-parse HEAD to make it work?
The most correct way IMO would be to separate coding (in git) and deploy phases. During deploying you can do whatever you want with your code (replace strings, e.g) and the modified code doesn't clutter your repository.
If you insist on having the hash in source files in the worktree you could use clean/smudge git filters to do keyword substitution.
You can use a bash script to launch your application and pass an environment variable that will contain the git commit hash.
For example, an easy script for React could be
#!/usr/bin/env bash
set -e
HEAD_GIT_COMMIT="$(git rev-parse HEAD)" yarn start
Then since React uses node as the development server, you can access the env var via process.env.HEAD_GIT_COMMIT, although you might have some config to write depending on the bundler you are using, or CRA.
Depending on how you are deploying your application on different servers, you might need to adjust the script to make it work with different environments, but you get the idea.
I am not that good at computers but am trying to use JSDoc for one of my projects,
The tutorial to get it up and running is here
http://usejsdoc.org/about-jsdoc3.html
I have downloaded the program from github, but now do not understand what I have to do. I have a bunch of files in a folder and dont know how to get it actually running for my project.
Could someone please give me a step by step instruction on how to actually get JSDoc working, how do I set it up, how do I use it etc.
I know this may be mundane to some of you, but hey we all gotta start somewhere right?
Well, are you using windows or GNU/Linux?
First, you have to follow the default tags to markup your source code, identifying your classes, methods, parameters, etc...
After that, you download the file here: https://github.com/jsdoc3/jsdoc
Extract it and then go to folder jsdoc-master.
Inside it, you have a script called jsdoc (with no extension). Only you have to do is execute it pointing the whole path to your .js file you want to create a documentation like this: ./jsdoc your_class.js
Then, in a couple minutes you'll have the output inside the 'out' folder. Open the .html file and bang! You have your documentation working pretty good.
Right here you can find some common tags to use in your code (as comments): http://usejsdoc.org/
This solution is for Unix based system. But, there is another one using nodejs (that you can run with windows, Linux, mac, etc...). First, download the nodejs here: http://nodejs.org/
Then go to this website to take a look at the package jsdoc: https://npmjs.org/
Then, go back to your terminal (in any operating system after installed node) and type: npm install -g jsdoc
The option -g means globally, so you have inside the main folder of your node packages and they are available for whatever project you have and you don't need to install it again and again...
Finally, you can just use this command: jsdoc path/to/your/file.js
And that's it! I hope it helps you.
Once you've extracted the file you downloaded off of github, navigate within the folder and run in a terminal:
./jsdoc
with the options you want.
If you want to display the help menu
./jsdoc --help
If you want to install the program on your system, assuming a mac or linux machine, use root user or sudo:
npm install --save -g [~/Downloads/jsdoc-3.2.2 or your path to the downloaded extracted files]