I keep getting a "404 Not found" error. Is there anyone help me to read image file with JS?
Here is my code:
I'm using "makeImagePath" function on JS side to find image path, but it keep getting below error:
http://localhost:8080/topologyTool/reso ... switch.jpg 404 (Not Found)
In the function of makeImagePath, I tried below methods, but non of them worked.
Code: Select all
return "#{request.contextPath}/resources/gojs/images/" + icon;
return "../resources/gojs/images/" + icon;
return "../gojs/images/" + icon;
GojsController
Code: Select all
@Named
@SessionScoped
public class GojsController implements Serializable {
public void init() {
PrimeFaces.current().executeScript("init()");
}
}
Code: Select all
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
template="/WEB-INF/template.xhtml">
<ui:define name="title">GoJs Node Example</ui:define>
<ui:define name="head">
<h:outputScript library="goJs" name="release/go.js"/>
<script type="text/javascript">
function init() {
if (window.goSamples)
goSamples(); // init for these samples -- you don't need to call this
var $ = go.GraphObject.make; // for conciseness in defining templates
diagram = $(go.Diagram, "myDiagramDiv", // create a Diagram for the DIV HTML element
{
"undoManager.isEnabled": true // enable undo redo
});
function makeIndicator(propName) { // the data property name
return $(go.Shape,
"Circle",
{width: 8, height: 8, fill: "white", strokeWidth: 0, margin: 5},
new go.Binding("fill", propName));
}
function makeImagePath(icon) {
return "#{request.contextPath}/resources/gojs/images/" + icon;
}
diagram.nodeTemplate =
$(go.Node, "Vertical",
$(go.Panel, "Auto",
{background: "white"},
{portId: ""}, // this whole panel acts as the only port for the node
$(go.Shape, // the border
{fill: "transparent", stroke: "lightgray"}),
$(go.Panel, "Vertical", // everything within the border
$(go.Panel, "Horizontal", // the row of status indicators
makeIndicator("ind0"),
makeIndicator("ind1"),
makeIndicator("ind2")
), // end Horizontal Panel
$(go.Picture,
{width: 32, height: 32, margin: 4},
new go.Binding("source", "icon", makeImagePath)),
$(go.TextBlock,
{stretch: go.GraphObject.Horizontal, textAlign: "center"},
new go.Binding("text", "number"),
new go.Binding("background", "color"))
) // end Vertical Panel
), // end Auto Panel
$(go.TextBlock,
{margin: 4},
new go.Binding("text"))
);
diagram.model.nodeDataArray = [
{key: 1, text: "Device Type A", number: 17, icon: "switch.jpg", color: "moccasin",
ind0: "red", ind1: "orange", ind2: "mediumspringgreen"},
{key: 2, text: "Device Type B", number: 97, icon: "switch.jpg", color: "mistyrose",
ind0: "lightgray", ind1: "orange", ind2: "green"}
];
diagram.model.linkDataArray = [
{from: 1, to: 2}
];
}
</script>
</ui:define>
<ui:define name="content">
<f:metadata>
<f:event type="preRenderView" listener="#{gojsController.init()}" />
</f:metadata>
<div class="p-grid">
<div class="p-col">
<div class="card">
<h4>Empty Page</h4>
<div id="myDiagramDiv" style="border: solid 1px black; width:400px; height:400px"></div>
</div>
</div>
</div>
</ui:define>
</ui:composition>