Forem: html5@mobile

A lightweight, easy to extend web debugging tool developed based on react.

html5@mobile — Thu, 26 Aug 2021 10:12:35 +0000

A lightweight, easy to extend web debugging tool developed based on react

Easy to use	Full-featured	Easy to expand	high performance
Use the cdn method, one-click access	Similar to Chrome devtools, supports log, network, storage, performance, etc., has better network capture capabilities and rich log display	Expose rich internal events, which can be seamlessly integrated with react components	Support large amount of data display, no lag

Easy to use

Full-featured

Easy to expand

high performance

Use the cdn method, one-click access

Similar to Chrome devtools, supports log, network, storage, performance, etc., has better network capture capabilities and rich log display

Expose rich internal events, which can be seamlessly integrated with react components

Support large amount of data display, no lag

github

https://github.com/tnfe/mdebug

Demos

https://tnfe.github.io/mdebug

Installation

Install using npm

npm install mdebug --save

Useage

1. ES6

  import mdebug from 'mdebug';
  mdebug.init();

2.CDN

(function() {
    var scp = document.createElement('script');
    // Load the latest mdebug version
    scp.src = 'https://unpkg.com/mdebug@latest/dist/index.js';
    scp.async = true;
    scp.charset = 'utf-8';
    // Successfully loaded and initialized
    scp.onload = function() {
        mdebug.init();
    };
    // Load state switch callback
    scp.onreadystate = function() {};
    // Load failed callback 
    scp.onerror = function() {};
    document.getElementsByTagName('head')[0].appendChild(scp);
})();

API

1. init

mdebug.init({
    containerId: '' // mdebug mounts the container id, if it is empty, a unique id will be automatically generated internally,
    plugins: [], // Incoming mdebug plugin
    hideToolbar: [], // Pass in the tab id that needs to be hidden
});

2. addPlugin

mdebug.addPlugin({
    id: '', // tab id
    name: '', // Chinese title corresponding to tab,
    enName: '', // English title corresponding to tab
    component: () => {}, // React component corresponding to tab
});

3. removePlugin

// Support the id of the panel to be removed
/*
System => system;
Elements => elements;
Console => console
Application => application
NetWork => network
Performance => performance
Settings => settings
*/
mdebug.removePlugin([]);

4. exportLog

/*
@returned {
  type: '' // Log type
  source: [], // Original log
}
@params type
// type is equal to log, return all console logs
// type is equal to net, return all net logs
*/
mdebug.exportLog(type);

5. on

mdebug.on(eventName, callback);

6. emit

mdebug.emit(eventName, data);

Event list

Event name	params	Trigger timing
ready	object	mdebug loaded
addTab	object	Add panel
removeTab	array	Remove panel
changeTab	object	Panel switch

development

npm i
npm start
npm run build

License

The MIT License (MIT). Please see License File for more information.

FFCreator is a lightweight and flexible short video processing library based on Node.js

html5@mobile — Thu, 05 Nov 2020 11:52:10 +0000

English | 简体中文

Overview

FFCreator is a lightweight and flexible short video processing library based on Node.js. You only need to add some pictures, music or video clips, you can use it to quickly create a very exciting video album.

Nowadays, short video is an increasingly popular form of media communication. Like weishi and tiktok is full of all kinds of wonderful short videos. So how to make users visually create video clips on the web easily and quickly. Or based on pictures Text content, dynamic batch generation of short videos is a technical problem.

FFCreator is a lightweight and flexible solution that requires few dependencies and low machine configuration to start working quickly. And it simulates 90% animation effects of animate.css. You can easily convert the animation effects on the web page side into videos.

When you need to process a lot of video without special cool transition animations, FFCreatorLite is a better choice, please click here for details.

For more introduction, please see here

Features

Based on node.js development, it is very simple to use and easy to expand and develop.
Very few dependencies, easy to install, cross platform, just a common configuration linux server.
The video processing speed is very fast, a 5 minute video only needs 1-2 minutes.
Nearly a hundred kinds of scene transition animation effects.
Support picture, sound, video clips, text and other elements.
Contains most animation effects of animate.css, css animation is converted to video.
Support subtitle components, can combine subtitles to speech to produce audio news.
Support simple (expandable) VTuber, you can add YouTuber based on sequence frames.
FFCreatorLite has faster speed, sometimes it is more suitable for you than FFCreator.

Demo

Useage

Install npm Package

npm install ffcreator --save

Note: To run the preceding commands, Node.js and npm must be installed.

Node.js

const { FFScene, FFText, FFVideo, FFAlbum, FFImage, FFCreator } = require("ffcreator");

// Create FFCreator instance
const creator = new FFCreator({
    cacheDir,
    outputDir,
    width: 800,
    height: 450
});

// Create scene
const scene = new FFScene();
scene.setBgColor("#ffcc22");
scene.setDuration(6);
scene.setTransition("GridFlip", 2);
creator.addChild(scene);

// Create Image and add animation effect
const image = new FFImage({ path: path.join(__dirname, "../assets/01.jpg") });
image.addEffect("moveInUp", 1, 1);
image.addEffect("fadeOutDown", 1, 4);
scene.addChild(image);

// Create Text
const text = new FFText({ text: "hello 你好", x: 400, y: 300 });
text.setColor("#ffffff");
text.setBackgroundColor("#000000");
text.addEffect("fadeIn", 1, 1);
scene.addChild(text);

// Create a multi-photo Album
const album = new FFAlbum({
    list: [img1, img2, img3, img4],   // Picture collection for album
    x: 250,
    y: 300,
    width: 500,
    height: 300,
});
album.setTransition('zoomIn');      // Set album switching animation
album.setDuration(2.5);             // Set the stay time of a single sheet
album.setTransTime(1.5);            // Set the duration of a single animation
scene.addChild(album);

// Create Video
const video = new FFVideo({ path, x: 300, y: 50, width: 300, height: 200 });
video.addEffect("zoomIn", 1, 0);
scene.addChild(video);

creator.output(path.join(__dirname, "../output/example.mp4"););
creator.start();        // Start processing
creator.closeLog();     // Close log (including perf)

creator.on('start', () => {
    console.log(`FFCreator start`);
});
creator.on('error', e => {
    console.log(`FFCreator error: ${JSON.stringify(e)}`);
});
creator.on('progress', e => {
    console.log(colors.yellow(`FFCreator progress: ${e.state} ${(e.percent * 100) >> 0}%`));
});
creator.on('complete', e => {
    console.log(colors.magenta(`FFCreator completed: \n USEAGE: ${e.useage} \n PATH: ${e.output} `));
});

For a more detailed tutorial, please check here

About Audio

Sound is the soul of a video. FFCreator supports multiple ways to add audio. You can not only add global background music, but also set your own voice or soundtrack for each individual scene.

In FFVideo - Turn on video background music (default off).

const video = new FFVideo({path, x: 100, y: 150, width: 500, height: 350});
video.setTimes('00:00:18', '00:00:33');
video.setAudio(true); // Turn on

Add a global background audio.

const creator = new FFCreator({
  cacheDir,
  outputDir,
  audio: path, // background audio
});

// or
creator.addAudio({path, loop, start});

Add your own separate music for each scene.

scene.addAudio(path);
// or
scene.addAudio({path, loop, start});

Installation

1. Install `node-canvas` and `headless-gl` dependencies

If it is a computer with a display device, such as a personal pc computer with windows, Mac OSX system, or a server server with a graphics card or display device, you can skip this step without installing this dependency.

If you are using Centos, Redhat, Fedora system, you can use yum to install.

sudo yum install gcc-c++ cairo-devel pango-devel libjpeg-turbo-devel giflib-devel

InstallXvfb and Mesa

sudo yum install mesa-dri-drivers Xvfb libXi-devel libXinerama-devel libX11-devel

