Echo Sierra Studio

ATC Manager Continued

2022-04-16T00:00:00+02:00

It has been a long time but I have finally gotten more time to develop the game further. I have been able to update the game here and there but I have been busy with a lot of other stuff. Who would have thought building a free-to-play game would be financially unsustainable…

I’m thinking of making the game freemium, so you can still play with all of the existing maps (and maybe more free ones in the future). Making some maps paid, maybe with a monthly subscription, would allow me to hire developers to further build the game and add tons of maps.

I have gotten a lot of emails asking for custom build forks for education purposes. I want to emphasize that this game is exactly that a game. While I want to make the game as realistic as possible I’m not trying to build a true simulation game so keep that in mind.

I you have any questions, feel free to contact me: sem@esstudio.nl. Of course, I will not forget all of the kind donations, I will try to, somehow, in the future, give back to the people that have donated in the past.

I will share more soon!

*squawks 7600*

Illustrator Script Installer

2020-03-23T00:00:00+01:00

Easily manage the installation of Illustrator Scripts. A Windows Store version is coming soon.

Start by selecting or automatically searching for you Adobe Illustrator Directory. After that, you can use the “Add script” button to add new scripts to your installation. You can add scripts from text, files or popular script repositories.

Illustrator Script Installer

Easily install Illustrator Scripts

Launch

Feel free to leave suggestions by sending an email to illustratorscriptinstaller_support@esstudio.site

Authenticating Firebase JWT Tokens

2020-02-07T00:00:00+01:00

There might be circumstances where you would want to verify if a certain user is authenticated with firebase.

You don’t need the firebase admin module to verify and decode firebase JWT tokens. In the example below you can find a full implementation of this. I’m only using the default node.js modules http, https and crypto.

Example response JSON

{
    "data": {
        "iss": "https://securetoken.google.com/",
        "aud": "",
        "auth_time": 1581009428,
        "user_id": "9jnxi9kmz76ajnc4do47emrk8s1s",
        "sub": "9jnxi9kmz76ajnc4do47emrk8s1s",
        "iat": 1581082417,
        "exp": 1581086017,
        "email": "test@example.com",
        "email_verified": true,
        "firebase": {
            "identities": {
                "email": [
                    "test@example.com"
                ]
            },
            "sign_in_provider": "password"
        }
    }
}

You can optionally check if the “iss” value is equal to “https://securetoken.google.com/” to ensure the user is signed in with a specific firebase project.

Batch exporting Adobe Illustrator data sets

2020-01-20T00:00:00+01:00

Important: Data sets should not have invalid characters for filenames like: \ / : * ? “ < >

Open a random document
Create a new “Save” action where you simply save the file as a pdf document, Don’t forget to uncheck “View PDF after saving”
Select the action and click on the hamburger button (the 3 horizontal lines) in the top right, click “Batch”
Select your “Save” action
Choose “Data Sets” as the source (you should see “No options available”)
Choose a destination
Check Override Action “Save” Command

File Name: Choose either File + Data Set Name or Data Set Name. _Make sure your dataset names have valid filename characters so none of these: \ / : * ? “ < >

Click “Ok”

If you’re getting this error: current values have not been captured and will be discarded upon switching data sets. Proceed?, please refer to “Clean data sets”

Clean data sets

Download the following script: https://gist.github.com/sempostma/30ea44b8fbce7033752cb80b8eb1ffb1/archive/d1405b86decd4c4462e5ca224c8506d62cdb3ad4.zip
Open the zip file, you should find a “Clean Datasets.jsx” file.
Copy the file to C:\Program Files\Adobe\Adobe Illustrator CC 2019\Presets\\\Scripts or the equivalent script folder for your operating system.
Restart Illustrator
Run: “File->Scripts->Clean Datasets”

Source:

Key value wrapper around IndexedDB

2020-01-12T00:00:00+01:00

Local-storage can be slow because local-storage’s CRUD operations are synchronous so they pause rendering, script execution, etc. If you want to do anything more complex than storing a string in local-storage, you will have to serialize/de-serialize your data, which also causes an extra performance impact. Storing blobs and files is even more tricky, you will have to convert blobs and files to bloated base64 strings. You can solve all of this by using IndexedDB, but you will soon notice there’s a giant difference between the two API’s. This wrapper attempts to gap those differences.

Make sure to use the following polyfills when necessary: https://github.com/eligrey/Blob.js and https://github.com/stefanpenner/es6-promise

Example:

const cacheStore = require('./indexeddb-wrapper-file') // es6
import cacheStore from './indexeddb-wrapper-file' // commonjs
var cacheStore = window.cacheStore // compiled javascript

cacheStore.set('my_key', { myAwesome: 'complexObject' })
	.then(function() {
  		return cacheStore.get('my_key')
	}).then(function(myKey) {
      	console.log('myKey', myKey)
    })

After deleting the store in devtools you might see an error in the console, you should bump the “VERSION” any time you delete database stores so the browser knows it should create new object stores.

Steps to add a new store:

Name your store: const APP_PERSISTENCE = "APP_PERSISTENCE";
Add it to the array of stores: const stores = [CACHE_STORE, APP_PERSISTENCE];
Bump the version: const VERSION = n; to const VERSION = n+1;
Instantiate a wrapper around the store: const myStoreWrapper = indexedDBStorage(APP_PERSISTENCE)

You might want to check if “error.name === ‘QuotaExceededError’” in transaction.onabort. If this is the case, alert the user about there not being enough storage space on the device.

Javascript:

const VERSION = 1;
const CACHE_STORE = "CACHE_STORE";
const DATABASE_NAME = window.location.origin;
const stores = [CACHE_STORE];
const request = (window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB)
    .open(DATABASE_NAME, VERSION);
const db = new Promise((resolve, reject) => {
    request.onsuccess = (e) => {
        resolve(e.target.result);
    };
    request.onerror = (e) => {
        reject(e);
    };
    request.onupgradeneeded = (e) => {
        const db = e.target.result;
        stores.forEach((store) => {
            if (!db.objectStoreNames.contains(store)) {
                db.createObjectStore(store);
            }
        });
    };
    request.onblocked = (e) => {
        reject(e);
    };
});
const indexedDBStorage = (name) => {
    const get = (key) => db.then((database) => new Promise((resolve, reject) => {
        let transaction = database.transaction([name], "readonly");
        transaction.onabort = function (e) {
            let error = e.target.error;
            throw error;
        };
        const store = transaction.objectStore(name);
        let request = store.get(key);
        request.onsuccess = function (e) { resolve(e.target.result); };
        request.onerror = reject;
    }));
    const keys = () => db.then((database) => new Promise((resolve, reject) => {
        let transaction = database.transaction([name], "readonly");
        transaction.onabort = function (e) {
            let error = e.target.error;
            throw error;
        };
        const store = transaction.objectStore(name);
        let request = store.getAllKeys();
        request.onsuccess = function (e) { resolve(e.target.result); };
        request.onerror = reject;
    }));
    const set = (key, value) => db.then((database) => new Promise((resolve, reject) => {
        let transaction = database.transaction([name], "readwrite");
        transaction.onabort = function (e) {
            let error = e.target.error;
            throw error;
        };
        const store = transaction.objectStore(name);
        let request = store.put(value, key);
        request.onsuccess = () => {
            resolve();
        };
        request.onerror = reject;
    }));
    const indexedDbDelete = (key) => db.then((database) => new Promise((resolve, reject) => {
        let transaction = database.transaction([name], "readwrite");
        transaction.onabort = function (e) {
            let error = e.target.error;
            throw error;
        };
        const store = transaction.objectStore(name);
        let request = store.delete(key);
        request.onsuccess = resolve;
        request.onerror = reject;
    }));
    const purgeDatabase = () => db.then((database) => new Promise((resolve, reject) => {
        let transaction = database.transaction([name], "readwrite");
        transaction.onabort = function (e) {
            let error = e.target.error;
            throw error;
        };
        const store = transaction.objectStore(name);
        let request = store.clear();
        request.onsuccess = resolve;
        request.onerror = reject;
    }));
    const deleteDatabase = () => {
        window.indexedDB.deleteDatabase(window.location.origin);
    };
    return {
        get,
        set,
        delete: indexedDbDelete,
        purgeDatabase,
        deleteDatabase,
        keys
    };
};
export default indexedDBStorage(CACHE_STORE);

Typescript:

const VERSION = 1;
const CACHE_STORE = "CACHE_STORE";
const DATABASE_NAME = window.location.origin;

const stores = [CACHE_STORE];

const request = (window.indexedDB || (window as any).mozIndexedDB || (window as any).webkitIndexedDB)
.open(DATABASE_NAME, VERSION);

