Skip to content

Commit

Permalink
Clean-up.
Browse files Browse the repository at this point in the history
  • Loading branch information
mitskevich committed Sep 6, 2022
1 parent 5c49386 commit cf75452
Show file tree
Hide file tree
Showing 9 changed files with 30 additions and 22 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,13 @@

[< Return to the table of contents](../../README.md)

As an additional feature, let's add the ability to rename rooms. Maybe we want to give that visualization to a customer, who may want to change the names later. We could also name the fridges, for example, but naming rooms will be enough to illustrate the principle.
As an additional feature, let's add the ability to rename rooms. Maybe we want to give that
visualization to a customer, who may want to change the names later. We could also name the
fridges, for example, but naming rooms will be enough to illustrate the principle.

Devices don't have registers for room names, so, the only place where we can store that data is the Overvis database. To do that, first, let's add the following attribute to the root `svg` tag (that's the first line in our visualization source):
Devices don't have registers for room names, so, the only place where we can store that data is the
Overvis database. To do that, first, let's add the following attribute to the root `svg` tag
(that's the first line in our visualization source):

```xml
<svg use-vis-data="yes"...
Expand All @@ -19,10 +23,14 @@ Now, let's change the room `text` tags as follows:
<text id="main-room-name" serif:id="main room name" x="45.195px" y="266.539px" style="font-family:'DroidSans', 'Droid Sans', sans-serif;font-size:36px;fill:rgb(211,211,211);" text-replacement="main-room-name" on-click="edit-visdata:main-room-name">Main Storage</text>
```
We added the `text-replacement` attribute in both tags. The content of the attribute is just some key, where the string representing the room name will be stored. By default, this string will be the content of the tag itself (e.g `Rental Storage Room`). Overvis will load this string when the visualization will be shown and replace the tag content with it.
We added the `text-replacement` attribute in both tags. The content of the attribute is just some
key, where the string representing the room name will be stored. By default, this string will be
the content of the tag itself (e.g `Rental Storage Room`). Overvis will load this string when the
visualization will be shown and replace the tag content with it.
`on-click="edit-visdata:..."` tells Overvis to open a form that will allow editing this stored string when a user clicks on the element.
`on-click="edit-visdata:..."` tells Overvis to open a form that will allow editing this stored
string when a user clicks on the element.
![Renaming the room](img-rename-room.png)
Next: [Conclusion of the example](../07-conclusion/README.md)
Next: [Conclusion of the example](../../04-conclusion/README.md)
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,6 @@ You can check the finished visualization code here:
This example has demonstrated the basic features of Overvis visualizations that are commonly used
among hundreds of dashboards that we created. With this knowledge, you can create any simple
equipment state representation for yourself or your customers.
[The next examples](../../../03-html-example/README.md) will introduce you to the more advanced
[The next examples](../../03-html-example/README.md) will introduce you to the more advanced
tricks. Or you can check the [reference document](/Overvis/References/Visualizations.md) and start
creating your own dashboards.
23 changes: 12 additions & 11 deletions Overvis/Guides/Visualizations/02-basic-example/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,20 @@

[< Return to the table of contents](../README.md)

In this tutorial, we will create a simple SVG visualization. It will represent some refrigeration equipment in a cold storage room and have several interactive elements.
In this tutorial, we will create a simple SVG visualization. It will represent some refrigeration
equipment in a cold storage room and have several interactive elements.

![Final result](img-result.png)

Table of contents:

* [Making a visualization graphics](01-design/README.md)
* [Exporting graphics as SVG file](02-export/README.md)
* [Binding the data to the graphics](03-bind-data/README.md)
* [Displaying parameter values as a text](03-bind-data/01-param-value/README.md)
* [Giving the ability to edit a device parameter value](03-bind-data/02-edit-value/README.md)
* [Showing/hiding elements depending on the parameter value](03-bind-data/03-show-hide/README.md)
* [Changing the color of an element depending on the parameter value](03-bind-data/04-change-color/README.md)
* [Adding a toggle control](03-bind-data/05-toggle/README.md)
* [Saving texts on the server](03-bind-data/06-store-text/README.md)
* [Conclusion of the example](03-bind-data/07-conclusion/README.md)
- [Making a visualization graphics](01-design/README.md)
- [Exporting graphics as SVG file](02-export/README.md)
- [Binding the data to the graphics](03-bind-data/README.md)
- [Displaying parameter values as a text](03-bind-data/01-param-value/README.md)
- [Giving the ability to edit a device parameter value](03-bind-data/02-edit-value/README.md)
- [Showing/hiding elements depending on the parameter value](03-bind-data/03-show-hide/README.md)
- [Changing the color of an element depending on the parameter value](03-bind-data/04-change-color/README.md)
- [Adding a toggle control](03-bind-data/05-toggle/README.md)
- [Saving texts on the server](03-bind-data/06-store-text/README.md)
- [Conclusion of the example](04-conclusion/README.md)
2 changes: 1 addition & 1 deletion Overvis/Guides/Visualizations/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ Table of contents:
- [Changing the color of an element depending on the parameter value](02-basic-example/03-bind-data/04-change-color/README.md)
- [Adding a toggle control](02-basic-example/03-bind-data/05-toggle/README.md)
- [Saving texts on the server](02-basic-example/03-bind-data/06-store-text/README.md)
- [Conclusion of the example](02-basic-example/03-bind-data/07-conclusion/README.md)
- [Conclusion of the example](02-basic-example/04-conclusion/README.md)
- [HTML visualizations](03-html-example/README.md)
- [Using JavaScript with Overvis API in visualizations](04-js-example/README.md)
- [Integrating Google Maps](05-google-maps/README.md)
Expand Down
2 changes: 1 addition & 1 deletion Overvis/Guides/Visualizations/_sidebar.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
- [Changing the color](/Overvis/Guides/Visualizations/02-basic-example/03-bind-data/04-change-color/)
- [Adding a toggle control](/Overvis/Guides/Visualizations/02-basic-example/03-bind-data/05-toggle/)
- [Saving texts on the server](/Overvis/Guides/Visualizations/02-basic-example/03-bind-data/06-store-text/)
- [Conclusion of the example](/Overvis/Guides/Visualizations/02-basic-example/03-bind-data/07-conclusion/)
- [Conclusion of the example](/Overvis/Guides/Visualizations/02-basic-example/04-conclusion/)
- [HTML visualizations](/Overvis/Guides/Visualizations/03-html-example/)
- [Using JS in visualizations](/Overvis/Guides/Visualizations/04-js-example/)
- [Integrating Google Maps](/Overvis/Guides/Visualizations/05-google-maps/)
Expand Down
1 change: 0 additions & 1 deletion Overvis/References/README.md

This file was deleted.

4 changes: 2 additions & 2 deletions Overvis/_sidebar.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,10 @@
- [Visualizations](/Overvis/User_Docs/Connection/)
- [Troubleshooting](/Overvis/User_Docs/Connection/)
- [FAQ](/Overvis/User_Docs/Connection/)
- [Guides](/Overvis/Guides/)
- Guides
- [Creating Visualizations](/Overvis/Guides/Visualizations/)
- [News](/Overvis/News/)
- [References](/Overvis/References/)
- References
- [API Reference](/Overvis/References/API/)
- [Device Templates Reference](/Overvis/References/Device_Templates)
- [Visualizations Reference](/Overvis/References/Visualizations)
Expand Down

0 comments on commit cf75452

Please sign in to comment.