Thinger.io IoT Platform Version 3.1.0

Date: 05/05/2021
Component: IoT Cloud Platform
Release Note: Improved HTML widgets and fixes

Additional Information

[3.1.0] - 2021-05-05

Added

  • New HTML widget for its use with time series data (i.e., display tables)

  • HTML widget now supports multiple values to be selected

Fixed

  • Install/upgrade custom plugin version
  • Geofences not working for some polygons
  • Fix led colors editor (each color in a single row)
  • Set X and Y axis limits on time series charts to prevent freezes with wrong values
  • Fix a problem with min and max y-axis on time series chart when set to zero
  • Fix legacy bug regarding buckets query & merging
  • Allow to modify an existing widget type
  • Fix template replacement when using {{}} as pattern

Improved

  • Starting a plugin will show its log by default (some plugins require boot time, so this provides feedback to user)
  • Plugins with master or latest tags will force an update when installing or upgrading
  • Better security when mounting volumes insides plugins
4 Likes

Great news!
Where can one find an example of how to involve variables from a bucket/device resource into the HTML code?
I tried the doubled curly braces with matching names, without success.
Could you post the HTML for your given example of a table from a bucket?
Thank you.
Laszlo

It should be
{{value.name}}
such as

A:{{value.v1}} B:{{value.v2}}


But it seems the values still cannot be used in a script yet.

1 Like

It should be
{{value.name}}

Thank you that was the key hint…
That works here for device resources, not for buckets with the same syntax.
I found out, that indexing is required since time series are involved.

Iout: {{value[1].Iout}}
Iout: {{value[2].Iout}}

worked.

Yuhoo! I can now make a dashboard with statistics of the last 72 hours from my buckets.
:grinning:

Here is the example for the table:

And here is the code! it is possible to use AngularJS, and Bootstrap3

<div style="width=100%; height:100%; overflow-y:scroll">
    <table class="table table-striped">
      <thead>
        <tr>
          <th>Time</th>
          <th>Inst Water Flow</th>
          <th>Inst Water Flow (l)</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="entry in value">
            <td>{{entry.ts | date:'medium'}}</td>
           <td>{{entry.inst_waterFlow}}</td>
           <td>{{entry.inst_waterFlow_liter}}</td>
        </tr>
      </tbody>
    </table>
</div>

Hope it helps!

3 Likes

What an improvement!
My old dashboard with stats for 24h:


needed 1223 lines of JSON data
New dashboard with stats for 2 weeks:

done with 86 lines of JSON data only!
:heart_eyes:

THANK YOU!

1 Like

Very nice addition, and i like the example used :wink: !
What’s the roadmap to add data of different device/buckets in the same widget?

Gus

Hi

Excellent work by @alvarolb and team! The improvements to the Time Series Chart widget were very good.

Approving the opportunity, I would like to suggest some improvements:

  • Include a two-factor authentication (2FA) option, similar to Google Authenticator. With this, the Administrator will be more secure in relation to the access of the “root” account.

  • Include the “Decimal Places” field in the Tachometer widget
    NOTE: As shown in the image, the Widget Tachometer does not have the “Decimal Places” option, similar to Widget Text. This ends up “confusing” the information. In the image, the Tachometer widget shows “053.00”, but ideally it should show “53”, when setting “Decimal Places” to 0.

  • Allow to change Widget Tachometer elements that represent the numeral. Ex: Change the color of the label (currently dark) to highlight the text information Ex: 53

  • Include the field “Text Color” and “Text Size” in the Clock Widget, just as it already exists in the Widget Text. Currently, the Clock Widget takes up a lot of space on the desktop browser dashboard. With this option, the Clock Widget could get smaller and take up less space on the screen.

  • Modify Widget Slice to only send data when the user unclick. Currently, if the user clicks and moves the slice strokes, he sends information to the device. The most appropriate behavior would be for Widget Slice to send the data when the user unclick. The current behavior overloads the GSM module, which uses AT commands. I will try to make a GIF with the serial monitor and the Slice widget. It is easier to demonstrate that it sends a lot of data to the device while moving “the ball”. Ideally, it would be for the user to send only when the user unclick “the ball”.

  • Allow Widget Slice to be set to Read Only. This ensures the use of the Widget Slice (data input on the device) and the visualization of the data, but it avoids accidental changes that the user can make when navigating the dashboard, such as an accidental click.

  • Check if the divergence in the Google Chrome Desktop and Chrome Mobile timer would be a bug. In Google Chrome Desktop, the timer information (from 5s) is displayed correctly Ex: Now, 1s, 2s, 3s …
    In Chrome Mobile, the same information was presenting to me as: Ex: 1m, 55s, 56s, 57s, 58s, 59s, 1m, 55s …
    That is, instead of “Now”, “1m” appeared. The count started at 55s on chorme Mobile, instead of “1s”

  • Include an alert in the button “Generate Random Credential” warning the user that there is already a registered credential. Something like “There is already a Credential registered. Do you want to change the credential?” “Yes No”. This implementation can prevent the user from changing the currently registered credential by accident.
    tela_5

I have been studying the Thinger.io platform in recent weeks, as I intend to hire the Thinger.io Cloud service for the company I intend to open. If you have more suggestions, send them here.

Thank you very much for the improvements in version 3.1.0 and 3.1.1

1 Like
  • Add font color selection option (Black, Blue, Red, Green …) on the Endpoint Details screen - Endpoint Type: Email

  • Allow the selection of the “Date” field of the Bucket Data in the Text/Value Widget.

This implementation would allow you to view the date of the last dataset transmitted from the device to Thinger.io.

  • View the last “Date” of the Bucket in the Widget when you enable “Show update” in the Widget Settings.

tela_03_t

  • Legend does not show in Full Screen mode of Time Series Chart Widget

  • Highlight the vertical lines at 00:00 to better signal the change of day

  • Add a refresh button to the PWA view.

Currently, if the user wants to refresh the screen, he needs to do the “pull screen down” move. But not all users know about this option. Therefore, a button that indicates the action of updating on the screen would be very useful. (See Image Below)

Captura de tela 2021-07-25 182737

.
.
.

  • Add Dashboard registration by QR CODE in Android and iOS app.

Check this discussion: Android App for Dashboard Thinger.io