[SOLVED] Input text html widget example not working

Hi, im trying to figure out a way to make users edit a text box, in order to put information about the product, (so other users with access to that widget can see the info (there’s no problem if anyone can edit it).

What im thinking of (probably not the best idea) is to create a device that will be just a local device so i wont connect it to any hardware, inside that device create a variable in which i will store that info, then use the HTML canvas to create an input box and send that to the variable and then display it with a metric.

so my first try was just to send a number so i just used the input text html example seen in this link:
http://help.ubidots.com/developer-guides/html-canvas-widget-examples
but i cant make it work,

i copied all html,css,js code and selected my token and variable id and it doesnt register any changes.

so first of all:
Is there any better ways to use text input,output in ubidots?

and is there a problem with that example, am i doing something wrong?

Greetings, the example works properly and has been tested several times in the past for many users, please make sure that you are filling properly with your TOKEN and VARIABLE_ID the JS code and that you are adding the third party JQuery library: https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js

Please keep in mind that the HTML canvas is intended for developers with JS Knowledge, if you have not developed using it you can also simulate data without hardware as suggested in this article.

All the best

When using your example HTML canvass widget to enter a numerical value into a variable, does the “JS Library URI” field need to contain something?

I’m using your example as is, entered my token and variable ID in the JS section, connected it to the correct variable, but the widget does not update the variable. So I’m wondering if the “JS Library URI” field can remain empty if I use your example, or do I need to put something in there?

The examples from the help center remains mainly in the Jquery library, you have to add it to the third party libraries.

Regards

Ok, so for the other non-JS programmers out there who may not know how to do this, you can paste this URL into the “add 3rd party library”:

https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js

Next question - in order to use this widget to send a short text message instead of numbers, could you tell me what I need to change to the code? In the HTML section I changed the input type to text : <input type=“text”, but the widget still only accepts numbers.

Thanks,
Hein

Greetings,

please keep in mind that the HTML is intended for users with HTML and JS knowledge, if you are not familiarized with these concepts we strongly advise you to learn their basics before of trying to use it. Now, about your question, the input type of the text box in the HTML code is set as ‘number’, you should change the type if you wish to input text.

All the best

If you read my previous post you will noticed that what you suggested, I already did. But the input does not accept text, only numbers. Could you humour me by telling me what else needs to be changed?

Thanks,
Hein

Anyone in this community who can give a tip here, or do I really have to study JS first to get a simple widget working?

Greetings @agrisense,

this piece of html code allows me at my side to accept text:

<div class="notification--container" id="notification">
  <p>Value sent successfully</p>
</div>

<div class="send-value--container">
  <input type="text" placeholder="Enter text" class="send-value--input" id="value" />
  <button type="button" class="send-value--button" id="send-value">Send value</button>
</div>

In this link: https://industrial.ubidots.com/ubi/getchart/page/otSVTcntkU-QQscJoIVb8MrSoRA you can find the widget with that code that allows you to enter text inside the input tag.

All the best.

Like I already mentioned twice above, simply changing the input type in the html to “text” does not work. It still only accepts numbers.

Your widget that does work, what does the JS look like? Because in the example the JS has this line: value: parseInt($value.val(), 10)

I know nothing about JS but when putting parseInt into google I find that it parses an Int value - so this example cannot work with this JS.

Or am I wrong? Like I said, I don’t know JS, but I would like to get this widget working.

Thanks
Hein

I did not modify nothing in the JS code, btw, the code from the example will not work for you if you intend to send data to Ubidots because of the reasons below:

  1. The code is intended to send values, that is why this line value: parseInt($value.val(), 10)is presented, the JS parseInt() is intended to parse a string with only numbers value as a base10 number.
  2. Tha value for a variable must be numerical, strings or char arrays are not allowed.

If you plan to send strings, you will have to use the variable’s context to store them. In these articles you can find some examples of how to use the variable’s context:

You will have to edit the actual JS code to send data inside the context if your goal is to store strings instead of values.

All the best

<< btw, the code from the example will not work for you if you intend to send data to Ubidots because of the reasons below:

It would have been helpful if you told me this from the start instead of sending me on a goose chase.

Cheers

Hello, it´s possible to add a button for increment/decrement the value of the variable?

Example:
The user defines the value of variable = 10;
And i want to create buttons for incremente ++1 and decremente --1 values;

Many thks for attention!

This widget “Simple text box to set to variable” does not work either, I copy and paste the codes as they are in https://help.ubidots.com/developer-guides/html-canvas-widget-examples, but when changing the value and using the Ubidots Arduino Ethernet library does not change the value of the variable, while using the “Slider” control Widget does change the value of the variable.

image

I also tried the other mentioned library: https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js and it does not work either.

Attached Arduino code:

/********************************

Libraries included
/
#include <Ethernet.h>
#include <SPI.h>
#include <UbidotsEthernet.h>
/
*

Constants and objects
******************************/
/ Assigns the Ubidots parameters /
char const * TOKEN = “hKGMQQufatu9xIKhKFKjcTWlOFc8UH”; // Assign your Ubidots TOKEN
char const * DEVICE_LABEL = “arduino-ethernet”; // Assign the unique device label
char const * VARIABLE_LABEL = “latitud”; // Assign the unique variable label to get the last value
/
Enter a MAC address for your controller below /
/ Newer Ethernet shields have a MAC address printed on a sticker on the shield */
byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };

/* initialize the instance */
Ubidots client(TOKEN);

/********************************

Main Functions
******************************/
void setup() {
Serial.begin(9600);
//client.setDebug(true);// uncomment this line to visualize the debug message
/ start the Ethernet connection /
Serial.print(F(“Starting ethernet…”));
if (!Ethernet.begin(mac)) {
Serial.println(F(“failed”));
} else {
Serial.println(Ethernet.localIP());
}
/ Give the Ethernet shield a second to initialize /
delay(2000);
Serial.println(F(“Ready”));
}
void loop() {
Ethernet.maintain();
/
Getting the last value from a variable /
float value = client.getValue(DEVICE_LABEL, VARIABLE_LABEL);
/ Print the value obtained */
Serial.print("the value received is: ");
Serial.println(value,5);
delay(5000);
}

and so I received when I used the slider:

image

Thank you for your attention.

Greetings, the example from the help center works properly, you can find a live example here.

Please make sure that you are following all the steps from the tutorial, if you are an educational user do not forget to change the endpoint from industrial.api.ubidots.com to things.ubidots.com

All the best

1 Like

Excellent! thank you very much.

The link doesn’t work anymore, could you please send me a new link or perhaps the code itself?

Hello @Skarfoul

You find the code for that example at:

Nonetheless, if your goal is to enter data manually, I recommend using the Manual Input widget: