prehistoric-systems/itty-bitty
1
0
Fork 0
mirror of https://github.com/arfct/itty-bitty.git synced 2026-03-11 08:54:33 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add updatehash

Browse source
This commit is contained in:
Nicholas Jitkoff 2022-07-02 14:44:18 -07:00
parent 1cfeaa784a
commit ea031fd909
2 changed files with 34 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
docs/index.js
View file

@ -139,6 +139,9 @@
if (e.data.wakeLock) {
getWakeLock();
}
if (e.data.updateHash) {
window.history.replaceState(null, null, e.data.updateHash);
}
if (e.data.replaceURL) {
if (e.data.compressURL) {
let durl = new bitty.DataURL(e.data.replaceURL);

51
docs/render/color.js
View file

@ -42,26 +42,6 @@ let currentColor;
};
}
function update (e){
if (!e.buttons) return;
console.log(e)
// Get the coordinates of the click
var eventLocation = getEventLocation(this,event);
// Get the data of the pixel according to the location generate by the getEventLocation function
var context = this.getContext('2d');
var pixelData = context.getImageData(eventLocation.x, eventLocation.y, 1, 1).data;
// If transparency on the pixel , array = [0,0,0,0]
if((pixelData[0] == 0) && (pixelData[1] == 0) && (pixelData[2] == 0) && (pixelData[3] == 0)){
// Do something if the pixel is transparent
}
currentColor = `rgba(${pixelData[0]},${pixelData[1]},${pixelData[2]},${pixelData[3]})`;
renderCanvas()
console.log(pixelData[0], pixelData[1], pixelData[2]);
// Convert it to HEX if you want using the rgbToHex method.
// var hex = "#" + ("000000" + rgbToHex(pixelData[0], pixelData[1], pixelData[2])).slice(-6);
}
function render() {
let colors = params.body.substring(2).split(";");
console.log("params", params, colors)
@ -82,6 +62,37 @@ function render() {
renderCanvas()
}
function update (e){
if (!e.buttons) return;
// Get the coordinates of the click
var eventLocation = getEventLocation(this,event);
// Get the data of the pixel according to the location generate by the getEventLocation function
var context = this.getContext('2d');
var pixelData = context.getImageData(eventLocation.x, eventLocation.y, 1, 1).data;
// If transparency on the pixel , array = [0,0,0,0]
if((pixelData[0] == 0) && (pixelData[1] == 0) && (pixelData[2] == 0) && (pixelData[3] == 0)){
// Do something if the pixel is transparent
}
currentColor = `rgb(${pixelData[0]},${pixelData[1]},${pixelData[2]}})`;
updateURL();
renderCanvas()
console.log(pixelData[0], pixelData[1], pixelData[2]);
// Convert it to HEX if you want using the rgbToHex method.
// var hex = "#" + ("000000" + rgbToHex(pixelData[0], pixelData[1], pixelData[2])).slice(-6);
}
let timeout;
function updateURL() {
clearTimeout(timeout)
timeout = setTimeout(() => {
parent.postMessage({updateHash:"#/c:" + currentColor}, "*");
},100);
}
function renderCanvas() {
let ctx = canvas.getContext("2d");
let w = canvas.width, h = canvas.height;