jahmin

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Getting-Started</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">tutorial</span> <h1><span class="title">Getting-Started</span></h1> </div> </div> <div class="container content"> <div class="row"> <div class="col-md-9 main-content"> <ol class="breadcrumb"> <li><a href="index.html">Home</a></li> <li><a href="list_tutorial.html">Tutorials</a></li> <li class="active">Getting-Started</li> </ol> <section class="tutorial-section"> <article><h1>Jahmin Basics</h1> <p>Jahmin is a framework intended to simplify the necessary boiler plate to achieve an interactive server-client communication, the GUI is based on a set of reusable web-components that automatically update on app-state change. Jahmin core building blocks are:</p> <ul> <li>Customizable <strong>data-engines</strong>: which implements the server-client communication</li> <li>App state managment</li> <li>UI element are reusable web-components, written using the <a href="https://lit-element.polymer-project.org/guide">LitElement</a> framework.</li> <li>A <strong>service-manager</strong>: that takes care of wiring all building blocks togheter.</li> </ul> <h1>Minimal Example</h1> <h2>Install jahmin and UI Elements</h2> <pre class="prettyprint source lang-bash"><code>npm install jahmin jmn-basic-elements </code></pre> <h2>Import Jahmin</h2> <p>Then in your <code>main.js</code> you can import <code>jahmin</code> like the following (you need a bundler, like Webpack or Rollup):</p> <pre class="prettyprint source lang-javascript"><code>// main.js import {Manager,fakeDataEngine} from "jahmin" </code></pre> <p>Here in this example we are importing the <strong>ServiceManager</strong> and a <strong>fakeDataEngine</strong>, this type of engine is just for testing purpose and does not implement any communication with any server.</p> <h2>Add The Engine</h2> <pre class="prettyprint source lang-javascript"><code>// main.js import {Manager,fakeDataEngine} from "jahmin" var fake_engine = new fakeDataEngine("fake"); // Add engine to the service Manager.AddEngine(fake_engine); // Set default (optional) Manager.SetDefaultEngine(fake_engine); // Initialize the Engines and start subscribing // variables from the components Manager.Init(); </code></pre> <p>One can add as many engine to the system as one wants. The name with whitch one instantiate the engine is important (in this case is <code>fake1</code>) and will be used to by the UI-components to define whitch engine to use to read variable values from the server.</p> <h2>Add UI Components</h2> <p>Import the components that you want to use. Jahmin comes with a set of very basic components like a <code>colorBox</code> (a box that changes color based on the status of a variable) a <code>label</code>, etc. A set of core UI-componets are defined in another repository <code>jmn-basic-elements</code> from which you can start with. In this example we are going to use a</p> <p>And import the elements in the main:</p> <pre class="prettyprint source lang-javascript"><code>// main.js import {Manager,fakeDataEngine} from "jahmin" import {numericIndicator, setNumber} from "jmn-basic-elements" // ..... // // ..... // </code></pre> <p>Now create an HTML file <code>index.html</code>, and in this file you can import your <code>bundle.js</code> where you compiled the <code>main.js</code> togheter with <code>jahmin</code> and can directly use the imported UI-components:</p> <pre class="prettyprint source lang-html"><code> <!DOCTYPE html> <html lang="en"> <head> <script src="bundle.js"></script> </head> <body> <color-box name="varA" style="max-width: 10rem;"> <numeric-ind name="varA">varA</numeric-ind> <set-number name="varB">varB</set-number> </color-box> <br> <color-box name="varC" style="max-width: 10rem;"> <numeric-ind name="varC"> Second Number</numeric-ind> </color-box> </body> </html> </code></pre> <p>The HTML output page should look something like this:</p> <p><img src="./html_get_started.png" alt="image info " title="Title"></p> <p>Now you may have noticed that each of the components have an attribute <code>name</code>, this is how one connects to the variable on the server, by variable name. Each component also have a <code>engine</code> attribute, where one can specify the engine name, if not specified will default to the default engine name.</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>