A draft proposal of rewriting netjsongraph.js

[zhongl...@gmail.com]

Hi Federico, I wrote a simple map rendering demo and improved draft these few days. You can review it in your spare time. In the next few days, I am going to do some optimization and performance testing on demo, do you have a rough estimate about the number of nodes and links to be drawn?

[zhongl...@gmail.com]

And can you describe your thoughts about features of the indoor map in more detail? 

I have installed and run the openwisp controller on my machine.But the indoor map I previewed is just an uploaded image and a draggable coordinate.

Do you mean to support user-defined uploading of indoor images?

在 2019年4月4日星期四 UTC+8下午10:27:39，zhongl...@gmail.com写道：

[Federico Capoano]

Hi YuFei,

can you send the link to your demo? Are you adding more details to your GSoC application?

Regarding OpenWISP Controller, I wanted you to check the indoor map feature.

It would be really AWESOME if we allow netjsongraph.js to display a group of points with specific coordinates on a floorplan image (the coordinates are relative to the floorplan image in the background) and also draw links between them, basically the same thing we do now, but with the difference that there's a background image and that points have specific and not random coordinates.

This is also quite similar to the geographic map, in that case we don't have a background image but map tiles.

Regarding the map, investigate which solution you want to use, we already use leaflet and I'm familiar with that library but I'm open to use open layers, because it has an integration with Cesium JS (3D mapping library) which we could use in the future: https://github.com/openlayers/ol-cesium

Federico

--
You received this message because you are subscribed to the Google Groups "OpenWISP" group.
To unsubscribe from this group and stop receiving emails from it, send an email to openwisp+u...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[zhongl...@gmail.com]

Ok, Federico. I probably understand what you mean.

Now I will try to add the relevant functions of indoor map and watch CesiumJS.

My demo's root directory is https://github.com/KuTuGu/NetJSONDemo. Because I am going to change the demo now, the specific preview address may change. You can view it in the bottom link of the readme. You can also view it after I add the indoor map, I will update the progress in the email.

My draft proposal mainly added some details about the Solution of Demo Problem. Since I didn't know the details of the map before, I will perfect it after writing the indoor map example, describing the library and related technologies.

在 2019年4月4日星期四 UTC+8下午10:27:39，zhongl...@gmail.com写道：

Hi Federico, I wrote a simple map rendering demo and improved draft these few days. You can review it in your spare time. In the next few days, I am going to do some optimization and performance testing on demo, do you have a rough estimate about the number of nodes and links to be drawn?

[zhongl...@gmail.com]

Hi, Federico. I possibility completed all the basic functions of the demo.

I mainly add these features：

- An eyeIcon that switches between different rendering modes -- graph or map at the right-top corner.

- Some plugins are used to mark on the map, those at the left-top corner.

- A input label for user-defined uploading indoor map, which also at the right-top corner.

- A download button at the left-bottom corner to save the tagged map.

- The functions used are integrated in a js file.

I will update my draft proposal tomorrow.I have to go to bed now... 

See you tomorrow!

在 2019年4月4日星期四 UTC+8下午10:27:39，zhongl...@gmail.com写道：

Hi Federico, I wrote a simple map rendering demo and improved draft these few days. You can review it in your spare time. In the next few days, I am going to do some optimization and performance testing on demo, do you have a rough estimate about the number of nodes and links to be drawn?

[Federico Capoano]

It looks like a good start, good job!

I forgot to mention that we could get some inspiration from this application: https://github.com/ffrgb/meshviewer

You can see a demo here: https://regensburg.freifunk.net/netz/karte/

The difference between meshviewer and netjsongraph.js is that meshviewer is an application, while the goal of netjsongraph.js is to allow building customized meshviewers more easily.

The developers of meshviewer have done a lot of good work that we can reuse or replicate. Take a deep look at it.

Fed

[Federico Capoano]

Well in the truth I did mention meshviewer in the idea page and found out when I read your application in which you mention it :-)

Good that you are already looking at it. Your application looks a lot better than last time I took a look at it.

Keep improving the prototype and adding details to the application until the deadline.
I'm going to leave some comments on your application now.

Fed 

[zhongl...@gmail.com]

I tried to replace echarts with sigma, but its performance is not as good as I expected, such as nodes movement, animation and edges can't be clicked when optimizing with WebGL.

Here is the link：https://kutugu.github.io/NetJSONDemo/examples/netjson-sigma.html

Maybe I haven't provided an optimized configuration. By the way, the tutorial of this library is a bit less so debugging is slower. 

If it is difficult to optimize, I have to try a new library again.

在 2019年4月4日星期四 UTC+8下午10:27:39，zhongl...@gmail.com写道：

Hi Federico, I wrote a simple map rendering demo and improved draft these few days. You can review it in your spare time. In the next few days, I am going to do some optimization and performance testing on demo, do you have a rough estimate about the number of nodes and links to be drawn?

[Federico Capoano]

I see. Does the library you tried previously have some limitations?

The result of the other prototype was more encouraging.

Fed

[zhongl...@gmail.com]

The shortcomings of the demos I listed in the draft are part of the limitations of the Echarts library.

Echarts is a higher level library than d3 and sigma. It encapsulates the graph-force algorithm and other animations at the bottom. 

Although the development is simpler, the customization is a bit worse.

If we use Echarts, the most influential in netjsongraph is the parameters of the force algorithm, some of which have to remove. And it may not be convenient to add custom features and optimize them later.

I am going to try to adjust the sigma parameters to see if I can achieve a good result.

在 2019年4月4日星期四 UTC+8下午10:27:39，zhongl...@gmail.com写道：

Hi Federico, I wrote a simple map rendering demo and improved draft these few days. You can review it in your spare time. In the next few days, I am going to do some optimization and performance testing on demo, do you have a rough estimate about the number of nodes and links to be drawn?

[zhongl...@gmail.com]

Hi Federico:

I added the ability to search for elements and browser goback. Here is the link:

- https://kutugu.github.io/NetJSONDemo/examples/netjson.html

I provide two cases, one for the default elements and one for the test. You can simply type "test" in the input box and click the search button to test.

But since I don't have a server, I forged a local api request with the mock server in postman. So if I close the mock server, you may not be able to request the correct result (I'll try to keep the server opening).

You can also customize the request directly in netjsongraph.js by modifying the `updateSearchedElements` function. It provides a parameter -- your input value.

在 2019年4月4日星期四 UTC+8下午10:27:39，zhongl...@gmail.com写道：

Hi Federico, I wrote a simple map rendering demo and improved draft these few days. You can review it in your spare time. In the next few days, I am going to do some optimization and performance testing on demo, do you have a rough estimate about the number of nodes and links to be drawn?

[federico...@gmail.com]

Cool, how to test the browser history feature?

Fed

[zhongl...@gmail.com]

I tried to write the netjsongraph layout with SigmaJS, plus the previous Echarts library, which has four effects:

- https://kutugu.github.io/NetJSONDemo/examples/netjson.html

- https://kutugu.github.io/NetJSONDemo/examples/netjson-sigma.html

- https://kutugu.github.io/NetJSONDemo/examples/netjson-bigData.html

- https://kutugu.github.io/NetJSONDemo/examples/netjson-sigma-bigData.html

Below I list some of the differences between the two libraries:

- Echarts：

          - Advantage: Easy to get started. Support multi-function widget extension (Node element classification, different theme, like day-night mode in mesh viewer)

          - Disadvantage: 

                   1.It is not easy to customize the extension, and there may be some difficulties in encapsulating the deeper and later optimization (need to modify the source code). 

                   2.The parameters of the force algorithm is less, some of which have to remove.

                   3. The node Label is always displayed. Big data may be messy.

- Sigma：

          - Advantage: Some optimizations can be made easily When big data are rendered. Built-in features such as canvas scaling and panning, etc., and provide a number of plugins for different functions.

          - Disadvantage: 

                   1. Features require a lot of plugins, less tutorials, difficult to get started.

                   2. There are some problems in the handling of the drag event, such as the dragging of the edge and the node will not maintain the final position after dragging. The force layout must be stopped when dragging.

                   3. Under WebGL accelerated rendering, some features are not supported, such as edge's mouse events.

在 2019年4月4日星期四 UTC+8下午10:27:39，zhongl...@gmail.com写道：

Hi Federico, I wrote a simple map rendering demo and improved draft these few days. You can review it in your spare time. In the next few days, I am going to do some optimization and performance testing on demo, do you have a rough estimate about the number of nodes and links to be drawn?

[Federico Capoano]

Thanks for the recap YuFei. 

Which one do you like more? And which direction do you suggest taking?

The first link still looks like the best prototype to me.

Fedeirco