jahmin

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JaHMIn</title>  <link href="https://fonts.googleapis.com/css?family=PT+Mono" rel="stylesheet"> <link type="text/css" rel="stylesheet" href="css/bootstrap.min.css"> <link type="text/css" rel="stylesheet" href="css/prism.min.css"> <link type="text/css" rel="stylesheet" href="css/template.min.css"> <script type="text/javascript"> window.TEMPLATE_OPTIONS = {"includeDate":true,"dateFormat":"Do MMM YYYY","systemName":"JaHMIn","systemSummary":"A Javascript framework to build Human Machine Interfaces for IoT","systemLogo":"","systemColor":"","navMembers":[{"kind":"class","title":"Classes","summary":"All documented classes."},{"kind":"external","title":"Externals","summary":"All documented external members."},{"kind":"global","title":"Globals","summary":"All documented globals."},{"kind":"mixin","title":"Mixins","summary":"All documented mixins."},{"kind":"interface","title":"Interfaces","summary":"All documented interfaces."},{"kind":"module","title":"Modules","summary":"All documented modules."},{"kind":"namespace","title":"Namespaces","summary":"All documented namespaces."},{"kind":"tutorial","title":"Tutorials","summary":"All available tutorials."}],"footer":"","copyright":"FooDoc Copyright © 2016 The contributors to the JSDoc3 and FooDoc projects.","linenums":true,"collapseSymbols":true,"inverseNav":true,"inlineNav":false,"outputSourceFiles":true,"sourceRootPath":null,"disablePackagePath":true,"outputSourcePath":false,"showTableOfContents":true,"showAccessFilter":true,"analytics":null,"methodHeadingReturns":true,"sort":"linenum, longname, version, since","search":true,"favicon":null,"stylesheets":[],"scripts":[],"monospaceLinks":false,"cleverLinks":false,"theme":"yeti"}; window.DOCLET_TOC_ENABLED = true; window.DOCLET_AFILTER_ENABLED = false; </script> </head> <body>  <header class="navbar navbar-default navbar-fixed-top navbar-inverse"> <div class="container"> <div class="navbar-header"> <a class="navbar-brand" href="index.html"> JaHMIn </a>  <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#topNavigation"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="navbar-collapse collapse" id="topNavigation"> <ul class="nav navbar-nav"> <li class="dropdown"> <a href="global.html" class="dropdown-toggle" data-toggle="dropdown">Globals<b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="global.html#VarStatusCodes">VarStatusCodes</a></li> </ul> </li> <li class="dropdown"> <a href="list_class.html" class="dropdown-toggle" data-toggle="dropdown">Classes<b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="DataCommsEngine.html">DataCommsEngine</a></li> <li><a href="DataTree.html">DataTree</a></li> <li><a href="ErrorCodes.html">ErrorCodes</a></li> <li><a href="ServiceManager.html">ServiceManager</a></li> <li><a href="ServiceStatusCodes.html">ServiceStatusCodes</a></li> <li><a href="systemError.html">systemError</a></li> <li><a href="systemObject.html">systemObject</a></li> <li><a href="systemVariable.html">systemVariable</a></li> <li><a href="VarResponse.html">VarResponse</a></li> </ul> </li> <li class="dropdown"> <a href="list_tutorial.html" class="dropdown-toggle" data-toggle="dropdown">Tutorials<b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="tutorial-Getting-Started.html">Getting-Started</a></li> </ul> </li> </ul>  <form class="navbar-form navbar-right" role="search"> <div class="input-group"> <input type="text" class="form-control" placeholder="Search" id="lunr-search-input"> <div class="input-group-btn"> <button class="btn btn-default" id="lunr-search-submit"> <i class="glyphicon glyphicon-search"></i> </button> </div> </div> </form>  </div> </div> </header>  <div class="page-header"> <div class="container"> <span class="kind">readme</span> <h1><span class="name">JaHMIn</span></h1> <div class="summary"><p>A Javascript framework to build Human Machine Interfaces for IoT</p></div> </div> </div> <div class="container content"> <div class="row"> <div class="col-md-9 main-content"> <section class="readme-section"> <article><h1>JaHMIn</h1> <p>A <strong>Ja</strong>vascript framework to build <strong>H</strong>uman <strong>M</strong>achine <strong>In</strong>terfaces for IoT.</p> <ul> <li><strong>Demo of basic elements available <a href="https://js-hmi.github.io/jmn-basic-elements/demo">here</a></strong>.</li> <li><strong>Full JSDocs available at: <a href="https://js-hmi.github.io/jahmin/index.html">js-hmi.github.io/jahmin</a></strong>.</li> <li><strong>Tutorials avaliable <a href="https://js-hmi.github.io/jahmin/list_tutorial.html">here</a></strong>.</li> </ul> <h3>Installation</h3> <pre class="prettyprint source lang-js"><code>npm install jahmin </code></pre> <h3>Working Principles</h3> <p>Jahmin is a framework that helps with the boiler plate necessary to put in comunication browser UI-elements with server-side sensors data. It allows for bi-directional comunications, for monitoring and control. Jahmin does this by offering an opinionated set of components:</p> <ul> <li>UI elements are build using web-components inheriting from the, <strong>HMIElement</strong> class. These are <strong>Lit-Element</strong> components with a few helper functions.</li> <li>An app state managment system (using <strong>ImperaJS</strong>) takes care of holding the state and propagating state changes to all elements.</li> <li>A customizable <strong>DataCommsEngine</strong> class is provided for server-client data retrival and communication.</li> <li>An app <strong>ServiceManager</strong> class takes care of initialization and configuration.</li> <li>A customizable Error tray notification mechanism is provided to inform the user of any problem.</li> </ul> <p>The basic idea is that once you implement the server-client data exchange protocol of your application within the DataCommsEngine class, all data points, the variables of your system, are accessible by name from the HMIElements. The framework takes care of connecting, populating and subscribing HMIElements to your data stream automatically. This decoupling between data comunication and UI gives the oppurtunity to re-use the components and share them. Jahmin comes with a set of basic components, which you can explore <a href="https://js-hmi.github.io/jmn-basic-elements/demo">here</a>.</p></article> </section> </div> <div class="col-md-3 side-content"> <nav class="toc hidden-print hidden-sm hidden-xs"></nav> </div> </div> </div> <footer> <div class="copyright">FooDoc Copyright © 2016 The contributors to the JSDoc3 and FooDoc projects.</div> <div class="generated-by">Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a> on 11th Jun 2021 using the <a href="https://github.com/steveush/foodoc">FooDoc template</a>.</div> </footer> <script src="js/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/clipboard.min.js"></script> <script src="js/prism.min.js"></script> <script src="js/template.min.js"></script>  <div class="modal fade" id="lunr-search-modal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title">Search results</h4> </div> <div class="modal-body" id="lunr-search-body"> </div> <div class="modal-footer" id="lunr-search-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div>  <script src="js/lunr.min.js"></script> </body> </html>