Welcome Guest, you are in: Login


DeveloperSerebryakov A.
Works withScrewTurn Wiki v5.0.x
Supported languages-

HTML5-compliant tag cloud. This plugin uses a TagCanvas, a non-flash, HTML5-compliant jQuery plugin.

You can use the following syntax:
textColour = '#183763',
textHeight = 20,
outlineColour = '#00f',
maxSpeed = 0.03,
minBrightness = 0.2,
pulsateTo = 0.6,
decel = 0.98,
reverse = true,
initial = (0.1;-0.1),
hideTags = false,
shadow = '#ccf',
shadowBlur = 3,
weight = false,
imageScale = null,
fadeIn = 1000
|[++Help.WikiMarkup-Pictures|Markup Pictures]
|[++Help.WikiMarkup-Tables|Markup Tables]}


interval20Interval between animation frames, in milliseconds
maxSpeed0.05Maximum speed of rotation
minSpeed0.0Minimum speed of rotation when mouse leaves canvas
dragControlfalseWhen enabled, cloud moves when dragged instead of based on mouse position
dragThreshold4The number of pixels that the cursor must move to count as a drag instead of a click
initialnullStarting rotation speed, with horizontal and vertical values as an array, e.g. (0.8;-0.3). Values are multiplied by maxSpeed.
fadeIn0Time to fade in tags at start, in milliseconds.
decel0.95Deceleration rate when mouse leaves canvas
minBrightness0.1Brightness (opacity) of tags at back of cloud (0.0-1.0)
maxBrightness1.0Brightness (opacity) of tags at front of cloud (0.0-1.0)
textColour 2"#ff99ff"Colour of the tag text - empty string or null to use the colour of the original link.
textHeight15Height of the tag text font (in pixels)
textFont 2"Helvetica, Arial, sans-serif"Font family for the tag text - empty string or null to use the font of the original link.
outlineColour"#ffff99"Colour of the active tag highlight
outlineMethod"outline"Type of highlight to use. Options are:
   outline - for an outline at the same depth as the active tag
   classic - for the old-style outline on top of all tags
   block - for a solid block around the active tag
   colour - to change the colour of the text or image of the current tag to the outlineColour value
   none - for no highlighting at all
outlineThickness2Thickness of outline in pixels
outlineOffset5Distance of outline from text, in pixels. This also increases the size of the active area around the tag.
pulsateTo1.0Pulsate outline to this opacity (0.0-1.0)
pulsateTime3Pulse rate, in seconds per beat
depth0.5Controls the perspective (0.0-1.0)
freezeActivefalseSet to true to pause movement when a tag is highlighted.
freezeDecelfalseSet to true to decelerate when highlighted tags freeze instead of stopping suddenly.
activeCursor"pointer"The CSS cursor type to use when the mouse is over a tag.
frontSelectfalseSet to true to prevent selection of tags at back of cloud.
clickToFrontnullIf set to a number, the selected tag will move to the front in this many milliseconds before activating.
txtOpttrueText optimisation, converts text tags to images for better performance.
txtScale2Scaling factor of text when converting to image in txtOpt mode.
reversefalseSet to true to reverse direction of movement relative to mouse position.
hideTagstrueSet to true to automatically hide the tag list element if TagCanvas is started successfully.
zoom1.0Adjusts the relative size of the tag cloud in the canvas. Larger values will zoom into the cloud, smaller values will zoom out.
wheelZoomtrueEnables zooming the cloud in and out using the mouse wheel or scroll gesture.
zoomStep0.05The amount that the zoom is changed by with each movement of the mouse wheel.
zoomMax3.0Maximum zoom value.
zoomMin0.3Minimum zoom value.
shadow"#000000"Colour of the shadow behind each tag.
shadowBlur0Amount of tag shadow blurring, in pixels.
shadowOffset(0;0)X and Y offset of the tag shadow, in pixels.
weight 3falseSet to true to turn on weighting of tags.
weightMode 3"size"Method to use for displaying tag weights. Should be one of:
   size - to display more significant tags in a larger font size
   colour - to display tags using colour values from the weightGradient option
   both - to use both size and colour to visualise weights
weightSize 31.0Multiplier for adjusting the size of tags when using a weight mode of size or both.
weightGradient 3{0:'#f00', 0.33:'#ff0', 0.66:'#0f0', 1:'#00f'}The colour gradient used for colouring tags when using a weight mode of colour or both.
weightFrom 3nullThe link attribute to take the tag weight from. The default of null means that the weight is taken from the calculated link font size.
weightSizeMin 3nullMinimum font size when weighted sizing is enabled.
weightSizeMax 3nullMaximum font size when weighted sizing is enabled.
shape4"sphere"The shape of the cloud. Currently supported are sphere, hcylinder for a cylinder that starts off horizontal, vcylinder for a cylinder that starts off vertical, hring for a horizontal circle and vring for a vertical circle.
locknullLimits rotation of the cloud using the mouse. A value of "x"
  limits rotation to the x-axis, "y" limits rotation to the
  y-axis. A value of "xy" will prevent the cloud rotating in
  response to the mouse - the cloud will only move if the initial
  option is used to give it a starting speed.
tooltip 5nullSets tooltip display method: null for no tooltips; native for operating system tooltips; div for div-based.
tooltipClass 5"tctooltip"Class of tooltip div.
tooltipDelay 5300Time to pause while mouse is not moving before displaying tooltip div, in milliseconds.
radiusX1Initial size of cloud from centre to sides.
radiusY1Initial size of cloud from centre to top and bottom.
radiusZ1Initial size of cloud from centre to front and back.
stretchX1Stretch or compress the cloud horizontally.
stretchY1Stretch or compress the cloud vertically.
offsetX0Offsets the centre of the cloud horizontally (measured in pixels)
offsetY0Offsets the centre of the cloud vertically (measured in pixels)
shuffleTagsfalseSet to true to randomize the order of the tags.
noSelectfalseSet to true to prevent the selection of tags.
noMousefalseSet to true to prevent any mouse interaction. The initial option must be used to animate the cloud, otherwise it will be motionless.
imageScale1Amount to scale images by - the default of 1 uses the size they appear on the page. For no scaling (use the actual image size) set this to null.
centreFuncnullFunction for drawing in centre of cloud. The function is passed in these parameters in order: canvas 2D context; canvas width; canvas height; centre X; centre Y.
animTimingSmoothThe animation timing function for use with the RotateTag and TagToFront functions. The values available are "Smooth" and "Linear".
splitWidth0If greater than 0, breaks the tag into multiple lines at word boundaries when the line would be longer than this value. Lines are automatically broken at <br> tags.

1This option is set for all TagCanvases on a page when the first is started (they all use the same interval timer). In previous versions the interval was fixed at 10 milliseconds. If your cloud seems to be very jerky, try increasing this to 40.
2. Details and examples of the shape options are on the TagCanvas shapes page.
3For examples of using these options, see the multiple font and colour page.
4A description of the tooltip options is on the TagCanvas 1.14 page.
5For more information about the weighting options, see the TagCanvas with weighted tags page.

Side Projects

  • RESX Synchronizer allows to synchronize multi-language .resx files (used for the development of ScrewTurn Wiki).
  • Pixel Picker enables to pick the color of pixels on your screen — very handy for day-to-day graphics-related activities.