Stories by Luiz Eduardo Zappa on Medium

Nuxt 3 | Repository pattern: organising and managing your calls to APIs (Typescript)

Luiz Eduardo Zappa — Sun, 16 Jul 2023 23:02:44 GMT

In Nuxt 2 the use of axios was straightforward and allowed a good management of API calls. When I started to develop with Nuxt 3 I found it difficult to organise with the composables useFetchand useAsyncData(which uses ofetchlibrary behind).

This article is a step by step on how to use the repository pattern to organise your API calls in Nuxt 3. Looking for an example, I just found this article from Vue Mastery which is very enlightening, but has some problems, like generating duplicate requests when using SSR (Server-Side Rendering). I based this article to write this tutorial correcting the flaws I found.

Accessing API in a clean way

The repository pattern

Before we go into the details of the implementation, a short theoretical introduction to this pattern is important for those who are not familiar with it.

The repository pattern is a design pattern that provides an abstraction layer between the application’s business logic and the data persistence layer (typically a database or web service).

The main idea behind the repository pattern is to encapsulate the logic for retrieving and storing data within dedicated repository classes. These repositories act as a bridge between the application and the datasource, providing consistent and uniform interface to interact whit the data.

To avoid getting too ethereal, take a look at the diagram below:

Without VS With repository pattern

In the first diagram this pattern is not used. All the logic to access (and transform) the source data is in the application layer. So, if there is a change in the URL or in the format that the data comes from, we will have to make the same change in all pages that consume that endpoint, hurting the DRY (don’t repeat yourself) principle .

The second diagram introduces the repository layer between the application and the datasources. All the logic of accessing (and transforming) the data is encapsulated in this layer, so the application layer does not need to know the implementation details of accessing the datasource.

This provides some advantages to our code:

Abstraction: shields the application from the underlying data access implementation details. It allows the application to work with a consistent set of methods and operations, regardless of the specific database technology.
Separation of concerns: by isolating the data access logic into dedicated repository classes, this pattern helps maintain a separation of concerns between the business logic and data persistence concerns. This improves code readability, maintainability and testability.
Single responsibility principle: each repository class focuses on a specific entity within the domain model.
Testability: repositories classes can be easily mocked or stubbed during unit testing.

Implementing the repository pattern in Nuxt 3

All code below is in this GitHub repository. The datasource will be a fake API so we don’t have to worry about building an API web service or a database.

As we will be using the $fecth method of the ofetch library, we have to install it to be able to import it. In your terminal install the library and save in development:

npm install ofetch --save-dev

The repository layer will be in the repository folder. I’ll follow the same organisation as the Vue Mastery tutorial, creating a factory class at the root folder and for each repository, a new file will be created inside the modules subfolder.

So, let’s go, in the root folder of your Nuxt 3 project create the repository folder:

mkdir repository

Inside this folder we create the factory.ts file which will have our abstract class that all repositories will extend from:

// [FILE]: repository/factory.ts

// 3rd's
import { $Fetch, FetchOptions } from 'ofetch';

/*
 The FetchFactory acts as a wrapper around an HTTP client. 
 It encapsulates the functionality for making API requests asynchronously 
 through the call function, utilizing the provided HTTP client.
*/
class FetchFactory {
  private $fetch: $Fetch;

  constructor(fetcher: $Fetch) {
    this.$fetch = fetcher;
  }

  /**
   * The HTTP client is utilized to control the process of making API requests.
   * @param method the HTTP method (GET, POST, ...)
   * @param url the endpoint url
   * @param data the body data
   * @param fetchOptions fetch options
   * @returns 
   */
  async call(
    method: string,
    url: string,
    data?: object,
    fetchOptions?: FetchOptions<'json'>
  ): Promise {
    return this.$fetch(
      url, 
      { 
        method, 
        body: data, 
        ...fetchOptions 
      }
    )
  }
}

export default FetchFactory;

This class receives an HTTP client that will be used to make the requests. In this case we are using the $fetch method from the ofetch library, which is the one Nuxt 3 uses behind the scene.

Now let’s create the repositories. They will be inside the modules subfolder, so create the modules folder inside the repository folder:

mkdir modules

For simplicity, in this example we will use only one domain: products. Then we will have only one repository. But the idea is that for each domain (example: users, cart, …) a separate repository is created.

Let’s create the product repository. Create the products.ts file inside the modules subfolder.

// [FILE]: repository/modules/products.ts

// 3rd's
import { FetchOptions } from 'ofetch';
import { AsyncDataOptions } from '#app';

// locals
import FetchFactory from '../factory';

type IProduct = {
  id: number;
  title: string;
  price: number;
  description: string;
  category: string;
  image: string;
  rating: {
    rate: number;
    count: number;
  }
}

class ProductsModule extends FetchFactory {
  private RESOURCE = '/products';

  /**
   * Return the products as array 
   * @param asyncDataOptions options for `useAsyncData`
   * @returns 
   */
  async getProducts(
    asyncDataOptions?: AsyncDataOptions
  ) {

    return useAsyncData(
      () => {
        const fetchOptions: FetchOptions<'json'> = {
          headers: {
            'Accept-Language': 'en-US'
          }
        };
        return this.call(
          'GET',
          `${this.RESOURCE}`,
          undefined, // body
          fetchOptions
        )
      },
      asyncDataOptions
    ) 
  }
}

export default ProductsModule;

We create the product repository by extending the FetchFactory class. Notice that we wrap the call method with the composable useAsyncData. This is necessary so that we don’t have network calls duplication (see Nuxt documentation).

As an example I added the variable fetchOptions in case some method needs additional parameters, in the example I modified the header. Also, it is possible to pass options to the useAsyncData function when calling this method. As we will see, this will be useful later on.

Now let’s manage our respositories through a Nuxt plugin. To do this, inside the plugins directory of our Nuxt project, create a file called api.ts:

// [File]: plugins/api.ts

// 3rd's
import { $fetch, FetchOptions } from 'ofetch';

// locals
import ProductsModule from '~/repository/modules/products';

interface IApiInstance {
  products: ProductsModule;
}

export default defineNuxtPlugin((nuxtApp) => {
  const config = useRuntimeConfig();

  const fetchOptions: FetchOptions = {
    baseURL: config.public.apiBaseUrl
  };

  // Create a new instance of $fecther with custom option
  const apiFecther = $fetch.create(fetchOptions);

  // An object containing all repositories we need to expose
  const modules: IApiInstance = {
    products: new ProductsModule(apiFecther),
  };

  return {
    provide: {
      api: modules
    }
  };
});

Here we create an instance of $fetch called apiFetcher and pass it to our product repository constructor. The base url value comes from an environment variable, let’s add it to our project.

In the root directory of our Nuxt project create a file called .env which will contain the base URL of our api.

# [File]: .env

API_BASE_URL=https://fakestoreapi.com

Now we need to pass this variable when we start Nuxt. To do this, in the package.json file change the dev script to the following:

[FILE]: package.json

"scripts": {
   ...
    "dev": "nuxt dev --dotenv .env",
   ...
  }

In your terminal run the command below so that Nuxt generates the type files and typescript no longer complains about the baseURL attribute of our plugin.

npm run postinstall

Then we need to expose the API base URL variable in the Nuxt settings. In the nuxt.config.ts file add the following snippet:

// [FILE]: nuxt.config.ts

// ...

  runtimeConfig: {
    public: {
      apiBaseUrl: process.env.API_BASE_URL
    }
  }

// ...

Okay, now we will use this plugin on a Nuxt page. Inside the pages directory I will create the index.vue file:

// [FILE]: pages/index.vue

The relevant part of this code is inside the script tag. We take the reference to the created plugin ( $api) and call the getProductsmethod. The values returned are those of the composable useAsyncData (see documentation). They are already reactive by default.

That way API is initially called on the backend, what if we wanted it to be called only on the client side? For that, we can set the server option to false:

// To API be called only on the client side

const {
    data: productsList,
    pending,
    error
  } = await $api.products.getProducts({
        server: false
      });

Attention: the use of the composable useAsyncData inside the onMounted hook will only work when a hot reload of the page happens. To work around this behaviour we should also set the server option to false, as in the previous example.

All the code is in this GitHub repository.

Conclusion

We were able to abstract all datasource access logic from the application layer. For example, if we wanted to replace the fake API, we could just change it in the repository and our application would be unchanged (as long as we respect the contract).

The repository pattern is also widely used in the backend when building REST API services that access databases, for example.

How to find out the coordinates of vertices of a shape in fabric.js?

Luiz Eduardo Zappa — Sat, 25 Feb 2023 13:28:59 GMT

A common question I see among fabric.js developers is how to get the coordinates of an object’s vertex. We’ll talk in detail about that in this article and along we’ll build the following scenario: a parallelogram with circles at each vertices, and these circles are positioned dynamically when we move, resize, shear or rotate the parallelogram.

Vertices of an object in the fabric.js

We’ll work with fabric.Polygon because it’s possible to directly access the points (vertices). In a fabric.Rect or fabric.Triangle we can not get this information directly. It would be possible with a little geometry, but since we can build rectangles and triangles with a polygon, it ends up being a more general solution.

Let’s go ahead and create the polygon:

const points = [
    { x: -50, y: 150 },
    { x: 100, y: 150 },
    { x: 50, y: 50 },
    { x: -100, y: 50 }
  ];

const polygon = new fabric.Polygon(
  points, 
  {
    top: 20
  }
);

The points define the parallelogram below.

Our parallelogram

These points are defined in the plane of the object itself, they are not coordinates relative to the canvas (remember that in fabric.js the Y axis grows downwards). What we need to do is transform these coordinates to the plane of the canvas.

Representation of the points when viewed in relation to each of the planes

If to achieve this goal you thought of transformation matrix, you got it right! We need to calculate the transformation matrix of the canvas and of the object, multiply each other so we can map the points from one plane to another.

If the concept of transformation matrix is not very clear, I explain in depth in this article what are transformation matrices, Cartesian planes, the how (and why) matrices can map a point from one plane to another. I strongly recommend reading it.

Let’s create a function that takes as argument a fabric.Polygon and returns an array with the points of this polygon with the coordinates relative to the canvas (in other words, in the canvas plane).

function getPolyVertices(poly) {
  const points = poly.points,
    vertices = [];

  points.forEach((point) => {
    const x = point.x - poly.pathOffset.x,
      y = point.y - poly.pathOffset.y;

    vertices.push(
      fabric.util.transformPoint(
        { x: x, y: y },
        fabric.util.multiplyTransformMatrices(
          poly.canvas.viewportTransform,
          poly.calcTransformMatrix()
        )
      )
    );
  });

  return vertices;
}

Let’s understand this funciton better. Initially it stores the points of the polygon. Then it iterates over them applying a transformation to each of them with the transformation matrix resulting from the multiplication of the transformation matrices of the canvas (viewportTransform) and the object. Remember that this transformation matrix that allows us to map a point from one plane to another.

What may not be very clear is this part:

const x = point.x - poly.pathOffset.x,
      y = point.y - poly.pathOffset.y;

What the hell is this pathOffset and why are we subtracting it from the point? It’s the difference between the centre of the shape and the origin (0, 0) of the object’s plane. The image below shows visually the pathOffset calculation. The orange point is the centre of the shape and the red one the origin of the object’s plane. On the X axis, since the centre and origin are at the same position, pathOffset.x = 0. On the Y axis, the centre is offset 100 from the origin, so pathOffset.y = 100.

pathOffset calculation

By subtracting the pathOffset from each vertex, we are actually changing the origin of the object’s plane to be the centre of the shape. Visually, the result:

Origin change

And why do we have to use the origin in the centre of the shape? The translate used in the transformation matrix calculation is always relative to the centre point of the object. As we are multiplying these vertices by the transformation matrix, we must use the same “base”, otherwise the result of the calculation would be incorrect.

Okay, we’ve gone through the hardest part. Now it’s just use the vertices positions in the canvas plane that were returned by the getPolyVertices function to render the circles.

const polyVertices = getPolyVertices(polygon);

const circles = [];

polyVertices.forEach((vertice) => {
  const circ = new fabric.Circle({
    radius: 5,
    originX: "center",
    originY: "center",
    fill: "blue",
    left: vertice.x,
    top: vertice.y
  });
  circles.push(circ);
  canvas.add(circ);
});

The code above is straightforward. It’s iterating on each of the vertex positions and creating a circle. In addition, it’s storing the reference of those in an array.

Finally, we create a function to update the position of these circles every time the parallelogram is moved, resized, skewed or rotated.

function updateCirclesPosition() {
  const newVertices = getPolyVertices(polygon);
  newVertices.forEach((vertice, idx) => {
    const circ = circles[idx];
    circ.left = vertice.x;
    circ.top = vertice.y;
  });
}

polygon.on("scaling", updateCirclesPosition);
polygon.on("skewing", updateCirclesPosition);
polygon.on("rotating", updateCirclesPosition);
polygon.on("moving", updateCirclesPosition);

There we have our parallelogram with circles at the vertices that dynamically update their position.

https://medium.com/media/97f936168d8e83de8ee73a046d81abcf/href

The transformation matrix in fabric.js

Luiz Eduardo Zappa — Sun, 08 Jan 2023 16:19:18 GMT

Recently I’m using the excellent fabric.js library for a side project. I came across the transformation matrix. The purpose of this article is to detail how the transformation matrix works and especially how did we arrive at the transformation matrix, why is it in the format we know? Although this is an explanation in the context of fabric.js, it’s extensible to other contexts (perhaps with slight implementation differences).

Since not everyone has a background in mathematics (it’s actually high school math, but some people might barely remember), I will start by explaining all the fundamentals so that any reader can follow this article. Feel free to skip some part if you find it too basic.

Base vectors of a Cartesian plane

We already saw what Cartesian planes are in the previous article (if you are not familiar whit this concept and with vectors, I strongly recommend check out this article before continuing reading).

In a Cartesian coordiante system there are standard unit vectors in the direction of the X and Y axis. The unit vector in the X axis is represented as î (hat i) and the unit vector in Y axis as ĵ (hat j).

Standard unit vectors

Unit vectors: vectores that have a length of 1. By convention every unit vector is represented with a hat. For instance: â, î,…

The unit vectors î and ĵ are the bases of our coordinate sytem, and we can represent any vector in terms of them.

Let’s look at an example. Here we will use the top left origin, that is, the positive diretion of the Y axis is downards, like the canvas in the fabric.js. Representing the point (2, 2) in this plane:

Plot point (2, 2)

Now let’s draw a vector from the origin point (0, 0) of our plane to the point (2, 2):

We can represent the vector [2, 2] in terms of the base of our plane:

Vector [2, 2] in terms of î and ĵ

That is, the vector [2, 2] is a linear combination of two î vectors and two ĵ vectors. Any vector in this plane can be represented as a linear combination of î and ĵ (the basis of our plane).

Linear transformation

A central concept for understading the transformation matrix is linear transformation:

Linear transformation alters our plane such that parallel lines stay parallel and equally spaced, and the origin doesn’t move.

Let’s see in practice a linear transformation applied to our vector [2, 2]. For this, I created an animation using fabric.js (you can play around here). When performing a rotation transformation with shear, we can see after transformation our vector remains equal to two steps in the direction of the transformed X axis (two î vectors) and two steps in the direction of the transformed Y (two ĵ vectors).

Linear transformation in action

The blue grids (dark and light) represent our transformed plane, and the light gray grids represent our untransformed plane. The values of î, ĵ, v vectors are calculated relative to the untransformed plane. Notice that the values of these vectors change relative to the untransformed plane. For example, the vector î before transformation was [1 0] and after transformation is [0.9397 -0.342]. But even with the transformation, the vector v remained equal to 2î + 2ĵ and the origin remained the same. That is, this is a linear transformation.

Linear transformation with matrices

As we have seen, to describe a linear transformation we only need to keep track where the vectors î and 2x2 transformation matrix go and calculate the coordinates with respect to the untransformed plane.

The matrix is nothing more than packing these two vectors together to make the calculation easier. It’s called a two-by-two matrix that describes a 2D linear transformation. The first column of this matrix describes the vector î after the transformation and the second column of the matrix describes the vector ĵ after the transformation:

2x2 transformation matrix

If we want to find out where a vector is located after the transformation, all we need to do is multiply our original vector by the 2x2 transformation matrix:

Applying transformation matrix to original vector to find final position

Note that we find the final position of the vector after the transformation without having to work with the Cartesian plane. This makes the calculation process much easier and faster. In an animated way, we can map the calculation from the Cartesian plane to matrices as follows:

Cartesian plane calculation vs matrix-wise

If you need a matrices review, I recommend these videos:

Let us now see some specific matrices and their respective transformations.

Transformation: scaling

When applying a scale on the X axis and a scale on the Y axis, the unit vectors î and ĵ after the transformation will be:

Scaling transformation

We can pack this transformation into a matrix that is called a scaling matrix:

Scaling matrix

For example, applying scaleX = 0.8 and scaleY = 0.8:

Scaling transformation in fabric.js

Transformation: flip

This operation is similar to scaling. We just need to invert one of the coordinates for horizontal or vertical inversion (or both) to reflect about the origin.

Flip transformation

The flip in the transformation matrix boils down to the inversion of the sign on the respective scale axis:

Flip matrix

For instance, applying flipY:

Flip transformation in fabric.js

Transformation: skewing

First, let’s understand how shear occurs. By performing a shear along the X axis (skewX) from an alpha angle at the point(x, y), our transformed point will be offset by a delta X value:

skewX of alpha

To calculate the value of delta X, just a little geometry:

Calculation of delta X

We know the tangent of alpha (= skewX) and the value of y, we can write delta X in terms of both:

That is, a shear transform ( skewX) on the X axis applied to a point(x, y) will transform it into:

(x, y) = (x + y * Tan(skewX), y)

The deduction of the shear formula along the Y axis is the same. In order to not get too long, I won’t disassemble it, but the result after a skewY transformation at the point(x, y) will be:

(x, y) = (x, y + x * Tan(skewY))

The more attentive reader may be wondering what happens if we apply skewX and skewY at the same time. We have to determine an order of operation, otherwise we will have a circular reference. In the case of the canvas (and fabric.js), first we apply the skewY and then the skewX:

So, we can write the shear transformation in the unit vectors as:

Skew transformation

We can pack this transformation into a matrix that is called shear matrix:

Shear matrix

For example, applying skewX = -20 and skewY = -10:

Shear transformation in fabric.js

Transformation: rotation

As expected, the transformation due to a rotation is a function of the angle of the rotation. The calculation of vectors values is found through trigonometry:

Rotation transformation

We can pack this transformation into a matrix that is called rotation matrix:

Rotation matrix

Transformation: translate

Translation moves our coordinate system to another location, i.e. changes the origin. And by definition, by changing the origin, it’s not a linear transformation, so we cannot describe this transformation in our linear transformation matrix.

To represent this transformation, we create a vector from the origin of the plane to the new origin of the translated plane:

Vector pointing to the translated plane

It may seem a little strange that the vectors î and ĵ continue with the values [1 0] and [0 1], but here we are talking about different planes.

And how do we represent translation in matrix format? We can combine our two-by-two linear transformation matrix with the translation into a single matrix:

Translation matrix

Notice that an extra line appeared at the end of our matrix, we have increased the matrix to make it compatible with translation operations.

Now if we are going to multiply a vector by this transformation matrix, we must also add one more line in the matrix that represents this vector to allow the matrix operations:

Composing multiple transformations

We can compose a serie of transformations in sequence. For example, a scaling, then a rotation and finally a shear: (note that we are now working with the augmented transformation matrix to accommodate the translation)

Transformation matrices

For this, we multiply each of the transformation matrices to arrive at the final transformation matrix:

Final transformation matrix

The matrix multiplication order makes difference in the final result. That is, matrix A times matrix B is different from matrix B times matrix A.

The order of multiplication is important, the first transformation start rightmost. For example, if we reversed the order of multiplication, the final result would be different:

Different results when we change the order of multiplication

But why when we do something like code below in fabric.js the end result is always the same?

const rect1= new fabric.Rect({ 
  width: 100, 
  height: 100, 
  scaleX: 1,
  scaleY: 1,
  skewX: 1,
  skewY: 1,
  angle: 0
});

const rect2= new fabric.Rect({ 
  width: 100, 
  height: 100, 
  scaleX: 1,
  scaleY: 1,
  skewX: 1,
  skewY: 1,
  angle: 0
});

canvas.add(rect1, rect2);

rect1.set({scaleX: 2});
rect1.set({angle: 30});
rect1.set({skewX: 45});

rect2.set({skewX: 45});
rect2.set({angle: 30});
rect2.set({scaleX: 2});

canvas.renderAll();

We are applying the transformations in different order, but the end result is the same. The reason is that there is a fixed transformation order for objects, regardless of whether we set one of the transformations before or after. The order used internally by fabric.js is as follows:

Fabric.js transformation order

First apply skew, then scaling, rotation and finally translation. We can change this order when working with groups, we’ll see later in this article.

Undoing transformations

We can undo certain transformations directly in the final transformation matrix. For this we use a property of matrices which is: the multiplication of matrix (M) by its inverse (M-¹) produces an identity matrix (I). Note that the order of multiplication in this case produces the same result:

Matrix times its inverse

The identity matrix does not change the result of a matrix multiplication. That is, matrix A multiplied by identity matrix (I) remains matrix A: (again the order of multiplication is indifferent)

Matrix times identity

So if we have the following transformation:

And we want to remove the scale transformation, just multiply by the inverse of the scale matrix:

Removing scale

One important thing is that we must multiply the inverse of the transformation matrix next to the original matrix. For example, if we wanted to remove skew, the first case is incorrect and the second correct:

Removing skew

