d3-message-board
v1.0.14
Published
D3 Message Board is message board plugin powered by D3.js.
Downloads
26
Readme
D3 Message Board
D3 Message Board is message board plugin powered by D3.js.
You can load image into canvas, And you can add any messages into specified area.
canvas
element has not used. This plugin has implemented with the svg element.
Demo
Installation
npm i d3-message-board --save
Basic usage
Html
<div id="canvas"></div>
Script
import { Board, newConfiguration } from 'd3-message-board';
// Make new configuration
const configuration = newConfiguration();
// Set canvas element selector
configuration.canvas.selector = '#canvas';
// Set background image url
configuration.canvas.backgroundImageUrl = 'https://picsum.photos/400/350';
const messageBoard = new Board(configuration);
messageBoard.init();
Export configuration
// Get current board configuration as json string.
const exported = messageBoard.exportConfiguration();
Load configuration
import { Board, loadConfiguration } from 'd3-message-board';
// Restore configuration from json string
const configuration = loadConfiguration(exported);
const messageBoard = new Board(configuration);
messageBoard.init();
Use Case
Readonly
configuration.canvas.readOnly = true;
- Default is false
Canvas size auto resizing depending on the specified image size
configuration.canvas.autoResize = true;
// Set max and min size
configuration.canvas.minWidth = 400;
configuration.canvas.minHeight = 400;
configuration.canvas.maxWidth = 600;
configuration.canvas.maxHeight = 800;
- Default is true
Rectangle animation
// Enable
configuration.canvas.rectAnimation = true;
// Disable
configuration.canvas.rectAnimation = false;
- Default is true
Background grid
// Enable
configuration.canvas.showGrid = true;
// Disable
configuration.canvas.showGrid = false;
- Default is true
// Set grid size
configuration.canvas.gridSize = 50;
- Default is 30
Change coloring candidates
configuration.input.colors = [
'#yourOwnColorCodeHere',
'...',
'...',
'...',
'...',
]
Default coloring candidates
[
'#f48fb1',
'#ce93d8',
'#90caf9',
'#80deea',
'#a5d6a7',
'#e6ee9c',
'#ffe082',
'#ffab91',
'#bcaaa4',
'#b0bec5'
]
File upload configuration
Enabled file upload function.
configuration.input.enableFileUpload = true;
Set file upload endpoint url.
configuration.input.fileUploadEndpoint = 'https://example.com/upload';
Required uploaded response structure.
{
"url": "https://example.com/uploaded_file.jpg";
}
Others
Various other customizations are possible. See the dist/src/index.d.ts
file.