Function
This animation implements 360-degree view of panoramic images. Cylindrical panoramic images and spherical panoramic images are supported. You can change the view manually or through a sensor. Note that a panoramic image occupies the entire screen. If you want to display other elements such as the time, you must place the panoramic image in the bottom layer. Only one panorama function is supported, and if multiple functions are contained in the script, only the first one will be identified.
XML Specifications
<VR src="" srcid="" imageType="" touchType=""/>
- Parameters
Parameter | Type | Mandatory | Description |
|---|---|---|---|
src | String | Yes | Name of a panoramic image. Currently, only JPG and PNG images are supported. |
srcid | Number | No | Sequence number of a panoramic image. For example, if src is set to vr.jpg and srcid is set to 0, the name of the panoramic image is vr_0.jpg. The value can be a variable and the default value is 0. You can dynamically change the image resource through the variable. Note that imageType must be the same for all panoramic images. |
imageType | String | No | Type of a panoramic image. The options are SPHERICAL (spherical panoramic image) and RING (cylindrical panoramic image). The default value is SPHERICAL. Note that cylindrical panoramic images do not support up-down sliding or scaling, the aspect ratio of spherical panoramic images must be 2:1, and an aspect ratio greater than 4:1 is recommended for cylindrical panoramic images. |
touchType | Number | No | Way of changing the panoramic view. The options are 0, 1, and 2. The value 0 indicates that the view is changed when a user slides the screen, 1 indicates that the view is changed based on the sensor value, and 2 indicates that the view is changed in both modes. The default value is 0. Expressions are supported. You can use a variable to change the panoramic view. |
The aspect ratio of spherical panoramic images must be 2:1. The recommended size is 8000 x 4000 pixels. Their size cannot be greater than 16384 x 8192 pixels or 5 MB, and cannot be less than 3960 x 1980 pixels. The aspect ratio of cylindrical panoramic images must range from 4:1 to 8:1. Their width cannot be greater than 16384 and height cannot be less than 1980. The image size cannot be greater than 5 MB.
Examples
Example 1: Use the panoramic image vr06.jpg to implement panorama. Dynamically switch the mode for changing the panoramic view through #touchType. (In this example, the switchover function is implemented by tapping the button in the upper-left corner on the screen.) A panoramic image is displayed on the lock screen, and elements such as time and date are displayed on the panoramic image. A user can slide on the screen to change the panoramic view or scale out/in the panoramic image through a gesture.
<Varname="touchtype"expression="0"/> <!-- Panorama --> <VRsrc="vr06.jpg"imageType="SPHERICAL"touchType="#touchtype"/> <!-- Button for switching the panoramic view change mode --> <Imagesrc="button.jpg"w="200"h="200"x="0"y="0"/> <Buttonx="0"y="0"w="200"h="200"> <Triggeraction="up"> <VariableCommandname="touchtype"expression="1-#touchtype"/> </Trigger> </Button> <!-- Time --> <Timename="shijian"x="551"y="903"align="center"alignV="center"src="time.png"/> <!-- Date and day of week --> <Groupx="115"y="790"> <Imagex="200"y="230"srcid="#year%100/10"src="date.png"/> <Imagex="200+36"y="230"srcid="#year%10"src="date.png"/> <Imagex="200+72"y="230"src="date_dot.png"/> <Imagex="200+108"y="230"src="date.png"srcid="(#month+1)/10"/> <Imagex="200+144"y="230"src="date.png"srcid="(#month+1)%10"/> <Imagex="200+180"y="230"src="date_dot.png"/> <Imagex="200+216"y="230"src="date.png"srcid="#date/10"/> <Imagex="200+252"y="230"src="date.png"srcid="#date%10"/> <Imagex="200+320"y="235"src="week.png"srcid="#day_of_week"/> </Group> <!-- Unlock --> <Unlockername="unlocker"bounceInitSpeed="2000"bounceAcceleration="3000"> <StartPointx="300"y="#screen_height-300"w="470"h="300"> </StartPoint> <EndPointx="300"y="#screen_height-650"w="50"h="300"> <Pathx="300"y="#screen_height-300"w="470"h="300"> <Positionx="0"y="0"/> <Positionx="0"y="-200"/> </Path> </EndPoint> </Unlocker>
Example 2: Switch between panoramic images through srcid. Prepare three panoramic images vr_0.jpg, vr_1.jpg, and vr_2.jpg. Note that the three images must have the same imageType. A user can tap buttons 0, 1, and 2 to switch to the corresponding panoramic image. If the user turns off the screen without unlocking it, the panoramic image displayed before screen turn-off is displayed again after screen turn-on. After the user unlocks the screen, vr_0.jpg is displayed.
<!-- Variable for changing the gesture --> <Varname="touchtype"expression="0"/> <!-- Variable for switching srcid --> <Varname="id"expression="0"/> <!-- Panorama --> <VRsrc="vr.jpg"srcid="#id"imageType="SPHERICAL"touchType="#touchtype"/> <!-- Button for switching the panoramic view change mode --> <Imagesrc="button.jpg"w="200"h="200"x="0"y="0"/> <Buttonx="0"y="0"w="200"h="200"> <Triggeraction="up"> <VariableCommandname="touchtype"expression="1-#touchtype"/> </Trigger> </Button> <!- Panoramic image button 0 --> <Imagesrc="button0.png"x="800"y="0"w="150"h="150"/> <Buttonx="800"y="0"w="200"h="200"> <Triggeraction="up"> <VariableCommandname="id"expression="0"/> </Trigger> </Button> <!-- Panoramic image button 1 --> <Imagesrc="button1.png"x="800"y="200"w="150"h="150"/> <Buttonx="800"y="200"w="200"h="200"> <Triggeraction="up"> <VariableCommandname="id"expression="1"/> </Trigger> </Button> <!-- Panoramic image button 2 --> <Imagesrc="button2.png"x="800"y="400"w="150"h="150"/> <Buttonx="800"y="400"w="200"h="200"> <Triggeraction="up"> <VariableCommandname="id"expression="2"/> </Trigger> </Button>