Fabric.js has functions to assist with these operations:

fabric.util.invertTransform: calculates the inverse of a transformation matrix.
fabric.util.multiplyTransformMatrices: multiplies two transformation matrices.
fabric.util.transformPoint: apply transform to a point.

As we saw, for transformations in a single object fabric.js abstracts the entire transformation process. But when we work with different planes, knowing these operations is important.

The transformation matrix in fabric.js

The transformation matrix in fabric.js is represented in an array of length 6 as follows:

There are a few ways to calculate the transformation matrix of an object in fabric.js. It depends on which plane we are referring to:

const rect = new fabric.Rect({ 
  width: 100, 
  height: 100, 
  scaleX: 1,
  scaleY: 1,
  skewX: 1,
  skewY: 1,
  angle: 0
});

// Transformation matrix in the object plane
rect.calcOwnMatrix();
// Transformation matrix from the canvas plane to the object plane
rect.calcTransformMatrix();

calcOwnMatrix: returns the transformation matrix in the object plane, without considering external transformations.

calcTransformMatrix: returns the transformation matrix from the canvas plane to the object plane. If the object is inside a group, it will consider these transformations as well.

Later on we will see in more details the multiple planes that exist on the canvas and these concepts will become clearer.

Let’s see the transformation matrix in action in fabric.js:

https://medium.com/media/fb786ecf41ab480b72cf2124a3bc8584/href

The different Cartesian planes in fabric.js

We will work with different Cartesian planes and see how the transformation matrix allows us to locate points on these different planes.

Let’s start with an example. Adding a rectangle to the canvas:

const rect = new fabric.Rect({
  width: 50,
  height: 50,
  fill: 'red',
  strokeWidth: 0,
  originX: 'left',
  originY: 'top',
  left: 25,
  top: 25
});
canvas.add(rect);

Our canvas is a Cartesian plane (origin is top left, so the Y axis grows downwards). When we add a rectangle, behind the scene we are defining a new plane and set of 4 points inside it that form our rectangle:

Canvas plane and rect plane

Now we have two planes:

The canvas plane (has gray arrows as axes)
The rectangle plane (orange arrows as axes)

Note that the plane of an object has its center as the origin, so it is located at the point (50, 50). This is a fabricj.js design choice. Each of these planes has a transformation matrix that allow us to apply the existing transformations in that plane to a point. If we calculate the transformation matrix of the object and the canvas:

// Canvas plane tranformation matrix
canvas.viewportTransform
// [1, 0, 0, 1, 0, 0]

// Object plane tranformation matrix 
rect.calcTransformMatrix();
// [1, 0, 0, 1, 50, 50]

As we can see, in the plane of the object, translateX and translateY point to the center of the object which is the center of the plane.

In the previous image we are observing the points in relation to the canvas plane. What it we observed the same points but in relation to the plane of the rectangle? The representation would look like this:

The points relative to the plane of the rectangle

Let’s apply what we learn. I have two rectangles with two different transformations (one with scale and one with rotation):

const rect_1 = new fabric.Rect({
  width: 50, 
  height: 50, 
  fill: 'red', 
  left: 10, 
  top: 10,
  scaleX: 3
});

const rect_2 = new fabric.Rect({
  width: 50, 
  height: 50, 
  fill: 'red', 
  left: 10, 
  top: 100,
  angle: 30
});

canvas.add(rect_1, rect_2);

I want to create a line from the center to the top right corner. How could I do this using transformation matrix?

Our goal

Try to think a little before looking at the solution…

Let’s look at one of the ways to achieve this. We first look at the untransformed plane of the object. We want to draw a vector from the origin of this plane, point(0, 0), to the point(25, -25):

Object’s untransformed plane

When we are creating the line, we are on the canvas plane. That is, we need to find these points on the canvas plane. To do this, just multiply by the transformation matrix of each of the rectangles:

// Points of interest in the untransformed plane of objects
const centerPoint = new fabric.Point(0, 0),
  cornerPoint = new fabric.Point(25, -25);

// The same points of interest now on the canvas plane
// As each rectangle has a different transformation,
// to map to the canvas plane we need to multiply by
// each of the transformation matrices.
const rect_1Center = centerPoint.transform(rect_1.calcTransformMatrix()),
  rect_1CornerPoint = cornerPoint.transform(rect_1.calcTransformMatrix());

const rect_2Center = centerPoint.transform(rect_2.calcTransformMatrix()),
  rect_2CornerPoint = cornerPoint.transform(rect_2.calcTransformMatrix());  

// Then we create the lines using the points on the canvas plane
const line_1 = new fabric.Line(
  [
    rect_1Center.x, // line origin.x
    rect_1Center.y, // line origin.y
    rect_1CornerPoint.x, // line destination.x
    rect_1CornerPoint.y // line destination.y
  ], 
  { stroke: 'blue', strokeWidth: 1, originX: 'center', originY: 'center'}
);

const line_2 = new fabric.Line(
  [
    rect_2Center.x, 
    rect_2Center.y, 
    rect_2CornerPoint.x, 
    rect_2CornerPoint.y
  ], 
  { stroke: 'blue', strokeWidth: 1, originX: 'center', originY: 'center'}
);

canvas.add(line_1, line_2);

We also work with different planes when an object is inside a group. Each group represents a new plane and the transformation existing in the group is applied to all objects (or other groups) contained within it.

For example, let’s add two rectangles to a group and apply a scaleY equal to 2 to the group.

const rect_1 = new fabric.Rect({
  width: 50, 
  height: 50, 
  fill: 'red', 
  left: 10, 
  top: 10,
  scaleX: 3
});

const rect_2 = new fabric.Rect({
  width: 50, 
  height: 50, 
  fill: 'red', 
  left: 10, 
  top: 100,
  angle: 30
});

const group = new fabric.Group(
  [rect_1, rect_2],
  {
    left: 30,
    top: 100,
    scaleY: 2
  }
)

canvas.add(group);

Each of the rectangles and the group will have their respective transformation matrices ( calcOwnMatrix ), which not consider any external transformation (from another plane):

console.log(rect_1.calcOwnMatrix()); 
// [3, 0, 0, 1, 12.75, -54.333647796503186]
console.log(rect_2.calcOwnMatrix()); 
// [0.8660254037844387, 0.49999999999999994, -0.49999999999999994, 0.8660254037844387, -54.416352203496814, 45]
console.log(group.calcOwnMatrix()); 
// [1, 0, 0, 2, 119.25, 259.6672955930064]

To find the total existing transformation in each of the rectangles, we must multiply all the transformation matrices that affect them. That is, we must multiply the transformation matrix of the group and that of the rectangle itself:

console.log(fabric.util.multiplyTransformMatrices(
  group.calcOwnMatrix(), 
  rect_1.calcOwnMatrix()
));
// [3, 0, 0, 2, 132, 151]

console.log(fabric.util.multiplyTransformMatrices(
  group.calcOwnMatrix(), 
  rect_2.calcOwnMatrix()
));
// [0.8660254037844387, 0.9999999999999999, -0.49999999999999994, 1.7320508075688774, 64.83364779650319, 349.6672955930064]

A point of attention when multiplying the transformation matrices is in the order of multiplication. The first transformation must be rightmost, so the last argument is the rectangle transformation matrix since it is the first transformation. This process of multiplying transformation matrices would get tedious if we had a lot of nested groups. Fabric.js has a method that calculate this for us:

console.log(rect_1.calcTransformMatrix());
// [3, 0, 0, 2, 132, 151]

console.log(rect_2.calcTransformMatrix());
// [0.8660254037844387, 0.9999999999999999, -0.49999999999999994, 1.7320508075688774, 64.83364779650319, 349.6672955930064]

Altough fabric.js provides us with many out-of-the-box resources, knowing how to work with transformation matrices allows us to develop interesting things.

Below are some video references on the subject that present the topic in a very visual way:

Matrices and Transformations — Math for Gamedev

Linear transformation and matrices

Matrix multiplication as compostion

Display angle while rotating an object in fabric.js (introducing vectors)

Luiz Eduardo Zappa — Sun, 11 Dec 2022 23:55:03 GMT

In this article we’ll enrich what we have developed in the last article (where we modified the cursor and the rotation icon). The purpose is to display the angle of the object as it’s rotated. For this, I will briefly present a review of vectors, which greatly facilitate development in fabric.js. Based on what we’ll learn in theory, we’ll develope this feature. In the end we will have:

Display angle while rotating

How to represent a point?

First of all we must understand how to represent a point in 2D space and what a Cartesian system is. I like the battleship analogy. How do we refer to the position of a ship?

Cartesian plane

We have two axes (I’ll call the horizontal as X an the vertical as Y) and we identify the ship’s position based on them. For example, there is part of a ship at point (2,4), the red dot. We can interpret this representation as starting from origin point (0,0), we move 2 squares in the direction of the X axis and 4 squares in the direction of the Y axis.

The Cartesian system is represented by two perpendicular lines (coordinate axis) and the point where they meet is the origin, point (0, 0).

What is a vector?

Simplistically, we can say that the vector is an arrow that starts from an origin (the tail) to a destinatin (the head). Using this definition, we can represent the position of the ship based on a vector:

Vector representation

The coordinates of a vector is a pair of numbers that “give instructions” for how to get from the origin of the vector to its head. The first number (2) represents how far to walk along the X-axis, and the second number (4) represents how far to walk along the Y-axis.

The convention for distinguishing vectors from points is to represent vectors vertically with square brackets and points horizontally with parentheses:

Point and vector representations

We represent the vectors with letters with an arrow on top:

The size of a vector

An important property of vectors is their size. Still in the previous example, how we calculate the distance from the origin of the Cartesian plane to the red point. The answer to this question is the size of the orange vector.

To calculate the distance, d, just apply the Pythagorean formula:

Substituting the values we have:

So:

The size of the vector

The size of the vector is also called the magnitude.

Operations with vectors: addition and subtraction

Let’s look at the basic operations with vectors. If we want to leave the red point and go to the green one, how would we represent this displacement with vectors?

An important feature of vectors is that they can be shifted to any part of our Cartesian plane. To represent this displacement (from red dot to the green one), we will consider the red point as our origin, and move four squares backwards on the X axis and one square upwards on the Y axis. That is, the representation of our vector would be:

And how would we represent the vector starting from the origin of the Cartesian system, point (0, 0), to our final point (the green one)? We would just move two squares backwards along the X axis and five squares up along the Y axis. The representation would be the yellow vector:

We have just visualized how to operate on a vector addition. The yellow vector is the sum of the orange and purple vectors:

We can generalize vector addition as:

Sum of vectors

Let’s see how this operation is in fabric.js:

const orangeVector = new fabric.Point(2, 4),
  origin = new fabric.Point(2, 4),
  destination = new fabric.Point(-2, 5),
  purpleVector = fabric.util.createVector(origin, destination);

console.log(purpleVector);
// Point {x: -4, y: 1 }

// Addition
const yellowVector = orangeVector.add(purpleVector);