const db = new Promise((resolve, reject) => {
  request.onsuccess = (e) => {
    resolve((e.target as any).result);
  };
  request.onerror = (e) => {
    reject(e);
  };
  request.onupgradeneeded = (e) => {
    const db = (e.target as any).result;
    stores.forEach((store) => {
      if (!db.objectStoreNames.contains(store)) {
        db.createObjectStore(store);
      }
    });
  };

  request.onblocked = (e) => {
    reject(e);
  };

});

const indexedDBStorage = (name: string) => {
  const get = (key: string) => db.then((database: any) => new Promise((resolve, reject) => {
    let transaction = database.transaction([name], "readonly");
    transaction.onabort = function(e: any) {
      let error = e.target.error;
      throw error;
    };
    const store = transaction.objectStore(name);
    let request = store.get(key);
    request.onsuccess = function(e: any) { resolve(e.target.result as any); };
    request.onerror = reject;
  }));

  const keys = () => db.then((database: any) => new Promise((resolve, reject) => {
    let transaction = database.transaction([name], "readonly");
    transaction.onabort = function(e: any) {
      let error = e.target.error;
      throw error;
    };
    const store = transaction.objectStore(name);
    let request = store.getAllKeys()
    request.onsuccess = function(e: any) { resolve(e.target.result as any); };
    request.onerror = reject;
  }));

  const set = (key: string, value: any) => db.then((database: any) => new Promise((resolve, reject) => {
    let transaction = database.transaction([name], "readwrite");
    transaction.onabort = function(e: any) {
      let error = e.target.error;
      throw error;
    };
    const store = transaction.objectStore(name);
    let request = store.put(value, key);
    request.onsuccess = () => {
      resolve();
    };
    request.onerror = reject;
  }));

  const indexedDbDelete = (key: string) => db.then((database: any) => new Promise((resolve, reject) => {
    let transaction = database.transaction([name], "readwrite");
    transaction.onabort = function(e: any) {
      let error = e.target.error;
      throw error;
    };
    const store = transaction.objectStore(name);
    let request = store.delete(key);
    request.onsuccess = resolve;
    request.onerror = reject;
  }));

  const purgeDatabase = () => db.then((database: any) => new Promise((resolve, reject) => {
    let transaction = database.transaction([name], "readwrite");
    transaction.onabort = function(e: any) {
      let error = e.target.error;
      throw error;
    };
    const store = transaction.objectStore(name);
    let request = store.clear();
    request.onsuccess = resolve;
    request.onerror = reject;
  }));

  const deleteDatabase = () => {
    window.indexedDB.deleteDatabase(window.location.origin);
  };

  return {
    get,
    set,
    delete: indexedDbDelete,
    purgeDatabase,
    deleteDatabase,
    keys
  };
};

export default indexedDBStorage(CACHE_STORE);

Compiled Javascript:

