{"id":13402729,"url":"https://github.com/swina/rockiot-ui","last_synced_at":"2025-07-01T12:03:42.581Z","repository":{"id":48292480,"uuid":"223551662","full_name":"swina/rockiot-ui","owner":"swina","description":"Webcomponent for IoT Dashboards, HTML Gauges and more","archived":false,"fork":false,"pushed_at":"2024-10-21T05:58:16.000Z","size":3469,"stargazers_count":49,"open_issues_count":7,"forks_count":7,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-07-01T12:02:30.754Z","etag":null,"topics":["gauge","html","html-gauge","iot","iot-gauges","vue","webcomponents"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/swina.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-11-23T07:48:28.000Z","updated_at":"2025-03-20T04:59:48.000Z","dependencies_parsed_at":"2024-10-22T07:41:14.956Z","dependency_job_id":null,"html_url":"https://github.com/swina/rockiot-ui","commit_stats":{"total_commits":71,"total_committers":1,"mean_commits":71.0,"dds":0.0,"last_synced_commit":"82ec4b5bcbf620e42e6d823f123f30c9619df9f3"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/swina/rockiot-ui","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/swina%2Frockiot-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/swina%2Frockiot-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/swina%2Frockiot-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/swina%2Frockiot-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/swina","download_url":"https://codeload.github.com/swina/rockiot-ui/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/swina%2Frockiot-ui/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262959563,"owners_count":23391057,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["gauge","html","html-gauge","iot","iot-gauges","vue","webcomponents"],"created_at":"2024-07-30T19:01:20.078Z","updated_at":"2025-07-01T12:03:42.551Z","avatar_url":"https://github.com/swina.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# rockiot-ui\n\n## v. 0.1.7 release notes (01/06/2020)\n\n- minor fixes\n\n\n## v. 0.1.6 release notes (01/02/2020)\n\n- removed double name display for gauges\n\n\n## Features\n\n**rockiot-ui** is a **webcomponent** (custom HTML element) created using Vue.js, to add awesome gauges, charts and other components in your HTML pages.\n\nTypical usage of **rockiot-ui** elements\n\n- IoT dashboards\n- SaaS metric dashboards\n- Weather Stations\n\nAll elements created with rockiot-ui are based on SVG.\n\n**rockiot-ui doesn't use any canvas**.\n\nFor this reason you can customize or even manipulate all elements using standard CSS classes and JS.\n\n### Elements ###\n\n**Gauges**\n\n- radial (adapted JS from [naikus](https://github.com/naikus/svg-gauge))\n- linear vertical\n- linear horizontal\n- level\n\n**Charts** \n- line charts\n- area charts\n- bar charts\n\n**Other**\n- number box\n\n\n\n## Demo\n\nA dashboard demo using **rockiot-ui**\n\nDemo [here](https://rockiot-gauge.firebaseapp.com)\n\n**demo** *folder contains all files to run a demo on a web server*\n\n\n## How to use\n\nInclude the main library in your HTML head.\n\n```\n\u003chtml\u003e\n  \u003chead\u003e\n  //...\n  \u003cscript src=\"https://unpkg.com/rockiot-ui@latest/build/rockiot.ui.min.js\"\u003e\u003c/script\u003e\n  //...\n\n```\n\nIf you plan to use all the elements \n\n```\n\u003c!-- linear gauge --\u003e\n\u003cscript src=\"https://unpkg.com/rockiot-ui@latest/build/rockiot.gauge.linear.js\"\u003e\u003c/script\u003e\n\u003c!-- radial, level gauge --\u003e\n\u003cscript src=\"https://unpkg.com/rockiot-ui@latest/build/rockiot.gauge.radial.js\"\u003e\u003c/script\u003e\n\u003c!-- charts --\u003e\n\u003cscript src=\"https://unpkg.com/rockiot-ui@latest/build/rockiot.chart.js\"\u003e\u003c/script\u003e\n```\n\nOtherwise include only the element library\n\n- ```https://unpkg.com/rockiot-ui@latest/build/rockiot.gauge.linear.js``` for all linear gauges\n- ```https://unpkg.com/rockiot-ui@latest/build/rockiot.gauge.radial.js``` for all radial gauges\n- ```https://unpkg.com/rockiot-ui@latest/build/rockiot.chart.js``` for all charts\n\n\n**Gauges**\n\n*Attributes for gauges*\n\n```type=\"gauge\"``` set a gauge component.\n\n```variation=\"radial\"``` set the gauge variation (radial/linear/level).\n\n\nradial\n```\n\u003crockiot-ui\n  type=\"gauge\"\n  variation=\"radial\"\n  serial=\"001\"\n  variation=\"radial\"\n  min=\"0\"\n  max=\"100\"\n  value=\"22\"\u003e\n\u003c/rockiot-ui\u003e\n```\n\n\n**Charts**\n\n\n\n```\n\u003crockiot-ui\n  type=\"chart\"\n  variation=\"line\"\n  serial=\"001\"\n  min=\"0\"\n  max=\"100\"\n  value=\"22\"\u003e\n\u003c/rockiot-ui\u003e\n```\n\n**Others**\n\nNumber Box\nA number box is simply a box with an animated number value.\n\n```\n\u003crockiot-ui\n  type=\"number-box\"\n  serial=\"nb-1\"\n  min=\"0\"\n  max=\"100\"\n  value=\"22\"\u003e\n\u003c/rockiot-ui\u003e\n```\n\n## Settings Panel (new)\n\nFrom this realease if attributes ```settings```  is set to 1, clicking on the settings icon you will access to the element setting panel.\n\nYou can change any attribute (not the id or the serial) and then apply to the element without page refresh needed.\n\nThe setting panel has also a Code button that will show the HTML element that reflects the current attributes. In this way you can easily configure your element, copy the HTML code and paste in your page.\n\n## Charts (new)\n\nFrom this release the chart element doesn't have any external dependency and works offline as well. \nThe charts library has been completely recoded and extended and is based on chartist.js\n\n\n\n\n\n\n## Attributes\n\nAs for standard HTML tags, **rockiot-ui** has different attributes in order to control and customize it.\n\n\n### Common attributes ###\n\n|attribute          |required   |default    | description       |remarks|\n|---\t            |---\t    |---\t    |---\t            |---\t|\n| **serial**   \t    | yes       | gauge   \t| Unique id   \t    | You can also add a different id attribute   \t|\n| **type**  \t| no   \t    | gauge   \t| Component type   \t    | gauge / chart / number-box  \t|\n| **name**  \t    | no  \t    | Gauge  \t| Component title   \t| *empty values supported*  \t|\n| **units**  \t    | no  \t    |     \t    | Component value units | *empty values supported*  \t|\n| **min**  \t        | no  \t    | 0  \t    | Minimum value   \t|   \t|\n| **max**  \t        | no  \t    | 100  \t    | Maximum value   \t|   \t|\n| **value**         | yes  \t    | 0  \t    | Initial value   \t|   \t|\n| **precision**     | no  \t    | 2  \t    | Value precision   | 0 - 5  \t|\n| **animation**     | no        | 500       | Animation duration (ms)| 0=no animation \u003cbr\u003e*keep below value update rating* |\n| **text-color**     | no  \t    | #777  \t    | title and units color |    \t|\n| **value-color**     | no  \t    | #cecece  \t    | display value color |    \t|\n| **value-bg-color**     | no  \t    | transparent  \t    | display value background color |    \t|\n| **value-border-color**     | no  \t    | 0px solid #eaeaea  \t    | display value border color | |\n| **control-color**     | no  \t    | #000  \t    | Control icons color |    \t|\n| **control-bg**     | no  \t    | #fff  \t    | Control icons bg color |    \t|\n| **test-icon**     | no  \t    |   \t    | Add Autotest icon to the control icons bar | *wrench icon*   \t|\n| **auto-test**     | no        | 0       | Run autotest automatically |\n| **settings**     | no        | 1       | Enable element settings panel (clicking on the settings icon) |\n\n### Gauges attributes ###\n\n|attribute          |required   |default    | description       |remarks|\n|---\t            |---\t    |---\t    |---\t            |---\t|\n| **variation**  \t| no   \t    | radial   \t| Gauge type   \t    | radial / linear / level \t|\n| **orientation**   | no  \t    | vertical  | Gauge orientation | horizontal / vertical \u003cbr\u003e*applied only for linear gauges*   \t|\n| **startangle**    | no  \t    | 135  \t    | Gauge start angle | *applied only for radial gauges*   \t|\n| **endtangle**     | no  \t    | 45  \t    | Gauge end angle   | *applied only for radial gauges*   \t|\n| **radius**        | no  \t    | 40  \t    | Gauge bar radius  | *applied only for radial gauges*   \t|\n| **size**          | no  \t    | md  \t    | Gauge size        | sm=small md=default lg=large   \t|\n| **scale**         | no  \t    | 0  \t    | Gauge major scale       | enable gauge scale : 0=disable 1=enable  \t|\n| **ticks**         | no  \t    | 10  \t    | Gauge scale ticks | gauge scale divisions   \t|\n| **smallscale**    | no  \t    | 0  \t    | Gauge minor scale | display a minor scale 0=disable 1=enable *applied if scale enabled* when enabled add 10 ticsk between each major scale division  \t|\n| **needle**         | no  \t    | 0  \t    | Gauge needle      | 0=disable 1=enable   \t|\n| **bar-color**     | no  \t    | #444  \t    | Gauge bar color |    \t|\n| **progress-color**     | no  \t    | #ff0000  \t    | Gauge progress bar color |    \t|\n| **scale-color**     | no  \t    | #aaa  \t    | Gauge scale color |    \t|\n| **scale-text-color**     | no  \t    | #aaa  \t    | Gauge scale text color |    \t|\n| **needle-color**     | no  \t    | #777  \t    | Gauge needle fill color |    \t|\n| **needle-stroke-color**     | no  \t    | #000  \t    | Gauge needle stroke color |    \t|\n| **auto-color**     | no  \t    | 0  \t    | Level gauge auto color | \u003c 10%(red) \u003cbr\u003e \u003c 25%(orange) \u003cbr\u003e \u003c 75%(user) \u003cbr\u003e \u003e 75%(green)|    \t|\n| **zones**     | no  \t    | ''  \t    | Zones Limits  | String of colors separated by comma\u003cbr\u003e*linear gauges only*    \t|\n\n### Charts attributes ###\n|attribute          |required   |default    | description       |remarks|\n|---\t            |---\t    |---\t    |---\t            |---\t|\n| **variation**  \t      | no   \t    | line     | Chart type   \t    | line / area / bar\t|\n| **chart-background**       | no  \t    | #ff0000  | Background color   |    \t|\n| **chart-area**        | no  \t    | .3  | Area opacity \u003cbr\u003e*area/bar charts*   |    \t|\n| **chart-line**        | no  \t    | 1   | Line stroke width    |    \t|\n| **chart-point**       | no  \t    | 0   | Line intersection point width   |    \t|\n| **chart-x-labels**    | no  \t    | 0   | 0 = no labels \u003cbr\u003e n = display label every n times   |    \t|\n| **chart-x-data**      | no  \t    | count    | count = increment  \u003cbr\u003enow = min:secs \u003cbr\u003etime = hrs:min:secs\u003cbr\u003edate = date   |    \t|\n| **progress-color**    | no  \t    | #ff0000  | Chart line/area color        |    \t|\n| **scale-color**       | no  \t    | #aaa     | Axis color         |    \t|\n| **scale-text-color**  | no  \t    | #aaa  \t | Axis text color    |    \t|\n\n### NumberBox attributes ###\n|attribute          |required   |default    | description       |remarks|\n|---\t            |---\t    |---\t    |---\t            |---\t|\n| **value-color**     | no  \t    | #cecece  \t    | display value color |    \t|\n| **value-bg-color**     | no  \t    | transparent  \t    | display value background color |    \t|\n| **value-border-color**     | no  \t    | 0px solid #eaeaea  \t    | display value border color\n\n\n## Helper CSS Classes\n\nYou can even customize **rockiot-ui** changing the default CSS classes\n\n| CSS class                         | description                       | remarks    |  \n|---\t                            |---\t                            |---\t    |\n| **rockiot-ui**                     | Component main container          | Component HTML Tag  \u0026lt;rockiot-ui/\u0026gt; \t|\n| **.rockiot-wrapper**                | Component wrapper           | Component container wrapper \t|\n| **.rockiot-wrapper-title**          | Component title/name             |  \t|\n| **.rockiot-ui-control**             | Component control icons bar             |  \t|\n| **.rockiot-ui-control-gauge-linear-vertical**             | Component control icons bar for linear vertical gauge           |  \t|\n\n## Events\n\nBy default **rockiot-ui** emits 2 default events.\n- setting\n- connect\n\nEach event returns the element attribute ```serial```\n\nHow to attach your function to emitted events by ```rockiot-ui```\n\n\n```\ndocument.getElementById(your_element_id)\n  .addEventListener('setting',(serial)=\u003e{\n    console.log(serial)\n    ....\n})\n```\n\nTo attach a common function to all ```rockiot-ui``` components:\n\n```\ndocument.querSelectorAll('rockiot-ui')\n  .addEventListener('setting',(serial){\n      console.log ( serial )\n      .... //your function\n})\n```\n\n# Release notes\n\n\n## v. 0.1.5 fixed readme\n\n## v. 0.1.4 release notes (01/01/2020)\n\n- fixed linear vertical display value with negative min setting\n\n## v. 0.1.3 release notes (12/15/2019)\n\n- charts using built-in library (removed google charts dependency )\n- new attributes for charts:\n  - chart-area : opacity settings for area charts\n  - chart-line : line charts line width\n  - chart-point: point width (line intersection)\n  - chart-x-labels : set xAxis labels interval ( ex. 3 = display xAxis label every 3 measures)  \n  - chart-x-data: xAxis label type ( count = counter , now = current mins:secs , time = hrs:mins:secs , date = current date ) \n- new settings attribute (all): see settings panel below\n\n\n## Roadmap\n\n- Styling with Tailwindcss\n\n## Versions\n\n### 0.1.3 \n\n- charts using built-in library (removed google charts dependency )\n- new attributes for charts:\n  - chart-area : opacity settings for area charts\n  - chart-line : line charts line width\n  - chart-point: point width (line intersection)\n  - chart-x-labels : set xAxis labels interval ( ex. 3 = display xAxis label every 3 measures)  \n  - chart-x-data: xAxis label type ( count = counter , now = current mins:secs , time = hrs:mins:secs , date = current date ) \n- new settings attribute (all): see settings panel below\n\n### 0.1.2   \nInitial release\n\n\n\n\n## VUE Project setup\nThe source code has been created using Vue.js so you can create your vue project and change it as per you needs.\n\n```\nnpm install\n```\n\n### Compiles and hot-reloads for development\n```\nnpm run serve\n```\n\n### Compiles and minifies for production\n\nUsing vue-cli (destination folder dist)\n\n```\nnpm run build\n\n```\nUsing laravel-mix (destination folder build)\n\n```\nnpm run prod\n\n```\n\n### Run your tests\n```\nnpm run test\n```\n\n### Lints and fixes files\n```\nnpm run lint\n```\n\n### Customize configuration\nSee [Configuration Reference](https://cli.vuejs.org/config/).\n\n\n\n### Credits\nFor radial gauge used and adapted JS library from [naikus](https://github.com/naikus/svg-gauge)\n\n### License\nThis project is licensed under MIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fswina%2Frockiot-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fswina%2Frockiot-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fswina%2Frockiot-ui/lists"}