How to insert trigonometrical shape in webpage? - javascript

I am working a project in which I have to insert thousands of trigonometrical shape in a webpage. Basically I'm working on a project of converting an ancient book in html. But the problem is- drawing a svg in Adobe illustrator or in any software is time consuming and managing thousands of svg shape in one html page seems very difficult for us. I have searched a lot in stack overflow to draw a shape quickly and I found this library which convert latext into svg which seemed to be a great solution for us. See a live demo here. We simply create a shape in Mathcha and copy the latext of the shape and insert it in our html page.
But the problem is when we import the tikzax Library in the head of our html page and insert the latext code of that shape (as instructed in the documentation) in the body like this:
<script type="text/tikz">
\begin{tikzpicture}
\draw (0,0) circle (1in);
\end{tikzpicture}
</script>
we can't get the ouptut. It only shows a blank html page . The latext code does not effect in any part of the html page. In short we are unable to render the latext in html. Can someone please explain how to render these latext into svg on a webpage. we are unable to find a way to get of it.
Can someone please explain how to render these tikz latext into svg format in a webpage ?
I've attached the screenshots of the html code and the output of it in the chrome browser.
Screenshot of Code:
Output of the Code in Google Chrome (Blank page) as I have told:

I tried to setup the example and ran into two issues. I'll explain how to solve those. However, before you do this, try opening your own example again. After I fixed the issues, I went back to look more closely at the problems, but.. it worked. There is a small chance that the maintainer of the files adjusted the CORS-Headers just while I tried this out - so maybe your problem solved itself. In case it doesn't work for you just like that, here is how I solved the initial problems:
The library doesn't allow requests from other domains, so you can't just include the JS file from tikzjax.com. To solve this, you have to download the source files and put them in the same folder. The js file itself is not enough, you have to download these files:
https://tikzjax.com/v1/tikzjax.js
https://tikzjax.com/ef253ef29e2f057334f77ead7f06ed8f22607d38.wasm.
https://tikzjax.com/7620f557a41f2bf40820e76ba1fd4d89a484859d.gz
Then change your script tag to that local js file: <script src="./tikzjax.js">
The script uses fetch to get other files, and this is not working, when opening the page with the file:// protocol (you'll get this error message in the console: Fetch API cannot load file:///ef253ef29e2f057334f77ead7f06ed8f22607d38.wasm. URL scheme must be "http" or "https" for CORS request.
So you have to setup a local webserver to show the page on e.g. http://localhost:8080. If you're comfortable with the command line, you can use the npm package http-server for such cases. If you haven't installed npm and/or node, you can install it from here (npm is installed with node). Then run the command npm install -g http-server. Then navigate to the folder where your html and js files are (in the terminal) and execute http-server. This will setup the server and the circle should render there.

Related

VS Code going crazy not let me open my projecr

When i open my project through vs code live server it is perfectly fine and when i directly open that same project through html file it is showing with some css missing(Not all css is missing mostly pictures and padding) sorry for my bad english
I don't even know what to try help me out i'm a newbie
Can you be more specific pls? Mostly it looks like a relative path issue in your CSS and image code. If you can paste your code (part of) it will be helpful. Mainly when you use a live server your HTML is served via that server but when you open the .HTML file directly it is just getting loaded from your filesystem.
The most common mistake is using root in the path. See the following example.
<link rel="stylesheet" href="/style.css">
When this is loaded from the live server it is loaded from the sam folder where your .HTML is present because the "root" of the server is that folder but when you open it directly your harddisk's root becomes the root (e.g. in windows c:) and of course, your file is not there.

How to display interactive graphics from another website?

For fun, I'm trying to copy the source code of entire websites into an .html file and run it locally from my Desktop (not public). While mostly everything loads like it appears on the original website, I am having trouble displaying the actual content of interactive graphs.
For example, the NOAA's Global Monitoring Laboratory displays an interactive version of the Keeling's Curve, which features two graphs that can be manipulated from the bottom (timeframe), hovered over to display figures, etc.
It should look something like this:
But instead, my local file looks like this:
As you can see, the slope/plot itself is missing, as well as some of the other features below and to the side. What am I doing wrong? Obviously, the website's actual stylesheet has shortened file paths (e.g. /gmd/css/gmd.css), so I made sure there were direct links in the local HTML file (e.g. https://esrl.noaa/gov/gmd/css/gmd.css).
I copied the entire HTML code in the Elements tab of the Inspect Element console (everything after <!DOCTYPE html>). Is there something else I should add to the local file?
Update: There was a long list of errors in the console, but only four actual lines of faulty code. Both the errors and the faulty code are shown below:
Are you loading the HTML directly from local disk? In general you can't do XMLHttpRequests for local files.
Your best option is to spin up a small HTTP server and load the content from there. Two good options are Python's http.server:
python -m http.server
or node's http-server:
npm install --global http-server
http-server
The first script tag(highlighted) in error contains a typo(/gov instead of .gov). It should be:
https://esrl.noaa.gov/gmd/js/dygraph.min.js
instead of
https://esrl.noaa/gov/gmd/js/dygraph.min.js

<!DOCTYPE html> in JS file

I am referencing two JS files in my map.HTML header. Chrome console gives
Uncaught SyntaxError: Unexpected token <
Here is why I'm confused. When I click on the Chrome Console error message, it takes me to the Sources tab. Under Sources, it puts me on the relative JS tab, and shows code starting with < !DOCTYPE html> then continues with a ton of code that is not in my map.html file or JS file. Presumably this is generated when the JS is read?
The two JS files are:
https://github.com/socib/Leaflet.TimeDimension/tree/master/dist
https://github.com/calvinmetcalf/leaflet-ajax/tree/gh-pages/dist
I am opening map.HTML locally with Chrome using a simple python server using a batch file (python.exe -m http.server).
I am sure this is very basic, but it's confusing me because I reference plenty of other JS files both online and locally and I don't get this error.
Thanks
If you try https://github.com/socib/Leaflet.TimeDimension/blob/master/dist/leaflet.timedimension.min.js in your browser, you will get an HTML page.
If you try https://raw.githubusercontent.com/socib/Leaflet.TimeDimension/master/dist/leaflet.timedimension.min.js you will get what seams a source javascript file. But your browser may also consider it text/html, because that's what github sends in content-type header.
You can use third party sites which will serve files with appropriate content-type header, (example: https://rawgit.com/socib/Leaflet.TimeDimension/master/dist/leaflet.timedimension.min.js ).
In the future, try to do more research before posting here, otherwise a lot of people are going to downvote your questions, and even insult you.
A simple Google search for the differences between html and javascript may be a good start. The first step would be to remove those doctype lines. They mean nothing in Javascript. Just like the word granola has no meaning in Japanese. Different languages.
However, looking at your code, I don't see any DOCTYPE text in your javascript. In order to really debug this, you're going to want to open your webpage (html) in a browser (I recommend Chrome) and press F12 to open the developer tools. Go to the console and trace the error back through all of the files to find the origin.
In order to check and make sure that you're trying to pull javascript files and not html, take all the src urls you're using and paste them in a browser. If you land on a webpage, that url will serve up html, not javascript like you want. If you get a wall of text, you're probably referencing it correctly.
Correct: https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.js
Incorrect: https://github.com/socib/Leaflet.TimeDimension/blob/master/dist/leaflet.timedimension.min.js
Hopefully this helps before this question gets deleted or put on hold. Also notice that people are going to downvote me for actually answering and trying to help.
You can't directly reference code stored in a github repo like you're trying to.
The URLs you're listing aren't javascript files; they're github webpages. That's why they contain HTML doctypes and code you don't recognize -- it's the github website code.
You can get the URL for the actual javascript files by clicking the "raw" button at the top of any of those pages (after selecting a specific individual file -- the urls you gave were for directories, not individual files.) For example:
This is an HTML file: https://github.com/socib/Leaflet.TimeDimension/blob/master/dist/leaflet.timedimension.min.js
This is the raw javascript:
https://raw.githubusercontent.com/socib/Leaflet.TimeDimension/master/dist/leaflet.timedimension.min.js
(That said, I don't believe it's a good idea to treat github like a CDN; usually you would use that purely as a repository and host the actual files in use elsewhere.)

Trying to use jQuery for the first time and cannot download or link it?

I went to the jQuery download page and tried to download the uncompressed version of jQuery, when I left clicked the bottom left download button it seemed to start to download.
Then a dial appeared, which asked for permission to download the file, after accepting, it comes up with the following error:
Error: 'document' is null or is not an object
Code: 800A138F
Origin: Error at the time of running Microsoft JScript
Then tried right clicking the link and using the save as option to save it to the desktop under the filename jquery.js.
However, this failed to load jQuery as well and the same error appears when I try to link it to my website.
This is the filepath I'm using:
C:\Users\Mafe Cardozo\Desktop\jquery.js
And the actual jQuery file that I'm writing the code in to the html file as well is also in the same directory, assuming both links be written in the <head /> element(?)
Just use the CDN which you link to your html file by this line of html in your head tags.
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
This will give you the latest version of the minified jquery. You can choose uncompressed or versions here.
There are many choices for CDNs such as Google. CDNs are from the web and are not local.
Alternatively, download the source here and then save it in the same folder of your html file. This will save the file locally. Then link it like so:
<script src="jquery-file-name"></script>
If you will have access to the internet when you are needing to use Jquery, then just use a JQuery CDN. That way you don't have to worry about downloading the whole library to your computer and making sure it is in the right spot.
Go to a site like this, click on the "copy" tag on the right, and copy the whole script element. Then paste that into your head/end of your body. For more information, look at the following posts about accessing the Jquery library.
Microsoft CDN for jQuery or Google CDN?
Benefits vs. Pitfalls of hosting jQuery locally
Just to add to the other answers, you are trying to access the js files with the https protocol, and apparently, it doesn't work. Just remove the https from the url or change it to http (https://code.jquery.com/jquery-2.2.4.js -> http://code.jquery.com/jquery-2.2.4.js) and it should work.

D3.js starter(noob): How to get a D3 example from bl.ocks.org/mbostock working?

I'm completely new to JavaScript and D3.js. I have done some work in recent days, like making appropriate json object for the graph, and wanted to know how to get this example running in particular. Any direction to appropriate links would be great, though I would prefer to get an answer in the form of any missing tags or any details I need to take care of.
Note: I have to run it locally, not on server-client model.
Update: I have done it a lot of times what Bill answered, it didn't work. So I tried again and I opened the console in browser to check for any errors. Got this:
Failed to load resource: file://d3js.org/d3.v3.min.js
net::ERR_FILE_NOT_FOUND
index.html:23 Uncaught ReferenceError: d3 is not defined
The point is that you cannot access files on your computer from javascript using file:// (think that people could access all your file...).
So you have to use <script src="address/d3.js"></script> here, address correspond to the address of your server (http://domain.com or http://localhost) or the relative path.
For example, you can download d3.js next to your html file (same folder) and just type <script src="d3.js"></script>
Hope this helps
You can do the following:
Go to https://gist.github.com/mbostock/4062045
Click on the Raw button next to index.html
Copy everything and paste it into a file on your computer called index.html
Go back and click on the Raw button next to the .json file
Copy everything and paste it into a file on your computer called miserables.json (make sure this file is in the same folder as index.html)
Double click on index.html, it should open in your browser

Categories

Resources