swarm example

4 years ago · 1e61b29dcb
43 changed files with 21917 additions and 21 deletions
--- a/.gitignore
+++ b/.gitignore
@ -1,25 +1,21 @@
-# ---> Backup
-*.bak
-*.gho
-*.ori
-*.orig
-*.tmp
-
-# ---> GitBook
-# Node rules:
-## Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-## Dependency directory
-## Commenting this out is preferred by some people, see
-## https://docs.npmjs.com/misc/faq#should-i-check-my-node_modules-folder-into-git
+.DS_Store
 node_modules
+/dist

-# Book build output
-_book
+# local env files
+.env.local
+.env.*.local

-# eBook build output
-*.epub
-*.mobi
-*.pdf
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw*
--- a/docs/README.adoc
+++ b/docs/README.adoc
--- a/docs/Swarming2.png
+++ b/docs/Swarming2.png
--- a/docs/bidirectional-communication.png
+++ b/docs/bidirectional-communication.png
--- a/docs/flow.png
+++ b/docs/flow.png
--- a/docs/install-backup.adoc
+++ b/docs/install-backup.adoc
--- a/docs/intro.png
+++ b/docs/intro.png
--- a/docs/swarmlabn-1.png
+++ b/docs/swarmlabn-1.png
--- a/docs/vuex.png
+++ b/docs/vuex.png
--- a/src/IoT/README.md
+++ b/src/IoT/README.md
@ -0,0 +1,3 @@
+
+npm install
+npm audit fix
--- a/src/IoT/llo/bclient.js
+++ b/src/IoT/llo/bclient.js
@ -0,0 +1,48 @@
+var path = require('path');
+var app = require('express')();
+var http = require('http').Server(app);
+var io = require('socket.io')(http);
+
+const socketAuth = require('socketio-auth');
+
+socketoptions = {
+        secure:true,
+        reconnect: true,
+        rejectUnauthorized : false
+};
+
+
+// Client
+var io2 = require('socket.io-client');
+var socket = io2.connect('http://localhost:8084', socketoptions);
+
+socket.on('connection', s => {
+      console.error('socket2 connection');
+    var id = s.id
+
+
+    var roomiot = 'iot'
+    socket.emit('iot', roomiot);
+
+    socket.emit('subscribe', roomiot);
+
+    socket.emit('pingServerEmit', roomiot);
+
+
+    s.on('message', function (data) {
+      console.log('from room1 '+data);
+   });
+    s.on('iot', function (data) {
+      console.log('from room1 '+data);
+   });
+});
+
+    var roomiot = 'iot'
+    socket.emit('iot', roomiot);
+
+    socket.on('message', function (data) {
+      console.log('from room '+data);
+   });
+
+
+
--- a/src/IoT/llo/client.js
+++ b/src/IoT/llo/client.js
@ -0,0 +1,32 @@
+options = {
+        secure:true,
+        reconnect: true,
+        rejectUnauthorized : false
+};
+
+// Client
+var io2 = require('socket.io-client');
+var socket = io2.connect('http://localhost:8084', options);
+//var socket = io2.connect('https://service.swarmlab.io:55583');
+
+var msg2 = "hello";
+socket.emit('pingServer', msg2);
+
+
+
+//var socket = require('socket.io-client')('httpis://localhost:8099');
+socket.on('connect', function(){
+        console.error('connect ...');
+        //socket.emit("adhoc", 'Hallo World!')
+});
+socket.on('customEmit', function(data){
+        console.error('customEmit '+data);
+        //socket.emit("adhoc", 'Hallo World!')
+
+});
+socket.on('disconnect', function(){
+        console.error('disconnect');
+
+});
+        //socket.emit("adhoc", 'Hallo World!')
+
--- a/src/IoT/llo/iotclient.js
+++ b/src/IoT/llo/iotclient.js
@ -0,0 +1,178 @@
+var path = require('path');
+var app = require('express')();
+var http = require('http').Server(app);
+var io = require('socket.io')(http);
+
+const socketAuth = require('socketio-auth');
+
+
+const axios = require('axios');
+axios.defaults.timeout = 30000
+
+const helmet = require('helmet');
+
+
+const cors = require('cors')
+const whitelist = [
+        'http://localhost:3080',
+        'http://localhost:3081',
+        'http://localhost:3082'
+        ]
+const corsOptions = {
+  credentials: true,
+  methods: ['GET', 'PUT', 'POST', 'DELETE', 'OPTIONS'],
+  optionsSuccessStatus: 200, // some legacy browsers (IE11, various SmartTVs) choke on 204
+  allowedHeaders: [
+        'Content-Type',
+        'Authorization',
+        'X-Requested-With',
+        'device-remember-token',
+        'Access-Control-Allow-Origin',
+        'Access-Control-Allow-Headers',
+        'Origin',
+        'Accept'
+  ],
+  origin: function(origin, callback) {
+    if (whitelist.indexOf(origin) !== -1) {
+      callback(null, true)
+    } else {
+      callback(null, true)
+      //callback(new Error('Not allowed by CORS'))
+    }
+  }
+}
+
+
+app.use(helmet());
+
+
+
+app.get('/run', [
+    //check('access_token').isLength({ min: 40 }),
+    //check('llo').isBase64()
+  ],
+cors(corsOptions),  (req, res, next) => {
+
+  var RES = new Object();
+  RES.tmp_token = req.query["access_token"]
+  RES.datafile  = req.query["datafile"]
+  RES.service   = req.query["service"]
+  RES.action    = req.query["action"]
+
+
+  
+  RES.error = false
+  RES.error_msg = "ok"
+  res.json(RES)
+
+});
+
+app.post('/run', [
+    //check('access_token').isLength({ min: 40 }),
+    //check('llo').isBase64()
+  ],
+cors(corsOptions),  (req, res, next) => {
+      console.error('socket post');
+      io.emit("customEmit", 'data')
+
+      var RES = new Object();
+      RES.error = false
+      RES.error_msg = "ok"
+      res.json(RES)
+
+});
+
+socketoptions = {
+        secure:true,
+        reconnect: true,
+        rejectUnauthorized : false
+};
+
+
+// Client
+var io2 = require('socket.io-client');
+var socket = io2.connect('http://localhost:8084', socketoptions);
+//var socket = io2.connect('https://service.swarmlab.io:55583');
+
+var global = {}
+
+socket.on('connection', s => {
+    console.log(s)
+      console.error('socket2 connection');
+    global.id = s.id
+    s.emit('log', 'client');
+/*
+    var roomiot = 'iot'
+    s.emit('subscribe', roomiot);
+
+    s.on('customEmit', obj => {
+      console.error('socket2fromServer');
+      var data = obj+' test2 customeEdit '+id
+      console.error('from server2client ' + data);
+    });
+
+    s.on('message', function (data) {
+      console.log('from room '+data);
+      //io.emit("customEmit", data)
+   });
+   //s.to(room).emit('message', 'hi from server');
+    s.on('iot', function (data) {
+      console.log('from room '+data);
+      //io.emit("customEmit", data)
+   });
+
+    socket.on('iot', function (data) {
+      console.log('from room '+data);
+      //io.emit("customEmit", data)
+   });
+
+    socket.on('message', function (data) {
+      console.log('from room '+data);
+      //io.emit("customEmit", data)
+   });
+*/
+
+});
+
+    var roomiot = 'iot'
+    socket.emit('subscribe', roomiot);
+
+    socket.emit('log', 'client1');
+
+    socket.on('message', function (data) {
+      //console.log('from room ' + data);
+      console.log("from room iot "+JSON.stringify(data))
+      //io.emit("customEmit", data)
+   });
+
+
+io.on('connection', s => {
+      console.error('socket connection');
+    var roomiot = 'iot'
+    var id = s.id
+    s.on('pingServer', obj => {
+      console.error('socket.io pingServer');
+      //console.error(s);
+      console.error('fromclient '+obj);
+      var data = obj+' testfromclient '+id
+        socket.emit("pingServerEmit", data)
+        socket.emit('send', { room: roomiot, message: 'message iot' });
+    });
+
+    s.on('customEmit', obj => {
+      var data = obj+' test customeEdit '+id
+       //console.error('from server ' + data);
+        //s.emit("pingServerEmit", data)
+        socket.emit("customEmit", data)
+    });
+
+    //s.emit('message', 'message from server');
+
+    //s.emit("customEmit", 'data')
+
+
+});
+
+
+http.listen(3081, () => console.error('listening on http://localhost:3081/'));
+console.error('socket.io example');
--- a/src/IoT/llo/iotserver.js
+++ b/src/IoT/llo/iotserver.js
@ -0,0 +1,130 @@
+var path = require('path');
+var app = require('express')();
+var http = require('http').Server(app);
+var io = require('socket.io')(http);
+
+const socketAuth = require('socketio-auth');
+
+
+const cors = require('cors')
+const whitelist = [
+        'http://localhost:3080',
+        'http://localhost:3081',
+        'http://localhost:3082'
+        ]
+const corsOptions = {
+  credentials: true,
+  methods: ['GET', 'PUT', 'POST', 'DELETE', 'OPTIONS'],
+  optionsSuccessStatus: 200, // some legacy browsers (IE11, various SmartTVs) choke on 204
+  allowedHeaders: [
+        'Content-Type',
+        'Authorization',
+        'X-Requested-With',
+        'device-remember-token',
+        'Access-Control-Allow-Origin',
+        'Access-Control-Allow-Headers',
+        'Origin',
+        'Accept'
+  ],
+  origin: function(origin, callback) {
+    if (whitelist.indexOf(origin) !== -1) {
+      callback(null, true)
+    } else {
+      callback(null, true)
+      //callback(new Error('Not allowed by CORS'))
+    }
+  }
+}
+
+
+
+
+app.get('/run', [
+    //check('access_token').isLength({ min: 40 }),
+    //check('llo').isBase64()
+  ],
+cors(corsOptions),  (req, res, next) => {
+
+  var RES = new Object();
+  RES.code    = req.query["code"]
+      console.error('socket get from client' + RES.code);
+  
+  RES.error = false
+  RES.error_msg = "ok"
+
+      io.emit("iotdata", RES)
+      io.in('iot').emit('message', RES);
+  res.json(RES)
+
+});
+
+app.post('/run', [
+    //check('access_token').isLength({ min: 40 }),
+    //check('llo').isBase64()
+  ],
+cors(corsOptions),  (req, res, next) => {
+      console.error('socket post from client');
+      io.emit("customEmit", 'data')
+
+      var RES = new Object();
+      RES.error = false
+      RES.error_msg = "ok"
+      res.json(RES)
+
+});
+
+
+/*
+io.on('connection', s => {
+
+  s.on("iot", function (room) {
+    s.join(room);
+    console.error('hi');
+    s.to(room).emit('message', 'hi from server');
+    io.emit('iotdata', 'hi from server');
+  });
+
+});
+*/
+
+
+io.on('connection', s => {
+      console.error('socket connection');
+    var id = s.id
+    s.on('pingServerEmit', obj => {
+      console.error('socket.io pingServer');
+      var data = obj+' testserver'
+        io.emit("customEmit", data)
+        //io.broadcast.to('roomiot').emit('message', data)
+      io.in('iot').emit('message', data);
+      console.error('from client '+ s.id + ' obj ' + obj);
+    });
+
+   s.on('subscribe', function(room) {
+        console.log('joining room', room);
+        s.join(room);
+    })
+
+   io.on('unsubscribe', function(room) {
+        console.log('leaving room', room);
+        io.leave(room);
+    })
+
+   // when the client emits 'new message', this listens and executes
+   s.on('log', (data, room) => {
+			//console.log(util.inspect(data, false, null, true /* enable colors */))
+      //s.broadcast.to(room).emit('message', data)
+      s.to('iot').emit('message', data);
+      console.log('broadcast', data);
+
+  });
+    //s.emit('message', 'message from server');
+
+    //s.emit("customEmit", 'data')
+
+
+});
+
+
+http.listen(8084, () => console.error('listening on http://localhost:8084/'));
+console.error('socket.io example');
--- a/src/IoT/package-lock.json
+++ b/src/IoT/package-lock.json
--- a/src/IoT/package.json
+++ b/src/IoT/package.json
@ -0,0 +1,25 @@
+{
+  "name": "swarmlab-iot",
+  "version": "1.0.0",
+  "description": "swarmlab iot on node",
+  "main": "iotserver.js",
+  "scripts": {
+    "start": "node ./llo/iotserver.js"
+  },
+  "dependencies": {
+    "async": "^3.2.0",
+    "axios": "^0.20.0",
+    "bestikk-log": "^1.0.0-alpha.2",
+    "chai": "^4.2.0",
+    "cors": "^2.8.5",
+    "dirty-chai": "^2.0.1",
+    "express": "^4.17.1",
+    "express-validator": "^6.6.1",
+    "helmet": "^4.1.1",
+    "socket.io": "^2.3.0",
+    "socket.io-client": "^2.3.1",
+    "socketio-auth": "^0.1.1",
+    "url-exist-sync": "^1.0.2"
+  },
+  "devDependencies": {}
+}
--- a/src/browser-client/README.md
+++ b/src/browser-client/README.md
@ -0,0 +1,21 @@
+# bootstrap-vue-example
+
+## Project setup
+```
+npm install
+```
+
+### Compiles and hot-reloads for development
+```
+npm run serve
+```
+
+### Compiles and minifies for production
+```
+npm run build
+```
+
+### Lints and fixes files
+```
+npm run lint
+```
--- a/src/browser-client/babel.config.js
+++ b/src/browser-client/babel.config.js
@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/app'
+  ]
+}
--- a/src/browser-client/package-lock.json
+++ b/src/browser-client/package-lock.json
--- a/src/browser-client/package.json
+++ b/src/browser-client/package.json
@ -0,0 +1,62 @@
+{
+  "name": "bootstrap-vue-example",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "docs:build": "documentation build src/** -f html -o public/docs",
+    "docs:serve": "documentation build src/** -c jsdoc.conf.json  -f html -o public/docs",
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^1.2.32",
+    "@fortawesome/free-brands-svg-icons": "^5.15.1",
+    "@fortawesome/free-solid-svg-icons": "^5.15.1",
+    "@fortawesome/vue-fontawesome": "^2.0.0",
+    "@vue/compiler-sfc": "^3.0.1",
+    "asciidoctor": "^2.2.0",
+    "axios": "^0.20.0",
+    "bootstrap-vue": "^2.17.3",
+    "file-saver": "^2.0.2",
+    "jszip": "^3.5.0",
+    "mkdirp": "^1.0.4",
+    "multilang-extract-comments": "^0.3.3",
+    "socket.io-client": "^2.3.1",
+    "vue": "^2.6.12",
+    "vue-codemirror": "^4.0.6",
+    "vue-socket.io-extended": "^4.0.5",
+    "vue-sweetalert2": "^3.0.8",
+    "vuex": "^3.5.1"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "^4.5.7",
+    "@vue/cli-plugin-eslint": "^3.0.0",
+    "@vue/cli-service": "^4.5.7",
+    "vue-template-compiler": "^2.6.12"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/essential",
+      "eslint:recommended"
+    ],
+    "rules": {},
+    "parserOptions": {
+      "parser": "babel-eslint"
+    }
+  },
+  "postcss": {
+    "plugins": {
+      "autoprefixer": {}
+    }
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not ie <= 8"
+  ]
+}
--- a/src/browser-client/public/docs/README.adoc
+++ b/src/browser-client/public/docs/README.adoc
@ -0,0 +1,273 @@
+:description: IoT Example
+:keywords: iot, swarmlab
+:data-uri:
+:toc: right
+:toc-title: Table of contents
+:toclevels: 4
+:source-highlighter: highlight
+:icons: font
+:sectnums:
+
+{empty} +
+
+
+== Connect to socket Server
+
+Does something asynchronously and executes the EventBus on completion.
+
+[source,javascript]
+----   
+   this.SwarmabAsciiLabTemplate = {
+     "iot5": {
+       "id": 5,
+       "name": "auto5",
+       "img": "rinse.png",
+       "Servicios": [
+         {
+            "model":"Sentra", 
+            "doors":4
+         },
+         {
+            "model":"Maxima", 
+            "doors":4
+         },
+         {
+            "model":"Skyline", 
+            "doors":2
+          }
+       ]
+    }
+        this.$root.$emit('iot_add', this.SwarmabAsciiLabTemplate) // <1>
+----   
+<1>  EventBus is used for parent/child component communication.
+
+
+
+[TIP]
+====
+- *File:* /data/appl/ok/swarmlab-iot-example/browser-client/src/App.vue
+- *Line:* 131
+- *Code:*     async connect_to_iot(iot) {
+====
+
+== socketclose()
+
+[source,javascript]
+----   
+      this.$socket.client.close();
+----   
+
+
+
+[TIP]
+====
+- *File:* /data/appl/ok/swarmlab-iot-example/browser-client/src/components/doclive/runLlo.vue
+- *Line:* 101
+- *Code:*    async socketclose () {
+====
+
+== Socket subscribe
+
+[source,javascript]
+----   
+		      this.$root.$on('iot_add', (v) => {  // <1>
+         ...
+         })
+sdfsf
+    den to perni  sdfsf
+----   
+<1> EventBus is used for parent/child component communication.
+
+
+
+[TIP]
+====
+- *File:* /data/appl/ok/swarmlab-iot-example/browser-client/src/components/doclive/runLlo.vue
+- *Line:* 123
+- *Code:* 	mounted() {
+====
+
+== Destroy EventBus
+
+See 
+https://www.digitalocean.com/community/tutorials/vuejs-component-lifecycle[Vue.js Lifecycle Hooks^].
+
+*beforeDestroy*
+
+- beforeDestroy is fired right before teardown. Your component will still be fully present and functional.
+
+[source,javascript]
+----   
+ this.$root.$off('iot_add') // <1>
+----   
+<1> EventBus is used for parent/child component communication.
+
+
+
+[TIP]
+====
+- *File:* /data/appl/ok/swarmlab-iot-example/browser-client/src/components/doclive/runLlo.vue
+- *Line:* 157
+- *Code:*   beforeDestroy () {
+====
+
+== Open a socket
+
+See 
+https://www.digitalocean.com/community/tutorials/vuejs-component-lifecycle[  Vue.js Lifecycle Hooks^]
+
+*Created*
+
+- You are able to access reactive data and events that are active with the created hook. Templates and Virtual DOM have not yet been mounted or rendered:
+
+[source,javascript]
+----   
+  this.socketopen()
+----   
+
+
+
+[TIP]
+====
+- *File:* /data/appl/ok/swarmlab-iot-example/browser-client/src/components/doclive/runLlo.vue
+- *Line:* 179
+- *Code:* 		created () {
+====
+
+== Socket events
+
+[source,javascript]
+----   
+  this.$socket.client.emit('authenticate', 'logintoken');
+----   
+
+
+
+[TIP]
+====
+- *File:* /data/appl/ok/swarmlab-iot-example/browser-client/src/components/doclive/runLlo.vue
+- *Line:* 192
+- *Code:*      sockets: {
+====
+
+=== onError
+
+
+
+[TIP]
+====
+- *File:* /data/appl/ok/swarmlab-iot-example/browser-client/src/components/doclive/runLlo.vue
+- *Line:* 205
+- *Code:*       error(error) {
+====
+
+=== connect_error
+
+
+
+[TIP]
+====
+- *File:* /data/appl/ok/swarmlab-iot-example/browser-client/src/components/doclive/runLlo.vue
+- *Line:* 214
+- *Code:*       connect_error(error) {
+====
+
+=== connect_error
+
+
+
+[TIP]
+====
+- *File:* /data/appl/ok/swarmlab-iot-example/browser-client/src/components/doclive/runLlo.vue
+- *Line:* 223
+- *Code:*       disconnect(reason) {
+====
+
+=== Socket connect_timeout
+
+
+
+[TIP]
+====
+- *File:* /data/appl/ok/swarmlab-iot-example/browser-client/src/components/doclive/runLlo.vue
+- *Line:* 232
+- *Code:*       connect_timeout(reason) {
+====
+
+=== Socket reconnect
+
+
+
+[TIP]
+====
+- *File:* /data/appl/ok/swarmlab-iot-example/browser-client/src/components/doclive/runLlo.vue
+- *Line:* 241
+- *Code:*       reconnect(attemptNumber) {
+====
+
+=== connect_attempt
+
+
+
+[TIP]
+====
+- *File:* /data/appl/ok/swarmlab-iot-example/browser-client/src/components/doclive/runLlo.vue
+- *Line:* 249
+- *Code:*       reconnect_attempt(attemptNumber) {
+====
+
+=== Socket reconnecting
+
+
+
+[TIP]
+====
+- *File:* /data/appl/ok/swarmlab-iot-example/browser-client/src/components/doclive/runLlo.vue
+- *Line:* 257
+- *Code:*       reconnecting(attemptNumber) {
+====
+
+=== reconnect_error
+
+
+
+[TIP]
+====
+- *File:* /data/appl/ok/swarmlab-iot-example/browser-client/src/components/doclive/runLlo.vue
+- *Line:* 265
+- *Code:*       reconnect_error(error) {
+====
+
+=== unauthorized
+
+
+
+[TIP]
+====
+- *File:* /data/appl/ok/swarmlab-iot-example/browser-client/src/components/doclive/runLlo.vue
+- *Line:* 274
+- *Code:*       unauthorized(val) {
+====
+
+=== connected 
+
+
+
+[TIP]
+====
+- *File:* /data/appl/ok/swarmlab-iot-example/browser-client/src/components/doclive/runLlo.vue
+- *Line:* 283
+- *Code:*       socket_id_emit(val) {
+====
+
+=== Socket onMessage
+
+
+
+[TIP]
+====
+- *File:* /data/appl/ok/swarmlab-iot-example/browser-client/src/components/doclive/runLlo.vue
+- *Line:* 293
+- *Code:*       async adhocEmit(val) {
+====
+
--- a/src/browser-client/public/favicon.ico
+++ b/src/browser-client/public/favicon.ico
--- a/src/browser-client/public/index.html
+++ b/src/browser-client/public/index.html
@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title>bootstrap-vue-example</title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but bootstrap-vue-example doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>
--- a/src/browser-client/src/App.vue
+++ b/src/browser-client/src/App.vue
@ -0,0 +1,187 @@
+<template>
+  <div id="app">
+
+      <!-- ***************** nav items ****************** -->
+      <b-navbar toggleable="md"  class="navbar-secondary" >
+        <b-navbar-toggle target="nav_collapse"> </b-navbar-toggle>
+        <b-navbar-brand class="logo simple-text ti-swarmlab text-secondary">
+          Swarmlab.io IoT
+        </b-navbar-brand>
+          <b-collapse is-nav id="nav_collapse">
+            <b-navbar-nav>
+            
+            
+            </b-navbar-nav>
+
+            <!-- Right aligned nav items -->
+            <b-navbar-nav class="ml-auto">
+              <b-nav-item href="https://git.swarmlab.io:3000" target="_swarmlabgit"> Swarmlab_git </b-nav-item>
+              <b-nav-item > | </b-nav-item>
+              <b-nav-item href="https://api-client.swarmlab.io:8088/#/signin?redirect=%2Fdashboard" target="_swarmlab"> Lab_onDemand </b-nav-item>
+              <b-nav-item > | </b-nav-item>
+            <!--
+              <b-nav-form>
+                <b-form-input size="sm" class="mr-sm-2" type="text" placeholder="Search"/>
+                <b-button size="sm" class="my-2 my-sm-0" type="submit">Search</b-button>
+              </b-nav-form>
+            -->
+              <b-nav-item-dropdown right>
+
+                <!-- Using template slot -->
+                <template slot="button-content">
+                  <em>Template</em>
+                </template>
+
+                <b-dropdown-item >
+                    <button type="button"
+                          round
+                          class="btn btn-outline-info btn-sm"
+                          @click="connect_to_iot('mesh')">
+                          add</button>
+                </b-dropdown-item>
+
+              </b-nav-item-dropdown>
+
+              <b-nav-item > &nbsp; &nbsp; &nbsp;  </b-nav-item>
+
+                    <button type="button"
+                          round
+                          class="btn btn-outline-info btn-sm"
+                          @click="saveDocLive">
+                          Save As Zip</button>
+
+            </b-navbar-nav>
+
+          </b-collapse>
+      </b-navbar>
+
+      <!-- ***************** container items ****************** -->
+        <b-row>
+          <b-col cols="12">
+
+             <doc-live
+                style="background-color: #f8f9fa"
+              >
+              </doc-live>
+
+          </b-col>
+        </b-row>
+
+
+
+
+  </div>
+</template>
+
+<script>
+import DocLive from './components/DocLive.vue'
+import "@/assets/css/themify-icons.css";
+
+
+export default {
+  name: 'app',
+  components: {
+    DocLive
+  },
+  data() {
+    return {
+      show: true,
+      SwarmabAsciiLabTemplate:''
+    }
+  },
+	mounted() {
+  },
+  methods: {
+    saveDocLive() {
+      this.$root.$emit('asciilive_save','save')
+    },
+/**
+ *
+ * == Connect to socket Server
+ *
+ * Does something asynchronously and executes the EventBus on completion.
+ *
+ * [source,javascript]
+ * ----   
+ *    this.SwarmabAsciiLabTemplate = {
+ *      "iot5": {
+ *        "id": 5,
+ *        "name": "auto5",
+ *        "img": "rinse.png",
+ *        "Servicios": [
+ *          {
+ *             "model":"Sentra", 
+ *             "doors":4
+ *          },
+ *          {
+ *             "model":"Maxima", 
+ *             "doors":4
+ *          },
+ *          {
+ *             "model":"Skyline", 
+ *             "doors":2
+ *           }
+ *        ]
+ *     }
+ *         this.$root.$emit('iot_add', this.SwarmabAsciiLabTemplate) // <1>
+ * ----   
+ * <1>  EventBus is used for parent/child component communication.
+ *
+ */
+    async connect_to_iot(iot) {
+
+      if( iot == 'mesh' ){
+
+         this.SwarmabAsciiLabTemplate = {
+                        "iot5": {
+                            "id": 5,
+                            "name": "auto5",
+                            "img": "rinse.png",
+                            "Servicios": [
+                                {"model":"Sentra", "doors":4},
+                                {"model":"Maxima", "doors":4},
+                                {"model":"Skyline", "doors":2}
+                            ]
+                        }
+                        }
+
+
+          this.$root.$emit('iot_add', this.SwarmabAsciiLabTemplate)
+      }
+    }
+  }
+}
+</script>
+
+<style>
+  @import url('https://fonts.googleapis.com/css?family=Lato:400,700');
+
+  body {
+    background: #EEF1F4 !important;
+  }
+
+  .nav-background {
+    background: #353535;
+  }
+
+  .ti-swarmlab:before {
+        position: relative;
+        top:-5px;
+        right:-8px;
+        font-size: 1.5em;
+        font-weight: 300;
+        content: "\e606";
+        color: #222;
+        color: #74B3C8;
+        border-color: #c60000;
+}
+
+.ti-themify-logo:before {
+        content: "\e6d1";
+}
+
+  .menoutext {
+    font-family: 'Lato', sans-serif !important;
+  }
+
+</style>
--- a/src/browser-client/src/assets/css/themify-icons.css
+++ b/src/browser-client/src/assets/css/themify-icons.css
--- a/src/browser-client/src/assets/fonts/glyphicons-halflings-regular.448c34a.woff2
+++ b/src/browser-client/src/assets/fonts/glyphicons-halflings-regular.448c34a.woff2
--- a/src/browser-client/src/assets/fonts/glyphicons-halflings-regular.e18bbf6.ttf
+++ b/src/browser-client/src/assets/fonts/glyphicons-halflings-regular.e18bbf6.ttf
--- a/src/browser-client/src/assets/fonts/glyphicons-halflings-regular.f4769f9.eot
+++ b/src/browser-client/src/assets/fonts/glyphicons-halflings-regular.f4769f9.eot
--- a/src/browser-client/src/assets/fonts/glyphicons-halflings-regular.fa27723.woff
+++ b/src/browser-client/src/assets/fonts/glyphicons-halflings-regular.fa27723.woff
--- a/src/browser-client/src/assets/fonts/themify.eot
+++ b/src/browser-client/src/assets/fonts/themify.eot
--- a/src/browser-client/src/assets/fonts/themify.svg
+++ b/src/browser-client/src/assets/fonts/themify.svg
--- a/src/browser-client/src/assets/fonts/themify.ttf
+++ b/src/browser-client/src/assets/fonts/themify.ttf
--- a/src/browser-client/src/assets/fonts/themify.woff
+++ b/src/browser-client/src/assets/fonts/themify.woff
--- a/src/browser-client/src/assets/logo.png
+++ b/src/browser-client/src/assets/logo.png
--- a/src/browser-client/src/components/DocLive.vue
+++ b/src/browser-client/src/components/DocLive.vue
@ -0,0 +1,162 @@
+<template>
+<div>
+
+    <!--  menou -->
+    <div class="row"
+      v-show="showmenou == 1"
+    >
+
+              <div class="col-3">
+                  <div class="input-group-append">
+                      <button type="button"
+                        round
+                        v-if="columnviewdefault == '0'"
+                        class="ti-layout-sidebar-none btn btn-outline-info btn-sm"
+                        @click="fullscreen('max')">
+                        Max-Notebook View </button>
+
+                      <button type="button"
+                        round
+                        v-if="columnviewdefault == '1'"
+                        class="ti-layout-sidebar-right btn btn-outline-info btn-sm"
+                        @click="fullscreen('min')">
+                        Min-Notebook View</button>
+                   </div>
+               </div>
+
+               <div class="col-6">
+                <span></span>
+               </div>
+
+              <div class="col-3">
+                  <div class="input-group-prepend">
+                      <button type="button"
+                        round
+                        v-if="columncodedefault == '0'"
+                        class="ti-layout-sidebar-none btn btn-outline-info btn-sm"
+                        style="float: right;"
+                        @click="fullscreen('codemax')">
+                        Max-Code View </button>
+
+                      <button type="button"
+                        round
+                        v-if="columncodedefault == '1'"
+                        style="float: right;"
+                        class="ti-layout-sidebar-left btn btn-outline-info btn-sm"
+                        @click="fullscreen('codemin')">
+                        Min-Code View</button>
+                   </div>
+               </div>
+    </div>
+    <!-- menou -->
+
+
+
+    <div class="row" >
+
+                <div :class="columnview">
+                  <run-llo
+                    style="background-color: #f8f9fa"
+                  >
+                  </run-llo>
+                </div>
+
+                <div :class="columncode">
+                  <ad-hoc
+                    style="background-color: #f8f9fa"
+                  >
+                  </ad-hoc>
+                </div>
+    </div>
+
+ </div>
+</template>
+
+<script>
+import RunLlo from "./doclive/runLlo.vue";
+import AdHoc from "./doclive/AdhocView.vue";
+
+export default {
+  name: 'DocLive',
+  props: {
+  }, 
+  components: {
+    RunLlo,
+    AdHoc
+  },
+  data () {
+      return {
+        loading: false,
+        showhistory : 0,
+        productIndex: 1,
+        showmenou: 1,
+        columnviewdefault : 0,
+        columncodedefault : 0,
+        columnview : 'col-7 order-first',
+        columncode : 'col-5 order-last',
+        tutorMenou: 'student'
+      }
+    },
+      created: function () {
+    },
+  mounted() {
+      this.$root.$on('LLOshowmenounotebooks', () => {
+        this.showmenou = 1
+      }),
+    this.$root.$on('lloshowchallengehistory', (llo,active) => {
+      this.showhistory = 1
+    })
+    },
+   beforeDestroy () {
+    this.$root.$off('LLOshowmenounotebooks'),
+    this.$root.$off('lloshowchallengehistory') // working
+   },
+ methods: {
+         fullscreen(action){
+          if(action == 'max'){
+              this.columnview = 'col-11 order-first'
+              this.columncode = 'col-1 order-last'
+              this.columnviewdefault = 1
+              this.columncodedefault = 0
+              //set height iframe
+              this.$root.$emit('LLOresizemenounotebooks','max')
+              console.log(this.columnview)
+           }
+           else if(action == 'min'){
+              this.columnview = 'col-7 order-first'
+              this.columncode = 'col-5 order-last'
+              this.columnviewdefault = 0
+              this.columncodedefault = 1
+              //set height iframe
+              this.$root.$emit('LLOresizemenounotebooks','min')
+              console.log(this.columnview)
+           }
+           else if(action == 'codemax'){
+              this.columnview = 'col-1 order-first'
+              this.columncode = 'col-11 order-last'
+              this.columnviewdefault = 0
+              this.columncodedefault = 1
+              console.log(this.columnview)
+           }
+           else if(action == 'codemin'){
+              this.columnview = 'col-7 order-first'
+              this.columncode = 'col-5 order-last'
+              this.columnviewdefault = 1
+              this.columncodedefault = 0
+              this.$root.$emit('LLOresizemenounotebooks','min')
+              console.log(this.columnview)
+           }
+         },
+          async onAction (action) {
+              this.tutorMenou='tutor'
+              //this.tutorMenou='student'
+          }
+    }
+
+
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+</style>
--- a/src/browser-client/src/components/doclive/AdhocView.vue
+++ b/src/browser-client/src/components/doclive/AdhocView.vue
@ -0,0 +1,386 @@
+<template>
+  <div>
+
+                <b-row  no-gutters w-100 h-100 
+                  v-if="showlloedit"
+                >
+                     <b-col cols="12" sm="12" md="12"  >
+
+                <b-row >
+                  <b-col cols="5">
+                  <div class="input-group input-group-sm sm-3">
+                    <select
+                     class="custom-select custom-select-sm "
+                      @change="setKeymap"
+                      v-model="selected">
+                      <option 
+                        v-for="option in options" 
+                        v-bind:value="option.value">
+                          {{ option.text }}
+                      </option>
+                    </select>
+                    <div class="input-group-append">
+                        <button type="button"
+                          round
+                          class="btn btn-outline-info btn-sm"
+                          v-if="cmOptions.keyMap == 'sublime'"
+                          @click="infoFilter">
+                          i</button>
+                     </div>
+                   </div>
+                  </b-col>
+                  <b-col cols="7" >
+                    <div class="input-group input-group-sm d-flex justify-content-end">
+                    </div>
+                    <div class="input-group input-group-sm d-flex justify-content-end">
+                    <div class="input-group-append">
+                        <button type="button"
+                          round
+                          class="btn btn-outline-warning btn-sm"
+                          v-if="tryLLO[active]"
+                          @click="closelog(key)">
+                          Close</button>
+                     </div>
+                      <div class="input-group-append">
+                        <button  
+                          type="button"
+                          class="btn btn-outline-dark btn-sm"
+                          v-if="tryLLO[active]"
+                          @click="addlloasciisource"
+                          >Create task!</button>
+                      </div>
+                    </div>
+                  </b-col>
+                </b-row>
+
+                <div class="codemirror" >
+                  <codemirror
+                    ref="myCm"
+                    :value="code"
+                    :options="cmOptions"
+                     @cursorActivity="onCmCursorActivity"
+                    @ready="onCmReady"
+                    @focus="onCmFocus"
+                    @input="onCmCodeChange"
+                  ></codemirror>
+                </div>
+             </b-col>
+        </b-row>
+
+        <b-row  no-gutters w-100 h-100 
+          v-if="showlloedit"
+        >
+             <b-col cols="5" sm="5" md="5"  >
+
+                <div class="input-group-append">
+                  <button
+                    type="button"
+                    class="btn btn-outline-dark btn-sm"
+                    @click="getdata"
+                    >Get iot Data</button>
+                </div>
+
+             </b-col>
+             <b-col cols="7" sm="7" md="7"  >
+                  <input type="text"
+                                  class="form-control"
+                                  aria-label="Small"
+                                  aria-describedby="inputGroup-sizing-sm"
+                                  v-model="getinfo" 
+                                >
+
+             </b-col>
+
+        </b-row>
+
+
+
+	</div>
+</template>
+<script>
+import {mapState, mapGetters, mapActions,dispatch} from 'vuex'
+import Vue from 'vue'
+import store from '@/store/index'                              
+
+
+import { codemirror } from 'vue-codemirror'
+import JSZip from 'jszip';
+import FileSaver from 'file-saver';
+import 'codemirror/lib/codemirror.css'
+import 'codemirror/theme/neat.css'
+import'codemirror/addon/selection/active-line.js'
+
+import'codemirror/addon/hint/show-hint.js'
+import'codemirror/addon/hint/show-hint.css'
+import'codemirror/addon/hint/javascript-hint.js'
+import'codemirror/addon/selection/active-line.js'
+import'codemirror/addon/scroll/annotatescrollbar.js'
+import'codemirror/addon/search/matchesonscrollbar.js'
+import'codemirror/addon/search/searchcursor.js'
+import'codemirror/addon/search/match-highlighter.js'
+
+import'codemirror/mode/shell/shell.js'
+import'codemirror/addon/edit/matchbrackets.js'
+import'codemirror/addon/comment/comment.js'
+import'codemirror/addon/dialog/dialog.js'
+import'codemirror/addon/dialog/dialog.css'
+import'codemirror/addon/search/searchcursor.js'
+import'codemirror/addon/search/search.js'
+import'codemirror/keymap/sublime.js'
+import'codemirror/keymap/vim.js'
+
+import'codemirror/addon/fold/foldgutter.css'
+import'codemirror/addon/fold/brace-fold.js'
+import'codemirror/addon/fold/comment-fold.js'
+import'codemirror/addon/fold/foldcode.js'
+import'codemirror/addon/fold/foldgutter.js'
+import'codemirror/addon/fold/indent-fold.js'
+import'codemirror/addon/fold/markdown-fold.js'
+import'codemirror/addon/fold/xml-fold.js'
+import 'codemirror/lib/codemirror';
+import 'codemirror/addon/display/placeholder';
+
+export default {
+   components: {
+			codemirror
+   },
+   data () {
+    return {
+      swarmlabllo: 'https://git.swarmlab.io:3000/labs/examples-mpi2/raw/branch/master/llo-index.yml',
+      ssl:{},
+      getinfo:'',
+
+      code: '# Try!',
+      editchoice: '',
+      optionsedit: [
+        { text: 'code', value: 'code' },
+        { text: 'text', value: 'text' }
+      ],
+     llodesc:[{
+          llo_url                 : '',
+          llo_name                : '',
+          llo_author              : '',
+          llo_intro               : ''
+       }],
+     llo:[{
+          id                          :  0,
+          rm                          :  false,
+          data_info                   : 'Asciidoc \n',
+          data_code                   : '#Your source code',
+          data_service                : '',
+          code_datafile               : 'url',
+          code_name                   : '',
+          code_exec                   : '',
+          code_options                : '',
+          code_mime                   : '',
+          code_info                   : '',
+          code_code                   : '',
+          code_codeout                : '',
+          code_codeoutput             : 'console',
+          points                      : '',
+          challenge_question          : '',
+          code_challenge_question     : '',
+          challenge_answer            : '',
+          challenge_answer_hint       : '',
+          code_challenge_answer_hint  : '',
+          challenge_answer_source     : '',
+          challenge_answer_code_out   : '',
+          challenge_answer_code       : '',
+          code_challenge_answer_code  : ''
+       }],
+		  searchLLO: [],
+      searchLLOactive : false,
+      ADOC_html_code:'',
+      challenge:[],
+      action:'',
+      tryLLO:[],
+      service:'os2',
+      active:0,
+      activecount:0,
+      remove:'',
+      activeField:'',
+      bootstrap:false,
+      firstbootstrap:0,
+      htmlasciitmp:'',
+      datafile: 'https://git.swarmlab.io:3000/labs/examples-mpi2/raw/branch/master/0_netstat/data',
+      datadir: '0_netstat/data',
+      LearningObject:'',
+      showllo:true,
+      showlloedit:true,
+ 		selected: 'sublime',
+    options: [
+      { text: 'vim', value: 'vim' },
+      { text: 'sublime', value: 'sublime' }
+    ],
+    optionsmime: [
+      { text: 'sh', value: 'bash' },
+      { text: 'javascript', value: 'javascript' },
+      { text: 'python', value: 'python' },
+      { text: 'php', value: 'php' },
+      { text: 'sql', value: 'sq;' },
+      { text: 'xml', value: 'xml' },
+      { text: 'c', value: 'c' }
+    ],
+        pValidate: false,
+  cmOptions: {
+    tabSize: 2,
+    styleActiveLine: true,
+    lineNumbers: true,
+    lineSeparator:'\n',
+    line: true,
+    foldGutter: true,
+    gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
+    highlightSelectionMatches: { showToken: /\w/, annotateScrollbar: true },
+    styleSelectedText: true,
+    mode: 'shell',
+    hintOptions:{
+      completeSingle: false
+    },
+    keyMap: "sublime",
+    //keyMap: "vim",
+    matchBrackets: true,
+    showCursorWhenSelecting: true,
+    indentUnit:this.ADOC_html_code,
+    lineWrapping: true,
+    theme: 'neat',
+    refresh:true,
+    autofocus: false,
+    extraKeys: { "Ctrl": "autocomplete"  }
+   },
+    ADOC_html:[]
+   }
+  },
+  methods: {
+
+ async getdata () {
+
+              var field = this.getinfo
+              var log = await store.dispatch("pipelineLLO/get_data",{
+                code:field 
+              })
+
+ },
+
+   async showactive(index) {
+      this.topwindow(index)
+		},
+    onCmReady(cm) {
+      cm.on('change', (cm, chg) => {
+      }),
+      cm.on('keypress', () => {
+          cm.showHint({completeSingle:false})
+      })
+    },
+    onCmCursorActivity(a, b, c) {
+    },
+    onCmFocus(cm) {
+    },
+    onCmCodeChange(newCode) {
+      this.code = newCode
+      this.$root.$emit('socket_add',this.code)
+    },
+    handleChange() {
+    },
+    setKeymap () {
+      this.cmOptions.keyMap = this.selected
+    },
+		infoFilter() {
+				var title1='<h3>Playbook Images</h3>'
+					var winfop='<table  class="table table-striped table-sm ">'+
+ '<tr><td class="text-left">Shift-Tab</td> <td class="text-left">indentLess</td></tr>'+
+ '<tr><td class="text-left">Shift-Ctrl-K</td> <td class="text-left">deleteLine</td></tr>'+
+ '<tr><td class="text-left">Alt-Q</td> <td class="text-left">wrapLines</td></tr>'+
+ '<tr><td class="text-left">Ctrl-T</td> <td class="text-left">transposeChars</td></tr>'+
+ '<tr><td class="text-left">Alt-Left</td> <td class="text-left">goSubwordLeft</td></tr>'+
+ '<tr><td class="text-left">Alt-Right</td> <td class="text-left">goSubwordRight</td></tr>'+
+ '<tr><td class="text-left">Ctrl-Up</td> <td class="text-left">scrollLineUp</td></tr>'+
+ '<tr><td class="text-left">Ctrl-Down</td> <td class="text-left">scrollLineDown</td></tr>'+
+ '<tr><td class="text-left">Ctrl-L</td> <td class="text-left">selectLine</td></tr>'+
+ '<tr><td class="text-left">Shift-Ctrl-L</td> <td class="text-left">splitSelectionByLine</td></tr>'+
+ '<tr><td class="text-left">Esc</td> <td class="text-left">singleSelectionTop</td></tr>'+
+ '<tr><td class="text-left">Ctrl-Enter</td> <td class="text-left">insertLineAfter</td></tr>'+
+ '<tr><td class="text-left">Shift-Ctrl-Enter</td> <td class="text-left">insertLineBefore</td></tr>'+
+ '<tr><td class="text-left">Ctrl-D</td> <td class="text-left">selectNextOccurrence</td></tr>'+
+ '<tr><td class="text-left">Shift-Ctrl-Space</td> <td class="text-left">selectScope</td></tr>'+
+ '<tr><td class="text-left">Shift-Ctrl-M</td> <td class="text-left">selectBetweenBrackets</td></tr>'+
+ '<tr><td class="text-left">Ctrl-M</td> <td class="text-left">goToBracket</td></tr>'+
+ '<tr><td class="text-left">Shift-Ctrl-Up</td> <td class="text-left">swapLineUp</td></tr>'+
+ '<tr><td class="text-left">Shift-Ctrl-Down</td> <td class="text-left">swapLineDown</td></tr>'+
+ '<tr><td class="text-left">Ctrl-/</td> <td class="text-left">toggleCommentIndented</td></tr>'+
+ '<tr><td class="text-left">Ctrl-J</td> <td class="text-left">joinLines</td></tr>'+
+ '<tr><td class="text-left">Shift-Ctrl-D</td> <td class="text-left">duplicateLine</td></tr>'+
+ '<tr><td class="text-left">F9</td> <td class="text-left">sortLines</td></tr>'+
+ '<tr><td class="text-left">Ctrl-F9</td> <td class="text-left">sortLinesInsensitive</td></tr>'+
+ '<tr><td class="text-left">F2</td> <td class="text-left">nextBookmark</td></tr>'+
+ '<tr><td class="text-left">Shift-F2</td> <td class="text-left">prevBookmark</td></tr>'+
+ '<tr><td class="text-left">Ctrl-F2</td> <td class="text-left">toggleBookmark</td></tr>'+
+ '<tr><td class="text-left">Shift-Ctrl-F2</td> <td class="text-left">clearBookmarks</td></tr>'+
+ '<tr><td class="text-left">Alt-F2</td> <td class="text-left">selectBookmarks</td></tr>'+
+ '<tr><td class="text-left">Backspace</td> <td class="text-left">smartBackspace</td></tr>'+
+ '<tr><td class="text-left">Ctrl-K Ctrl-K</td> <td class="text-left">delLineRight</td></tr>'+
+ '<tr><td class="text-left">Ctrl-K Ctrl-U</td> <td class="text-left">upcaseAtCursor</td></tr>'+
+ '<tr><td class="text-left">Ctrl-K Ctrl-L</td> <td class="text-left">downcaseAtCursor</td></tr>'+
+ '<tr><td class="text-left">Ctrl-K Ctrl-Space</td> <td class="text-left">setSublimeMark</td></tr>'+
+ '<tr><td class="text-left">Ctrl-K Ctrl-A</td> <td class="text-left">selectToSublimeMark</td></tr>'+
+ '<tr><td class="text-left">Ctrl-K Ctrl-W</td> <td class="text-left">deleteToSublimeMark</td></tr>'+
+ '<tr><td class="text-left">Ctrl-K Ctrl-X</td> <td class="text-left">swapWithSublimeMark</td></tr>'+
+ '<tr><td class="text-left">Ctrl-K Ctrl-Y</td> <td class="text-left">sublimeYank</td></tr>'+
+ '<tr><td class="text-left">Ctrl-K Ctrl-C</td> <td class="text-left">showInCenter</td></tr>'+
+ '<tr><td class="text-left">Ctrl-K Ctrl-G</td> <td class="text-left">clearBookmarks</td></tr>'+
+ '<tr><td class="text-left">Ctrl-K Ctrl-Backspace</td> <td class="text-left">delLineLeft</td></tr>'+
+ '<tr><td class="text-left">Ctrl-K Ctrl-0</td> <td class="text-left">unfoldAll</td></tr>'+
+ '<tr><td class="text-left">Ctrl-K Ctrl-J</td> <td class="text-left">unfoldAll</td></tr>'+
+ '<tr><td class="text-left">Ctrl-Alt-Up</td> <td class="text-left">addCursorToPrevLine</td></tr>'+
+ '<tr><td class="text-left">Ctrl-Alt-Down</td> <td class="text-left">addCursorToNextLine</td></tr>'+
+ '<tr><td class="text-left">Ctrl-F3</td> <td class="text-left">findUnder</td></tr>'+
+ '<tr><td class="text-left">Shift-Ctrl-F3</td> <td class="text-left">findUnderPrevious</td></tr>'+
+ '<tr><td class="text-left">Shift-Ctrl-[</td> <td class="text-left">fold</td></tr>'+
+ '<tr><td class="text-left">Shift-Ctrl-]</td> <td class="text-left">unfold</td></tr>'+
+ '<tr><td class="text-left">Ctrl-H</td> <td class="text-left">replace</td></tr>'+
+'</table>'
+					
+					var title1=''
+					var winfo=''
+				this.$swal({
+					title: '<strong>Sublime Text bindings</strong>',
+					type: 'info',
+					html: winfop+title1+winfo,
+					showCloseButton: true,
+					showLoaderOnConfirm: false,
+					allowOutsideClick: false
+				})
+		}
+
+  },
+  computed: {
+    codemirror() {
+      return this.$refs.myCm.codemirror
+   }
+
+	},
+	mounted() {
+		this.$root.$on('asciilive_template_add', (v) => {
+			this.$nextTick(function () {
+        this.code = v
+			})
+		})
+
+	},
+  beforeDestroy () {
+		this.$root.$off('PipelineRunSwarmserviceLLOAdhoc')
+ },
+
+		created () {
+		}
+};
+</script>
+
+<style>
+.CodeMirror {
+
+
+    font-family: monospace;
+    height: 250px;
+}
+
+</style>
--- a/src/browser-client/src/components/doclive/runLlo.vue
+++ b/src/browser-client/src/components/doclive/runLlo.vue
@ -0,0 +1,341 @@
+<template>
+  <div>
+                <b-row  no-gutters w-100 h-100 
+                  v-if="showlloedit"
+                >
+                    <b-col cols="12" sm="12" md="12"  >
+                     
+                          <div v-for="(service, key) in iotdata" :key="key">
+                            <div v-for="item in service" :key="item.id">
+                              id: {{ item.id }}<br>
+                              name: {{ item.name }}
+                            </div>
+                          </div>
+
+                     </b-col>
+        </b-row>
+
+  
+
+  </div>
+</template>
+<script>
+import Vue from 'vue'
+import JSZip from 'jszip';
+import FileSaver from 'file-saver';
+export default {
+   components: {
+   },
+   data () {
+    return {
+      showlloedit:true,
+      issocket:'close',
+      socketdata:'',
+      code:[],
+        iotdata: [
+                    {
+                        "iot1": {
+                            "id": 1,
+                            "name": "auto1",
+                            "img": "rinse.png",
+                            "Servicios": [
+                                {"model":"Sentra", "doors":4},
+                                {"model":"Maxima", "doors":4},
+                                {"model":"Skyline", "doors":2}
+                            ]
+                        },
+                     },{
+                        "iot2": {
+                            "id": 2,
+                            "name": "auto2",
+                            "img": "shirt-2.png",
+                            "Servicios": [
+                                {"model":"Sentra", "doors":4},
+                                {"model":"Maxima", "doors":4},
+                                {"model":"Skyline", "doors":2}
+                            ]
+                        },
+                     },{
+                        "iot3": {
+                            "id": 3,
+                            "name": "auto3",
+                            "img": "iron.png",
+                            "Servicios": [
+                                {"model":"Sentra", "doors":4},
+                                {"model":"Maxima", "doors":4},
+                                {"model":"Skyline", "doors":2}
+                            ]
+                        },
+                     },{
+                          "iot4": {
+                            "id": 4,
+                            "name": "auto4",
+                            "img": "wring.png",
+                            "Servicios": [
+                                {"model":"Sentra", "doors":4},
+                                {"model":"Maxima", "doors":4},
+                                {"model":"Skyline", "doors":2}
+                            ]
+                        }
+                    }
+                ]
+   }
+  },
+  methods: {
+   async addiot() {
+      console.log(JSON.stringify(this.iotdata))
+		},
+   async socketopen () {
+        this.$socket.client.open();
+   },
+/**
+ *
+ * == socketclose()
+ *
+ * [source,javascript]
+ * ----   
+ *       this.$socket.client.close();
+ * ----   
+ *
+ */
+   async socketclose () {
+        this.$socket.client.close();
+   }
+
+  },
+  computed: {
+	},
+/**
+ *
+ * == Socket subscribe
+     *
+ * [source,javascript]
+ * ----   
+ *		      this.$root.$on('iot_add', (v) => {  // <1>
+ *          ...
+ *          })
+     * sdfsf
+     den to perni  sdfsf
+ * ----   
+ * <1> EventBus is used for parent/child component communication.
+ *
+ */
+	mounted() {
+		this.$root.$on('iot_add', (v) => {
+              this.iotdata.push(v); 
+              //this.iotdata = v
+              this.addiot()
+      this.$socket.client.emit('subscribe', 'iot');
+      //this.$socket.$subscribe('iot', payload => {
+      //  console.log(payload)
+      //});
+		})
+		this.$root.$on('socket_add', (v) => {
+              this.socketdata = v; 
+              console.log('socket_add ' + JSON.stringify(v))
+              this.$socket.client.emit('log', this.socketdata);
+		})
+	},
+/**
+ *
+ * == Destroy EventBus
+ * 
+ * See 
+ * https://www.digitalocean.com/community/tutorials/vuejs-component-lifecycle[Vue.js Lifecycle Hooks^].
+ * 
+ * *beforeDestroy*
+ * 
+ * - beforeDestroy is fired right before teardown. Your component will still be fully present and functional.
+ *
+ * [source,javascript]
+ * ----   
+ *  this.$root.$off('iot_add') // <1>
+ * ----   
+ * <1> EventBus is used for parent/child component communication.
+ *
+ */
+  beforeDestroy () {
+		this.$root.$off('iot_add')
+		this.$root.$off('socket_add')
+ },
+ /**
+ *
+ * == Open a socket
+ * 
+ * See 
+ * https://www.digitalocean.com/community/tutorials/vuejs-component-lifecycle[  Vue.js Lifecycle Hooks^]
+ * 
+ * *Created*
+ * 
+ * - You are able to access reactive data and events that are active with the created hook. Templates and Virtual DOM have not yet been mounted or rendered:
+ *
+ * [source,javascript]
+ * ----   
+ *   this.socketopen()
+ * ----   
+ *
+ */
+
+		created () {
+      this.socketopen()
+		},
+ /**
+ *
+ * == Socket events
+ * 
+ * [source,javascript]
+ * ----   
+ *   this.$socket.client.emit('authenticate', 'logintoken');
+ * ----   
+ *
+ */
+     sockets: {
+      connect() {
+        this.$socket.client.emit('authenticate', 'logintoken');
+
+        this.$socket.client.emit('socket_id_get', 'socketdatasend');
+        console.log('socket connected '+ 'socketdatasend' )
+        this.issocket = 'open'
+      },
+ /**
+ *
+ * === onError
+ *
+ */
+      error(error) {
+        console.log("socket error "+JSON.stringify(error))
+        this.issocket = 'close'
+      },
+ /**
+ *
+ * === connect_error
+ * 
+ */
+      connect_error(error) {
+        console.log("socket connect_error "+JSON.stringify(error))
+        this.issocket = 'close'
+      },
+ /**
+ *
+ * === connect_error
+ *
+ */
+      disconnect(reason) {
+        console.log("socket disconnect "+JSON.stringify(reason))
+        this.issocket = 'close'
+      },
+ /**
+ * 
+ * === Socket connect_timeout
+ * 
+ */
+      connect_timeout(reason) {
+        console.log("socket timeout "+JSON.stringify(reason))
+        this.issocket = 'close'
+      },
+ /**
+ * 
+ * === Socket reconnect
+ * 
+ */
+      reconnect(attemptNumber) {
+        console.log("socket reconnect attemptNumber "+JSON.stringify(attemptNumber))
+      },
+ /**
+ * 
+ * === connect_attempt
+ * 
+ */
+      reconnect_attempt(attemptNumber) {
+        console.log("socket reconnect_attempt "+JSON.stringify(attemptNumber))
+      },
+ /**
+ *
+ * === Socket reconnecting
+ *
+ */
+      reconnecting(attemptNumber) {
+        console.log("socket reconnecting "+JSON.stringify(attemptNumber))
+      },
+ /**
+ *
+ * === reconnect_error
+ *
+ */
+      reconnect_error(error) {
+        console.log("socket reconnect_error "+JSON.stringify(error))
+        this.issocket = 'close'
+      },
+ /**
+ *
+ * === unauthorized
+ *
+ */
+      unauthorized(val) {
+        console.log("socket unauthorized "+JSON.stringify(val))
+        this.issocket = 'close'
+      },
+ /**
+ *
+ * === connected 
+ *
+ */
+      socket_id_emit(val) {
+        console.log("socket id from server "+JSON.stringify(val))
+        console.log("socket id from serveri saved "+JSON.stringify(socketsave))
+        this.issocket = 'open'
+      },
+ /**
+ *
+ * === Socket onMessage
+ *
+ */
+      async adhocEmit(val) {
+        console.log("socket from server "+JSON.stringify(val))
+        this.issocket = 'open'
+            this.$wait.start('myRunInstance1');
+                // render begin
+                this.tryLLO = 'on'
+                if(this.firstbootstrap === 0 ){
+                    await this.bootsrapllo();
+                    this.firstbootstrap = 1
+                }
+                var output = log.data.out
+                var mydinfunction = `
+                  <div class="row">
+                      <b-col  class="" cols="12" sm="12"  md="12" >
+                            ${output}
+                       </b-col>
+                  </div>`
+
+                  try {
+                     let divascii = document.createElement('div');
+                     divascii.setAttribute("class", "container-fluid w-100 p-3 llotry")
+                     divascii.innerHTML = mydinfunction
+                     this.addtask(divascii);
+                  }catch (ex) {
+                      console.log(" logi error1 "+JSON.stringify(ex))
+                      return
+                  }
+            this.$wait.end('myRunInstance1');
+      },
+    async iotdata(val) {
+        console.log(" socket from iotdata "+JSON.stringify(val))
+      },
+    async message(val) {
+        console.log(" socket message "+JSON.stringify(val))
+      }
+  }
+
+};
+</script>
+
+<style>
+.CodeMirror {
+
+
+    font-family: monospace;
+    height: 750px;
+}
+
+</style>
--- a/src/browser-client/src/main.js
+++ b/src/browser-client/src/main.js
@ -0,0 +1,32 @@
+import Vue from 'vue'
+import App from './App.vue'
+import store from '@/store/index'
+import BootstrapVue from 'bootstrap-vue'
+import 'bootstrap/dist/css/bootstrap.css'
+import 'bootstrap-vue/dist/bootstrap-vue.css'
+import VueSweetalert2 from 'vue-sweetalert2';
+Vue.use(VueSweetalert2);
+
+
+
+
+import VueSocketIOExt from 'vue-socket.io-extended';
+import io from 'socket.io-client';
+
+const socket = io('http://localhost:8084', {
+  autoConnect: false
+});
+
+Vue.use(VueSocketIOExt, socket);
+
+
+
+Vue.use(BootstrapVue);
+
+Vue.config.productionTip = false
+new Vue({
+  el: '#app',
+  store,
+  render: h => h(App)
+})
+
--- a/src/browser-client/src/store/index.js
+++ b/src/browser-client/src/store/index.js
@ -0,0 +1,40 @@
+import Vuex from 'vuex'
+import Vue from 'vue'
+import { BootstrapVue, BootstrapVueIcons } from 'bootstrap-vue'
+// -------------- Playbook----------------
+import pipelineLLO from './modules/create_pipelineLLO'
+import { library, dom } from '@fortawesome/fontawesome-svg-core'
+
+import {faIcons, faSort, faChevronUp, faChevronDown, faBars, fas } from '@fortawesome/free-solid-svg-icons'
+import { faJs, faVuejs, fab,  faFontAwesome} from '@fortawesome/free-brands-svg-icons'
+import { FontAwesomeIcon, FontAwesomeLayers, FontAwesomeLayersText } from '@fortawesome/vue-fontawesome'
+
+
+
+
+
+Vue.use(Vuex)
+Vue.use(BootstrapVue);
+
+
+
+Vue.component('font-awesome-icon', FontAwesomeIcon)
+library.add(faIcons, faSort, faChevronUp, faChevronDown, faBars, faJs, faVuejs, fab, fas, faFontAwesome)
+dom.watch() // This will kick of the initial replacement of i to svg tags and configure a MutationObserver
+
+
+import 'bootstrap/dist/css/bootstrap.css'
+import 'bootstrap-vue/dist/bootstrap-vue.css'
+
+
+export default new Vuex.Store({
+  modules: {
+		pipelineLLO
+  },
+  state: { // = data
+  },
+  getters: { // = computed properties
+  },
+  mutations: {
+  }
+})
--- a/src/browser-client/src/store/modules/create_pipelineLLO.js
+++ b/src/browser-client/src/store/modules/create_pipelineLLO.js
@ -0,0 +1,72 @@
+import { mapState, mapActions, commit } from 'vuex'
+import store from '@/store/index'
+import axios from 'axios'
+
+export default {
+  namespaced: true,
+  state: {
+    llo: {},
+    socketid:''
+  },
+  getters: {
+		getllosrc (state, container) {
+        //console.log("js1 get "+JSON.stringify(state.llo))
+			return state.llo
+		},
+		getsocketid (state, container) {
+        //console.log("js1 get "+JSON.stringify(state.llo))
+			return state.socketid
+		}
+  },
+  mutations: {
+			setllo (state, data) {
+        //console.log("js1 set "+JSON.stringify(data))
+				state.llo=data;
+		},
+			setsocketid (state, data) {
+        //console.log("js1 set "+JSON.stringify(data))
+				state.socketid = data;
+		}
+  },
+  actions: {
+		async get_data({commit,rootGetters}, value) {
+			try {
+       
+        let p = await axios.get("http://localhost:8084/run", {
+          timeout: 45000,
+          params: {
+            code:  value.code
+          }
+        });
+ 
+        //var p = value.code
+        console.log("paramp "+JSON.stringify(p))
+				store.dispatch('pipelineLLO/setScriptllo', p)
+				return p;
+
+			} catch (e) {
+				if(e.error == "invalid_token"){
+					window.location.href = 'https://api-login.swarmlab.io:8089';
+				}else{
+				  var R = {
+            ERROR_str: e,
+            ERROR: 'yes'
+          }
+				  return R;
+        }
+			}
+		},
+		setScriptllo({commit}, value) {
+				//console.log("container "+value)
+			commit('setllo', value)
+		},
+		setsocketllo({commit}, value) {
+				//console.log("container "+value)
+			commit('setsocketid', value)
+		},
+		setScriptCodlogAction({commit}, value) {
+				//console.log("container "+value)
+			commit('setScriptCodelog', value)
+		}
+  }
+}
--- a/src/browser-client/swarmlabdoc.asciidoc_config
+++ b/src/browser-client/swarmlabdoc.asciidoc_config
@ -0,0 +1,13 @@
+:description: IoT Example
+:keywords: iot, swarmlab
+:data-uri:
+:toc: right
+:toc-title: Table of contents
+:toclevels: 4
+:source-highlighter: highlight
+:icons: font
+:sectnums:
+
+{empty} +
+
+
--- a/src/browser-client/swarmlabdoc.js
+++ b/src/browser-client/swarmlabdoc.js
@ -0,0 +1,90 @@
+
+'use strict';
+// set expandtab ts=4 sw=4 ai
+var fs = require('fs');
+var path = require('path');    
+
+const { resolve } = require('path');
+const { readdir } = require('fs').promises;
+
+/*
+* Read directory recursiv
+*/
+async function* getFiles(dir) {
+  const dirents = await readdir(dir, { withFileTypes: true });
+  for (const dirent of dirents) {
+    const res = resolve(dir, dirent.name);
+    if (dirent.isDirectory()) {
+      yield* getFiles(res);
+    } else {
+      yield res;
+    }
+  }
+}
+
+/*
+* multilang-extract-comments options
+*/
+var options = {
+  pattern: {
+    //name: 'Swarmlab',
+    //nameMatchers: ['*.vue'],
+    //singleLineComment: [{ start: '//' }],
+    multiLineComment: [{ start: '/**', middle: '*', end: '*/'}]
+  }
+}
+
+/*
+* Asciidoc config
+*/
+var asciidoc_config_file = 'swarmlabdoc.asciidoc_config';
+var asciidoc_config = fs.readFileSync(asciidoc_config_file, 'utf-8');
+
+// VARIABLES
+var filePathWrite = path.join(__dirname, 'public/docs/README.adoc');
+
+var STRING = {};
+STRING.path = 'src';  // search recursiv for comments
+STRING.adoc = '';  // convert adoc
+
+STRING.adoc +=  asciidoc_config;
+(async () => {
+    for await (const file of getFiles(STRING.path)) {
+        fs.readFile(file, {encoding: 'utf-8'}, function(err,data){
+            if (!err) {
+                var comments = require('multilang-extract-comments')(data,options);
+                Object.entries(comments).forEach(([key, val]) => {
+                    console.log(key + JSON.stringify(val));
+                    STRING.adoc += val.content
+                    STRING.adoc += '\n'
+                    STRING.adoc += '\n'
+                    STRING.adoc += '[TIP]'
+                    STRING.adoc += '\n'
+                    STRING.adoc += '===='
+                    STRING.adoc += '\n'
+                    STRING.adoc += '- *File:* ' + file 
+                    STRING.adoc += '\n'
+                    STRING.adoc += '- *Line:* ' + val.codeStart 
+                    STRING.adoc += '\n'
+                    STRING.adoc += '- *Code:* ' + val.code
+                    STRING.adoc += '\n'
+                    STRING.adoc += '===='
+                    STRING.adoc += '\n'
+                    STRING.adoc += '\n'
+
+                });
+                fs.writeFileSync(filePathWrite, STRING.adoc, 'utf-8', function (err) {
+                    if (!err) {
+                        console.log('ok');
+                    } else {
+                        console.log('Error Write ' + err);
+                    }
+                });
+
+            } else {
+                console.log('Error Read ' + err);
+            }
+        });
+    }
+})()
+
--- a/src/browser-client/vimsession/iot
+++ b/src/browser-client/vimsession/iot
@ -0,0 +1,149 @@
+let SessionLoad = 1
+if &cp | set nocp | endif
+let s:so_save = &so | let s:siso_save = &siso | set so=0 siso=0
+let v:this_session=expand("<sfile>:p")
+silent only
+cd /data/appl/ok/swarmlab-iot-example/browser-client/src
+if expand('%') == '' && !&modified && line('$') <= 1 && getline(1) == ''
+  let s:wipebuf = bufnr('%')
+endif
+set shortmess=aoO
+badd +0 /data/appl/ok/swarmlab-iot-example/browser-client/src/App.vue
+badd +0 /data/appl/ok/swarmlab-iot-example/browser-client/src/components/doclive/AdhocView.vue
+badd +0 /data/appl/ok/swarmlab-iot-example/browser-client/src/components/doclive/runLlo.vue
+badd +0 /data/appl/ok/swarmlab-iot-example/browser-client/src/store/modules/create_pipelineLLO.js
+badd +0 /data/appl/ok/swarmlab-iot-example/browser-client/src/main.js
+argglobal
+silent! argdel *
+$argadd App.vue
+set stal=2
+edit /data/appl/ok/swarmlab-iot-example/browser-client/src/App.vue
+set splitbelow splitright
+set nosplitbelow
+set nosplitright
+wincmd t
+set winminheight=1 winheight=1 winminwidth=1 winwidth=1
+argglobal
+setlocal fdm=manual
+setlocal fde=0
+setlocal fmr={{{,}}}
+setlocal fdi=#
+setlocal fdl=0
+setlocal fml=1
+setlocal fdn=20
+setlocal fen
+silent! normal! zE
+let s:l = 1 - ((0 * winheight(0) + 22) / 45)
+if s:l < 1 | let s:l = 1 | endif
+exe s:l
+normal! zt
+1
+normal! 0
+tabedit /data/appl/ok/swarmlab-iot-example/browser-client/src/components/doclive/AdhocView.vue
+set splitbelow splitright
+set nosplitbelow
+set nosplitright
+wincmd t
+set winminheight=1 winheight=1 winminwidth=1 winwidth=1
+argglobal
+setlocal fdm=manual
+setlocal fde=0
+setlocal fmr={{{,}}}
+setlocal fdi=#
+setlocal fdl=0
+setlocal fml=1
+setlocal fdn=20
+setlocal fen
+silent! normal! zE
+let s:l = 1 - ((0 * winheight(0) + 22) / 45)
+if s:l < 1 | let s:l = 1 | endif
+exe s:l
+normal! zt
+1
+normal! 0
+lcd /data/appl/ok/swarmlab-iot-example/browser-client/src
+tabedit /data/appl/ok/swarmlab-iot-example/browser-client/src/components/doclive/runLlo.vue
+set splitbelow splitright
+set nosplitbelow
+set nosplitright
+wincmd t
+set winminheight=1 winheight=1 winminwidth=1 winwidth=1
+argglobal
+setlocal fdm=manual
+setlocal fde=0
+setlocal fmr={{{,}}}
+setlocal fdi=#
+setlocal fdl=0
+setlocal fml=1
+setlocal fdn=20
+setlocal fen
+silent! normal! zE
+let s:l = 1 - ((0 * winheight(0) + 22) / 45)
+if s:l < 1 | let s:l = 1 | endif
+exe s:l
+normal! zt
+1
+normal! 0
+lcd /data/appl/ok/swarmlab-iot-example/browser-client/src
+tabedit /data/appl/ok/swarmlab-iot-example/browser-client/src/store/modules/create_pipelineLLO.js
+set splitbelow splitright
+set nosplitbelow
+set nosplitright
+wincmd t
+set winminheight=1 winheight=1 winminwidth=1 winwidth=1
+argglobal
+setlocal fdm=manual
+setlocal fde=0
+setlocal fmr={{{,}}}
+setlocal fdi=#
+setlocal fdl=0
+setlocal fml=1
+setlocal fdn=20
+setlocal fen
+silent! normal! zE
+let s:l = 1 - ((0 * winheight(0) + 22) / 45)
+if s:l < 1 | let s:l = 1 | endif
+exe s:l
+normal! zt
+1
+normal! 0
+lcd /data/appl/ok/swarmlab-iot-example/browser-client/src
+tabedit /data/appl/ok/swarmlab-iot-example/browser-client/src/main.js
+set splitbelow splitright
+set nosplitbelow
+set nosplitright
+wincmd t
+set winminheight=1 winheight=1 winminwidth=1 winwidth=1
+argglobal
+setlocal fdm=manual
+setlocal fde=0
+setlocal fmr={{{,}}}
+setlocal fdi=#
+setlocal fdl=0
+setlocal fml=1
+setlocal fdn=20
+setlocal fen
+silent! normal! zE
+let s:l = 1 - ((0 * winheight(0) + 22) / 45)
+if s:l < 1 | let s:l = 1 | endif
+exe s:l
+normal! zt
+1
+normal! 0
+lcd /data/appl/ok/swarmlab-iot-example/browser-client/src
+tabnext 1
+set stal=1
+if exists('s:wipebuf')
+  silent exe 'bwipe ' . s:wipebuf
+endif
+unlet! s:wipebuf
+set winheight=1 winwidth=20 shortmess=filnxtToOA
+set winminheight=1 winminwidth=1
+let s:sx = expand("<sfile>:p:r")."x.vim"
+if file_readable(s:sx)
+  exe "source " . fnameescape(s:sx)
+endif
+let &so = s:so_save | let &siso = s:siso_save
+doautoall SessionLoadPost
+unlet SessionLoad
+" vim: set ft=vim :