Forem: Narayana Swamy

Creating visually rich PDFs with PDF-Frame-Vue

Narayana Swamy — Sun, 21 Jan 2024 10:10:15 +0000

Ever wondered how to generate PDF and graphics content in HTML without writing any code? Forget graphics coding, say hello to PDF-Frame-vue.

PDF-Frame-Vue

PDF-Frame-Vue is a cutting-edge vue.js component designed for rendering PDF and Canvas graphics effortlessly on the web. This component boasts an intuitive HTML-based syntax and semantics that simplifies the creation and management of graphical content. Leveraging the i2djs framework, PDF-Frame-Vue currently supports rendering outputs in both PDF and Canvas formats.

Features

Declarative Syntax: Easily define PDF/Canvas graphical content using a clear and declarative syntax.
SVG-like Syntax and Semantics: Adopts the familiar SVG tag and attribute syntax for defining geometrical shapes.
Consistent Rendering: Provides the same syntax and semantics for rendering both PDF and Canvas outputs.
Auto Layouting: Automatic layout adjustments when content overflows.
Multi-page Support: Create multi-page PDF documents seamlessly.
Animations & Events: Easy way to define the animations and events on elements in canvas context.

Sample PDF-Frame template



<pdfFrame 
    type="pdf" 
    :width="595" 
    :height="841" 
    :config="object" 
    :info="infoObj" 
    :encryption="encryptionObj">
    <!-- Page Templates -->
    <i-page-template id="temp-1">
        <i-rect :x="0" :y="0" :width="595" :height="841" :style="{ fill:'#ff0000' }"></i-rect>
    </i-page-template>

    <!-- Page 1 -->
    <i-page p-template="temp-1">
        <i-rect :x="30" :y="100" :width="535" :height="700" :style="{ fill:'#f0f0f0' }"></i-rect>
        <i-text :x="30" :y="60" :text="'Page 1 Title'" :width="530" :style="{font: '25px Arial', align: 'center'}"></i-text>
    </i-page>

    <!-- Page 2 -->
    <i-page p-template="temp-1">
        <i-text :x="30" :y="60" :text="'Page 2 Title'" :width="530" :style="{font: '25px Arial', align: 'center'}"></i-text>
        <i-image src="src/assets/i2d-frame.svg" :width="200" :x="175" :y="100"></i-image>
    </i-page> 
</pdfFrame>

Harnessing Vue's capabilities:

PDF-Frame-Vue utilizes Vue.js' custom renderer approach, tapping into the framework's templating engine, reactivity system, and component architecture.

Template Engine:

Declarative Syntax: pdf-frame-vue templates use HTML-like syntax, allowing developers to express complex rendering logic in a simple and readable way.
Dynamic Content: Through directives, expressions, and bindings, pdf-frame-vue templates can render content based on dynamic data. With pdf-frame, this means the ability to create dynamic PDF content.
Component architecture: self-contained, reusable pieces of code that can be used to create complex UIs.

Reactivity:

With Vue's reactivity system, any changes in data are automatically reflected in the pdf/Canvas.

Automatic Updates: If the data used to generate the PDF changes, the PDF will be automatically updated to reflect those changes. Reactivity in PDF Rendering: This reactivity extends to the PDF content itself, enabling real-time updates of the PDF as the underlying Vue data changes.

Easy Integrations:

Seamless Integration: pdf-frame-vue can be integrated directly within a Vue application, meaning developers can define and manipulate PDF content just as they would any other Vue component.
Broad Accessibility: By integrating pdf-frame-vue, developers can leverage their existing knowledge of Vue and its ecosystem, making it a highly accessible tool for anyone familiar with Vue development.

Experience the synergy of Vue.js and PDF-Frame-Vue for a seamless and powerful approach to PDF and Canvas rendering in web applications.

Installation



npm install @i2d/pdf-frame-vue

Github: https://github.com/I2Djs/pdf-frame
npm: https://www.npmjs.com/package/@i2d/pdf-frame-vue

Integration

Add the following code in vue entry file: main.js



import pdfFrame from "@i2d/pdf-frame-vue";

createApp(App).component("pdfFrame", pdfFrame)

PDF Capability:

PDF-frame provides a wide range of geometrical primitives, similar to SVG, and also a set of abstract tags like i-page, i-page-template.. etc for easily defining the graphical content of PDFs. Below is a sample PDF-frame template for PDF rendering.
Tags such as and are specifically designed and applicable only within the context of PDFs.

PDF Template: https://pr3kh5.csb.app/



