add support for text properties to new html propety tools

ZappoMan committed 12 years ago

Commit 0cb95fc1 parent 3f187411 file · +72 −1Browse files

Unified · Split

examples/html/entityProperties.html+72−1

@@ -135,6 +135,16 @@ · 134 unmodified lines
135	var elModelAnimationPlaying = document.getElementById("property-model-animation-playing");	135	var elModelAnimationPlaying = document.getElementById("property-model-animation-playing");
136	var elModelAnimationFPS = document.getElementById("property-model-animation-fps");	136	var elModelAnimationFPS = document.getElementById("property-model-animation-fps");
137		137
		138	var elTextSection = document.getElementById("text-section");
		139	var elTextText = document.getElementById("property-text-text");
		140	var elTextLineHeight = document.getElementById("property-text-line-height");
		141	var elTextTextColorRed = document.getElementById("property-text-text-color-red");
		142	var elTextTextColorGreen = document.getElementById("property-text-text-color-green");
		143	var elTextTextColorBlue = document.getElementById("property-text-text-color-blue");
		144	var elTextBackgroundColorRed = document.getElementById("property-text-background-color-red");
		145	var elTextBackgroundColorGreen = document.getElementById("property-text-background-color-green");
		146	var elTextBackgroundColorBlue = document.getElementById("property-text-background-color-blue");
		147
138	if (window.EventBridge !== undefined) {	148	if (window.EventBridge !== undefined) {
139	EventBridge.scriptEventReceived.connect(function(data) {	149	EventBridge.scriptEventReceived.connect(function(data) {
140	data = JSON.parse(data);	150	data = JSON.parse(data);
@@ -201,13 +211,27 @@ · 60 unmodified lines
201	elModelSection.style.display = 'none';	211	elModelSection.style.display = 'none';
202	} else {	212	} else {
203	elModelSection.style.display = 'block';	213	elModelSection.style.display = 'block';
204
205	elModelURL.value = properties.modelURL;	214	elModelURL.value = properties.modelURL;
206	elModelAnimationURL.value = properties.animationURL;	215	elModelAnimationURL.value = properties.animationURL;
207	elModelAnimationPlaying.checked = properties.animationPlaying;	216	elModelAnimationPlaying.checked = properties.animationPlaying;
208	elModelAnimationFPS.value = properties.animationFPS;	217	elModelAnimationFPS.value = properties.animationFPS;
209	}	218	}
210		219
		220	if (properties.type != "Text") {
		221	elTextSection.style.display = 'none';
		222	} else {
		223	elTextSection.style.display = 'block';
		224
		225	elTextText.value = properties.text;
		226	elTextLineHeight.value = properties.lineHeight;
		227	elTextTextColorRed.value = properties.textColor.red;
		228	elTextTextColorGreen.value = properties.textColor.green;
		229	elTextTextColorBlue.value = properties.textColor.blue;
		230	elTextBackgroundColorRed.value = properties.backgroundColor.red;
		231	elTextBackgroundColorGreen.value = properties.backgroundColor.green;
		232	elTextBackgroundColorBlue.value = properties.backgroundColor.blue;
		233	}
		234
211	if (properties.type != "Light") {	235	if (properties.type != "Light") {
212	elLightSection.style.display = 'none';	236	elLightSection.style.display = 'none';
213	} else {	237	} else {
@@ -320,6 +344,22 @@ · 106 unmodified lines
320	elModelAnimationPlaying.addEventListener('change', createEmitCheckedPropertyUpdateFunction('animationIsPlaying'));	344	elModelAnimationPlaying.addEventListener('change', createEmitCheckedPropertyUpdateFunction('animationIsPlaying'));
321	elModelAnimationFPS.addEventListener('change', createEmitNumberPropertyUpdateFunction('animationFPS'));	345	elModelAnimationFPS.addEventListener('change', createEmitNumberPropertyUpdateFunction('animationFPS'));
322	elModelAnimationFrame.addEventListener('change', createEmitNumberPropertyUpdateFunction('animationFrameIndex'));	346	elModelAnimationFrame.addEventListener('change', createEmitNumberPropertyUpdateFunction('animationFrameIndex'));
		347
		348	elTextText.addEventListener('change', createEmitTextPropertyUpdateFunction('text'));
		349	elTextLineHeight.addEventListener('change', createEmitNumberPropertyUpdateFunction('lineHeight'));
		350
		351	var textTextColorChangeFunction = createEmitColorPropertyUpdateFunction(
		352	'textColor', elTextTextColorRed, elTextTextColorGreen, elTextTextColorBlue);
		353	elTextTextColorRed.addEventListener('change', textTextColorChangeFunction);
		354	elTextTextColorGreen.addEventListener('change', textTextColorChangeFunction);
		355	elTextTextColorBlue.addEventListener('change', textTextColorChangeFunction);
		356
		357	var textBackgroundColorChangeFunction = createEmitColorPropertyUpdateFunction(
		358	'backgroundColor', elTextBackgroundColorRed, elTextBackgroundColorGreen, elTextBackgroundColorBlue);
		359	elTextBackgroundColorRed.addEventListener('change', textBackgroundColorChangeFunction);
		360	elTextBackgroundColorGreen.addEventListener('change', textBackgroundColorChangeFunction);
		361	elTextBackgroundColorBlue.addEventListener('change', textBackgroundColorChangeFunction);
		362
323	}	363	}
324	</script>	364	</script>
325	</head>	365	</head>
@@ -492,6 +532,37 @@ · 166 unmodified lines
492	</div>	532	</div>
493	</div>	533	</div>
494		534
		535	<div id="text-section" class="multi-property-section">
		536	<div class="property-section">
		537	<label>Text</label>
		538	<span>
		539	<input type="text" id="property-text-text"></input>
		540	</span>
		541	</div>
		542	<div class="property-section">
		543	<label>Line Height</label>
		544	<span>
		545	<input class="coord" type='number' id="property-text-line-height"></input>
		546	</span>
		547	</div>
		548	<div class="property-section">
		549	<label>Text Color</label>
		550	<span>
		551	Red <input class="coord" type='number' id="property-text-text-color-red"></input>
		552	Green <input class="coord" type='number' id="property-text-text-color-green"></input>
		553	Blue <input class="coord" type='number' id="property-text-text-color-blue"></input>
		554	</span>
		555	</div>
		556	<div class="property-section">
		557	<label>Background Color</label>
		558	<span>
		559	Red <input class="coord" type='number' id="property-text-background-color-red"></input>
		560	Green <input class="coord" type='number' id="property-text-background-color-green"></input>
		561	Blue <input class="coord" type='number' id="property-text-background-color-blue"></input>
		562	</span>
		563	</div>
		564	</div>
		565
495		566
496	<div id="light-section" class="multi-property-section">	567	<div id="light-section" class="multi-property-section">
497	<div class="property-section">	568	<div class="property-section">