[SOLVED] Do we need a HTML-Canvas / Display Widget?

Please allow me to drop a proposal and explicitly ask you all for your comment:

Feature Request: Text/HTML-Output Widget to allow for Ubidots text-variables/messages to be displayed as text to the dashboard

I want to display short status messages as text or HMTL to the dashboard for debugging or normal operation of a fully remote IoT-device.

It could act as a Status banner (rolling text) or full display (in the graphic shape of a TV).
Allowing txt with 140 chars would be great.
Allowing HTML would give great flexibility in formatting.
Allowing Java resp. JavaScript would give an enorrmous flexibility for custom displays.

For shure there is an issue:
It would require a new dot-class allowing for storing a string/text

What are your ideas?
Could you use it as well? For what purpose?
Or is it too geeky?

Your comments welcome
Juergen

Thanks for the suggestion @JLeib it actually makes sense. While it is currently not possible for a “dot” to be a string, you can send strings in the “context” property:

{"value":11,"context":{"message":"hello there"}}

Then, in the metric widget settings you can read this context. This is how my variable with “lat” key looks like:

By the way, there’s an HTML editor in the widget settings, however do not expect a full HTML+Javascript rendering there!

Hope this helps

1 Like

SOLVED: YES … great … this solved my issue. Thanks for the quick response.
I was not aware of how powerful the metric widget is:

  1. After having added a (dummy) Metric Widget,
  2. I could change the “Widget settings” according to my needs
  3. and accessing the {context}-value.
    Thank a lot

Can I access the timestamp directly, in order to print like “Last update: {{timestamp:HHMMSS}}”

P.S. For Arduino-Collegues, we also need to amend the ArduinoLib to cope with the context-value

2 Likes

Use-Case:

Please allow me to add my use case as a template:
I am posting the status of my WLAN connection showing in the Dashboard like this:

Sending to Ubidots:

I am sending the following string to Ubidots:

[{“variable”: “57690345762542???”, “value”: -59.00000, “context”: {“status”: “Connected”, “SSID”: “Private_WLAN”, “IP”: “192.168.1.122”, “time”: “29.06.2016 15:41:33”}}]

The “variable”: “57690345762542???” is the ID of my variable “WLAN_Status”.

The “value” just carries in my case the WLAN signal strength (as provided using RSSI() on an ARDUINO MKR1000).

I am using “context”: in order to define my user-qualifiers “status”, “SSID”, “IP” and “time”:
{“status”: “Connected”, “SSID”: “Private_WLAN”, “IP”: “192.168.1.122”, “time”: “29.06.2016 15:41:33”}
These qualifiers I can address very comfortably in the Widget as shown below.

Widget Settings:

I have modified the “Widget Setting” of a standard “Metric Widget” to be:

or as HMTL:

That’s all you have to do.

Summary:

I love the result of using a Metric Widget for display text and additinal infos.
Maybe this solves your problem, Don ( http://community.ubidots.com/t/can-i-display-a-variable-as-a-text-string/416 )

3 Likes

Hi.
Brillant example, thank you.
I couldn’t get it working in node red with the “function” and “Ubidot” nodes but did manage to send your string by MQTT.
This is going to be great!
Thanks, Don

I am not having any luck with this. I see the context value changed on the data source, but the widget will not display the text contained in the context. Any ideas?

Hi JLeib,

Nice to see your suggestion here, I’m also looking for a solution like this.

Can you please share your code here?

Thank you so much!.

OK. I figured it out. I thought the python lib for ubidots didn’t support writing the context. I was wrong. I looked at the International Space Station example and found how they were writing the lat and long contexts. I then mirrored that in the save_value method with my own context strings and it worked. Example below:

pingResult = ping(Host1IP)
if pingResult:
    pingString="UP"
else:
    pingString="DOWN"
statusStr = Host1IP+"-"+pingString
Host1Status.save_value({'value':pingResult,'context':{'status':statusStr}})