Acid.JS

Online Color Picker and Color Conversion Tool

Just a few hours ago I finished and deployed my new online service and very first endeavor in the interesting world of colors and color theory. Say hi to AcidJs.ColorConverter!

Features:

  • Native HTML5 color picker.
  • Color conversion to and from HEX, RGB, HSL, CMYK, HSV,  etc.
  • Color tints, tones and shades.
  • CMYK and RGB color charts, powered by Google Charts.
  • Inspirational color schemes.
  • Detailed information about the selected color.
  • Option to save the raw JSON data, containing the details of the selected color.
  • About 900 named color equivalents.

Built on top of HTML5 WebComponents (AcidJs.XTabs and AcidJs.XOverlay), and utilizing Object.observe() and the (not-so-new) input “color” type (sorry, no fallback for browsers, which do not support it and that’s on purpose!) and using the data from the brilliant ColorHexa service, which I transform to JSON via the REST API running on my server.

Screenshots:

The color picker:

cc-06

Raw data viewer:

cc-05

RGB and CMYK color charts

cc-04

Color conversions table

cc-03

Advanced view – shades, tints, tones and schemes

cc-02

Editor tab

cc-01

Check it on this page and have fun!

If you share the same interest towards HTML5 Web Components as I do these days, make sure you read my relevant blog posts and further endeavors on my HTML5, CSS3 and JavaScript Experiments and Insight website.

Spread the Word About Semtex UI Framework, HTML5 Cart or Acid.JS Controls and Win a Free Commercial License!

Want to win a commercial license for Semtex UI Framework, HTML5 Cart or Acid.JS Component of your choice? It’s easy – just check this page for details and spread the word on Twitter, Facebook or Google Plus!

HTML5, CSS3 and JavaScript Windows 8 Metro Style Tiles

AcidJs.Tiles is a JavaScript, HTML5 and CSS3 layout widget, which resembles the Windows 8 Metro tiles in terms of look and feel, functionality and behaviors and can be used on web sites or web apps. It is easy to configure via a small, but powerful API and events, and comes with stunning and realistic desktop-like 3D CSS3 animations.

acidjs-tiles-promo-01

The tiles can be used as placeholder of virtually anything – from simple text, to sophisticated markup and forms.

acidjs-tiles-promo-02

tiles

Related Posts and Links

HTML5 Canvas Gauge Component

Try Semtex – the new HTML5, CSS3 and JavaScript UI framework!

I am happy to announce that I’ve just finished the new widget that is already part of Acid.JS Web.UI – the AcidJs.Gauge class (demo).

AcidJs.Gauge is a JavaScript widget, using the HTML5 canvas element to draw interactive gauges with various configuration options on the page with a simple, but yet powerful API.

gauge-blog

All major browsers are supported, and for older browsers, which do not support canvas we have a nice fallback.

You can check the demo of this page. Have fun!

Related Links

Ribbonbar UI 2.0 Released

Ribbonbar UI is by far the best recreation of the “real” desktop ribbonbar for the web. It is skinnable, fully AJAX driven component that is ready to use on any website. What you can you do with a MS Office like ribbon bar in web environment? Whether use it for navigation, associate it with your WYSIWYG editor, use in an email application, display links to your favorite social websites or simply build your entire webpage around it – this depends only on you.

Ribbonbar UI has everything you would expect from a ribbonbar – cool looks, comprehensive and easy API, amazing command handling, different sets of inbuilt tools, cool Windows7 skin. And at last, but not least – deploying and configuring it is a matter of minutes.

Screenshots:

What’s New:

– JSON file instead of XML for tabs, ribbons and tools rendering.
– Rendering at lightning speed.
– Improved browser support.
– Fully CSS3 skinning mechanism with decent fallback for older browsers.
– New and easy to use client API.
– New command handling based on delegation;
– Support for external tools loaded via AJAX.
– Can be used on any server environment (default is PHP, but it can be extended to JAVA, .NET, etc).

Features:

– By far, the most successful recreation of the “real” desktop ribbonbar as a web component.
– Comprehensive and fun to use API.
– Easy to modify JSON structures for tabs, ribbons and commands.
– Imageless CSS3 skin working with all modern browsers and falling back nicely for older browsers.
– 4 types of inbuilt tools – “toolbar”, “office menu”, “split-button” and “external”.
– Ability to load external tools by loading them via AJAX and passing get/post parameters.
– Small footprint.
– Easy command handling.
– Can be used with 3-rd party WYSIWYG editors, as a navigation component, in email systems, etc.
– The retrieval for the JSON files can be done with any server runtime (however Ribbonbar is shipped with PHP routine only).

