The webVR extension can't be load.
Code:
var options = {
"docid" : docs[0].path ,
env : 'Development',
extensions:[
'Autodesk.Viewing.webVR',
]
};
var viewercon = document.getElementById('viewercon');
viewer = new Autodesk.Viewing.Private.GuiViewer3D(viewercon, {}});
Autodesk.Viewing.Initializer(options,function(){
viewer.initialize () ;
viewer.loadModel (options.docid) ;
});
viewer3D.js version 2.12
Related
I tried to run the gulp to covert SCSS to CSS，the gulp is working wihout any error but there aren't have any css files output to the target folder, I also tried to change the output path but it still didn't work，and my code is below :
// gulpfile.js
var gulp = require('gulp');
var sass = require('gulp-sass')(require('node-sass'));
var autoprefixer = require('gulp-autoprefixer');
var sourcemaps = require('gulp-sourcemaps');
var plumber = require('gulp-plumber');
var browserSync = require('browser-sync').create();
var notify = require('gulp-notify');
var sassLint = require('gulp-sass-lint');
var styleLink = {
sassLink: 'src/**/*.(scss|sass)',
OutputLink: '../css'
}
var browserSyncLink = {
root: '../',
watchHtml: '../*.html',
watchJS: '../*.js'
}
// notify
function showErrorNotify(error) {
var args = Array.prototype.slice.call(arguments);
// Show notification
notify.logLevel(0);
notify
.onError({
title: '[' + error.relativePath + '] Error',
message: '<%= error.messageOriginal %>',
sound: 'Pop'
})
.apply(this, args);
// Keep gulp from hanging on this task
this.emit('end');
}
// sass task
function sassTask() {
return gulp.src(styleLink.sassLink, { sourcemaps: true })
.pipe(sass()) // compile SCSS to CSS
.pipe(autoprefixer())
.pipe(gulp.dest('./', { sourcemaps: '.' }));
}
function browserSyncServer(cb) {
browserSync.init({
server: {
baseDir: browserSyncLink.root
}
})
cb();
}
function browserSyncLoad(cb) {
browserSync.reload();
cb();
}
function sassLinkTask() {
return gulp
.src(styleLink.sassLink)
.pipe(
plumber({
errorHandler: showErrorNotify
})
)
.pipe(sassLint())
.pipe(sassLint.format())
.pipe(sassLint.failOnError());
}
function watchTask() {
gulp.watch('../*.html', browserSyncLoad);
gulp.watch(['src/**/*.+(scss|sass)', '../js/*.js'], gulp.series(gulp.parallel(sassTask, sassLinkTask), browserSyncLoad));
}
exports.default = gulp.series(gulp.parallel(sassTask, sassLinkTask), browserSyncServer, watchTask);
when I ran this code i alos didn't get any error.
It seems no error..
Could anyone please help me ? Thanks.
and please excuse my poor English...
In your watchTask you have this:
src/**/*.+(scss|sass) note the + sign before the alternation.
But in your styleLink variable you have:
var styleLink = {
sassLink: 'src/**/*.(scss|sass)',
OutputLink: '../css'
}
Change to sassLink: 'src/**/*.+(scss|sass)',
I implemented devextreme to my react project.I'm using file manager system and I'm using devexpress for create system provider with my asp.net project.
I have an issue.
When i try to upload any file I'm getting and error.Download,move,copy is working very well.But i cant upload any file.
File uploaded succesfully my temp folder but then doesnt move to my real path.How can i fix this.Devexpress version 20.1
public object FileSystem(long id, FileSystemCommand command, string arguments, HttpRequest Request)
{
var path = Path.Combine(HostingEnvironment.ContentRootPath, "../files/Images/", id.ToString());
var config = new FileSystemConfiguration
{
Request = Request,
FileSystemProvider = new PhysicalFileSystemProvider(
path,
(fileSystemItem, clientItem) =>
{
if (!clientItem.IsDirectory)
clientItem.CustomFields["url"] = GetFileItemUrl(fileSystemItem, Request);
}
),
//uncomment the code below to enable file/folder management
AllowCopy = true,
AllowCreate = true,
AllowMove = true,
AllowDelete = true,
AllowRename = true,
AllowUpload = true,
AllowDownload = true,
AllowedFileExtensions = new[] { ".txt", ".pdf", ".doc", ".docx", ".xls", ".xlsx", ".png", ".jpg", ".jpeg", ".gif", ".csv" }
};
var processor = new FileSystemCommandProcessor(config);
var result = processor.Execute(command, arguments);
return result.GetClientCommandResult();
}
Here is the front end code
import React from "react";
import FileManager, { Permissions } from "devextreme-react/file-manager";
import RemoteFileSystemProvider from "devextreme/file_management/remote_provider";
import { Popup } from "devextreme-react/popup";
let remoteProvider = new RemoteFileSystemProvider({
endpointUrl: "https://myapiurl.com.tr/api/FileManager/FileSystem/121",
});
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
currentPath: "Widescreen",
popupVisible: false,
imageItemToDisplay: {},
remoteProvider: new RemoteFileSystemProvider({
endpointUrl: "https://myapiurl.com.tr/api/FileManager/FileSystem/121",
}),
};
this.displayImagePopup = this.displayImagePopup.bind(this);
this.hideImagePopup = this.hideImagePopup.bind(this);
this.onCurrentDirectoryChanged = this.onCurrentDirectoryChanged.bind(this);
}
displayImagePopup(e) {
this.setState({
popupVisible: true,
imageItemToDisplay: {
name: e.file.name,
url: e.file.dataItem.url,
},
});
}
hideImagePopup() {
this.setState({
popupVisible: false,
});
}
onCurrentDirectoryChanged(e) {
this.setState({
currentPath: e.component.option("currentPath"),
});
}
render() {
console.log(remoteProvider);
return (
<>
{this.props.investment ? (
<div>
<FileManager
currentPath={this.state.currentPath}
fileSystemProvider={remoteProvider}
onSelectedFileOpened={this.displayImagePopup}
onCurrentDirectoryChanged={this.onCurrentDirectoryChanged}
>
<Permissions
create={true}
copy={true}
move={true}
delete={true}
rename={true}
upload={true}
download={true}
></Permissions>
</FileManager>
<Popup
maxHeight={600}
closeOnOutsideClick={true}
title={this.state.imageItemToDisplay.name}
visible={this.state.popupVisible}
onHiding={this.hideImagePopup}
className="photo-popup-content"
>
<img src={this.state.imageItemToDisplay.url} className="photo-popup-image" />
</Popup>
</div>
) : (
""
)}
</>
);
}
}
export default App;
We had the same issue lately, if I'm not mistaken, it was related to a mismatch between some DLLs versions of the project. The client-side version must match the FileSystemCommandeProcessor version. The DevExtreme team seems to have changed some property name which cause this issue.
Ref: 3d Force Directed Graph - Replacing Nodes with Images
How might I add the images to the following excellent code in the same manner as the Stack Overflow answer above?
https://github.com/jexp/neo4j-3d-force-graph/blob/master/particles.html
Assuming that each node may have a property of n.image=/images/imagexxx.jpg how might I apply this image from a local filesystem to its respective node ?
If the property isn't present then render the node as the normal sphere.
Here is my sample code which just renders all nodes as small_image.jpg :
const elem = document.getElementById('3d-graph');
const driver = neo4j.v1.driver("bolt://192.168.1.251", neo4j.v1.auth.basic("neo4j", "test"));
const session = driver.session();
const start = new Date()
session
.run('MATCH (n)-[r]->(m) RETURN { id: id(n), label:head(labels(n)), community:n.name, caption:n.name, size:log(n.links_from+n.links_to)} as source, { id: id(m), label:head(labels(m)), community:m.name, caption:m.name, size:log(m.links_from+m.links_to)} as target, {weight:r.weight, type:type(r), community:case when n.community < m.community then n.community else m.community end} as rel LIMIT $limit', {limit: 5000})
.then(function (result) {
const nodes = {}
const links = result.records.map(r => {
var source = r.get('source');source.id = source.id.toNumber();
nodes[source.id] = source;
var target = r.get('target');target.id = target.id.toNumber();
nodes[target.id] = target;
var rel = r.get('rel'); if (rel.weight) { rel.weight = rel.weight.toNumber(); }
return Object.assign({source:source.id,target:target.id}, rel);
});
session.close();
console.log(links.length+" links loaded in "+(new Date()-start)+" ms.")
const gData = { nodes: Object.values(nodes), links: links}
const Graph = ForceGraph3D()(elem)
.graphData(gData)
.nodeAutoColorBy('community')
.nodeVal('size')
.linkAutoColorBy('community')
.linkWidth(0)
.linkDirectionalParticles('weight')
.linkDirectionalParticleSpeed(0.001)
.nodeLabel(node => `${node.label}: ${node.caption}`)
.onNodeHover(node => elem.style.cursor = node ? 'pointer' : null)
.nodeThreeObject(node => {
var map = new THREE.TextureLoader().load( "small_image.jpg" );
map.minFilter = THREE.LinearFilter;
var material = new THREE.SpriteMaterial( { map: map } );
var sprite = new THREE.Sprite( material );
sprite.scale.set(32,32,1);
return sprite;
});
// Spread nodes a little wider
Graph.d3Force('charge').strength(-150);
})
.catch(function (error) {
console.log(error);
});
const elem = document.getElementById('3d-graph');
const driver = neo4j.v1.driver("bolt://localhost", neo4j.v1.auth.basic("neo4j", "test"));
const session = driver.session();
const start = new Date()
session
.run('MATCH (n:Entity)-[r]->(m:Entity) WHERE n.name="new york" RETURN { id: id(n), label:head(labels(n)), community:n.name, caption:n.name, image:n.image, size:log(n.links_from+n.links_to)} as source, { id: id(m), label:head(labels(m)), community:m.name, caption:m.name, image:m.image, size:log(m.links_from+m.links_to)} as target, {weight:r.weight, type:type(r), community:case when n.community < m.community then n.community else m.community end, image:case when n.image < m.image then n.image else m.image end} as rel LIMIT $limit', {limit: 5000})
.then(function (result) {
const nodes = {}
const links = result.records.map(r => {
var source = r.get('source');source.id = source.id.toNumber();
nodes[source.id] = source;
var target = r.get('target');target.id = target.id.toNumber();
nodes[target.id] = target;
var rel = r.get('rel'); if (rel.weight) { rel.weight = rel.weight.toNumber(); }
return Object.assign({source:source.id,target:target.id}, rel);
});
session.close();
console.log(links.length+" links loaded in "+(new Date()-start)+" ms.")
const gData = { nodes: Object.values(nodes), links: links}
const Graph = ForceGraph3D()(elem)
.graphData(gData)
.nodeAutoColorBy('community')
.nodeVal('size')
.linkAutoColorBy('community')
.linkWidth(0)
.linkDirectionalParticles('weight')
.linkDirectionalParticleSpeed(0.001)
.nodeLabel(node => `${node.label}: ${node.caption}`)
.onNodeHover(node => elem.style.cursor = node ? 'pointer' : null)
.nodeThreeObject(node => {
var map = new THREE.TextureLoader().load((node.image != null ? node.image : ""));
map.minFilter = THREE.LinearFilter;
var material = new THREE.SpriteMaterial( { map: map } );
var sprite = new THREE.Sprite( material );
sprite.scale.set(32,32,1);
if (node.image){
return sprite; }
else return false;
});
// Spread nodes a little wider
Graph.d3Force('charge').strength(-150);
})
.catch(function (error) {
console.log(error);
});
By one trick or another I managed to handle headers in both new windows (window.open, target=blank etc) and iframes with SlimerJS. It is also possible to change navigator data (such as navigator.appVersion) for new windows, but I'm stuck with doing this for iframes. It looks like the onInitialized method works correcrtly only for main window and new windows, but not for iframes.
Here is some parts of the code.
var headers =
{
"Accept-Language" : "test_language",
"Accept" : "test/accpet",
"Connection" : "keep-alive",
"Keep-Alive" : "333",
"Accept-Charset" : "test-utf",
"User-Agent" : "test_ua"
}
var webpage = require('webpage').create(
{
pageSettings:
{
javascriptEnabled: true,
loadImages: true,
loadPlugins: true,
}
});
_onPageCreated = function(childPage)
{
console.log('a new window is opened');
childPage.settings.userAgent = options.useragent["navigator.userAgent"];
childPage.customHeaders = headers;
childPage.viewportSize = { width:400, height: 500 };
childPage.onInitialized = _onInitialized;
childPage.onNavigationRequested = _onNavigationRequested;
childPage.onLoadStarted = _onLoadStarted;
childPage.onLoadFinished = _onLoadFinished;
childPage.onResourceRequested = _onResourceRequested;
childPage.onPageCreated = _onPageCreated;
};
_onResourceRequested = function(requestData, networkRequest)
{
for(var h in headers)
{
networkRequest.setHeader(h, headers[h], false);
}
...
}
var _onInitialized = function()
{
this.customHeaders = headers;
console.log("[webpage.onInitialized]");
this.evaluate(function(options)
{
(function()
{
window.navigator.__defineGetter__('appVersion', function ()
{
return options.useragent["navigator.appVersion"];
});
...
})();
}, options);
};
...
webpage.onInitialized = _onInitialized;
webpage.onNavigationRequested = _onNavigationRequested;
webpage.onLoadFinished = _onLoadFinished;
webpage.onResourceRequested = _onResourceRequested;
webpage.onPageCreated = _onPageCreated;
I tried to do this with PhantomJS, but it seems like it is not possible to use "this" instead of "webpage" in the following case:
var _onInitialized = function()
{
console.log("[webpage.onInitialized]");
this.evaluate(function() // <<---not working
{
});
console.log("test"); //is not being printed
};
I would like this function to work with "this" object, so that it could be defined as onInitialized for both main page and child pages.
Anyway, the main question is about the SlimerJS code, not the Phantom one.
I'm new to ace-editor and I have included custom mode to validate my code and every line should end up with semicolon, If semicolon is not present in my query by mistake then the editor should gives up the warning like "Missing Semicolon".
define('ace/mode/javascript-custom', [], function(require, exports, module) {
var oop = require("ace/lib/oop");
var TextMode = require("ace/mode/text").Mode;
var Tokenizer = require("ace/tokenizer").Tokenizer;
var ExampleHighlightRules = require("ace/mode/example_highlight_rules").ExampleHighlightRules;
var Mode = function() {
this.HighlightRules = ExampleHighlightRules;
};
oop.inherits(Mode, TextMode);
(function() {
this.lineCommentStart = "--";
this.blockComment = {
start: "->",
end: "<-"
};
}).call(Mode.prototype);
exports.Mode = Mode;
});
define('ace/mode/example_highlight_rules', [], function(require, exports, module) {
var oop = require("ace/lib/oop");
var TextHighlightRules = require("ace/mode/text_highlight_rules").TextHighlightRules;
var ExampleHighlightRules = function() {
var keywordMapper = this.createKeywordMapper({
"variable.language": "this",
"keyword": "one|two",
"constant.language": "true|false|null"
}, "text", true);
this.$rules = {
"start": [{
token: "comment",
regex: "->",
next: [{
regex: "<-",
token: "comment",
next: "start"
}, {
defaultToken: "comment"
}]
}, {
regex: "\\w+\\b",
token: keywordMapper
}, {
token: "comment",
regex: "--.*"
}, {
token: "string",
regex: '"',
next: [{
regex: /\\./,
token: "escape.character"
}, {
regex: '"',
token: "string",
next: "start"
}, {
defaultToken: "string"
}]
}, {
token: "numbers",
regex: /\d+(?:[.](\d)*)?|[.]\d+/
}]
};
this.normalizeRules()
};
oop.inherits(ExampleHighlightRules, TextHighlightRules);
exports.ExampleHighlightRules = ExampleHighlightRules;
});
var langTools = ace.require("ace/ext/language_tools");
var editor = ace.edit("editor");
editor.session.setMode("ace/mode/javascript-custom");
editor.setOptions({
enableBasicAutocompletion: true,
enableLiveAutocompletion: true
});
editor.setTheme("ace/theme/monokai");
var lines = editor.session.doc.getAllLines();
var errors = [];
for (var i = 0; i < lines.length; i++) {
if (/[\w\d{(['"]/.test(lines[i])) {
alert("hello");
errors.push({
row: i,
column: lines[i].length,
text: "Missing Semicolon",
type: "error"
});
}
}
<script src="https://ajaxorg.github.io/ace-builds/src/ext-language_tools.js"></script>
<script src="https://ajaxorg.github.io/ace-builds/src/ace.js"></script>
<div id="editor" style="height: 200px; width: 400px"></div>
<div id="commandline" style="position: absolute; bottom: 10px; height: 20px; width: 800px;"></div>
UPDATE:
The following js files are generated from ace and added to my rails application, the files are loaded in rails app but the functionality (semicolon check) doesn't seem to be working.
worker-semicolonlineend - http://pastebin.com/2kZ2fYr9
mode-semicolonlineend - http://pastebin.com/eBY5VvNK
Update:
In ace editor, type in a query1, query2 in line 1 and line 2 respectively
Leave the third line blank
Now in fourth line, type a query without semicolon in the end, x mark appears in third line
5 And when the fifth line is also without a semicolon, then the x mark is displayed at fourth query
Ace editor widely support this kind analysis for JavaScript by default:
#editor {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
<div id="editor">function foo() { ; // unnessesary semicolon
var x = "bar" // missing semicolon
return x; // semicolon in place
}
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.1.9/ace.js" type="text/javascript"></script>
<script>
var editor = ace.edit("editor");
editor.setTheme("ace/theme/monokai");
editor.getSession().setMode("ace/mode/javascript");
</script>
Just make sure that worker file worker-javascript.js is available for your code. In code snippet above I use CDN to get Ace build, so worker is always available. You can configure JSHint via worker options.
Update: But if really need something beyond that you will need to do the following as my understanding goes:
Create Worker and Mode for you kind of analysis
Download Ace source code and install NodeJS
Put your new files within correspond Ace source code folders
Build Ace
Add build files to your project
Use new mode: editor.getSession().setMode("ace/mode/semicolonlineend");
Worker that perform line ending check will look something like that:
define(function(require, exports, module) {
"use strict";
var oop = require("../lib/oop");
var Mirror = require("../worker/mirror").Mirror;
var SemicolonLineEndCheckWorker = exports.SemicolonLineEndCheckWorker = function (sender) {
Mirror.call(this, sender);
this.setTimeout(500);
this.setOptions();
};
oop.inherits(SemicolonLineEndCheckWorker, Mirror);
(function() {
this.onUpdate = function () {
var text = this.doc.getValue();
var lines = text.replace(/^#!.*\n/, "\n").match(/[^\r\n]+/g);
var errors = [];
for (var i = 0; i < lines.length; i++) {
var lastLineCharacter = lines[i].trim().slice(-1);
if (lastLineCharacter === ';')
continue;
errors.push({
row: i,
column: lines[i].length-1,
text: "Missing semicolon at the end of the line",
type: "warning",
raw: "Missing semicolon"
});
}
this.sender.emit("annotate", errors);
};
}).call(SemicolonLineEndCheckWorker.prototype);
});
New mode that uses worker:
define(function(require, exports, module) {
"use strict";
var oop = require("../lib/oop");
var TextMode = require("./text").Mode;
var Mode = function() { };
oop.inherits(Mode, TextMode);
(function() {
this.createWorker = function(session) {
var worker = new WorkerClient(["ace"], "ace/mode/semicolonlineend_worker",
"SemicolonLineEndCheckWorker");
worker.attachToDocument(session.getDocument());
worker.on("annotate", function(results) {
session.setAnnotations(results.data);
});
worker.on("terminate", function() {
session.clearAnnotations();
});
return worker;
};
this.$id = "ace/mode/semicolonlineend";
}).call(Mode.prototype);
exports.Mode = Mode;
});