CN106162302B - Layout method and device for Launcher main interface and smart television - Google Patents
Layout method and device for Launcher main interface and smart television Download PDFInfo
- Publication number
- CN106162302B CN106162302B CN201510194244.2A CN201510194244A CN106162302B CN 106162302 B CN106162302 B CN 106162302B CN 201510194244 A CN201510194244 A CN 201510194244A CN 106162302 B CN106162302 B CN 106162302B
- Authority
- CN
- China
- Prior art keywords
- block
- mouse
- main interface
- tab
- blocks
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
Images
Classifications
-
- H—ELECTRICITY
- H04—ELECTRIC COMMUNICATION TECHNIQUE
- H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
- H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
- H04N21/40—Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
- H04N21/43—Processing of content or additional data, e.g. demultiplexing additional data from a digital video stream; Elementary client operations, e.g. monitoring of home network or synchronising decoder's clock; Client middleware
- H04N21/431—Generation of visual interfaces for content selection or interaction; Content or additional data rendering
- H04N21/4312—Generation of visual interfaces for content selection or interaction; Content or additional data rendering involving specific graphical features, e.g. screen layout, special fonts or colors, blinking icons, highlights or animations
-
- H—ELECTRICITY
- H04—ELECTRIC COMMUNICATION TECHNIQUE
- H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
- H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
- H04N21/80—Generation or processing of content or additional data by content creator independently of the distribution process; Content per se
- H04N21/81—Monomedia components thereof
- H04N21/8146—Monomedia components thereof involving graphical data, e.g. 3D object, 2D graphics
-
- H—ELECTRICITY
- H04—ELECTRIC COMMUNICATION TECHNIQUE
- H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
- H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
- H04N21/80—Generation or processing of content or additional data by content creator independently of the distribution process; Content per se
- H04N21/81—Monomedia components thereof
- H04N21/8166—Monomedia components thereof involving executable data, e.g. software
- H04N21/8186—Monomedia components thereof involving executable data, e.g. software specially adapted to be executed by a peripheral of the client device, e.g. by a reprogrammable remote control
Landscapes
- Engineering & Computer Science (AREA)
- Multimedia (AREA)
- Signal Processing (AREA)
- General Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Computer Graphics (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
The invention is suitable for the technical field of smart televisions and provides a Launcher main interface arranging method, a Launcher main interface arranging device and a smart television, wherein the method comprises the following steps: acquiring Tab information, and dividing an editing area of a Launcher main interface into a plurality of Tabs according to the Tab information; creating a Tab page for each Tab; adding a Block on the created Tab page, deleting the Block, and adjusting the size or position of the Block in a mouse dragging and moving mode; editing the content of Block; and saving and releasing the created Launcher main interface information. According to the invention, the size and the position of the Block can be arranged by an operator in a dragging and moving mode, so that the user experience is greatly improved, and the working efficiency of arranging the intelligent television Launcher by the operator is improved.
Description
Technical Field
The invention belongs to the technical field of smart televisions, and particularly relates to a Launcher main interface arranging method and device and a smart television.
Background
The Launcher main interface of the traditional smart television is usually set when leaving a factory and cannot be dynamically changed. Some smart televisions can dynamically change the content of the Launcher main interface, but cannot change the layout of the Launcher main interface, and if the layout of the Launcher main interface needs to be changed, the change of the Launcher main interface is only completed through upgrading of the Android system version.
With the "intelligent hardware internetworking", the intelligent television internet operation has been a trend. The updating speed of the Launcher main interface of the traditional smart television cannot meet the requirements of users. The Launcher main interface operator needs to adjust the Launcher main interface at any time according to the change of the market.
Most of the layout systems based on WEB Launcher main interfaces in the current market are configured modes, the layout modes usually need a smart television terminal to cooperate with display to see the layout effect, and the layout modes are not intuitive and cannot achieve what you see but what you get.
Disclosure of Invention
The embodiment of the invention provides a Launcher main interface arranging method and system, and aims to solve the problems that in the Launcher main interface arranging method provided by the prior art, the arranging effect can be seen only by the cooperation of a smart television terminal and display, the effect is not intuitive, and what you see is what you get cannot be achieved.
In one aspect, a Launcher main interface layout method is provided, and the method includes:
acquiring Tab information, and dividing an editing area of a Launcher main interface into a plurality of Tabs according to the Tab information;
creating a Tab page for each Tab;
adding a Block on the created Tab page, deleting the Block, and adjusting the size or position of the Block in a mouse dragging and moving mode;
editing the content of Block;
and saving and releasing the created Launcher main interface information.
Further, the created Launcher main interface information is a JS object, and before saving the created Launcher main interface information, the method further includes:
and converting the JS object into data in a data exchange json format.
Further, after the saving and publishing of the created Launcher main interface information, the method further comprises:
acquiring data in a data exchange json format of the created Launcher main interface information;
converting the data in the json format of the created Launcher main interface information into a JS object;
and editing the JS object.
Further, it is specifically the following that editing the JS object: adding a Tab page, deleting the Tab page or editing the Tab page in an editing area of a Launcher main interface, wherein the editing Tab page comprises: adding a Block on the Tab page, deleting the Block, and adjusting the size or position of the Block by mouse dragging and moving.
Further, the adjusting the size of Block by mouse dragging and moving on the created Tab page includes:
binding a mouse event;
when the mouse event is mousedown, recording the initial position of the mouse;
when the mouse event is mousecover, acquiring a new position of a mouse in real time and updating the values of width and height attributes of the Block;
and when the mouse event is mouseup, resetting the positions of blocks on the right side and the lower side of the Block.
Further, the adjusting the position of Block on the created Tab page by mouse dragging and moving includes:
binding a mouse event;
when the mouse event is mousedown, recording the initial position of the mouse;
when the mouse event is mousecover, acquiring a new position of a mouse in real time and updating left and top attribute values of the Block;
and when the mouse event is mouseup, resetting the positions of blocks on the right side and the lower side of the Block.
Further, the deleting Block on the created Tab page includes:
binding the set label with a click event of the mouse;
monitoring a click event of the mouse through the set tag;
and deleting the Block where the set tag is located after the condition that the user clicks the set tag through a mouse is monitored.
In another aspect, there is provided a Launcher main interface editing apparatus, including:
the Tab dividing unit is used for acquiring Tab information and dividing the editing area of the Launcher main interface into a plurality of Tabs according to the Tab information;
a Tab page creating unit for creating a Tab page for each Tab;
the Block operation unit is used for adding a Block on the created Tab page, deleting the Block, and adjusting the size or position of the Block in a mouse dragging and moving mode;
a Block editing unit used for editing the content of Block;
and the issuing unit is used for storing and issuing the created Launcher main interface information.
Further, the created Launcher main interface information is a JS object, and the apparatus further includes:
and the first conversion unit is used for converting the JS object into data in a data exchange json format.
Further, the apparatus further comprises:
the data acquisition unit is used for acquiring data in a data exchange json format of the created Launcher main interface information;
a second conversion unit, configured to convert the data in the json format of the created Launcher main interface information into a JS object;
and the JS object editing unit is used for editing the JS object.
Further, the JS object editing unit adds, deletes, or edits a Tab page in an editing area of the Launcher main interface, where the editing Tab page includes: adding a Block on the Tab page, deleting the Block, and adjusting the size or position of the Block by mouse dragging and moving.
Further, the Block operation unit includes:
the first event binding module is used for binding mouse events;
the first position recording module is used for recording the initial position of the mouse when the mouse event is mousedown;
the first attribute setting module is used for acquiring a new position of a mouse in real time and updating the values of width and height attributes of the Block when a mouse event is mouseview;
and the first position resetting module is used for resetting the positions of the blocks on the right side and the lower side of the blocks when the mouse event is mouse up.
Further, the Block operation unit further includes:
the second event binding module is used for binding mouse events;
the second position recording module is used for recording the initial position of the mouse when the mouse event is mousedown;
the second attribute setting module is used for acquiring a new position of the mouse in real time and updating the values of the width and height attributes of the Block when the mouse event is mouseview;
and the second position resetting module is used for resetting the positions of the blocks on the right side and the lower side of the blocks when the mouse event is mouseup.
Further, the Block operation unit further includes:
the third event binding module is used for binding the set tag with a click event of the mouse;
the monitoring module is used for monitoring a click event of the mouse through the set tag;
and the deleting module is used for deleting the Block where the set tag is located after the condition that the user clicks the set tag through a mouse is monitored.
In still another aspect, a smart television is provided, which includes the Launcher main interface editing apparatus as described above.
In the embodiment of the invention, the operator can arrange the size and the position of the Block in a dragging and moving mode, the graphical and visual arrangement method greatly improves the user experience, improves the working efficiency of arranging the smart television Launcher by the operator, accesses the arrangement system to arrange the smart television Launcher through a browser anytime and anywhere based on the internet, and obtains what you see is what you get, and in addition, improves the updating speed of the main interface of the smart television terminal Launcher: after the Launcher main interface is arranged on the WEB side, the Launcher main interface can be released in time, and the intelligent television terminal is started to update immediately. Compared with the arranging method of the Launcher main interface provided by the prior art, the arranging effect can be seen only by the cooperation of the intelligent television terminal and the display, the arranging method is not intuitive, and the problem that what you see is what you get cannot be achieved.
Drawings
Fig. 1 is a flowchart of an implementation of an arrangement method of a Launcher main interface according to an embodiment of the present invention;
FIG. 2 is a schematic interface diagram of an arrangement method of a Launcher main interface according to an embodiment of the present invention;
FIG. 3 is a schematic diagram illustrating an actual effect of the layout method of the Launcher main interface according to an embodiment of the present invention;
fig. 4, fig. 5, and fig. 6 are schematic diagrams respectively illustrating a Block with an adjusted position and another Block when the Block with the adjusted position overlaps in the method for arranging a Launcher main interface according to an embodiment of the present invention;
fig. 7 is a block diagram of a setup apparatus for Launcher main interface according to a second embodiment of the present invention.
Detailed Description
In order to make the objects, technical solutions and advantages of the present invention more apparent, the present invention is described in further detail below with reference to the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are merely illustrative of the invention and are not intended to limit the invention.
In the embodiment of the invention, Tab information is obtained, an editing area of a Launcher main interface is divided into a plurality of tabs according to the Tab information, a Tab page is created for each Tab, then a Block is added to the created Tab page, the Block is deleted, the size of the Block is adjusted or the position of the Block is adjusted in a mouse dragging and moving mode, then the content of the Block is edited, and finally the created Launcher main interface information is stored and published, so that an operator can arrange the size and the position of the Block in a dragging and moving mode.
The following detailed description of the implementation of the present invention is made with reference to specific embodiments:
example one
Fig. 1 shows an implementation flow of the method for arranging a Launcher main interface according to an embodiment of the present invention, where the method supports cross-browser arrangement based on a JQuery framework and adopts a JavaScript language, and the following details are described as follows:
in step S101, Tab information is acquired, and the Launcher main interface editing area is divided into a plurality of tabs according to the Tab information.
In the embodiment of the present invention, the Tab information includes a Tab name, an order, and at least one Tab attribute information. As shown in fig. 2, Tab information is displayed in the Tab list, and includes a Tab name, an order, an attribute 1, an attribute 2, and an attribute 3.
Specifically, the Tab attribute information may include an identifier id, a style, a terminal editable, a terminal displayable, a fixed layout, a fixed content, and the like, as shown in fig. 3.
After Tab information is acquired, the creation button in FIG. 2 can be clicked to trigger an event for creating a Launcher main interface, and the Launcher main interface is created.
After clicking the Tab adding button in fig. 2, the layout system of the Launcher main interface automatically acquires Tab information, and divides the editing area of the Launcher main interface into a plurality of tabs according to the Tab information.
Specifically, after the Tab adding button in fig. 2 is clicked, an event of popping up a Tab adding window is triggered, and the user enters and stores the relevant attribute information of the Tab in the Tab adding window. The Tab list shown in fig. 2 is added with a row of newly added Tab information. Also shown in fig. 2 is a Tab list in which Tab information is displayed. Wherein, the arrangement sequence of each Tab in the Launcher main interface can be changed by clicking upwards or downwards in the sequence with the mouse.
Based on the Tab information shown in the upper half of fig. 3, the layout system of the Launcher main interface divides the Launcher main interface editing area into 7 tabs, which are recommendations, movies, television, specials, education, games, and applications, respectively. Each Tab corresponds to a Tab page, each Tab page is a canvas, as shown in the lower half of fig. 3, which can be added, deleted, and edited as needed.
In step S102, a Tab page is created for each Tab.
In the embodiment of the invention, a Tab is selected, Tab pages are created for the Tab, each Tab page is a canvas, and the Block number in the created Tab page is 0 by default.
The first block element div in the HTML tag is taken as a canvas, the height and width of which are defined at initialization. The canvas is divided into a number of cells, the height and width of which are defined when the canvas is initialized. And taking a second Block element div in the HTML tag as a Block in a canvas, wherein the canvas consists of the blocks, the interval size of the blocks is defined when the canvas is initialized, and the blocks in the canvas are rectangles and occupy one or more cells.
When creating a canvas for each Tab, it is first necessary to create a canvas object and set the main attributes of the canvas:
widget _ tag: block tag element
widget _ flags: block separation distance
Widget base dimensions cell height and width
background color of canvas # BBB
backsground: # DDD specifies the background color of Block
Pointer specifies that the mouse pointer moves above the tab element to become hand-shaped, and the style in the CSS file is loaded into the canvas.
Secondly, a method function () is required to be constructed to obtain and assign html tag objects of the Canvas, when a page is loaded, the html of the Canvas is output to a browser, a Block array object is created to store the added Block object, and a style tag object is created to store the Canvas style object. Initializing init () assigns the attributes of the above canvas to the attributes corresponding to the canvas object.
In step S103, Block is added to the created Tab page, deleted, resized by mouse dragging and moving, or repositioned.
In the embodiment of the present invention, 1 × 1, 2 × 1, 1 × 2, and 2 × 2 shown in fig. 2 are 4 Block adding buttons provided. 1 × 1 means that the added Block occupies 1 cell high and 1 cell wide (such as Block1 and Block2 in fig. 2), 2 × 1 means that the added Block occupies 2 cells high and 1 cell wide (such as Block3 in fig. 2), 1 × 2 means that the added Block occupies 1 cell high and 2 cells wide (such as Block6 and Block7 in fig. 2), 2% 2 means that the added Block occupies 1 cell high and 2 cells wide (such as Block4 in fig. 2), and the button of adding Block can be further expanded according to user needs.
If the Block in the canvas already exists, setting parameters (col, row, x _ size, y _ size), and calling an add Block method to add the Block into the canvas; if the Block in the canvas does not exist, the add Block button needs to be clicked to add.
The process of adding Block is as follows:
creating a Block object and setting the coordinates of the calculated Block:
block occupies several columns of cells
Block occupies several rows of cells
x-size X-axis coordinate of the upper left corner of Block
y _ size: y-axis coordinate of the top left corner of Block
If the button is clicked to add the Block, the (col, row, x _ size, y _ size) parameters of the Block are calculated according to the specification of the added button, and the default adding sequence is from left to right.
For example: the parameters for specification 1 x2 were calculated as follows:
2 row 1 x size canvas x axis coordinate y size 0
The coordinates of the lower right corner of Block and the height and width of Block can be calculated by the above 4 parameters
Coordinates (x, y) of the bottom right corner of Block
x is x _ size + col, width of cell, y is y _ size + row, height of cell
Height and width of Block
height width col of height cell
Assembling html fragments of Block:
the label < div class ═ Block _ content "> is used to store the content edited by Block
The tag < i > is used for monitoring click events of the mouse, and the user clicks the tag and deletes the Block in which the tag is located
Converting the above set attributes into attributes and adding the attributes into middle BlockHtml, and simultaneously adding a Block object into a canvas object Block array:
and adding an html fragment of Block to the div where the canvas is located, and calling a fadeIn () method to display the added Block in a fade-in mode.
Deleting the Block is to remove the div corresponding to the Block, monitor the click event of the mouse through the set tag after the set tag is bound with the click event of the mouse, delete the Block where the set tag is located after the set tag is clicked by the user through the mouse, and delete the Block as follows:
and (3) binding the tag < i > on the event, clicking the tag by a mouse, deleting the html segment corresponding to the Block in which the tag is positioned from the canvas, and calling a fade () method to display the deleted Block in a fade-out mode.
When the mouse is moved to the lower right corner of the Block, the shape of the mouse is changed into a bidirectional arrow, the size of the Block can be adjusted after the mouse is clicked, and the height and the width of the Block can only be adjusted to be integral multiples of the height and the width of the cell. After resizing, the canvas recalculates the coordinates of all blocks below and to the right of this Block and changes their xy-axis coordinates. The process of adjusting the size of the Block by mouse dragging and moving is as follows:
firstly, binding a mouse mousedown event, a mouse emove event and a mouse up event for a div tag corresponding to a Block;
recording the x-axis coordinate and the y-axis coordinate of the initial position information of the mouse during mousedown;
continuously acquiring a new position of the mouse during mouseview, calculating the offset of the mouse in real time, and calculating and updating the values of width and height attributes of the Block style in real time according to the mouse offset, the width and height of the cell and an offset position algorithm;
and at mouseup, finishing resizing and resetting the positions of the blocks at the right side and the lower side of the Block. If the adjusted Block becomes large, blocks on the right and lower sides of the adjusted Block are moved downward, and if the adjusted Block becomes small, blocks on the right and lower sides of the adjusted Block are moved upward.
For example: block1(1 × 1) in fig. 2 is adjusted to Block1(2 × 2), Block2 is moved down 1 cell, and Block3 is moved down 1 cell.
Offset position algorithm:
a) distance of lateral movement
If (mouse lateral offset% cell width) > <0.5 × (cell width)
Block lateral offset (mouse lateral offset% cell width +1) × cell width
The width attribute value of the Block style is equal to the width attribute value of the Block initial style plus or minus the transverse offset of the Block
If (mouse lateral offset% cell width) <0.5 × cell width
Block lateral offset (mouse lateral offset% cell width) cell width
The width attribute value of the Block style is equal to the width attribute value of the Block initial style plus or minus the transverse offset of the Block
b) Longitudinal moving distance
If (mouse longitudinal offset% cell high) > <0.5 × cell high
Longitudinal offset of Block (mouse longitudinal offset/cell width +1) cell height
The height attribute value of the Block style is equal to the height attribute value of the initial Block style plus or minus the longitudinal offset of the Block
If (mouse longitudinal offset% cell height) <0.5 × cell height
Block's lateral offset (mouse longitudinal offset/cell height) cell height
The height attribute value of the Block style is equal to the height attribute value of the initial Block style plus or minus the longitudinal offset of the Block
When the mouse is moved to the area corresponding to the Block, the shape of the mouse is changed into a hand shape, the position of the Block can be adjusted after the mouse is clicked, and the Block can only move integral multiples of the height and the width of the cell. The position of the Block is adjusted by means of mouse dragging and moving, and the specific process is as follows:
firstly, binding a mouse mousedown event, a mouse emove event and a mouse up event for a div tag corresponding to a Block;
recording the x-axis coordinate and the y-axis coordinate of the initial position information of the mouse during mousedown;
continuously acquiring a new position of the mouse during mouseover, calculating the offset of the mouse in real time, and updating left and top attribute values in a Block style in real time according to the offset and offset position algorithm;
at mouseup, the positions of blocks to the right and bottom of the Block are reset.
Preferably, at the time of mouseup, an algorithm for determining whether to overlap may be used to check whether the Block overlaps with other blocks, and if so, the shift is invalid.
Judging whether an algorithm is overlapped: the coordinates of the upper left corner of Block are (x1, y1) and the coordinates of the lower right corner are (x2, y2)
If the following relationship is satisfied between the coordinates of the upper left corner and the lower right corner of Block a and the coordinates of the upper left corner and the lower right corner of Block b, Block a and Block b are overlapped.
Relation 1: (b.x1> ═ a.x1& & b.x1 ═ a.x2) | (b.y1> ═ a.y1& & b.y1 = a.y2) as shown in fig. 4;
relation 2: (b.x2> -, a.x1& & b.x2 [ -, a.x2) | b.y2> -, a.y1& & b.y2 [ -a.y 2), as shown in fig. 5;
relation 3: (a.x1> -, b.x1& & a.x2< ═ b.x2) | (a.y1> -, b.y1& & a.y2< ═ b.y2) as shown in fig. 6.
In step S104, the contents of Block are edited.
In the embodiment of the invention, a double-click event is bound to the tag of the Block, a window for selecting content is popped up by double-clicking a mouse, and the generated html fragment is inserted into the < divclass ═ Block _ content' > tag after the selected content is stored.
In step S105, the created Launcher main interface information is saved and released.
In the embodiment of the invention, when the created Launcher main interface information is saved, the JS object is converted into data in a data exchange json format and then saved to the background.
Preferably, in the embodiment of the present invention, the created Launcher main interface may be further edited, and when editing is performed, data in a json format of data exchange of the created Launcher main interface information is first obtained, then the data in the json format of the created Launcher main interface information is converted into a JS object, and then the JS object is edited.
Specifically, the editing performed on the JS object specifically includes: adding a Tab page, deleting the Tab page or editing the Tab page in an editing area of a Launcher main interface, wherein the editing Tab page comprises: and adding Block to the Tab page, deleting Block, adjusting the size of Block or adjusting the position of Block.
Preferably, in the embodiment of the present invention, blocks in the canvas may be rearranged according to the number of rows or columns in which the blocks are located, so as to provide the following Block arrangement modes for the user:
sort _ by _ row _ asc () arranges blocks in ascending order according to the row in which they are located;
sort _ by _ row _ desc () arranges blocks in descending order according to the row in which they are located;
sort _ by _ col _ asc () arranges blocks in ascending order according to the column in which they are located;
sort _ by _ col _ desc () arranges blocks in descending order according to the column in which they are located.
According to the method, the size and the position of a Block can be arranged by an operator in a mouse dragging and moving mode through a WEB-based smart television Launcher main interface arranging method, the user experience is greatly improved, the working efficiency of arranging the smart television launchers by the operator is improved, the arranging system is accessed through a browser anytime and anywhere based on the Internet to arrange the smart television launchers, what you see is what you get, and in addition, the updating speed of the smart television terminal Launcher main interface is also improved. The WEB terminal can release the Launcher main interface in time after arranging the Launcher main interface, and the intelligent television terminal is immediately updated when being started, even a user can edit the Launcher main interface which only can be used for television by himself, so that a more intelligent and personalized interface setting function is provided. Compared with the arranging method of the Launcher main interface provided by the prior art, the arranging effect can be seen only by the cooperation of the intelligent television terminal and the display, the arranging method is not intuitive, and the problem that what you see is what you get cannot be achieved.
In addition, the Launcher main interface arrangement method provided by the embodiment of the invention adopts JavaScript language and supports cross-browser arrangement based on JQuery framework, and the front-end JavaScript code amount is small, the browser loading speed is high, so that the arrangement operation is smooth, and the arrangement efficiency is greatly improved.
It will be understood by those skilled in the art that all or part of the steps in the method for implementing the embodiments described above may be implemented by using a program to instruct relevant hardware, and the corresponding program may be stored in a computer-readable storage medium, such as ROM/RAM, magnetic disk or optical disk.
Example two
Fig. 7 shows a specific structural block diagram of an arranging apparatus for Launcher main interface according to a second embodiment of the present invention, and only shows a part related to the second embodiment of the present invention for convenience of description. The Launcher main interface editing device can be a software unit, a hardware unit or a combination unit of software and hardware built in the smart television, and the Launcher main interface editing device 7 comprises: tab dividing unit 71, Tab page creating unit 72, Block operating unit 73, Block editing unit 74, and publishing unit 75.
The Tab dividing unit 71 is configured to acquire Tab information, and divide an editing area of the Launcher main interface into a plurality of tabs according to the Tab information;
a Tab page creating unit 72 for creating a Tab page for each Tab;
a Block operation unit 73, configured to add a Block to the created Tab page, delete the Block, and adjust the size or position of the Block by mouse dragging and moving;
a Block editing unit 74 for editing the contents of Block;
and the issuing unit 75 is configured to save the created Launcher main interface information and issue the Launcher main interface information.
Further, the created Launcher main interface information is a JS object, and the apparatus 7 further includes:
and the first conversion unit is used for converting the JS object into data in a data exchange json format.
Further, the apparatus 7 further comprises:
the data acquisition unit is used for acquiring data in a data exchange json format of the created Launcher main interface information;
a second conversion unit, configured to convert the data in the json format of the created Launcher main interface information into a JS object;
and the JS object editing unit is used for editing the JS object.
Further, the JS object editing unit adds, deletes, or edits a Tab page in an editing area of the Launcher main interface, where the editing Tab page includes: adding a Block on the Tab page, deleting the Block, and adjusting the size or position of the Block by mouse dragging and moving.
Further, the Block operation unit 73 includes:
the first event binding module is used for binding mouse events;
the first position recording module is used for recording the initial position of the mouse when the mouse event is mousedown;
the first attribute setting module is used for acquiring a new position of a mouse in real time and updating the values of width and height attributes of the Block when a mouse event is mouseview;
and the first position resetting module is used for resetting the positions of the blocks on the right side and the lower side of the blocks when the mouse event is mouse up.
Further, the Block operation unit 73 further includes:
the second event binding module is used for binding mouse events;
the second position recording module is used for recording the initial position of the mouse when the mouse event is mousedown;
the second attribute setting module is used for acquiring a new position of the mouse in real time and updating the values of the width and height attributes of the Block when the mouse event is mouseview;
and the second position resetting module is used for resetting the positions of the blocks on the right side and the lower side of the blocks when the mouse event is mouseup.
Further, the Block operation unit 73 further includes:
the third event binding module is used for binding the set tag with a click event of the mouse;
the monitoring module is used for monitoring a click event of the mouse through the set tag;
and the deleting module is used for deleting the Block where the set tag is located after the condition that the user clicks the set tag through a mouse is monitored.
The Launcher main interface arranging device provided by the embodiment of the present invention can be applied to the corresponding first method embodiment, and for details, reference is made to the description of the first embodiment, and details are not repeated here.
It should be noted that, in the above device embodiment, each included unit is only divided according to functional logic, but is not limited to the above division as long as the corresponding function can be achieved; in addition, specific names of the functional units are only for convenience of distinguishing from each other, and are not used for limiting the protection scope of the present invention.
The above description is only for the purpose of illustrating the preferred embodiments of the present invention and is not to be construed as limiting the invention, and any modifications, equivalents and improvements made within the spirit and principle of the present invention are intended to be included within the scope of the present invention.
Claims (15)
1. A Launcher main interface layout method is characterized by comprising the following steps:
acquiring Tab information, and dividing an editing area of a Launcher main interface into a plurality of Tabs according to the Tab information;
creating a Tab page for each Tab;
adding a Block on the created Tab page, deleting the Block, and adjusting the size or position of the Block in a mouse dragging and moving mode; in the process of adjusting the position of a Block in a mouse dragging and moving mode, when a mouseup event is triggered, whether the Block is overlapped with other blocks is checked through an overlapping algorithm, and if the Block is overlapped with other blocks, the current movement of the Block is invalid;
editing the content of Block;
storing and releasing the created Launcher main interface information after being arranged through a WEB end so as to instruct a smart television terminal to update a Launcher main interface according to the Launcher main interface information;
checking whether the Block overlaps with other blocks through an overlap algorithm, including:
judging whether the coordinates of the Block and the coordinates of the other blocks meet a preset coordinate relationship or not;
when the coordinates of the Block and the coordinates of the other blocks meet the preset coordinate relationship, the Block is overlapped with the other blocks;
when the coordinates of the Block and the coordinates of the other blocks do not meet the preset coordinate relationship, the Block and the other blocks are not overlapped.
2. The method of claim 1, wherein the created Launcher host interface message
The information is a JS object, and before the created Launcher main interface information is saved, the method further comprises the following steps:
and converting the JS object into data in a data exchange json format.
3. The method of claim 2, wherein the Launcher created at the saving
After the main interface information is released, the method further comprises the following steps:
acquiring data in a data exchange json format of the created Launcher main interface information;
converting the data in the json format of the created Launcher main interface information into a JS object;
and editing the JS object.
4. The method of claim 3, wherein the editing the JS object is with an editor
The body is as follows: adding a Tab page, deleting the Tab page or editing the Tab page in an editing area of a Launcher main interface, wherein the editing Tab page comprises: adding a Block on the Tab page, deleting the Block, and adjusting the size or position of the Block by mouse dragging and moving.
5. The method of claim 1, wherein the passing is on a created Tab page
The size of Block is adjusted in a mouse dragging and moving mode, and the method comprises the following steps:
binding a mouse event;
when the mouse event is mousedown, recording the initial position of the mouse;
when the mouse event is mousecover, acquiring a new position of a mouse in real time and updating the values of width and height attributes of the Block;
and when the mouse event is mouseup, resetting the positions of blocks on the right side and the lower side of the Block.
6. The method of claim 1, wherein the Tab page created is by mouse
The position of Block is adjusted in a mode of dragging and moving the mark, and the method comprises the following steps:
binding a mouse event;
when the mouse event is mousedown, recording the initial position of the mouse;
when the mouse event is mousecover, acquiring a new position of a mouse in real time and updating left and top attribute values of the Block;
and when the mouse event is mouseup, resetting the positions of blocks on the right side and the lower side of the Block.
7. The method of claim 1, wherein the deleting on the created Tab page
Block, comprising:
binding the set label with a click event of the mouse;
monitoring a click event of the mouse through the set tag;
and deleting the Block where the set tag is located after the condition that the user clicks the set tag through a mouse is monitored.
8. An arrangement apparatus for Launcher main interface, comprising:
the Tab dividing unit is used for acquiring Tab information and dividing the editing area of the Launcher main interface into a plurality of Tabs according to the Tab information;
a Tab page creating unit for creating a Tab page for each Tab;
the Block operation unit is used for adding a Block on the created Tab page, deleting the Block, and adjusting the size or position of the Block in a mouse dragging and moving mode; in the process of adjusting the position of a Block in a mouse dragging and moving mode, when a mouseup event is triggered, whether the Block is overlapped with other blocks is checked through an overlapping algorithm, and if the Block is overlapped with other blocks, the current movement of the Block is invalid;
a Block editing unit used for editing the content of Block;
the release unit is used for saving and releasing the created Launcher main interface information after the information is arranged through the WEB terminal so as to instruct the smart television terminal to update the Launcher main interface according to the Launcher main interface information;
the Block operation unit is specifically configured to:
judging whether the coordinates of the Block and the coordinates of the other blocks meet a preset coordinate relationship or not;
when the coordinates of the Block and the coordinates of the other blocks meet the preset coordinate relationship, the Block is overlapped with the other blocks;
when the coordinates of the Block and the coordinates of the other blocks do not meet the preset coordinate relationship, the Block and the other blocks are not overlapped.
9. The apparatus of claim 8, wherein the created Launcher host interface message
The message is a JS object, and the device further comprises:
and the first conversion unit is used for converting the JS object into data in a data exchange json format.
10. The apparatus of claim 9, wherein the apparatus further comprises:
the data acquisition unit is used for acquiring data in a data exchange json format of the created Launcher main interface information;
a second conversion unit, configured to convert the data in the json format of the created Launcher main interface information into a JS object;
and the JS object editing unit is used for editing the JS object.
11. The apparatus of claim 10, wherein the JS object editing unit is at
Adding a Tab page, deleting the Tab page or editing the Tab page in an editing area of the Launcher main interface, wherein the editing Tab page comprises: adding a Block on the Tab page, deleting the Block, and adjusting the size or position of the Block by mouse dragging and moving.
12. The apparatus of claim 8, wherein the Block operation unit comprises:
the first event binding module is used for binding mouse events;
the first position recording module is used for recording the initial position of the mouse when the mouse event is mousedown;
the first attribute setting module is used for acquiring a new position of a mouse in real time and updating the values of width and height attributes of the Block when a mouse event is mouseview;
and the first position resetting module is used for resetting the positions of the blocks on the right side and the lower side of the blocks when the mouse event is mouse up.
13. The apparatus of claim 8, wherein the Block operation unit further comprises:
the second event binding module is used for binding mouse events;
the second position recording module is used for recording the initial position of the mouse when the mouse event is mousedown;
the second attribute setting module is used for acquiring a new position of the mouse in real time and updating left and top attribute values of the Block when the mouse event is mousechange;
and the second position resetting module is used for resetting the positions of the blocks on the right side and the lower side of the blocks when the mouse event is mouseup.
14. The apparatus of claim 8, wherein the Block operation unit further comprises:
the third event binding module is used for binding the set tag with a click event of the mouse;
the monitoring module is used for monitoring a click event of the mouse through the set tag;
and the deleting module is used for deleting the Block where the set tag is located after the condition that the user clicks the set tag through a mouse is monitored.
15. A smart television characterized in that it comprises the features of claims 8 to 14
Any one of the Launcher main interface editing devices.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201510194244.2A CN106162302B (en) | 2015-04-22 | 2015-04-22 | Layout method and device for Launcher main interface and smart television |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201510194244.2A CN106162302B (en) | 2015-04-22 | 2015-04-22 | Layout method and device for Launcher main interface and smart television |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN106162302A CN106162302A (en) | 2016-11-23 |
| CN106162302B true CN106162302B (en) | 2020-08-18 |
Family
ID=57346533
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201510194244.2A Active CN106162302B (en) | 2015-04-22 | 2015-04-22 | Layout method and device for Launcher main interface and smart television |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN106162302B (en) |
Families Citing this family (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107483449B (en) * | 2017-08-24 | 2020-07-28 | 四川长虹电器股份有限公司 | Universal television terminal management system and management method |
| CN109656669B (en) * | 2018-12-26 | 2021-11-16 | 深圳小湃科技有限公司 | Launcher operation method, Launcher operation device, Launcher operation equipment and computer readable storage medium |
| CN109783097B (en) * | 2018-12-29 | 2020-10-23 | 南京控维通信科技有限公司 | Implementation method for drawing web frequency graph plug-in |
| CN110704146A (en) * | 2019-08-30 | 2020-01-17 | 华为技术有限公司 | Focus management method applied to electronic equipment and electronic equipment |
| CN113242471B (en) * | 2021-05-25 | 2022-07-12 | 四川虹魔方网络科技有限公司 | Vue-based method for realizing preview component of television Launcher system web end |
| CN114816202A (en) * | 2022-05-09 | 2022-07-29 | 广州市易工品科技有限公司 | Method, device, equipment and medium for chart cross-boundary interaction in tab component |
Citations (9)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102541426A (en) * | 2010-12-31 | 2012-07-04 | 联想(北京)有限公司 | Electronic equipment and object processing method thereof |
| CN102819401A (en) * | 2012-06-08 | 2012-12-12 | 中标软件有限公司 | Android operating system and desktop icon arrangement method thereof |
| CN103116452A (en) * | 2013-01-31 | 2013-05-22 | 华为终端有限公司 | Creating method and device and terminal equipment of tabletop component |
| CN103246500A (en) * | 2012-02-06 | 2013-08-14 | 腾讯科技（深圳）有限公司 | Desktop icon display method and device |
| CN103399750A (en) * | 2013-08-07 | 2013-11-20 | 北京奇虎科技有限公司 | Method and device for achieving user interface |
| CN103577197A (en) * | 2013-11-18 | 2014-02-12 | 深圳市远行科技有限公司 | Method for achieving android application program dynamic form |
| CN103605640A (en) * | 2013-12-03 | 2014-02-26 | 中国联合网络通信集团有限公司 | Form adaption method and device |
| CN104020924A (en) * | 2014-05-21 | 2014-09-03 | 小米科技有限责任公司 | Label establishing method and device and terminal |
| CN104063134A (en) * | 2014-07-03 | 2014-09-24 | 上海斐讯数据通信技术有限公司 | Method for managing Android Launcher desktop |
Family Cites Families (12)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101083750A (en) * | 2006-05-31 | 2007-12-05 | 北京汉辰科技有限公司 | Service application of personal television and its realizing method |
| CN101196818A (en) * | 2006-12-08 | 2008-06-11 | 上海全景数字技术有限公司 | Fast graphical developing system |
| CN101140516A (en) * | 2007-10-22 | 2008-03-12 | 金蝶软件（中国）有限公司 | Method and system for dynamic laying-out interface element |
| CN101207450B (en) * | 2007-12-14 | 2011-05-11 | 北大方正集团有限公司 | Method for making special subject pattern plate as well as client end and network side server |
| CN101504669B (en) * | 2009-03-06 | 2011-08-24 | 阿里巴巴集团控股有限公司 | Web application template issuing method, apparatus and system |
| CN101615121A (en) * | 2009-07-22 | 2009-12-30 | 福州星网视易信息系统有限公司 | The style editor of BS platform information delivery system |
| CN101702126B (en) * | 2009-12-04 | 2012-11-28 | 金蝶软件（中国）有限公司 | Graphical interface editing method and device thereof |
| CN102375664B (en) * | 2010-08-20 | 2013-09-04 | 中国移动通信集团公司 | Icon moving method and device |
| CN102654833A (en) * | 2012-02-01 | 2012-09-05 | 中兴通讯（香港）有限公司 | Mobile phone application development method and system |
| CN103970401A (en) * | 2013-02-05 | 2014-08-06 | 富泰华工业（深圳）有限公司 | User interface for electronic device |
| CN103618955A (en) * | 2013-11-08 | 2014-03-05 | 天津三星电子有限公司 | Method and system for achieving television interface configuration |
| CN104090979B (en) * | 2014-07-23 | 2017-10-24 | 上海天脉聚源文化传媒有限公司 | A kind of page authoring method and device |
-
2015
- 2015-04-22 CN CN201510194244.2A patent/CN106162302B/en active Active
Patent Citations (9)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102541426A (en) * | 2010-12-31 | 2012-07-04 | 联想(北京)有限公司 | Electronic equipment and object processing method thereof |
| CN103246500A (en) * | 2012-02-06 | 2013-08-14 | 腾讯科技（深圳）有限公司 | Desktop icon display method and device |
| CN102819401A (en) * | 2012-06-08 | 2012-12-12 | 中标软件有限公司 | Android operating system and desktop icon arrangement method thereof |
| CN103116452A (en) * | 2013-01-31 | 2013-05-22 | 华为终端有限公司 | Creating method and device and terminal equipment of tabletop component |
| CN103399750A (en) * | 2013-08-07 | 2013-11-20 | 北京奇虎科技有限公司 | Method and device for achieving user interface |
| CN103577197A (en) * | 2013-11-18 | 2014-02-12 | 深圳市远行科技有限公司 | Method for achieving android application program dynamic form |
| CN103605640A (en) * | 2013-12-03 | 2014-02-26 | 中国联合网络通信集团有限公司 | Form adaption method and device |
| CN104020924A (en) * | 2014-05-21 | 2014-09-03 | 小米科技有限责任公司 | Label establishing method and device and terminal |
| CN104063134A (en) * | 2014-07-03 | 2014-09-24 | 上海斐讯数据通信技术有限公司 | Method for managing Android Launcher desktop |
Also Published As
| Publication number | Publication date |
|---|---|
| CN106162302A (en) | 2016-11-23 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN106162302B (en) | Layout method and device for Launcher main interface and smart television | |
| JP7354294B2 (en) | System and method for providing responsive editing and display integrating hierarchical fluid components and dynamic layout | |
| US20220236866A1 (en) | Method and system for section-based editing of a website page | |
| US8438495B1 (en) | Methods and systems for creating wireframes and managing containers | |
| US10474317B2 (en) | Dynamic node grouping in grid-based visualizations | |
| CN109614424B (en) | Page layout generation method, device, computing equipment and medium | |
| JP5792287B2 (en) | Spin control user interface for selecting options | |
| US10049095B2 (en) | In-context editing of output presentations via automatic pattern detection | |
| CN104239305A (en) | Electronic document generating and displaying method and apparatus | |
| CN103176954A (en) | Mathematical formula display method and mathematical formula display system based on hypertext markup language (HTML) 5 canvas | |
| CN105528217A (en) | Partial refreshing method and device based on display list | |
| CN105096368A (en) | Three-dimensional object processing method and related apparatus | |
| CN110825382A (en) | Front-end big data tree structure display method | |
| CN113010162B (en) | Page construction method, device and equipment | |
| CN112102446A (en) | Animation processing method and device and computer readable storage medium | |
| CN115982266A (en) | Page dynamic rendering method and system based on custom configuration attribute field | |
| CA2983248A1 (en) | Rendering graphical assets natively on multiple screens of electronic devices | |
| KR101649822B1 (en) | Apparatus and method for building web-page | |
| CN111506306B (en) | Method and device for writing active script and electronic equipment | |
| CN111782309B (en) | Method and device for displaying information and computer readable storage medium | |
| CN104462101A (en) | Information processing method and electronic equipment | |
| CN115509665B (en) | Method, device, medium and equipment for recording control in window | |
| CN112269960B (en) | Webpage updating method, system, equipment and storage medium based on associated report | |
| Papp et al. | TabularVis-a Circos-inspired interactive web client based tool for improving the clarity of tabular data visualization. | |
| CN114594936A (en) | Page design method and device, storage medium and computer equipment |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| C06 | Publication | ||
| PB01 | Publication | ||
| C10 | Entry into substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| CB02 | Change of applicant information |
Address after: 516006 TCL technology building, No.17, Huifeng Third Road, Zhongkai high tech Zone, Huizhou City, Guangdong Province Applicant after: TCL Technology Group Co.,Ltd. Address before: 516006 Guangdong province Huizhou Zhongkai hi tech Development Zone No. nineteen District Applicant before: TCL RESEARCH AMERICA Inc. |
|
| CB02 | Change of applicant information | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |