Tag Archives: HTML

Front End, Programming

LIVE 2D EXAMPLE

Leave a comment

#32 LIVE 2D EXAMPLE

Live2d

Live2D is also the name of an eponymous animation software series employing the technique and the software’ developer company, created by Japanese programmer Tetsuya Nakajo.

The software, and its underlying technique, enable users to animate their illustration by providing an illustration prepared in layered parts that constitute the original illustration, such as its eyes, mouth and arms, and stitch the parts on a skeleton to generate animation. The Live2D Ltd. provides the software and SDKs under commercial licenses and for free.

Live2D has been used in a wide variety of video games, visual novels, virtual YouTuber shows, and other software. Well known examples includes FaceRig, Nekopara, Azur Lane,and Tsukino Mito [ja], a virtual avatar and YouTube celebrity from Nijisanji [ja]’s facial motion capture app.

Live2d Example
live2dDownload
Front End, Programming

TABULATOR JS TABLE LIBRARY

Leave a comment

#28 TABULATOR JS TABLE LIBRARY

Tabulator Example

Tabulator is an easy to use, fully featured, interactive table JavaScript library.

Tabulator allows you to create interactive tables in seconds from any HTML Table, JavaScript Array, AJAX data source or JSON formatted data.

Simply include the library in your project and you’re ready to roll.

Tabulator has an enormous number of features to help customize your table experience to your needs.

With new features released every month, there is bound to be something to get your interactive table juices flowing.

A detailed breakdown of all of the available features can be found in the Documentation.

The easy to use, fully featured, interactive table JavaScript library.
Tabulator_ExampleDownload
Front End, Programming

GOOGLE CHARTS

Leave a comment

#22 GOOGLE CHARTS

A Simple Google Charts Example

Google Charts allows us to display big data in a visually appealing way. Google offers animation and lots of other options to modify google charts. The charts are rendered using HTML5/SVG technology and the charts themselves are exposed as JavaScript classes In this example five different charts are drawn and are refreshed every time the page is resized using a simple line in JavaScript:

The Charts Are embedded in iFrames.

window.onresize = function(){ location.reload();}

On page resize the page is refreshed. Since we are using the charts inside HTML iFrames this works quite well.

google_chartsDownload
Front End, Programming

JAVASCRIPT ALERTS

Leave a comment

#19 JAVASCRIPT ALERTS

jAlert example

JALERT is a useful library which can be used to replace the three boring system kinds of popup boxes: Alert box, Confirm box, and Prompt box.

The usual system JavaScript alert would be called like below:

alert("I am an alert box!");

Jalert can be used in the same way but with more functionality:

1
2
3
4
5
$("#confirm_button").click( function() {
    jConfirm('Can you confirm this?', 'Confirmation Dialog', function(r) {
        jAlert('Confirmed: ' + r, 'Confirmation Results');
    });
});
jAlertDownload
Programming

JS EVENT LOGGER

Leave a comment

#18 JS EVENT LOGGER

Simple Loglevel event log save to text file examlpe.

Looking for a lightweight event logger for JavaScript? look no further then Loglevel.

Loglevel is a minimal lightweight simple logging library for JavaScript. Loglevel replaces console.log() with level-based logging and filtering, with none of console’s downsides.

It’s a bare bones reliable everyday logging library. It does not do fancy things, it does not let you reconfigure appenders or add complex log filtering rules or boil tea (more’s the pity), but it does have all the core functionality that you actually use…

In this example I have implemented Loglevel directly into my browser page:

1
2
3
4
5
6
7
<script src="loglevel.min.js"></script>
<script>
function Loginfo(){
    log.setLevel('info');//2
    log.info("log info");
}
</script>
loglevelDownload
Front End, Programming

CIRCLE COLORS IN JAVASCRIPT

Leave a comment

#14 CIRCLE COLORS IN JAVASCRIPT

Circle Color Example

Beautiful circles are formed while the mouse is moving inside your browser. This short bit of code uses the D3.js library also known as the Data Driven Documents JavaScript library.

D3 examples

D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG, and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.

D3 examples

D3 allows you to bind arbitrary data to a Document Object Model (DOM), and then apply data-driven transformations to the document. For example, you can use D3 to generate an HTML table from an array of numbers. Or, use the same data to create an interactive SVG bar chart with smooth transitions and interaction.

In this case D3 was used to display colorful circular animations behind the mouse while it moves over the browser window.

Take a look at the EXAMPLE GALLERY for more examples.

circlecolorsDownload
Front End, Programming

SIMPLE ANIMATIONS IN CSS

Leave a comment

#12 SIMPLE ANIMATIONS IN CSS

CSS animations

The following is a few examples of web loading animations made entirely in HTML and CSS. jQuery is used to add and remove the CSS animations. For example once the document has loaded a jQuery click event can be triggered like so:

jQuery used to call animations
1
<strong>&nbsp;jQuery(document).ready(function&nbsp;(${ $('#pulse').click(function({&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;      $('.placeholder').removeClass('wave').addClass('pulse');&nbsp;})                                                     });</strong>

index.php shows a variety of different shapes combined. The following 3 small scripts show their respective shapes. anim.css holds all the animations.

HTML: Hyper Text Markup Language

CSS: Cascading Style Sheets

jQuery: lightweight JavaScript library

Folder structure.
animateDownload
Programming

GENERATE A GUID FOR AN API

Leave a comment

#3 GENERATE A GUID FOR AN API

Here is a RFC4122 version 4 compliant solution. simple click on the button to generate a GUID and optional copy button. This can be used to authenticate users and as a session log. Each unique ID can be used in an API as an API key for your users.

Example use in a home made API as follows:
https://myapidomain.com/api/count.php?&API_KEY=6f6825a7-ee36-4a01-ba19-c98cbc41049c&JSESSION=c0b3c124-66ae-4873-abf9-36cde947d78f&USERNAME=testing

Result example if there is an error:

{"result":5,"message":"api key does not exist!"}

The id attribute in the HTML allows the JS to execute the logic of this example

I tested the application using XAMPP which is a great lightweight Apache distribution which lets us create a local web server effortlessly.

You can read up on GUID’s here.

api_key_genDownload