(function() {
  var VERSION = 1;
  var CACHE_STORE = "CACHE_STORE";
  var DATABASE_NAME = window.location.origin;
  var stores = [CACHE_STORE];
  var request = (
    window.indexedDB ||
    window.mozIndexedDB ||
    window.webkitIndexedDB
  ).open(DATABASE_NAME, VERSION);
  var db = new Promise(function(resolve, reject) {
    request.onsuccess = function(e) {
      resolve(e.target.result);
    };

    request.onerror = function(e) {
      reject(e);
    };

    request.onupgradeneeded = function(e) {
      var db = e.target.result;
      stores.forEach(function(store) {
        if (!db.objectStoreNames.contains(store)) {
          db.createObjectStore(store);
        }
      });
    };

    request.onblocked = function(e) {
      reject(e);
    };
  });

  var indexedDBStorage = function indexedDBStorage(name) {
    var get = function get(key) {
      return db.then(function(database) {
        return new Promise(function(resolve, reject) {
          var transaction = database.transaction([name], "readonly");

          transaction.onabort = function(e) {
            var error = e.target.error; 
            throw error;
          };

          var store = transaction.objectStore(name);
          var request = store.get(key);

          request.onsuccess = function(e) {
            resolve(e.target.result);
          };

          request.onerror = reject;
        });
      });
    };

    var keys = function keys() {
      return db.then(function(database) {
        return new Promise(function(resolve, reject) {
          var transaction = database.transaction([name], "readonly");

          transaction.onabort = function(e) {
            var error = e.target.error; 
            throw error;
          };

          var store = transaction.objectStore(name);
          var request = store.getAllKeys();

          request.onsuccess = function(e) {
            resolve(e.target.result);
          };

          request.onerror = reject;
        });
      });
    };

    var set = function set(key, value) {
      return db.then(function(database) {
        return new Promise(function(resolve, reject) {
          var transaction = database.transaction([name], "readwrite");

          transaction.onabort = function(e) {
            var error = e.target.error;
            throw error;
          };

          var store = transaction.objectStore(name);
          var request = store.put(value, key);

          request.onsuccess = function() {
            resolve();
          };

          request.onerror = reject;
        });
      });
    };

    var indexedDbDelete = function indexedDbDelete(key) {
      return db.then(function(database) {
        return new Promise(function(resolve, reject) {
          var transaction = database.transaction([name], "readwrite");

          transaction.onabort = function(e) {
            var error = e.target.error;
            throw error;
          };

          var store = transaction.objectStore(name);
          var request = store["delete"](key);
          request.onsuccess = resolve;
          request.onerror = reject;
        });
      });
    };

    var purgeDatabase = function purgeDatabase() {
      return db.then(function(database) {
        return new Promise(function(resolve, reject) {
          var transaction = database.transaction([name], "readwrite");

          transaction.onabort = function(e) {
            var error = e.target.error;
            throw error;
          };

          var store = transaction.objectStore(name);
          var request = store.clear();
          request.onsuccess = resolve;
          request.onerror = reject;
        });
      });
    };

    var deleteDatabase = function deleteDatabase() {
      window.indexedDB.deleteDatabase(window.location.origin);
    };

    return {
      get: get,
      set: set,
      delete: indexedDbDelete,
      purgeDatabase: purgeDatabase,
      deleteDatabase: deleteDatabase,
      keys: keys
    };
  };

  var _default = indexedDBStorage(CACHE_STORE);

  window.cacheStore = _default;
})();

Export illustrator file to all important file formats.

2019-11-12T00:00:00+01:00

Final Export.jsx

Installation: Copy this file to your illustrator scripts folder:

For windows: C:\Program Files\Adobe\Adobe Illustrator CC 2019\Presets\\\Scripts

For Mac: Applications/Adobe Illustrator CC/Presets//Scripts

Usage: File->Scripts->Final Export

Questions? Send me an email.

Download link: ZIP

Output file structure:

  Output file structure:
  /
      /pictogram
           /.jpg
           /.png
      /icon
           /.jpg
           /.png
      /small
           /.jpg
           /.png
      /large
           /.jpg
           /.png
      /xlarge
           /.jpg
           /.png
      /.ai
      /.pdf
      /.svg
      /.jpg
      /.png
      /.dxf
      /.eps

TIP: You can keep exporting different variations to the same output folder as long as you choose a different name when exporting. Be carefull, files can be overidden.

Source GIST:

Editing Netlify CMS config.yml from Netlify CMS without plugins

2019-06-09T00:00:00+02:00

While experimenting I decided to see how much i could stretch the Netlify CMS capabilities regarding this issue.

Turns out you can almost do it. It wasn’t completely possible due to these 2 issues:

Because Netlify CMS can’t handle self-referential / circular data structures in the config.yml the file becomes very big and fields only work 1 depth down. For example my config can’t handle an object in an object in an object. You can get around this by increasing the depth but the file will become exponentially bigger. As it is, the file already has ~5000 😵 lines of code. Of course the upside is that you don’t have to look at it anymore…

Don’t use this in production. This could lead to data loss. This is an experiment, not a viable solution.

Add this to your config.yml:

I created a small node utility for creating the config from 2 different (less bulky) files.

Feel free to fork, tweak or otherwise change the code.

Markdown viewer for windows

2019-06-09T00:00:00+02:00

Want a very simple, windows-themed, clean and easy to use markdown viewer? Checkout Mardownify: https://www.microsoft.com/p/markdownify/9npgxqvzj8c0

The Microsoft store is packed with markdown viewers and editors. Most of the markdown apps are too expensive and overly complex. Some of those apps are already very old and don’t adhere to the windows 10 theme.

Markdownify is a simple and effective markdown/text file viewer. You can open any file in the markdown format. Markdownify can also view HTML files.

Source code: Github

Markdownify

