Global

# drawCircle(ctx, centerX, centerY, radius, fillopt, strokeopt)

This Draws a circle with a given radius and specified center point.

Parameters:

Name	Type	Attributes	Default	Description
`ctx`	CanvasRenderingContext2D			The 2D rendering context of the canvas.
`centerX`	number			The x-coordinate of the center of the circle.
`centerY`	number			The y-coordinate of the center of the circle.
`radius`	number			The radius of the circle.
`fill`	boolean	<optional>	false	Whether or not to fill the canvas diagram.
`stroke`	boolean	<optional>	true	Whether or not to stroke the canvas diagram.

View Source utils/drawing_utils.js, line 179

# drawImage(ctx, x, y, width, height, src)

This draws an image on a canvas using the specified corner point and dimensions.

Parameters:

Name	Type	Description
`ctx`	CanvasRenderingContext2D	The 2D rendering context of the canvas.
`x`	number	The x-coordinate of the top-left corner of the image.
`y`	number	The y-coordinate of the top-left corner of the image.
`width`	number	The width of the image.
`height`	number	The height of the image.
`src`	string	The path or location of the image.

View Source utils/drawing_utils.js, line 155

# drawLine(ctx, x1, y1, x2, y2)

This draws a line starting from point (x1, y1) to (x2, y2).

Parameters:

Name	Type	Description
`ctx`	CanvasRenderingContext2D	The 2D rendering context.
`x1`	number	The x-coordinate of the starting point of the line.
`y1`	number	The y-cordinate of the starting point of the line.
`x2`	number	The x-coordinate of the ending point of the line.
`y2`	number	The y-coordinate of the ending point of the line.

View Source utils/drawing_utils.js, line 136

# drawRectangle(ctx, x, y, width, height, fillopt, strokeopt)

This draws a regular rectangle with specified width and height.

Parameters:

Name	Type	Attributes	Default	Description
`ctx`	CanvasRenderingContext2D			The 2D rendering context.
`x`	number			The top left x coordinate.
`y`	number			The top left y coordinate.
`width`	number			The width of the rectangle.
`height`	number			The height of the rectangle.
`fill`	boolean	<optional>	false	Whether or not to fill the canvas diagram.
`stroke`	boolean	<optional>	true	Whether or not to stroke the canvas diagram.

View Source utils/drawing_utils.js, line 108

# drawRoundRect(ctx, x, y, width, height, radiusopt, fillopt, strokeopt)

This draws a rounded rectangle using the current state of the canvas. If you omit the last three params, it will draw a rectangle outline with a 5 pixel border radius.

Parameters:

Name	Type	Attributes	Default	Description
`ctx`	CanvasRenderingContext2D			The 2D rendering context.
`x`	number			The top left x coordinate.
`y`	number			The top left y coordinate.
`width`	number			The width of the rectangle.
`height`	number			The height of the rectangle.
`radius`	number \| Object	<optional>	5	The corner radius; It can also be an object. to specify different radii for corners
`tl`	number	<optional>	0	Top left
`tr`	number	<optional>	0	Top right
`br`	number	<optional>	0	Bottom right
`bl`	number	<optional>	0	Bottom left
`fill`	boolean	<optional>	false	Whether to fill the rectangle.
`stroke`	boolean	<optional>	true	Whether to stroke the rectangle.

View Source utils/drawing_utils.js, line 22

# drawRoundRectWithRadii(ctx, x, y, width, height, fillopt, strokeopt, rtlopt, rtropt, rbropt, rblopt)

This draws a rounded rectangle with specified values for the width and height and all the corners.

Parameters:

Name	Type	Attributes	Default	Description
`ctx`	CanvasRenderingContext2D			The 2D rendering context.
`x`	number			The top left x coordinate.
`y`	number			The top left y coordinate.
`width`	number			The width of the rectangle.
`height`	number			The height of the rectangle.
`fill`	boolean	<optional>	false	Whether or not to fill the canvas diagram.
`stroke`	boolean	<optional>	true	Whether or not to stroke the canvas diagram.
`rtl`	number	<optional>	5	The top left radius of the rectangle.
`rtr`	number	<optional>	5	The top right radius of the rectangle.
`rbr`	number	<optional>	5	The bottom right radius of the rectangle.
`rbl`	number	<optional>	5	The bottom left radius of the rectangle.

View Source utils/drawing_utils.js, line 74

# useAnimation(easingNameopt, durationopt, delayopt, valueopt) → {number}

This custom React hook is used to create animations and helps to animate from one value to another. This is used together with the useAnimationTimer function to get the desired animation effect.

Parameters:

Name	Type	Attributes	Default	Description
`easingName`	string	<optional>	linear	The type of easing function to be used. Defaults to linear easing function.
`duration`	number	<optional>	500	The duration of the animation in milliseconds. Defaults to 500 milliseconds.
`delay`	number	<optional>	0	The delay before the animation is started in milliseconds. Defaults to 0 milliseconds.
`value`	number \| Object	<optional>	null	The value that will trigger restart of the animation if it changes.

View Source hooks/use-animation.js, line 19

Returns:

The easing function value.

Type: number

Example

// Creates an animation with an elastic easing function and a duration and delay of 200 and 10 millisecond
let animation = useAnimation('linear', 200, 10);

# useAnimationTimer(duration, delay, value)

