I created a JSON document for an OpenApi Restful service. I was wondering if there is anyway to load the json file without using an outsource website. Sorry if this is a dumb question im new to OpenApi.
Here is the html code;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>ReDoc</title>
<link rel="icon" href="favicon.png">
<style>
body {
margin: 0;
padding: 0;
}
redoc {
display: block;
}
</style>
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,700|Roboto:300,400,700" rel="stylesheet">
</head>
<body>
<redoc spec-url="https://api.myjson.com/bins/json" ></redoc>
<script src="redoc.standalone.js"></script>
</body>
</html>
I want to load the json file without the spec-url . <redoc spec-url="https://api.myjson.com/bins/json" ></redoc>
Yes, this can be done. Just place the input source in a folder that is not served from webpack, this can be found in your webpack config file.
devServer: {
contentBase: "./public/", // this
watchContentBase: true,
historyApiFallback: true
}
And add path in spec-url accordingly.
Related
Good day, I am having difficulties using PDFExtension to load PDF's directly into the viewer. I have omitted the markups extension for testing purposes. I have tried following the steps here to no avail:
https://forge.autodesk.com/blog/fast-pdf-viewingmarkup-inside-forge-viewer
https://forge.autodesk.com/en/docs/viewer/v7/reference/Extensions/PDFExtension/
instance.canvas.append(htmlViewer); Simply creates a div defined by htmlViewer
let htmlViewer = "<div id=forgeViewer></div>";
//The Viewer will be instantiated here
instance.canvas.append(htmlViewer);
let viewer, markup;
function initializeViewer(pdf) {
if (viewer) {
console.log('loading');
viewer.impl.unloadCurrentModel()
if (markup)
markup.hide();
viewer.loadModel(pdf, viewer);
return;
}
var options = {
env: "Local",
useADP: false
}
Autodesk.Viewing.Initializer(options, () => {
viewer = new Autodesk.Viewing.Private.GuiViewer3D(document.getElementById('forgeViewer'));
viewer.setTheme("light-theme");
viewer.start();
if (!pdf) return;
viewer.loadExtension('Autodesk.PDF').then( () => {
viewer.loadModel(pdf, viewer);
});
});
}
initializeViewer('//dd7tel2830j4w.cloudfront.net/f1635895094123x658226723587068400/sample.pdf');
The actual viewer itself gets initialized but I see an infinite loading loop. In the console (network) I get a 404 not found for this PDF. However, I can confirm that this URL is indeed correct and I have access to it. Furthermore, I have tried using several different URL's for this file. I cannot use a locally stored file, it must be fetched with a URL. Maybe this is due to a misuse of the env: in options? I am confused... this is pulled directly from the example linked above.
Any help would be appreciated, thank you so much!
Have you checked your browser's dev tools to see if there are any errors?
Here's a minimal Forge Viewer setup that can load a PDF natively:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/style.css">
<style>
body,
html {
margin: 0;
padding: 0;
height: 100vh;
}
#preview {
position: absolute;
width: 100%;
height: 100%;
}
</style>
<title>Autodesk Forge: PDF Demo</title>
</head>
<body>
<div id="preview"></div>
<script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/viewer3D.js"></script>
<script>
Autodesk.Viewing.Initializer({ accessToken: '' }, async function () {
const viewer = new Autodesk.Viewing.GuiViewer3D(document.getElementById('preview'));
viewer.start();
await viewer.loadExtension('Autodesk.PDF');
viewer.loadModel('/foo/bar.pdf');
});
</script>
</body>
</html>
Just replace /foo/bar.pdf with your own URL. Note however that if you try and load PDF documents from different origins, you might run into CORS problems.
I've just setup atom and installed p5.js packages.
it is running but canvas is not visible.
sketch.js
function setup() {
createcanvas(200,200)
canvas.style("visibility", "visible")
// put setup code here
}
function draw() {
// put drawing code here
background(0);
rect(100,100,50,50);
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>p5.js example</title>
<style>
body {
padding: 0;
margin: 0;
}
</style>
<script src="libraries/p5.js"></script>
<script src="libraries/p5.sound.js"></script>
<script src="sketch.js"></script>
</head>
<body>
</body>
</html>
on running it using atom editor the canvas is not visible on the browser screen
You have to capitalize the second c in createCanvas(width, height);
You can't use canvas.style("visibility", "visible"), so remove that line
3.For future reference, inspect the page and look at the console, I found both of these things from errors.
function setup() {
createcanvas(200,200)//on this line, capitalize the c in canvas
canvas.style("visibility", "visible")//remove this line
// put setup code here
}
Your html is all correct
#Hgbanana is correct. I thinks it would be better if you put your library scripts in the head tag to make sure the libraries load before the page. But it should work anyways.
So I have the following controller that maps to the same ThymeLeaf template:
#GetMapping(value="/nextStep/{id}")
public String nextStep(#PathVariable int id) {
return "nextStep";
}
#GetMapping(value="/xxx")
public String nextStep() {
return "nextStep";
}
If I navigate to /xxx, the page has my css applied. If I navigate to /nextStep/10 the template displays but there is no css applied.
The template is simple:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="https://www.thymeleaf.org">
<head>
<link rel="stylesheet" type="text/css" href="my.css">
<link rel="icon" type="image/png" href="favicon.png">
</head>
<body>
Hello world<br>
</body>
</html>
There are no exceptions thrown in this example.
I think i have the same problem, all pages load with css all right. but if i access localhost:8080/group/3 the page will come without css (even the pages was in the same directory).
#GetMapping(value = "/group/{id}")
I found a shortcut to avoid this issue:
#GetMapping(value = "/group-{id}")
In my case this works fine, i hope work on your too.
you need put CSS path like this
<link rel="stylesheet" type="text/css" th:href="#{/css/my.css}"/>
I am sorry, I am quite new in IT and I tried almost everything, I am frustrated that I am impossible to import correctly my .css file to my .html file. I looked on many other stackoverflow questions, for example: (1), (2), (3) and found no help. If I import my .css to html with <style></style> - it works, but with include file as "link href stylesheet" - it does not. I use Chrome browser Version 69.0.3497.100 (Official Build) (64-bit).
I tried to make html page with my openstreet map and that map has its own stylesheet included too. It not works because I can't include multiple css files to one html? I have .html file and .css file in the same folder. Why this: <link href='/styles.css' rel='stylesheet' /> is not working please?
My code(client.html):
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>The mapbox tutorial</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.1.1/socket.io.js"></script>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.49.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.49.0/mapbox-gl.css' rel='stylesheet' />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<link href='/styles.css' rel='stylesheet' />
</head>
<body>
<div>
<h1>MY new page</h1>
<div id="data">
Write me something: <input type="text" id="inputData">
<button id="myButRun">Send</button>
</div>
</div>
<div style="margin-left:10px; height: 500px; margin-top: 20px; width: 400px; " id='map'></div>
<script>
mapboxgl.accessToken = 'myPrivateKey';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v10',
center: [42.10, 57.14],
zoom: 11
});
map.on('load', function () {
map.addLayer({
"id": "data-update",
"type": "line",
"source": {
"type": "geojson",
"data": "empty"
},
"layout": {
"line-join": "round",
"line-cap": "round"
},
"paint": {
"line-color": "#faff00",
"line-width": 8
}
});
});
</script>
</body>
</html>
My code(styles.css):
body { margin:0; padding:0; }
#map{
border-style: solid;
border-width: 5px;
}
The / when using /styles.css indicates that the file is located in the web-root of the website. The web-root is the actual main directory served by the web-server for a configured website. When there's no web-server running, there's no actual web-root, from which the file can be read and deliverd to the browser.
In this case, where no web-server exists, the file was accessed directly from the local file system and using <link href='styles.css' rel='stylesheet'> will correctly reference the CSS file, which is located in the same directory as the HTML file.
I'm making a website with spring-boot & spring-security which prefers to supply freemarker as view. I don't know ftl much, and now I need use adminLTE's CSS and JS files in my ftl, but how?
<html lang="en">
<#assign basePath=request.contextPath>
<#macro head>
...
<script src="${basePath}WEB-INF/AdminLTE/dist/js/adminlte.min.js"></script>
<link src="${basePath}WEB-INF/AdminLTE/plugins/iCheck/line/line.css" rel="stylesheet"></link>
<script src="${basePath}WEB-INF/AdminLTE/plugins/iCheck/icheck.js"></script>
...
<#macro>
you can include css file by using <#include > tag,
place the stylesheet in the directory and use the
<#include "/{path to style sheet}/Styles.css">
and make sure your style sheet is inside the styles element:
<style type="text/css">
...
</style>
Example of this approach is
Test Template
<html>
<head>
<#include "css/test.css">
</head>
<body>
.......................
</body>
</html>
test.css
<style type="text/css">
body{background-color:#C5C5C0;}
*{font-family:Tahoma, Verdana, Helvetica, sans-serif;}
</style>
you can declare some param in code and use it to fill full path to css
// in java
params.put("htmlIncludePath", "classpath:/templates/pdfTemplates/include/");
...
// in ftl
<link href="${htmlIncludePath}manrope.css" rel="stylesheet">
physically files should be located in src/main/resources/templates/pdfTemplates/include
I use this simple solution.
I created a dedicated Get method for css-s.
#GetMapping(value="/css/{cssFile}")
public #ResponseBody byte[] getFile(#PathVariable("cssFile") String cssFile) throws IOException {
InputStream in = getClass()
.getResourceAsStream("/css/" + cssFile);
try {
return in.readAllBytes();
} catch (Exception e){
var error = new String("ERROR: css file (/css/" + cssFile + ") not found");
return error.getBytes();
}
}
Now I can reference the css file in the usual html way right in .ftlh file. Just need to put my file under resources/css/ directory.
<html>
<head>
<link href="css/general.css" rel="stylesheet">
</head>
<body>
...
Please also note that the suggested method (see other responses) with include statement, will produce a html file with full content of the corresponding css file not a link to css. So if you have heavy css files expect that their content will be literally included into html files received by clients.