console.log(yellowVector);
// Point {x: -2, y: 5 }

The createVector function takes the tail (origin) and head (destination) of the vector as arguments. Note that for the orange vector this function was not used, because as the origin is the point(0, 0), the vector will be numerically equal to the destination point (head). So, for simplicity we already assign directly to the point value instead of doing fabric.util.createVector(new fabric.Point(0, 0), new fabric.Point(2, 4)) which result in the same value.

The cool thing about this operation is that we can locate our end point (the green one), just by making relative moviments between vectors (the purple vector has the red point as its origin. This vector does not know the origin of our Cartesian plane). We could perform various “relative moves” with vectors and still find our final position relative to the origin of the Cartesian plane:

Knowing the addition operation, the subtraction is straightforward. For example, if we wanted to subtract the purple vector [-4 1]from the orange one, it would be enough to add the inverse of the purple vector [4 -1]:

Now let’s look at the subtraction operation in fabric.js:

const orangeVector = new fabric.Point(2, 4),
  origin = new fabric.Point(2, 4),
  destination = new fabric.Point(-2, 5),
  purpleVector = fabric.util.createVector(origin, destination);

console.log(purpleVector);
// Point {x: -4, y: 1 }

// Subtraction
const yellowVector = orangeVector.subtract(purpleVector);

console.log(yellowVector);
// Point {x: 6, y: 3 }

Operations with vectors: multiplication and division

Multiplication and division operations are best understood by looking at the Cartesian plane. What would happen if we multiplied the vector v by two?

We will have a vector that will be twice the size of the original vector:

The logic for the division is the same. If we divided the vector by two, we would have a new vector that is half of the original vector:

That is, we can generalize these operations as:

Scaling a vector

These operations are commonly known as scaling.

Let’s look at the two operations in fabric.js:

const orangeVector = new fabric.Point(2, 4);

/* Multiplication */
const twoTimesOrange = orangeVector.scalarMultiply(2);
console.log(twoTimesOrange);
// Point {x: 4, y: 8}

/* Division */
const halfOrange = orangeVector.scalarDivide(2);
console.log(halfOrange);
// Point {x: 1, y: 2 }

Attention, in fabric.js there is another multiplication and division methods called multiply and divide. These types of multiplication and division are different, it’s a Hadamard product, that is, the element X will be multiplied (or divided) by the corresponding X, and the same goes for the Y. This operation does not have the same result (and interpretation) as what we saw above. Let’s see an example of it:

const v1 = new fabric.Point(2, 4),
  v2 = new fabric.Point (4, 5);

/* Multiplication */
const v1Timesv2 = v1.multiply(v2);
console.log(v1Timesv2);
// Point {x: 8, y: 20}

/* Division */
const v1Dividev2 = v1.divide(v2);
console.log(v1Dividev2);
// Point {x: 0.5, y: 0.8}

Rotating vectors

The orange vector is rotated 63° degrees counterclockwise with respect to the X axis. And if we wanted to rotate it another 30° clockwise, how would we do it?

In fabric.js, counterclockwise rotations have angles with positive values and clockwise rotations have angles with negative values.

Mathematically, to find the rotation we should use the following formula:

If you are interested in the mathematical proof of this formula, checkout this article.

As you can see, the formula is not so friendly. But when we encapsulate it in a function, it becomes mucho more intelligible.

For example, let’s rotate this vector in fabric.js. As you can see from the code, it’s pretty easy to keep track of what’s going on.

const origin = new fabric.Point(0, 0),
  destination = new fabric.Point(2, 4),
  rotationAngle = fabric.util.degreesToRadians(-30);

const initialVector = fabric.util.createVector(origin, destination);
const rotatedVector = initialVector.rotate(rotationAngle);

console.log(rotatedVector);
// Point {x: 3.732050807568877, y: 2.464101615137755}

When working with angles, most functions use radians instead of degrees (which we are more used to). The same goes to fabric.js. Because of this, fabric.js has two help functions that convert between these two units of measurement: fabric.util.degreesToRadians and fabric.util.radiansToDegrees.

Implementing the feature

Okay, enought theory, let’s get to practice and see how to implement this new feature using vectors.

First of all let’s create the angle display and then we’ll use vectors to position it.

Let’s create two more properties on our state object to store the current angle and wheter we’re in the middle of a rotation:

const state = {
  lastAngleRotation: null,
  currentAngle: null,
  isRotating: false,
}

To update these properties, we will extend the listener for when a rotation event is occurring. Also, when mouse up, we indicate that the rotating is over.

canvas.on('object:rotating', function (e) {
  // ...
  state.isRotating = true;
  state.currentAngle = obj.angle;
});

canvas.on('mouse:up', function(opt) {
  state.isRotating = false;
})

We could create the display using fabric.js objects (such as Text and the background with a Rect). However, this way the object’s controls will be in front of our display. Because of this, we will draw directly on the canvas:

canvas.on('after:render', function(opt) {
  state.isRotating && renderRotateLabel(opt.ctx, canvas);
})

Every time we are in the middle of a rotation we will render the display on the canvas. Let’s create the function that draws the display. It receives as an argument the context of the canvas (which has the methods to draw on it) and the reference to the canvas itself.

function renderRotateLabel(ctx, canvas) {
  const angleText = `${state.currentAngle.toFixed(0)}°`,
    borderRadius = 5,
    rectWidth = 32,
    rectHeight = 19,
    textWidth = 6.01 * angleText.length - 2.317;

  const pos = new fabric.Point(20, 20);

  ctx.save();
  ctx.translate(pos.x, pos.y);
  ctx.beginPath();
  ctx.fillStyle = "rgba(37,38,39,0.9)";
  ctx.roundRect(0, 0, rectWidth, rectHeight, borderRadius);
  ctx.fill();
  ctx.font = "400 13px serif"
  ctx.fillStyle = "hsla(0,0%, 100%, 0.9)";
  ctx.fillText(angleText, rectWidth/2 - textWidth/2, rectHeight/2 + 4)
  ctx.restore();
}

Let’s understand this function. First we use a template literal to create the text that will be displayed. We also define the dimensions of the rectangle that will be the background of our display, the radius of its border and finally the size of the text that will be rendered.

In the pos constant we define the position that will be rendered.

The ctx.save() function stores the drawing settings on the canvas so we can restore them later.

The ctx.translate function moves the position to the one defined in the pos constant.

Then we start our drawing with ctx.beginPath(), define the color of the fill property and draw a rectangle with rounded edges at position (0, 0) which is the position defined in pos, since we translated to this position.

The ctx.fill() paints the rectangle.

Then we define the properties of the text that will be rendered. The text position is centered on the rectangle with rectWidth/2 — textWidth/2 and rectHeight/2 + 4.

Finally, we restore the previous properties with ctx.restore().

We get the following:

https://medium.com/media/1f03589f5b3afc5954b156ef1f9f6d8b/href

Now let’s position this display according to the mouse position. I want it to be 40 pixels away from the mouse cursor at a 30 degrees clockwise angle.

We need to store the cursor position, for that we will create a new property in the state object. And inside rotation listener, we’ll update this property:

const state = {
  // ...
  cursorPos: new fabric.Point() 
}

canvas.on('object:rotating', function (e) {
  // ...
  state.cursorPos.x = e.pointer.x;
  state.cursorPos.y = e.pointer.y;
});

Let’s create a function just to render the placement. Then we apply the same logic to our display.

function renderVector(ctx, canvas) {
  const pos = state.cursorPos.add(
      new fabric.Point(40, 0)
    );
  ctx.save();
  ctx.beginPath();
  ctx.moveTo(state.cursorPos.x, state.cursorPos.y);
  ctx.strokeStyle = "red";
  ctx.lineWidth = 2;
  ctx.lineTo(pos.x, pos.y);
  ctx.stroke();
  ctx.restore();
}

Let’s understand what’s going on. The canvas has the top left origin, so we can represent our cartesian plan as:

Starting from the origin of our canvas, the vector stored in the state.cursorPos property points to the mouse cursor. Then we add a vector that shifts 40 pixels to the right. This piece of code that does this:

//...
const pos = state.cursorPos.add(
      new fabric.Point(40, 0)
    );
//..

Let’s render this function we defined:

canvas.on("after:render", function (opt) {
  state.isRotating && renderRotateLabel(opt.ctx, canvas);
  state.isRotating && renderVector(opt.ctx, canvas);
});

The result will be this:

Now we need to rotate it 30 degrees clockwise. For this we do:

// ...
  const pos = state.cursorPos.add(
    new fabric.Point(40, 0)
    .rotate(fabric.util.degreesToRadians(30))
  );
// ...

The result will be this:

Let’s now use this placement for our display. For this, in the renderRotateLabel function we change the constant pos by:

// ...
  const pos = state.cursorPos.add(
      new fabric.Point(40, 0)
        .rotate(fabric.util.degreesToRadians(30))
    );
// ...

Okay, now our display is in the desired position:

https://medium.com/media/a5bf254e2f966c1419930b8b439bbef6/href

But it’s still not cool. When the mouse leaves the canvas, the display also disappears. Let’s make it always visible on the screen even when the mouse leaves. For that, inside the renderRotateLabel function we change the ctx.translate to be limited to the viewport.

const { tl, br } = canvas.vptCoords;

// ...
  ctx.translate(
    Math.min(
      Math.max(pos.x, tl.x),
      br.x - rectWidth
    ),
    Math.min(
      Math.max(pos.y, tl.y),
      br.y - rectHeight
    )
  );
// ...

Done, now the display does not leave the viewport:

https://medium.com/media/8a7893417e2f6a71050a27ff9c3c7f97/href

Custom icon and cursor in fabric.js controls

Luiz Eduardo Zappa — Fri, 09 Dec 2022 21:47:13 GMT

What’s cool about the fabric.js is the possibility of customization. In this article we’ll change both the icon that rotates the object and the mouse cursor when hovering over it that will change according to the angle of rotation.

The end result will be this:

Initializing the canvas

First, let’s initialize the canvas and add an object in the center of it:

https://medium.com/media/96483a2bedf2d13f8cbbb73478d5eb5f/href

Customizing the rotation icon

Now let’s change the object’s rotate icon to this one:

New rotate icon

We could reference the icon directy from a path. But for simplicity, let’s leave it hardcoded in the rotateIcon variable. After that, we create a new image DOM element and assign out image data to the source property.

const svgRotateIcon = encodeURIComponent(`

  
    
    
  
    
    
    
  
  
    
    
    
    
    
    
    
  
  

`)
const rotateIcon = `data:image/svg+xml;utf8,${svgRotateIcon}`
const imgIcon = document.createElement('img');
imgIcon.src = rotateIcon;

Now let’s customize the rotation icon. For that we access the prototype of the object controls. The control we are instered in is the mtr :

// Changing rotation control properties
fabric.Object.prototype.controls.mtr = new fabric.Control({
  x: 0,
  y: -0.5,
  offsetX: 0,
  offsetY: -40,
  cursorStyle: 'crosshair',
  actionHandler: fabric.controlsUtils.rotationWithSnapping,
  actionName: 'rotate',
  render: renderIcon,
  cornerSize: 38,
  withConnection: true
});

// Defining how the rendering action will be
function renderIcon(ctx, left, top, styleOverride, fabricObject) {
  var size = this.cornerSize;
  ctx.save();
  ctx.translate(left, top);
  ctx.rotate(fabric.util.degreesToRadians(fabricObject.angle));
  ctx.drawImage(imgIcon, -size / 2, -size / 2, size, size);
  ctx.restore();
};

Let’s understand each of these properties:

x and y: define the positiong of this control in relation to the center of the object, with the “unit of measurement” being the width and height respectively. That is, if I set x = 0.5, the object will be half a width to the right (from the center). If I set y = -0.5, the object will be half height up (remember that the canvas coordinates are top left).

offsetX and offsetY : how much offset (in screen pixels) we want in the direction of the X and Y axis respectively, starting from the x and y position defined in the previous property.

To illustrate, some examples of positioning:

Control placement

cursorStyle: defines what the cursor will look like when hovering this control (we’ll modify this later).

actionHandler: what is the behavior of this control. We’ll use fabric.js default rotation behavior.

actionName: the name of the action that the control will execute. You can use this name to listen somewhere else in the code this action.

render: function that will be called to render the icon. We are defining this function just below.

cornerSize: icon size.

withConnection: a boolean that indicates wheter we want a line connecting to the bouding box.

Still in the code above, we define how the rendering will be. We directly access the canvas context and draw the desired image.

Ready, we customize the rotation icon:

https://medium.com/media/3ccbe5c38bed653512906e612bb624ef/href

Customizing the cursor while rotating

Now we want to change the cursor to indicate that we are doing a rotation. For this we’ll use an SVG, because we’ll need to transform the SVG on the fly.

const imgCursor = encodeURIComponent(`
  
    
      
        
        
        
        
          
          
        
      
      
    
    
      
        
        
      
    
  `);

Inside fabric.Object.prototype.controls.mtr, we change the cursorStyle property to:

 cursorStyle: `url("data:image/svg+xml;charset=utf-8,${imgCursor}") 12 12, crosshair`,

This code is pointing to the URL of our cursor (a data-image), the point of the origin, and a fallback ( crosshair).

We customize our cursor. But it’s still not cool, notice that when we rotate the object, the cursor doesn’t rotate with it. We’ll adjust that later.

https://medium.com/media/bce487a349448194e0109523a1cb2565/href

For the dynamic behavior we’ll use a tagged template that will generate an SVG rotated according to the provided angle. For performance reasons, we’ll rotate the SVG every 15 degrees. The treatAngle function that will do this normalization.

// Tagged template
function mouseRotateIcon(angle) {
  const relativeAngle = angle - 90;
  const pos = {
    '-90': '9.25 5.25',
    '-75': '9.972 3.863',
    '-60': '10.84 1.756',
    '-45': '11.972 -1.716',
    '-30': '18.83 0.17',
    '-15': '28.49 -9.49',
    15: '-7.985 46.77',
    30: '-0.415 27.57',
    45: '2.32 21.713',
    60: '3.916 18.243',
    75: '4.762 16.135',
    90: '5.25 14.75',
    105: '5.84 13.617',
    120: '6.084 12.666',
    135: '6.317 12.01',
    150: '6.754 11.325',
    165: '7.06 10.653',
    180: '7.25 10',
    195: '7.597 9.43',
    210: '7.825 8.672',
    225: '7.974 7.99',
    240: '8.383 7.332',
    255: '8.83 6.441',
  }, 
    defaultPos = '7.25 10';
  const transform = relativeAngle === 0
   ? 'translate(9.5 3.5)'
   : `rotate(${relativeAngle} ${pos[relativeAngle] || defaultPos})`
  const imgCursor = encodeURIComponent(`
  
    
      
        
        
        
        
          
          
        
      
      
    
    
      
        
        
      
    
  `)
  return `url("data:image/svg+xml;charset=utf-8,${imgCursor}") 12 12, crosshair`
}

function treatAngle(angle) {
  return angle - angle % 15
}

Inside fabric.Object.prototype.controls.mtr, we delete the cursorStyle property and create the cursorStyleHandler property which expects a function that will define how our cursor will be.

// Inside fabric.Object.prototype.controls.mtr
//...
cursorStyleHandler: rotationStyleHandler,
//...

// Define how the cursor will be
function rotationStyleHandler(eventData, control, fabricObject) {
  if (fabricObject.lockRotation) {
      return NOT_ALLOWED_CURSOR;
  }
  const angle = treatAngle(fabricObject.angle);
  return mouseRotateIcon(angle)
}

Now we have a function that dynamically changes the cursor’s rotation. But this is still not enought, as this function is not invoked when we are rotating. Because of this we need to listend to the object’s rotating event to change our cursor. This code does this:

canvas.on('object:rotating', function (e) {
  const angle = treatAngle(e.target.angle);
  canvas.setCursor(mouseRotateIcon(angle));
});

Now our cursor rotates together with the object:

But we can still improve the performance of our code. We are invoking the mouseRotationIcon function unnecessarily every rotation. In fact, we only need to call this function when the angle changes in the range of 15. That is, we only need to call this funtion when the angle equals to 0, 15, 30, 45 and so on..

Let’s create a state to store the last rotation angle.

const state = {
  'lastAngleRotation': null
}

Now we’ll store the angle in this state, and we’ll only invoke the function when there is a change in the angle.

function rotationStyleHandler(eventData, control, fabricObject) {
  if (fabricObject.lockRotation) {
      return NOT_ALLOWED_CURSOR;
  }
  const angle = treatAngle(fabricObject.angle);
  state.lastAngleRotation = angle;
  return mouseRotateIcon(angle)
}

canvas.on('object:rotating', function (e) {
  const angle = treatAngle(e.target.angle);
  if (state.lastAngleRotation !== angle) {
    canvas.setCursor(mouseRotateIcon(angle));
    state.lastAngleRotation = angle;
  };
});

This is our final code:

https://medium.com/media/68bdc57ee633a9765161c208ff26c2a0/href

I plan to write more articles about fabric.js. The next one I have in mind is to enhance the current feature by indicating the object’s rotation angle while explaining some vector concepts that are important to work with canvas. UPDATE: click here to go to the article.

I’d love suggestions for article topics about fabric.js in the comments!

Nuxt 2 | How to retain Scroll Position when returning to page without Navigation History

Luiz Eduardo Zappa — Fri, 31 Dec 2021 18:10:47 GMT

The Nuxt framework already provides a feature to preserve the scroll position when returning to a page if the user clicks the browser’s back button (or we use $router.go(n) which triggers the same event: popstate navigation).

I was facing a situation that needed to return to a page with $router.replace instead of $router.go(-1) (I explain the reason for this need below). This requirement gave me a problem: $router.replace doesn’t trigger the popstate event, so keeping scroll position does not work, and the page always loads at to the top.

In this article I will detail this solution. What motivated me to write this article is that I didn’t find it on google, I hope it helps someone.

The Problem

Let me detail the problem. I have a page with lots of cards and a Sign In button so the user can access the details of those cards. Suppose you are browsing and want to login. After logging in you would like to return the same position you were in. But look at the default behavior of Nuxt:

After login, the user is redirected to the previous page at the top

After authenticating, the user returns to the previous page, but no longer in the position he was in. This behavior disrupts the user experience.

As I said at the beginning of this article, this problem happens because in my login.vue, I use $router.replace instead of $router.go(-1) to return the source page after login. You might be wondering, why don’t you use $router.go(-1) and solve your problem? Using $router.replace is necessary so that the user cannot return to the login screen with the browser’s back button. $router.go(-1) allows this.

The Solution

We will create a router middleware to store the scroll position of the pages that have the scrollPos meta property (we will create this too). And then change Nuxt’s scrollBehavior to when the scrollPos object exists in the route’s meta property, load the page at the position stored in the object.

1) Add meta in Nuxt Router

On the page where we want to preserve the scroll position, we must create the meta property with the following object:

(in my case, it’s the page that has the different cards, which I called search.vue)

//search.vue

export default {
 //...
 meta: {
  scrollPos: {
    x: 0,
    y: 0
  }
 }
}

The logic will be as follows, every page that has this scrollPos meta property, we will store the scroll position in this object.

2) Creating the Router Middleware

We will create a router middleware to check if route has the scollPos meta property, if so, the scroll position will be store on this object when leaving the page.

In your Nuxt project, create a folder named middleware and inside the file adjustScroll.js:

Middleware Folder

Paste this code inside adjustScroll.js:

export default function({ from }) { 
  const scrollPos = from?.meta[0].scrollPos
  if (scrollPos && Object.keys(scrollPos).length > 0) {
    scrollPos.y = window.scrollY || 0
    scrollPos.x = window.scrollX || 0
  }
}

Let’s understand… This function will be executed every time we navigate between pages. It checks if the scrollPos object exists within the Meta property’s array. If so, it stores the scroll position.

Include this middleware in your Nuxt settings (nuxt.config.js):

//nuxt.config.js

export default {
  //...
  router: {
    middleware: ['adjustScroll']
  },
}

Okay, we store the scroll position, now how do we scroll when we return to the page? Let’s see in the next topic.

3) Custom scrollBehavior after page loaded

Nuxt allows us to customize the scrolling behavior after page loaded. That’s what we’re going to do here, when there’s the scrollPos object in the meta property, we’re going to scroll the page to the values stored in that object.

In your Nuxt project, create a folder named app and inside the file router.scrollBehavior.js :

App Folder

This file allows us to change the default scrolling behavior of Nuxt. As it doesn’t allow us to extend, the documentation recommendation is to change the default Nuxt code found here.

I made some additions to this code to adapt to our need and changed the position of the declaration of the nuxt variable. Copy and paste the code below into the file (router.scrollBehavior.js):

Your linter will complain about some of Nuxt’s own internal template syntax, you can ignore that.

//router.scrollBehavior.js

