Difference between revisions of "ImageLink"

From HSYCO
Jump to navigation Jump to search
 
(3 intermediate revisions by the same user not shown)
Line 7: Line 7:
 
{{UI Object Parameter (position)}}
 
{{UI Object Parameter (position)}}
 
*'''size''': the image's width and height
 
*'''size''': the image's width and height
*'''page''': the name of the destination page when you click the image. It is
+
*'''page''': the name of the destination page associated to the button. It is possible to specify an absolute or relative URL in the '''page''' parameter. The tag will work as an <A HREF> tag, loading the new page. If the URL is prefixed with "!", the page will open in a new tab or window.. If the loaded page is an HSYCO menu, the '''back''' link will show up in the menu page, to reload the referrer page. It is also possible to use the special keywords "$__urlkey;" and "$__query;" that will be replace with the URLKey and URL query string (if present, including the leading "?" character). You can also set this parameter to "back", "forward" or "logout". "back" moves back to the previous page in the pages navigation history, and can also close the current pop-up. "forward" moves forward in the pages navigation history. "logout" closes the session and reverts to the login page
possible to specify an absolute or relative URL in the ''page'' parameter. The tag will work as an <A HREF> tag, loading the new page. If the loaded page is an HSYCO menu, the ''back'' link will show up in the menu page, to reload the referrer page
 
 
*'''label''': the image's label
 
*'''label''': the image's label
 
*'''css''': the label's css attributes
 
*'''css''': the label's css attributes
  
 
{{Note: IMG Filename}}
 
{{Note: IMG Filename}}
 +
 
== Syntax ==
 
== Syntax ==
 
  (imagelink<!id> <image's filename>; <position>; <width>; <height>; <page>; <label>; <css>)
 
  (imagelink<!id> <image's filename>; <position>; <width>; <height>; <page>; <label>; <css>)

Latest revision as of 15:24, 13 September 2017

Note  For a description and a complete list of UI Objects, see UI Objects.

A clickable image from the www/img directory. You can add an optional label text next to the image, and define several optional CSS attributes to control the text’s format and position. The “top” CSS attribute is used to move the text from its default position. If top is not defined, the text will be located just below the image. If defined, you can specify a positive or negative offset, in pixels. The zero offset position is at the top corner of the image; a positive offset moves the text down, a negative offset moves the text up.

Parameters

  • id: the object's ID, used by UISets
  • image: image filename
  • position: the object's position. Use the pixels or rows and columns coordinates format
  • size: the image's width and height
  • page: the name of the destination page associated to the button. It is possible to specify an absolute or relative URL in the page parameter. The tag will work as an <A HREF> tag, loading the new page. If the URL is prefixed with "!", the page will open in a new tab or window.. If the loaded page is an HSYCO menu, the back link will show up in the menu page, to reload the referrer page. It is also possible to use the special keywords "$__urlkey;" and "$__query;" that will be replace with the URLKey and URL query string (if present, including the leading "?" character). You can also set this parameter to "back", "forward" or "logout". "back" moves back to the previous page in the pages navigation history, and can also close the current pop-up. "forward" moves forward in the pages navigation history. "logout" closes the session and reverts to the login page
  • label: the image's label
  • css: the label's css attributes
Image files are searched inside the www/<project's name>/img directory first, then inside the www/img directory.
If the filename is set with a UISet, it's possible to load an image from the web by entering the URL, or a path relative to www/<skin's name>/pic by specifying /pic/ followed by the filename


Syntax

(imagelink<!id> <image's filename>; <position>; <width>; <height>; <page>; <label>; <css>)

E.g.

(imagelink myimage.png; r8c7; 100; 100; page1; Label; (font-style:italic; top:-15px))

UI Attributes

Common attributes

Name Value Description
pos x<x>y<y> Position specified as x/y coordinates. E.g. x-5y10
visible true Default. Show the object
false Hide the object
blink true | slow Blink the object at a slow speed
fast Blink the object at a fast speed
false Stop the blinking
opacity 0.0 ... 1.0 Object opacity from 0 (not visible) to 1 (fully visible)
rotation 0 ... 360 Object rotation in degrees. Images are rotated around the center point, all other objects are rotated around the top left corner

Label attributes

Name Value Description
label <string> Label's text. Can contain HTML tags
fontfamily <family name> A prioritized list of font family names
fontsize <size> Font size in pixels. E.g. 15px
fontcolor <CSS color> Font color
fontstyle normal Normal font style, default
italic Italic font style
oblique Oblique font style
fontweight normal Normal characters, default
bold Thick characters
bolder Thicker characters
lighter Lighter characters
100 ... 900 Defines from thin to thick characters. 400 is the same as normal, and 700 is the same as bold

Image attributes

Name Value Description
img <full url (http://...)> Set the image source
<path relative to the project's img/ path>
<empty string> Empty picture
draw <draw instructions> Draws the image. See the Draw API

e.g.: line(0,100,20,50,blue);line(50,50,70,70,'255,10,150');

legacymode true To use with the draw attribute. Enables a compatibility mode that allows draw instructions on old browsers. It works by sending instructions to the HSYCO server that generates an image. For this reason it's slower.