If you are using Debian, ʻubuntusystem, you can use ʻapt to install.

sudo apt-get install libcairo2-dev libjpeg-dev libpango1.0-dev libgif-dev build-essential g++
sudo apt-get install libgl1-mesa-dev xvfb libxi-dev libx11-dev

2. Because FFCreator depends on `FFmpeg`, you need to install a regular version of `FFmpeg`

How to Install and Use FFmpeg on CentOS https://linuxize.com/post/how-to-install-ffmpeg-on-centos-7/
How to Install FFmpeg on Debian https://linuxize.com/post/how-to-install-ffmpeg-on-debian-9/

For a more detailed tutorial, please check here

Start Up

If it is a computer with a display device, such as a personal pc computer or a server server with a graphics card or display device, start normally npm start

Otherwise, You must use the `xvfb-run` script command to start the program to use webgl under the Linux server

xvfb-run more detailed command parameters http://manpages.ubuntu.com/manpages/xenial/man1/xvfb-run.1.html

xvfb-run -s "-ac -screen 0 1280x1024x24" npm start

Questions

During installation warning missing package'xi'

No package 'xi'

foundgyp: Call to 'pkg-config --libs-only-l x11 xi xext' returned exit status 1 while in angle/src/angle.gyp. while loading dependencies of binding.gyp while trying to load binding.gyp

Solution

yum install libXi-devel libXinerama-devel libX11-devel

Start node app and prompt error message doesn't support WebGL....

Solution

The node app should be started as follows.

xvfb-run -s "-ac -screen 0 1280x1024x24" npm start

Npm install error ERR! command sh -c node-pre-gyp install --fallback-to-build

Solution

It may be caused by your node version. If it is nodev15, there will be this problem. https://github.com/Automattic/node-canvas/issues/1645 . Please downgrade to node v14.

Contribute

You are very welcome to join us in developing FFCreator, if you want to contribute code, please read here.

License

MIT

Jscalpel makes it easier to manipulate objects

html5@mobile — Fri, 27 Apr 2018 01:58:57 +0000

A small feature library that makes it easier to manipulate objects

Overview

It is tiny but very useful and can help you handle javascript native objects. Data-driven interface development is very common today, we are in the angular, react, vue will encounter a lot of object processing, including set the default value, query, assignment, etc., jscalpel is born for this scene.

jscalpel is little poor, gzip less than 3k, so a library you can use it anytime, anywhere without worrying about anything.

Document

View the document please visit https://ihtml5.github.io/jscalpel/

中文文档

Installation

Install using npm

npm install jscalpel --save
yarn add jscalpel --save

Useage

Es6

  import Jscalpel from 'jscalpel'

Include in html

  <script charset="utf-8" src="https://unpkg.com/jscalpel@latest/dist/index.js"></script>

APIS

parameter	type	default value	use	isRequired	required version
target	string/object	{}	target	true	all
deep	boolean	false	whether or not to copy the target object in depth	false	all
prefix	string	undefined	public prefix, automatically added for the keys	false	all
success	function	function () {}	The function that was called when the analysis was successful	true	^0.6.2
error	function	function () {}	The function that is called when the analysis fails.	false	^0.6.2
path	string/array/function	[]	path	false	^0.6.2
plugins	array	[]	A plug-in set, similar to the webpack plugins.	false	^0.6.2

Online Demos

Code

1. simple pattern

// mock data
var data = {
  status: '0',
  data: {
    response: {
      code: 1,
      msg: 'response msg'
    }
  }
}

// bind data
var jscalpelIns = jscalpel({
  target: data
})
jscalpelIns.get('data.response.code') // returned 1;
jscalpelIns.set('data.response.code', 12);
jscalpelIns.set({
  'status': '1'
})
jscalpelIns.get('data.response.code') // returned 12
jscalpelIns.get('status') // returned 1
jscalpelIns.has('data.response.code') // returned true

jscalpelIns.del('data.reponse.code') 

jscalpelIns.get('data.reponse.code') // returned undefined;
jscalpelIns.has('data.reponse.code') // returned false;