<% if (router.scrollBehavior) { %>
<%= isTest ? '/* eslint-disable quotes, semi, indent, comma-spacing, key-spacing, object-curly-spacing, space-before-function-paren  */' : '' %>
export default <%= serializeFunction(router.scrollBehavior) %>
<%= isTest ? '/* eslint-enable quotes, semi, indent, comma-spacing, key-spacing, object-curly-spacing, space-before-function-paren  */' : '' %>
<% } else { %>import { getMatchedComponents, setScrollRestoration } from './utils'

if (process.client) {
  if ('scrollRestoration' in window.history) {
    setScrollRestoration('manual')

// reset scrollRestoration to auto when leaving page, allowing page reload
    // and back-navigation from other pages to use the browser to restore the
    // scrolling position.
    window.addEventListener('beforeunload', () => {
      setScrollRestoration('auto')
    })

// Setting scrollRestoration to manual again when returning to this page.
    window.addEventListener('load', () => {
      setScrollRestoration('manual')
    })
  }
}

function shouldScrollToTop(route) {
   const Pages = getMatchedComponents(route)
   if (Pages.length === 1) {
     const { options = {} } = Pages[0]
     return options.scrollToTop !== false
   }
   return Pages.some(({ options }) => options && options.scrollToTop)
}

export default function (to, from, savedPosition) {
  // If the returned position is falsy or an empty object, will retain current scroll position
  let position = false
  const isRouteChanged = to !== from

const nuxt = window.<%= globals.nuxt %>

// savedPosition is only available for popstate navigations (back button)
  const metaScrollPos = nuxt.context.route.meta[0]?.scrollPos 
  if (savedPosition || metaScrollPos) {
    position = savedPosition || metaScrollPos
  } else if (isRouteChanged && shouldScrollToTop(to)) {
    position = { x: 0, y: 0 }
  }

if (
    // Initial load (vuejs/vue-router#3199)
    !isRouteChanged ||
    // Route hash changes
    (to.path === from.path && to.hash !== from.hash)
  ) {
    nuxt.$nextTick(() => nuxt.$emit('triggerScroll'))
  }

return new Promise((resolve) => {
    // wait for the out transition to complete (if necessary)
    nuxt.$once('triggerScroll', () => {
      // coords will be used if no selector is provided,
      // or if the selector didn't match any element.
      if (to.hash) {
        let hash = to.hash
        // CSS.escape() is not supported with IE and Edge.
        if (typeof window.CSS !== 'undefined' && typeof window.CSS.escape !== 'undefined') {
          hash = '#' + window.CSS.escape(hash.substr(1))
        }
        try {
          const el = document.querySelector(hash)
          if (el) {
            // scroll to anchor by returning the selector
            position = { selector: hash }
            // Respect any scroll-margin-top set in CSS when scrolling to anchor
            const y = Number(getComputedStyle(el)['scroll-margin-top']?.replace('px', ''))
            if (y) {
              position.offset = { y }
            }
          }
        } catch (e) {
          <%= isTest ? '// eslint-disable-next-line no-console' : '' %>
          console.warn('Failed to save scroll position. Please add CSS.escape() polyfill (https://github.com/mathiasbynens/CSS.escape).')
        }
      }
      resolve(position)
    })
  })
}
<% } %>

Below I highlight only the part I changed from the default template. Let’s understand.

First I changed the position of the nuxt variable declaration (in the default template it occurs below this conditional). This variable stores the Nuxt context and as we need to access it in the conditional below, I changed the position of the declaration.

The second change is in the conditional. We check if there is a scrollPos object inside the route’s meta property. If so, we pass the stored values to the position variable (which determines the scrolling).

//..

const nuxt = window.<%= globals.nuxt %>

// savedPosition is only available for popstate navigations (back button)
  const metaScrollPos = nuxt.context.route.meta[0]?.scrollPos 
  if (savedPosition || metaScrollPos) {
    position = savedPosition || metaScrollPos
  } else if (isRouteChanged && shouldScrollToTop(to)) {
    position = { x: 0, y: 0 }
  }

//...

Our solution is complete. Every page that has the scrollPos object in the meta property will store the scroll position for when we return. If at some point you want this page to load at to the top, just programmatically change the scrollPos object to { x: 0, y: 0}

Finally, our middleware running

Preserve scroll position when navigate between pages without navigation history

Now the user after logging in returns to the scroll position he was initially :)

Nuxt 2 | How to retain Scroll Position when returning to page without Navigation History was originally published in Level Up Coding on Medium, where people are continuing the conversation by highlighting and responding to this story.

Install Oracle Database 12c on Red Hat AWS EC2 Instance — Part 4: Install Database and Create…

Luiz Eduardo Zappa — Sun, 05 Sep 2021 23:49:20 GMT

Install Oracle Database 12c on Red Hat AWS EC2 Instance — Part 4: Install Database and Create Instance

This is a series of articles I’ve been describing from scratch how to provision an instance on AWS EC2 with Red Hat (RHEL 7), install the Oracle Database 12c just from the command line, and finally connect through SQL Developer from a remote computer.

So to the article doesn’t get too long, I divided it into parts. I recommended reading from the beginning, as the subjects are linked and an initial configuration can impact the final result you are here:

Part 1: Launch AWS EC2 Instance with RHEL 7 and connect with SSH (Windows using Putty)

Part 2: Setup Red Hat to receive the Oracle Database installation

Part 3: Download Oracle 12c and transfer to AWS EC2 instance with Secure Copy Client (SCP)

Part 4 (This article): Install Oracle Database and Create Instance

Install Oracle Database on Red Hat AWS EC2 Instance

In this article we will install the oracle database. You must be in the oracle user. If not, switch to this user with this command:

su - oracle

Navigate to ~/database/response

cd ~/database/response

Let’s create a backup copy of the file db_install.rsp

cp db_install.rsp db_install.rsp.bak

Edit the db_install.rsp with vi editor

vi db_install.rsp

Change the following file variables:

oracle.install.option=INSTALL_DB_SWONLY
ORACLE_HOSTNAME=
UNIX_GROUP_NAME=oinstall
INVENTORY_LOCATION=/u01/app/oraInventory
ORACLE_HOME=/u01/app/oracle/product/12.1.0.2/db_1
ORACLE_BASE=/u01/app/oracle
oracle.install.db.InstallEdition=EE
oracle.install.db.DBA_GROUP=dba
oracle.install.db.OPER_GROUP=oper
oracle.install.db.BACKUPDBA_GROUP=backupdba
oracle.install.db.DGDBA_GROUP=dgdba
oracle.install.db.KMDBA_GROUP=kmdba
SECURITY_UPDATES_VIA_MYORACLESUPPORT=false
DECLINE_SECURITY_UPDATES=true

Change by hostname defined in the first article.

Save and close the file with :wq

Navigate to folder ~/database

cd ~/database

Then, start a new screen session with screen

This will open a screen session, create a new window, and start a shell in that window. If the connection is lost during the installation, you can reconnect and resume your screen session using the following commands:

First, find the session ID of the screen with:

su - oracle
screen -ls

The highlighted number is your session id

Then restore screen with:

screen -r 4065

Returning to the installation.. Execute the installer with this command:

./runInstaller -silent -responseFile ~/database/response/db_install.rsp -ignorePrereq -ignoreSysPrereqs -waitforcompletion -showProgress

A warning message should appear indicating that the Oracle home directory is not empty. It does not affect the installation. Wait for installation.

[INS-32016] The selected Oracle home contains directories or files.

Sometimes the installation has memory errors because we are using AWS Free Tier and we have only 1GB of memory. The message is usually this:

Error in invoking target 'irman ioracle' of makefile
    '/u01/app/oracle/product/12.1.0/dbhome_1/rdbms/lib/ins_rdbms.mk'.
See '/u01/app/oraInventory/logs/installActions2015(...).log' for details.

Inside the log file, the error is encountered:

INFO: collect2: ld terminated with signal 9 [Killed]

To solve this relink irman and ioracle with these commands:

cd $ORACLE_HOME/rdbms/admin
/usr/bin/make -f $ORACLE_HOME/rdbms/lib/ins_rdbms.mk ioracle
/usr/bin/make -f $ORACLE_HOME/rdbms/lib/ins_rdbms.mk irman

After installation, we need to run two scripts indicated at installation. Switch to ec2-user with logout . If you are using screen, first you need to exit screen with exit and then type logout

Run the first script:

sudo /u01/app/oraInventory/orainstRoot.sh

Run the second script:

sudo /u01/app/oracle/product/12.1.0.2/db_1/root.sh

Let’s remove the zip files to gains some space. Enter the following commands:

cd /tmp
sudo rm -rf V46095-01_1of2.zip
sudo rm -rf V46095-01_2of2.zip

Let’s test the connection. Switch back to oracle user:

su - oracle

Run the following command:

sqlplus / as sysdba

You should receive this message:

Exit sqlplus with quit

Create a database directory and flash recovery directory. Here you should initialize a new screen session (with screen) to allow you to reconnect if connection is lost during installation.

mkdir -p /u01/app/oracle/ordata_oracle12c
mkdir -p /u01/app/oracle/flash_recovery_area

Create instance:

dbca -silent -createDatabase -templateName General_Purpose.dbc -gdbname orcl -sid orcl -responseFile NO_VALUE -characterSet AL32UTF8 -sysPassword oracle -systemPassword oracle -createAsContainerDatabase true -numberOfPDBs 1 -pdbName pdborcl -pdbAdminPassword oracle -databasetype MULTIPURPOSE -automaticMemoryManagement false -totalMemory 800 -storageType FS -datafileDestination "/u01/app/oracle/ordata_oracle12c" -recoveryAreaDestination "/u01/app/oracle/flash_recovery_area" -redoLogFileSize 50 -emConfiguration NONE -listeners LISTENER -ignorePreReqs

Change the parameters in bold if you have created a SID other than the one indicated

After installation, edit the /etc/oratab file to indicate the database should be started when the system is booted. Switch to ec2-user with logout . If you are using screen, first you need to exit screen with exit and then type logout

Edit the file with:

sudo vi /etc/oratab

Paste this (remember to press i to enter vi Insert Mode), then save and close file (press ESC to exit vi Insert Mode, and type :wq)

orcl:/u01/app/oracle/product/12.1.0.2/db_1:Y

Switch back to oracle user with:

su - oracle

Let’s configure LISTENER and TNSNAMES.

netca -silent -responseFile /u01/app/oracle/product/12.1.0.2/db_1/assistants/netca/netca.rsp

Open listener.ora file:

vi $ORACLE_HOME/network/admin/listener.ora

Change the contents of the file for this:

LISTENER =
  (DESCRIPTION_LIST =
    (DESCRIPTION =
      (ADDRESS = (PROTOCOL = TCP)(HOST = redhatsrv)(PORT = 1521))
      (ADDRESS = (PROTOCOL = IPC)(KEY = EXTPROC1521))
    )
  )

SID_LIST_LISTENER =
  (SID_LIST =
    (SID_DESC =
      (GLOBAL_NAME = orcl)
      (SID_NAME = orcl)
      (ORACLE_HOME = /u01/app/oracle/product/12.1.0.2/db_1)
     )
  )

DEFAULT_SERVICE_LISTENER = orcl

Change the texts in bold if you used another hostname or SID name.

Save and close the file.

Reload the listener with:

lsnrctl reload

Open tnsnames.ora file:

vi $ORACLE_HOME/network/admin/tnsnames.ora

Change the contents of the file for this:

ORCL =
  (DESCRIPTION =
    (ADDRESS_LIST =
      (ADDRESS = (PROTOCOL = TCP)(HOST = oracle12c)(PORT = 1521))
    )
  )
  (CONNECT_DATA =
    (SERVER = DEDICATED)
    (SERVICE_NAME = orcl)
  )

Change the texts in bold if you used another hostname or SID name.

