kicap/T-shirt_designer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

project done before

Browse Source
This commit is contained in:
kicap1992
2021-06-23 17:39:54 +08:00
commit f0f1c87d07
100 changed files with 51682 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
www/assets/js/desain_1.js Normal file
View File

@ -0,0 +1,63 @@
/*
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership. The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
// Wait for the deviceready event before using any of Cordova's device APIs.
// See https://cordova.apache.org/docs/en/latest/cordova/events/events.html#deviceready
document.addEventListener('deviceready', onDeviceReady, false);
function onDeviceReady() {
// screen.orientation.lock('potrait');
var i = screen.orientation.lock('portrait');
console.log('Orientation is ' + screen.orientation.type);
}
var color = null;
function changecolor(e){
color = e;
}
function lanjut(){
if (color == null) {
// console.log("Tiada Baju");
toastr.options = {
"closeButton": true,
"debug": false,
"progressBar": true,
"positionClass": "toast-top-right",
"showDuration": "300",
"hideDuration": "1000",
"timeOut": "5000",
"extendedTimeOut": "1000",
"showEasing": "swing",
"hideEasing": "linear",
"showMethod": "fadeIn",
"hideMethod": "fadeOut"
};
toastr.error("<center>Warna Baju Harus Terpilih Terlebih Dahulu</center>");
$("#pilih_baju_select").focus();
}
else
{
window.location.replace("desain_2.html?color="+color)
}
}

938
www/assets/js/desain_2.js Normal file
View File

@ -0,0 +1,938 @@
/*
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership. The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
// Wait for the deviceready event before using any of Cordova's device APIs.
// See https://cordova.apache.org/docs/en/latest/cordova/events/events.html#deviceready
document.addEventListener('deviceready', onDeviceReady, false);
function onDeviceReady() {
// screen.orientation.lock('potrait');
}
////// get warna baju //////
function $_GET(param) {
var vars = {};
window.location.href.replace( location.hash, '' ).replace(
/[?&]+([^=&]+)=?([^&]*)?/gi, // regexp
function( m, key, value ) { // callback
vars[key] = value !== undefined ? value : '';
}
);
if ( param ) {
return vars[param] ? vars[param] : null;
}
return vars;
}
var color = $_GET('color');
$("#sini_div_baju_color").attr("style","background-image: url(assets/img/"+color+".PNG); height: 350px; width: 100%;background-size: 100% 100%;");
///// end get warna baju ///////
function toastnya(id,mesej){
toastr.options = {
"closeButton": true,
"debug": false,
"progressBar": true,
"positionClass": "toast-top-right",
"showDuration": "300",
"hideDuration": "1000",
"timeOut": "5000",
"extendedTimeOut": "1000",
"showEasing": "swing",
"hideEasing": "linear",
"showMethod": "fadeIn",
"hideMethod": "fadeOut"
};
toastr.error("<center>"+mesej+"</center>");
$("#"+id).focus();
}
////// ini icon delete //////
var deleteIcon = "data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg version='1.1' id='Ebene_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='595.275px' height='595.275px' viewBox='200 215 230 470' xml:space='preserve'%3E%3Ccircle style='fill:%23F44336;' cx='299.76' cy='439.067' r='218.516'/%3E%3Cg%3E%3Crect x='267.162' y='307.978' transform='matrix(0.7071 -0.7071 0.7071 0.7071 -222.6202 340.6915)' style='fill:white;' width='65.545' height='262.18'/%3E%3Crect x='266.988' y='308.153' transform='matrix(0.7071 0.7071 -0.7071 0.7071 398.3889 -83.3116)' style='fill:white;' width='65.544' height='262.179'/%3E%3C/g%3E%3C/svg%3E";
var img = document.createElement('img');
img.src = deleteIcon;
//// end icon delete /////
///// responsive canvas /////
function resizeCanvas() {
const outerCanvasContainer = $('#sini_div_canvas')[0];
const ratio = canvas.getWidth() / canvas.getHeight();
const containerWidth = outerCanvasContainer.clientWidth;
const containerHeight = outerCanvasContainer.clientHeight;
const scale = containerWidth / canvas.getWidth();
const zoom = canvas.getZoom() * scale;
canvas.setDimensions({width: containerWidth, height: outerCanvasContainer.clientHeight});
canvas.setViewportTransform([zoom, 0, 0, zoom, 0, 0]);
}
$("#sini_div_canvas").resize(resizeCanvas);
//// end responsive canvas ///
var canvas = this.__canvas = new fabric.Canvas('c',{width: 900,
height: 1050});
// var canvas = new fabric.Canvas('c',{backgroundColor : "red"});
// canvas.backgroundColor= color;
canvas.renderTop();
canvas.isDrawingMode = false;
resizeCanvas();
var drawing_width = 1; // ini utk drawing width
var drawing_color = null; // ini utk drawing color
///// ini change div editor /////
function change_editor(e){
if (e == 'bentuk') {
canvas.isDrawingMode = false;
$("#div_upload_image").attr('style','display : none')
var html= '<div class="pacific form-group">'+
'<label>Bentuk</label>'+
'<select class="form-control" onchange="change_persegi(1,value)" id="select_bentuk">'+
'<option disabled="" selected="">-Pilih Bentuk Persegi</option>'+
'<option value="rect">Segi Empat</option>'+
'<option value="tri">Segi Tiga</option>'+
'<option value="cir">Lingkaran</option>'+
'</select>'+
'</div>'+
'<div class="pacific form-group">'+
'<label>Fill Color</label>'+
'<select class="form-control" onchange="change_persegi(2,value)">'+
'<option disabled="" selected="">-Fill Color</option>'+
'<option value="no_color">Transparan</option>'+
'<option value="black">Hitam</option>'+
'<option value="white">Putih</option>'+
'<option value="red">Merah</option>'+
'<option value="blue">Biru</option>'+
'<option value="yellow">Kuning</option>'+
'</select>'+
'</div>'+
'<div class="pacific form-group">'+
'<label>Stroke Color</label>'+
'<select class="form-control" onchange="change_persegi(3,value)">'+
'<option disabled="" selected="">-Stroke Color</option>'+
'<option value="black">Hitam</option>'+
'<option value="white">Putih</option>'+
'<option value="red">Merah</option>'+
'<option value="blue">Biru</option>'+
'<option value="yellow">Kuning</option>'+
'</select>'+
'</div>'+
// '<div class="form-group">'+
// '<label>Stroke Width</label>'+
// '<input class="form-control" type="range" onchange="change_persegi(4,value)" value="1" min="1" max="20" style="display: block">'+
// '</div>'+
'<div class="pacific form-group" style="text-align:center">'+
'<button onclick="add_bentuk()" class="btn btn-info" style="font-weight: bold;">Tambah Bentuk</button>'
'</div>';
$("#sini_div_editor").html(html)
canvas.isDrawingMode = false;
}
if (e == 'drawing') {
canvas.isDrawingMode = false;
$("#div_upload_image").attr('style','display : none')
drawing_color = null;
drawing_width = 1;
var html= '<div class="pacific form-group">'+
'<label>Drawing Color</label>'+
'<select class="form-control" onchange="free_drawing(1,value)" id="select_drawing_color">'+
'<option disabled="" selected="">-Drawing Color</option>'+
'<option value="black">Hitam</option>'+
'<option value="white">Putih</option>'+
'<option value="red">Merah</option>'+
'<option value="blue">Biru</option>'+
'<option value="yellow">Kuning</option>'+
'</select>'+
'</div>'+
'<div class="pacific form-group">'+
'<label>Drawing Width</label>'+
'<input class="form-control" type="range" onchange="free_drawing(2,value)" value="1" min="1" max="20" style="display: block">'+
'</div>'+
'<div class="pacific form-group" style="text-align:center">'+
'<button onclick="add_drawing()" class="btn btn-info" style="font-weight: bold;">Tambah Drawing</button>'
'</div>';
$("#sini_div_editor").html(html)
}
if (e == 'teks') {
canvas.isDrawingMode = false;
$("#div_upload_image").attr('style','display : none')
drawing_color = null;
drawing_width = 1;
var html= '<div class="pacific form-group">'+
'<label>Inputan Teks</label>'+
// '<input class="form-control" type="teks" id="input_teks" oninput="teks_input(1,value)" >'+
'<textarea class="form-control" id="input_teks" oninput="teks_input(1,value)"></textarea>'+
'</div>'+
'<div class="pacific form-group">'+
'<label>Teks Font</label>'+
'<select class="form-control" onchange="teks_input(2,value)" id="select_teks_font">'+
'<option disabled="" selected="">-Pilih Teks Font</option>'+
'<option value="Times" style="font-family : Times">Times</option>'+
'<option value="Arial" style="font-family : Arial">Arial</option>'+
'<option value="Metal Mania" style="font-family : Metal Mania">Metal Mania</option>'+
'<option value="Pacifico">Pacifico</option>'+
'</select>'+
'</div>'+
'<div class="pacific form-group">'+
'<label>Teks Color</label>'+
'<input class="form-control" type="color" onchange="teks_input(3,value)" value="black" >'+
'</div>'+
'<div class="pacific form-group" style="text-align:center">'+
'<button onclick="add_teks()" class="btn btn-info" style="font-weight: bold;">Tambah Teks</button>'
'</div>';
$("#sini_div_editor").html(html)
}
if (e == 'image') {
canvas.isDrawingMode = false;
$("#div_upload_image").attr('style','display : block')
image_base64 = null;
$("#sini_div_editor").html(null)
}
}
//// end change div editor ////
var idnya = 1; // ini id tiap object
var save_data = null; // ini data editor
////// render icon delete supaya bole delete //////
fabric.Object.prototype.controls.deleteControl = new fabric.Control({
x: 0.5,
y: -0.5,
offsetY: 16,
cursorStyle: 'pointer',
mouseUpHandler: deleteObject,
render: renderIcon,
cornerSize: 24
});
function deleteObject(eventData, target) {
var datanya = JSON.parse(save_data);
console.log(target);
// datanya.filter(function(item){ console.log(item) })
var myNewArray = datanya.filter(function(item){ return item['id'] != target['id'] })
myNewArray = JSON.stringify(myNewArray)
if (myNewArray == "[]") {
myNewArray = null;
}
save_data = myNewArray
console.log(JSON.parse(save_data));
if (save_data == null) {
$("#save_datanya11").attr('disabled','');
}
var canvas = target.canvas;
canvas.remove(target);
canvas.requestRenderAll();
}
function renderIcon(ctx, left, top, styleOverride, fabricObject) {
var size = this.cornerSize;
ctx.save();
ctx.translate(left, top);
ctx.rotate(fabric.util.degreesToRadians(fabricObject.angle));
ctx.drawImage(img, -size/2, -size/2, size, size);
ctx.restore();
}
////// end render icon delete //////
//// ini untuk bentuk persegi ////
var variable_segi = null;
function change_persegi(kat,nilai){
var segi;
if (variable_segi == null) {
if (kat == 1) {
segi = [{"segi" : nilai ,"fill" : '' , 'stroke' : '' }];
}
else if (kat == 2) {
segi = [{"segi" : '' ,"fill" : nilai , 'stroke' : '' }];
}
else if (kat == 3) {
segi = [{"segi" : '' ,"fill" : '' , 'stroke' : nilai }];
}
variable_segi = JSON.stringify(segi)
}
else
{
// console.log(variable_segi)
variable_segi = JSON.parse(variable_segi);
// console.log(variable_segi)
if (kat == 1) {
variable_segi[0].segi = nilai;
}
else if (kat == 2) {
variable_segi[0].fill = nilai;
}
else if (kat == 3) {
variable_segi[0].stroke = nilai;
}
variable_segi = JSON.stringify(variable_segi)
// console.log(variable_segi)
}
}
function add_bentuk(){
if (variable_segi == null) {
toastnya('select_bentuk','Bentuk Harus Terpilih');
}
else
{
var segi = JSON.parse(variable_segi);
if (segi[0].segi == '' || segi[0].segi == null || segi[0].fill == '' || segi[0].fill == null || segi[0].stroke == '' || segi[0].stroke == null ) {
toastnya('select_bentuk','Semua Pilihan Harus DIpilih');
}
else
{
var fillnya;
if (segi[0].fill == 'no_color') {
fillnya = 'rgba(0,0,0,0)'
}
else
{
fillnya = segi[0].fill
}
if (segi[0].segi == 'rect') {
segi_empat(fillnya,segi[0].stroke,'segi_empat');
// console.log(segi[0].stroke_width)
}
else if (segi[0].segi == 'tri') {
segi_tiga(fillnya,segi[0].stroke,'segi_tiga');
// console.log(segi[0].stroke_width)
}
else if (segi[0].segi == 'cir') {
segi_lingkaran(fillnya,segi[0].stroke,'lingkaran');
// console.log(segi[0].stroke_width)
}
// variable_segi = null;
// $("#sini_div_editor").html(null)
document.getElementById("back_to_top").click();
// $("#editor_select").val($("#editor_select option:first").val());
}
}
}
function segi_empat(fillnya,stroke,bentuk) {
var rect = new fabric.Rect({
id : idnya,
kategori : bentuk,
angle:0,
left: 400,
top: 350,
fill: fillnya,
width: 200,
height: 200,
// objectCaching: true,
stroke: stroke,
strokeWidth: 10,
// padding : 5
});
var datanya = [{"id" : idnya ,"kategori" : bentuk, "left" : 400 , "top" : 350, "width" : 200 , "height" : 200 , "angle" :0 , "fill" : fillnya , "stroke" : stroke }];
if (save_data == null) {
datanya = JSON.stringify(datanya);
save_data = datanya;
// console.log(JSON.parse(save_data))
}
else
{
save_data = JSON.parse(save_data);
save_data = save_data.concat(datanya)
save_data = JSON.stringify(save_data);
// console.log(JSON.parse(save_data))
// console.log(save_data)
}
canvas.add(rect);
canvas.setActiveObject(rect);
idnya = idnya + 1;
$("#save_datanya11").removeAttr('disabled');
}
function segi_tiga(fillnya,stroke,bentuk) {
var tri = new fabric.Triangle({
id : idnya,
kategori : bentuk,
angle:0,
left: 400,
top: 350,
fill: fillnya,
width: 200,
height: 200,
// objectCaching: true,
stroke: stroke,
strokeWidth: 10,
// padding : 5
});
var datanya = [{"id" : idnya ,"kategori" : bentuk, "left" : 400 , "top" : 350, "width" : 200 , "height" : 200 , "angle" :0 , "fill" : fillnya , "stroke" : stroke }];
if (save_data == null) {
datanya = JSON.stringify(datanya);
save_data = datanya;
// console.log(JSON.parse(save_data))
}
else
{
save_data = JSON.parse(save_data);
save_data = save_data.concat(datanya)
save_data = JSON.stringify(save_data);
// console.log(JSON.parse(save_data))
// console.log(save_data)
}
canvas.add(tri);
canvas.setActiveObject(tri);
idnya = idnya + 1;
$("#save_datanya11").removeAttr('disabled');
}
function segi_lingkaran(fillnya,stroke,bentuk) {
var cir = new fabric.Circle({
id : idnya,
kategori : bentuk,
angle:0,
left: 400,
top: 350,
fill: fillnya,
radius : 200,
// objectCaching: true,
stroke: stroke,
strokeWidth: 10,
// padding : 5
});
var datanya = [{"id" : idnya ,"kategori" : bentuk, "left" : 400 , "top" : 350, "radius" : 200 , "angle" :0 , "fill" : fillnya , "stroke" : stroke , "scaleX" : 1, "scaleY" : 1}];
if (save_data == null) {
datanya = JSON.stringify(datanya);
save_data = datanya;
// console.log(JSON.parse(save_data))
}
else
{
save_data = JSON.parse(save_data);
save_data = save_data.concat(datanya)
save_data = JSON.stringify(save_data);
// console.log(JSON.parse(save_data))
// console.log(save_data)
}
console.log(cir);
canvas.add(cir);
canvas.setActiveObject(cir);
idnya = idnya + 1;
$("#save_datanya11").removeAttr('disabled');
}
//// end untuk bentuk persegi ////
//// ini untuk free drawing ////
function free_drawing(kat,nilai){
// console.log(kat,nilai)
var draw;
if (kat == 1) {
drawing_color = nilai;
}
else if (kat == 2) {
drawing_width = nilai;
}
}
function add_drawing(){
// console.log(variable_free_drawing)
if (drawing_color == null) {
toastnya('select_drawing_color','Warna Harus Dipilih');
}
else
{
// console.log("jalankan")
// drawing = JSON.parse(variable_free_drawing)
canvas.isDrawingMode = true;
canvas.freeDrawingBrush.width = drawing_width;
canvas.freeDrawingBrush.color = drawing_color;
// variable_segi = null;
var html = '<div class="pacific form-group" style="text-align:center">'+
'<button onclick="stop_drawing()" class="btn btn-warning" style="font-weight: bold;">Stop Drawing</button>'
'</div>';
$("#sini_div_editor").html(html)
document.getElementById("back_to_top").click();
$("#editor_select").val($("#editor_select option:first").val());
}
}
canvas.on('path:created', function(opt) {
// opt.path is a fabric.Path ready to use and already on the canvas
// console.log(opt.path instanceof fabric.Path)
// this is the path data
// console.log(opt.path);
// console.log(JSON.stringify(opt.path.path));
var path = opt.path.path.map(chunk => {return chunk.join(' ');}).join(' ');
// console.log(opt.path.height)
console.log(opt.path)
var datanya = [{"id" : idnya ,"kategori" : 'free_drawing', "path" : path , "left" : opt.path.left , "top" : opt.path.top, "width" : opt.path.width , "height" : opt.path.height , "stroke_width" : opt.path.strokeWidth , "stroke" : opt.path.stroke }];
console.log(datanya)
opt.path.idnya = fabric.Object.__uid++
opt.path.id = idnya
if (save_data == null) {
datanya = JSON.stringify(datanya);
save_data = datanya;
// console.log(JSON.parse(save_data))
console.log(save_data)
}
else
{
save_data = JSON.parse(save_data);
save_data = save_data.concat(datanya)
save_data = JSON.stringify(save_data);
// console.log(JSON.parse(save_data))
console.log(save_data)
}
idnya = idnya + 1;
$("#save_datanya11").removeAttr('disabled');
});
function stop_drawing(){
canvas.isDrawingMode = false;
$("#sini_div_editor").html(null)
document.getElementById("back_to_top").click();
}
// function hapus_path() {
// canvas.getObjects('path').forEach((path) => {
// // if(path.senderId === client.id){
// canvas.remove(path);
// // }
// });
// }
//// end utk free drawing ////
//// ini utk input teks ////
var teks_inputan = null;
var teks_font = null;
var teks_color = "black";
function teks_input(kat,nilai){
// console.log(kat,nilai)
if (kat == 1) {
teks_inputan = nilai;
}
else if (kat == 2) {
teks_font = nilai;
// console.log(teks_font)
}
else if (kat == 3) {
teks_color = nilai;
}
}
function add_teks(){
// console.log(variable_free_drawing)
if (teks_inputan == null) {
toastnya('input_teks','Inputan Harus Terisi');
}
else if (teks_font == null) {
toastnya('select_teks_font','Font Harus Terpilih');
}
else
{
tambah_teks(teks_inputan,teks_color,teks_font)
document.getElementById("back_to_top").click();
}
}
function tambah_teks(input,fill,family){
var text = new fabric.Text(input, {
id : idnya,
fill: fill ,
fontSize: 100,
left: 400,
top: 350,
fontFamily: family,
});
var datanya = [{"id" : idnya ,"kategori" : "teks", "input_teks" : input, "left" : 400 , "top" : 350, "width" : "" , "height" : "200" , "angle" :0 , "fill" : fill , "fontFamily" : family , "angle" : 0 , "scaleX" : 1, "scaleY" : 1}];
if (save_data == null) {
datanya = JSON.stringify(datanya);
save_data = datanya;
// console.log(JSON.parse(save_data))
}
else
{
save_data = JSON.parse(save_data);
save_data = save_data.concat(datanya)
save_data = JSON.stringify(save_data);
// console.log(JSON.parse(save_data))
// console.log(save_data)
}
// text
// Render the Text on Canvas
// console.log(text.kategori);
text.kategori = "teks"
console.log(text)
canvas.add(text);
canvas.setActiveObject(text);
idnya = idnya + 1;
$("#save_datanya11").removeAttr('disabled');
}
//// end utk input teks ////
//// ini utk upload image ////
var image_base64 = null;
$("#input_upload_image").change(function(){
readImage( this );
// console.log("berubah")
// console.log(image_base64)
});
function readImage(input) {
if ( input.files && input.files[0] ) {
var FR= new FileReader();
var size = input.files[0].size / 1024
var type = input.files[0].type;
// console.log(size)
console.log(type)
if (size > 1500) {
toastnya("input_upload_image","Image yang diupload maksimal 1,4 MB")
$("#input_upload_image").val(null)
image_base64 = null
}
else if (type != 'image/jpeg' && type != 'image/png') {
toastnya("input_upload_image","File yang diupload harus berekstensi foto")
$("#input_upload_image").val(null)
image_base64 = null
}
else
{
FR.onload = function(e) {
// $('#img').attr( "src", e.target.result );
// $('#base').text( e.target.result );
// console.log(e.target.result)
// simpan_image(e.target.result)
image_base64 = e.target.result
};
FR.readAsDataURL( input.files[0] );
}
}
}
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
function add_image(){
var x = document.createElement("IMG");
x.setAttribute("src", image_base64);
x.setAttribute("id", 'img_yg_terupload_'+idnya);
x.async = true;
document.getElementById("sini_tampung_image").appendChild(x);
// await sleep(500);
setTimeout(function(){
console.log("heheheh dulu")
var imgElement = document.getElementById('img_yg_terupload_'+idnya);
var imgInstance = new fabric.Image(imgElement, {
id : idnya,
left: 400,
top: 350,
angle: 0,
opacity: 1
});
imgInstance.kategori = "foto"
canvas.add(imgInstance);
canvas.setActiveObject(imgInstance);
var datanya = [{"id" : idnya ,"kategori" : "foto", "detail" : image_base64, "scaleX" : 1 , "scaleY" : 1 , "left" : 400 , "top" : 350, "angle" :0 }];
if (save_data == null) {
datanya = JSON.stringify(datanya);
save_data = datanya;
// console.log(JSON.parse(save_data))
}
else
{
save_data = JSON.parse(save_data);
save_data = save_data.concat(datanya)
save_data = JSON.stringify(save_data);
// console.log(JSON.parse(save_data))
// console.log(save_data)
}
idnya = idnya + 1;
document.getElementById("back_to_top").click();
$("#save_datanya11").removeAttr('disabled');
}, 200);
}
// function try_remove(){
// document.getElementById("img_yg_terupload_1").remove();
// // var elem = document.getElementById(id);
// }
//// end utk upload image ////
//// sini canvas event /////
canvas.on('object:moved', function(options) {
// console.log(options)
var obj = canvas.getActiveObject();
var datanya = JSON.parse(save_data);
var id;
for (var i = 0; i < datanya.length; ++i) {
if (datanya[i].id == options['target']['id']) {
id = i;
break;
}
}
if (options['target']['kategori'] == 'segi_empat' || options['target']['kategori'] == 'segi_tiga' ) {
datanya[id].angle = options['target']['angle'];
datanya[id].height = Math.floor(obj.getScaledHeight());
datanya[id].left = options['target']['left'];
datanya[id].top = options['target']['top'];
datanya[id].width = Math.floor(obj.getScaledWidth());
}
if (options['target']['kategori'] == 'foto' || options['target']['kategori'] == 'teks' || options['target']['kategori'] == 'lingkaran' ) {
// console.log(options['target'])
datanya[id].angle = options['target']['angle'];
datanya[id].height = Math.floor(obj.getScaledHeight());
datanya[id].left = options['target']['left'];
datanya[id].top = options['target']['top'];
datanya[id].scaleY = options['target']['scaleY'];
datanya[id].scaleX = options['target']['scaleX'];
datanya[id].width = Math.floor(obj.getScaledWidth());
}
save_data = JSON.stringify(datanya);
// console.log(JSON.parse(save_data) )
// console.log(save_data)
// console.log(options['target']['kategori'])
// simpan(datanya,'update',kategori,id);
});
canvas.on('object:rotated', function(options) {
// console.log(options)
var obj = canvas.getActiveObject();
var datanya = JSON.parse(save_data);
var id;
for (var i = 0; i < datanya.length; ++i) {
if (datanya[i].id == options['target']['id']) {
id = i;
break;
}
}
if (options['target']['kategori'] == 'segi_empat' || options['target']['kategori'] == 'segi_tiga' ) {
datanya[id].angle = options['target']['angle'];
datanya[id].height = Math.floor(obj.getScaledHeight());
datanya[id].left = options['target']['left'];
datanya[id].top = options['target']['top'];
datanya[id].width = Math.floor(obj.getScaledWidth());
}
if (options['target']['kategori'] == 'foto' || options['target']['kategori'] == 'teks' || options['target']['kategori'] == 'lingkaran' ) {
// console.log(options['target'])
datanya[id].angle = options['target']['angle'];
datanya[id].height = Math.floor(obj.getScaledHeight());
datanya[id].left = options['target']['left'];
datanya[id].top = options['target']['top'];
datanya[id].scaleY = options['target']['scaleY'];
datanya[id].scaleX = options['target']['scaleX'];
datanya[id].width = Math.floor(obj.getScaledWidth());
}
save_data = JSON.stringify(datanya);
// console.log(JSON.parse(save_data) )
console.log(save_data)
});
canvas.on('object:scaled', function(options) {
console.log(options)
var obj = canvas.getActiveObject();
var datanya = JSON.parse(save_data);
var id;
for (var i = 0; i < datanya.length; ++i) {
if (datanya[i].id == options['target']['id']) {
id = i;
break;
}
}
if (options['target']['kategori'] == 'segi_empat' || options['target']['kategori'] == 'segi_tiga' ) {
datanya[id].angle = options['target']['angle'];
datanya[id].height = Math.floor(obj.getScaledHeight());
datanya[id].left = options['target']['left'];
datanya[id].top = options['target']['top'];
datanya[id].width = Math.floor(obj.getScaledWidth());
}
if (options['target']['kategori'] == 'foto' || options['target']['kategori'] == 'teks' || options['target']['kategori'] == 'lingkaran' ) {
// console.log(options['target'])
datanya[id].angle = options['target']['angle'];
datanya[id].height = Math.floor(obj.getScaledHeight());
datanya[id].left = options['target']['left'];
datanya[id].top = options['target']['top'];
datanya[id].scaleY = options['target']['scaleY'];
datanya[id].scaleX = options['target']['scaleX'];
datanya[id].width = Math.floor(obj.getScaledWidth());
}
// console.log(save_data)
save_data = JSON.stringify(datanya);
// console.log(JSON.parse(save_data) )
console.log(save_data)
});
canvas.on('selection:created', function(options) {
// console.log(options['target'])
if (options['target']['strokeLineCap'] == 'round' && options['target']['strokeLineJoin'] == 'round') {
// console.log('ini free drawing')
var id = options['target']['idnya']
// console.log("ini idnya : "+id)
var ini_array;
// console.log(canvas['_objects'])
var object_canvas = canvas['_objects'];
for (var i = 0; i < object_canvas.length; i++) {
// console.log(object_canvas[i].idnya)
if (object_canvas[i].idnya == options['target']['idnya']) {
ini_array = i;
break;
}
}
// console.log("ini id array nya : "+ini_array)
canvas['_objects'][ini_array].lockScalingX = true;
canvas['_objects'][ini_array].lockScalingY = true;
canvas['_objects'][ini_array].lockRotation = true;
canvas['_objects'][ini_array].lockMovementX = true;
canvas['_objects'][ini_array].lockMovementY = true;
// this.__canvases.push(canvas);
}
});
canvas.on('selection:updated', function(options) {
// console.log(options['target'])
// console.log(options)
if (options['target']['strokeLineCap'] == 'round' && options['target']['strokeLineJoin'] == 'round') {
// console.log('ini free drawing')
var id = options['target']['idnya']
// console.log("ini idnya : "+id)
var ini_array;
// console.log(canvas['_objects'])
var object_canvas = canvas['_objects'];
for (var i = 0; i < object_canvas.length; i++) {
// console.log(object_canvas[i].idnya)
if (object_canvas[i].idnya == options['target']['idnya']) {
ini_array = i;
break;
}
}
// console.log("ini id array nya : "+ini_array)
canvas['_objects'][ini_array].lockScalingX = true;
canvas['_objects'][ini_array].lockScalingY = true;
canvas['_objects'][ini_array].lockRotation = true;
canvas['_objects'][ini_array].lockMovementX = true;
canvas['_objects'][ini_array].lockMovementY = true;
// this.__canvases.push(canvas);
}
});
//// end canvas event /////
function save_desain() {
var penyimpanan = localStorage.getItem('simpanan')
var a = JSON.parse(save_data);
var id = 1;
if (penyimpanan == null) {
var ini = [{"id" : id ,"canvas" : color ,"isi" : a}];
// localStorage.setItem('coba2', JSON.stringify(ini));
}
else
{
id = JSON.parse(penyimpanan);
id = id[id.length-1].id + 1
var ini = [{"id" : id ,"canvas" : color ,"isi" : a}];
penyimpanan = JSON.parse(penyimpanan)
ini = penyimpanan.concat(ini);
// localStorage.setItem('coba2', JSON.stringify(ini));
}
localStorage.setItem('simpanan', JSON.stringify(ini));
window.location.replace("desain_complete.html?id="+id);
}
function cek_simpanan(){
// localStorage.removeItem('simpanan')
// alert(localStorage.getItem('coba2'))
console.log(JSON.parse(localStorage.getItem('simpanan')))
}

763
www/assets/js/desain_2_backup.js Normal file
View File

@ -0,0 +1,763 @@
/*
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership. The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
// Wait for the deviceready event before using any of Cordova's device APIs.
// See https://cordova.apache.org/docs/en/latest/cordova/events/events.html#deviceready
document.addEventListener('deviceready', onDeviceReady, false);
function onDeviceReady() {
// screen.orientation.lock('potrait');
}
////// get warna baju //////
function $_GET(param) {
var vars = {};
window.location.href.replace( location.hash, '' ).replace(
/[?&]+([^=&]+)=?([^&]*)?/gi, // regexp
function( m, key, value ) { // callback
vars[key] = value !== undefined ? value : '';
}
);
if ( param ) {
return vars[param] ? vars[param] : null;
}
return vars;
}
var color = $_GET('color');
if (color == 'white') {
color = 'rgba(0,0,0,0)';
}
///// end get warna baju ///////
function toastnya(id,mesej){
toastr.options = {
"closeButton": true,
"debug": false,
"progressBar": true,
"positionClass": "toast-top-right",
"showDuration": "300",
"hideDuration": "1000",
"timeOut": "5000",
"extendedTimeOut": "1000",
"showEasing": "swing",
"hideEasing": "linear",
"showMethod": "fadeIn",
"hideMethod": "fadeOut"
};
toastr.error("<center>"+mesej+"</center>");
$("#"+id).focus();
}
////// ini icon delete //////
var deleteIcon = "data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg version='1.1' id='Ebene_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='595.275px' height='595.275px' viewBox='200 215 230 470' xml:space='preserve'%3E%3Ccircle style='fill:%23F44336;' cx='299.76' cy='439.067' r='218.516'/%3E%3Cg%3E%3Crect x='267.162' y='307.978' transform='matrix(0.7071 -0.7071 0.7071 0.7071 -222.6202 340.6915)' style='fill:white;' width='65.545' height='262.18'/%3E%3Crect x='266.988' y='308.153' transform='matrix(0.7071 0.7071 -0.7071 0.7071 398.3889 -83.3116)' style='fill:white;' width='65.544' height='262.179'/%3E%3C/g%3E%3C/svg%3E";
var img = document.createElement('img');
img.src = deleteIcon;
//// end icon delete /////
///// responsive canvas /////
function resizeCanvas() {
const outerCanvasContainer = $('.fabric-canvas-wrapper')[0];
const ratio = canvas.getWidth() / canvas.getHeight();
const containerWidth = outerCanvasContainer.clientWidth;
const containerHeight = outerCanvasContainer.clientHeight;
const scale = containerWidth / canvas.getWidth();
const zoom = canvas.getZoom() * scale;
canvas.setDimensions({width: containerWidth, height: containerWidth / ratio});
canvas.setViewportTransform([zoom, 0, 0, zoom, 0, 0]);
}
$(window).resize(resizeCanvas);
//// end responsive canvas ///
var canvas = this.__canvas = new fabric.Canvas('c',{backgroundColor : color,width: 1050,
height: 950});
// var canvas = new fabric.Canvas('c',{backgroundColor : "red"});
canvas.backgroundColor= color;
canvas.renderTop();
canvas.isDrawingMode = false;
resizeCanvas();
var drawing_width = 1; // ini utk drawing width
var drawing_color = null; // ini utk drawing color
///// ini change div editor /////
function change_editor(e){
if (e == 'bentuk') {
let html= '<div class="form-group">'+
'<label>Bentuk</label>'+
'<select class="form-control" onchange="change_persegi(1,value)" id="select_bentuk">'+
'<option disabled="" selected="">-Pilih Bentuk Persegi</option>'+
'<option value="rect">Segi Empat</option>'+
'<option value="tri">Segi Tiga</option>'+
'<option value="cir">Lingkaran</option>'+
'</select>'+
'</div>'+
'<div class="form-group">'+
'<label>Fill Color</label>'+
'<select class="form-control" onchange="change_persegi(2,value)">'+
'<option disabled="" selected="">-Fill Color</option>'+
'<option value="no_color">Transparan</option>'+
'<option value="black">Hitam</option>'+
'<option value="white">Putih</option>'+
'<option value="red">Merah</option>'+
'<option value="blue">Biru</option>'+
'<option value="yellow">Kuning</option>'+
'</select>'+
'</div>'+
'<div class="form-group">'+
'<label>Stroke Color</label>'+
'<select class="form-control" onchange="change_persegi(3,value)">'+
'<option disabled="" selected="">-Stroke Color</option>'+
'<option value="black">Hitam</option>'+
'<option value="white">Putih</option>'+
'<option value="red">Merah</option>'+
'<option value="blue">Biru</option>'+
'<option value="yellow">Kuning</option>'+
'</select>'+
'</div>'+
// '<div class="form-group">'+
// '<label>Stroke Width</label>'+
// '<input class="form-control" type="range" onchange="change_persegi(4,value)" value="1" min="1" max="20" style="display: block">'+
// '</div>'+
'<div class="form-group" style="text-align:center">'+
'<button onclick="add_bentuk()" class="btn btn-info" style="font-weight: bold;">Tambah Bentuk</button>'
'</div>';
$("#sini_div_editor").html(html)
canvas.isDrawingMode = false;
}
if (e == 'drawing') {
drawing_color = null;
drawing_width = 1;
let html= '<div class="form-group">'+
'<label>Drawing Color</label>'+
'<select class="form-control" onchange="free_drawing(1,value)" id="select_drawing_color">'+
'<option disabled="" selected="">-Drawing Color</option>'+
'<option value="black">Hitam</option>'+
'<option value="white">Putih</option>'+
'<option value="red">Merah</option>'+
'<option value="blue">Biru</option>'+
'<option value="yellow">Kuning</option>'+
'</select>'+
'</div>'+
'<div class="form-group">'+
'<label>Drawing Width</label>'+
'<input class="form-control" type="range" onchange="free_drawing(2,value)" value="1" min="1" max="20" style="display: block">'+
'</div>'+
'<div class="form-group" style="text-align:center">'+
'<button onclick="add_drawing()" class="btn btn-info" style="font-weight: bold;">Tambah Drawing</button>'
'</div>';
$("#sini_div_editor").html(html)
}
if (e == 'teks') {
drawing_color = null;
drawing_width = 1;
let html= '<div class="form-group">'+
'<label>Inputan Teks</label>'+
'<input class="form-control" type="teks" id="input_teks" oninput="teks_input(1,value)" >'+
'</div>'+
'<div class="form-group">'+
'<label>Teks Font</label>'+
'<select class="form-control" onchange="teks_input(2,value)" id="select_teks_font">'+
'<option disabled="" selected="">-Pilih Teks Font</option>'+
'<option value="Times">Times</option>'+
'<option value="Arial">Arial</option>'+
'<option value="Metal Mania">Metal Mania</option>'+
'<option value="Pacifico">Pacifico</option>'+
'</select>'+
'</div>'+
'<div class="form-group">'+
'<label>Teks Color</label>'+
'<input class="form-control" type="color" onchange="teks_input(3,value)" value="black" >'+
'</div>'+
'<div class="form-group" style="text-align:center">'+
'<button onclick="add_teks()" class="btn btn-info" style="font-weight: bold;">Tambah Teks</button>'
'</div>';
$("#sini_div_editor").html(html)
}
}
//// end change div editor ////
var idnya = 1; // ini id tiap object
var save_data = null; // ini data editor
////// render icon delete supaya bole delete //////
fabric.Object.prototype.controls.deleteControl = new fabric.Control({
x: 0.5,
y: -0.5,
offsetY: 16,
cursorStyle: 'pointer',
mouseUpHandler: deleteObject,
render: renderIcon,
cornerSize: 24
});
function deleteObject(eventData, target) {
let datanya = JSON.parse(save_data);
// console.log(target);
// datanya.filter(function(item){ console.log(item) })
let myNewArray = datanya.filter(function(item){ return item['id'] != target['id'] })
myNewArray = JSON.stringify(myNewArray)
if (myNewArray == "[]") {
myNewArray = null;
}
save_data = myNewArray
console.log(JSON.parse(save_data));
var canvas = target.canvas;
canvas.remove(target);
canvas.requestRenderAll();
}
function renderIcon(ctx, left, top, styleOverride, fabricObject) {
var size = this.cornerSize;
ctx.save();
ctx.translate(left, top);
ctx.rotate(fabric.util.degreesToRadians(fabricObject.angle));
ctx.drawImage(img, -size/2, -size/2, size, size);
ctx.restore();
}
////// end render icon delete //////
//// ini untuk bentuk persegi ////
var variable_segi = null;
function change_persegi(kat,nilai){
let segi;
if (variable_segi == null) {
if (kat == 1) {
segi = [{"segi" : nilai ,"fill" : '' , 'stroke' : '' }];
}
else if (kat == 2) {
segi = [{"segi" : '' ,"fill" : nilai , 'stroke' : '' }];
}
else if (kat == 3) {
segi = [{"segi" : '' ,"fill" : '' , 'stroke' : nilai }];
}
variable_segi = JSON.stringify(segi)
}
else
{
// console.log(variable_segi)
variable_segi = JSON.parse(variable_segi);
// console.log(variable_segi)
if (kat == 1) {
variable_segi[0].segi = nilai;
}
else if (kat == 2) {
variable_segi[0].fill = nilai;
}
else if (kat == 3) {
variable_segi[0].stroke = nilai;
}
variable_segi = JSON.stringify(variable_segi)
// console.log(variable_segi)
}
}
function add_bentuk(){
if (variable_segi == null) {
toastnya('select_bentuk','Bentuk Harus Terpilih');
}
else
{
let segi = JSON.parse(variable_segi);
if (segi[0].segi == '' || segi[0].segi == null || segi[0].fill == '' || segi[0].fill == null || segi[0].stroke == '' || segi[0].stroke == null ) {
toastnya('select_bentuk','Semua Pilihan Harus DIpilih');
}
else
{
let fillnya;
if (segi[0].fill == 'no_color') {
fillnya = 'rgba(0,0,0,0)'
}
else
{
fillnya = segi[0].fill
}
if (segi[0].segi == 'rect') {
segi_empat(fillnya,segi[0].stroke,'segi_empat');
// console.log(segi[0].stroke_width)
}
else if (segi[0].segi == 'tri') {
segi_tiga(fillnya,segi[0].stroke,'segi_tiga');
// console.log(segi[0].stroke_width)
}
else if (segi[0].segi == 'cir') {
segi_lingkaran(fillnya,segi[0].stroke,'lingkaran');
// console.log(segi[0].stroke_width)
}
variable_segi = null;
$("#sini_div_editor").html(null)
document.getElementById("back_to_top").click();
$("#editor_select").val($("#editor_select option:first").val());
}
}
}
function segi_empat(fillnya,stroke,bentuk) {
var rect = new fabric.Rect({
id : idnya,
kategori : bentuk,
angle:0,
left: 400,
top: 350,
fill: fillnya,
width: 200,
height: 200,
// objectCaching: true,
stroke: stroke,
strokeWidth: 10,
// padding : 5
});
let datanya = [{"id" : idnya ,"kategori" : bentuk, "left" : 400 , "top" : 350, "width" : 200 , "height" : 200 , "angle" :0 , "fill" : fillnya , "stroke" : stroke }];
if (save_data == null) {
datanya = JSON.stringify(datanya);
save_data = datanya;
// console.log(JSON.parse(save_data))
}
else
{
save_data = JSON.parse(save_data);
save_data = save_data.concat(datanya)
save_data = JSON.stringify(save_data);
// console.log(JSON.parse(save_data))
// console.log(save_data)
}
canvas.add(rect);
canvas.setActiveObject(rect);
idnya = idnya + 1;
}
function segi_tiga(fillnya,stroke,bentuk) {
var tri = new fabric.Triangle({
id : idnya,
kategori : bentuk,
angle:0,
left: 400,
top: 350,
fill: fillnya,
width: 200,
height: 200,
// objectCaching: true,
stroke: stroke,
strokeWidth: 10,
// padding : 5
});
let datanya = [{"id" : idnya ,"kategori" : bentuk, "left" : 400 , "top" : 350, "width" : 200 , "height" : 200 , "angle" :0 , "fill" : fillnya , "stroke" : stroke }];
if (save_data == null) {
datanya = JSON.stringify(datanya);
save_data = datanya;
// console.log(JSON.parse(save_data))
}
else
{
save_data = JSON.parse(save_data);
save_data = save_data.concat(datanya)
save_data = JSON.stringify(save_data);
// console.log(JSON.parse(save_data))
// console.log(save_data)
}
canvas.add(tri);
canvas.setActiveObject(tri);
idnya = idnya + 1;
}
function segi_lingkaran(fillnya,stroke,bentuk) {
var cir = new fabric.Circle({
id : idnya,
kategori : bentuk,
angle:0,
left: 400,
top: 350,
fill: fillnya,
radius : 200,
// objectCaching: true,
stroke: stroke,
strokeWidth: 10,
// padding : 5
});
let datanya = [{"id" : idnya ,"kategori" : bentuk, "left" : 400 , "top" : 350, "radius" : 200 , "angle" :0 , "fill" : fillnya , "stroke" : stroke }];
if (save_data == null) {
datanya = JSON.stringify(datanya);
save_data = datanya;
// console.log(JSON.parse(save_data))
}
else
{
save_data = JSON.parse(save_data);
save_data = save_data.concat(datanya)
save_data = JSON.stringify(save_data);
// console.log(JSON.parse(save_data))
// console.log(save_data)
}
// console.log(cir);
canvas.add(cir);
canvas.setActiveObject(cir);
idnya = idnya + 1;
}
//// end untuk bentuk persegi ////
//// ini untuk free drawing ////
function free_drawing(kat,nilai){
// console.log(kat,nilai)
let draw;
if (kat == 1) {
drawing_color = nilai;
}
else if (kat == 2) {
drawing_width = nilai;
}
}
function add_drawing(){
// console.log(variable_free_drawing)
if (drawing_color == null) {
toastnya('select_drawing_color','Warna Harus Dipilih');
}
else
{
// console.log("jalankan")
// drawing = JSON.parse(variable_free_drawing)
canvas.isDrawingMode = true;
canvas.freeDrawingBrush.width = drawing_width;
canvas.freeDrawingBrush.color = drawing_color;
// variable_segi = null;
let html = '<div class="form-group" style="text-align:center">'+
'<button onclick="stop_drawing()" class="btn btn-warning" style="font-weight: bold;">Stop Drawing</button>'
'</div>';
$("#sini_div_editor").html(html)
document.getElementById("back_to_top").click();
$("#editor_select").val($("#editor_select option:first").val());
}
}
canvas.on('path:created', function(opt) {
// opt.path is a fabric.Path ready to use and already on the canvas
// console.log(opt.path instanceof fabric.Path)
// this is the path data
// console.log(opt.path);
// console.log(JSON.stringify(opt.path.path));
let path = opt.path.path.map(chunk => {return chunk.join(' ');}).join(' ');
// console.log(opt.path.height)
console.log(opt.path)
let datanya = [{"id" : idnya ,"kategori" : 'free_drawing', "path" : path , "left" : opt.path.left , "top" : opt.path.top, "width" : opt.path.width , "height" : opt.path.height , "stroke_width" : opt.path.strokeWidth , "stroke" : opt.path.stroke }];
console.log(datanya)
opt.path.idnya = fabric.Object.__uid++
opt.path.id = idnya
if (save_data == null) {
datanya = JSON.stringify(datanya);
save_data = datanya;
// console.log(JSON.parse(save_data))
console.log(save_data)
}
else
{
save_data = JSON.parse(save_data);
save_data = save_data.concat(datanya)
save_data = JSON.stringify(save_data);
// console.log(JSON.parse(save_data))
console.log(save_data)
}
idnya = idnya + 1;
});
function stop_drawing(){
canvas.isDrawingMode = false;
$("#sini_div_editor").html(null)
document.getElementById("back_to_top").click();
}
// function hapus_path() {
// canvas.getObjects('path').forEach((path) => {
// // if(path.senderId === client.id){
// canvas.remove(path);
// // }
// });
// }
//// end utk free drawing ////
//// ini utk input teks ////
var teks_inputan = null;
var teks_font = null;
var teks_color = "black";
function teks_input(kat,nilai){
// console.log(kat,nilai)
if (kat == 1) {
teks_inputan = nilai;
}
else if (kat == 2) {
teks_font = nilai;
console.log(teks_font)
}
else if (kat == 3) {
teks_color = nilai;
}
}
function add_teks(){
// console.log(variable_free_drawing)
if (teks_inputan == null) {
toastnya('input_teks','Inputan Harus Terisi');
}
else if (teks_font == null) {
toastnya('select_teks_font','Font Harus Terpilih');
}
else
{
tambah_teks(teks_inputan,teks_color,teks_font)
document.getElementById("back_to_top").click();
}
}
function tambah_teks(input,fill,family){
var text = new fabric.Text(input, {
id : idnya,
fill: fill ,
fontSize: 53,
left: 400,
top: 350,
fontFamily: family,
});
let datanya = [{"id" : idnya ,"kategori" : "teks", "left" : 400 , "top" : 350, "width" : "" , "height" : "200" , "angle" :0 , "fill" : fill , "fontFamily" : family }];
if (save_data == null) {
datanya = JSON.stringify(datanya);
save_data = datanya;
// console.log(JSON.parse(save_data))
}
else
{
save_data = JSON.parse(save_data);
save_data = save_data.concat(datanya)
save_data = JSON.stringify(save_data);
// console.log(JSON.parse(save_data))
// console.log(save_data)
}
// Render the Text on Canvas
canvas.add(text);
canvas.setActiveObject(text);
idnya = idnya + 1;
}
//// end utk input teks ////
canvas.on('object:moved', function(options) {
console.log(options)
// let obj = canvas.getActiveObject();
// let datanya = JSON.parse(save_data);
// let id;
// for (var i = 0; i < datanya.length; ++i) {
// if (datanya[i].id == options['target']['id']) {
// id = i;
// break;
// }
// }
// if (options['target']['kategori'] == 'segi_empat' || options['target']['kategori'] == 'segi_tiga' || options['target']['kategori'] == 'lingkaran') {
// datanya[id].angle = options['target']['angle'];
// datanya[id].height = Math.floor(obj.getScaledHeight());
// datanya[id].left = options['target']['left'];
// datanya[id].top = options['target']['top'];
// datanya[id].width = Math.floor(obj.getScaledWidth());
// }
// save_data = JSON.stringify(datanya);
// // console.log(JSON.parse(save_data) )
// // console.log(save_data)
// // console.log(options['target']['kategori'])
// // simpan(datanya,'update',kategori,id);
});
canvas.on('object:rotated', function(options) {
// console.log(options)
let obj = canvas.getActiveObject();
let datanya = JSON.parse(save_data);
let id;
for (var i = 0; i < datanya.length; ++i) {
if (datanya[i].id == options['target']['id']) {
id = i;
break;
}
}
if (options['target']['kategori'] == 'segi_empat' || options['target']['kategori'] == 'segi_tiga' || options['target']['kategori'] == 'lingkaran') {
datanya[id].angle = options['target']['angle'];
datanya[id].height = Math.floor(obj.getScaledHeight());
datanya[id].left = options['target']['left'];
datanya[id].top = options['target']['top'];
datanya[id].width = Math.floor(obj.getScaledWidth());
}
save_data = JSON.stringify(datanya);
// console.log(JSON.parse(save_data) )
// console.log(save_data)
});
canvas.on('object:scaled', function(options) {
// console.log(options)
let obj = canvas.getActiveObject();
let datanya = JSON.parse(save_data);
let id;
for (var i = 0; i < datanya.length; ++i) {
if (datanya[i].id == options['target']['id']) {
id = i;
break;
}
}
if (options['target']['kategori'] == 'segi_empat' || options['target']['kategori'] == 'segi_tiga' || options['target']['kategori'] == 'lingkaran') {
datanya[id].angle = options['target']['angle'];
datanya[id].height = Math.floor(obj.getScaledHeight());
datanya[id].left = options['target']['left'];
datanya[id].top = options['target']['top'];
datanya[id].width = Math.floor(obj.getScaledWidth());
}
save_data = JSON.stringify(datanya);
// console.log(JSON.parse(save_data) )
// console.log(save_data)
});
canvas.on('selection:created', function(options) {
// console.log(options['target'])
if (options['target']['strokeLineCap'] == 'round' && options['target']['strokeLineJoin'] == 'round') {
// console.log('ini free drawing')
let id = options['target']['idnya']
// console.log("ini idnya : "+id)
let ini_array;
// console.log(canvas['_objects'])
let object_canvas = canvas['_objects'];
for (var i = 0; i < object_canvas.length; i++) {
// console.log(object_canvas[i].idnya)
if (object_canvas[i].idnya == options['target']['idnya']) {
ini_array = i;
break;
}
}
// console.log("ini id array nya : "+ini_array)
canvas['_objects'][ini_array].lockScalingX = true;
canvas['_objects'][ini_array].lockScalingY = true;
canvas['_objects'][ini_array].lockRotation = true;
canvas['_objects'][ini_array].lockMovementX = true;
canvas['_objects'][ini_array].lockMovementY = true;
// this.__canvases.push(canvas);
}
});
canvas.on('selection:updated', function(options) {
// console.log(options['target'])
// console.log(options)
if (options['target']['strokeLineCap'] == 'round' && options['target']['strokeLineJoin'] == 'round') {
// console.log('ini free drawing')
let id = options['target']['idnya']
// console.log("ini idnya : "+id)
let ini_array;
// console.log(canvas['_objects'])
let object_canvas = canvas['_objects'];
for (var i = 0; i < object_canvas.length; i++) {
// console.log(object_canvas[i].idnya)
if (object_canvas[i].idnya == options['target']['idnya']) {
ini_array = i;
break;
}
}
// console.log("ini id array nya : "+ini_array)
canvas['_objects'][ini_array].lockScalingX = true;
canvas['_objects'][ini_array].lockScalingY = true;
canvas['_objects'][ini_array].lockRotation = true;
canvas['_objects'][ini_array].lockMovementX = true;
canvas['_objects'][ini_array].lockMovementY = true;
// this.__canvases.push(canvas);
}
});
// Create a new Text instance
// function cek_warna(e){
// // console.log(e)
// alert(e)
// }

332
www/assets/js/desain_3.js Normal file
View File

@ -0,0 +1,332 @@
/*
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership. The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
// Wait for the deviceready event before using any of Cordova's device APIs.
// See https://cordova.apache.org/docs/en/latest/cordova/events/events.html#deviceready
document.addEventListener('deviceready', onDeviceReady, false);
function onDeviceReady() {
// screen.orientation.lock('potrait');
var i = screen.orientation.lock('portrait');
console.log('Orientation is ' + screen.orientation.type);
}
////// get warna baju //////
function $_GET(param) {
var vars = {};
window.location.href.replace( location.hash, '' ).replace(
/[?&]+([^=&]+)=?([^&]*)?/gi, // regexp
function( m, key, value ) { // callback
vars[key] = value !== undefined ? value : '';
}
);
if ( param ) {
return vars[param] ? vars[param] : null;
}
return vars;
}
var id_desain = $_GET('id');
///// end get warna baju ///////
var list_desain = JSON.parse(localStorage.getItem('simpanan'));
function hapus_desain(){
swal({
title: "Yakin ingin Hapus Desain ini?",
text: "Desain akan terhapus permanen dari aplikasi",
icon: "warning",
buttons: true,
dangerMode: true,
})
.then((logout) => {
if (logout) {
var list_desain_baru = list_desain.filter(function(item){
return item['id'] != id_desain
// console.log(item)
})
// console.log(JSON.stringify(list_desain_baru))
if (JSON.stringify(list_desain_baru) == '[]') {
// console.log("desain tiada")
localStorage.removeItem('simpanan')
window.location.replace("desain_1.html")
}
else
{
localStorage.setItem('simpanan',JSON.stringify(list_desain_baru))
window.location.replace("desain_1.html")
}
}
});
}
// console.log(list_desain)
var baju_color;
var detail_desain;
// console.log(list_desain)
for (var i = 0; i < list_desain.length; i++) {
// console.log(list_desain[i].id);
if (list_desain[i].id == id_desain) {
baju_color = list_desain[i].canvas
detail_desain = list_desain[i].isi;
console.log(detail_desain)
break;
}
}
$("#sini_div_baju_color").attr("style","background-image: url(assets/img/"+baju_color+".PNG); height: 350px; width: 100%;background-size: 100% 100%;");
function toastnya(id,mesej){
toastr.options = {
"closeButton": true,
"debug": false,
"progressBar": true,
"positionClass": "toast-top-right",
"showDuration": "300",
"hideDuration": "1000",
"timeOut": "5000",
"extendedTimeOut": "1000",
"showEasing": "swing",
"hideEasing": "linear",
"showMethod": "fadeIn",
"hideMethod": "fadeOut"
};
toastr.error("<center>"+mesej+"</center>");
$("#"+id).focus();
}
///// responsive canvas /////
function resizeCanvas() {
const outerCanvasContainer = $('#sini_div_canvas')[0];
const ratio = canvas.getWidth() / canvas.getHeight();
const containerWidth = outerCanvasContainer.clientWidth;
const containerHeight = outerCanvasContainer.clientHeight;
const scale = containerWidth / canvas.getWidth();
const zoom = canvas.getZoom() * scale;
canvas.setDimensions({width: containerWidth, height: outerCanvasContainer.clientHeight});
canvas.setViewportTransform([zoom, 0, 0, zoom, 0, 0]);
}
$("#sini_div_canvas").resize(resizeCanvas);
//// end responsive canvas ///
var canvas = this.__canvas = new fabric.Canvas('c',{width: 900,height: 1050});
canvas.renderTop();
resizeCanvas();
for (var i = 0; i < detail_desain.length; ++i) {
// if (detail_desain[i].kategori == 'segi_empat') {
// segi_empat(detail_desain[i].id,detail_desain[i].angle,detail_desain[i].left,detail_desain[i].top,detail_desain[i].fill,detail_desain[i].width,detail_desain[i].heightdetail_desain[i].stroke)
// console.log(detail_desain[i]);
// }
if (detail_desain[i].kategori == "segi_empat") {
// console.log('ada segi empat')
segi_empat(detail_desain[i].id,detail_desain[i].angle,detail_desain[i].left,detail_desain[i].top,detail_desain[i].fill,detail_desain[i].width,detail_desain[i].height,detail_desain[i].stroke)
}
else if (detail_desain[i].kategori == "segi_tiga") {
// console.log('ada segi empat')
segi_tiga(detail_desain[i].id,detail_desain[i].angle,detail_desain[i].left,detail_desain[i].top,detail_desain[i].fill,detail_desain[i].width,detail_desain[i].height,detail_desain[i].stroke)
}
else if (detail_desain[i].kategori == "lingkaran") {
// console.log('ada segi empat')
segi_lingkaran(detail_desain[i].id,detail_desain[i].angle,detail_desain[i].left,detail_desain[i].top,detail_desain[i].fill,detail_desain[i].radius,detail_desain[i].stroke,detail_desain[i].scaleX,detail_desain[i].scaleY)
}
else if (detail_desain[i].kategori == "free_drawing") {
// console.log('ada segi empat')
free_draw(detail_desain[i].id,detail_desain[i].path,detail_desain[i].left,detail_desain[i].top,detail_desain[i].height,detail_desain[i].width,detail_desain[i].stroke_width,detail_desain[i].stroke)
}
else if (detail_desain[i].kategori == "teks") {
// console.log('ada segi empat')
// tambah_teks(id,input,fill,family,top,left,width,height,scaleX,scaleY)
tambah_teks(detail_desain[i].id,detail_desain[i].input_teks,detail_desain[i].fill,detail_desain[i].fontFamily,detail_desain[i].top,detail_desain[i].left,detail_desain[i].width,detail_desain[i].height,detail_desain[i].angle,detail_desain[i].scaleX,detail_desain[i].scaleY)
}
else if (detail_desain[i].kategori == "foto") {
// console.log('ada segi empat')
// add_image(id,base,scaleX,scaleX,left,top,angle)
add_image(detail_desain[i].id,detail_desain[i].detail,detail_desain[i].scaleX,detail_desain[i].scaleY,detail_desain[i].left,detail_desain[i].top,detail_desain[i].angle )
}
}
function add_image(id,base,scaleX,scaleY,left,top,angle){
var x = document.createElement("IMG");
x.setAttribute("src", base);
x.setAttribute("id", 'img_yg_terupload_'+id);
x.async = true;
document.getElementById("sini_tampung_image").appendChild(x);
setTimeout(function(){
var imgElement = document.getElementById('img_yg_terupload_'+id);
var imgInstance = new fabric.Image(imgElement, {
id : id,
left: left,
top: top,
angle: angle,
opacity: 1,
scaleX : scaleX,
scaleY : scaleY
});
canvas.add(imgInstance);
}, 200)
}
function segi_empat(id,angle,left,top,fillnya,width,height,stroke) {
var rect = new fabric.Rect({
id : id,
// kategori : bentuk,
angle:angle,
left: left,
top: top,
fill: fillnya,
width: width,
height: height,
// objectCaching: true,
stroke: stroke,
strokeWidth: 10,
// padding : 5
});
canvas.add(rect);
}
function segi_tiga(id,angle,left,top,fillnya,width,height,stroke) {
var tri = new fabric.Triangle({
id : id,
// kategori : bentuk,
angle:angle,
left: left,
top: top,
fill: fillnya,
width: width,
height: height,
// objectCaching: true,
stroke: stroke,
strokeWidth: 10,
// padding : 5
});
canvas.add(tri);
}
function segi_lingkaran(id,angle,left,top,fillnya,radius,stroke,scaleX,scaleY) {
var cir = new fabric.Circle({
id : id,
angle:angle,
left: left,
top: top,
fill: fillnya,
radius : radius,
// objectCaching: true,
stroke: stroke,
strokeWidth: 10,
scaleX : scaleX,
scaleY : scaleY
// padding : 5
});
// console.log(cir);
canvas.add(cir);
}
function free_draw(id,path,top,left,height,width,stroke_width,stroke){
var garis = new fabric.Path(path);
garis.set({
id : id,
fill: null,
// top: top,
// left: left,
// height: height,
// width: width,
strokeWidth: stroke_width,
stroke: stroke
});
canvas.add(garis);
}
function tambah_teks(id,input,fill,family,top,left,width,height,angle,scaleX,scaleY){
var text = new fabric.Text(input, {
id : id,
angle:angle,
fill: fill ,
fontSize: 100,
left: left,
top: top,
width : width,
height : height,
fontFamily: family,
scaleX : scaleX,
scaleY : scaleY
});
console.log(text)
canvas.add(text);
}
function takeshot() {
var div = document.getElementById('sini_div_baju_color');
// Use the html2canvas
// function to take a screenshot
// and append it
// to the output div
html2canvas(div).then(
function (canvas) {
document
.getElementById('output')
.appendChild(canvas);
var base64URL = canvas.toDataURL('image/jpeg');
console.log(base64URL)
$("#ini_untuk_share").attr('onclick',"window.plugins.socialsharing.share(null, 'Irwan T-Shirt Design', '"+base64URL+"', null)");
var x = document.createElement("IMG");
x.setAttribute("src", base64URL);
x.setAttribute("id", 'img_yg_terupload_'+id_desain);
x.async = true;
document.getElementById("sini_tampung_image").appendChild(x);
setTimeout(function(){
$('#ini_untuk_share').trigger('click');
}, 200);
})
}

3519
www/assets/js/html2canvas.js Normal file
View File

File diff suppressed because it is too large Load Diff

73
www/assets/js/list.js Normal file
View File

@ -0,0 +1,73 @@
/*
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership. The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
// Wait for the deviceready event before using any of Cordova's device APIs.
// See https://cordova.apache.org/docs/en/latest/cordova/events/events.html#deviceready
document.addEventListener('deviceready', onDeviceReady, false);
function onDeviceReady() {
// screen.orientation.lock('potrait');
var i = screen.orientation.lock('portrait');
console.log('Orientation is ' + screen.orientation.type);
}
var list_desain = JSON.parse(localStorage.getItem('simpanan'));
console.log(list_desain)
var html = '';
if (list_desain == null) {
html += '<center><h2 style="font-family: Pacifico">Anda Belum Pernah Mendesain</h2>'
html += '<a href="desain_1.html" class="btn-about" style="font-family: Pacifico">Mulai Mendesain</a></center>'
$("#sini_divnya").html(html)
}
else
{
for (var i = 0; i < list_desain.length; i++) {
ii = i + 1;
var warna;
switch (list_desain[i].canvas){
case "white":
warna = "Putih";
break;
case "black":
warna = "Hitam";
break;
case "red":
warna = "Merah";
break;
case "blue":
warna = "Biru";
break;
case "yellow":
warna = "kuning";
}
html += '<div class="form-group">'+
'<table width="100%">'+
'<tr align="center">'+
'<td><label style="font-size: 16px;font-family: Pacifico">Desain '+ii+'</label></td>'+
'<td><label style="font-size: 16px ; font-family: Pacifico"><i>(Baju '+warna+')</i></label></td>'+
'<td><a href="desain_complete.html?id='+list_desain[i].id+'" class="btn btn-info btn-sm" style="font-family: Pacifico;display: inline-block; ">Lihat Desain</a></td>'+
'</tr>'+
'</table>'+
'</div>'+
'<hr>';
$("#sini_divnya").html(html)
}
}

187
www/assets/js/main.js Normal file
View File

@ -0,0 +1,187 @@
/**
* Template Name: Kelly - v2.0.0
* Template URL: https://bootstrapmade.com/kelly-free-bootstrap-cv-resume-html-template/
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
*/
document.addEventListener('deviceready', onDeviceReady, false);
function onDeviceReady() {
// screen.orientation.lock('potrait');
var i = screen.orientation.lock('portrait');
console.log('Orientation is ' + screen.orientation.type);
}
!(function($) {
"use strict";
// Preloader
$(window).on('load', function() {
if ($('#preloader').length) {
$('#preloader').delay(100).fadeOut('slow', function() {
$(this).remove();
});
}
});
// Smooth scroll for the navigation menu and links with .scrollto classes
$(document).on('click', '.nav-menu a, .mobile-nav a, .scrollto', function(e) {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
if (target.length) {
e.preventDefault();
var scrollto = target.offset().top;
var scrolled = 20;
if ($('#header').length) {
scrollto -= $('#header').outerHeight()
if (!$('#header').hasClass('header-scrolled')) {
scrollto += scrolled;
}
}
if ($(this).attr("href") == '#header') {
scrollto = 0;
}
$('html, body').animate({
scrollTop: scrollto
}, 1500, 'easeInOutExpo');
if ($(this).parents('.nav-menu, .mobile-nav').length) {
$('.nav-menu .active, .mobile-nav .active').removeClass('active');
$(this).closest('li').addClass('active');
}
if ($('body').hasClass('mobile-nav-active')) {
$('body').removeClass('mobile-nav-active');
$('.mobile-nav-toggle i').toggleClass('icofont-navigation-menu icofont-close');
$('.mobile-nav-overly').fadeOut();
}
return false;
}
}
});
// Mobile Navigation
if ($('.nav-menu').length) {
var $mobile_nav = $('.nav-menu').clone().prop({
class: 'mobile-nav d-lg-none'
});
$('body').append($mobile_nav);
$('body').prepend('<button type="button" class="mobile-nav-toggle d-lg-none"><i class="icofont-navigation-menu"></i></button>');
$('body').append('<div class="mobile-nav-overly"></div>');
$(document).on('click', '.mobile-nav-toggle', function(e) {
$('body').toggleClass('mobile-nav-active');
$('.mobile-nav-toggle i').toggleClass('icofont-navigation-menu icofont-close');
$('.mobile-nav-overly').toggle();
});
$(document).on('click', '.mobile-nav .drop-down > a', function(e) {
e.preventDefault();
$(this).next().slideToggle(300);
$(this).parent().toggleClass('active');
});
$(document).click(function(e) {
var container = $(".mobile-nav, .mobile-nav-toggle");
if (!container.is(e.target) && container.has(e.target).length === 0) {
if ($('body').hasClass('mobile-nav-active')) {
$('body').removeClass('mobile-nav-active');
$('.mobile-nav-toggle i').toggleClass('icofont-navigation-menu icofont-close');
$('.mobile-nav-overly').fadeOut();
}
}
});
} else if ($(".mobile-nav, .mobile-nav-toggle").length) {
$(".mobile-nav, .mobile-nav-toggle").hide();
}
// Back to top button
$(window).scroll(function() {
if ($(this).scrollTop() > 100) {
$('.back-to-top').fadeIn('slow');
} else {
$('.back-to-top').fadeOut('slow');
}
});
$('.back-to-top').click(function() {
$('html, body').animate({
scrollTop: 0
}, 1500, 'easeInOutExpo');
return false;
});
// Skills section
$('.skills-content').waypoint(function() {
$('.progress .progress-bar').each(function() {
$(this).css("width", $(this).attr("aria-valuenow") + '%');
});
}, {
offset: '80%'
});
// jQuery counterUp
$('[data-toggle="counter-up"]').counterUp({
delay: 10,
time: 1000
});
// Testimonials carousel (uses the Owl Carousel library)
$(".testimonials-carousel").owlCarousel({
autoplay: true,
dots: true,
loop: true,
items: 1
});
// Porfolio isotope and filter
$(window).on('load', function() {
var portfolioIsotope = $('.portfolio-container').isotope({
itemSelector: '.portfolio-item'
});
$('#portfolio-flters li').on('click', function() {
$("#portfolio-flters li").removeClass('filter-active');
$(this).addClass('filter-active');
portfolioIsotope.isotope({
filter: $(this).data('filter')
});
aos_init();
});
// Initiate venobox (lightbox feature used in portofilo)
$(document).ready(function() {
$('.venobox').venobox({
'share': false
});
});
});
// Portfolio details carousel
$(".portfolio-details-carousel").owlCarousel({
autoplay: true,
dots: true,
loop: true,
items: 1
});
// Init AOS
function aos_init() {
AOS.init({
duration: 1000,
once: true
});
}
$(window).on('load', function() {
aos_init();
});
})(jQuery);