M5Stack UiFlow for Beginners - Lesson 01 - Hello World
Summary
TLDRこのビデオは、M5StackデバイスでUI Flowを使用してプログラミングの基本を学ぶためのチュートリアルです。「Hello World」プログラムから始まり、テキストとグラフィック要素を画面上に配置する方法を学びます。UIマネージャーを使ってラベルやシェイプを追加し、ブロックプログラミングでそれらの要素をコントロールする方法を解説しています。最終的には名刺のようなデザインを作成し、プログラムをデバイスにアップロードして実行する過程を紹介しています。視覚的な例を交えながら、プログラミングの基礎を分かりやすく学べる内容となっています。
Takeaways
- 👋 この講座では、M5 Stackデバイスの画面上にテキストと画像を表示する方法を学びます。
- 🌍 最初に「Hello World」プログラムから始めます。これはプログラミング言語を学ぶ際の定番の第一歩です。
- 📺 画面はたくさんの小さな点(ピクセル)から構成されており、X座標とY座標を使ってピクセルの位置を指定します。
- 🧩 UIFlowというブロックプログラミングインターフェースを使用して、プログラミングの基礎を学びます。
- ✏️ UIマネージャーを使ってスクリーン上の要素を配置し、プロパティを設定します。
- 📄 テキストボックスやグラフィック要素のプロパティ(名前、位置、色、フォントなど)を変更できます。
- 💻 プログラムをM5デバイスにアップロードして実行できます。またデスクトップに保存することもできます。
- 🎨 名刺を作成するチャレンジがあり、創造性を発揮してテキストと図形を組み合わせることができます。
- 🔖 レイヤーを使うと、要素の前面/背面の重なり順を制御できます。
- 🆘 分からない点があれば質問できるようサポートが用意されています。
Q & A
ビデオの主な目的は何ですか?
-このビデオの主な目的は、M5Stackデバイスの画面にテキストや画像を表示する方法を初心者に紹介することです。最初はHello Worldプログラムから始め、その後名刺の作成を通して、さまざまな要素を画面に配置する方法を学びます。
UIフローのインターフェースについて説明してください。
-UIフローインターフェースには、コーディング領域、コードブロック領域、UIマネージャー、ユニット領域、ナビゲーションバーなどがあります。コーディング領域でプログラムを作成し、コードブロック領域から必要なブロックを選択します。UIマネージャーでは画面上の要素を設定できます。
プログラミングにおいて、X座標とY座標はどのような役割を果たしますか?
-X座標とY座標は、画面上の位置を指定するために使用されます。X座標は水平方向の位置を、Y座標は垂直方向の位置を表します。これらの座標を指定することで、テキストや図形を画面上の正確な位置に配置できます。
UIマネージャーで要素のプロパティをカスタマイズする方法を教えてください。
-UIマネージャーで要素をドラッグアンドドロップすると、その要素をクリックして各プロパティ(名前、X/Y座標、色、フォントサイズ、回転角度など)を編集できます。必要に応じてこれらのプロパティを調整することで、要素の外観や位置を変更できます。
デバイスにプログラムをロードする方法は何ですか?
-デバイスにプログラムをロードする方法は2つあります。1つ目は「再生」ボタンを押して即座にデバイスに送信する方法です。2つ目は「設定」メニューから「ダウンロード」を選択し、デバイスのメモリにプログラムを保存する方法です。後者の方法では電源を切っても保存されたプログラムを実行できます。
プログラムをデスクトップに保存する方法を教えてください。
-設定メニューから「保存」ボタンを選択すると、プログラムをデスクトップに保存できます。ファイル名は自由に付けられますが、拡張子は .m5f のままにする必要があります。
このビデオでは、名刺の作成を例に挙げていますが、名刺にはどのような情報を含めるべきでしょうか。
-名刺には通常、氏名、電話番号、住所、趣味などの個人情報を含めます。このビデオでは、これらの情報をテキストボックスに入力し、円形の図形を使ってデザインを飾る例が紹介されています。
Blocklyモードとは何ですか?
-Blocklyモードとは、UIフローエディターのブロックプログラミングモードのことです。このモードでは、プログラミングの構文を視覚的にブロックで表現することができ、初心者がプログラミングの基本を学ぶのに適しています。また、Pythonモードへの切り替えも可能です。
レイヤーの機能について教えてください。
-レイヤーの機能を使うと、画面上の要素の前後関係を制御できます。より複雑な画像を作成する際に、特定の要素を手前や背面に配置したい場合に、このレイヤー設定が役立ちます。
フォーラムとドキュメントについて説明してください。
-UIフローインターフェースには、フォーラムとドキュメントへのリンクがあります。フォーラムでは、プログラミングに関する質問をしたり、助言を求めたりできます。ドキュメントには、M5Stackデバイスの使用方法や機能に関する詳細な情報が記載されています。
Outlines
🤖 プログラミングの基本的な「Hello World」
このレッスンシリーズの第1回目では、M5 Stackのスクリーンにテキストと画像を表示する方法を学びます。プログラミングの基本である「Hello World」プログラムから始め、画面上にテキストを表示する方法を説明しています。また、スクリーンがX座標とY座標で構成されるピクセルの集合体であることを説明し、UIフローのインターフェースについて概要を述べています。最後に、画面上にラベルを配置し、そのプロパティを変更する方法を示しています。
🖼️ 名刺の作成
このパラグラフでは、UIマネージャーを使用して名刺を作成する方法を説明しています。最初に自分の名前を表示するテキストラベルを追加し、次に電話番号、住所、趣味などを表示するためのさらなるラベルを追加します。さらに、グラフィカル要素として円を追加し、犬の足跡のようなデザインを作成する方法を示しています。プロパティを変更して円の半径や色を調整する方法も説明されています。
💻 プログラムのアップロードと保存
最後のパラグラフでは、作成したプログラムをM5 Goデバイスにアップロードする方法と、デスクトップに保存する方法を説明しています。プログラムをデバイスにアップロードするには、プレイボタンを押すか、設定メニューからダウンロードオプションを選択します。デスクトップに保存する場合は、設定メニューの保存ボタンを使用します。最後に、名刺の作品を改善するよう読者に促し、次のビデオに向けて励まし言葉を述べています。
Mindmap
Keywords
💡プログラミング言語
💡ピクセル
💡UIフロー
💡ラベル
💡座標
💡フォント
💡レイヤー
💡アップロード
💡名刺
💡図形
Highlights
Here we are in the first lesson of this series, and we're going to be displaying text and images on the screen of the M5 Stack.
We're going to be doing the hello world program, which is what everybody starts out when they're doing any kind of programming language.
Screens are made up of lots of tiny dots called pixels, and we need to know the X&Y coordinates to place things on the screen.
We'll be using the UI Flow block programming interface to get you to grips with learning programming.
We'll start by naming our first project 'Hello World'.
For the most part of this course, we'll be focusing on Blockly to get you up and running with the basics of programming.
We can add a label to the screen by dragging a text or graphical element into the UI manager space.
We can change the properties of the label, such as its name, position, color, font, rotation, and layering.
Elements we design in the UI manager will appear in the UI tab of the code blocks menu.
We can use code blocks from the UI tab to control the text box we added.
We'll be making a name card by using the UI manager to show different graphical elements and text elements on the screen.
We can add more text boxes to the name card by duplicating code blocks and changing their content.
We can add graphical elements like circles to the name card and change their properties like size, color, and border.
We can send our program to the M5 Go device instantly by pressing the play button or download it to the device's memory.
We can also save our program to the desktop by clicking the Save button in the settings menu.
Transcripts
[Music]
here we are in the first lesson of this
series and we're going to be displaying
text and images on the screen of the m5
stack to get us started we're going to
be doing the hello world program which
is what everybody starts out when
they're doing any kind of programming
language it's simply displaying the
words hello world on the screen of your
device once we get started with that and
we can start to build an end card
nowadays we see screens of all shapes
and sizes
all around us they come in many
different technologies LCD TFT or LED
too many to mention but all we need to
know is screens are made up of lots of
tiny dots called pixels in the
horizontal direction we call it X in the
vertical direction we call it Y so in
order to place things on the screen we
need to know the X&Y coordinates of
where we want to place it here we are in
UI flow a block programming interface to
get you to grips with learning
programming let's have a look around the
interface and familiarize ourselves with
it on the right hand side here we see
the coding area we have one code block
here already in the middle here we can
see the code block section this is where
we'll find all the blocks we need to
create our programs over on the left
hand side is the UI manager here we can
grab elements and add them to the screen
below we have the units where we'll be
adding different sensors to the m5 go
and the top bar we have all of the
navigation that we need here we can
rename our project and we'll start by
naming it for our first project hello
world
you see here in the middle we have the
change between blockly and Python for
the most part of this course we'll be
focusing on blockly to get you up and
running with the basics of programming
over here we have various icons that
will help us to send the code to the
device upload our code for reality or
readdy to our device redo and undo
examples documentation for the device
our forums for help if you get stuck and
updating of the new versions of the
editor over here we'll also see the
Settings tab to set our device up with
the platform we can go down to setting
if we're in the offline version we can
set the come port here we can also set
it to multiple languages change our
device if we're using another m5 stack
device and also change the theme let's
start by adding a label to the screen
when we drag a text or other graphical
element into this space we can click on
it and then alter the properties by
default will be given a name such as
label or circle or image we can change
this if we like say for instance I could
call it text 1 the following portion
here X&Y shows where it will be
displayed on the screen in terms of
graphics we know that things are laid
out with x and y-coordinates so if we
want to change the position of the text
on the screen then we can set this to a
different area and we notice once we
change these numbers its position
changes accordingly let's set it to the
center of the screen
we can also edit the color but I'm going
to keep it with white for now as far as
the text goes we could preset the text
to show something if we don't intend to
program the text box we can change the
phone we have a few selections of
different fonts that we can choose from
we could even rotate the text if we need
it but I'm just going to keep it the
default for now finally we have layers
when we get to creating more complex
pictures we might want to set things in
front of or behind each other and we'll
use the layers to do this now for now we
could descend this over to the device
but I'm going to show you how we can now
program this text label that we just
added on the screen if we click into the
UI tab of the code blocks menu we see
now label has appeared elements that we
design in the UI manager will only
appear here
once we drag them to the screen inside
the label menu here I can see a whole
bunch of different code blocks which I
can use to control my text box for now
we're just going to be using the first
one you notice that I changed the name
of my text label to text one and there's
none other in the list because I didn't
add any other text boxes there now here
I can enter hello world and now when we
press play that text will appear on the
screen of our device so we're going to
make a name card for ourselves we'll be
using the UI manager to show different
graphical elements and text elements on
the screen
what would it make sense to add to our
text label well of course your name
first would make sense so we can go
ahead and change this first label to
show our name what else might we put on
a business card perhaps our phone number
let's add another label in there now if
we duplicate this code block we can
change the first field to show a
different label notice that the name of
the label that is there has not changed
from the default the higher number has
just been added if we wanted to change
the name we could go back into
properties but let's just change the
content for now so perhaps I would want
to put my phone number in here
okay now let's add two more text boxes
and change them again we'll duplicate
two more labels and change them to
represent the corresponding text box
that we added in the UI manager now I
could perhaps enter my home address
and perhaps even huh a hobby
notice that in the new UI manager
nothing changes
this is just simply to help us know
where our text will be displayed upon
the screen when we run the program on
the device then we'll see the changes of
the labels now this name card is looking
a little boring
perhaps we can add some graphical
elements to spice it up a little let's
start by adding some of these circles in
here I'm just going to design a simple
dog sport as with the text label we can
also change the properties of these
graphical elements by clicking on them
we could change the name the XY position
and here with a circle we change the
radius so for this part of the dog's paw
I want to make this circle bigger
let's try 30 that looks just about right
I could also change the border color
which is the edge of the circle or the
background but for now I'm just going to
keep it its default color now when we're
loading programs on the device we can
either press the play button and this
will instantaneously send the code over
to the m5 go device if I want to show my
friends my name card or load at a
different time I might want to download
it to the device so if we go into
settings we can find this option here
download you'll notice that now it says
uploading on the screen of our m5 girl
device it's now saving your program in
the memory of the device so the even if
you switch the device off I can choose
in a menu on booting the device a list
of my programs
if we want to save the program to our
desktop you can also do that by pressing
the Save button in the settings menu you
can here change the name it will always
have the extension m5f and we shouldn't
change that we can also open those
programs by clicking the Open button and
there we have it our name card I'm sure
you can do a much better job than I have
and I want you to challenge yourself add
lots of text and different colored
shapes make a cool picture and I want to
see what results you come up with if you
get stuck you can always leave us a
message
drop a comment and I'll see you in the
next video
you
5.0 / 5 (0 votes)