2.advanced patterns

const res = {
  data: {
    article: [{
      articleId: 0,
        title: 'jscalpel'
    }]
  },
  response: {
    code: '0',
    msg: 'success'
  }
}
jscalpel({
       target: res,
  path: ['data.article.0', 'response.msg'],
  success:  (article, msg) => {
    console.log('keys=>array=>output:', article, msg);
  }
})

jscalpel({
    target: res,
  path: 'response.msg',
  success:  (msg) => {
    console.log('keys=>string=>output:',msg);
  }
});

3.use prefix

jscalpel({
    target: res,
  prefix: 'response',
  path: ['code', 'msg'],
  success:  (code, msg) => {
    console.log('prefix=>output:', code, msg);
  }
})

4.dynamic path

jscalpel({
  target: res,
  path: () => ['code', 'msg'].map((key) => `response.${key}`),
  success:  (code, msg) => {
    console.log('dynamic=>output:', code, msg);
  }
})

jscalpel({
    target: res,
  deep: true,
  prefix: 'response',
  path: ['code', 'msg'],
  success:  (code, msg, finalRes, keys) => {
    console.log( finalRes === res);
    console.log('deep into callback:', code, msg, finalRes, keys);
  }
});

5.use plugins

const logicMap = {
  'code': {
    match: ({value, name}) => value === '0',
    success: ({value, name}) => {
      console.log('logicPlugin', value, name);
    }
  }
}
jscalpel({
  target: res,
  deep: true,
  prefix: 'response',
  path: ['code', 'msg'],
  plugins: [jscalpel.jscalpelType, jscalpel.jscalpelLogic(logicMap)],
  success: (code, msg, finalRes, keys) => {
    console.log( finalRes === res);
    console.log('deep into callback:', code, msg, finalRes, keys);
  }
})

Related projects

jscalpel-orm

It is convenient for you to extract the required fields from one object to generate another object.

Changelog

2017.9.14

Add jscalpelLogic plugin, reduce ifelse, make run logic configurable

2018.3.08

add orm

License

The MIT License.

Forem: html5@mobile

A lightweight, easy to extend web debugging tool developed based on react.

Easy to use

Full-featured

Easy to expand

high performance

github

Demos

Installation

Install using npm

Useage

1. ES6

2.CDN

API

1. init

2. addPlugin

3. removePlugin

4. exportLog

5. on

6. emit

Event list

development

License

FFCreator is a lightweight and flexible short video processing library based on Node.js

Overview

For more introduction, please see here

Features

Demo

Useage

Install npm Package

Node.js

For a more detailed tutorial, please check here

About Audio

Installation

1. Install node-canvas and headless-gl dependencies

If it is a computer with a display device, such as a personal pc computer with windows, Mac OSX system, or a server server with a graphics card or display device, you can skip this step without installing this dependency.

2. Because FFCreator depends on FFmpeg, you need to install a regular version of FFmpeg

For a more detailed tutorial, please check here

Start Up

Otherwise, You must use the xvfb-run script command to start the program to use webgl under the Linux server

Questions

Solution

Solution

Solution

Contribute

License

Jscalpel makes it easier to manipulate objects

Overview

Document

View the document please visit https://ihtml5.github.io/jscalpel/

Installation

Install using npm

Useage

Es6

Include in html

APIS

Online Demos

Code

1. simple pattern

2.advanced patterns

3.use prefix

4.dynamic path

5.use plugins

Related projects

Changelog

2017.9.14

2018.3.08

License

1. Install `node-canvas` and `headless-gl` dependencies

If it is a computer with a display device, such as a personal `pc` computer with `windows`, `Mac OSX` system, or a `server` server with a graphics card or display device, you can skip this step without installing this dependency.

2. Because FFCreator depends on `FFmpeg`, you need to install a regular version of `FFmpeg`

Otherwise, You must use the `xvfb-run` script command to start the program to use webgl under the Linux server