Skip to content

A pattern-placeholder for Vue that changes based on input text.

License

Notifications You must be signed in to change notification settings

6r1d/pattern-placeholder

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

19 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Vue-pattern-placeholder

This plugin provides a placeholder component for Vue.js. It uses canvas to render patterns from input string like URL.

NPM version Dependencies Maintenance PRs Welcome MIT license

Table of contents

Sample images

Recent updates

  • 2019-05-04 Import format changed, refer to usage section.

Installation

To install this plugin, open terminal in your Vue project directory and type:

npm i --save-dev vue-pattern-placeholder

This command will install the plugin in your project node_modules dir and add it as a project development dependency in project's package.json file.

If you need this plugin as a generic dependency, type this command instead:

npm i --save-dev vue-pattern-placeholder

Usage

To import a component, write:

import patternPlaceholder from 'vue-pattern-placeholder'

Add it to the components property

components: {
    patternPlaceholder
},

Now you can use it in your template:

<patternPlaceholder
  :width="150" :height="150"
  :input="''+item_data.media_id"
  label="150x150"
  label_style="900 30px Arial" label_color="#000"
  :hue_range="[70, 170]"
  :lightness_range="[0, 100]"
/>

I recommend to start playing with hue_range and lightness_range properties to reach the best look.

API

For now, none of the parameters are required.

Option Data-type(s) Description Default
width Number width of an image 250
height Number height of an image 250
input String this text will be converted to a pattern Hi there! :-)
label String text label to show No label
label_style String canvas font style. Example: 900 30px Arial 20px Helvetica bold
label_color String color of a label. Example: #777 #777
metric String metric, used to create a pattern. Examples: Euclidean, Manhattan, Minkovski Manhattan
debug Boolean allows to show center points for a Voronoi pattern false
hue_range Array sets a color range in degrees. Example: [0, 359] [0, 359]
lightness_range Array lightness range for pattern pieces in percents. Example: [0, 100] [0, 100]

Warning

Please be aware that this project is still in a testing stage. Use at your own risk. Ideas and bug reports are welcome.

Inspiration

I thought about converting text to an image and I remembered Voronoi patterns: these are easy to implement and look very nice.

Voronoi pattern animation

Then I had an idea:

  • take a string, process it using a SHA-256 hash function
  • extract hash bytes
  • use pairs of bytes, converting each to a float value between 0 and 1 to place X and Y points
  • count pattern segments, use numbers to set each one's hue in HSV color palette
  • calculate pattern areas
  • use areas to determine lightness of a pattern segment in HSV

TODO

  • Overlay text
  • Fix wrong color representation in overlay text
  • Autoreload fix (probably needs a destructor)
  • Fix empty canvas on width / height change
  • Fixed beforeDestroy bug
  • Added demo
  • Consider integrating label style and color into one parameter
  • Label style settings in key-value format
  • Extend hue setting to a list of several possible hues

Acknowledgements

Thanks to AnatolV from RosettaCode for a nice Voronoi diagram implementation.

Thanks to emn178 for js-sha256 library. It is easy to use and helps a lot.