Save and close the file.

Reload the listener with:

lsnrctl reload

Let’s save the state from pluggable database. Connect as sysdba:

sqlplus / as sysdba

Enter the follow command:

alter pluggable database pdborcl save state;
exit;

Our instance database is on, let’s connect to it through SQL Developer on our computer. First, install SQL Developer (download link).

Open SQL Developer, then click View > SSH. A window will appear in the left corner of your screen. Righ click on SSH Hosts, and choose New SSH Host..

Create new SSH Host on SQL Developer

Enter a name to this Host, in Host enter the Public IPv4 DNS (as described in first article), Port is 22 , Username is ec2-user , click to use key file and select the pem file downloaded when we created the EC2 instance. Click to Add a Local Port Forward, and click OK.

New SSH Host Configurations

Create a New Database Connection

New Database Connection on SQL Developer

Enter the desired name, Username is sys, Password is oracle (the password when oracle instance database was created), Role is SYSDBA, connection type is SSH, an choose the SSH Host created in the last step. SID is orcl (if you are using the same nomenclature as mine). Click Save and close the window.

SQL Developer — Connection Database configurations

It will be necessary to restart SQL Developer. After that, right click on the created database connection and choose Connect

To test the connection, in SQL Woksheet run this query:

select * from v$instance;

The ouput should be like this:

Some people have problem with SSH tunneling on SQL Developer. If you are one of them, you can perform this tunneling directly through the Windows Prompt. Open the command and enter:

ssh -i C:\path\your-key-pair.pem -N -L 8250:aws-ec2-public-IPv4-DNS:1521 ec2-user@aws-ec2-public-IPv4-DNS

Change C:\path\your-key-pair.pem to the path to the key pair file downloaded from AWS and the two entries aws-ec2-public-IPv4-DNS to your AWS EC2 public IPv4 DNS.

After you issue this command, the terminal remains open and does not return a response. Return to SQL Developer and create a new connection with the same parameters indicates a few steps back. But in connection type, use the Basic one, with hostname being localhost and port 8250.

Now the connection to the database should work.

Alright! We were able to install oracle database on an AWS EC2 instance and connect externally through SQL Developer!

Install Oracle Database 12c on Red Hat AWS EC2 Instance — Part 3: Download Oracle 12c and transfer…

Luiz Eduardo Zappa — Sun, 05 Sep 2021 02:58:02 GMT

Install Oracle Database 12c on Red Hat AWS EC2 Instance — Part 3: Download Oracle 12c and transfer to AWS EC2 instance with SCP

Part 1: Launch AWS EC2 Instance with RHEL 7 and connect with SSH (Windows using Putty)

Part 2: Setup Red Hat to receive the Oracle Database installation

Part 3 (This article): Download Oracle 12c and transfer to AWS EC2 instance with Secure Copy Client (SCP)

Part 4: Install Oracle Database and Create Instance

Transfer files to AWS EC2 instance with Secure Copy

First of all, we need to download the Oracle 12c. Navigate to the Oracle Software Delivery Cloud Website and register a new account (if you don’t have one). After log on, search for Oracle Database 12c on the input:

Download Oracle Database 12c from Oracle Software Delivery Cloud Website

In the results, choose Oracle Database 12c. 12.1.0.2.0, then click on Continue at the top right of the website.

On platform, choose Linux X86–64 and then click on Continue.

Oracle Database Platform

Accept the Oracle License Agreement, then download the two parts of Oracle Database 12.1.0.2.0 for Linux x86–64:

Download Oracle Database 12c for Linux

Now we need to transfer these files to our Linux instance using PuTTY Secure Copy Client (pscp.exe). The PSCP is a command line tool that you can use to transfer files between Windows computers and your Linux instance. Open Windows Command Line (press window key + R , type cmd then press OK)

Open Windows Command Line

To transfer a file, in the Windows Command Line, enter the following commands. Navigate to the folder where your pscp.exe file is stored:

cd C:\path-to-pscp-exe-folder\

To transfer the two downloaded zip files:

pscp -i "C:\path\my-key-pair.ppk" "C:\path\V46095-01_1of2.zip" ec2-user@:/tmp/V46095-01_1of2.zip

pscp -i "C:\path\my-key-pair.ppk" "C:\path\V46095-01_2of2.zip" ec2-user@:/tmp/V46095-01_2of2.zip

The Key Pair (my-key-pair.ppk) and the were explained in the first article.

Wait for the file transfer to complete. If everything goes correctly, you should get a message similar to this:

Message of complete update

For unzip the files, we need to install this package. In the last article we were logged into the oracle user. Let’s to switch to ec2-user, so we can install the package. Juts enter the command logout to accomplish this (use this command only if you are in the oracle account).

Your terminal should look like this (with ec2-user):

Thus, we have the root privilege to install the package. We can run the command:

sudo yum install unzip -y

Switch user back to oracle:

su - oracle

Navigate to home oracle directory

cd ~

Then unzip the files with these commands:

unzip /tmp/V46095-01_1of2.zip
unzip /tmp/V46095-01_2of2.zip

In the next article we will install the Oracle database and create an instance.

Install Oracle Database 12c on Red Hat AWS EC2 Instance — Part 2: Setup Red Hat (RHEL 7)

Luiz Eduardo Zappa — Sat, 04 Sep 2021 23:36:31 GMT

Install Oracle Database 12c on Red Hat AWS EC2 Instance — Part 2: Setup Red Hat (RHEL 7)

Part 1: Launch AWS EC2 Instance with RHEL 7 and connect with SSH (Windows using Putty)

Part 2 (This article): Setup Red Hat to receive the Oracle Database installation

Part 3: Download Oracle 12c and transfer to AWS EC2 instance with Secure Copy Client (SCP)

Part 4: Install Oracle Database and Create Instance

Setup Red Hat to receive the Oracle Database Installation

Once connected to our AWS EC2 Red Hat instance (explained in the first article), let’s change the hostname and add an entry in the Local DNS Resolver. Enter the following commands:

sudo hostnamectl set-hostname

In order for you hostname update to persist, you must verify that the preserve_hostname cloud-init setting is set to true. For that run the following command to add this settings:

sudo vi /etc/cloud/cloud.cfg

If you’re not used to the vi editor, I recommend reading this article that gives you an introduction. In the future, I plan to write an introductory article to vi for windows users. It’s the users that i perceive have the most difficulty with “vi way”.

I’ll assume you don’t know how to use vi. Just follow the indicated keys.

Press Shift+ G to go to the last line of the file. Then, press Shift + O to add a new line above the cursor. Type it:

preserve_hostname: true

Then, press ESC and type it to save the file and exit:

:wq

Esc is to exit from Insert Mode, :w is for save the file and :q is for exit. You can execute the save and close commands all at once with :wq

Copy your ip address with the command:

ip a

It’s the address after inet to the bar:

IP Address

Let’s edit the Local DNS Resolver with the command:

sudo vi /etc/hosts

Press Shift +G to go to the end of the file, then press i to enter Insert Mode. Type the ip address figured out in last step, and after that (followed by a blank space) the hostname you gave a few steps back

Editing Local DNS Resolver

Press ESC to exit the vi Inster Mode, then type it to save and close the file:

:wq

Then, we need to disable SELinux. For that, edit this file with vi:

sudo vi /etc/selinux/config

SELinux: Security-Enhanced Linux is a security architecture for Linux systems that defines access controls for the applications, processes and files on a system.

Press j to go down to the line containing the text SELINUX=, then press Shift + A to append new text, replace the default value with disabled.

Disable SELinux

Bonus: vi editor uses hjkl as arrow keys, the reason is when Bill Joy created the editor, he used the ADM-3A terminal, which had the arrows on hjkl keys. Naturally he reused the same keys. More information in this interesting article.

Press ESC to exit vi Insert Mode, then type :wq to save and exit the file.

Now let’s change the Kernel parameters in /etc/sysctl.conf, open this file with vi:

sudo vi /etc/sysctl.conf

Press Shift + G to go to the end of the file and press O to add a new blank line. Copy the lines below and past into the file. If you are using PuTTY, press Shift + Insert to paste.

fs.aio-max-nr = 1048576
fs.file-max = 6815744
kernel.shmmax=536870912
kernel.shmmni=4096
kernel.shmall=262144
kernel.sem = 250 32000 100 128
net.ipv4.ip_local_port_range = 9000 65500
net.core.rmem_default = 262144
net.core.rmem_max = 4194304
net.core.wmem_default = 262144
net.core.wmem_max = 1048586

Press ESC to exit vi Insert Mode, then type :wq to save and exit the file.

To apply parameter changes without restarting the operating system, enter the following commands:

sudo sysctl -p
sudo sysctl -a

Set the shell limit for user oracle in the file /etc/security/limit.conf . Open this file with vi editor:

sudo vi /etc/security/limits.conf

Press Shift + G to go to the end of the file and press Shift + O to add a new blank line above. Paste the following lines there: (If you are using PuTYY, just press Shift + Insert to paste)

oracle soft nproc 2047
oracle hard nproc 16384
oracle soft nofile 1024
oracle hard nofile 65536
oracle soft stack 10240
oracle hard stack 32768

Press ESC to exit vi Insert Mode, then type :wq to save and exit the file.

We need to install prerequisite packages, but before that we need to register our Red Hat to be able to install/update packages. Access the Red Hat Developer Website, clique on Log in the top right corner of the screen

In the login page, in the top right corner of the screen, click on Register

Create a new account. You will receive a confirmation email, click on the link in that email to active your account.

Create a Red Hat Developer Account

Once your registration is activated, we will register your operating system through the command line. Enter the following command:

sudo subscription-manager register --username

Let’s assume your user registered on the Red Hat is bob, the commando would be sudo subscription-manager register --username bob

You will be asked for the password for the account. Registration being successful, you will receive a message similar to this:

Message Red Hat successful registration

Attach subscriptions automatically for your server with below command:

sudo subscription-manager attach --auto

Enable the rhel-7-server-option-rpms repository to be able to install some of the necessary packages:

sudo subscription-manager repos --enable=rhel-7-server-optional-rpms

Now we can update OS packages with the command:

sudo yum update -y

Then, let’s install prerequisite packages using the following command:

sudo yum install binutils compat-libstdc++-33 gcc gcc-c++ glibc glibc-devel ksh libgcc libstdc++ libstdc++-devel libaio libaio-devel libXext libXtst libX11 libXau libxcb libXi make sysstat unixODBC unixODBC-devel zlib-devel -y

After installation, create required OS groups with the commands:

sudo groupadd -g 1101 oinstall
sudo groupadd -g 1102 dba
sudo groupadd -g 1103 oper
sudo groupadd -g 1104 backupdba
sudo groupadd -g 1105 dgdba
sudo groupadd -g 1106 kmdba
sudo groupadd -g 1107 asmdba
sudo groupadd -g 1108 asmoper
sudo groupadd -g 1109 asmadmin

Create the oracle user to install the database:

