lukasmaximus

lukasmaximus

Posting rules

As with any forum, we ask you to first search for an answer to your problem or visit the FAQ
section. If you really can't find the answer there, consider which forum category your question best fits. This ensures that all the relevant information is kept in the right places

Make sure to name your posts in a descriptive way

Posting code

In order to make it easier for other users to see your code and copy and paste it for testing
we request that you put your code between 3 back ticks ``` which will put your code in a nice scrollable window with context coloring of the syntax like so..

from m5stack import *
from m5ui import *

clear_bg(0x111111)

btnA = M5Button(name="ButtonA", text="ButtonA", visibility=False)
btnB = M5Button(name="ButtonB", text="ButtonB", visibility=False)
btnC = M5Button(name="ButtonC", text="ButtonC", visibility=False)

If you are posting information about a terminal command please use 2 back ticks `` before and after the command to differentiate it from code snippets like so.

sudo halt

Whats Allowed

Any posts related to M5Stack, ESP-32, IoT etc.. are more than welcome. If you want to talk off topic please post in the General section of the forum. No racist, political, religious or otherwise defamatory topics are accepted on these forums. Posting such content will result in your post being deleted and your account being banned.

Languages

If you would prefer to discuss M5stack in your mother tongue, Please avoid posting to the English language forums, as both users and admin will probably not understand you. There are foreign language sections in the global communities section which are monitored by a moderator who speaks that language. If you don't see your language yet and there is enough interest you can request an admin to create a new language group for you.

Thanks for reading and happy posting

lukasmaximus

If you had taken the time to try and combine the code I gave you for the AP connection and the webserver code from my hackster project, you'd find it wasn't that hard. Even a guy with my limited abilities was able to bust out a quick concept in a few minutes.

from m5stack import *
from m5ui import *
from uiflow import *
import network

try:
    import usocket as socket
except:
    import socket

def web_page():
    html = """<html><body>M5Stack AP Server</body></html>"""
    return html

ap = network.WLAN(network.AP_IF)
ap.active(True)
ap.config(essid='ESP32Luke')
ap.config(authmode=3, password='123456789')
lcd.clear()

response = None
s = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
s.bind(('192.168.4.1',80))
s.listen(5)

while True:
    conn, addr = s.accept()
    request = conn.recv(1024)
    request = str(request)
    print ('Content = %s' % request)
    lcd.print('Content = %s' % request,0,50,0xffffff)
    if ap.isconnected() == True:
        lcd.print('connected',0,0,0xffffff)
    else:
        lcd.print('not connected',0,0,0xffffff)
    response = web_page()
    conn.send('HTTP/1.1 200 OK\n')
    conn.send('Content-Type: text/html\n')
    conn.send('Connection: close\n\n')
    conn.sendall(response)
    conn.close()

lukasmaximus

I made a video on this subject not too long ago https://www.youtube.com/watch?v=AYIVRIQj6gE

lukasmaximus

It is quite well documented for esp32 devices using arduino, see this video I made https://www.youtube.com/watch?v=V8rmir-Tmy8 You can find the RMT module within the machine module. Since IR requires accurate pulse control and the RMT module which does this was only just released in the latest version of micropython you'll have to be patient as uiflow is based on micropython we can only go as fast as the developers of micropython. I agree on your point for some of M5Stack devices, but with a hobbyist product generally a little user ingenuity is required. I have been researching the RMT module and will be sure to make a video on it once I'm succesfully able to use it

lukasmaximus

Hey, got a little sidetracked with some other projects. Hopefully will be closer to finishing by the end of the month.

lukasmaximus

Hi All, I'm Luke from the UK. I've been living in Shenzhen China for the past 6 or so years.
During that time I've learnt a lot about electronics, programming and manufacturing just
from being in Shenzhen and being curious.

I now work for M5Stack full time. I mainly focus on promoting M5Stack as a tool for the
STEM classroom. However being a tinkerer I'm always happy to mess around with our
devices and see what I can create. I feel M5Stack has lowered the barrier for me to do
otherwise complex projects and it has given me a real motivation to learn Python.

My coding skills are still not great but I manage to get by and hope we can foster a spirit
of sharing in this community where we can all learn from each other

Best

Luke

lukasmaximus

Hi @AP1290 Sorry to hear that you were having these issues. I believe I should be able to help you with most of these issues.

Due to the nature of how the UiFlow software is developed for MAC, it requires that you place the uiflow app into the applications folder. Only then will the firmware function work.
You may still have issues with burning the firmware to the StickC though as I have. I tend to prefer using esptool to burn the firmware https://github.com/espressif/esptool as I find it's much more stable.
There are known issues with 1.4.4 and 1.4.3 which haven't been fixed yet due to staff being away on chinese new year holiday. Best to wait a while and I recommend using 1.4.2 for the best results.
I am not familiar with MPFshell I tend to use the standard screen terminal on mac, first finding the port with ls /dev/tty.* and then starting a terminal session with screen /dev/tty.usbserial-xxxxxxxx 115200 you need to make sure uiflow is closed or any other program which is trying to access the device over serial. If the issue persists, try unplugging and reinserting again or switch to another usb cable

Hope that helps, let me know if it works for you

lukasmaximus

@komikoni Hi and sorry for the late reply. I tested myself and you are correct the lcd.qrcode is missing from the m5cloud firmware. I had a look in the REPL and noticed it was missing.
see this screenshot https://ibb.co/njC2aA

As the small development team we have has been fully focusing its efforts on Ui flow firmware of late I cannot foresee the m5cloud firmware being updated any time soon.

I was wondering since uiflow is more feature rich than cloud now I was wondering why you prefer cloud over uiflow

I'm sure you already figured it out but the lcd.qrcode command is used in this way

lcd.qrcode('insert web url here', xposition, yposition, scale factor)

for example

lcd.qrcode('https://microsoft.com', 72, 32, 176)

hope that helped, I will look into the problem to see if there are any alternative solutions

lukasmaximus

This tutorial assumes that you have already pre-installed the necessary com port driver, have installed the Arduino IDE (arduino.cc) m5stack board manager files and the m5stack library.
If you haven’t see the Arduino quick start guide on our docs page:
https://docs.m5stack.com/#/en/quick_start/m5core/m5stack_core_quick_start

First of all why would we want to use MIT app inventor with M5Stack? MIT app inventor is a fantastic and simple tool that uses block programming and a simple UI to design android apps. You can download the .apk file for the app that you have designed and even publish it on the google play store.

Although UI flow already offers a remote mobile app function it is not robust enough yet to accommodate an app with a more sophisticated UI and also it is only accessible by scanning a QR code which connects to a webpage.

Currently I have only managed to use Arduino code to program the M5stack to work with MIT app inventor, but I am sure there will be a way to program this functionality soon with UI flow, especially now that the custom blocks function has now been integrated.

For the people out there who prefer to use blocks though do not fear. A computer science teacher from Tunisia by the name of Adel Kassah has developed a nice website (easycoding.tn A.K.A Tuniot) which allows the user to generate Arduino code for ESP32 by using blocks, and he has many nice tutorials on his youtube channel on how to use it.

0_1551189779859_Screen Shot 2019-02-20 at 11.31.17.png

Let’s get started. First go to the website easycoding.tn scroll down the page until you see the icon
TUNIOT FOR ESP32 on the left side column. (!!Make sure you choose esp32 and not esp8266!!)

0_1551226415918_Screen Shot 2019-02-20 at 11.35.53.png

After you clicked the icon you will be greeted with the block interface that looks like this.
0_1551226451342_Screen Shot 2019-02-20 at 11.41.16.png

I will not go into detail on how this interface works as Adel already does a good enough job of that in his videos. He has created a bunch of templates for setting up a web server on your ESP32 device so we will choose one of those templates from the drop down templates panel which is called “server in an encrypted network”

0_1551226496861_Screen Shot 2019-02-20 at 11.45.28.png
0_1551226523769_Screen Shot 2019-02-20 at 11.45.38.png

We need to first enter our wifi network and password into the black block labelled “Connect Network ssid “ ” password “ “ ” so we can connect our device to the network. (note: if you do not feel secure entering your home wifi details into this website it’s ok we can enter it offline in the arduino code later)
0_1551226573669_Screen Shot 2019-02-20 at 11.49.42.png
We also need to remove the block that assigns a static IP. Do this by right clicking the block and selecting delete block.
0_1551226609451_Screen Shot 2019-02-21 at 13.43.17.png
Next we need to get the clear http request block from the String section. In a moment we will be creating two if blocks which will compare the request against the string “on” or “off”. This clear http request block will remove any unnecessary data from the http request in order to compare the strings better ( if we don’t use this block our http request will look like this “GET /on HTTP/1.1)
0_1551226650200_Screen Shot 2019-02-21 at 16.31.04.png
Add this block in below the set STRING client request to server request block.
0_1551226701134_Screen Shot 2019-02-21 at 22.54.20.png
Now we can set the two if blocks for off and on http request. We get the if block and comparator block the first two blocks from the logic section and drag them in above the client flush block.
0_1551226786778_Screen Shot 2019-02-21 at 22.58.11.png
0_1551226829378_Screen Shot 2019-02-21 at 22.59.09.png

Now we get the client request block from the string section and place it in the first empty slot in the logic block we just placed.

0_1551227169233_Screen Shot 2019-02-21 at 23.02.02.png
0_1551227186249_Screen Shot 2019-02-21 at 23.02.11.png

Next we need to go into the text section to get a blank block with quotation marks around it, this block creates a string which we can type something into such as “on” and then compare whether the http request has the same message or not.

0_1551227231556_Screen Shot 2019-02-21 at 23.04.47.png
0_1551227242459_Screen Shot 2019-02-21 at 23.05.04.png

Duplicate the last steps to create an if condition for off as well.
0_1551227299981_Screen Shot 2019-02-21 at 23.07.03.png

Now for this simple example we will light up an LED on pin 26 which is easy to find on the base of the core, but for go and fire users you will have to insert a grove connector into port b (black port) and stick the LED into the end of the grove cable connector. Attach the short leg of the LED which is ground into the left side of the connector which has a black wire connected to it and the other leg into the right side which has a yellow wire connected to it.

To finish off the code on this website we find the digital write pin block in the digital section of IN/OUT and place one in each of the if conditions we just made.
0_1551228732066_Screen Shot 2019-02-21 at 23.23.50.png

Then change their values to these

0_1551228758288_Screen Shot 2019-02-21 at 23.24.04.png

0_1551228937443_Screen Shot 2019-02-21 at 23.25.43.png

Now were done with the blocks code on this site, click on the copy arduino code to clipboard code button, load up the arduino IDE, create a new sketch and paste the code in.

0_1551228991709_Screen Shot 2019-02-21 at 23.35.08.png
0_1551229007612_Screen Shot 2019-02-21 at 23.37.11.png

Now make sure your m5stack is plugged in and port and correct m5 stack board is selected. Although this code will work fine theres some small adjustments we can do to make our lives easier. Unless we do a scan of devices on our network we don’t know what the IP dress of our M5stack device is. So before we upload this code we can make some minor adjustments to display the IP address on the screen of our device.

At the very top of the sketch below #include <Wifi.h> we can add the line #include <M5Stack.h> to include the m5stack library.

0_1551229082497_Screen Shot 2019-02-27 at 00.57.47.png

Now let’s scroll down to the void setup() section and add this line which initializes the m5stack M5.begin

and replace the line Serial.println((WiFi.localIP())); with M5.Lcd.println((WiFi.localIP()));

0_1551229194797_Screen Shot 2019-02-27 at 00.59.41.png

Now we can test that this works before we create the app. Upload the code to your device wait for it to display its IP address on the screen which should look something like 192.168.x.x.
Copy that IP address into the browser and then add a forward slash followed by on like so:
http://192.168.1.8/on if you did everything correctly your LED should now turn on, to turn it off simply replace on with off in the http request http://192.168.1.8/off

Now to design the app we need to go to http://ai2.appinventor.mit.edu

To test the app we will need to install the app inventor companion app on our android device. You can search for it on the google play store and install it from there. Or if you cannot access the play store the app inventor website has provided an .apk link (http://ai2.appinventor.mit.edu/companions/MITAI2Companion.apk) which you can copy via bluetooth or sd card to your android device and install from the file explorer.

If you do not have an android device or need more information on how to get setup you can follow this link http://appinventor.mit.edu/explore/ai2/setup.html

Create the App

Once your setup with the app or emulator start a new project and drag two buttons from the pallete to the screen.
0_1551229360911_Screen Shot 2019-02-27 at 01.02.21.png

After dragging the two buttons to the screen we can rename them from button 1, button 2 to something more descriptive like ButtonON, ButtonOFF. Select the the button in the components section and click on the rename button below.

0_1551229416860_Screen Shot 2019-02-26 at 13.01.43.png

Aside from the two buttons we also need to drag a web component from the connectivity tab of the palette on to the screen. No icon will appear on the screen for the web component but we can tell that it has been added as it will appear in the components section.
0_1551229476335_Screen Shot 2019-02-26 at 13.11.56.png

Change the text of your buttons by selecting them in the components section and editing them in the text field of the properties section.

0_1551229530342_Screen Shot 2019-02-26 at 13.17.10.png

That’s all for the layout, let’s move to the blocks to complete the app. Press the blocks button in the top right hand corner of the window to move to the blocks page. This is where we will write the code for our app.

0_1551229573652_Screen Shot 2019-02-26 at 13.22.33.png

First we will need to grab two button click blocks from the button section in the blocks menu, click the drop down list to change them to ButtonON and ButtonOFF like so.

0_1551229671486_Screen Shot 2019-02-26 at 13.25.04.png

Enter the web section and drag the “set web1 url to” blocks into the button click blocks

0_1551229761631_Screen Shot 2019-02-26 at 13.27.19.png

Now this is how we send the http request with the app. Take an empty text block from the Text section of the blocks menu and place it in the slot at the end of the set web1 blocks we just placed. Now we need to enter in the url that we just typed in our browser to turn the light on or off into the text blocks we just placed.

0_1551229827068_Screen Shot 2019-02-26 at 13.29.07.png

The result should look something like the following image. Remember the IP address of your device will be different to mine, so remember to double check that the IP address on the screen of your M5 is the same as what you entered in the block.

0_1551229887876_Screen Shot 2019-02-26 at 13.33.52.png

Lastly we need to add the “call web1 .get” blocks from the web blocks and add them below the http request.

0_1551229957528_Screen Shot 2019-02-26 at 13.35.21.png

Now our app is finished and we can test it by clicking on connect choosing the ai companion option and scan the qr code.

0_1551230028850_Screen Shot 2019-02-26 at 13.38.14.png
0_1551230042425_Screen Shot 2019-02-26 at 13.38.24.png

Hope you enjoyed this tutorial. Show us what M5 apps you create.

lukasmaximus

Hey @ajb2k3

lcd.setRotation() requires a number 0-3 in the parentheses for each orientation, and it seems to clear the screen every time it rotates. I found I could print text in all 4 orientations of the screen if I used the print command after set Rotation. like so:

lcd.setRotation(3) lcd.print('hello',100,100,0xffffff)
hope that answers your question. I'm back from christmas hols now and i've seen you've been busy
working on your own manual for the m5stack, awesome stuff, I'd love to connect with you and see how we can cooperate on a manual my email is luke@m5stack.com

lukasmaximus

If your on mac the downloaded firmwares can be found by right clicking M5Burner selecting "Show Package contents" then clicking through to Contents > Resources > Packages > fw then you will find the firmware files in each respective core folders. I don't have a linux machine handy at the moment but perhaps the folder structure is similar

lukasmaximus

@kevindtimm if you look at the first line comment of most of the arduino examples, they will require some font file or jpg file included in the example folder, to be transferred to the SD card

lukasmaximus

hi @kevindtimm which SD card brand did you use, did you make sure to format it to fat32 and put the necessary files in the root of the sd card

lukasmaximus

please refer to my reply on your other post, has this been replicated 3 times now?

lukasmaximus

Hi @Powersoft please don't double post, and refer to my reply on your other post

lukasmaximus

Hey @Powersoft this example requires you to put the GenSenRounded-R.ttf font file found in the M5EPD_TTF example folder in the root of an sd card or load it into spiffs with the "ESP32 Sketch Data Upload" plugin, did you do that?

lukasmaximus

I haven't had any problems with SD cards in the M5Paper, I have been using Sandisk Ultra cards 8-16gb. I think the max sd size for esp32 should be 32gb, make sure to format to fat32, and make sure the font or jpg file are in the root of the device. Perhaps it is also possible to use larger exfat formatted cards as stated in this forum post https://www.esp32.com/viewtopic.php?t=14492 I haven't tried this myself.

lukasmaximus

Hi @Wolli01 as for the M5 Basic you can refer to my video https://www.youtube.com/watch?v=GPRNUCBTVy4 As for M5Core2 I cant tell you as I haven't got round to testing pure micropython on this device. If the screen is not displaying anything are you sure you have a micropython driver in the flash and have initialized the screen in your code?

lukasmaximus

Hey @Wolli01 unfortunately this option isn't available right now but you can take a look into it yourself if you have the know how, the screen of m5core2 uses littlevgl library which has been ported to micropython https://github.com/lvgl/lv_binding_micropython for the micropython firmware you can just go to micropython.org and download one of the firmwares for generic esp32. As for the various modules there has never been an official github with these available, I have one for mpu6886 and axp on my personal github which should work though. I'm afraid this is going to be like a jigsaw puzzle, piecing various resources together to create the firmware you want

lukasmaximus

nicely done

lukasmaximus

@lukasmaximus

Best posts made by lukasmaximus

Latest posts made by lukasmaximus