Skip to content

Latest commit

 

History

History

oliv-components

README.md

<< Back

Oliv's Web Components

Note: Those components requires absolutely NO external library. (No Knockout, Require, jQuery, etc).

But EcmaScript6 (ES6, or higher) is required. Should not be a problem (2018 onwards).

Some components might require some (provided) utilities like

  • character.matrixes/characters.js
  • stars/constellation.js
  • utilities/Utilities.js

You need to be aware of this kind of dependencies, in case you wish to use the non-WebPacked version of those components.

They do require a WebComponents-savvy browser though. Most of them are (or will shortly be...).

Live Demos

Requires nodejs to be available on your system.

To see the components at work, after cloning the repo (or refreshing your branch), start the node server from the WebComponents directory, and load index.html in a browser:

 $> node server.js

Then load http://localhost:8080/oliv-components/index.html in a WebComponents-enabled web browser.

Also available

After starting the node server as mentioned above, you can also reach

Hosted

Components list

  • Pluviometer. ✅ Done.
  • Thermometer. ✅ Done
  • Jumbo Display. ✅ Done
  • Direction Display. ✅ Done
  • Analog Display. ✅ Done
  • Wind Angle. ✅ Done
  • Globe and Map (with import and module). ✅ Done
  • Compass Rose. ✅ Done
  • Digital Scrolling Display (like a log). 🚧 In Progress (or use the split-flap display below)
  • Date (calendar) display. ✅ Done
  • Watch/Clock (analog). ✅ Done
  • Marquee. ✅ Done
  • Lep Panel. ✅ Done
  • Evolution Displays. TODO ⏰
  • Generic Graphs. ✅ Done
  • Sky Map and Star Finder (along with some REST service(s)). ✅ Done
  • Split-flap Display. ✅ Done
  • Deviation Curve. => Use the Generic Graph, in its vertical configuration. ✅ Done
  • Sun Path Display (fed by some REST services). ✅ Done
  • Simple Slide Show. ✅ Done
  • T900 Templates (Dieumegard Bataille). TODO ⏰
  • GPS Satellites Plotter. ✅ Done
  • Knob and display. ✅ Done
  • Moon Phase and Tilt. ✅ Done

WIP TODO

  • 🚧 Replace (or duplicate) canvases with SVG s 🚧

Screenshots, as they appear from the Demo page

World Map in its globe configuration:

World Map

SkyMap in its Star Finder configuration:

Star Finder

SkyMap in its Sky Map configuration:

Sky Map

Maybe next?

  • Satellite plotter? ➜ See the doAfter callback on the Globe examples.
  • Tide Graph?
  • Current Display?
  • Generic curve(s) display. Done.

To build for prod

You need npm or yarn to be installed. Some scripts will minimized the scripts, and use webpack to put everything need in only one file.

Follow those instructions.

Artifacts
  • Javascript Modules (careful with Firefox 58 and below...)
    • defining the component's parameters (properties) and behavior
  • Examples, in gallery.html and on CodePen.
    • including animations examples
  • CSS rules and classes (in their own stylesheet, web-components.css)

TODO

  • JSDoc

CodePen (might not be 100% in sync... But close'ish)

The point of truth remains this repo.

Components above, live at CodePen, when released.

HTML Templates & Imports

Warning: This feature is now deprecated...

Along the same lines as Web Components, for re-usability, modularity, etc. See the examples in this module.

Firefox

If you are having trouble running the WebComponents in Firefox 58, see this document.

Note: Since version 63.0, WebComponents are supported by Firefox.

Transpilation

Use babel, as explained here.

Also see this document, in the same project.

There is also a transpiler on-line, that works correctly.

© 2018, and after, by Oliv Soft.