Commit c7e191c8 authored by limingzhe's avatar limingzhe

fix: debug

parent c71b356e
No preview for this file type
......@@ -2,8 +2,6 @@
cocos creator技术框架下的H5互动模板框架脚手架,基于cocos creator实现快速开发基于绘玩云的H5互动课件。
[视频教程传送门](https://www.bilibili.com/video/BV1Dq4y1t7n5/)
# 使用简介
## 前期准备
......@@ -51,30 +49,29 @@ npm start
```
* 打开浏览器:http://staging-teach.ireadabc.com/template_ci/debug
* [点击查看调试视频教程](https://www.bilibili.com/video/BV1Dq4y1t7n5?p=8)
### 真机调试
* 下载模板调试专用app
* 点击右上角齿轮,选择技术选型、调试模式选择“普通”
安卓下载:
http://download-iplayabc.oss-cn-beijing.aliyuncs.com/iDebugABC.apk
![avatar](http://staging-teach.cdn.ireadabc.com/084f2f95-8213-4c5a-8c46-b194819d7677.png)
### 互动模板
* 找到项目根路径下 index.html 文件
* 在引入JS的位置将air.js改为air_online_open.js
* 启动本地服务
iOS下载:
```
npm start
```
由于调试APP没有上架App Store 所以需要先获取手机的UDID 发送给我们的技术支持,加入后才可以扫码下载安装
获取UDID:https://www.pgyer.com/tools/udid
下载iOS: https://www.pgyer.com/gS0X
* 打开浏览器:http://staging-teach.ireadabc.com/template_ci/debug
* 点击右上角齿轮,选择技术选型、调试模式选择“互动”
* 左侧老师、右侧学生
### 真机调试
有时可能需要反复调试一些功能性的问题,与原生APP相关或者手上临时没有设备,我们提供了一个网页版的调试方式
* 下载模板调试专用app
http://staging-openapi.iteachabc.com/api/courseware/v1/middle/debug
http://download-iplayabc.oss-cn-beijing.aliyuncs.com/iDebugABC.apk
![avatar](http://staging-teach.cdn.ireadabc.com/084f2f95-8213-4c5a-8c46-b194819d7677.png)
* 启动本地服务
......@@ -84,12 +81,4 @@ npm start
* 手机和电脑连接同一个Wifi
* 打开调试app,根据提示输入IP地址,点击开始就可以在手机上预览模板了
* 使用 console.log("==调试信息=="); 可以打印日志进行必要的调试
* 点击左上角 “logcat” 可以查看运行日志,(logcat是可以按住拖动的, 所以不用考虑UI遮挡问题)
### 注意事项及常见问题
* 项目里所有文件及文件夹的命名方式要注意不能包含空格、汉字、减号
* 开发者新建的脚本文件(.js/.ts)的文件名必须包含项目名称,例如在 test_01 项目中添加一个脚本文件(如想命名为 hello.ts );则需要命名为 hello_test_01.ts
* 项目里尽量不要使用setTimeout、setInterval等定时器,如果使用了记得在onDestroy中释放掉(onDestroy 是指CocosCreator的生命周期钩子)
* 理论上禁止使用全局变量,因为模板到线上会进行组装,常见问题是一个模板使用多次造成全局变量被读脏
* 使用 this.log("==调试信息=="); 可以打印日志进行必要的调试
\ No newline at end of file
import { asyncDelay, onHomeworkFinish } from "../script/util";
import { MyCocosSceneComponent } from "../script/MyCocosSceneComponent";
const { ccclass, property } = cc._decorator;
@ccclass
export default class SceneComponent extends MyCocosSceneComponent {
addPreloadImage() {
// TODO 根据自己的配置预加载图片资源
this._imageResList.push({ url: this.data.pic_url });
this._imageResList.push({ url: this.data.pic_url_2 });
}
addPreloadAudio() {
// TODO 根据自己的配置预加载音频资源
this._audioResList.push({ url: this.data.audio_url });
}
addPreloadAnima() {
}
async onLoadEnd() {
// TODO 加载完成后的逻辑写在这里, 下面的代码仅供参考
this.initData();
this.initView();
this.initListener();
}
_cantouch = null;
initData() {
// 所有全局变量 默认都是null
this._cantouch = true;
}
initView() {
this.initBg();
this.initPic();
this.initBtn();
this.initIcon();
}
initBg() {
const bgNode = cc.find('Canvas/bg');
bgNode.scale = this._mapScaleMax;
}
pic1 = null;
pic2 = null;
initPic() {
const canvas = cc.find('Canvas');
const maxW = canvas.width * 0.7;
this.getSprNodeByUrl(this.data.pic_url, (sprNode) => {
const picNode1 = sprNode;
picNode1.scale = maxW / picNode1.width;
picNode1.baseX = picNode1.x;
canvas.addChild(picNode1);
this.pic1 = picNode1;
const labelNode = new cc.Node();
labelNode.color = cc.Color.YELLOW;
const label = labelNode.addComponent(cc.Label);
label.string = this.data.text;
label.fontSize = 60;
label.lineHeight = 60;
label.font = cc.find('Canvas/res/font/BRLNSDB').getComponent('cc.Label').font;
picNode1.addChild(labelNode);
});
this.getSprNodeByUrl(this.data.pic_url_2, (sprNode) => {
const picNode2 = sprNode;
picNode2.scale = maxW / picNode2.width;
canvas.addChild(picNode2);
picNode2.x = canvas.width;
picNode2.baseX = picNode2.x;
this.pic2 = picNode2;
const labelNode = new cc.Node();
const label = labelNode.addComponent(cc.RichText);
const size = 60
label.font = cc.find('Canvas/res/font/BRLNSDB').getComponent(cc.Label).font;
label.string = `<outline color=#751e00 width=4><size=${size}><color=#ffffff>${this.data.text}</color></size></outline>`
label.lineHeight = size;
picNode2.addChild(labelNode);
});
}
initIcon() {
const iconNode = this.getSprNode('icon');
iconNode.zIndex = 5;
iconNode.anchorX = 1;
iconNode.anchorY = 1;
iconNode.parent = cc.find('Canvas');
iconNode.x = iconNode.parent.width / 2 - 10;
iconNode.y = iconNode.parent.height / 2 - 10;
iconNode.on(cc.Node.EventType.TOUCH_START, () => {
this.playAudioByUrl(this.data.audio_url);
})
}
curPage = null;
initBtn() {
this.curPage = 0;
const bottomPart = cc.find('Canvas/bottomPart');
bottomPart.zIndex = 5; // 提高层级
bottomPart.x = bottomPart.parent.width / 2;
bottomPart.y = -bottomPart.parent.height / 2;
const leftBtnNode = bottomPart.getChildByName('btn_left');
//节点中添加了button组件 则可以添加click事件监听
leftBtnNode.on('click', () => {
if (!this._cantouch) {
return;
}
if (this.curPage == 0) {
return;
}
this.curPage = 0
this.leftMove();
this.playLocalAudio('btn');
})
const rightBtnNode = bottomPart.getChildByName('btn_right');
//节点中添加了button组件 则可以添加click事件监听
rightBtnNode.on('click', () => {
if (!this._cantouch) {
return;
}
if (this.curPage == 1) {
return;
}
this.curPage = 1
this.rightMove();
// 游戏结束时需要调用这个方法通知系统作业完成
onHomeworkFinish();
this.playLocalAudio('btn');
})
}
leftMove() {
this._cantouch = false;
const len = this.pic1.parent.width;
cc.tween(this.pic1)
.to(1, { x: this.pic1.baseX }, { easing: 'cubicInOut' })
.start();
cc.tween(this.pic2)
.to(1, { x: this.pic2.baseX }, { easing: 'cubicInOut' })
.call(() => {
this._cantouch = true;
})
.start();
}
rightMove() {
this._cantouch = false;
const len = this.pic1.parent.width;
cc.tween(this.pic1)
.to(1, { x: this.pic1.baseX - len }, { easing: 'cubicInOut' })
.start();
cc.tween(this.pic2)
.to(1, { x: this.pic2.baseX - len }, { easing: 'cubicInOut' })
.call(() => {
this._cantouch = true;
})
.start();
}
// update (dt) {},
initListener() {
}
playLocalAudio(audioName) {
const audio = cc.find(`Canvas/res/audio/${audioName}`).getComponent(cc.AudioSource);
return new Promise((resolve, reject) => {
const id = cc.audioEngine.playEffect(audio.clip, false);
cc.audioEngine.setFinishCallback(id, () => {
resolve(id);
});
})
}
}
{
"ver": "1.0.8",
"uuid": "408a67f8-65fa-4cf1-8cf2-83e20e1a0fd5",
"isPlugin": false,
"loadPluginInWeb": true,
"loadPluginInNative": true,
"loadPluginInEditor": false,
"subMetas": {}
}
\ No newline at end of file
import { defaultData } from "../script/defaultData";
export class MyCocosSceneComponent extends cc.Component {
// 生命周期 onLoad
onLoad() {
this.initSceneData();
this.initSize();
}
_imageResList = null;
_audioResList = null;
_animaResList = null;
initSceneData() {
this._imageResList = [];
this._audioResList = [];
this._animaResList = [];
}
_designSize = null; // 设计分辨率
_frameSize = null; // 屏幕分辨率
_mapScaleMin = null; // 场景中常用缩放(取大值)
_mapScaleMax = null; // 场景中常用缩放(取小值)
_cocosScale = null; // cocos 自缩放 (较少用到)
initSize() {
// 注意cc.winSize只有在适配后(修改fitHeight/fitWidth后)才能获取到正确的值,因此使用cc.getFrameSize()来获取初始的屏幕大小
let screen_size = cc.view.getFrameSize().width / cc.view.getFrameSize().height
let design_size = cc.Canvas.instance.designResolution.width / cc.Canvas.instance.designResolution.height
let f = screen_size >= design_size
cc.Canvas.instance.fitHeight = f
cc.Canvas.instance.fitWidth = !f
const frameSize = cc.view.getFrameSize();
this._frameSize = frameSize;
this._designSize = cc.view.getDesignResolutionSize();
let sx = cc.winSize.width / frameSize.width;
let sy = cc.winSize.height / frameSize.height;
this._cocosScale = Math.min(sx, sy);
sx = frameSize.width / this._designSize.width;
sy = frameSize.height / this._designSize.height;
this._mapScaleMin = Math.min(sx, sy) * this._cocosScale;
this._mapScaleMax = Math.max(sx, sy) * this._cocosScale;
cc.director['_scene'].width = frameSize.width;
cc.director['_scene'].height = frameSize.height;
}
data = null;
// 生命周期 start
start() {
if (window && (<any>window).courseware && (<any>window).courseware.getData) {
(<any>window).courseware.getData((data) => {
this.log('data:' + data);
this.data = data || this.getDefaultData();
this.data = JSON.parse(JSON.stringify(this.data));
this.preloadItem();
})
} else {
this.data = this.getDefaultData();
this.preloadItem();
}
}
getDefaultData() {
return defaultData;
}
preloadItem() {
this.addPreloadImage();
this.addPreloadAudio();
this.addPreloadAnima();
this.preload();
}
addPreloadImage() {
}
addPreloadAudio() {
}
addPreloadAnima() {
}
preload() {
const preloadArr = this._imageResList.concat(this._audioResList).concat(this._animaResList);
cc.assetManager.preloadAny(preloadArr, null, null, async (err, data) => {
if (window && window["air"]) {
// window["air"].onCourseInScreen = (next) => {
// window["air"].isCourseInScreen = true;
// this.onLoadEnd();
// next();
// };
await this.onLoadEnd();
window["air"].hideAirClassLoading();
} else {
await this.onLoadEnd();
}
cc.debug.setDisplayStats(false);
});
}
log (str) {
const node = cc.find('middleLayer');
if(node){
node.getComponent('middleLayer').log(str);
}else{
console.log(str);
}
}
async onLoadEnd() {
}
// ------------------------------------------------
getSprNode(resName) {
const sf = cc.find('Canvas/res/img/' + resName).getComponent(cc.Sprite).spriteFrame;
const node = new cc.Node();
node.addComponent(cc.Sprite).spriteFrame = sf;
return node;
}
getSpriteFrimeByUrl(url, cb) {
cc.loader.load({ url }, (err, img) => {
const spriteFrame = new cc.SpriteFrame(img)
if (cb) {
cb(spriteFrame);
}
})
}
getSprNodeByUrl(url, cb) {
const node = new cc.Node();
const spr = node.addComponent(cc.Sprite);
this.getSpriteFrimeByUrl(url, (sf) => {
spr.spriteFrame = sf;
if (cb) {
cb(node);
}
})
}
playAudioByUrl(audio_url, cb = null) {
if (audio_url) {
cc.assetManager.loadRemote(audio_url, (err, audioClip) => {
const audioId = cc.audioEngine.play(audioClip, false, 0.8);
if (cb) {
cc.audioEngine.setFinishCallback(audioId, () => {
cb();
});
}
});
}else{
cb && cb();
}
}
}
\ No newline at end of file
export const defaultData = {
"pic_url": "http://staging-teach.cdn.ireadabc.com/ed94332a503c31e0908bd4c6923a2665.png",
"pic_url_2": "http://staging-teach.cdn.ireadabc.com/5fb60317ade0195d35ad8034d5370a7f.png",
"text": "This is a test label.",
"audio_url": "http://staging-teach.cdn.ireadabc.com/f47f1d7b5c160fe1c59500d180346240.mp3"
}
\ No newline at end of file
{
"ver": "2.3.5",
"uuid": "18d07592-51a9-421e-8972-0f67b68d29e1",
"type": "sprite",
"wrapMode": "clamp",
"filterMode": "bilinear",
"premultiplyAlpha": false,
"genMipmaps": false,
"packable": true,
"width": 144,
"height": 144,
"platformSettings": {},
"subMetas": {
"icon": {
"ver": "1.0.4",
"uuid": "6fbc30a8-3c49-44ae-8ba4-7f56f385b78a",
"rawTextureUuid": "18d07592-51a9-421e-8972-0f67b68d29e1",
"trimType": "auto",
"trimThreshold": 1,
"rotated": false,
"offsetX": 0,
"offsetY": -0.5,
"trimX": 3,
"trimY": 2,
"width": 138,
"height": 141,
"rawWidth": 144,
"rawHeight": 144,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 0,
"borderRight": 0,
"subMetas": {}
}
}
}
\ No newline at end of file
// Learn TypeScript:
// - https://docs.cocos.com/creator/manual/en/scripting/typescript.html
// Learn Attribute:
// - https://docs.cocos.com/creator/manual/en/scripting/reference/attributes.html
// Learn life-cycle callbacks:
// - https://docs.cocos.com/creator/manual/en/scripting/life-cycle-callbacks.html
const {ccclass, property} = cc._decorator;
@ccclass
export default class NewClass extends cc.Component {
@property(cc.Label)
label: cc.Label = null;
@property
text: string = 'hello';
// LIFE-CYCLE CALLBACKS:
// onLoad () {}
start () {
}
// update (dt) {}
}
{
"ver": "1.0.8",
"uuid": "f8b451ff-857c-4ca8-9870-866bc5154a29",
"uuid": "9d11d90b-6323-43f3-833d-7c491761e70e",
"isPlugin": false,
"loadPluginInWeb": true,
"loadPluginInNative": true,
......
const { ccclass, property } = cc._decorator;
@ccclass
export default class middleLayer extends cc.Component {
syllabus_id;
getData(callBack) {
const uri = 'syllabus/v1/getdata';
const data = {
syllabusid: this.syllabus_id
};
console.log("this.syllabus_id: ", this.syllabus_id);
console.log("this.baseUrl: ", this.baseUrl);
console.log('data = ' + JSON.stringify(data));
this.callNetworkApiGet(uri, data, callBack);
}
role;
baseUrl;
homework_id;
token;
onHomeworkFinish(callBack) {
if (this.role == 'teacher') {
return;
}
const uri = 'app_source/v1/student/homework/finished';
const data = {
syllabus_id: this.syllabus_id,
homework_id: this.homework_id,
token: this.token,
score: 0
};
console.log('data = ' + JSON.stringify(data));
this.callNetworkApiPost(uri, data, callBack);
if (this.homework_id == -1) {
return;
}
const btnBg = cc.find('middleLayer/btnBg');
btnBg.active = true;
}
callNetworkApiGet(uri, data, callBack) {
let queryStr = '?';
for (const key in data) {
if (Object.hasOwnProperty.call(data, key)) {
const value = data[key];
queryStr += `${key}=${value}`;
}
}
const xhr = new XMLHttpRequest();
xhr.onreadystatechange = () => {
if (xhr.readyState == 4 && (xhr.status >= 200 && xhr.status < 400)) {
const responseData = JSON.parse(xhr.responseText);
callBack(JSON.parse(responseData.data));
}
};
const url = `${this.baseUrl}${uri}${queryStr}`;
console.log('url = ' + url);
xhr.open('GET', url, true);
xhr.send();
}
callNetworkApiPost(uri, data, callBack) {
const xhr = new XMLHttpRequest();
const url = `${this.baseUrl}${uri}`;
xhr.open("POST", url, true);
xhr.setRequestHeader('content-type', 'application/json');
xhr.onreadystatechange = () => {
if (xhr.readyState == 4) {
callBack(JSON.parse(xhr.responseText));
}
}
xhr.send(JSON.stringify(data));
}
start() {
this.node.zIndex = 9999;
this.showWaitingLetters();
cc.game.addPersistRootNode(this.node);
this.initListener();
const jsonStr = this.callNativeFunction({ name: 'loadScene', value: '' });
const {
sceneName,
version,
bondleUrl,
token,
baseUrl,
homework_id,
syllabus_id,
role
} = JSON.parse(jsonStr);
this.baseUrl = baseUrl;
this.token = token;
this.homework_id = homework_id;
this.syllabus_id = syllabus_id;
this.role = role;
cc.assetManager.loadBundle(bondleUrl, { version: version }, (err, bundle) => {
if (err) {
return console.error(err);
}
bundle.loadScene(sceneName, (err, scene) => {
this.hideWaitingLetters();
cc.director.runScene(scene);
});
});
}
initListener() {
const exitBtn = this.node.getChildByName('ExitBtn');
exitBtn.on('click', () => {
const sprite = exitBtn.getChildByName('sprite');
cc.tween(sprite)
.to(0.1, { scaleX: 0.9, scaleY: 1.1 })
.to(0.1, { scaleX: 1.1, scaleY: 0.9 })
.to(0.1, { scaleX: 1, scaleY: 1 })
.call(() => {
cc.game.removePersistRootNode(this.node);
cc.director.loadScene("emptyScene", () => {
this.callNativeFunction({ name: 'exit', value: '' });
});
})
.start();
});
const btnLast = cc.find('middleLayer/btnBg/btnLast');
btnLast['canClick'] = true;
btnLast.on('click', () => {
if (!btnLast['canClick']) {
return;
}
btnLast['canClick'] = false;
cc.tween(btnLast)
.to(0.1, { scaleX: 0.9, scaleY: 1.1 })
.to(0.1, { scaleX: 1.1, scaleY: 0.9 })
.to(0.1, { scaleX: 1, scaleY: 1 })
.call(() => {
btnLast['canClick'] = true;
const paramStr = JSON.stringify({});
if (cc.sys.isNative && cc.sys.os == cc.sys.OS_IOS) {
return jsb.reflection.callStaticMethod('CocosMng', 'previousPage:', paramStr);
} else if (cc.sys.isNative && cc.sys.os == cc.sys.OS_ANDROID) {
return jsb.reflection.callStaticMethod('com/iplayabc/cocos/AppActivity', 'previousPage', '(Ljava/lang/String;)Ljava/lang/String;', paramStr);
} else {
console.error('非源生环境');
}
})
.start();
});
const btnNext = cc.find('middleLayer/btnBg/btnNext');
btnNext['canClick'] = true;
btnNext.on('click', () => {
if (!btnNext['canClick']) {
return;
}
btnNext['canClick'] = false;
cc.tween(btnNext)
.to(0.1, { scaleX: 0.9, scaleY: 1.1 })
.to(0.1, { scaleX: 1.1, scaleY: 0.9 })
.to(0.1, { scaleX: 1, scaleY: 1 })
.call(() => {
btnNext['canClick'] = true;
const paramStr = JSON.stringify({});
if (cc.sys.isNative && cc.sys.os == cc.sys.OS_IOS) {
return jsb.reflection.callStaticMethod('CocosMng', 'nextPage:', paramStr);
} else if (cc.sys.isNative && cc.sys.os == cc.sys.OS_ANDROID) {
return jsb.reflection.callStaticMethod('com/iplayabc/cocos/AppActivity', 'nextPage', '(Ljava/lang/String;)Ljava/lang/String;', paramStr);
} else {
console.error('非源生环境');
}
})
.start();
});
}
callNativeFunction(param) {
const paramStr = JSON.stringify(param);
if (cc.sys.isNative && cc.sys.os == cc.sys.OS_IOS) {
return jsb.reflection.callStaticMethod('CocosMng', 'cocosWithNativeProtocol:', paramStr);
} else if (cc.sys.isNative && cc.sys.os == cc.sys.OS_ANDROID) {
return jsb.reflection.callStaticMethod('com/iplayabc/cocos/AppActivity', 'cocosWithNativeProtocol', '(Ljava/lang/String;)Ljava/lang/String;', paramStr);
} else {
throw ('非源生环境');
}
}
showWaitingLetters() {
const colorList = this.getRainbowColorList();
const layout = cc.find('middleLayer/layout');
layout.active = true;
const str = 'Now Loading...';
str.split('').forEach((word, idx) => {
const node = new cc.Node();
const label = node.addComponent(cc.Label);
label.string = word;
node.parent = layout;
node.color = colorList[idx];
cc.tween(node)
.delay(idx / 4)
.by(0.3, { y: 50 }, { easing: 'sineOut' })
.by(0.3, { y: -50 }, { easing: 'sineIn' })
.delay((str.length - idx) / 4)
.union()
.repeatForever()
.start();
});
const totalWidth = layout.children.reduce((width, node, idx) => {
return width + node.width;
}, 0);
layout.width = totalWidth;
}
hideWaitingLetters() {
const layout = cc.find('middleLayer/layout');
layout.active = false;
}
logList = null;
showLog(str) {
if (!this.logList) {
this.logList = [];
}
this.logList.push(str);
console.log(str);
if (this.logList.length == 1) {
this.showOneLog();
}
}
showOneLog() {
const str = this.logList[0];
if (str === undefined) {
return;
}
const node = new cc.Node();
node.anchorX = 0.5;
const label = node.addComponent(cc.RichText);
label.string = `<outline color=black width=3>${str}</outline>`;
label.maxWidth = this.node.width / 2;
node.x = this.node.width / 4;
node.y = -this.node.height / 2;
node.parent = this.node;
cc.tween(node)
.to(5, { y: this.node.height })
.removeSelf()
.start();
setTimeout(() => {
this.logList.shift();
this.showOneLog();
}, 1000);
}
getRainbowColorList() {
return [
cc.color(255, 0, 0),
cc.color(255, 128, 0),
cc.color(255, 255, 0),
cc.color(255, 255, 0),
cc.color(128, 255, 0),
cc.color(0, 255, 0),
cc.color(0, 255, 128),
cc.color(0, 255, 255),
cc.color(0, 128, 255),
cc.color(0, 0, 255),
cc.color(128, 0, 255),
cc.color(255, 0, 255),
cc.color(255, 0, 128),
cc.color(255, 0, 0),
];
}
}
{
"ver": "1.0.8",
"uuid": "c41b0e51-55d7-443c-af3a-b22c3dd9b9e5",
"uuid": "c7a121a7-92a9-440e-a7e9-d4f5141e3f45",
"isPlugin": false,
"loadPluginInWeb": true,
"loadPluginInNative": true,
......
......@@ -177,85 +177,15 @@ export function playAudio(audioClip, cb = null) {
export async function asyncDelay(time) {
return new Promise((resolve, reject) => {
try {
cc.tween(cc.find('Canvas'))
.delay(time)
.call(()=>{
setTimeout(() => {
resolve(null);
})
.start();
}, time * 1000);
} catch (e) {
reject(e);
}
})
}
export async function asyncLoadDragonBoneAnime(node, { skeJsonData: { url: skeJsonDataUrl }, texJsonData: { url: texJsonDataUrl }, texPngData: { url: texPngDataUrl } }) {
if (!texPngDataUrl || !texJsonDataUrl || !texPngDataUrl
|| texPngDataUrl == '' || texJsonDataUrl == '' || texPngDataUrl == '') {
return;
}
return new Promise((resolve, reject) => {
if (node.animaNode) {
node.animaNode.removeFromParent();
}
const animaNode = new cc.Node();
animaNode.name = 'animaNode';
animaNode.parent = node;
animaNode.active = true;
node.animaNode = animaNode;
const dragonDisplay = animaNode.addComponent(dragonBones.ArmatureDisplay);
const loadTexture = new Promise((resolve, reject) => {
cc.assetManager.loadRemote(texPngDataUrl, (error, texture) => {
if (error) {
reject(error);
}
resolve(texture);
});
});
const loadTexJsonData = new Promise((resolve, reject) => {
cc.assetManager.loadAny({ url: texJsonDataUrl }, (error, atlasJson) => {
if (error) {
reject(error);
}
resolve(atlasJson);
});
});
const loadSkeJsonData = new Promise((resolve, reject) => {
cc.assetManager.loadAny({ url: skeJsonDataUrl }, (error, dragonBonesJson) => {
if (error) {
reject(error);
}
resolve(dragonBonesJson);
});
});
Promise.all([loadTexture, loadTexJsonData, loadSkeJsonData]).then(([texture, atlasJson, dragonBonesJson]) => {
const atlas = new dragonBones.DragonBonesAtlasAsset();
atlas.atlasJson = JSON.stringify(atlasJson);
atlas.texture = texture;
const asset = new dragonBones.DragonBonesAsset();
asset.dragonBonesJson = JSON.stringify(dragonBonesJson);
dragonDisplay.dragonAtlasAsset = atlas;
dragonDisplay.dragonAsset = asset;
let armatureNames = dragonBonesJson.armature.map(data => data.name);
if (armatureNames.length > 0) {
dragonDisplay.armatureName = armatureNames[0];
}
resolve(animaNode);
});
});
}
export class FireworkSettings {
baseNode; // 父节点
nodeList; // 火花节点的array
......@@ -411,65 +341,14 @@ export function showTrebleFirework(baseNode, rabbonList) {
showFireworks(right);
}
export function httpHeadCall(requsetUrl: string, callback) {
let xhr = new XMLHttpRequest();
console.log("Status: Send Post Request to " + requsetUrl);
try {
xhr.onreadystatechange = () => {
try {
console.log('xhr.readyState: ', xhr.readyState);
if (xhr.readyState == 4) {
if ((xhr.status >= 200 && xhr.status < 400)) {
callback(true);
} else {
callback(false);
}
}
} catch (e) {
console.log(e)
}
};
xhr.open("HEAD", requsetUrl, true);
xhr.send();
xhr.timeout = 15000;
xhr.onerror = (e) => {
callback(false);
};
xhr.ontimeout = (e) => {
callback(false);
};
} catch (e) {
console.log("Send Get Request error: ", e);
}
}
export function onHomeworkFinish(data = "", callback = ()=>{}) {
export function onHomeworkFinish() {
const middleLayer = cc.find('middleLayer');
if (middleLayer) {
const middleLayerComponent = middleLayer.getComponent('middleLayer');
middleLayerComponent.onHomeworkFinish(callback, data);
} else {
console.log('onHomeworkFinish', JSON.stringify(data));
if (middleLayerComponent.role == 'student') {
middleLayerComponent.onHomeworkFinish(() => { });
}
}
export function callMiddleLayerFunction(apiName: string, data: any, callback: Function) {
const middleLayer = cc.find('middleLayer');
if (middleLayer) {
const middleLayerComponent = middleLayer.getComponent('middleLayer');
middleLayerComponent.callMiddleLayerFunction(apiName, data, callback);
} else {
console.log('callMiddleLayerFunction: ' + apiName);
console.log('onHomeworkFinish');
}
}
\ No newline at end of file
export function showTips(tips) {
const middleLayer = cc.find('middleLayer');
if (middleLayer) {
middleLayer.getComponent('middleLayer').showTips(tips);
} else {
console.log(tips);
}
}
{
"ver": "2.3.5",
"uuid": "9a79969a-0506-48d4-bc98-3c05d109b027",
"uuid": "85f6015e-a4a1-4657-b9cc-d3416d6f83b7",
"type": "sprite",
"wrapMode": "clamp",
"filterMode": "bilinear",
"premultiplyAlpha": false,
"genMipmaps": false,
"packable": true,
"width": 61,
"height": 67,
"width": 73,
"height": 77,
"platformSettings": {},
"subMetas": {
"btn_left": {
"Btn": {
"ver": "1.0.4",
"uuid": "ce19457d-e8f3-4c38-ae3e-d4b99208ddb5",
"rawTextureUuid": "9a79969a-0506-48d4-bc98-3c05d109b027",
"uuid": "739a5b2c-f5a3-417c-9102-5c10cf2fbf39",
"rawTextureUuid": "85f6015e-a4a1-4657-b9cc-d3416d6f83b7",
"trimType": "auto",
"trimThreshold": 1,
"rotated": false,
......@@ -22,10 +22,10 @@
"offsetY": 0,
"trimX": 0,
"trimY": 0,
"width": 61,
"height": 67,
"rawWidth": 61,
"rawHeight": 67,
"width": 73,
"height": 77,
"rawWidth": 73,
"rawHeight": 77,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 0,
......
{
"ver": "2.3.5",
"uuid": "e1b4d971-9876-4832-803a-5a321964a78b",
"uuid": "89e1cbbf-a096-4d31-b3a2-a5c84009d26b",
"type": "sprite",
"wrapMode": "clamp",
"filterMode": "bilinear",
"premultiplyAlpha": false,
"genMipmaps": false,
"packable": true,
"width": 1280,
"height": 720,
"width": 416,
"height": 131,
"platformSettings": {},
"subMetas": {
"bg": {
"ver": "1.0.4",
"uuid": "8288e3d4-4c75-4b27-8f01-f7014417f4dd",
"rawTextureUuid": "e1b4d971-9876-4832-803a-5a321964a78b",
"uuid": "126a1b5a-3af8-498b-8d56-6afefeea3cb2",
"rawTextureUuid": "89e1cbbf-a096-4d31-b3a2-a5c84009d26b",
"trimType": "auto",
"trimThreshold": 1,
"rotated": false,
......@@ -22,10 +22,10 @@
"offsetY": 0,
"trimX": 0,
"trimY": 0,
"width": 1280,
"height": 720,
"rawWidth": 1280,
"rawHeight": 720,
"width": 416,
"height": 131,
"rawWidth": 416,
"rawHeight": 131,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 0,
......
{
"ver": "2.3.5",
"uuid": "efa5fa09-a4dd-4bfc-ab7e-17c19f85408f",
"uuid": "57d87163-6607-400e-a306-35b94dca3e64",
"type": "sprite",
"wrapMode": "clamp",
"filterMode": "bilinear",
"premultiplyAlpha": false,
"genMipmaps": false,
"packable": true,
"width": 366,
"height": 336,
"width": 50,
"height": 106,
"platformSettings": {},
"subMetas": {
"1orange": {
"btn_last": {
"ver": "1.0.4",
"uuid": "43d1e79d-6de8-4dcb-b8ce-d767df7913aa",
"rawTextureUuid": "efa5fa09-a4dd-4bfc-ab7e-17c19f85408f",
"uuid": "3d69c061-b4ba-43b5-9030-73c48675b2f6",
"rawTextureUuid": "57d87163-6607-400e-a306-35b94dca3e64",
"trimType": "auto",
"trimThreshold": 1,
"rotated": false,
"offsetX": 0,
"offsetY": -0.5,
"offsetY": 0,
"trimX": 0,
"trimY": 1,
"width": 366,
"height": 335,
"rawWidth": 366,
"rawHeight": 336,
"trimY": 0,
"width": 50,
"height": 106,
"rawWidth": 50,
"rawHeight": 106,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 0,
......
{
"ver": "2.3.5",
"uuid": "d582359e-924e-4ee9-9964-1fc4bb417e71",
"uuid": "fae74f6d-28e7-4a7a-bb36-8ff0a6a9f4df",
"type": "sprite",
"wrapMode": "clamp",
"filterMode": "bilinear",
"premultiplyAlpha": false,
"genMipmaps": false,
"packable": true,
"width": 61,
"height": 67,
"width": 50,
"height": 106,
"platformSettings": {},
"subMetas": {
"btn_right": {
"btn_next": {
"ver": "1.0.4",
"uuid": "e5a2dbaa-a677-4a32-90d7-a1b057d7fb59",
"rawTextureUuid": "d582359e-924e-4ee9-9964-1fc4bb417e71",
"uuid": "f57e2163-758a-4494-b874-128450c62a5f",
"rawTextureUuid": "fae74f6d-28e7-4a7a-bb36-8ff0a6a9f4df",
"trimType": "auto",
"trimThreshold": 1,
"rotated": false,
"offsetX": -0.5,
"offsetY": 0.5,
"offsetX": 0,
"offsetY": 0,
"trimX": 0,
"trimY": 0,
"width": 60,
"height": 66,
"rawWidth": 61,
"rawHeight": 67,
"width": 50,
"height": 106,
"rawWidth": 50,
"rawHeight": 106,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 0,
......
......@@ -128,10 +128,10 @@ async function buildWebBundle() {
await buildCocos(args);
}
function createConfigFile(projectName, type) {
function createConfigFile (projectName, type) {
let iosVersion = "";
let androidVersion = "";
if (!type) {
if(!type){
const androidPaths = fs.readdirSync(`dist/android/${projectName}`);
const androidConfigFileName = androidPaths.find(path => path.indexOf('config') == 0);
androidVersion = androidConfigFileName.split('.')[1];
......@@ -139,11 +139,11 @@ function createConfigFile(projectName, type) {
const iosConfigFileName = iosPaths.find(path => path.indexOf('config') == 0);
iosVersion = iosConfigFileName.split('.')[1];
} else {
if (type == "android") {
if(type=="android"){
const androidPaths = fs.readdirSync(`dist/android/${projectName}`);
const androidConfigFileName = androidPaths.find(path => path.indexOf('config') == 0);
androidVersion = androidConfigFileName.split('.')[1];
} else {
}else{
const iosPaths = fs.readdirSync(`dist/ios/${projectName}`);
const iosConfigFileName = iosPaths.find(path => path.indexOf('config') == 0);
iosVersion = iosConfigFileName.split('.')[1];
......@@ -164,7 +164,7 @@ function createConfigFile(projectName, type) {
fs.writeFileSync('dist/config.json', JSON.stringify(config));
}
function compressAll(projectName) {
function compressAll (projectName) {
const tarStream = new compressing.zip.Stream();
tarStream.addEntry('dist/play');
tarStream.addEntry('dist/form');
......@@ -176,7 +176,7 @@ function compressAll(projectName) {
tarStream.pipe(destStream);
}
function build_check() {
function build_check () {
const dirNames = process.cwd().split(/\/|\\/);
const projectName = dirNames[dirNames.length - 1];
const path = 'assets'
......@@ -211,22 +211,58 @@ function build_check() {
return projectName;
}
function changeSettingToWebDesktop() {
function changeSettingToWebDesktop () {
const path = 'assets'
const folderName = getFolderName(path);
editFolderMeta(path, folderName, false);
}
function changeSettingsToBundle() {
function changeSettingsToBundle () {
const path = 'assets'
const folderName = getFolderName(path);
editFolderMeta(path, folderName, true);
}
async function replaceUuids() {
function replaceUuids () {
console.log('build_step_0 开始~!');
const path = 'assets'
function getFolderName(path) {
let folderName = '';
fs.readdirSync(path).find(fileName => {
const st = fs.statSync(`${path}/${fileName}`);
if (st.isDirectory()) {
folderName = fileName;
}
});
return folderName;
}
const folderName = getFolderName(path);
let oldFireUuid = '';
let oldJsUuid = '';
let oldJsShortUuid = '';
let oldJsId = '';
const fireMetaStr = fs.readFileSync(`assets/${folderName}/scene/${folderName}.fire.meta`);
if (fireMetaStr.indexOf('57ea7c61-9b8b-498a-b024-c98ee9124beb') > 0) {
// 老Cocos脚手架
oldFireUuid = '57ea7c61-9b8b-498a-b024-c98ee9124beb';
oldJsUuid = 'f4ede462-f8d7-4069-ba80-915611c058ca';
oldJsShortUuid = 'f4edeRi+NdAabqAkVYRwFjK';
oldJsId = 'e687yyoRBIzZAOVRL8Sseh';
}
if (fireMetaStr.indexOf('0737ce42-24f0-45c6-8e1a-8bdab4f74ba3') > 0) {
// 新Cocos脚手架
oldFireUuid = '0737ce42-24f0-45c6-8e1a-8bdab4f74ba3';
oldJsUuid = '408a67f8-65fa-4cf1-8cf2-83e20e1a0fd5';
oldJsShortUuid = '408a6f4ZfpM8Yzyg+IOGg/V';
oldJsId = 'eaTVUpqahPfZeO9+sUI7RP';
}
if (oldFireUuid === '') {
return;
}
function editFolderMeta(path, folderName) {
const metaPath = `${path}/${folderName}.meta`;
const metaDataStr = fs.readFileSync(metaPath);
......@@ -238,6 +274,7 @@ async function replaceUuids() {
if (!fs.existsSync(path)) {
return;
}
const fileStr = fs.readFileSync(path);
const newFileStr = fileStr.toString().replace(new RegExp(replaceStr.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), 'g'), newStr);
fs.writeFileSync(path, newFileStr);
......@@ -247,92 +284,26 @@ async function replaceUuids() {
return uuid.substring(0, 5) + Base64.fromUint8Array(bytes).substring(2);
}
const path = 'assets'
function getFolderName(path) {
let folderName = '';
fs.readdirSync(path).find(fileName => {
const st = fs.statSync(`${path}/${fileName}`);
if (st.isDirectory()) {
folderName = fileName;
}
});
return folderName;
}
async function fileForEach(src, func) {
//读取目录
const st = fs.statSync(src);
if (st.isFile()) {
await func(src);
return;
}
const paths = fs.readdirSync(src);
for (let i = 0; i < paths.length; i++) {
let path = paths[i];
const newSrc = `${src}/${path}`;
const st = fs.statSync(newSrc);
if (st.isFile()) {
await func(newSrc);
} else if (st.isDirectory()) {
await fileForEach(newSrc, func);
}
}
}
editFolderMeta(path, folderName);
function createUuidData(uuid) {
const shortUuid = getShortUuid(uuid);
const newUuid = v4();
const newShortUuid = getShortUuid(newUuid);
return {
oldUuid: uuid,
oldShortUuid: shortUuid,
newUuid: newUuid,
newShortUuid: newShortUuid,
};
}
const newFireUuid = v4();
fileReplace(`assets/${folderName}/scene/${folderName}.fire.meta`, oldFireUuid, newFireUuid);
fileReplace(`assets/${folderName}/scene/${folderName}.fire`, oldFireUuid, newFireUuid);
fileReplace('settings/builder.json', oldFireUuid, newFireUuid);
const uuidList = [];
await fileForEach(path, (path) => {
const nameList = path.split('.');
if (nameList[nameList.length - 1] == 'meta') {
const data = JSON.parse(fs.readFileSync(path));
uuidList.push(createUuidData(data.uuid));
if (data.subMetas) {
for (const key in data.subMetas) {
const subMet = data.subMetas[key];
if (subMet.uuid) {
uuidList.push(createUuidData(subMet.uuid));
}
}
}
}
});
const pathList = [path, 'settings', 'project.json'];
for (let i = 0; i < pathList.length; i++) {
const path = pathList[i];
await fileForEach(path, (path) => {
const nameList = path.split('.');
const expectNameList = ['png', 'jpg', 'mp3', 'wav'];
if (expectNameList.includes(nameList[nameList.length - 1])) {
return;
}
const data = fs.readFileSync(path);
uuidList.forEach(uuiddata => {
if (data.includes(uuiddata.oldUuid)) {
fileReplace(path, uuiddata.oldUuid, uuiddata.newUuid);
}
if (data.includes(uuiddata.oldShortUuid)) {
fileReplace(path, uuiddata.oldShortUuid, uuiddata.newShortUuid);
}
});
});
}
const newJsUuid = v4();
const newJsShortUuid = getShortUuid(newJsUuid);
const newJsId = v4().replace(/-/g, '').substring(0, oldJsId.length);
fileReplace(`assets/${folderName}/scene/${folderName}.ts.meta`, oldJsUuid, newJsUuid);
fileReplace(`assets/${folderName}/scene/${folderName}.js.meta`, oldJsUuid, newJsUuid);
fileReplace(`assets/${folderName}/scene/${folderName}.fire`, oldFireUuid, newFireUuid);
fileReplace(`assets/${folderName}/scene/${folderName}.fire`, oldJsShortUuid, newJsShortUuid);
fileReplace(`assets/${folderName}/scene/${folderName}.fire`, oldJsId, newJsId);
console.log('build_step_0 完成~!');
}
function replaceIndexHtml() {
function replaceIndexHtml () {
const data = fs.readFileSync('index.html');
fs.writeFileSync('dist/play/index.html', data);
}
......@@ -353,7 +324,7 @@ module.exports = {
await buildForm();
// 替换uuid
await replaceUuids();
replaceUuids();
// 改设置为非bundle
changeSettingToWebDesktop();
......@@ -406,7 +377,7 @@ module.exports = {
// 构建前检查
const projectName = build_check();
// 替换uuid
await replaceUuids();
replaceUuids();
// 改设置为bundle
changeSettingsToBundle();
......@@ -426,7 +397,7 @@ module.exports = {
// 构建前检查
const projectName = build_check();
// 替换uuid
await replaceUuids();
replaceUuids();
// 改设置为bundle
changeSettingsToBundle();
......
......@@ -128,8 +128,5 @@
}
}
},
"defaultProject": "ng-template-generator",
"cli": {
"analytics": "5f501d82-8f25-4817-a608-9ac70d1f1f70"
}
"defaultProject": "ng-template-generator"
}
This diff is collapsed.
......@@ -29,7 +29,7 @@
"compressing": "^1.5.0",
"ng-zorro-antd": "^8.5.2",
"rxjs": "~6.5.4",
"node-sass": "4.0.0",
"node-sass": "^4.0.0",
"spark-md5": "^3.0.0",
"tslib": "^1.10.0",
"zone.js": "~0.10.2"
......
<div class="d-flex" (drop)="handle_drop($event)" (dragover)="handle_dragover($event)">
<div class="d-flex">
<div class="p-btn-record d-flex">
<div class="btn-clear" style="cursor: pointer" (click)="onBtnClearAudio()" *ngIf="withRmBtn && (audioUrl || audioBlob)">
<fa-icon icon="times"></fa-icon>
......@@ -45,19 +45,17 @@
<fa-icon icon="cog"></fa-icon>
</div>
</ng-template>
</div>
<div class="p-progress ml-2" (click)="onBtnPlay()" *ngIf="audioUrl || audioBlob"
style="background-color: #70B603; width: 35px; height: 35px; border-radius: 35px; margin-left: 10px;margin-top:-1px">
<nz-progress [nzPercent]="percent" [nzWidth]="35" [nzFormat]="progressText"
nzType="circle">
</nz-progress>
<div class="p-btn-play"
style="color: white;margin-left: 2px;margin-top: 1px;"
[style.left]="isPlaying?'8px':''">
<div class="p-progress ml-2" (click)="onBtnPlay()" *ngIf="audioUrl || audioBlob">
<nz-progress [nzPercent]="percent" [nzWidth]="30" [nzFormat]="progressText"
nzType="circle"></nz-progress>
<div class="p-btn-play" [style.left]="isPlaying?'8px':''">
<fa-icon [icon]="playIcon"></fa-icon>
</div>
</div>
<div class="audio-name">{{_audioName}}</div>
</div>
......@@ -90,26 +90,17 @@
}
.p-progress {
margin-top: 3.5px;
margin-top: 2px;
position: relative;
background-color: #27b43f;
border-radius: 15px;
line-height: 26px;
.p-btn-play {
position: absolute;
left: 11px;
left: 10px;
top: 3px;
color: #ffffff;
color: #555;
}
}
.audio-name{
margin-top: 3.5px;
position: relative;
margin-left: 7px;;
line-height: 26px;
}
:host ::ng-deep nz-upload {
line-height: 33px;
}
......
......@@ -31,21 +31,12 @@ export class AudioRecorderComponent implements OnInit, OnChanges, OnDestroy {
@Input()
audioItem: any = null;
@Input()
_audioName: any = null;
@Input()
set audioUrl(url) {
this._audioUrl = url;
if (url) {
this.httpHeadCall(this._audioUrl, flag => {
if (flag) {
this.audio.src = this._audioUrl;
} else {
this.audio.src = this._audioUrl.replace("_l.", ".");
}
this.audio.load();
});
}
this.init();
}
......@@ -57,7 +48,6 @@ export class AudioRecorderComponent implements OnInit, OnChanges, OnDestroy {
@Output() audioUploaded = new EventEmitter();
@Output() audioUploadFailure = new EventEmitter();
@Output() audioRemoved = new EventEmitter();
@Output() audioName = new EventEmitter();
percent = 0;
progress = 0;
recorder: any;
......@@ -74,41 +64,6 @@ export class AudioRecorderComponent implements OnInit, OnChanges, OnDestroy {
};
}
httpHeadCall(requsetUrl: string, callback) {
let xhr = new XMLHttpRequest();
console.log("Status: Send Post Request to " + requsetUrl);
try {
xhr.onreadystatechange = () => {
try {
console.log('xhr.readyState: ', xhr.readyState);
if (xhr.readyState == 4) {
if ((xhr.status >= 200 && xhr.status < 400)) {
callback(true);
} else {
callback(false);
}
}
} catch (e) {
console.log(e)
}
};
xhr.open("HEAD", requsetUrl, true);
xhr.send();
xhr.timeout = 15000;
xhr.onerror = (e) => {
console.log("汪汪汪 posterror", e);
callback(false);
};
xhr.ontimeout = (e) => {
console.log("汪汪汪 ontimeout", e);
callback(false);
};
} catch (e) {
console.log("Send Get Request error: ", e)
}
}
init() {
this.playIcon = 'play';
this.isPlaying = false;
......@@ -213,12 +168,8 @@ export class AudioRecorderComponent implements OnInit, OnChanges, OnDestroy {
break;
case 'success':
this.isUploading = false;
let url = info.file.response.url;
url = url.substring(0, url.lastIndexOf(".")) + "_l.mp3";
info.file.response.url = url;
this.uploadSuccess(info.file.response);
this.audioUploaded.emit(info.file.response);
this.audioName.emit(info.file.name);
break;
case 'progress':
this.progress = parseInt(info.event.percent, 10);
......@@ -276,39 +227,6 @@ export class AudioRecorderComponent implements OnInit, OnChanges, OnDestroy {
this.progress = Math.floor(p * 100);
}
linkInputed (url, name) {
url = url.substring(0, url.lastIndexOf(".")) + "_l.mp3";
this.audioUrl = url;
this.audioUploaded.emit({url});
this.audioName.emit(name);
}
handle_dragover(e) {
e.preventDefault();
}
handle_drop(e) {
const dt = e.dataTransfer.getData("text/plain");
console.log("handle_drop===", dt);
if (!dt) {
return;
}
try {
const {url, name} = JSON.parse(dt);
if (url.indexOf("teach")<0 || url.indexOf("cdn")<0) {
return;
}
const white = [".mp3"];
if (!white.includes(url.substr(url.lastIndexOf(".")))) {
return;
}
this.linkInputed(url, name);
} catch (error) {
console.warn("handle_drop拖拽在线音频传递参数不合法,应该是{url:'', name:''}");
}
}
}
enum Type {
......
......@@ -32,112 +32,15 @@
<nz-divider style="margin-top: 10px;"></nz-divider>
<div style="margin-top: -20px; margin-bottom: 5px; width: 100%;">
<div *ngIf="customTypeGroupArr">
<nz-radio-group [ngModel]="it.gIdx" (ngModelChange)="customRadioChange($event, it)" style="display: flex; align-items: center; justify-content: center; flex-wrap: wrap;">
<div *ngFor="let group of customTypeGroupArr; let gIdx = index" style="display: flex; ">
<label nz-radio nzValue="{{gIdx}}">{{group.name}}</label>
</div>
</nz-radio-group>
</div>
<!-- <div *ngIf="!customTypeGroupArr">
<nz-radio-group [ngModel]="it.itemType" (ngModelChange)="radioChange($event, it)" style="display: flex; align-items: center; justify-content: center">
<div style="margin-top: -20px; margin-bottom: 5px">
<nz-radio-group [ngModel]="it.itemType" (ngModelChange)="radioChange($event, it)">
<label *ngIf="isHasRect" nz-radio nzValue="rect">矩形</label>
<label *ngIf="isHasPic" nz-radio nzValue="pic">图片</label>
<label *ngIf="isHasText" nz-radio nzValue="text">文本</label>
</nz-radio-group>
</div> -->
</div>
<div *ngIf="customTypeGroupArr && customTypeGroupArr[it.gIdx]">
<div *ngIf="customTypeGroupArr[it.gIdx].pic">
<app-upload-image-with-preview
[picUrl]="it?.pic_url"
(imageUploaded)="onItemImgUploadSuccess($event, it)">
</app-upload-image-with-preview>
</div>
<div *ngIf="customTypeGroupArr[it.gIdx].text" style="margin-top: 5px">
<input type="text" nz-input [(ngModel)]="it.text" (blur)="saveText(it)">
</div>
<div *ngIf="customTypeGroupArr[it.gIdx].anima" align="center" style="margin-top: 5px">
<button nz-button (click)="setAnimaBtnClick(i)" >
<i nz-icon nzType="tool" nzTheme="outline"></i>
配置龙骨动画
</button>
</div>
<div *ngIf="customTypeGroupArr[it.gIdx].animaSmall" align="center" style="margin-top: 5px">
<button nz-button (click)="setAnimaSmallBtnClick(i)" >
<i nz-icon nzType="tool" nzTheme="outline"></i>
配置龙骨动画(小)
</button>
</div>
<div *ngIf="customTypeGroupArr[it.gIdx].audio" style="display: flex;align-items: center; margin-top: 5px">
<app-audio-recorder
style="margin: auto"
[audioUrl]="it.audio_url"
(audioUploaded)="onItemAudioUploadSuccess($event, it)"
></app-audio-recorder>
</div>
<!-- <div *ngIf="customTypeGroupArr[it.gIdx]?.action" style="display: flex;align-items: center; margin-top: 5px">-->
<!-- <app-custom-action-->
<!-- style="margin: auto"-->
<!-- [item]="it ? it['actionData_' + it.gIdx] : {}"-->
<!-- [type]="customTypeGroupArr[it.gIdx].action.type"-->
<!-- [option]="customTypeGroupArr[it.gIdx].action.option"-->
<!-- (save)="onSaveCustomAction($event, it)">-->
<!-- ></app-custom-action>-->
<!-- </div>-->
<div *ngIf="customTypeGroupArr[it.gIdx]?.isShowPos" style="display: flex; align-items: center; justify-content: center; margin-top: 5px;">
x: <input type="text" nz-input [(ngModel)]="it.posX" style="width: 50px; margin-right: 15px;" (blur)="saveItemPos(it)">
y: <input type="text" nz-input [(ngModel)]="it.posY" style="width: 50px" (blur)="saveItemPos(it)">
</div>
<div *ngIf="customTypeGroupArr[it.gIdx]?.select" align="center" >
<nz-select [(ngModel)]="it.selectType" nzAllowClear nzPlaceHolder="Choose" style="width: 70%; margin-top: 5px;">
<nz-option *ngFor="let s of customTypeGroupArr[it.gIdx]?.select" [nzValue]="s.value" [nzLabel]="s.label">
</nz-option>
</nz-select>
</div>
<div *ngIf="customTypeGroupArr[it.gIdx]?.label" align="center" style="margin-top: 5px; display: flex; align-items: center; justify-content: center;">
<span style="width: 30%;">{{customTypeGroupArr[it.gIdx].label + ':'}}</span>
<input type="text" nz-input [(ngModel)]="it.labelText" (blur)="saveText(it)">
</div>
<!-- <div *ngIf="customTypeGroupArr[it.gIdx]?.mathLabel" align="center" style="margin-top: 5px; display: flex; align-items: center; justify-content: center;">-->
<!-- <span style="width: 30%;">{{customTypeGroupArr[it.gIdx].mathLabel + ':'}}</span>-->
<!-- <app-formula-input [(ngfModel)]="it.mathLabel" ></app-formula-input>-->
<!-- </div>-->
<div *ngIf="customTypeGroupArr[it.gIdx]?.isCopy" align="center" style="margin-top: 5px; display: flex; align-items: center; justify-content: center;">
<button nz-button (click)="copyItem(it)" >
<i nz-icon nzType="copy" nzTheme="outline"></i>
复制粘贴
</button>
</div>
</div>
<!-- <div *ngIf="!customTypeGroupArr">
<div *ngIf="it.itemType == 'pic'">
<app-upload-image-with-preview
[picUrl]="it?.pic_url"
......@@ -149,26 +52,13 @@
<input type="text" nz-input [(ngModel)]="it.text" (blur)="saveText(it)">
</div>
<div *ngIf="isHasAudio"
style="width: 100%; margin-top: 5px; display: flex; align-items: center; justify-items: center;">
<div style="width: 100%; margin-top: 5px;">
<app-audio-recorder
style="margin: auto"
[audioUrl]="it.audio_url"
(audioUploaded)="onItemAudioUploadSuccess($event, it)"
></app-audio-recorder>
</div>
<div *ngIf="it.itemType == 'rect' && isHasAnima" align="center" style="margin-bottom: 5px">
<button nz-button (click)="setAnimaBtnClick(i)" >
<i nz-icon nzType="tool" nzTheme="outline"></i>
配置龙骨动画
</button>
</div>
</div> -->
</div>
</div>
......@@ -193,29 +83,12 @@
<div class="save-box">
<button style="margin-left: 200px" class="save-btn" nz-button nzType="primary" [nzSize]="'large'" nzShape="round"
<button class="save-btn" nz-button nzType="primary" [nzSize]="'large'" nzShape="round"
(click)="saveClick()" >
<i nz-icon nzType="save"></i>
Save
</button>
<div *ngIf="isCopyData" style="height: 40px; display: flex; justify-items: center;" >
<label style="margin-left: 40px" nz-checkbox [(ngModel)]="bgItem.isShowDebugLine">显示辅助框</label>
<button style="margin-left: 20px; margin-top: -5px" nz-button (click)="copyHotZoneData()"> 复制基础数据 </button>
<div style="margin-left: 10px; margin-top: -5px" >
<span>粘贴数据: </span>
<input style="width: 100px;" type="text" nz-input [(ngModel)]="pasteData" >
<button style="margin-left: 5px;" nz-button [disabled]="pasteData==''" nzType="primary" (click)="importData()">导入</button>
</div>
</div>
</div>
......@@ -225,52 +98,3 @@
<label style="opacity: 0; position: absolute; top: 0px; font-family: 'BRLNSR_1'">1</label>
<!--龙骨面板-->
<nz-modal [(nzVisible)]="animaPanelVisible" nzTitle="配置资源文件" (nzAfterClose)="closeAfterPanel()" (nzOnCancel)="animaPanelCancel()" (nzOnOk)="animaPanelOk()" nzOkText="保存">
<div class="anima-upload-btn">
<span style="margin-right: 10px">上传 ske_json 文件: </span>
<nz-upload [nzShowUploadList]="false"
nzAccept="application/json"
[nzAction]="uploadUrl"
[nzData]="uploadData"
(nzChange)="skeJsonHandleChange($event)">
<button nz-button><i nz-icon nzType="upload"></i><span>Upload</span></button>
</nz-upload>
<i *ngIf="isSkeJsonLoading" style="margin-left: 10px;" nz-icon [nzType]="'loading'"></i>
<span *ngIf="skeJsonData['name']" style="margin-left: 10px"><u> {{skeJsonData['name']}} </u></span>
</div>
<div class="anima-upload-btn">
<span style="margin-right: 10px">上传 tex_json 文件: </span>
<nz-upload [nzShowUploadList]="false"
nzAccept="application/json"
[nzAction]="uploadUrl"
[nzData]="uploadData"
(nzChange)="texJsonHandleChange($event)">
<button nz-button><i nz-icon nzType="upload"></i><span>Upload</span></button>
</nz-upload>
<i *ngIf="isTexJsonLoading" style="margin-left: 10px;" nz-icon [nzType]="'loading'"></i>
<span *ngIf="texJsonData['name']" style="margin-left: 10px"><u> {{texJsonData['name']}} </u></span>
</div>
<div class="anima-upload-btn">
<span style="margin-right: 10px">上传 tex_png 文件: </span>
<nz-upload [nzShowUploadList]="false"
nzAccept = "image/*"
[nzAction]="uploadUrl"
[nzData]="uploadData"
(nzChange)="texPngHandleChange($event)">
<button nz-button><i nz-icon nzType="upload"></i><span>Upload</span></button>
</nz-upload>
<i *ngIf="isTexPngLoading" style="margin-left: 10px;" nz-icon [nzType]="'loading'"></i>
<span *ngIf="texPngData['name']" style="margin-left: 10px"><u> {{texPngData['name']}} </u></span>
</div>
<div class="anima-upload-btn" *ngIf="customTypeGroupArr && customTypeGroupArr[curDragonBoneGIdx] && customTypeGroupArr[curDragonBoneGIdx].animaNames">
提示:需包含以下动画: {{customTypeGroupArr[curDragonBoneGIdx].animaNames.toString()}}
</div>
</nz-modal>
......@@ -81,10 +81,6 @@
}
}
.anima-upload-btn {
padding: 10px;
}
h5 {
margin-top: 1rem;
}
......@@ -93,8 +89,8 @@ h5 {
@font-face
{
font-family: 'ahronbd-1';
src: url("/assets/font/ahronbd-1.ttf") ;
font-family: 'BRLNSR_1';
src: url("/assets/font/BRLNSR_1.TTF") ;
}
......@@ -109,3 +105,106 @@ h5 {
//@import '../../../style/common_mixin';
//
//.p-image-uploader {
// position: relative;
// display: block;
// width: 100%;
// height: 0;
// padding-bottom: 56.25%;
// .p-box {
// position: absolute;
// left: 0;
// top: 0;
// right: 0;
// bottom: 0;
// border: 2px dashed #ddd;
// border-radius: 0.5rem;
// background-color: #fafafa;
// text-align: center;
// color: #aaa;
// .p-upload-icon {
// text-align: center;
// margin: auto;
// .anticon-upload {
// color: #888;
// font-size: 5rem;
// }
// .p-progress-bar {
// position: relative;
// width: 20rem;
// height: 1.5rem;
// border: 1px solid #ccc;
// border-radius: 1rem;
// .p-progress-bg {
// background-color: #1890ff;
// border-radius: 1rem;
// height: 100%;
// }
// .p-progress-value {
// position: absolute;
// top: 0;
// left: 0;
// width: 100%;
// height: 100%;
// text-shadow: 0 0 4px #000;
// color: white;
// text-align: center;
// font-size: 0.9rem;
// line-height: 1.5rem;
// }
// }
// }
// .p-preview {
// width: 100%;
// height: 100%;
// //background-image: url("https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png");
// @include k-img-bg();
// }
// }
//}
//
//.p-btn-delete {
// position: absolute;
// right: -0.5rem;
// top: -0.5rem;
// width: 2rem;
// height: 2rem;
// border: 0.2rem solid white;
// border-radius: 50%;
// font-size: 1.2rem;
// background-color: #fb781a;
// color: white;
// text-align: center;
//}
//
//.p-upload-progress-bg {
// position: absolute;
// width: 100%;
// height: 100%;
// display: flex;
// align-items: center;
// justify-content: center;
// & .i-text {
// position: absolute;
// text-align: center;
// color: white;
// text-shadow: 0 0 2px rgba(0, 0, 0, .85);
// }
// & .i-bg {
// position: absolute;
// left: 0;
// top: 0;
// height: 100%;
// background-color: #27b43f;
// border-radius: 0.5rem;
// }
//}
//
//
//:host ::ng-deep .ant-upload {
// display: block;
//}
<div class="position-relative" (drop)="handle_drop($event)" (dragover)="handle_dragover($event)">
<div class="position-relative">
<button nz-button (click)="setAnimaBtnClick()" style=" border-radius: 0.5rem; border: 1px solid #ddd;" (dragover)="handle_dragover($event)">
<button nz-button (click)="setAnimaBtnClick()" style=" border-radius: 0.5rem; border: 1px solid #ddd;">
<i nz-icon nzType="tool" nzTheme="outline"></i>
{{btnName}}
</button>
......
......@@ -178,43 +178,4 @@ export class UploadDragonBoneComponent implements OnDestroy, OnChanges {
ngOnDestroy() {
}
linkInputed (ske, tex, png) {
this.skeJsonData["url"] = ske.url;
this.skeJsonData["name"] = ske.name;
this.texJsonData["url"] = tex.url;
this.texJsonData["name"] = tex.name;
this.texPngData["url"] = png.url;
this.texPngData["name"] = png.name;
this.animaPanelOk();
}
handle_dragover(e) {
e.preventDefault();
}
handle_drop(e) {
e.preventDefault();
const dt = e.dataTransfer.getData("text/plain");
console.log("handle_drop===", dt);
if (!dt) {
return;
}
try {
const {ske, tex, png} = JSON.parse(dt);
if (!ske || !tex || !png ||
ske.url.indexOf("teach")<0 || ske.url.indexOf("cdn")<0 || ske.url.indexOf(".json")<0 ||
tex.url.indexOf("teach")<0 || tex.url.indexOf("cdn")<0 || tex.url.indexOf(".json")<0 ||
png.url.indexOf("teach")<0 || png.url.indexOf("cdn")<0 || png.url.indexOf(".png")<0 ||
!ske.name || !tex.name || !png.name
) {
console.warn("handle_drop拖拽在线骨骼动画传递参数不合法,应该是{ske:{url:'', name:''},tex:{url:'', name:''},png:{url:'', name:''}}");
return;
}
this.linkInputed(ske, tex, png);
} catch (error) {
console.warn("handle_drop拖拽在线骨骼动画传递参数不合法,应该是{ske:{url:'', name:''},tex:{url:'', name:''},png:{url:'', name:''}}");
}
}
}
<div class="position-relative" (drop)="handle_drop($event)" (dragover)="handle_dragover($event)">
<div class="position-relative">
<nz-upload class="p-image-uploader" [nzDisabled]="disableUpload"
[nzShowUploadList]="false"
nzAccept = "image/*"
[nzAction]="uploadUrl"
[nzData]="uploadData"
(nzChange)="handleChange($event)"
>
(nzChange)="handleChange($event)">
<!--[nzBeforeUpload]="customUpload">-->
<div class="p-box d-flex align-items-center">
<div class="p-upload-icon" *ngIf="!picUrl && !uploading">
......
......@@ -155,39 +155,4 @@ export class UploadImageWithPreviewComponent implements OnDestroy, OnChanges {
ngOnDestroy() {
}
linkInputed (url) {
const file = {
response: {url}
};
const img = new Image();
img.addEventListener('load', () => {
const height = img.naturalHeight;
const width = img.naturalWidth;
file['height'] = height;
file['width'] = width;
img.remove();
this.imageUploaded.emit(file.response);
});
img.src = url;
this.picUrl = url;
}
handle_dragover(e) {
e.preventDefault();
}
handle_drop(e) {
const dt = e.dataTransfer.getData("text/plain");
console.log("handle_drop===", dt);
if (!dt || dt.indexOf("teach")<0 || dt.indexOf("cdn")<0) {
return;
}
const white = [".jpg", ".jpeg", ".png", ".bmp", ".JPG", ".JPEG", ".PNG", ".BMP"];
if (!white.includes(dt.substr(dt.lastIndexOf(".")))) {
return;
}
this.linkInputed(dt);
}
}
<div class="p-video-box" (drop)="handle_drop($event)" (dragover)="handle_dragover($event)">
<div class="up-video" style="display: flex;">
<div class="p-video-box">
<div class="up-video" style="display: flex;">
<!--<nz-upload class="" [nzDisabled]="!showUploadBtn"-->
<!--[nzShowUploadList]="false"-->
<!--[nzBeforeUpload]="beforeUpload"-->
<!--nzAccept = ".mp4"-->
<!--style="margin-right: 1rem">-->
<nz-upload class="p-image-uploader" [nzDisabled]="uploading" [nzShowUploadList]="false" nzAccept=".mp4"
[nzAction]="uploadUrl" [nzData]="uploadData" (nzChange)="handleChange($event)" style="margin-right: 1rem">
<nz-upload class="p-image-uploader" [nzDisabled]="uploading"
[nzShowUploadList]="false"
nzAccept = ".mp4"
[nzAction]="uploadUrl"
[nzData]="uploadData"
(nzChange)="handleChange($event)"
style="margin-right: 1rem">
<button type="button" nz-button nzType="default" *ngIf="showUploadBtn" [disabled]="uploading"
[nzLoading]="uploading">
[nzLoading]="uploading" >
<i nz-icon nzType="plus" nzTheme="outline"></i>
<span>{{ uploading ? 'Uploading' : 'Select Video' }}</span>
<!--<span>Select Video</span>-->
......@@ -49,8 +54,8 @@
-->
</div>
<div class="p-box d-flex align-items-center p-video-uploader">
</div>
<div class="p-box d-flex align-items-center p-video-uploader">
<div class="p-upload-icon" *ngIf="!showUploadBtn && !videoUrl && !uploading">
<i nz-icon nzType="upload" nzTheme="outline"></i>
<div class="m-3"></div>
......@@ -60,7 +65,8 @@
<div class="p-progress-value">{{progress}}%</div>
</div>
</div>
<div class="p-upload-progress-bg dddd " *ngIf="uploading" [ngClass]="{'smart-bar': showUploadBtn}">
<div class="p-upload-progress-bg dddd " *ngIf="uploading"
[ngClass]="{'smart-bar': showUploadBtn}" >
<div class="i-bg" [style.width]="progress+'%'"></div>
<div class="i-text">
<fa-icon icon="cloud-upload-alt"></fa-icon>
......@@ -74,12 +80,15 @@
<i nz-icon nzType="loading" nzTheme="outline"></i>Checking...
</div>
</div>
<div class="p-preview" *ngIf="!uploading && videoUrl ">
<div class="p-preview" *ngIf="!uploading && videoUrl " >
<!--<video crossorigin="anonymous" [src]="videoUrl" controls #videoNode></video>-->
<video [src]="safeVideoUrl(videoUrl)" controls #videoNode></video>
</div>
</div>
<div [style.display]="!checkVideoExists?'none':''">
</div>
<div [style.display]="!checkVideoExists?'none':''">
<span><i nz-icon nzType="loading" nzTheme="outline"></i> checking file to upload</span>
</div>
</div>
</div>
import { ApplicationRef, ChangeDetectorRef, ElementRef, ViewChild } from "@angular/core";
export class ComponentBase {
// 储存数据用
saveKey = "";
// 储存对象
item: any = {};
ngOnChanges() { }
ngOnDestroy() { }
constructor(private appRef: ApplicationRef, private changeDetectorRef: ChangeDetectorRef) { }
ngOnInit() {
// 获取存储的数据
(<any>window).courseware.getData((data) => {
if (data) {
this.item = data;
this.itemStr = JSON.stringify(this.item, null, 4).trim();
}
this.init();
this.changeDetectorRef.markForCheck();
this.changeDetectorRef.detectChanges();
this.refresh();
}, this.saveKey);
}
@ViewChild("itemTextarea", { static: true }) itemTextarea: ElementRef;
copyData() {
this.itemTextarea.nativeElement.select();
document.execCommand("copy");
}
/**
* 储存图片数据
* @param e
*/
onAssetUploadSuccess(e: any, ...key: Array<string>) {
let item = this.item;
for (let i = 0; i < key.length; i++) {
if (i + 1 == key.length) {
item[key[i]] = e.url;
this.save();
return;
}
item = item[key[i]];
}
}
save() {
(<any>window).courseware.setData(this.item, null, this.saveKey);
this.itemStr = JSON.stringify(this.item, null, 4).trim();
this.refresh();
console.log('this.item = ' + JSON.stringify(this.item));
}
itemStr = "";
load() {
this.itemStr = this.itemTextarea.nativeElement.value;
if (this.isJSON(this.itemStr)) {
this.item = JSON.parse(this.itemStr);
this.init();
this.changeDetectorRef.markForCheck();
this.changeDetectorRef.detectChanges();
this.refresh();
}
}
isJSON(str) {
if (typeof str == 'string') {
try {
var obj = JSON.parse(str);
if (typeof obj == 'object' && obj) {
return true;
}
return false;
} catch (e) {
return false;
}
}
return false;
}
/**
* 刷新 渲染页面
*/
refresh() {
setTimeout(() => {
this.appRef.tick();
}, 1);
}
init() { }
}
This diff is collapsed.
This diff is collapsed.
......@@ -8,11 +8,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<script type="text/javascript" src="https://staging-teach.cdn.ireadabc.com/h5template/h5-static-lib/js/air.js"></script>
<script>
if (document.domain.indexOf("iteachabc.com") > 0) {
document.domain = "iteachabc.com";
}
</script>
</head>
<body>
<app-root></app-root>
......
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment