How to connect Yun Mini with WebApps

Hi,

I'm having a difficult time right now and need as many help possible from you all here.
I have designed my own web apps for my YunMini temperature sensor. But I can't
make the data go to my web apps. In my javascript, I call for the YunMini IP address.
But it seems nothing happen.

So, I try to make a simple app for LED blink. It still seems not connected.
I also try to install node.js in my YunMini, but it says that the memory is full.
Compared with Yun, Yun has SD card slot.

Please anyone.. Help me on how to connect "YunMini" with WebApps.

Thanks.

SyukriY:
But it seems nothing happen.

That makes sense, since you have no code. Or at least you didn't post any code. We can't really offer any substantial advice without seeing what you're trying to do.

There are a limitless number of ways to do what you want to do. We need to see what approach you're trying to use to give you meaningful advice.

I also try to install node.js in my YunMini, but it says that the memory is full.
Compared with Yun, Yun has SD card slot.

Node.js is very large, and as you discovered, it will not fit in the internal flash memory disk space. You will need an external storage adapter to allow connection of an SD card or USB thumb drive. The Yun Mini looked very interesting to me at first, but the lack of storage expansion is a big turn off to me.

Be aware that arduino.cc (this site) and arduino.org (the makers of the Yun Mini) are two different companies - the founders of Arduino have had a falling out, and some of them left the original arduino.cc company to form their own competing arduino.org company. Because of that, experience with the Yun Mini might be limited on this forum, and you might have better luck contacting the folks at arduino.org.

Thanks for the reply.
I do aware of the different companies.

Can you suggest me the approach that you've mention above.?
For me, my approach is to control the Arduino using WebApps.
Actually, I've done my project to control LEDs on arduino Uno with my
WebApps using ESP8266. it was very interesting.

So know I want to try it with YunMini because of the build in WiFi module
in it. But it seems to have a problem.

Please, I would like to know more on how to connecting them.
Maybe, I do not understand the "approach" that you mention above.
What do you mean by that "approach".

I didn't offer an approach above, there are too many ways to do it. It would take a large book to cover them all.

The approach I mention is the way YOU are currently trying to do it.

You say you have tried to do it, and your javascript makes calls to the Yun Mini, but nothing happens. Please post all of your associated code so we can see how you are approaching this problem, and maybe someone will be able to figure out why it's not working the way you intend.

This is my javascript.

$(document).ready(function(){

var location="http://10.8.209.210:80"; //this is my YunMini IP

$("#pin6").on("slidestop", function()
{
var value = $("#pin6").val();
$.get(location,{pin:'06' + ('000' + value).substr(-3)});
alert(value);
});

$("#pin7").on("slidestop", function()
{
var value = $("#pin7").val();
$.get(location,{pin:'07' + ('000' + value).substr(-3)});
alert(value);
});

$("#pin8").on("slidestop", function()
{
var value = $("#pin8").val();
$.get(location,{pin:'08' + ('000' + value).substr(-3)});
alert(value);
});
});

and this is my html code for the apps.

ARDUINO IOT APPS

WELCOME TO ARDUINO IOT APPS

Click me to display Date and Time.

Arduino Apps LED Control

PIN DIGITAL 6:
PIN DIGITAL 7:
PIN DIGITAL 8

I'm sorry because I cannot post the code properly in here.
Dear, sir ShapeShifter.. I appreciate your every comment.
So, please stay and guide me for the better learning.

This is my Arduino coding

#include "Bridge.h"
#include "HttpClient.h"

void setup()
{
Bridge.begin();
Serial.begin(9600);

// Arduino PWM pin initialization
pinMode(6,OUTPUT);
pinMode(7,OUTPUT);
pinMode(8,OUTPUT);

// Arduino PWM pin default OFF on start
digitalWrite(6,LOW);
digitalWrite(7,LOW);
digitalWrite(8,LOW);
}

void loop()
{
Process wifiCheck;
wifiCheck.runShellCommand("/usr/bin/pretty-wifi-info.lua");
if(wifiCheck.available() > 0) // check if the esp is sending a message
{
//if(esp8266.find("+IPD,"))
//{
//delay(1000); // wait for the serial buffer to fill up (read all the serial data)
// get the connection id so that we can then disconnect
int connectionId = wifiCheck.read()-48; // subtract 48 because the read() function returns
// the ASCII decimal value and 0 (the first decimal number) starts at 48

wifiCheck.find("pin="); // advance cursor to "pin="

int pinNumber = (wifiCheck.read()-48)*10;
pinNumber += (wifiCheck.read()-48);

int pinValue = (wifiCheck.read()-48)*100; // get first number i.e. if the pwm value is 131 then the 1st number is 1, then multiply to get 100
pinValue += (wifiCheck.read()-48)*10; // get second number, i.e. if the pwm value is 131 then the 2nd number is 3, then multiply to get 10 and add to the first number
pinValue += (wifiCheck.read()-48); // get third number, i.e. if the pwm value is 131 then the 3rd number is 1, then add to the second number

analogWrite(pinNumber, pinValue); // led fading based on pwmValue

}
}

SyukriY:
I'm sorry because I cannot post the code properly in here.

See this for help: posting code in the forum

It looks like your code may be based on an ESP8266 example - the Yun operates completely differently, and I would be very surprised if any concepts used on the ESP8266 will carry over to a Yun example.

What you have in your sketch doesn't make sense. You are starting a Linux process to run /usr/bin/pretty-wifi_info.lua. This is an example script to collect information about your current WiFi connection. It generates output that looks like this:

Current WiFi configuration
SSID: Wireless Network Name
Mode: Client
Signal: 67%
Encryption method: WPA PSK (TKIP)
Interface name: wlan0
Active for: 44025 minutes
IP address: 192.168.42.132/255.255.255.0
MAC address: 90:A2:DA:F0:32:D2
RX/TX: 3146097/177599 KBs

While some of these values will change over time (like the active time and signal strength) they will in no way reflect any information about incoming web requests. You will never find the "pin=" keyword in that response, nor will you find any of the following information.

It looks like you are trying to set the output PWM value of several pins in response to commands from a web page. You need to use a different approach. There is an example that come with the IDE that should give you some guidance.

The Bridge Tutorial will get you very close to what you want. You can use that sketch as an example and modify it as required, but as it is now it will do what you want. You can adjust the PWM output of a pin by making a web request with the format:

http://<address>/arduino/analog/<pin>/<value>

Where:

  • is the node name or IP address of your Yun
  • is the pin number to be updated
  • is the output PWM value

For example: http:10.8.209.210/arduino/analog/6/128 to set pin to a PWM value of 128.

Then, your javascript will need to change to send requests in that format. I'm not a javascript expert, but the simplest way to do it usually involves using jquery or zepto. A minified copy of zepto is in the www folder under the Bridge library's TemperatureWebPanel example. That same folder includes a very simple example of making a web request using zepto.

This is the quick and easy way to accomplish what you want. But it's not particularly efficient - while the response time is sufficiently fast for many applications, it may be too slow for some uses. There are faster ways of accomplishing this, but that is a much more advance topic and involves a lot of Linux programming. It's better to start with small steps and learn the basics first.

I will try this. It may take some time to learn.
But, it's ok because I want to learn more.
Later, I'll give you the update.
Thank you, sir.

Dear ShapeShifter,

Here I want to give an update from the last discussion.

I've tried several times what we discussed last time.
The result is still "Not Connected".

From the 'Bridge' library, I try to simplify the code for my better understanding and add some kind of address (the webApps address) for the connection in Arduino.
In the WebApps (HTML code), I wrote the Arduino Yun Mini IP address to connect.

But it seems to not connected yet.
Where did I do wrong?
Please advise me.

Here I attach the Arduino code and HTML code for further discussion.

'Arduino code'

#include "Bridge.h"
#include "HttpClient.h"

String getAdd    = "http://10.60.204.99/?";
String toApps    = "file:///C:/laragon/www/UjiConnection/index.html?";

void setup() 
{
  pinMode(13, OUTPUT);
  digitalWrite(13, LOW);
  Bridge.begin();
  Serial.begin(9600);
  Serial.println("Getting connection....");
  digitalWrite(13, HIGH);
  delay(5000);
}

void loop(){
  HttpClient client;
  int pin, value;
   
    String request_string = getAdd + toApps; 
    // Make a HTTP request:
    client.get(request_string);
    // read the command
    //String command = client.readStringUntil('/');
    //Serial.print(command);
  
  // if there are incoming bytes available 
  // from the server, read them and print them:  
  while (client.available()) {
    char c = client.read();
    // Read pin number
    //pin = client.parseInt();
  
    // If the next character is a '/' it means we have an URL
    // with a value like: "/digital/13/1"
    //if (client.read() == '/') {
      //value = client.parseInt();
      //digitalWrite(pin, value);
    //}
    //else {
      //value = digitalRead(pin);
    //}
    //Serial.print(pin);
    Serial.print(c);
  }
  
  delay(15000);
}

the HTML code

<html>
	<head>
		<title>LED Control</title>
		<style>

		table {
			font-family: arial, sans-serif;
			border-collapse: collapse;
			width: 80%;
		}

		td, th {
			border: 2px solid #dddddd;
			text-align: left;
			padding: 8px;
		}
		
		</style>
	</head>
	<body>
	
	<table>
		<tr>
			<td>Control Example</td>
		</tr>
	</table>
	
	<table>
		<tr>
			<th>Switch</th>
			<th>Button</th>

		</tr>
		<tr>
			<td>DIGITAL PIN 13</td>
			<td><button id="pin13on">ON</button><button id="pin13off">OFF</button></td>
		</tr>
	</table>
	<script src="jquery-1.12.4.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			
			var address = "http://10.8.210.243/arduino/digital/13/";
			
			// DIGITAL PIN 13 FUNCTION 
			$("#pin13on").click(function(){
				// $.get("http://" + address, {
				$.get(address, {
					pin:13,
					value:1,
				});
			});
			
			$("#pin13off").click(function(){
				$.get(address, {
					pin:13,
					value:0,
				});
			});
		});
	</script>
	</body>
</html>

By the way, 'Bridge' library example used SdCard to make the localhost connection.
Different from my case, that Arduino Yun Mini doesn't have the SdCard.
But that will not be a problem, right?

I am very confused. I can't make sense of your code and what you are trying to accomplish.

Please take a step back and explain what you are trying to accomplish. What is your end goal? What are you trying to make happen, and what computers/systems are involved? If other products or servers are involved, please include links to them. Don't assume we know anything about what you are trying to do.

I your original code posted on August 10, it looks like you are trying to host a web page on the Yun, and that page contains controls that send requests back to the Yun, presumably to control PWM outputs. Of course, that code doesn't work, and I suggested you look at the Bridge Library example, as it does almost exactly what you want - act as a web request server that accepts incoming connections and controls output pins according to the request.

But now, this latest code you post looks to be doing something completely different. The HTML code appears to be making a similar type of request from the Yun, by accessing a URL with a format similar to that used in the Bridge Library example. (Although I don't quite understand how your pin and value arguments are supposed to work with the $.get call.)

Your HTML is making a request to the Yun, but the Yun isn't looking to service any such request. It isn't acting as a server, but instead is acting as a client. The Yun will ignore any incoming requests, and instead will repeatedly make an HTML request to "http://10.60.204.99/?file:///C:/laragon/www/UjiConnection/index.html?" and echo whatever is returned to the serial port.

What is the system at 10.60.204.99? Is it running a web server? Does it recognize a URL that has no page address, but has a parameter of "file:///C:/laragon/www/UjiConnection/index.html?"? This does not look like a properly formatted URL?

So, I repeat: in plain words, just what are you trying to accomplish?

:frowning: I think I almost got it, but alas...

Alright here is the beginning.. :slight_smile:

Small Idea : can control LEDs for home decoration with the WebApps (this will be converted into Android Apps).

Big Idea : Can control lamp/fan/air-conditioner in the house just using the apps that have a connection to a controller.

Goal : To control YunMini's LED with the WebApps using home wifi network as a server.

Problem : How can I make a connection between the web app and the YunMini (both as a client) using my home wifi.?

Sorry sir, if I'm confusing you.
Let's continue the discussion...

Shall we?

Please tell me if you need more information about what I'm doing.
Thank you, sir.

Please define "WebApps" - you use consistent capitalization on this word: is it the name of some service or server (if so, please give a link to it) or is it a generic term for an application that consists of web pages accessed by a browser? (I've been assuming the latter, but the way you consistently capitalize it makes me start to think it's a service or development environment, and if so it's something I don't know about.)

What system is 10.60.204.99?

What function does C:/laragon/www/UjiConnection/index.html perform?

If you want to use a web browser to control some outputs on the Yun, the Bridge Library example is a good starting point, and the Yun can handle it all by itself. But you have changed it around so much, and introduced this new IP address and file, that it makes me think you actually want something different.

You've given a basic answer to what you want to do, but there are other questions on n this and my previous post that are unanswered: please be so kgood no to answer them, and maybe I will understand what you are trying to do a bit better.

Hi, sir...

Please define "WebApps" - you use consistent capitalization on this word: is it the name of some service or server (if so, please give a link to it) or is it a generic term for an application that consists of web pages accessed by a browser? (I've been assuming the latter, but the way you consistently capitalize it makes me start to think it's a service or development environment, and if so it's something I don't know about.)

Yes, it is a web page that I created, which I normally interpret as WebApps. I created it using 'Notepad++' software.

What system is 10.60.204.99?

This is the IP address of PC where I display the webpage. I try to ping this with Yun coding, in order to make it connected with the webpage.

What function does C:/laragon/www/UjiConnection/index.html perform?

This, is also to get connected with the webpage. This the file address of the webpage.

Actually, I have try to use the Bridge library without change anything, but it's still not connected.
If it can be connected (Yun and the webpage) with the same server, further work will be easy.
What can I do now?

OK, so my initial impression was correct: you want to host a web page on the Yun, access that with a web browser on another computer, and have actions on that web page cause changes on the Yun. The Yun can do this, and the Bridge Library Example is a good starting point.

To keep this simple, take it one step at a time. The first step is to get the Bridge Library Example working. Load the example code, and using a web browser on your computer, manually enter some of the commands mentioned in the tutorial. Get that working, and understand what it does and how it works. For example, try these commands to turn the pin 13 LED on and off (does the Mini have have an LED on pin 13?):

Command number 1 will make pin 13 an output. Command number 2 will turn on the LED, while command 3 will turn it off.

As you play with this, understand that the "arduino.local" part of the URL is the address of your Yun: if you changed the name of your Yun, you will need to use that instead, or you may have to use the Yun's IP address. After the address, the "/arduino/ "token tells the Yun to send the rest of the URL to the sketch to be read by the YunClient object. Finally, the rest of the URL, for example "mode/13/output" or "digital/13/0" is the part that is sent to the sketch and processed by the code.

With that understanding, you can now define new commands. Update the code to process some new commands other than mode, digital, analog, etc that it already handles. Then test your new command by adding that command to the URL after the /arduino/ token (that token will be in every URL you send to the Yun.)

Once you can manually send the commands you want to the Yun, by manually typing the commands into your computer's browser address field, you are ready to try and make the web page. Create your HTML web page, and store it on the Yun in the /www/ folder. You can then access the page with a URL like http://arduino.local/pageName.html, where the filename is pageName.html.