sudo useradd -g 1101 -g oinstall -G dba,oper,backupdba,dgdba,kmdba,asmdba,asmoper,asmadmin oracle

Set the oracle user password with the command:

Attention: the oracle password has some stricter restrictions than the OS. I recommend using only letters and numbers. I used the @ character in the password and lost some hours of my day trying to identify the cause of an error that was this.

sudo passwd oracle

Configure Linux Firewall to allow SQL*Net Listener to accept service requests on its default port. First, install the packaged firewalld with this command:

sudo yum install firewalld -y

Then, enable the firewall and start the service:

sudo systemctl enable firewalld
sudo systemctl start firewalld

Allow the port 1521/tcp:

sudo firewall-cmd --permanent --add-port=1521/tcp

Reload the firewall with this command:

sudo firewall-cmd --reload

Create directories for Oracle RDBMS Software:

sudo mkdir -p /u01/app/oracle/product/12.1.0.2/db_1
sudo mkdir -p /u01/app/oracle/product/12.1.0.2/db_1/network/admin
sudo mkdir -p /u01/app/oraInventory

Change the owner of these directories for the oracle user:

sudo chown -R oracle:oinstall /u01

Change directory permissions:

sudo chmod -R 755 /u01

Oracle Database needs a minimum 150MB swap file, let’s create a 2GB one.

sudo dd if=/dev/zero of=/myswap count=2000 bs=1MiB

Give these permissions:

sudo chmod 600 /myswap

Set up the swap area:

sudo mkswap /myswap

Enable the created swap:

sudo swapon /myswap

For this change to be permanent, we need to edit the File Systems Table (FSTAB):

sudo vi /etc/fstab

Press Shift + G to go to the end of the file, then press O to add new blank line. Paste this line there (If you’re using PuTTY, just press Shift + Insert)

/myswap swap swap defaults 0 0

Press ESC to exit the vi Insert Mode, then type :wqto save and exit the file.

As the installation process takes a long time, your connection sometimes goes down. To get around this, let’s use the screen package to keep the session active if that happens. Install the package with this command:

sudo yum install screen -y

Switch to oracle user that we created a few steps back:

su - oracle

After, entering the password, configure the enviroment variables of the oracle user with vi editor, enter this command:

vi .bash_profile

Press Shift +G to go to the end of the file, press O to create a new blink line and paste these codes there (If you’re using PuTTY, just press Shift + Insert to paste these codes)

export TMP=/tmp
TMPDIR=$TMP; export TMPDIR
export ORACLE_HOSTNAME=redhatsrv
export ORACLE_UNQNAME=orcl
ORACLE_BASE=/u01/app/oracle; export ORACLE_BASE
ORACLE_HOME=$ORACLE_BASE/product/12.1.0.2/db_1; export ORACLE_HOME
ORACLE_SID=orcl; export ORACLE_SID
PATH=/usr/sbin:$ORACLE_HOME/bin:$PATH; export PATH
LD_LIBRARY_PATH=$ORACLE_HOME/lib:/lib:/usr/lib:/usr/lib64; export LD_LIBRARY_PATH
CLASSPATH=$ORACLE_HOME/jlib:$ORACLE_HOME/rdbms/jlib; export CLASSPATH

alias cdob='cd $ORACLE_BASE'
alias cdoh='cd $ORACLE_HOME'
alias tns='cd $ORACLE_HOME/network/admin'
alias envo='env | grep ORACLE'

umask 022

if [ $USER = "oracle" ]; then
 if [ $SHELL = "/bin/ksh" ]; then
  ulimit -u 16384
  ulimit -n 65536
 else
  ulimit -u 16384 -n 65536
 fi
fi

envo

ORACLE_HOSTNAME must be equal to the hostname defined in the first article

Press ESC to exit vi Insert Mode, and type :wq to save and close the file.

We finished the set up, in the part 3 we will download Oracle Database 12c and transfer it to our AWS EC2 isntance with Secure Copy Client (SCP).

Install Oracle Database 12c on Red Hat AWS EC2 Instance — Part 1: Launching and Connecting with…

Luiz Eduardo Zappa — Sat, 04 Sep 2021 17:33:05 GMT

Install Oracle Database 12c on Red Hat AWS EC2 Instance — Part 1: Launching and Connecting with SSH using Putty on Windows

I gave myself the challenge to install Oracle Database only with command line (silent mode) on Red Hat (RHEL 7) AWS EC2 Instance. I had some difficulties throughout the process, and found the solutions in a very fragmented way on the Web, so I decided to gather everything I learned and write this article in a very detailed way (from setup an AWS EC2 Instance, connecting with SSH, sending files there,… to create an instance and pluggable database). I wish I had found such a step by step like this, I hope it helps someone.

As it got too big, I divided the article into some parts. It looked like this:

Part 1 (This article): Launch AWS EC2 Instance with RHEL 7 and connect with SSH (Windows using Putty)

Part 2: Setup Red Hat to receive the Oracle Database installation

Part 3: Download Oracle 12c and transfer to AWS EC2 instance with Secure Copy Client (SCP)

Part 4: Install Oracle Database and Create Instance

Install Oracle Database on RHEL 7 AWS EC2 Instance

The first thing we should do is launch an Amazon EC2 instance with the RHEL 7 (Red Hat Enterprise Linux) image. Let’s go to AWS Amazon Console, sign in, on the home screen, click on services, under compute category, click on EC2.

AWS Console — Accessing EC2 service

In the right side menu, navigate to the Instances. Then click to Launch Instances

AWS EC2 — Launch New Instance

Let’s look for an image of RHEL 7.9. To speed up, search directly for this code ami-0dd38e30236fe14ea , click on Community AMIs

AWS EC2 — RHEL 7 Image

I chose a type eligible to Free tier, but feel free to choose your configuration. Then click on step 4: Add Storage, at the top of the screen.

AWS EC2 —Choose Instance Type

Just to install Oracle Database, we need almost 7GB, so we should increase the default storage capacity. 30GB is enough (remembering that the Free tier holds up to 30GB). Then click on Review and Launch

AWS EC2 — Add Storage

Finally, click on Launch

AWS EC2 — Launch

We need to create one Key Pair to be able to access the instance with SSH. Choose a name that is intuitive for you, I chose rhelserv . Click on Download Key Pair and store this file (don’t lose it, otherwise it will be necessary to generate another one). Then click on Launch Instances

AWS EC2 — Creating Key Pair

There, your instance is being provisioned. At the bottom of the page, you will find a button to view this process. Click on it.

AWS EC2 — Provisioning

Wait a while until your Instance state is Running. Then, click on your Instance ID

AWS EC2 — Instances Running

Copy your instance Public IPv4 DNS (for that, just click on the icon)

AWS EC2 — Instance Public IPv4

Now we are going to connect via SSH. As my operating system is Windows, I will use PuTTY. Other systems have this feature built in. Access PuTTY Mirror and download these files: putty.exe , pscp.exe and puttygen.exe

Download PuTTY

PuTTY does not support the private key format for SSH key (.pem file downloaded). So, we will use the tool PuTTYgen to convert the required format (.ppk). Open PuTTYgen (puttygen.exe), under Type of key to generate, choose RSA, then click on Load

PuTTYgen — Convert .pem to .ppk

By default, PuTTYgen display only files with the extension .ppk . To locate your .pem file, choose the option to display files of all types. Then open the .pem file downloaded before

PuTTYgen — Open .pem file

PuTTYgen displays a notice that the .pem file was successfully imported. Choose OK.

PuTTYgen — Successfully notice

Then choose Save private key. PuTTYgen displays a warning about saving the key without a passphrase. Choose Yes.

A passphrase on private key is an extra layer of protection. Your private key can’t be used without the passphrase. The downside to using a passphrase is that it makes automation harder because human intervention is needed to log on an instance.

PuTTYgen — Save private key

Specify the name for the key and choose Save.

PuTTYgen — Save generated private key

Let’s connect to our AWS EC2 instance. Start your PuTTY (putty.exe), in the Category pane, choose Session and complete the following fields:

Public DNS: paste your Public IPv4 DNS copied a few steps back.

Port: 22

Connection Type: SSH

PuTTY — Session configurations

In the Category pane, expand Connection, expand SSH, then choose Auth. Complete the following:

Choose Browse. Then, selected the .ppk file that we generated and choose Open.

It’s important that we save these settings for future use. Under Category pane, choose Session, enter a name for the session in Saved Sessions, then choose Save. Then, we can click on Open.

PuTTY — Save configurations for future use

PuTTY displays a security alert dialog box that asks whether you trust the host to which you are connecting. Choose Accept.

PuTTY — Security alert for the first connect

If the connection worked, your screen should look like this:

PuTTY — Connected Successfully

We were able to connect to the instance with SSH. In the next article (Part 2) we will prepare Red Hat for installing Oracle Database.

Stories by Luiz Eduardo Zappa on Medium

Nuxt 3 | Repository pattern: organising and managing your calls to APIs (Typescript)

The repository pattern

Implementing the repository pattern in Nuxt 3

Products list

Conclusion

How to find out the coordinates of vertices of a shape in fabric.js?

The transformation matrix in fabric.js

Base vectors of a Cartesian plane

Linear transformation

Linear transformation with matrices

Transformation: scaling

Transformation: flip

Transformation: skewing

Transformation: rotation

Transformation: translate

Composing multiple transformations

Undoing transformations

The transformation matrix in fabric.js

The different Cartesian planes in fabric.js

Display angle while rotating an object in fabric.js (introducing vectors)

How to represent a point?

What is a vector?

The size of a vector

Operations with vectors: addition and subtraction

Operations with vectors: multiplication and division

Rotating vectors

Implementing the feature

Custom icon and cursor in fabric.js controls

Initializing the canvas

Customizing the rotation icon

Customizing the cursor while rotating

Nuxt 2 | How to retain Scroll Position when returning to page without Navigation History

The Problem

The Solution

1) Add meta in Nuxt Router

2) Creating the Router Middleware

3) Custom scrollBehavior after page loaded

Finally, our middleware running

Install Oracle Database 12c on Red Hat AWS EC2 Instance — Part 4: Install Database and Create…

Install Oracle Database 12c on Red Hat AWS EC2 Instance — Part 4: Install Database and Create Instance

Install Oracle Database 12c on Red Hat AWS EC2 Instance — Part 3: Download Oracle 12c and transfer…

Install Oracle Database 12c on Red Hat AWS EC2 Instance — Part 3: Download Oracle 12c and transfer to AWS EC2 instance with SCP

Install Oracle Database 12c on Red Hat AWS EC2 Instance — Part 2: Setup Red Hat (RHEL 7)

Install Oracle Database 12c on Red Hat AWS EC2 Instance — Part 2: Setup Red Hat (RHEL 7)

Install Oracle Database 12c on Red Hat AWS EC2 Instance — Part 1: Launching and Connecting with…

Install Oracle Database 12c on Red Hat AWS EC2 Instance — Part 1: Launching and Connecting with SSH using Putty on Windows