I am back with another question. In this condition i have added two events which is Autodesk.Viewing.ISOLATE_EVENT, Autodesk.Viewing.SHOW_ALL_EVENT but now problem is with SHOW_ALL_EVENT.
Whenever the SHOW_ALL_EVENT occur both the event are triggered.
OpenanotherPanel.prototype.onSelectionEvent = function(event) {
var currSelection = this.viewer.getSelection();
alert("Something is isolatied");
};
OpenanotherPanel.prototype.nothingToDo = function(event) {
var currSelection = this.viewer.getSelection();
alert("Nothing to do");
};
OpenanotherPanel.prototype.load = function() {
alert('OpenanotherPanel is loaded!');
this.onSelectionBinded = this.onSelectionEvent.bind(this);
this.nothingToDoBinded = this.nothingToDo.bind(this);
this.viewer.addEventListener(Autodesk.Viewing.ISOLATE_EVENT, this.onSelectionBinded);
this.viewer.addEventListener(Autodesk.Viewing.SHOW_ALL_EVENT, this.nothingToDoBinded);
return true;
};
I have a problem with changes of material of some elements
when geometry is loaded:
_this.viewer.addEventListener(Autodesk.Viewing.GEOMETRY_LOADED_EVENT, () => {
changeModelMaterial()
});
...
const changeModelMaterial = () => {
const grey = new THREE.Color(0.5, 0.5, 0.5);
let dbIds = getDbIds()
changeAllElementsMaterial(grey)
setMaterialOfDbIds(dbIds)
}
code that i`m using to change material:
const changeAllElementsMaterial = (color) => {
const fragmentList = _this.viewer.model.getFragmentList();
for (let materialId of fragmentList.materialids) {
if (fragmentList.materialmap[materialId]) {
fragmentList.materialmap[materialId].map = null
fragmentList.materialmap[materialId].color = color
fragmentList.materialmap[materialId].needsUpdate = true;
}
}
_this.viewer.impl.invalidate(true);
}
const setMaterialOfDbIds = (dbIds) => {
var color_diffuse = 0xAB00EE;
var color_specular = 0xEEABEE;
var colorM = new THREE.MeshPhongMaterial({
color: color_diffuse,
specular: color_specular
});
_this.viewer.impl.matman().addMaterial(
'ADN-Material-' +
"common color material", // or a GUID
colorM,
true);
for (let dbId of dbIds) {
_this.viewer.model.getData().instanceTree.enumNodeFragments(dbId, function (fragId) {
_this.viewer.model.getFragmentList().setMaterial(fragId, colorM);
});
}
_this.viewer.impl.invalidate(true);
}
It works, because I see that materials of model are changed, but the problem is that materials back to default after ~1-2 sec.
After this I cannot change material even with run this code manually.
Question is why Viewer is locking material change after this 2 sec, how to prevent it
And maybe you will be able to tell me what i can do better with material changes, eg. maybe something better that running my code after GEOMETRY_LOAD. The best would be change material before first render of model
........
hint:
when change event from GEOMETRY_LOADED_EVENT to OBJECT_TREE_CREATED_EVENT "sometimes" but only sometimes it works well (materials stay to the end of working with model), but mostly when i run my method after OBJECT_TREE_CREATED it not working (even not working by run it manually, materials are in some way locked). So I suspect that problem is between time of GEOMETRY_LOAD and OBJECT_TREE_CREATED
I will be grateful for any help
==============================full code==============================
index.html
<div id="main">
<div id="MyViewerDiv"></div>
<button id="open-nav-button" onClick="showDocInfo()">test</button>
</div>
<script src="https://developer.api.autodesk.com/derivativeservice/v2/viewers/three.min.js"></script>
<script src="https://developer.api.autodesk.com/derivativeservice/v2/viewers/viewer3D.min.js"></script>
<script type="text/javascript" src="lib/jquery.min.js"></script>
<script src="js/autodesk-viewer.js"></script>
<script src="js/extension/test-extension.js"></script>
<script>
const autodeskViewer = new AutodeskViewer()
const showDocInfo = () => {
autodeskViewer.showDocInfo()
}
</script>
autodesk-viewer.js
var AutodeskViewer = (function () {
function AutodeskViewer() {
var _this = this;
this.urn = 'urn:dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6Zm9yZ2UtamF2YS1zYW1wbGUtYXBwLTFzcGduazdqcWpxdjhmYXV0YmNzd2R0cGdvN3VtNWY1L1BPQy1Gb3JnZS1JVCUyMDIwMTclMjBSdWNoXzEwMDUxNy5ud2Q';
this.initializeViewer = function (containerId, documentId) {
_this.viewerApp = new Autodesk.Viewing.ViewingApplication(containerId);
var config = {
extensions: ['TestExtension']
};
_this.viewerApp.registerViewer(_this.viewerApp.k3D, Autodesk.Viewing.Private.GuiViewer3D, config);
_this.viewerApp.loadDocument(documentId, _this.onDocumentLoadSuccess, _this.onDocumentLoadFailure);
}
this.onDocumentLoadSuccess = function (doc) {
const viewables = _this.viewerApp.bubble.search(av.BubbleNode.MODEL_NODE);
if (viewables.length === 0) {
return;
}
_this.viewerApp.selectItem(viewables[0].data, _this.onItemLoadSuccess, _this.onItemLoadFail);
_this.viewer3d = _this.viewerApp.getCurrentViewer();
}
this.onDocumentLoadFailure = (viewerErrorCode) => {}
this.onItemLoadSuccess = (viewer) => {
_this.viewer = viewer
}
this.onItemLoadFail = (errorCode) => {}
this.initialize = () => {
var options = {
env: 'AutodeskProduction',
getAccessToken: _this.getToken,
refreshToken: _this.getToken
};
Autodesk.Viewing.Initializer(options, _this.initCallback);
};
this.initCallback = function () {
_this.initializeViewer('MyViewerDiv', _this.urn, '3d');
};
this.getToken = function (onGetAccessToken) {
$.get("forge/oauth/token")
.done(function (data) {
token = data
onGetAccessToken(token, 60 * 60);
})
.fail(function (error) {
console.log('ERROR', error);
});
};
this.showDocInfo = function () {};
this.initialize();
}
return AutodeskViewer;
}());
test-extension.js
var _self;
var _viewer;
var _tempValue = 0;
function TestExtension(viewer, options) {
Autodesk.Viewing.Extension.call(this, viewer, options);
_self = this;
_viewer = viewer;
}
const changeModelMaterial = () => {
// _tempValue++;
// if (_tempValue == 2) {
const elements = [4340, 4342, 4344, 4346, 4348, 4367, 4371, 4375, 4380, 4452, 4468, 4488, 4503, 4517, 4520, 4522, 4524, 4526, 4528, 4530]
changeAllElementsMaterial(new THREE.Color(0.5, 0.5, 0.5))
setMaterialOfDbIds(elements)
_tempValue = 0
// }
}
const changeAllElementsMaterial = (color) => {
var fragmentList = _viewer.model.getFragmentList();
for (let materialId of fragmentList.materialids) {
if (fragmentList.materialmap[materialId]) {
fragmentList.materialmap[materialId].map = null
fragmentList.materialmap[materialId].color = color
fragmentList.materialmap[materialId].needsUpdate = true;
}
}
_viewer.impl.invalidate(true);
}
const setMaterialOfDbIds = (dbIds) => {
var colorM = new THREE.MeshPhongMaterial({
color: new THREE.Color(0xAB00EE)
});
for (let dbId of dbIds) {
_viewer.model.getData().instanceTree.enumNodeFragments(dbId, function (fragId) {
_viewer.model.getFragmentList().setMaterial(fragId, colorM);
});
}
_viewer.impl.invalidate(true);
}
TestExtension.prototype = Object.create(Autodesk.Viewing.Extension.prototype);
TestExtension.prototype.constructor = TestExtension;
TestExtension.prototype.load = function () {
_viewer.addEventListener(Autodesk.Viewing.OBJECT_TREE_CREATED_EVENT, changeModelMaterial)
// _viewer.addEventListener(Autodesk.Viewing.GEOMETRY_LOADED_EVENT, changeModelMaterial)
return true
};
TestExtension.prototype.unload = function () {
return true
};
Autodesk.Viewing.theExtensionManager.registerExtension('TestExtension', TestExtension);
I found the solution, quite accidentally... from other thing i tried to do
before:
const setMaterialOfDbIds = (dbIds) => {
var color_diffuse = 0xAB00EE;
var color_specular = 0xEEABEE;
var colorM = new THREE.MeshPhongMaterial({
color: color_diffuse,
specular: color_specular
});
_this.viewer.impl.matman().addMaterial("common color material", colorM, true);
for (let dbId of dbIds) {
_this.viewer.model.getData().instanceTree.enumNodeFragments(dbId, function (fragId) {
_this.viewer.model.getFragmentList().setMaterial(fragId, colorM);
});
}
_this.viewer.impl.invalidate(true);
}
after
const setMaterialOfDbIds = (dbIds) => {
var color_diffuse = 0xAB00EE;
var color_specular = 0xEEABEE;
var colorM = new THREE.MeshPhongMaterial({
color: color_diffuse,
specular: color_specular
});
_this.viewer.impl.matman().addMaterial("common color material", colorM, true);
for (let dbId of dbIds) {
_this.viewer.model.getData().instanceTree.enumNodeFragments(dbId, function (fragId) {
_this.viewer.model.getFragmentList().setMaterial(fragId, colorM);
var fragProxy = _this.viewer.impl.getFragmentProxy(_this.viewer.model, fragId)
fragProxy.updateAnimTransform()
});
}
_this.viewer.impl.invalidate(true);
}
Really I don`t know why adding
var fragProxy = _this.viewer.impl.getFragmentProxy(_this.viewer.model, fragId)
fragProxy.updateAnimTransform()
made the difference, i didn`t saw anything like that in any example of updating material.
What is interesting this code is running for only few elements in model, but it works for even those elements that materials changed before (in changeAllElementsMaterial method).
#Philippe Leefsma if you understand it pls tell something more why it works
So far I cannot reproduce the issue on my side, I am using the following code (ES7) extracted from that extension: Viewing.Extension.Material
createColorMaterial (color) {
const material = new THREE.MeshPhongMaterial({
specular: new THREE.Color(color),
side: THREE.DoubleSide,
reflectivity: 0.0,
color
})
const materials = this.viewer.impl.getMaterials()
materials.addMaterial(
this.guid(),
material,
true)
return material
}
async onModelCompletedLoad() {
const material = this.createColorMaterial(0xFF0000)
const model = this.viewer.model
const fragIds = await Toolkit.getFragIds(model)
fragIds.forEach((fragId) => {
model.getFragmentList().setMaterial(
fragId, material)
})
this.viewer.impl.sceneUpdated(true)
}
The onModelCompletedLoad is a custom event fired when both GEOMETRY_LOADED_EVENT and OBJECT_TREE_CREATED_EVENT have been fired.
Take a look at this article for more details: Asynchronous viewer events notification
I doubt you can easily change the materials before the model is first rendered, however you could use a custom overlay that hides the model until your custom logic has performed all required steps, this is the approach I am using in my demos at: https://forge-rcdb.autodesk.io/configurator
After loading a model, all custom materials are being persisted fine:
The material extension can be tested live from there.
Hope that helps
var main = function() {
$('.dropdown-toggle').click(function() {
$('.dropdown-menu').toggle();
});
$('.arrow-next').click(function() {
var currentSlide = $('.active-slide');
var nextSlide = currentSlide.next();
var currentDot = $('.active-dot');
var nextDot = currentDot.next();
if(nextSlide.length == 0) {
nextSlide = $('.slide').first();
nextDot = $('.dot').first();
}
$('.arrow-prev').click(function() {
var currentSlide = $('.active-slide');
var prevSlide = currentSlide.prev();
if(prevSlide.length==0) {
prevSlide=$('.slide').last();
}
currentSlide.fadeOut(600).removeClass('active-slide');
nextSlide.fadeIn(600).addClass('active-slide');
currentDot.removeClass('active-dot');
nextDot.addClass('active-dot');
});
};
$(document).ready(main);
When I try to submit this code in Codecademy, I get this error: "Try again, remember to fadeout the current slide. I have done exactly what it says in the "hint" section, but it still gives me the same error.
Say I want to tailor my application to throttle throughput when running on battery power, but go full bore when it's plugged to a wall socket.
Is there an event to plug into to detect when these things happen like when internet connection is detected?
Apparently there's this trigger you can plug in to. It only fires off when the device is plugged in.
IE and WebView http://ie.microsoft.com/testdrive/HTML5/PowerMeter/Default.html can poll the cpu power states
eg: http://apps.microsoft.com/windows/app/plugged-in/2b91b1e1-9e30-4a96-bc95-b196e46bef9d
In c#/xaml try:
XAML
<WebView x:Name="BatteryCheck_WV" Source="ms-appx-web:///Assets/JSBatteryCheck.html" Height="50" Width="50" Visibility="Collapsed" />
c#
var PeriodicTimer = ThreadPoolTimer.CreatePeriodicTimer(async (timer) =>
{
await Dispatcher.RunAsync(Windows.UI.Core.CoreDispatcherPriority.Low,
async () =>
{
if (Window.Current.Visible) BatteryStatus.IsOn= Convert.ToBoolean(await BatteryCheck_WV.InvokeScriptAsync("IsPluggedIn", null));
});
}, new TimeSpan(0, 0, 0, 1, 0));
html/js
<!DOCTYPE html>
<html>
<head>
<title>JSBatteryCheck</title>
<script type="text/javascript">
var batterytimeOut;
var timeOutGo = true;
var lastDisplayUpdateTime = new Date();
var MilliSeconds = 1000;
var displayUpdateInterval = 200;
var values = [];
var maxValues = displayUpdateInterval;
var PluggedIn = true;
var currentTicksPerMilliSecond = 0;
function GetTicksPerSecond() {
if ((new Date() - lastDisplayUpdateTime) >= displayUpdateInterval) {
lastDisplayUpdateTime = new Date;
currentTicksPerMilliSecond = Avg();
values = [];
if (!isNaN(currentTicksPerMilliSecond)) {
PluggedIn = (currentTicksPerMilliSecond > 9) ? false : true;
}
}
else Tick();
if (timeOutGo) batterytimeOut = setTimeout(function () { GetTicksPerSecond() }, 1);
}
function StartTimer() {
timeOutGo = true;
GetTicksPerSecond();
return "";
}
function Tick() {
if (values.length > maxValues) values.shift();
else values.push(new Date());
}
function Avg() {
if (values.length > 1) {
var earliest = values[0];
var latest = values[values.length - 1];
var elapsed = latest - earliest;
var elapsedSeconds = elapsed / MilliSeconds;
var avg = MilliSeconds / ((values.length - 1) / elapsedSeconds);
return parseInt(avg);
}
else return NaN;
}
function StopTimeOut() {
clearTimeout(batterytimeOut);
batterytimeOut = null;
timeOutGo = false;
}
function IsPluggedIn() {
return String(PluggedIn);
}
</script>
</head>
<body onload="GetTicksPerSecond()">
<div id="PowerStatus"></div>
<button onclick="StopTimeOut()">Stop timeout</button>
</body>
</html>
For background tasks SystemTriggerType.BackgroundWorkCostChange event is best but needs lock screen access
I tried to create a cookie for the link but it showed me errors like this....how to fix it...
Uncaught ReferenceError: createCookie is not defined
i am providing my code in fiidle
http://jsfiddle.net/SSMX4/82/ cookie not working
my jquery code is below
// locale selector actions
$('#region-picker').click(function(){
if ($("#locale-select").is(":visible")) return closeSelector('slide');
var foot_height = $('#footer').innerHeight();
var foot_height_css = foot_height-1;
var select_position = '-=' + (Number(700)+18);
console.log("hallo"+select_position);
var $selector = $('#locale-select');
$('#locale_pop').fadeOut();
$selector.css({top:foot_height_css});
$selector.fadeIn(function(){
$(this).addClass('open');
$(this).animate({top:select_position}, 1000);
});
});
$('#select-tab').click(function(e){
e.stopPropagation()
closeSelector('slide');
});
// don't hide when clicked within the box
$('#locale-select').click(function(e){
e.stopPropagation();
});
$(document).click(function(){
if ($('#locale-select').hasClass('open')) {
closeSelector('disappear');
}
});
$('.locale-link').click(function(){
//var $clicked = $(this); //"$(this)" and "this" is the clicked span
$(".locale-select-lable").html($(this).html());
//search for "marginXXXXX"
var flags = $(this).attr("class").match(/(margin\w+)\s/g);
//create new class; add matching value if found
var flagClass = "tk-museo-sans locale-select-lable" + (flags.length ? " " + flags[0] : "");
//set new class definition
$(".locale-select-lable").attr("class", flagClass);
closeSelector('disappear');
//if ($("#locale-select").is(":visible")) return closeSelector('slide');
/*
// var desired_locale = $(this).attr('rel');
// createCookie('desired-locale',desired_locale,360);
// createCookie('buy_flow_locale',desired_locale,360);
//closeSelector('disappear');
*/
}); /* CORRECTED */
$('#locale_pop a.close').click(function(){
var show_blip_count = readCookie('show_blip_count');
if (!show_blip_count) {
createCookie('show_blip_count',3,360);
}
else if (show_blip_count < 3 ) {
eraseCookie('show_blip_count');
createCookie('show_blip_count',3,360);
}
$('#locale_pop').slideUp();
return false;
});
function closeSelector(hide_type){
var foot_height = $('#footer').innerHeight();
var select_position = '+=' + (Number(400)+20);
if (hide_type == 'slide') {
$('#locale-select').animate({top:select_position}, 1000, function(){
$(this).removeClass('open');
$(this).fadeOut()
});
}
else if (hide_type == 'disappear'){
$('#locale-select').fadeOut('fast');
$('#locale-select').removeClass('open');
}
}
$('.locale-link').click(function(){
var desired_locale = $(this).attr('rel');
console.log("cookie....." + desired_locale);
createCookie('desired-locale',desired_locale,360);
createCookie('buy_flow_locale',desired_locale,360);
closeSelector('disappear');
})
$('#locale_pop a.close').click(function(){
var show_blip_count = readCookie('show_blip_count');
if (!show_blip_count) {
createCookie('show_blip_count',3,360);
}
else if (show_blip_count < 3 ) {
eraseCookie('show_blip_count');
createCookie('show_blip_count',3,360);
}
$('#locale_pop').slideUp();
return false;
});
I did not find your declaration of the function "createCookie". It seems you copied the code and forgot to copy the function.
Btw: "xxx is not defined" always means the variable/function does not exist ..