Now What?

Check the info page, go to the demo or visit the documentation page for Ribbonbar UI to learn how to integrate it into your own project. Eventually download it. As usual, the component is included in the latest version if Acid.JS Web.UI.

Tour Dates Artist Event Schedule Component 3.0 Has Been Released

Are you running a band website? Have you been looking for easy management of tour dates? If the answer is “yes” – do not look any further, because TourDates by Acid.JS is the right tool for you. It has it all – modern looks, easy to use, fully ajax-driven admin, full browser support and amazingly small footprint. I bet that your band will certainly love it!

Key Features

  • Fast and reliable, with extremely small footprint compared to it’s amazing functionality.
  • Lightweight admin with cool and easy to use UI, event drag-and-drop, etc.
  • Venue, tickets provider, support band and country management.
  • Fully customizable and localizable templates powered by Pisi Template Engine.
  • Social and sharing buttons on the public page.
  • Cool set of imageless CSS3 skins with fallback for older browsers.
  • Drag-and-drop rearrangement of the public page columns order.
  • Can be easily branded with band’s logo, etc.
  • Event date-picker.
  • Data backup.
  • Event editor.
  • CSS, templates and JavaScript are gzipped.
  • Suitable for any kind of artist.
  • If you are logged in, the admin can be accessed directly from the public front-end of the component
  • And yet more loads of cool stuff. Just check it out…

Requirements

  • Web-server with PHP support.
  • Standards-compliant (HTML5, XHTML1.0, XHTML1.1) or Skinny DTD public page.
  • JavaScript must be enabled.
  • Cookies must be enabled.

Admin Screenshots (If accessed from the front-end public page)

And Now… What?

Want to give TourDates by Acid.JS Web.UI a try? Start by it’s info and demo pages, and if you like it, why don’t you download it and try it at home? The help and manual page is available here.

HTML5 Guitar Chord Finder (Beta) Released

GuitarChords.JS is the result of a fun experiment with CSS3, HTML5 and JavaScript that eventually went crazy with the ability to play the selected chord (no Flash, but real HTML5 audio), chord inversions and types and cool real-life stompbox interface with customizable LED display, knobs, buttons and large play button.

GuitarChords.JS - HTML5 Chord Finder and Player

GuitarChords.JS

And this is just the Beta release! Even more to come in the official release soon.

BETA Release Features:

  • Ability to play the current chord from small external .mp3 or .ogg sounds (no Flash, but real HTML5 audio) depending on the browser support.
  • Cool and friendly stompbox-like interface with LED display, knobs and large play button.
  • Chord data is stored in easy to understand json file(s) that can be easily edited.
  • User-defined chords data files.
  • User-defined chord types.
  • Any chord can be added and played.
  • Sounds are loaded on demand.
  • Incredibly small footprint.
  • Ability to display 3 inversions for each chord.
  • Customizable backlit color of the LED display.
  • Fully localizable.
  • Easy to install, setup and use on any standards-compliant website.
  • Fully AJAX driven.

Planned Features for the Official Release

  • Support for multiple chord data files that can be changed on the fly.
  • Add more chords and inversions.
  • Add flat and sharp variants of the current chord.
  • All sounds will be embedded as base64-encoded data in a cacheable json file.
  • Convenient tuner.
  • Volume control.
  • Continuous chord playing.
  • Highlighting of the currently played note.
  • UI improvements.
  • Export of the current chord in text format.

Supported Browsers:

  • Internet Explorer 9+
  • Mozilla Firefox
  • Google Chrome
  • Apple Safari
  • Opera

GuitarChords.JS does not initialize on older versions of Internet Explorer.

Technologies Used:

JavaScript, CSS3, HTML5 Audio, JSON and SVG. SVG has been used in Internet Explorer to achieve consistent gradients instead of using the classic filter gradient that bleeds through on elements with rounded borders.

Requirements:

  • Standards-compliant webpage (XHTML, HTML5) or optionally Skinny DTD. GuitarChords.JS will not initialize on pages with non-standards compliant DTDs and will display a warning.
  • Web server.

Screenshots

Visit the info page for GuitarChords.JS, view the demo or download it straight away. The component is included in the latest version of Acid.JS Web UI too.