So I've been working with the autodesk viewer and managed to include it in a vue.js project.
I'm working with the V6 viewer and created my project with the Vue cli-3 and have been working on the tutorials.
My issue for now is that the css classes added to a viewer button are not loaded.
Here is what I mean:
ToolbarExtension.prototype.createUI = function() {
var viewer = this.viewer;
// Button 1
var button1 = new Autodesk.Viewing.UI.Button('my-view-front-button');
button1.onClick = function(e) {
viewer.setViewCube('front');
};
button1.addClass('my-view-front-button');
button1.setToolTip('View front');
// Button 2
var button2 = new Autodesk.Viewing.UI.Button('my-view-back-button');
button2.onClick = function(e) {
viewer.setViewCube('back');
};
button2.addClass('my-view-back-button');
button2.setToolTip('View Back');
// SubToolbar
this.subToolbar = new Autodesk.Viewing.UI.ControlGroup('my-custom-view-toolbar');
this.subToolbar.addControl(button1);
this.subToolbar.addControl(button2);
viewer.toolbar.addControl(this.subToolbar);
};
This code is used so i can create a toolbar with two buttons.
Basicly these lines add a css class to the buttons.
button1.addClass('my-view-front-button');
button2.addClass('my-view-back-button');
and here is my result
As you can see my buttons are blank and they're supposed to be red and blue.
.my-view-front-button {
background: red;
}
.my-view-back-button {
background: blue;
}
I tried to work with an other blank vue project (same with cli-3 and it does work.)
I'd like to find a solution about this issue. I've met a lot problems with this lib and not a lot of solutions.
Thank you for you help.
I'll do my best to answer your questions if something is missing.
So I looked up my code and found out the solution to my problem.
I was using the viewer as an a child component, the thing is, i had to change the scoped property from the <style lang="scss" scoped></style> directive.
Removing the scoped property fixed the buttons, they now look like the tutorial.
Sorry for the inconvenience, hope this post would help someone else.
Related
I inherited an Adobe CEP extension at work. Trying to wrap my head around an issue that makes it so absolutely no input from keyboard works on text inputs. To elaborate, absolutely no keyboard input works in Polymer's text inputs. The input get's focused, but if I type anything in them I get the mac error alert sound. The only key that I was able to make work was "tab". Anything else does not work. It's built using Polymer. At first I was unsure what's causing the issue, and since I inherited this project I was confused where to start. After about a day of debugging, I believe it's related to Polymer somehow. The reason for this is, if I remove the Polymer HTML element that renders it, and just put an input there, the input works. It only seems to block input inside the <template> ... </template>. I've looked all over the internet for any clues on what could be causing Polymer to block this input, there's no errors in console or anything, and I've come up short handed.
Does anyone have any insight on this?
I'm facing the same problem. Actually, it is not related to polymer, but to the webcomponents polyfill. If you try the following source code inside an Adobe CEP extension, you will see that you can click inside both the elements, select any text, but you are not able to edit it.
<html>
<head>
<script>
// Force all polyfills on
if (window.customElements) window.customElements.forcePolyfill = true;
ShadyDOM = {
force: true
};
ShadyCSS = {
shimcssproperties: true
};
</script>
<script src="node_modules/#webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
</head>
<body>
<template id="x-foo-from-template">
<input value="from template">
</template>
<script>
let tmpl = document.querySelector('#x-foo-from-template');
customElements.define('x-foo-from-template', class extends HTMLElement {
constructor() {
super();
let shadowRoot = this.attachShadow({
mode: 'open'
});
shadowRoot.appendChild(tmpl.content.cloneNode(true));
}
});
customElements.define('x-foo-from-dynamic', class extends HTMLElement {
constructor() {
super();
let shadowRoot = this.attachShadow({
mode: 'open'
});
var inputEl = document.createElement('input');
inputEl.value = "from created element";
shadowRoot.appendChild(inputEl);
}
});
</script>
<x-foo-from-template></x-foo-from-template>
<x-foo-from-dynamic></x-foo-from-dynamic>
</body>
</html>
Faced with the same issue, we finally found documented that Adobe will hand over all keypresses to the host application unless it can determine that an input or dropdown element has focus. I expect this is done using a simple check on document.activeElement. When the Shadow DOM is involved, Adobe would have to do something like
let target = document.activeElement;
while (target.shadowRoot && target.shadowRoot.activeElement) {
target = target.shadowRoot.activeElement;
}
in order to find the underlying <input> element.
Since this is currently not working, we needed to use registerKeyEventsInterest to explicitly have all keypresses be processed by our code.
var csInterface = new CSInterface();
var keyEvents = [];
// All the keyCodes you need, with the modifiers used
keyEvents.push({ keyCode: 0 });
keyEvents.push({ keyCode: 0, metaKey: true });
// ...
csInterface.registerKeyEventsInterest(JSON.stringify(keyEvents));
We actually went ahead and looped 0..255 and registered for all modifiers. With the exception of keyboard based copy-paste, we now have full functionality with our webcomponents (mostly PolymerElement/LitElement based).
https://github.com/Adobe-CEP/CEP-Resources/blob/master/CEP_8.x/Documentation/CEP%208.0%20HTML%20Extension%20Cookbook.md#register-an-interest-in-specific-key-events
I would like to show primefaces barchart with different colors for each bar. the most close I got is like the image:
I would like to have different color those bars, like green for "on time", yellow for "warning " and red for "overdue"
I tried to used model.setSeriesColors("58BA27,FFCC33,F74A4A,F52F2F,A30303");
but if i do that each bar should be a new series, therefore I won't be able to show the labels as I wish (like the image), I got this..
last, how can I make it show 0,1,2,3 (integers) instead repeating 0_0_0_1_1_1_2_2_2 like the image 1 :/
thanks
I solved the problem by my own reading this jplot documentation, I'm posting here hope it can help someone...
for somehow, adding extender in the tag is not working for me, I have to put it via java code:
barModel.setSeriesColors("58BA27,FFCC33,F74A4A,F52F2F,A30303");
barModel.setExtender("chartExtender");
then javascript inside
<h:outputScript>
function chartExtender() {
// this = chart widget instance
// this.cfg = options
this.cfg.seriesDefaults.rendererOptions.varyBarColor = true;
}
</h:outputScript>
and done!
I'm new here, so I unfortunately cannot add a comment to your answer.
It worked for me too.
Some clarifications for other readers:
Be sure to put the <h:outputScript> under your <p:chart... like:
<p:chart type="bar" model="#{bean.someModel}">
<h:outputScript>
function chartExtender() {
// this = chart widget instance
// this.cfg = options
this.cfg.seriesDefaults.rendererOptions.varyBarColor = true;
}
</h:outputScript>
</p:chart>
The "extender" -Tag has been removed in Primefaces 5:
see this answer
I'm using nodecellar to get a better understanding of backbone.js and I've come across a problem which was answered in great detail in a similar question, however, the answer doesn't seem to be working for me:
What i'm trying to do.
Using Nodecellars wineview, i'm trying to utilise the drag and drop feature, to upload an image. I've made a note of a previous very well answered question which basically states that you have to disable the default behaviour of on dragover, so I have the following in my wine view:
events: {
"change" : "change",
"click .save" : "beforeSave",
"click .delete" : "deleteWine",
"drop #profile" : "dropHandler",
"dragover #profile" : "dragover",
'dragenter #profile' : 'alertMe'
},
then my dragover event looks like this:
dragover: function(event){
console.log('drag over event called');
event.preventDefault();
},
This is fine and working as the console log is called when it fires. and the draghandler looks like this:
dropHandler: function (event) {
event.stopPropagation();
event.preventDefault();
var e = event.originalEvent;
e.dataTransfer.dropEffect = 'copy';
this.pictureFile = e.dataTransfer.files[0];
// Read the image file from the local file system and display it in the img tag
var reader = new FileReader();
reader.onloadend = function () {
$('#profile').attr('src', reader.result);
$('#picText').html('Picture added, select save to complete changes.')
};
reader.readAsDataURL(this.pictureFile);
}
The problem
The code works, however it doesn't upload the image or save the details in the model to the database. so once I move away then select the wine again the image is back to what it was originally.
I've done some research into the HTML5 fileReader api, but there isn't much on how it uploads, or where it uploads to.
And this is where I am now, I'm looking to you guys for suggestions on how to ensure the model saves the image url, and the image is uploaded to the pics folder.
How is the best way to go about this.
Is the HTML 5 fileReader API the best option to go with?
Thank you for your feedback.
Jay
You are missing in your function dropHandler the call to your model to set the property for the image you want to save.
I'm using Mootools (don't think it is related to the problem) to drag and drop and element.
var draggable = new Drag(timeHandle, {
onDrag: function () {
var calculatedTime = calcTime();
$('timeLabel').innerHTML = calculatedTime;
},
});
Basically, I can drag my 'timeHandle' and the 'timeLabel' is getting updated properly.
The problem is that sometimes, after moving the handle a little bit, suddently, the UI is not getting updated. The 'timeHandle' is not moving and the 'timeLabel' is not getting updted.
The problem is not with the drag event, I can see it keeps on getting called.
When I move
$('timeLabel').innerHTML = calculatedTime;
everything works fine.
So, the problem is not with the 'Drag' object since the event is kept on calling.
Looks like some UI performance issue.
Thanks
To simplify your code, you can use Element.set('text', 'my text here');
var element = $('timeLabel');
var draggable = new Drag(timeHandle, {
onDrag: function () {
element.set('text', calcTime());
}
});
Also, remember to remove that last comma or it will throw errors in Internet Explorer.
OK, found a to make it work.
I still not sure what caused the problem but it looks like the 'innerHTML' command has either really poor performance which causes problems in the GUI updates or maybe some kind of internal mechanism (IE only? which is supposed to prevent the UI from updates overflow.
Anyway, instead of using the innerHTML, I'm doing the following:
var draggable = new Drag(timeHandle, {
onDrag: function () {
var calculatedTime = calcTime();
var element = $('timeLabel');
element.removeChild(element.firstChild);l
element.appendChild(element.ownerDocument.createTextNode(calculatedTime));
},
});
Works like a charm
how to remove the dots from p:lineChart and draw the chart as just the continuous line?
Thanks
For others with similar problem, I did:
<p:chart type="line" model="#{myController.model}"/>
and:
LineChartSeries serie = new LineChartSeries();
serie.setShowMarker(false);
and worked fine. I'm using PrimeFaces 5.1.
There is a showMarkers attribute that isn't working for me (I'm using PrimeFaces 3.4.2) but I found a way to hide them.
It's a bit hacky, I made it working on the showcase, you just need to replace widget_category by the widget of your chart. You can even test it online from the showcase using a javascript console if your web browser allows it (tested under chromium) :
// loop through the series
for (var i = 0; i < widget_category.cfg.series.length; ++i) {
// Hide markers
widget_category.cfg.series[i].showMarker = false;
// I'm not sure you want this when talking about 'continuous line'
// but you can make your chart smooth this way :
widget_category.cfg.series[i].rendererOptions = { smooth: true };
}
// Ask a refresh using the modified configuration object
widget_category.refresh(widget_category.cfg);