simulator2d.js

// jshint esversion: 6
	let factorsHor, factorsVer;
	let simulatorTimestamp, simulatorDataTs;
	if (document.location.search.indexOf('machine=esrf')>-1 || document.location.search.indexOf('machine=simulator_esrf')>-1) {
		factorsHor = {"": 1000, "position": 100000, 'beta': 0.2, 'eta': 100, 'mu': 0.2, 'sigma': 20000};
		factorsVer = {"": 1000, "position": 1000, 'beta': 0.1, 'eta': 100, 'mu': 0.2, 'sigma': 50000};
	}
	else if (document.location.search.indexOf('machine=simulator_soleil')>-1) {
		factorsHor = {"": 1000, "position": 50000, 'beta': 0.2, 'eta': 50, 'mu': 0.2, 'sigma': 20000};
		factorsVer = {"": 1000, "position": 10000, 'beta': 0.1, 'eta': 100, 'mu': 0.2, 'sigma': 50000};
	}
	else if (document.location.search.indexOf('machine=elettra2')>-1) {
		factorsHor = {"": 1000, "position": 500000, 'beta': 0.2, 'eta': 50, 'mu': 0.2, 'sigma': 20000};
		factorsVer = {"": 1000, "position": 500000, 'beta': 0.1, 'eta': 100, 'mu': 0.2, 'sigma': 50000};
	}
	else {
		factorsHor = {"": 1000, "position": 5000, 'beta': 0.5, 'eta': 100, 'mu': 0.2, 'sigma': 5000000};
		factorsVer = {"": 1000, "position": 5000, 'beta': 0.25, 'eta': 100, 'mu': 0.2, 'sigma': 5000000};
	}
	let simulator = document.location.search.indexOf('simulator=')>-1? document.location.search.split('simulator=')[1].split('&')[0]: '';
	const readerPeriod = document.location.search.indexOf('readerPeriod=')>-1? document.location.search.split('readerPeriod=')[1].split('&')[0]: 200;
	const displayerPeriod = document.location.search.indexOf('displayerPeriod=')>-1? document.location.search.split('displayerPeriod=')[1].split('&')[0]: 200;
	const visibility = simulator==''? 'hidden': 'visible';
	const scaleType = 'slider';
	const simfacilities = [];
	let simulatorDataHor = [];
	let simulatorDataVer = [];
	let scaleHor;
	let scaleVer;
	let simulatorBuffer = false;
	let logScaleHor = false;
	let logScaleVer = false;
	let simulatorFactorHor = document.location.search.indexOf('simulatorFactorHor=')>-1? document.location.search.split('simulatorFactorHor=')[1].split('&')[0]*1000*(simulator=='sigma'? 1000000: 1): factorsHor[simulator]*1000;
	let simulatorFactorVer = document.location.search.indexOf('simulatorFactorVer=')>-1? document.location.search.split('simulatorFactorVer=')[1].split('&')[0]*1000*(simulator=='sigma'? 1000000: 1): factorsVer[simulator]*1000;
	const scaleSteps = 10;
	let ruler = document.location.search.indexOf('ruler')>-1;
	const main = document.getElementById('main');
	rulerInit();
	main.addEventListener('mousemove', function(e) {getRulerPosition(main, e);});
	if (ruler) {
		main.style.cursor = 'crosshair';
	}
	else $('#rulerg').hide();
	function myreference(param) {
		const dir = param.split('_')[0];
		const action = param.split('_')[1];
		if (action=='set') {
			localStorage.setItem('reference'+simulator+dir, JSON.stringify(simulatorBuffer[dir=='hor'? 'Hor': 'Ver']));
			$("#sr_simulatorreference"+dir).attr('visibility', "visible");
		}
		if (action=='clear') {
			localStorage.removeItem('reference'+simulator+dir);
			$("#sr_simulatorreference"+dir).attr('visibility', "hidden");
		}
	}
	function elapseHor(step, up) {
		// console.log('elapseHor()',step,scaleHor.$fill.style.width, (scaleSteps-step)/scaleSteps*90);
		if (up) {
			if (step<scaleSteps) {const pc = Math.round((scaleSteps-step)/scaleSteps*90); scaleHor.$fill.style.width=pc+"%";setTimeout(elapseHor, 20, step+1, up); return;}
			const buf = scaleHor._max; 
			scaleHor.max(buf*10); 
			scaleHor.min(buf/10); 
			scaleHor.step(buf/100);
		}
		else {
			if (step<scaleSteps) {const pc = Math.round(step/scaleSteps*10); scaleHor.$fill.style.width=pc+"%";setTimeout(elapseHor, 20, step+1, up); return;}
			const buf = scaleHor._max/10; 
			scaleHor.max(buf); 
			scaleHor.min(buf/100);
			scaleHor.step(buf/1000);
		}
		scaleHor.$fill.style.width="10%";
		scaleHor.$fill.style.borderColor = '#2cc9ff';
	}
	function elapseVer(step, up) {
		if (up) {
			if (step<scaleSteps) {const pc = Math.round((scaleSteps-step)/scaleSteps*90); scaleVer.$fill.style.width=pc+"%";setTimeout(elapseVer, 20, step+1, up); return;}
			const buf = scaleVer._max; 
			scaleVer.max(buf*10); 
			scaleVer.min(buf/10); 
			scaleVer.step(buf/100);
		}
		else {
			if (step<scaleSteps) {const pc = Math.round(step/scaleSteps*10); scaleVer.$fill.style.width=pc+"%";setTimeout(elapseVer, 20, step+1, up); return;}
			const buf = scaleVer._max/10; 
			scaleVer.max(buf); 
			scaleVer.min(buf/100);
			scaleVer.step(buf/1000);
		}
		scaleVer.$fill.style.width="10%";
		scaleVer.$fill.style.borderColor = '#2cc9ff';
	}
	function finishHor() {
		// console.log('finishHor()', scaleHor.$fill.style.width);
		if (scaleHor.$fill.style.width=="100%" || scaleHor.$fill.style.width=="0%") {
			// scaleHor.$fill.style.borderColor = 'yellow';
			setTimeout(elapseHor, 200, 1, scaleHor.$fill.style.width=="100%");
		}
	}
	function finishVer() {
		if (scaleVer.$fill.style.width=="100%" || scaleVer.$fill.style.width=="0%") {
			setTimeout(elapseVer, 200, 1, scaleVer.$fill.style.width=="100%");
		}
	}
	function factorHor(v) {
		// console.log('factorHor(v)', v, scaleHor.$fill.style.width);
		scaleHor.$fill.style.borderColor = (scaleHor.$fill.style.width=="100%" || scaleHor.$fill.style.width=="0%")? 'yellow': '#2cc9ff';
		simulatorFactorHor = v * 1000;
		rulerScale();
	}
	function factorVer(v) {
		console.log('factorVer(v)', v, scaleVer.$fill.style.width);
		scaleVer.$fill.style.borderColor = (scaleVer.$fill.style.width=="100%" || scaleVer.$fill.style.width=="0%")? 'yellow': '#2cc9ff';
		simulatorFactorVer = v * 1000;
		rulerScale();
	}
	function logscale(dirNum) {
		if (dirNum==0) logScaleHor = $('#logHor').attr('checked')=='checked';
		else logScaleVer = $('#logVer').attr('checked')=='checked';
	}
	function guiscale(gui, id) {
		const i = gui.children.length - 1;
		gui.children[i].domElement.style.display = 'none';
		gui.children[i].domElement.setAttribute('id', id);
	}
	function simulatorMenu(lattice, facilities, params) {
		console.log('simulatorMenu',lattice, facilities, params, gui);
		if (['elettra2', 'esrf', 'soleil'].indexOf(machine)>-1) for (let i=0; i<gui.children.length; i++) {
			if (['vlv', 'ps', 'bpm', 'blm'].indexOf(gui.children[i].property)>-1) gui.children[i].domElement.style.display = 'none';
		}
		// params.simulator = false;
		$('.simulatorhor').css('display', 'none');
		$('.simulatorver').css('display', 'none');
		params.simulator = document.location.search.indexOf('simulator')>-1 && document.location.search.indexOf('=simulator')==-1? 'position': '';
		if (document.location.search.indexOf('simulator=')>-1) params.simulator = document.location.search.split('simulator=')[1].split('&')[0];
		const options = ['', 'position', 'beta', 'eta', 'mu', 'sigma'];
		if (options.indexOf(params.simulator)==-1) params.simulator = 'position';
		gui.add(params, 'simulator', options).name('simulator H <img id="h" src="red.svg" style="margin-bottom: -4px;">&nbsp;&nbsp;&nbsp;V <img id="v" src="green.svg" style="margin-bottom: -4px;"> ').onChange(function() {simulatorSwitch(compData, params);});
		const maxVer = Math.pow(10, Math.floor(Math.log10(simulatorFactorVer/1000))+2);
		const maxHor = Math.pow(10, Math.floor(Math.log10(simulatorFactorHor/1000))+2);
		if (scaleType == 'slider') {
			menuParams['ruler'] = ruler;
			gui.add(menuParams, 'ruler').onChange(function() {rulerSwitch();});
			guiscale(gui, 'ruler');
			menuParams['scale H'] = simulatorFactorHor/1000;
			scaleHor = gui.add(menuParams, 'scale H', maxVer/100, maxVer, Math.round(maxVer/1000)).onChange(function() {factorHor(menuParams['scale H'], gui);}).onFinishChange(function() {finishHor(gui);});
			guiscale(gui, 'scaleh');
			$('#scaleh').children().eq(0).css('color','red');
			menuParams['scale V'] = simulatorFactorHor/1000;
			scaleVer = gui.add(menuParams, 'scale V', maxHor/100, maxHor, Math.round(maxHor/1000)).onChange(function() {factorVer(menuParams['scale V'], gui);}).onFinishChange(function() {finishVer(gui);});
			guiscale(gui, 'scalev');
			$('#scalev').children().eq(0).css('color','green');
		}
		else {
			const controllerOption = $('.controller.option');
			for (let i=0; i<controllerOption.length; i++) {
				if (controllerOption.eq(i).children()[0].innerText.indexOf("simulator H") > -1) {
					$('<div class="simulatorgauge"><iframe id="vergauge" style="width: 100%;height:250px;" src="../misc/gauge.html?dark&r=115&ringwidth=30&max='+maxVer+'&throttlingPeriod=50&apply=factorVer&extbackground=green&exthighlight=darkgreen&intbackground=green&inthighlight=darkgreen&val='+simulatorFactorVer/1000+'"></iframe></div>').insertAfter(controllerOption.eq(i));
					$('<div class="simulatorgauge"><iframe id="horgauge" style="width: 100%;height:250px;" src="../misc/gauge.html?dark&r=115&ringwidth=30&max='+maxHor+'&throttlingPeriod=50&apply=factorHor&extbackground=red&exthighlight=darkred&intbackground=red&inthighlight=darkred&val='+simulatorFactorHor/1000+'"></iframe></div>').insertAfter(controllerOption.eq(i));
					$('<div style="padding: 8px;" class="simulatorgauge">log scale  H <img id="h" src="red.svg" style="margin-bottom: -2px;"> <input type="checkbox" id="logHor" onChange="logscale(0)">&nbsp;&nbsp;&nbsp;log V <img id="h" src="green.svg" style="margin-bottom: -2px;"> <input type="checkbox" id="logVer" onChange="logscale(1)"></div>').insertAfter(controllerOption.eq(i));
					if (simulator=='') $('.simulatorgauge').hide();
				}
			}
		}
		for (let f in facilities) {
			const b = facilities[f];
			if (b!='sr') continue;
			console.log('simulatorMenu() - ', b, lattice[b], conf.simulatorSrcUrl);
			compData[b].map = [];
			console.log((conf.simulatorSrcUrl+'&machine='+machine).replace('?&','?'));
			fetch((conf.simulatorSrcUrl+'&machine='+machine).replace('?&','?'), {cache: "no-store"})
			.then((response) => {return response.json();})
			.then((simulatorNaming) => {
				console.log('simulatorNaming', simulatorNaming);
				for (let i in simulatorNaming) {
					const name = simulatorNaming[i];
					if (name=='SCRPH_S11' || name=='SCRPV_S11') continue;
					for (let bl in compData[b].obj) {
						if (name==compData[b].obj[bl].replace('CHV', 'CH') || name==compData[b].obj[bl].replace('CHV', 'CH').replace('.','_')) {compData[b].map[i] = bl;}
					}
				}
				console.log('simulatorMenu(), name', b, compData[b], lattice[b]);
				for (let fi in facilities) {
					const facility = facilities[fi];
					if (facility!='sr') continue;
					console.log(fi, facility, compData);
					if (facility.length>0 && typeof compData[facility]!='undefined' && compData[facility].obj && compData[facility].obj.length>0) {
						console.log('simulatorInit', facility, compData[facility]);
						const dhor = [];
						const dver = [];
						for (i=0; i<compData[facility].pos.length; i++) {
							// if (i>threshold) break; 
							const dir = compData[facility].dir[i]; 
							const beta = Math.PI*dir/180;
							if (threshold<1000) console.log('i', i, 'pos',compData[facility].pos[i], 'dir', dir, beta, Math.cos(beta), Math.sin(beta));
							dhor.push((i==0?'M':'L')+ 
								  Math.round(compData[facility].pos[i][0] - f*Math.sin(beta)) + ' ' + 
								  Math.round(compData[facility].pos[i][1] + f*Math.cos(beta))
							);
							dver.push((i==0?'M':'L')+ 
								  Math.round(compData[facility].pos[i][0] - f*1.05*Math.sin(beta)) + ' ' + 
								  Math.round(compData[facility].pos[i][1] + f*1.05*Math.cos(beta))
							);
						}
						appendSvg("path", {id:facility+"_simulatorhor", class: "simulatorhor trajectory "+facility, visibility:visibility, name:"simulatorhor", fill: "none", "stroke-width":"150", "stroke":"red", "stroke-opacity":"0.6", d: dhor.join(' ')+(lattice[facility].sections[0].chamber?' Z':'')}, simulator_clicked_hor, false, false, '.svg-pan-zoom_viewport');
						// appendSvg("path", {id:facility+"_simulatorreferencehor", class: "simulatorhor trajectory "+facility, visibility:visibility, name:"simulatorreferencehor", fill: "none", "stroke-width":"150", "stroke":"darkred", "stroke-opacity":"0.9", d: dhor.join(' ')+(lattice[facility].sections[0].chamber?' Z':'')}, simulator_clicked_hor, false, false, '.svg-pan-zoom_viewport');
						appendSvg("path", {id:facility+"_simulatorver", class: "simulatorver trajectory "+facility, visibility:visibility, name:"simulatorver", fill: "none", "stroke-width":"150", "stroke":"limegreen", "stroke-opacity":"0.6", d: dver.join(' ')+(lattice[facility].sections[0].chamber?' Z':'')}, simulator_clicked_ver, false, false, '.svg-pan-zoom_viewport');
						// appendSvg("path", {id:facility+"_simulatorreferencever", class: "simulatorver trajectory "+facility, visibility:visibility, name:"simulatorreferencever", fill: "none", "stroke-width":"150", "stroke":"darkgreen", "stroke-opacity":"0.9", d: dver.join(' ')+(lattice[facility].sections[0].chamber?' Z':'')}, simulator_clicked_ver, false, false, '.svg-pan-zoom_viewport');
						// console.log("path", {id:facility+"_simulatorhor", name:"simulatorhor", d: dver.join(' ')+' Z'});
					}
				}
				rulerScale();
			});
		}
		if (document.location.search.indexOf('simulator')>-1) {/*params.simulator=true;*/ setTimeout(simulatorSwitch, 500, compData, params);}
	}
	// const threshold = document.location.search.indexOf('threshold=')>-1? document.location.search.split('threshold=')[1].split('&')[0]: 1000;
	// const f = document.location.search.indexOf('factor=')>-1? document.location.search.split('factor=')[1].split('&')[0]: 3000;
	function simulator_clicked_hor(event) {
		// console.log('simulator hor', event);
		openTooltip('trajectory hor '+event.clientX+' '+event.clientY);
	}
	function simulator_clicked_ver(lattice, params) {
		// console.log('simulator ver');
		openTooltip('trajectory ver'+event.clientX+' '+event.clientY);
	}
	function simulator2d(lattice, params) {
		console.log('simulator2d',lattice, params);
		for (let i in lattice) {if (i!='conf') simfacilities.push(i);}
		simulatorMenu(lattice, simfacilities, params);
	}
	function getRulerPosition(main, event) {
		// console.log('clickStat', clickStat);
		if (clickStat) return;
		const rect = main.getBoundingClientRect();
		const x = event.clientX - rect.left;
		const y = event.clientY - rect.top;
		const vertex = [];
		let p;
		let minDistance = Infinity;
		let d = 0;
		let dindex = -1;
		const x1 = (x - panZoomPanther.getPan().x) / panZoomPanther.getSizes().realZoom;
		const y1 = (y - panZoomPanther.getPan().y) / panZoomPanther.getSizes().realZoom;
		for (let i=0; i < lattice.sr.sections.length; i++) {
			const j = (i+1) % lattice.sr.sections.length;
			vertex[i] = lattice.sr.sections[i].start;
			d = pDistance(x1, y1, vertex[i].x, vertex[i].z, lattice.sr.sections[j].start.x, lattice.sr.sections[j].start.z);
			if (minDistance > d.dist) { minDistance = d.dist; dindex = i; p = d;}
		}
		const i = dindex;
		const j = (i+1) % lattice.sr.sections.length;
		const alpha = 180/Math.PI*Math.atan2(lattice.sr.sections[j].start.z-lattice.sr.sections[i].start.z, lattice.sr.sections[j].start.x-lattice.sr.sections[i].start.x);
		// console.log(dindex, p.dist, p.x, p.y, alpha);
		$('#rulerg').attr('transform', 'translate('+ (p.x)+' '+(p.y)+'),rotate('+alpha+')');
	}
	function rulerScale() {
		const units = [' m', '00 mm', '0 mm', ' mm', '00 &mu;', '0 &mu;', '&mu;', '00 nm', '0 nm', ' nm'];
		const scaleh = $('#scaleh').children().eq(1).children()[1].value-0;
		const scalehunit = Math.ceil(Math.log10(scaleh));
		const scalehfactor = scaleh/Math.pow(10, scalehunit);
		const scalev = $('#scalev').children().eq(1).children()[1].value-0;
		const scalevunit = Math.ceil(Math.log10(scalev));
		const scalevfactor = scalev/Math.pow(10, scalevunit);
		console.log('scalehfactor', scaleh, scalehunit, scalehfactor);
		$('#redruler1').attr('y2', -10000*scalehfactor);
		$('#greenruler1').attr('y2', 10000*scalevfactor);
		for (let i=0; i<=10; i++) {
			const yh = (-i*1000*scalehfactor);
			$('#redtick1'+(100-i)).attr('y1', yh);
			$('#redtick1'+(100-i)).attr('y2', yh);
			$('#redlabel'+(100-i)).attr('y', yh);
			$('#redlabel'+(100-i)).html(i+units[scalehunit]);
			const yv = (-i*1000*scalevfactor);
			$('#greentick1'+(100-i)).attr('y1', -yv);
			$('#greentick1'+(100-i)).attr('y2', -yv);
			$('#greenlabel'+(100-i)).attr('y', -yv);
			$('#greenlabel'+(100-i)).html(i+units[scalevunit]);
		}
	}
	function rulerSwitch() {
		$('#rulerg').toggle();
	}
	function rulerInit() {
		const cx=0, cy=0;
		appendSvg("g", {id: 'rulerg'}, false, false, 'rulerclass');
		appendSvg("line", {id: 'ruler1', x1: cx-10100, y1: cy, x2: cx+10100, y2: cy, style:"display: block", stroke:"yellow", "stroke-width":100}, false, false, 'rulerclass', '#rulerg');
		for (let i=-10; i<=10; i++) {
			const xt = (cx+i*1000);
			appendSvg("line", {id: 'tick1'+(100-i), x1: xt, y1: cy, x2: xt, y2: cy+300, style:"display: block", stroke:"yellow","stroke-width":100}, false, false, 'rulerclass', '#rulerg');
			appendSvg("text", {id: 'label'+(100-i), x: xt-300, y: cy+600, fill:"yellow", stroke:"black","stroke-width":1, "font-family":"Arial", "font-size":300, "font-weight":"bold", "text-anchor": "start"}, false, false, 'rulerclass', '#rulerg');
			if (i) $('#label'+(100-i)).html(Math.abs(i)+' m');
		}
		appendSvg("line", {id: 'redruler1', x1: cx, y1: cy, x2: cx, y2: cy+10100, style:"display: block", stroke:"red", "stroke-width":100}, false, false, 'rulerclass', '#rulerg');
		for (let i=0; i<=10; i++) {
			const yt = (cy+i*1000);
			appendSvg("line", {id: 'redtick1'+(100-i), x1: cx, y1: yt, x2: cx+300, y2: yt, style:"display: block", stroke:"red","stroke-width":100}, false, false, 'rulerclass', '#rulerg');
			appendSvg("text", {id: 'redlabel'+(100-i), x: cx+400, y: yt, fill:"red", stroke:"black","stroke-width":1, "font-family":"Arial", "font-size":300, "font-weight":"bold", "text-anchor": "start"}, false, false, 'rulerclass', '#rulerg');
		}
		appendSvg("line", {id: 'greenruler1', x1: cx, y1: cy, x2: cx, y2: cy-10100, style:"display: block", stroke:"green", "stroke-width":100}, false, false, 'rulerclass', '#rulerg');
		for (let i=0; i<=10; i++) {
			const yt = (cy-i*1000);
			appendSvg("line", {id: 'greentick1'+(100-i), x1: cx, y1: yt, x2: cx+300, y2: yt, style:"display: block", stroke:"green","stroke-width":100}, false, false, 'rulerclass', '#rulerg');
			appendSvg("text", {id: 'greenlabel'+(100-i), x: cx+400, y: yt, fill:"green", stroke:"black","stroke-width":1, "font-family":"Arial", "font-size":300, "font-weight":"bold", "text-anchor": "start"}, false, false, 'rulerclass', '#rulerg');
		}
	}
	function simulatorSwitch(simulatorData, params) {
		simulator = params.simulator;
		// $("#sr_simulatorreferencehor").attr('visibility', "hidden");
		// $("#sr_simulatorreferencever").attr('visibility', "hidden");
		scaleHor.$fill.style.width = "50%";
		scaleVer.$fill.style.width = "50%";
		if (simulatorData.reader !== false) {
			clearInterval(simulatorData.reader);
		}
		simulatorData.reader = false;
		if (params.simulator=='position') {
			if (machine=='elettra') {
				if (document.location.host!="mac3d.elettra.eu") { 
					$('#applicationFrame').attr("src", 'https://puma-01.elettra.eu/spa/index.html?s=miniSynoptic');
					$('#applicationFrame').css("height", '1000px');
				}
			}
			else {
				$('#applicationFrame').attr("src", $('#applicationFrame').attr("data-src"));
			} 
		}
		else {
			$('#applicationFrame').removeAttr("src");
		}
		if (params.simulator=='') {
			for (let facility in simulatorData) {
				if (typeof $('#'+facility+"_simulatorhor").attr('visibility') != 'undefined') {
					$('#'+facility+"_simulatorhor").attr('visibility', "hidden");
					$('#'+facility+"_simulatorver").attr('visibility', "hidden");
					// $('#'+facility+"_simulatorreferencehor").attr('visibility', "hidden");
					// $('#'+facility+"_simulatorreferencever").attr('visibility', "hidden");
				}
			}
			$('.simulatorgauge').hide();
			$('#scaleh').hide();
			$('#scalev').hide();
			$('#ruler').hide();
			$('#rulerg').hide();
			$('#application').hide();
			$('#applicationReference').hide();
			simulatorData.reader.clearInterval();
		} 
		else {
			$('#application').show();
			$('#applicationReference').show();
			$('#scaleh').show();
			$('#scalev').show();
			$('#ruler').show();
			for (let facility in simulatorData) {
				if (typeof $('#'+facility+"_simulatorhor").attr('visibility') != 'undefined') {
					$('#'+facility+"_simulatorhor").attr('visibility', "visible");
					$('#'+facility+"_simulatorver").attr('visibility', "visible");
					// if (localStorage.getItem('reference'+simulator+'hor')!=null) $('#'+facility+"_simulatorreferencehor").attr('visibility', "visible");
					// if (localStorage.getItem('reference'+simulator+'ver')!=null) $('#'+facility+"_simulatorreferencever").attr('visibility', "visible");
				}
				// console.log('#'+facility+"_simulatorhor", $('#'+facility+"_simulatorhor").attr('visibility'), typeof simulatorData[facility]);
				if (typeof simulatorData[facility] == 'undefined' || typeof simulatorData[facility].map == 'undefined') continue;
				simulatorData.oldIndex = facility;
				simulatorRead(simulatorData, params);
			}
			displayer = setInterval(simulatorDisplay, displayerPeriod, params);
			simulatorData.reader = setInterval(simulatorRead, readerPeriod, simulatorData, params);
			$('.simulatorhor').css('display', 'block');
			$('.simulatorver').css('display', 'block');
			simulatorFactorHor = factorsHor[menuParams.simulator]*1000;
			simulatorFactorVer = factorsVer[menuParams.simulator]*1000;
			if (scaleType == 'slider') {
				const fHor = simulatorFactorHor/1000;
				menuParams['scale H'] = fHor;
				const mxHor = Math.pow(10, Math.floor(Math.log10(fHor))+1);
				scaleHor.max(mxHor);
				scaleHor.min(mxHor/100);
				scaleHor.step(mxHor/1000);
				scaleHor.setValue(fHor);
				const fVer = simulatorFactorVer/1000;
				menuParams['scale V'] = fVer;
				const mxVer = Math.pow(10, Math.floor(Math.log10(fVer))+1);
				scaleVer.max(mxVer);
				scaleVer.min(mxVer/100);
				scaleVer.step(mxVer/1000);
				scaleVer.setValue(fVer);
			}
			else {
				document.getElementById("horgauge").contentWindow.maxval = Math.pow(10, Math.floor(Math.log10(factorsHor[params.simulator]))+2);
				document.getElementById("horgauge").contentWindow.reset();
				document.getElementById("horgauge").contentWindow.setVal(factorsHor[params.simulator]);
				document.getElementById("vergauge").contentWindow.maxval = Math.pow(10, Math.floor(Math.log10(factorsVer[params.simulator]))+2);
				document.getElementById("vergauge").contentWindow.reset();
				document.getElementById("vergauge").contentWindow.setVal(factorsVer[params.simulator]);
				$('.simulatorgauge').show();
			}
			// $('#applicationFrame').attr("src", "/spa/index.html?s=simulator&src="+params.simulator+(document.location.search.indexOf('demo')>-1? '&demo': ''));
			// $("#applicationFrame").height(window.innerHeight); 
		}		
	}
	function simulatorRender(facility, val, simulator) {
		// console.log('simulatorRender(), val', val, simulator, compData[facility]);
		simulatorDataHor = [];
		simulatorDataVer = [];
		let refHor, refVer;
		const referenceDataHor = [];
		const referenceDataVer = [];
		const referencehor = JSON.parse(localStorage.getItem('reference'+simulator+'hor'));
		const referencever = JSON.parse(localStorage.getItem('reference'+simulator+'ver'));
		$('#hor_set').css('background-color',localStorage.getItem('reference'+simulator+'hor')!=null?'red':'lightgrey')
		$('#ver_set').css('background-color',localStorage.getItem('reference'+simulator+'ver')!=null?'green':'lightgrey')
		if (val.Hor) {
			for (i=0; i<val.Hor.length; i++) {
				if (typeof compData[facility].map[i] == 'undefined') continue;
				const j = compData[facility].map[i];
				if (document.location.search.indexOf('pulse=')>-1 && i!=document.location.search.split('pulse=')[1].split('&')[0]) {val.Hor[i] = 0;}
				const pos = compData[facility].pos[j];
				if (pos==null) continue;
				const beta = Math.PI*compData[facility].dir[j]/180;
				const vh = localStorage.getItem('reference'+simulator+'hor')==null? val.Hor[i]: val.Hor[i] - referencehor[i];
				// https://en.wikipedia.org/wiki/Logarithmic_scale#Extensions
				const valHor = logScaleHor? Math.sign(vh)*Math.log10(1+ Math.abs(vh*Math.LN10)): vh;
				const vv = localStorage.getItem('reference'+simulator+'ver')==null? val.Ver[i]: val.Ver[i] - referencever[i];
				const valVer = logScaleVer? Math.sign(vv)*Math.log10(1+ Math.abs(vv*Math.LN10)): vv;
				simulatorDataHor.push((simulatorDataHor.length==0?'M':'L')+ 
					Math.round(pos[0] - valHor*simulatorFactorHor*Math.sin(beta)) + ' ' + 
					Math.round(pos[1] + valHor*simulatorFactorHor*Math.cos(beta))
				);
				simulatorDataVer.push((simulatorDataVer.length==0?'M':'L')+ 
					Math.round(pos[0] - valVer*simulatorFactorVer*Math.sin(beta)) + ' ' + 
					Math.round(pos[1] + valVer*simulatorFactorVer*Math.cos(beta))
				);
			}
			// console.log('Hor', simulatorDataHor.join(' ')+(lattice[facility].sections[0].chamber?' Z':''));
			$('#'+facility+"_simulatorhor").attr('d', simulatorDataHor.join(' ')+(lattice[facility].sections[0].chamber?' Z':''));
			$('#'+facility+"_simulatorver").attr('d', simulatorDataVer.join(' ')+(lattice[facility].sections[0].chamber?' Z':''));
		}
	}
	function simulatorDisplay(params) {
		if (simulatorBuffer==false) return;
		simulatorRender('sr', simulatorBuffer, params.simulator);
		$('#delay').html(new Date() - simulatorDataTs);
	}
	if (document.location.search.indexOf('stats')>-1) {$('#notice').show(); $('#notice').css('color', 'orange'); $('#notice').html('call time: <span id="requiredt"/>, delay: <span id="delay"/>');}
	function simulatorRead(simulatorData, params) {
		// console.log('fetch()',conf.simulatorUrl+'&param='+params.simulator);
		simulatorTimestamp = new Date() - 0;
		fetch((conf.simulatorUrl+'&machine='+machine+'&param='+params.simulator).replace('?&','?'), {cache: "no-store"})
		.then((response) => {return response.json();})
		.then((eventData) => {
			if (document.location.search.indexOf('stats')>-1) {
				const requiredt = new Date() - simulatorTimestamp;
				simulatorDataTs = eventData.timestamp;
				$('#requiredt').html(requiredt);
				$('#delay').html(new Date() - simulatorDataTs);
			}
			simulatorBuffer = eventData.sr;
		});
	}