This custom React hook makes a timer that is used to calculate the present elapsed time of the animation. It is not used directly by any component but is used by the useAnimation hook to create the animation effect.

Parameters:

Name	Type	Default	Description
`duration`	Number	1000	The duration of the animation in milliseconds.
`delay`	Number	0	The delay before the animation is started in milliseconds.
`value`	Number		The value that will trigger restart of the animation if it changes.

View Source hooks/use-animation-timer.js, line 16

Returns:

the elapsed time since animation started.

# useFetch(url, methodopt, bodyopt, startTimeopt, endTimeopt, typeopt) → {Object}

This is a custom React Hook that is used to fetch and post data to a REST endpoint. For the equivalent hook for making requests to multiple URL, see useMultipleFetch.

Parameters:

Name	Type	Attributes	Default	Description
`url`	string			The REST endpoint data should be fetched from or posted to.
`method`	string	<optional>	GET	The HTTP method to be used in the request. Defaults to a GET request.
`body`	Object	<optional>	null	The body of the HTTP request.
`startTime`	number	<optional>		The start time for a request given in UTC epoch time. It is also used in refreshing requests at intervals.
`endTime`	number	<optional>		The end time for a request given in UTC epoch time.
`type`	string	<optional>		The type of the sensor making the request.

View Source hooks/use-fetch.js, line 26

Returns:

returns the data object along with whether there is an error or not.

Type: Object

Examples

// Makes a GET request to defined URL
const URL= 'www.example.com'
useFetch(URL)

// Makes a POST request to URL
useFetch(URL, 'POST')

# useInterval(callback, delayopt)

This custom React hook is used to make periodic calls to a function. This relies on setInterval.

Parameters:

Name	Type	Attributes	Default	Description
`callback`	function			The function to be invoked preriodically.
`delay`	number	<optional>	180000	The period or delay between invocations in milliseconds. Defaults to 180 milliseconds or 3 minutes.

View Source hooks/use-interval.js, line 16

Example

// This will print "Hello" to the console every minute
const printHello = () => console.log('Hello');
useInterval(printHello, 120000);

# useLocalStorage(key, initialValue) → {*}

This custom React hook is used to save information to local storage as a map of key-value pairs.

Parameters:

Name	Type	Description
`key`	string	The key of the information to be saved.
`initialValue`	*	The value of the information to be saved.

View Source hooks/use-local-storage.js, line 12

Returns:

Stored value for the given key.

Type: *

# useMultipleFetch(urlList, methodopt, bodyopt, startTimeopt, endTimeopt, typeopt) → {Object}

This is a custom React Hook that is used to fetch and post data to multiple REST endpoints simultaneously. For the equivalent hook for making requests to single URL, see useFetch

Parameters:

Name	Type	Attributes	Default	Description
`urlList`	Array.<string>			The list of REST endpoints data should be fetched from or posted to.
`method`	string	<optional>	GET	The HTTP method to be used in the request. Defaults to a GET request.
`body`	Object	<optional>	null	The body of the HTTP request.
`startTime`	number	<optional>		The start time for a request given in UTC epoch time. It is also used in refreshing requests at intervals.
`endTime`	number	<optional>		The end time for a request given in UTC epoch time.
`type`	string	<optional>		The type of the sensor making the request.

View Source hooks/use-multiple-fetch.js, line 26

Returns:

returns the data object along with whether there is an error or not.

Type: Object

Examples

// Makes a GET request to defined list of URLs
const URL_LIST= ['www.example.com','www.anotherexample.com']
useMultipleFetch(URL_LIST)

// Makes a POST request to lsit of URLs
useMultipleFetch(URL_LIST, 'POST')

# usePrevious(value) → {number|Object}

This custom react hook used to get the previous value of a react component in the last mount of the component. It is used to enable the animation of a components values from the previous value it had to the current values when it is being mounted. It is used together with useAnimation to achieve this effect.

Parameters:

Name	Type	Description
`value`	number \| Object	The current value which will be used as the previous value in the next render.

View Source hooks/use-previous.js, line 11

Returns:

The previous value saved in the last render.

Type: number | Object

IoT Dashboard

Global

Methods

# drawCircle(ctx, centerX, centerY, radius, fillopt, strokeopt)

Parameters:

# drawImage(ctx, x, y, width, height, src)

Parameters:

# drawLine(ctx, x1, y1, x2, y2)

Parameters:

# drawRectangle(ctx, x, y, width, height, fillopt, strokeopt)

Parameters:

# drawRoundRect(ctx, x, y, width, height, radiusopt, fillopt, strokeopt)

Parameters:

# drawRoundRectWithRadii(ctx, x, y, width, height, fillopt, strokeopt, rtlopt, rtropt, rbropt, rblopt)

Parameters:

# useAnimation(easingNameopt, durationopt, delayopt, valueopt) → {number}

Parameters:

Example

# useAnimationTimer(duration, delay, value)

Parameters:

# useFetch(url, methodopt, bodyopt, startTimeopt, endTimeopt, typeopt) → {Object}

Parameters:

Examples

# useInterval(callback, delayopt)

Parameters:

Example

# useLocalStorage(key, initialValue) → {*}

Parameters:

# useMultipleFetch(urlList, methodopt, bodyopt, startTimeopt, endTimeopt, typeopt) → {Object}

Parameters:

Examples

# usePrevious(value) → {number|Object}

Parameters:

Methods