I can select multiple images and watch their preview, but I can't sort them out or drag them to change positions.
Can anyone help me implement this?
Thank you very much.
Component ts
files:any;
urls = new Array<string>();
detectFiles(event) {
// this.urls = [];
this.files = event.target.files;
if (this.files.length < 7) {
for (let file of this.files) {
let reader = new FileReader();
reader.onload = (e: any) => {
this.urls.push(e.target.result);
}
reader.readAsDataURL(file);
}
}
}
There is an angular library available called ngx-drag-drop. You can make use of that.
npm link => https://www.npmjs.com/package/ngx-drag-drop
Stackblitz links:
https://stackblitz.com/edit/ngx-drag-and-drop-lists-5apzjp
https://stackblitz.com/edit/angular-ngx-drag-drop-test-ut3rj7
Related
I have a file upload control in my angular app where user could upload any type of file except a few ones .exe, .sql etc
<input type="file" id="file" #file (change)="fileUploadHandler($event)" multiple>
fileupload.component.ts
fileUploadHandler(event: Event) {
const inputElement = event.target as HTMLInputElement;
if (inputElement.files && inputElement.files?.length) {
_each(inputElement.files, (_file) => {
const fileSize = _file.size;
if (fileSize < this.MAX_DOC_SIZE) {
const fileName = _file.name?.trim();
const doc = new Document();
doc.name = fileName;
doc.extension = fileName.slice(fileName.lastIndexOf('.') + 1);
doc.size = fileSize;
this.docs.push(doc);
}
});
}}
This list the files in UI as below
Now what I need is that when user click on a file, that file should open in a new tab
how can I do this?
On googling I see suggestions to use FileReader & gave a try
_each(inputElement.files, (_file) => {
const reader = new FileReader();
const data = reader.readAsDataURL(_file);
console.log(data) // nothing is printed on console
Please suggest. Thanks!
You have to enhance the code a little bit (as #mav-raj also stated). In Angular you can use the following:
_each(inputElement.files, (_file) => {
const reader = new FileReader();
reader.onloadend = ((result) => {
console.log(result) // now something will be printed!
});
reader.readAsDataURL(_file);
})
I was able to successfully integrate Threejs Effect composer in aframe as a component by exporting everything as THREE.Effectcomposer, THREE.SSAOPass etc. and adding the effect inside a aframe component and i tweaked the AFrame renderer to update the effects in the scene. OutlinePass from threejs worked fine in this code but SSAO is not working and i don't get any errors. Please someone help me figure out the problem. the code for SSAOPass looks like this
AFRAME.registerComponent('ssao', {
init: function () {
this.el.addEventListener('that', evt => this.onEnter());
this.el.addEventListener('mouseleave', evt => this.onLeave());
setTimeout(() => this.el.emit("that"), 2000);
},
onEnter: function () {
const scene = this.el.sceneEl.object3D;
const camera = this.el.sceneEl.camera;
const renderer = this.el.sceneEl.renderer;
const render = renderer.render;
const composer = new THREE.EffectComposer(renderer);
//let renderPass = new THREE.RenderPass(scene, camera);
//let outlinePass = new THREE.OutlinePass(new THREE.Vector2(window.innerWidth, window.innerHeight), scene, camera);
const ssaoPass = new THREE.SSAOPass( scene, camera, window.innerWidth, window.innerHeight );
//composer.addPass(renderPass);
//composer.addPass(outlinePass);
ssaoPass.kernelRadius = 16;
composer.addPass( ssaoPass );
// let objects = [];
// this.el.object3D.traverse(node => {
// if (!node.isMesh) return;
// objects.push(node);
// });
// outlinePass.selectedObjects = objects;
// outlinePass.renderToScreen = true;
// outlinePass.edgeStrength = this.data.strength;
// outlinePass.edgeGlow = this.data.glow;
// outlinePass.visibleEdgeColor.set(this.data.color);
// HACK the AFRAME render method (a bit ugly)
const clock = new THREE.Clock();
this.originalRenderMethod = render;
let calledByComposer = false;
renderer.render = function () {
if (calledByComposer) {
render.apply(renderer, arguments);
} else {
calledByComposer = true;
composer.render(clock.getDelta());
calledByComposer = false;
}
};
},
onLeave: function () {
this.el.sceneEl.renderer.render = this.originalRenderMethod;
},
remove: function () {
this.onLeave();
}
});
I have also created a glitch project which i am sharing here. Please feel free to join and collaborate in my project
Edit link: https://glitch.com/edit/#!/accessible-torpid-partridge
Site link:https://accessible-torpid-partridge.glitch.me
Thanks in advance
The code is correct, all you need is to tweak the exposed SSAOShader uniforms: SSAOPass.kernelRadius, SSAOPass.minDistance, SSAOPass.maxDistance - like in the Three.js example.
Keep in mind - the scale in the example is huge, so the values will need to be different in a default aframe scene.
It's a good idea to be able to dynamically update a component (via setAttribute() if you properly handle updates), so you can see what's going on in realtime. Something like I did here - SSAO in a-frame (also based on Don McCurdys gist.
I've used some basic HTML elements, most threejs examples use dat.GUI - it is made for demo / debug tweaks.
I'm trying to implement copying multiple images from adobe illustrator and pasting it in web page to upload. I could achieve the same for single image but when I copy multiple images, all the images together act as single image.
Below is the code
<mat-card class="imageUpload" (paste)=handlePaste($event)></mat-card>
handlePaste(event: any) {
const items = (event.clipboardData ||
event.originalEvent.clipboardData).items;
let blob = null;
for (const item of items) {
if (item.type.indexOf('image') === 0) {
blob = item.getAsFile();
const reader = new FileReader();
reader.onload = (evt: any) => {
this.onUpload("blob.name", evt.target.result);
};
reader.readAsDataURL(blob);
}
}
}
I've got a small postcss plugin I've made that generates a JSON file off a colors.css variable file during webpack build.
My postcss plugin
const fs = require('fs');
const postcss = require('postcss');
const capitalize = (string) => string.charAt(0).toUpperCase() + string.slice(1);
const getPropName = (string) => {
let name = clean(string.split('-'));
name.shift();
for(let k = 1; k < name.length; k++){ //start at 1 to skip 'color' prefix
name[k] = capitalize(name[k].toString());
}
return name.join('');
};
const clean = (array) => {
let i = array.length;
while(i--){
if (!array[i]) {
array.splice(i, 1);
i++;
}
}
return array;
};
module.exports = postcss.plugin('cssobject', (files, filters, options) =>
(css) => {
options = options || {
destination: ''
};
// Processing code will be added here
const getVariable = (variable) => {
let result;
css.walkRules((rules) => {
rules.walkDecls((decl) => {
const pointer = variable.replace('var(', '').replace(')','');
if(!decl.prop.match(pointer)) return;
result = decl.value;
});
});
return result;
};
css.walkRules((rules) => { //hooks into CSS stream
let i = files.length;
let cssObject = {};
while (i--) {
if(!rules.source.input.from.match(files[i])) return; //scrubs against requested files
rules.walkDecls((decl) => {
let j = filters.length;
while(j--){
if(!decl.prop.match(filters[j])) return; //scrubs against requested rules
let prop = getPropName(decl.prop);
cssObject[prop] = (decl.value.match('var'))? getVariable(decl.value) : decl.value;
}
});
}
if (options.destination) {
fs.writeFile(options.destination, JSON.stringify(cssObject), 'utf8');
}
});
}
);
I'm then importing this JSON file into a react component JSX file to then parse JSON data into a visual guide of project's used colors under AA and AAA requirements... anywho
The problem I'm having is my webpack-dev-server keeps re-building over and over again cause it thinks a change has been made to the JSX file, when in fact it's only ever a change to the JSON file being imported.
Is there a standard way of importing generated files in to a JSX without causing infinite build loops?
I've already tried having the JSON file be saved well outside of the webpack dev's watch location, and still build loop remains.
Thanks in advance!
you can change you file's timestamp, the webpack will not build after you change your file
const now = Date.now() / 1000;
const lastModifyTime = now - 11;
const lastAccessTime = now - 11;
fs.utimesSync(jsonPath, lastModifyTime, lastAccessTime);
Have a try, hope to help you.
I have followed Philippe Leefsma's tutorial on how to implement the markup tool, but without any luck. Link here: http://adndevblog.typepad.com/cloud_and_mobile/2016/02/playing-with-the-new-view-data-markup-api.html
and here: https://developer.api.autodesk.com/viewingservice/v1/viewers/docs/tutorial-feature_markup.html
I get errors that I need to include requireJS, but I don't want to use it. So instead I used this script in my html file:
<script src="https://autodeskviewer.com/viewers/2.2/extensions/MarkupsCore.js">
I don't know if this is the right way to go? I get no errors in the console, but the markup button doesn't show up in the dockingpanel.
This is my code for loading the extension in the viewer:
viewerApp = null;
function initializeViewer(containerId, urn, params) {
function getToken(url) {
return new Promise(function (resolve, reject) {
$.get(url, function (response) {
resolve(response.access_token);
});
});
}
var initOptions = {
documentId: 'urn:' + urn,
env: 'AutodeskProduction',
getAccessToken: function (onGetAccessToken) {
getToken(params.gettokenurl).then(function (val) {
var accessToken = val;
var expireTimeSeconds = 60 * 30;
onGetAccessToken(accessToken, expireTimeSeconds);
});
}
}
function onDocumentLoaded(doc) {
var rootItem = doc.getRootItem();
// Grab all 3D items
var geometryItems3d =
Autodesk.Viewing.Document.getSubItemsWithProperties(
rootItem, { 'type': 'geometry', 'role': '3d' }, true);
// Grab all 2D items
var geometryItems2d =
Autodesk.Viewing.Document.getSubItemsWithProperties(
rootItem, { 'type': 'geometry', 'role': '2d' }, true);
// Pick the first 3D item otherwise first 2D item
var selectedItem = (geometryItems3d.length ?
geometryItems3d[0] :
geometryItems2d[0]);
var domContainer = document.getElementById('viewerContainer');
var config = { extensions: ["Autodesk.Viewing.MarkupsCore"] };
// GUI Version: viewer with controls
var viewer = new Autodesk.Viewing.Private.GuiViewer3D(domContainer, config);
viewer.loadExtension("Autodesk.Viewing.MarkupsCore");
viewer.initialize();
viewer.loadModel(doc.getViewablePath(selectedItem));
var extension = viewer.getExtension("Autodesk.Viewing.MarkupsCore");
viewerApp = viewer;
}
function onEnvInitialized() {
Autodesk.Viewing.Document.load(
initOptions.documentId,
function (doc) {
onDocumentLoaded(doc);
},
function (errCode) {
onLoadError(errCode);
})
}
function onLoadError(errCode) {
console.log('Error loading document: ' + errCode);
}
Autodesk.Viewing.Initializer(
initOptions,
function () {
onEnvInitialized()
})
}
Any help is highly appreciated!
Unfortunately there has been a few changes to the API since I wrote that blog post. The MarkupCore.js is now included in the viewer3D.js source, so you don't need to reference any extra file or use requireJS if you use the latest version of the viewer API.
Keep in mind that this is an API-only feature, so even after loading the markup extension, you won't get any UI out of the box. You have to implemented it yourself, for example create a dialog with buttons that may eventually create markups by calling the API.
Some of the code from my blog post may still be valid and give you an idea about what you need to do.
Hope that helps.