Markdown Viewer

Launch

Click “File”->”Open” button in the toolbar to open files. You can also drag files into the app.

File Associations

Markdown

markdown
mdown
mkdn
md
mkd
mdwn
mdtxt
mdtext
text
Rmd

HTML

html
htm
xhtml
dhtml
phtml
jhtml
mhtml
rhtml
shtml
zhtml

Other releases:

You can check out the latest releases on Github or follow the latest releases through the Newsfeeder app:

Download latest version: https://www.microsoft.com/p/markdownify/9npgxqvzj8c0

Copyright

All rights reserved. No part of this software may be reproduced, distributed, or transmitted in any form or by any means without the prior written permission of the publisher, except certain noncommercial uses permitted by copyright law. For permission requests, contact the copyright holder.

All about debouncing, throttling and batching

2019-05-25T00:00:00+02:00

Failing to properly debounce or throttle taxing tasks in your javascript apps (or any other app for that matter) can really hurt performance. In this article i’ll list some examples of debounce and javascript functions.

If you are not up to date with debounce and throttle function, you check out this css.tricks article by dcorbacho. A debounce or throttle function is actually just a way of limiting how much a function can be called. The window scroll event for example can fire hundreds of times for every interaction. If you’re doing some heavy javascript layout tasks, every time this event is fired, you’re website is going to be very janky. Another place where debounce and throttling functions are often used is with limiting ajax calls. Most autocomplete search boxes use some kind of debounce or throttle function because sending a request for every keypress will hurt your app a lot.

I stole the debounce function from David Walsh and the throttle function from a comment on the same article:

Niall Campbell

