JavaScript Library for SVG
The framework that swings SVG into action. Easy. Flexible. Innovative.
JavaScript Library for SVG
Like most Pergola classes, buttons can be fully configured during instantiation by overriding their basic paint and geometry properties, as well as defining any extra SVG attributes including transformations, in one single object literal and without the need to call any extra method. Buttons take symbol, image, text, quicktip. Their default shape (rect) can be overridden by the User Define shape property, either a reference from the shapes library or defined on the fly.
The properties hasVisualEffects and hasTextEffect can be overridden to neutralize the effects, or to implement accessibility effects. The special types ToolButton, DialogButton, CommandButton and WindowTab are subclasses of the Button class. User Events and Function ready.
Entirely mechanized construction with implemented system logic. Parallel scopes allow single definition with deep nested submenus. User Function ready.
myObject.menu.menu1.build({
...,
items: {
item1: {string: "...", check: true, fn: ...},
item2: {string: "...", check: false, fn: ...},
food: {
string: "Food",
submenu: {
nested menu
},
},
...
Extended set of properties for complete control over appearance and behavior.
The slider class is designed for easy use and management and can meet with any common situation – Pergola also defines the Scrollbar class, a system component for objects like windows and combo-boxes. User Events and Function ready.
A panel is a multi-purpose alternative container to the window. Typical uses are dialogs (preemptive), message (system component), panel with tabs (specifically designed for panels), panel with layouts, or simple static.
Interactivity logic among most of the classes is ensured by the user defined instance property owner. Thus, events are subject to a mechanism similar to the “Signal and Slot” model. The owner property palliates for the lack, in JavaScript 1.5, of a property similar or equivalent to the DOM's parentNode, and avoids blindfold enumeration in those prototype methods that are inherited.
A typical example of the information exchange between objects of different rank is shown in the radio button and check-box example contained within a panel.
This is a generic selector with pop–up LIST. It can be standalone, or a property of an owner object. User Function ready.
System component. This fast and accurate color picker is an external module developed for the GEMï web operating system (powered by Pergola). The GPL standalone component can be downloaded here.
Use it standalone or as component of an owner object, typically a panel, using a layout. Dynamic refresh on updates.
A progress bar can be customized by overriding the properties width, height, fill, stroke, statusFill, and the extra object lets you define any other <rect> attributes.
The Load class allows to encapsulate the downloaded document in any specified container. Thus for example, a window or any object can instantiate the Load class and specify another container.
Windows have built-in progress bar. It is activated by passing the window's property progress to the Load class methods, or you can specify another progress bar.
Using theme “slategray” with skin “rubber”, as defined in the config file.
TASKBAR | WINDOW TAB | PREVIEW
A taskbar is a system object. One instance, pergola.taskbar, is created at runtime and displayed upon creation of the first window only. Window tabs are descendants of the taskbar group. Window previews reflect dynamically updated contents of the windows, including transformations. You normally don't need to instantiate these classes.
Using theme “city” with skin “rubber”, as defined in the config file.
These are subclasses of the Button class. The purposes of ToolButton are a typical visual design and the on-and-off switch functionality, which also enables tool buttons to behave as radio buttons. The CommandButton class relates to window commands.
Their state can be processed individually or managed by their owner object. Extended User Function ready.
Instantiatiation of a quick tip is done through the quicktip property of those classes that implement it (Button and its subclasses). It can reference a tip from the quicktip.es repository file, where system tips are stored and where you can define your reusable tips, or can be defined on the fly. The text can be formatted as an array of lines or as a string using the | (vertical bar) separator, whether in the repository or in the ad hoc definition.
Quick tips can be static or mouse-tracking, and the popup delay, which can be configured globally in the skin file, can be overridden for the instance.
zoomup: {
tip: [
"Click : step zoom up",
"Click & hold : linear zoom up"
]
}
Extended User Function ready. The property realTime, can be set to true for objects that only require little processing/rendering. The property propName allows interactive use of several instances controlling properties of the same object, for example the r, g and b values of a color.
Library.
Patterns are just defined, they are not appended to the defs at runtime. A pattern definition is a function. Definitions include: line; grid; dot; grille; bar; ring; catseye; pirelli; checkers; pied_de_poule; hive. Variations are very easily obtained by passing values to override the deafault values of a pattern. The function returns the URL string:
var myPattern = pergola.pattern.ring({
colors: ["#000000", "yellowgreen", "gold"],
spacing: 14,
size: 14,
"stroke-width": 11,
opacity: .5,
transform: "rotate(-45)"
});
Library.
Shapes can be referenced not only during instantiation of some classes through the shape property, you can also use them directly with the utility function pergola.use:
pergola.use({
parent: node,
shape: pergola.shapes.triangle,
attributes: {
...,
transform: "rotate(12 32 27.7128) translate(406 -80) scale(4)"
}
});
Library.
Filters are just defined, they are not appended to the defs at runtime. A filter definition is a function. The filter is created if it doesn't exist. The function returns the URL string.
Use:
$C({
element: "rect",
...,
filter: pergola.filter.rosewood(),
...
});
Configured for using Bing tiles, it uses custom parts of Polymaps for 100% SVG and an extended geoJson parser. This application example shows how to implement options in menus: Views (Aerial, Aerial With Labels, Road); layers and features, with extended capabilities for adding SVG objects; grid (longitude latitude, accurate and usable – not Polymaps grid. Its frequency is dependent of the zoom level); etc. To define a mapping window you simply set the type property of a window object to “map”.
The Window class extends its prototype with specific mapping methods and tools which override the regular transformation tools. The tools send tile requests rather than applying transformations. The scrollbars, of the Illustrator type, are theoretically infinite in any direction and send requests as well.
Note that ASV is no longer supported for mapping extensions since version 1.1 (fully compatible)
. ASV support is totally abandoned from version 1.3.8.
For this example the d3.js library is plugged in.
Four D3 examples are loaded and encapsulated in windows. A menu and an additional tool for transitions were added to the Stream example window.
Interactivity example between the “stream” and “force” windows.
A single D3 example (based on http://bl.ocks.org/1216850) in a window.
The worms (charts) react to mouse moves. This adaptation uses the pergola dragarea, which is resized and positioned to the window's geometry through the pergola.dragarea.resize() method. This ensures that the mouse coordinates and the resulting animation are consistent with the window's position.
