I'm working with makehuman.js. I am trying to figure out how to export the model as it appears in the image. Unfortunately I'm tied to at the latest Tree.js 8.3. What is the markup showing up my console? Is this GLTF or something else? Do these represent nodes in a tree? I am traversing the scene and printing results to the console.
self.scene.traverse ( function (element) {
if (element.visible == true){
//var output = JSON.stringify( element, null, 2 );
console.log(element.id + " " + element.name + " " + element.node )
//console.log(output);
console.log(element);
}
My GLTF Exporter:
var gltfExporter = new THREE.GLTFExporter();
var options = {
trs: true,
onlyVisible: true,
truncateDrawRange: true,
binary: false,
forceIndices: true,
forcePowerOfTwoTextures: true
};
gltfExporter.parse( self.scene, function ( result ) {
var output = JSON.stringify( result, null, 2 );
saveAs(new Blob( [output], {type : 'text/plain;charset=utf-8'}),'scene.gltf');
}, options );
Related
Based on selecting different items in a dropdown, I am generating html of items with check boxes. How can I preserve the state of checkbox i.e. check/uncheck whenever value in dropdown is changing. See the plunkr here https://plnkr.co/edit/PUG3g7dfTbQjPyIgGLzh?p=preview
Steps:
- uncheck 'abc2'
- change dd value to 'international'
- again change the dd value to 'local'
- here 'abc2' must be unchecked...
here is my code:
var data = [
{type: 'local', name: 'abc1', location: 'xyz1', checked: true},
{type: 'local', name: 'abc2', location: 'xyz2', checked: true},
{type: 'international', name: 'abc3', location: 'xyz3', checked: true},
{type: 'local', name: 'abc4', location: 'xyz4', checked: true},
{type: 'local', name: 'abc5', location: 'xyz5', checked: true},
{type: 'international', name: 'abc6', location: 'xyz6', checked: true},
{type: 'international', name: 'abc7', location: 'xyz7', checked: true}
];
var $container = $('#container');
var $splitDD = $('#testDD');
var splitDD$ = Rx.Observable.fromEvent($splitDD, 'change')
.startWith($splitDD.val())
.map(function(e) { $container.html(''); return e.target ? e.target.value : e;})
.switchMap(function(v) {return data;})
.filter(function(v) {
return v.type == $splitDD.val()
})
.map(getHtml)
.subscribe(function(html) {
$container.append(html);
});
function getHtml(v) {
var checked = v.checked ? 'checked="checked"' : '';
var html = '<label><input class="point" name="' + v.name + '" type="checkbox" ' + checked + '>' +
'<span>' + v.name + ' </span>' +
'</label>';
return html;
}
Here is solved: https://plnkr.co/edit/72ciT20saCpLCLFNBbGv?p=preview
Steps:
added onclick listener to checkbox and while checkbox is changed, array is being updated.
1) in getHTML()
var html = '<label><input onclick="CheckboxPreserve(this);" ......
2) added in bottom of scripts.js :
function CheckboxPreserve(el){
var $this = $(el);
for (var key in data) {
if (data[key]['name']==$this.attr("name")) {
data[key]['checked']=$this.is(':checked');
}
}
}
Here's what seemed to work for me:
var splitDD$ = Rx.Observable.fromEvent($splitDD, 'change')
.startWith($splitDD.val())
.map(function(e) { return e.target ? e.target.value : e;})
// See below what this is about
.switchMap(function(v) { return getData$(data); })
// In functional world, you only cause effects to the world in subscribe
// It's not 100% true because we change data above, but it's close
.subscribe(function(items) {
var html = items.map(getHtml);
$container.html(html);
});
function getData$(itemsArray) {
// We can use Rx.Observable.of() and get the entire array, and do some
// and do some optimxations based on that (for example, toArray won't be needed)
// but I'm avoidng changing the symantics of the question
// just in case if they have a reaosn in the real case
return Rx.Observable.from(itemsArray)
// Update checkboxes before filtering because
// the checkbox you are about to update is one you are about to hide
.map(function(v) {
var existing = $container.find("[name='" + v.name + "']");
if(existing.length) {
v.checked = !!existing.prop("checked");
}
return v;
})
.filter(function(v) {return v.type == $splitDD.val();})
// `toArray` needs an observable that completes
// That's why we separate this from the event, which might emit forever
// as the event might fire any time.
.toArray();
}
function getHtml(v) {
var checked = v.checked ? 'checked="checked"' : '';
var html = '<label><input class="point" name="' + v.name + '" type="checkbox" ' + checked + '>' +
'<span>' + v.name + ' </span>' +
'</label>';
return html;
}
Plunker
Another obvious change, and much easier, is to set another event handler, like:
var containerCHK$ = Rx.Observable.fromEvent($container, 'change')
.subscribe(function(e) {
var input = e.target;
var dataPart = data.filter(function(v) {
return v.name == input.name;
});
if(dataPart.length) {
dataPart[0].checked = !! input.checked;
}
});
Plunker
I would like to pass an array in my plugin defaults config settings. I am trying to give the user, the option to add as many title and src variable as they like for instance:
desktop_xl: {
"title":"beach",
"src":"http://images.smh.com.au/2013/02/25/4061249/art-Whitehaven-Beach-620x349.jpg"
},
{
"title":"sunset",
"src":"https://lh5.googleusercontent.com/-Oh0HlfM31BQ/TlXHejUNpeI/AAAAAAAABiI/tQbJJEGEOnU/s400/red_sunset_beach.jpg"
}
I have seen this question on stack overflow but could not find an answer that works for me.
I did some reading and figured out that I can create an array of objects, it works well only on my index.html page as per the below fiddle, http://jsfiddle.net/michelm/7gS6g/2/
The issue is that I would like to use this array as a config option in my plugin so users can add as many title and src variables as they need, but the array does not work inside the plugin.
When I did console.log(desktop_xl); on my index.html page, it shows as an object.
I read the documentation at http://api.jquery.com/jquery.extend/ and from what I understand I need to merge my objects to pass them as a config option, here is the link to my plugin from my drop box account (js fiddle did not take the https link for some reasons), please see below link to jquery.myplugin.js (random name for now, but will use unique naming convention once I work out the logic):
https://www.dropbox.com/s/boadofib6nggfzp/jquery.myplugin.js
Can anyone help me figure out how to pass this variable in my config option so users can add as many "title" and "src" from the option desktop_xl please?
UPDATE:
I have figured out how to pull array information and append it to my images, however, I still have no idea on how to "link" this to the plugin option settings as I need to give the user the option to add as many images with title as they would like in the option settings.
Here is how I have figured out how to pull data from array:
//create img desktop_xl loop
$.each(desktop_xl, function( index , value ){
$('#container').append(
$("<img />").attr({
id: value.title,
src: value.src,
title: value.title
})
);
});
UPDATE 2:
I have done some more work on the plugin, here is the code so far:
;(function($, window, document, undefined){
//define MyjQueryPlugin object with default config settings:
$.MyjQueryPlugin = {
defaults: {
imagecontainer: "#container",
version: "v01"
// add my Arrays to default options here?
// arrays should allow users to add as many images to #container div as they require
// arrays are desktop_xl[] , desktop_l[] , ipad_p[] , mobile_l[], mobile_p[]
}
};
//extend jquery with the plugin
$.fn.extend({
MyjQueryPlugin:function(config) {
//use defaults or properties supplied by user
var config = $.extend({}, $.MyjQueryPlugin.defaults, config );
//append slides
$(config.imagecontainer).append('<div class="imagecontainerfordesktop_xlarray" </div>').css('height', $(window).height() );
// append MyjQueryPlugin sidebar
this.append( '<div id="Mysidebar" class="open">' +
'<p class="review">Version ' + config.version + '- ready for review</p>'+
'<hr>' +
'</div>')
.children()
.css('height', $(window).height() );
//create array of objects
var desktop_xl = [
{
"title":"Homepage", // text for sidebar
"src":"slides/1200/Homepage.jpg"// path to image >= 1200px wide
},
{
"title":"Categories", // text for sidebar
"src":"slides/1200/Categories.jpg"// path to image >= 1200px wide
},
{
"title":"Product description", // text for sidebar
"src":"slides/1200/Product_description.jpg" // path to image >= 1200px wide
}
];
var desktop_l = [
// if array is empty, remove elements from the page
];
var ipad_p = [
{
"title":"Homepage", // text for sidebar
"src":"slides/480/Homepage.jpg" // path to image >= 480px wide
}
];
var mobile_l = [];
var mobile_p = [];
// set Global Variables
var width = $(window).width();
var currHeight = $(window).height();
var ctrl = $(".ctrl");
var ulscreenlia = $('ul.screen li a');
var sidebarlia = $('#MyjQueryPluginsidebar li a');
var sidebar = $("#MyjQueryPluginsidebar");
var ulscreenli = $('ul.screen li');
if (desktop_xl.length === 0) {
ulscreenli.eq(0).hide();
$('div.select_join option[value="xld"]').remove();
}
if (desktop_l.length === 0) {
ulscreenli.eq(1).hide();
$('div.select_join option[value="ld"]').remove();
}
if (ipad_p.length === 0) {
ulscreenli.eq(2).hide();
$('div.select_join option[value="ip"]').remove();
}
if (mobile_l.length === 0) {
ulscreenli.eq(3).hide();
$('div.select_join option[value="ml"]').remove();
}
if (mobile_p.length === 0) {
ulscreenli.eq(4).hide();
$('div.select_join option[value="mp"]').remove();
}
//create img desktop_xl loop
$.each(desktop_xl, function( index , value ){
$('#container .slides-xld').append(
//getting values from array but cannot understand how to pass array(s): desktop_xl, desktop_l, ipad_p, mobile_l, mobile_p inside config option
//And Each arrays should allow user to add multiple images to #container dive
$("<img />").attr({
id: value.title,
src: value.src,
title: value.title
})
);
});
//create img ipadp loop
$.each(ipad_p, function( index , value){
$('#container .slides-ipadp').append(
$("<img />").attr({
id: value.title,
src: value.src,
title: value.title
})
);
});
function rundateobject(){
var current_date = new Date ( );
var month_names = new Array ( );
month_names[month_names.length] = "January";
month_names[month_names.length] = "February";
month_names[month_names.length] = "March";
month_names[month_names.length] = "April";
month_names[month_names.length] = "May";
month_names[month_names.length] = "June";
month_names[month_names.length] = "July";
month_names[month_names.length] = "August";
month_names[month_names.length] = "September";
month_names[month_names.length] = "October";
month_names[month_names.length] = "November";
month_names[month_names.length] = "December";
var day_names = new Array ( );
day_names[day_names.length] = "Sunday";
day_names[day_names.length] = "Monday";
day_names[day_names.length] = "Tuesday";
day_names[day_names.length] = "Wednesday";
day_names[day_names.length] = "Thursday";
day_names[day_names.length] = "Friday";
day_names[day_names.length] = "Saturday";
$('#date').html( day_names[current_date.getDay()]
+ ', '
+ month_names[current_date.getMonth()]
+ ' '
+ current_date.getDate()
+ ' '
+ current_date.getFullYear() );
};
//create animation for anchor links with jQuery DOM ready function
$(function(){
$('a').hover(function(){
$(this).animate({
'margin-left':10,
'padding-left':20
},200);
$(this).dequeue();
},
function() {
$(this).animate({
'margin-left':0,
'padding-left':15
},200);
$(this).dequeue();
}
);
});
//on resize browser, adjust elements height
//initialise plugins
$(".nano").nanoScroller();
//initialise functions
rundateobject();
//return the jquery object for chaining
return this;
}// config options
}); // jQuery extend
})(jQuery, window, document);
The answer was given to me on jquery.com by user kbwood.au
defaults: {
imagecontainer: "#container",
version: "v01",
desktop_xl: [] //Array
}
Then in the .each function we need to pass the array as a config.desktop_xl:
//create img desktop_xl loop
$.each(config.desktop_xl, function( index , value ){
$('#container').append(
$("<img />").attr({
id: value.title,
src: value.src,
title: value.title
})
);
});
I have a problem with my script. I want to remove the load more button and instead do an infinite scroll when I get to bottom of the page.
I'm using a WordPress template and without support I'm stuck on this nonsense.
What should I change to do to this script?
jQuery(document).ready(function($){
var $container = $('#hentry-wrapper');
// Isotope
// modified Isotope methods for gutters in masonry
$.Isotope.prototype._getMasonryGutterColumns = function() {
var gutter = this.options.masonry && this.options.masonry.gutterWidth || 0;
containerWidth = this.element.width();
this.masonry.columnWidth = this.options.masonry && this.options.masonry.columnWidth ||
// or use the size of the first item
this.$filteredAtoms.outerWidth(true) ||
// if there's no items, use size of container
containerWidth;
this.masonry.columnWidth += gutter;
this.masonry.cols = Math.floor( ( containerWidth + gutter ) / this.masonry.columnWidth );
this.masonry.cols = Math.max( this.masonry.cols, 1 );
};
$.Isotope.prototype._masonryReset = function() {
// layout-specific props
this.masonry = {};
// FIXME shouldn't have to call this again
this._getMasonryGutterColumns();
var i = this.masonry.cols;
this.masonry.colYs = [];
while (i--) {
this.masonry.colYs.push( 0 );
}
};
$.Isotope.prototype._masonryResizeChanged = function() {
var prevSegments = this.masonry.cols;
// update cols/rows
this._getMasonryGutterColumns();
// return if updated cols/rows is not equal to previous
return ( this.masonry.cols !== prevSegments );
};
var loadMore = $('#load-more');
var posts_per_page = parseInt(loadMore.attr('data-perpage'));
var offset = posts_per_page;
var totalPosts = parseInt(loadMore.attr('data-total-posts'));
var author = parseInt(loadMore.attr('data-author'));
var category = parseInt(loadMore.attr('data-category'));
var tag = loadMore.attr('data-tag');
var datemonth = loadMore.attr('data-month');
var dateyear = loadMore.attr('data-year');
var search = loadMore.attr('data-search');
var loader = $('#posts-count').attr('data-loader');
if (!author) author = 0;
if (!category) category = 0;
if (!tag) tag = '';
if (!datemonth) datemonth = 0;
if (!dateyear) dateyear = 0;
if (!search) search = '';
// cache jQuery window
var $window = $(window);
// start up isotope with default settings
$(window).load(function(){
reLayout();
$window.smartresize( reLayout );
if (offset < totalPosts) {
$('#nav-pagination-load-more').fadeIn(200);
mega_initLoadMore();
}
});
function reLayout() {
var mediaQueryId = getComputedStyle( document.body, ':after' ).getPropertyValue('content');
// fix for firefox, remove double quotes "
//mediaQueryId = mediaQueryId.replace( /"/g, '' );
//console.log( mediaQueryId );
var windowSize = $window.width();
var masonryOpts;
// update sizing options
switch ( mediaQueryId ) {
case 'large' :
masonryOpts = {
gutterWidth: 0
};
break;
case 'big' :
masonryOpts = {
//columnWidth: 297,
gutterWidth: 0
};
break;
case 'medium' :
masonryOpts = {
//columnWidth: 269,
gutterWidth: 0
};
break;
case 'small' :
masonryOpts = {
//columnWidth: $container.width() / 4,
gutterWidth: 0
};
break;
case 'tiny' :
masonryOpts = {
//columnWidth: $container.width() / 1,
gutterWidth: 0
};
break;
}
$container.isotope({
resizable: false, // disable resizing by default, we'll trigger it manually
itemSelector : '.type-post',
transformsEnabled: false, // Firefox Vimeo issue
masonry: masonryOpts
}).isotope( 'reLayout' );
}
function mega_initLoadMore(){
loadMore.click(function(e) {
$(this).unbind("click").addClass('active');
$('#posts-count').html('<img src="'+ loader +'"/>');
e.preventDefault();
mega_loadMorePosts();
});
}
function mega_reLayout(){
$container.isotope( 'reLayout' );
}
function mega_loadMorePosts(){
jQuery.ajax({
url: megaAjax.ajaxurl,
type: 'POST',
data: {
action : 'mega_ajax_blog',
nonce : megaAjax.nonce,
category: category,
author: author,
tag: tag,
datemonth: datemonth,
dateyear: dateyear,
search: search,
offset: offset
},
success: function( data ) {
var $newElems = $(data);
// ensure that images load before adding to masonry layout
$newElems.imagesLoaded( function(){
// FitVids
$('.fluid-video, .entry-content', $newElems).fitVids();
$container.append($newElems).isotope( 'appended', $newElems );
// Flex Slider
$('.flexslider', $newElems).flexslider({
animation: "fade",
slideshow: false,
keyboard: false,
directionNav: true,
touch: true,
prevText: "",
nextText: ""
});
setTimeout(function(){
mega_reLayout();
}, 1000);
offset = offset + posts_per_page;
loadMore.removeClass('active');
if (offset < totalPosts){
$('#posts-count').text('');
loadMore.bind("click", mega_initLoadMore());
}
else {
setTimeout(function(){
loadMore.parent().remove();
}, 1000 );
}
});
}
});
return false;
}
});
I think this script is taken from "HEAT WORDPRESS THEME" directly which is located in js folder of the theme. Its simple to modify,you just need to remove Ajax post loading function and keep Isotop initializing function only. For help see this link
http://www.shambix.com/en/isotope-twitter-bootstrap-infinite-scroll-fluid-responsive-layout/
I am trying to implement the jquery mobile autocomplete functionality, because i have a list of around 3000 items.
I have a json that has this structure:
[{"v1":" abcd","v2":"http://www.url.nl","v3":0487,"v4":"street12","v5":"H"},
{"v1":" qq","v2":"http://www.url.nl","v3":0297,"v4":"street14","v5":"A"},
{"v1":" zz","v2":"http://www.url.nl","v3":0117,"v4":"street55","v5":"A"}]
I am using this example: http://jquerymobile.com/demos/1.3.0-rc.1/docs/demos/widgets/autocomplete/autocomplete-remote.html
but i can not get this to work with my json file.
$( document ).on( "pageinit", "#myPage", function() {
$( "#autocomplete" ).on( "listviewbeforefilter", function ( e, data ) {
var $ul = $( this ),
$input = $( data.input ),
value = $input.val(),
html = "";
$ul.html( "" );
if ( value && value.length > 2 ) {
$ul.html( "<li><div class='ui-loader'><span class='ui-icon ui-icon-loading'></span></div></li>" );
$ul.listview( "refresh" );
$.ajax({
url: "http://gd.geobytes.com/AutoCompleteCity",
dataType: "jsonp",
crossDomain: true,
data: {
q: $input.val()
}
})
.then( function ( response ) {
$.each( response, function ( i, val ) {
html += "<li>" + val + "</li>";
});
$ul.html( html );
$ul.listview( "refresh" );
$ul.trigger( "updatelayout");
});
}
});
});
I have the feeling that it has to with the ajax call and my json file, but I haven't found the solution yet.
I am using fullcalendar to upload dates times to my database and i have the following script
$dialogContent.dialog({
modal: true,
title: "New Listing",
close: function() {
$dialogContent.dialog("destroy");
$dialogContent.hide();
},
buttons: {
save : function () {
calEvent.id = id;
id++;
calEvent.start = new Date(startField.val());
calEvent.end = new Date(endField.val());
calEvent.title = titleField.val();
calEvent.body = bodyField.val();
$.ajax({
type: "POST",
url: "addnew.php",
data: (
{
'st':new Date(startField.val()),
'et':new Date(endField.val()),
'title':titleField.val(),
'body':bodyField.val()
}
),
success: function(msg){
alert( "Data Saved: " + msg );
}
});
However my date values are not being sent at all. Its wrong but I don't know how or why.
the Date constructor does not parse any old date string. use fullCalendar's parsing function instead (provided you are using ISO8061 format):
http://arshaw.com/fullcalendar/docs/utilities/parseDate/
What value of date do you get in server side?
May be, you should to send simple data type like UNIX timestamp or using .serialize() for your form.
I have been playing around with ParseDate but I'm just not getting results, seems I have the concept all wrong;
dayClick : function(date, allDay, jsEvent, view) {
var $dialogContent = $("#event_edit_container");
y = date.getFullYear();
m = date.getMonth();
d = date.getDate();
h1 = date.getHours();
m1 = date.getMinutes();
h2 = h1 + 1;
m2 = m1;
calEvent = { title: 'New Calendar Event', editable:true, distributor: '', etype: '', location: '', website: '', start: new Date(y, m, d, h1, m1), end: new Date(y, m, d, h2, m2), allDay: false };
$calendar.fullCalendar("renderEvent",calEvent, true);
resetForm($dialogContent);
var startField = $dialogContent.find("select[name='start']").val(calEvent.start);
var endField = $dialogContent.find("select[name='end']").val(calEvent.end);
var titleField = $dialogContent.find("input[name='title']").val(calEvent.title);
var distributorField = $dialogContent.find("input[name='distributor']").val(calEvent.distributor);
var etypeField = $dialogContent.find("select[name='etype']").val(calEvent.etype);
var locationField = $dialogContent.find("input[name='location']").val(calEvent.location);
var websiteField = $dialogContent.find("input[name='website']").val(calEvent.website);
var bodyField = $dialogContent.find("textarea[name='body']");
//var start_date = eval($.fullCalendar.parseDate(this_one['start']).getTime()) / 1000;
$dialogContent.dialog({
modal: true,
title: "New Listing",
close: function() {
$dialogContent.dialog("destroy");
$dialogContent.hide();
},
buttons: {
save : function () {
calEvent.id = id;
id++;
calEvent.start = $.fullCalendar.parseDate(new Date(startField.val()));
calEvent.end = new Date(endField.val());
calEvent.title = titleField.val();
calEvent.distributor = distributorField.val();
calEvent.etype = etypeField.val();
calEvent.location = locationField.val();
calEvent.website = websiteField.val();
calEvent.body = bodyField.val();
//$.fullCalendar.parseDate(calEvent.start);
//calEvent.st = start_date.val();
//$.fullCalendar.parseDate(startField.val());
$.ajax({
type: "POST",
url: "addnew.php",
data: (
{
'st':calEvent.start,
'et':new Date(endField.val()),
'title':titleField.val(),
'distributor':distributorField.val(),
'etype':etypeField.val(),
'location':locationField.val(),
'website':websiteField.val(),
'body':bodyField.val()
}
),
success: function(msg){
alert( "Data Saved: " + msg );
}
});
I'm at a brick wall with this I've tried tons of variations of hte code but its all just guess work. If there is an example of the date filed being passed or even printed out I'd really appreciate it just to see how this should work. Trial and error is not working for me in this case.
Thanks
It's late and i haven't used Javascript in a while, but surely it's input.value not input.val()