https://github.com/akoidan/spainter
Web browser painter on vanillajs
https://github.com/akoidan/spainter
Last synced: about 1 month ago
JSON representation
Web browser painter on vanillajs
- Host: GitHub
- URL: https://github.com/akoidan/spainter
- Owner: akoidan
- License: mit
- Created: 2018-07-04T18:44:44.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2024-10-11T18:32:28.000Z (7 months ago)
- Last Synced: 2025-03-11T17:48:08.326Z (about 2 months ago)
- Language: JavaScript
- Homepage:
- Size: 876 KB
- Stars: 22
- Watchers: 2
- Forks: 4
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
[](https://github.com/deathangel908/lines-logger/blob/master/LICENSE) [](https://www.npmjs.com/package/spainter) [](https://github.com/akoidan/spainter/issues/new) 
# 
Spainter. Web browSer painter
## DEMO [spainter.akoidan.com](https://spainter.akoidan.com)
### Integrating into you server:
- If you use bundler like webpack:
```bash
npm i spainter lines-logger
```
```ecmascript 6
import Painter from 'spainter';
import 'spainter/index.sass'; // you can import index.css if you don't have sass, ensure that you copy the fonts from the directory as well to production. Set `$FontelloPath: "../node_modules/spainter/font"`
import {LoggerFactory} from 'lines-logger'; // yarn install lines-logger
const containerPainter = document.createElement('div');
document.body.appendChild(containerPainter);
const p = new Painter(containerPainter, {logger: new LoggerFactory().getLogger('spainter')});
```
If you use [fontello](http://fontello.com/) in your server, you can generate single font importing [no-fonts.sass](no-fonts.sass), joining it with [config.json](config.json)
- If you use server rendering and cdn:
```html
var p = new Painter(containerPainter);
```
Target the latest version instead of `1.2.10` [](https://www.npmjs.com/package/spainter)
- You can find an example on [pychat](https://github.com/akoidan/pychat/blob/3c82c75c719dc5d84700efde415e2842d355dcf3/fe/src/components/pages/PainterPage.vue)
- Additional parameters
```javascript
new Painter(containerPainer, {
textClass: 'input-txt-class', // set class for all input[type=text] elements
buttonClass: 'input-button-class', // set class for all input[type=button] elements
rangeClass: 'input-range-class', // set class for all input[type=range]elements
rangeFactory: (parentElement) => { // use this div for input[range], e.g. you can use material-design
var input = document.createElement('input');
input.type = 'range';
// you can also do parentElement.
return input;
},
onBlobPaste: function(blob) { // example of uploading image to server
var formData = new FormData();
formData.append('file', blob, 'specifyFileNameHereIfNeeded.png');
fetch(`${host}/upload_file`, {
method: "POST",
body: formData,
}).then(e => {
console.log('server response', e);
});
},
logger: { // better use lines-logger instead this constructions. If you don't wanna install it, use this ugly construction below
debug: function log() {
var args = Array.prototype.slice.call(arguments);
var parts = args.shift().split('{}');
var params = [window.console, '%c' + 'painter', 'red'];
for (var i = 0; i < parts.length; i++) {
params.push(parts[i]);
if (typeof args[i] !== 'undefined') {
params.push(args[i])
}
}
return Function.prototype.bind.apply(console.log, params);
}
}
})
```
### CAUTION
Spainter uses [flexbox](https://caniuse.com/#feat=flexbox) if you need to support browsers like IE 9 and below, you're free to create a pull request to remove flexbox.
### Contribute
To build spainter you need
- yarn run build
- Open [index.html](index.html) in browser
To modify icons use `bash generate-fontello.sh`. it will show you help.
node sass requires a lot of libs to build as well as NODE max version of 14, you can use dockerfile inside docker directory if it's much of a pain.
I also intentionally leaved styles empty so you can easily override them according to your website design. If you want to prettify it a bit, you're wellcome to create a separate .css file with styles.
# spainter.pychat.org
- update npm package to upload new code. It should be updatged manually with `npm publish`
- worked that upload/stores files with cloudflare workers
- update index.html manually from cloudflare dashboard -> workers & pages -> settings -> variables and secrets
Cloudflare workers js file should contain all the css/html/js. There's no way to pull data from local fs according to [this](https://community.cloudflare.com/t/is-it-possible-to-pull-data-from-a-local-json-file-hosted-on-a-worker/134982) answer.
This is why static files are served with cdnjs
- Go to main page, 'Worker & Pages' -> Create application, router `spainter.pychat.org/*` Note star in the end.
- Go to your dns settings and create 'A' record pointing to any ip with a proxy status.
put this envs for local debugging CF_API_KEY can be got from Profile -> Api Tokens -. Api Keys Global API KEY
```bash
yarn global add wrangler@2
export CF_API_KEY=
export [email protected]
wrangler dev
```
Now you can debug in Webstorm by pressing debug on package.json dev script. In ordet for debug to work switch to local mode by pressing `l`
# CSS compile
Either use `yarn build`
### Webstorm
For webstorm you can setup
File-watcher -> sass
- Program: ~/.nvm/versions/node/v18.13.0/bin/node
- arguments: node_modules/.bin/node-sass index.sass index.css
- output files to refresh: index.css
# Terraform
```bash
cd terraform
terraform apply
# enter token by instruction
```
Some actions are not doable via CF api. We have to do them manually:
GO to CloudFlare Dashboard. From Home menu -> R2 -> Overview -> Select Spainter bucket -> Settings:
- Custom Domains -> Connect Domain -> img.spainter.akoidan.com -> Continue -> Connect Domain
- Object lifecycle rules -> Default Multipart Abort Rule -> Edit -> Set high number, e.g. 3650 days (10 years)
- CORS Policy -> Add Cors policy ->
```json
{
"AllowedOrigins": [
"https://spainter.akoidan.com"
]
}
```