demonstration

shows usage of all scripts together to build a (rudimentary) application

by veeuze

HTML

<script src="https://integrate.materialo.com/v2.0/js/vendor/XMLDisplay.js"></script>
<link rel="stylesheet" href="https://integrate.materialo.com/v2.0/css/vendor/XMLDisplay.css">
	<div id="output">
		This is the demonstration: <br />
		<div>
			<form id="choices_form" action="" method="get"></form>
		</div>
		<div>
			<form id="extinfo_form" action="" method="get"></form>
		</div>
		<div id="scenes"></div>
		<div id="objects"></div>
		<div>
			<form id="searchvals_form" action="" method="get"></form>
		</div>
		<div id="materials"></div>
		<div id="mat_detail"></div>
		<div id="render"></div>
	</div>
	<div id="scriptname">
		These are the scripts being called: <br />
	</div>

CSS

@CHARSET "UTF-8";
body {
  white-space: pre;
  font-family: monospace;
}

#scriptname,
#output {
  background-color: #fff;
  padding: 10px;
}

iframe {
  width: 100%;
  height: 500px;
  border: none;
}

.sceneimg {
	margin: 5px;
	cursor: pointer;
}

.sceneimg.act, .objimg.act , .matimg.act {
	border: 2px solid #ce8f34;
}

.objimg, .matimg {
	cursor: pointer;
}

.objimg{
  background-color: #ce8f34;
}

JavaScript

/**
 * 
 */
var cnf = '';
var current_sid = -1;
var current_mid = -1;
var current_onam = '';
var skeys = 'category;category_master';
var svals = 'window_coverings;interior_private';
var current_mode = '';

function choose_demonstration() {
    $('#choices_form').parent().prepend('Please choose a modus:<br/>');
    var select_cnt = 0;
    var choices = {
	options : [ '', 'room', 'furniture' ]
    };
    $.each(choices, function(k, v) {
	$('#choices_form').append($('<select>', {
	    name : k,
	    id : k
	}));
	select_cnt++;
    });

    $.each(choices, function(k, v) {
	for (var i = 0; i < v.length; i++) {
	    v.sort();
	    $('#' + k).append($('<option>', {
		value : v[i],
		text : v[i]
	    }));
	}
    });
    $('#choices_form select')
	    .on(
		    'change',
		    function() {
			$(
				'#extinfo_form, #searchvals_form, #scenes, #objects, #materials, #mat_detail, #render')
				.empty();
			$('#scriptname').html(
				'These are the scripts being called: </br>');
			$('#choices_form').submit();
		    });
    $('#choices_form').on('submit', function(e) {
	e.preventDefault();
	var mkeys = '';
	var mvals = '';
	for (var i = 0; i < select_cnt; i++) {
	    if (i > 0) {
		mkeys += ';';
		mvals += ';';
	    }
	    mkeys += 'choices_' + $('#choices_form select')[i].name;
	    mvals += encodeURIComponent($($('#choices_form select')[i]).val());
	}
	mode = mvals;
	switch (mode) {
	case 'room':
	    cnf = 'demo'
	    get_scenes(skeys, svals);
	    break;
	case 'furniture':
	    cnf = 'housingunits'
	    get_scenes_extinfo();
	    break;

	default:
	    get_scenes(skeys, svals);
	    break;
	}

    });
}

function get_scenes_extinfo() {
    var extinfo = {};
    var extname = [];
    var get_datalist_scenes_extinfo = "https://integrate.materialo.com/v2.0/get_datalist_scenes_extinfo.php?cnf="
	    + cnf;
    $('#scriptname').append(get_datalist_scenes_extinfo + "<br/>");
    $.ajax({
	url : get_datalist_scenes_extinfo,
	type : "GET",
	error : function(jqXHR, textStatus,...