Sie sind nicht angemeldet.

Scaling bugs in HTML5 viewer

Scott Witte

Fortgeschrittener

  • »Scott Witte« ist der Autor dieses Themas

Beiträge: 382

Wohnort: Milwaukee, WI USA

Beruf: Professional Photographer

  • Nachricht senden

1

Donnerstag, 19. Februar 2015, 18:50

Scaling bugs in HTML5 viewer

Klaus -- I'm encountering scaling issues in the HTML5 viewer. There are significant differences between Flash and HTML5:


The smaller examples have a scale of 0.5 applied to the parent div. Scalechildren is true. Problems:

1) Border width (bgborder) does not scale
2) Border curved corners (bgroundedge) does not scale
3) Textfield text size does not scale
Scott Witte
Tour de Force 360VR
Scott Witte Photography

klaus.krpano

Administrator

Beiträge: 13 499

  • Nachricht senden

2

Freitag, 20. Februar 2015, 10:54

Hi,

can you show your full example?

Is it build out of textfield elements?

Currently it's not possible to scale children textfield elements like in Flash.

Best regards,
Klaus

Scott Witte

Fortgeschrittener

  • »Scott Witte« ist der Autor dieses Themas

Beiträge: 382

Wohnort: Milwaukee, WI USA

Beruf: Professional Photographer

  • Nachricht senden

3

Freitag, 20. Februar 2015, 20:28

Demo Up and.... new bug??

Klaus -- I put up a demo here: Scaling demo

Click "TOGGLE" to toggle scale between 1 and 0.5.

Something else I just noticed. In HTML5 the textfield repositions horizontally with it's left edge as if the textfield had been scaled instead of keeping it actually centered. If I give it an absolute width the field scales properly but not the text.

BTW, my current workaround for scaling the textfield text is to compute the scaled font-size then update the field's CSS with the new size. I wonder if zoom: -moz-transform: would work. Actually I know it works for scaling but am not sure how functionality is affected by the iOS zoom bug.

Another thing I see in this demo: bgroundedge seems to scale correctly but it didn't in my more complete coding. Hmmm.
See update in next message.

XML code:

Quellcode

 
1
2
3
4
5

<krpano>

	See updated code in next message.

</krpano>
Scott Witte
Tour de Force 360VR
Scott Witte Photography

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »Scott Witte« (20. Februar 2015, 22:50)

Scott Witte

Fortgeschrittener

  • »Scott Witte« ist der Autor dieses Themas

Beiträge: 382

Wohnort: Milwaukee, WI USA

Beruf: Professional Photographer

  • Nachricht senden

4

Freitag, 20. Februar 2015, 22:54

Figured it out. bgroundedge scaling works fine for the topmost parent. It doesn't work for children. I have updated the demo to better show this. The updated code is below:

Quellcode

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<krpano>

	<preview type="grid(cube,64,64,512,0xCCCCCC,0x777777,0x999999);" />

	<view hlookat="0" vlookat="0" fovtype="VFOV" fov="90" fovmin="30" fovmax="150" limitview="auto" vlookatmin="-90" vlookatmax="+90" />

	<layer name="border1" type="container" align="bottom" y="10" width="250" height="60" bgroundedge="16" bgborder="4 0xffffff" scale="1" scalechildren="true">
		<layer name="border2" type="container" align="bottom" y="6" width="230" height="45" bgroundedge="16" bgborder="4 0xffffff" scalechildren="true">
			<plugin name="toggle" type="container" url="textfield.swf" align="top" y="5" bgcolor="0x999999" bgalpha=".8" bgcapture="true" zorder="2"
				onclick="scaleit()" html="TOGGLE" css="text-align:center; font-size:12px;"  >
			</plugin>
	
			<layer name="border3" type="container" align="bottom" y="7" width="100" height="4" bgcolor="0x000000" bgalpha="1" bgroundedge="4" bgborder="4 0xffffff" zorder="5">
			</layer>
		</layer>
	</layer>
	
	<action name="scaleit" >
		if(layer[border1].scale == "1", set(layer[border1].scale, 0.5), set(layer[border1].scale, 1) );
	</action>

</krpano>
Scott Witte
Tour de Force 360VR
Scott Witte Photography

klaus.krpano

Administrator

Beiträge: 13 499

  • Nachricht senden

5

Montag, 23. Februar 2015, 12:01

Hi,

this a known design issue/limitation and not a simple bug. In HTML5 the children scaling currently works by sending the resulting size to the children elements, but not by applying a overall scaling like in Flash. The plugin onresize interface currently doesn't have the possibility to track scaling factors from parent elements.

This has technical/compatibility and also design reasons, but I'm planing and working on improvements here of course.

Best regards,
Klaus

Scott Witte

Fortgeschrittener

  • »Scott Witte« ist der Autor dieses Themas

Beiträge: 382

Wohnort: Milwaukee, WI USA

Beruf: Professional Photographer

  • Nachricht senden

6

Montag, 23. Februar 2015, 17:47

zoom: -moz-transform: is suppose to handle scaling of children in HTML5 and for the most part it does pretty well. Unfortunately there is a bug regarding finding mouse X/Y positioning that is causing me headaches. It works fine in FF but not Safari or Chrome. I thought it was only in iOS but found this to be true on desktops as well.
Scott Witte
Tour de Force 360VR
Scott Witte Photography

klaus.krpano

Administrator

Beiträge: 13 499

  • Nachricht senden

7

Montag, 23. Februar 2015, 17:50

I know about CSS transforms scaling of course ;-) but not long ago there were several issues with mobile browsers in some usage case.

As said this is all known and I'm working on better solutions.

Best regards,
Klaus

Ähnliche Themen