Throttled can be simply achieved by changing the way the timeout is cleared/set. eg..
// Returns a function, that, as long as it continues to be invoked, will only
// trigger every N milliseconds. If immediate is passed, trigger the 
// function on the leading edge, instead of the trailing.
function throttle(func, wait, immediate) {
	var timeout;
	return function() {
		var context = this, args = arguments;
...
Note that the timeout is not destroyed and recreated for every call (unlike debouncing). Its destroyed after the timeout has completed and created on the first call after its been destroyed.

In simple terms, the function rate limits the amount of events to a certain time span. Visually a debounce function looks something like this:

The debounce snippet:

    // Returns a function, that, as long as it continues to be invoked, will not
    // be triggered. The function will be called after it stops being called for
    // N milliseconds. If `immediate` is passed, trigger the function on the
    // leading edge, instead of the trailing.
    
    var debounce = function debounce(func, wait, immediate) {
      var timeout;
      return function() {
        var context = this,
          args = arguments;
    
        var later = function later() {
          timeout = null;
          if (!immediate) func.apply(context, args);
        };
    
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
      };
    };
    
    // window.onscroll = debounce(200)(function() { 
    // 	console.log(window.pageYOffset ) 
    // });

The throttle snippet:

    // Returns a function, that, as long as it continues to be invoked, will only
    // trigger every N milliseconds. If `immediate` is passed, trigger the
    // function on the leading edge, instead of the trailing.
    
    var throttle = function throttle(func, wait, immediate) {
      var timeout;
      return function() {
        var context = this,
          args = arguments;
    
        var later = function later() {
          timeout = null;
          if (!immediate) func.apply(context, args);
        };
    
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
      };
    };
    
    
    // window.onscroll = throttle(200)(function() { 
    // 	console.log(window.pageYOffset ) 
    // });

The comments already explain the ‘immediate’ parameter. The basic difference is that without the ‘immediate’ parameter the function will wait and then fire. If the ‘immediate’ parameter is set to true it will fire and then wait. Be aware that if you set the ‘immediate’ parameter, the function won’t always fire at or after the last event because it might still be waiting because of a previous event. If ‘immediate’ is set to true the function will always fire after or at the last event. This can get you into trouble if you’re sending data or if you have to make sure you always have the latest. Only set the ‘immediate’ parameter if you know what you’re doing.

See the Pen NVMjJV by sempostma (@Afirus) on CodePen.

In some cases you want to all the data from all of the events but you still want debouncing/throttling behavior:

var update = debounce(500)(function(e) {
    // doFakeAjaxRequest(payload);
	console.log(e);
});

let delay = 0;
setTimeout(() => update('All'), delay += 300);
setTimeout(() => update('of'), delay += 300);
setTimeout(() => update('these'), delay += 300);
setTimeout(() => update('arguments'), delay += 600);
setTimeout(() => update('are'), delay += 300);
setTimeout(() => update('not'), delay += 300);
setTimeout(() => update('batched'), delay += 300);

If you don’t want event data to be lost you can use this function to get all of the arguments since the last time the debounce/throttle function fired:

const batched = delayedFunc => func => {
    const stack = [];
    const handler = delayedFunc(() => {
        func(stack);
        stack.splice(0, stack.length);
    });
    return function () {
        stack.push({ context: this, args: arguments });
        handler();
    }
}

Use the following snippets:

The debounce snippet:

// Returns a function, that, as long as it continues to be invoked, will not
// be triggered. The function will be called after it stops being called for
// N milliseconds. If `immediate` is passed, trigger the function on the
// leading edge, instead of the trailing.

var debounce = function debounce(wait, immediate) {
  return function(func) {
    var timeout;
    return function() {
      var context = this,
        args = arguments;

      var later = function later() {
        timeout = null;
        if (!immediate) func.apply(context, args);
      };

      var callNow = immediate && !timeout;
      clearTimeout(timeout);
      timeout = setTimeout(later, wait);
      if (callNow) func.apply(context, args);
    };
  };
};

// window.onscroll = debounce(200)(function() { 
// 	console.log(window.pageYOffset ) 
// });

The throttle snippet:

// Returns a function, that, as long as it continues to be invoked, will only
// trigger every N milliseconds. If `immediate` is passed, trigger the
// function on the leading edge, instead of the trailing.
var throttle = function throttle(wait, immediate) {
  return function(func) {
    var timeout;
    return function() {
      var context = this,
        args = arguments;

      var later = function later() {
        timeout = null;
        if (!immediate) func.apply(context, args);
      };

      var callNow = immediate && !timeout;
      clearTimeout(timeout);
      if (!timeout) timeout = setTimeout(later, wait);
      if (callNow) func.apply(context, args);
    };
  };
};

// window.onscroll = throttle(200)(function() { 
// 	console.log(window.pageYOffset ) 
// });

And then change your code to this:

var update = batched(debounce(500))(function(stackedEvents) {
	var payload = stackedEvents.map(function(frame) {
		return frame.args[0];
	}).join(' ');
    // doFakeAjaxRequest(payload);
    console.log(payload);
});

let delay = 0;
setTimeout(() => update('All'), delay += 300);
setTimeout(() => update('of'), delay += 300);
setTimeout(() => update('these'), delay += 300);
setTimeout(() => update('arguments'), delay += 600);
setTimeout(() => update('are'), delay += 300);
setTimeout(() => update('being'), delay += 300);
setTimeout(() => update('batched'), delay += 300);

Which will result in:

index.js:85 All of these 
index.js:85 arguments are being batched

Mindviewer - Create multi-user realtime editable mindmaps

2019-04-26T00:00:00+02:00

I created a web based realtime multi-user mindmapper. It’s currently free to use and I’m looking for feedback. You can try it by opening the same mindmapper in 2 different tabs.

You can connect to the other mindmap by creating a public mindmap and then clicking the share icon:

An example mindmap: https://mindviewer.esstudio.site/mindmapper.html?firestore=true&ispublic=true&room=l7nQoP3a5ni5mBkzApZY&theme=minimalistic

If you open this in multiple chrome browser tabs you will notice that the mindmaps update in realtime. I’m currently working on perfecting the exporting to image and html feature.

Using the icon you can change the background of your mindmap. This change is not synced to the other tabs so every user can have their own theme and custom background.

If you click the icon you go back to the home screen (don’t forget to save you’re changes by on one of the save buttons). You can download the mindmap by going to Mindviews->”Example mindmap”->Download.

The mindmaps are stored in a human readable format. You can view the stored information by opening the “.onmm” file with https://json-gui.esstudio.site File->Open from disk. You can make changes to your mindmap, save and open the newly created file in mindviewer by going to “Import mindmap” and dragging the mindmap into the file dropzone.

With mindviewer you can create mindmaps with other users in real-time. Support for saving mindmaps to google drive and your local machine coming soon. If you want to give feedback or tips, please send a message: mindviewer@esstudio.site or use the contact form: esstudio.site/contact.

Mindviewer Quick-launch

Mindviewer is a HTML5 web app which allows real-time mindmap building with multiple users.

Launch