<pdfFrame 
    type="pdf" 
    :width="595" 
    :height="841" 
    :config="object" 
    :info="infoObj" 
    :encryption="encryptionObj">
    <!-- Page Templates -->
    <i-page-template id="temp-1">
        <i-rect :x="0" :y="0" :width="595" :height="841" :style="{ fill:'#ffffff' }"></i-rect>
        <i-text :x="30" :y="30" :text="'Header Text'" :width="530" :style="{font: '15px Arial'}"></i-text>
        <i-text :x="30" :y="810" :text="'Footer Text'" :width="530" :style="{font: '15px Arial'}"></i-text>
    </i-page-template>
    <!-- Page 1 -->
    <i-page p-template="temp-1">
        <i-text :x="30" :y="60" :text="'Page 1 Title'" :width="530" :style="{font: '25px Arial', align: 'center'}"></i-text>
        <i-rect :x="30" :y="100" :width="535" :height="700" :style="{ fill:'#f0f0f0' }"></i-rect>
    </i-page>

    <!-- Page 2 -->
    <i-page p-template="temp-1">
        <i-text :x="30" :y="60" :text="'Page 2 Title'" :width="530" :style="{font: '25px Arial', align: 'center'}"></i-text>
        <i-image src="src/assets/i2d-frame.svg" :width="200" :x="175" :y="100"></i-image>
    </i-page> 
</pdfFrame>

Canvas Capability:

Similar to the PDF template, the canvas template also supports all geometrical permeative tags for defining 2D graphics. Below is the sample pdf-frame template for Canvas rendering. It also provides a way to define events and animations on elements.
Some of the tags like are not applicable for canvas context.

Canvas Template: https://cmynlk.csb.app/



<pdfFrame type="canvas" width="595" height="841">
    <!-- Background Rectangle -->
    <i-rect :x="30" :y="100" :width="535" :height="700" :style="{ fill:'#f0f0f0' }"></i-rect>

    <!-- Dynamic Rectangles -->
    <i-rect
        v-for="n in 30"
        v-bind:key="n"
        :x="0"
        :y="n * 11"
        :width="(Math.sin(n * 0.4 - 4.5) + 1) * 3 + 4"
        :height="(Math.sin(n * 0.4 - 4.5) + 1) * 3 + 4"
        :transform="() => ({
            translate: [130, 360]
        })"
        :style="{
          fill: 'hsl(230 ,100%,50%)',
          opacity: 0.6,
          lineWidth: 1,
        }"
        :event="{
            click: clickEventHndlr,
            dbClick: dbClickEventHndlr
        }"
    />
</pdfFrame>

Animation:

The PDF-Frame provides an intuitive way to specify animations on PDF-Frame elements. Using the element allows you to define the transitions of attributes and style properties for its parent element. In the provided example, transitions of x, y, and style properties have been applied to the rect element. Pdf-frame also provides , which enables the animation of the "d" attribute in the path element.



<pdfFrame type="canvas" width="595" height="841">
    <i-rect 
        :x="30" 
        :y="100" 
        :width="535" 
        :height="700" 
        :style="{ fill:'#f0f0f0' }">
          <i-animate
            :duration="1000"
            :ease="linear"
            :to="{
              x: 200,
              y: 300,
              style: { fill: '#ff0000' }
            }" />
    </i-rect>
</pdfFrame>

Events:

PDF-Frame facilitates easy integration of various events into its elements. For instance, in the example given, click and mouseover event handlers are attached to the rect element within the PDF-Frame canvas. The PDF-Frame canvas is versatile, supporting a wide array of events including click, double-click, mouseover, mousemove, mousedown, mouseup, mouseleave, contextmenu, and various touch events like touchstart, touchend, touchmove, and touchcancel.



<pdfFrame type="canvas" width="595" height="841">

    <i-rect 

        :x="30" 

        :y="100" 

        :width="535" 

        :height="700" 

        :style="{ fill:'#f0f0f0' }"

        :event="{

                click: clickHndlr,

                mouseover: mouseHndlr

             }"

    >

    </i-rect>

</pdfFrame>

Resources

Github: https://github.com/I2Djs/pdf-frame
npm: https://www.npmjs.com/package/@i2d/pdf-frame-vue
wiki: https://github.com/I2Djs/pdf-frame/wiki/pdf%E2%80%90frame%E2%80%90vue
element API: https://nswamy14.gitbook.io/i2djs-v4/api-reference/elements-api

Thank you!

Unlocking Insights with Visual- Heatmap: A High-Performance JavaScript Module for Heatmap Visualisation

Narayana Swamy — Mon, 15 Jan 2024 10:40:09 +0000

In the digital age, data visualisation is crucial for understanding complex datasets. Visual Heatmap, an open-source JavaScript module, emerges as a powerful tool designed to render large-scale heatmaps with exceptional performance. This article delves into the functionality of Visual Heatmap and explores how it's revolutionising the way we visualise data.

Github: https://github.com/nswamy14/visual-heatmap

What is a Heatmap?

A heatmap is a graphical representation of data where individual values are denoted by colors. Often used to show variation across a two-dimensional surface, heatmaps make it easy to understand complex data at a glance. They are particularly useful in various fields, from geographic mapping of demographics to displaying website traffic density.

High-Performance Visualisation with Visual Heatmap

Visual Heatmap stands out due to its ability to handle and render over 500,000 data points seamlessly. By leveraging cutting-edge WebGL/Shaders for graphical rendering, it ensures that even the most extensive datasets are displayed smoothly and interactively.

Key Features and Advantages:

High-Performance Rendering: Effortlessly manage and render vast datasets with high responsiveness.
Scalability: Capable of visualizing over 500,000 data points, making it ideal for large-scale applications.
Easy-to-Use Syntax: The module's syntax is intuitive, making it accessible even to those new to coding.
Lightweight Framework: Despite its robust capabilities, Visual Heatmap is lightweight and won't bog down your applications.
Customisable: With a range of API options, users can tailor the heatmap to fit their specific needs, from adjusting point intensity and size to setting custom color gradients.

Installation and Setup

Installing Visual Heatmap is straightforward. Users can add it to their projects via npm with

npm i visual-heatmap --save

Or Download source code from below GitHub repo
https://github.com/nswamy14/visual-heatmap

Demo:

Click on the below examples

Crafting Your Heatmap

Creating a heatmap is simplified with a primary method, Heatmap(containerId/containerElement, config). This function initiates a new WebGL heatmap layer and returns a render instance for further manipulation. The configuration options are extensive, allowing for detailed customization, including size, maximum data value, blur, opacity, and more.

let renderInstance = Heatmap('#containerId', {
        size: 30.0,
        max: 100,  // if not set, will be derived from data
        min: 0,  // if not set, will be derived from data
        intensity: 1.0,
        background: {
            url: "urlPath",
            width: 100, // if not set, viewport width of the image will be considered
            height: 100, // if not set, viewport height of the image will be considered
            x: 0,
            y: 0
        },
        gradient: [{
            color: [0, 0, 255, 1.0],
            offset: 0
        }, {
            color: [0, 0, 255, 1.0],
            offset: 0.2
        }, {
            color: [0, 255, 0, 1.0],
            offset: 0.45
        }, {
            color: [255, 255, 0, 1.0],
            offset: 0.85
        }, {
            color: [255, 0, 0, 1.0],
            offset: 1.0
        }]
    });

Interactive and Dynamic

Once instantiated, Visual Heatmap provides several API methods for dynamic interaction. Users can render data, add new data points, adjust maximum values, and apply transformations such as zoom, rotation, and translation. This interactivity ensures that the heatmap is not just a static image but a dynamic visualisation tool.

instance.renderData([])
Accepts an array of data points with 'x', 'y' and 'value'.

instance.addData([], transformationIntactflag);
Accepts an array of data points with 'x', 'y' and 'value' and a flag to specify to apply existing canvas transformations on the newly added data points.

instance.setMax(number)
To set max data value, for relative gradient calculations.

instance.setMin(number)
To set min data value, for relative gradient calculations.

instance.setTranslate([number, number])
Method to perform translate transformation on the canvas. Accepts array[x, y] as an input.

instance.setZoom(number)
Method to perform zoom transformation on the canvas. Accepts float value as an input.

instance.setRotationAngle(number)
Method to perform rotation transformation on the canvas. Accepts angle in radians.

instance.setSize(number)
Method to set point radius. Accepts float value as an input.

instance.setIntensity(number)
Method to set Intensity factor. Accepts float value as an input.

instance.setOpacity(number)
Method to set Opacity factor. Accepts float value as an input.

instance.setBackgroundImage({ url: , x: , y: , height: , width: })
Method to set Background image. Accepts Object with { Url, height, width, x, and y} properties as input.

instance.projection({x: , y: })
Api to get projected co-ordinates relative to the heatmap layer.

instance.clear()
Method to clear canvas.