L002_20190828_BeginnerCourse.pdf

ര଎ϓϩτλΠϐϯάπʔϧNoodlͰ UIσβΠϯΛ͠Α͏ʂʢ2/2ʣ NOODL BEGINNER COURSE 2

X NOODLͷجຊૢ࡞ - ϊʔυΛҠಈ͢Δ: υϥοά - ϊʔυΛ࡞Δ: ӈΫϦοΫɺϊʔυ໊ͷ಄จࣈΛΩʔϘʔυͰೖྗ - ϊʔυΛ࡟আ͢Δ:
ϊʔυΛબ୒ɾDeleteΩʔΛԡ͢ - ϊʔυΛίϐʔ: ϊʔυΛબ୒ɾ㵰+CʢWindows: Ctrl+Cʣ - ϊʔυΛϖʔετ: ⌘+VʢWindows: Ctrl+Vʣ - ϊʔυΛܨ͙: ϊʔυͷ୺ͰΫϦοΫ͠ɺͦͷ··ܨ͍͗ͨϊʔυ·Ͱυϥοά͢Δ 3

X ίϯϙʔωϯτҰཡ ϓϩύςΟ ϓϩδΣΫτઃఆ ϊʔυҰཡ දࣔ಺༰Λ੾Γସ͑ΔϘλϯ ߏங͢Δ৔ॴ ϓϨϏϡʔը໘ ϝχϡʔ ϘοΫε=
ϊʔυ 4

X L002 ίοΫϐοτΞϓϦ ΠϯϑΥάϥϑΟοΫˍλονΠϕϯτ 5

X ࠓճ͸QXGA(2048 x 1536: iPadͳͲͰ࠾༻͞Ε͍ͯΔʣʹ͢Δ 6 Project settingsͷ֬ೝ

X طଘͷComponentΛద౰ͳ৔ॴʹDrag & Drop͔ͯ͠ΒRootʹ௥Ճ͢Δ 7 Componentͷ഑ஔ

X Data and TimesΛComponentҰཡ͔ΒD&D͢Δ String Formatʹ{h}:{m}:{s}ͱೖྗ͠ɺ00:00:00ͱදࣔͰ͖ΔΑ͏ʹ͢Δ 8 Time Component ͷத਎ͷ࡞੒

X Data and Time͔ΒString Formatʹ઀ଓ͢ΔɻHour → h, Minute → m,
Second → s String Format͔ΒTextʹ઀ଓ͢Δɻ Formatted → Text 9 Componentͷ઀ଓ

X Direction ComponentͷதͷGroupʹImageͰConpass.pngΛૠೖ͢Δ Image͔ΒGroupʹHeight → Height, Width → Widthͱ઀ଓ͢Δ͜ͱͰɺImageͷαΠζͱGroupͷαΠζΛҰகͤ͞Δ 10
DirectionͷConpass࡞੒

X ্ਤͷΑ͏ʹGroupͱImageΛ௥Ճ͢ΔɻPosition YΛௐ੔ͯ͠Ϩʔμʔͷઌ୺͕தԝʹҐஔ͢ΔΑ͏ʹ͢Δ Component InputsͷdirectionΛԼͷGroupͷRotation ZɺdistinationΛImage(Conpass.png)ͷRotation Zʹ઀ଓ͢Δ 11 Ճ଎౓Ͱճస͢Δઃఆ

X Device OrientationͱNumber RemapperΛ༻ҙ͠ɺRotation Y → Input ValueɺRemapped Value →
directionͱ઀ଓ͢Δ Number RemapperʹΑΓσόΠεͷRotation Y -80ʙ80Λdirectionͷ0ʙ360ʹରԠͤ͞Δ͜ͱ͕Ͱ͖Δ 12 σόΠεͷՃ଎౓Λೖྗ͠ɺ஋ͷൣғΛ੔͑Δ

X Image͔ΒGroupʹରͯ͠Height → Height, Width → WidthΛ઀ଓͯ͠αΠζΛ߹ΘͤΔ CircleΛૠೖ্ͯ͠ਤͷΑ͏ʹύϥϝʔλઃఆΛ͢ΔɻSolidͷνΣοΫΛ֎͢͜ͱͰϑν͚ͩͷԁʹͳΔɻҐஔΛඍௐ੔͢Δ 13 αΠζௐ੔ͱϝʔλʔͷ௥Ճ

X ಺ଆͷϝʔλʔ༻ʹCircleΛ΋͏Ұͭ࡞ΔɻͦΕͧΕͷCircleͷArc Angleʹରͯ͠ Component Inputsͷengine, speedfΛ઀ଓ͢Δ ͜͜ʹ֎෦͔ΒσʔλΛ઀ଓ͢Δ͜ͱͰɺϝʔλʔͷArc Angle͕ϦΞϧλΠϜʹมԽ͢ΔΑ͏ʹͳΔ 14 ಺ଆͷϝʔλʔͷ࡞੒ͱ
σʔλͷ൓ө

X Vehicle DataΛը໘ʹD&Dͯ͠ɺ্ਤͷΑ͏ʹϊʔυΛ઀ଓ͢Δ Vehicle Data͸ࠓճͷͨΊʹϥϯμϜͳ஋Λు͖ग़͢ComponentΛ༻ҙͨ͠΋ͷͰ ࣮ࡍʹ͸MQTTͳͲΛհ࣮ͯ͠σʔλΛऔಘ͢Δ͜ͱ΋Ͱ͖Δ 15 ࣮σʔλʢࠓճ͸μϛʔʣΛ൓ө͢Δ

X Bar GraphͷதͷGroupͷԼʹStack LayoutͰgraph itemΛ௥Ճ͢Δ graph item͸๮άϥϑͱԼͷຌྫΛࣔ͢΋ͷͰ͋Γɺॱ൪ʹؾମ੒෼Λ໊෇͚͓ͯ͘ 16 Bar Graphͷத਎Λ࡞੒͢Δ

X Air condition Data͔Β֤graph itemʹରͯ͠઀ଓ͢Δ ˎco2͸Co2ͷnumʹ઀ଓ͢Δ 17 ࣮σʔλʢμϛʔσʔλʣͷ઀ଓ

X GroupͱRectangleΛ࡞੒͢ΔɻRectangleͷHeightΛখ͘͢͞Δ͜ͱͰϥΠϯΛදݱ͢Δ Groupͷશ෯ʹରͯ͠LineΛগ͠খ͞Ίʹ࡞Δͱޙ΄ͲͷΧʔιϧΛى͖΍͘͢ͳΔ 18 Control Panel಺ͷ࡞੒ εϥΠυόʔ༻ͷϥΠϯ࡞੒

X GroupͱRectangleΛ࡞੒͢ΔɻRectangleΛ࠷దͳαΠζʹͯ͠Χʔιϧͱ͢Δ Group͸ΧʔιϧΑΓগ͠େ͖Ίʹ࡞Δͱλονݕग़ൣғ͕େ͖͘ͳΓ࢖͍΍͘͢ͳΔ 19 Control Panel಺ͷ࡞੒ εϥΠυόʔ༻ͷΧʔιϧ࡞੒

X ΧʔιϧͷGroup͔ΒDragʹରͯ͠This → Targetͱ઀ଓ͢Δ͜ͱͰɺGroup͕υϥοάՄೳʹͳΔ υϥοάൣғΛࢦఆ͢ΔͨΊʹLineͷWidthΛDragͷEndʹ઀ଓ͢Δ 20 εϥΠυόʔΛυϥοάͰ͖ΔΑ͏ʹ͢Δ

X Number RemapperΛ࢖͏͜ͱͰ0ʙ700ͷεϥΠμʔҐஔΛ0ʙ1ʹஔ͖׵͑Δ Position X → Input Value, Remapped Value
→ Barͱ઀ଓ͢Δ 21 εϥΠμʔҐஔΛଞͰ΋׆༻Ͱ͖ΔΑ͏ʹ֎ʹग़͢

X EmergencyϘλϯΛImageͰ࡞੒͠ɺComponent OutputsͷEmergencyʹ઀ଓ͢Δ ˎ͜ͷϘλϯΛԡ͢ͱԿ͕ى͜Δ͔͸ࣗ༝ʹ࡞੒͢Δ 22 EmergencyϘλϯΛ࡞੒͢Δ

X എܠΠϝʔδͷ਌ʹEffect groupΛૠೖ͠ɺStandard Effectͱͯ͠Gaussian BlurΛબ୒͢Δ ControlPanelͷBarΛEffect groupͷEffect Amountʹ઀ଓ͢Δ͜ͱͰΧʔιϧͷ࠲ඪ͕ΤϑΣΫτͷڧ౓ʹ൓ө͞ΕΔΑ͏ʹͳΔ 23

X TimeͷԼʹGroupͱImageΛૠೖ͢Δ 24 UFOͷ࡞੒

X Touch PositionΛ࢖͏ͱλονͨ͠࠲ඪΛऔಘͰ͖Δ Position Yʹؔͯ͠͸1100ΑΓԼʹߦͬͨ৔߹ʹ1100ʹ͢ΔͨΊNumber RimapperͷClamp OutputΛ࢖͏ 25 λονϙδγϣϯͷ൓ө

X ׬੒Ͱ͢ʂ ͓ർΕ༷Ͱͨ͠ʂ 26

L002_20190828_BeginnerCourse.pdf

L002_20190828_BeginnerCourse.pdf

moriken

More Decks by moriken

Other Decks in Design

Featured

Transcript

X 1

ര଎ϓϩτλΠϐϯάπʔϧNoodlͰ UIσβΠϯΛ͠Α͏ʂʢ2/2ʣ NOODL BEGINNER COURSE 2

X NOODLͷجຊૢ࡞ - ϊʔυΛҠಈ͢Δ: υϥοά - ϊʔυΛ࡞Δ: ӈΫϦοΫɺϊʔυ໊ͷ಄จࣈΛΩʔϘʔυͰೖྗ - ϊʔυΛ࡟আ͢Δ:

X ίϯϙʔωϯτҰཡ ϓϩύςΟ ϓϩδΣΫτઃఆ ϊʔυҰཡ දࣔ಺༰Λ੾Γସ͑ΔϘλϯ ߏங͢Δ৔ॴ ϓϨϏϡʔը໘ ϝχϡʔ ϘοΫε=

X L002 ίοΫϐοτΞϓϦ ΠϯϑΥάϥϑΟοΫˍλονΠϕϯτ 5

X ࠓճ͸QXGA(2048 x 1536: iPadͳͲͰ࠾༻͞Ε͍ͯΔʣʹ͢Δ 6 Project settingsͷ֬ೝ

X طଘͷComponentΛద౰ͳ৔ॴʹDrag & Drop͔ͯ͠ΒRootʹ௥Ճ͢Δ 7 Componentͷ഑ஔ

X Data and TimesΛComponentҰཡ͔ΒD&D͢Δ String Formatʹ{h}:{m}:{s}ͱೖྗ͠ɺ00:00:00ͱදࣔͰ͖ΔΑ͏ʹ͢Δ 8 Time Component ͷத਎ͷ࡞੒

X Data and Time͔ΒString Formatʹ઀ଓ͢ΔɻHour → h, Minute → m,

X Direction ComponentͷதͷGroupʹImageͰConpass.pngΛૠೖ͢Δ Image͔ΒGroupʹHeight → Height, Width → Widthͱ઀ଓ͢Δ͜ͱͰɺImageͷαΠζͱGroupͷαΠζΛҰகͤ͞Δ 10

X ্ਤͷΑ͏ʹGroupͱImageΛ௥Ճ͢ΔɻPosition YΛௐ੔ͯ͠Ϩʔμʔͷઌ୺͕தԝʹҐஔ͢ΔΑ͏ʹ͢Δ Component InputsͷdirectionΛԼͷGroupͷRotation ZɺdistinationΛImage(Conpass.png)ͷRotation Zʹ઀ଓ͢Δ 11 Ճ଎౓Ͱճస͢Δઃఆ

X Device OrientationͱNumber RemapperΛ༻ҙ͠ɺRotation Y → Input ValueɺRemapped Value →

X Image͔ΒGroupʹରͯ͠Height → Height, Width → WidthΛ઀ଓͯ͠αΠζΛ߹ΘͤΔ CircleΛૠೖ্ͯ͠ਤͷΑ͏ʹύϥϝʔλઃఆΛ͢ΔɻSolidͷνΣοΫΛ֎͢͜ͱͰϑν͚ͩͷԁʹͳΔɻҐஔΛඍௐ੔͢Δ 13 αΠζௐ੔ͱϝʔλʔͷ௥Ճ

X ಺ଆͷϝʔλʔ༻ʹCircleΛ΋͏Ұͭ࡞ΔɻͦΕͧΕͷCircleͷArc Angleʹରͯ͠ Component Inputsͷengine, speedfΛ઀ଓ͢Δ ͜͜ʹ֎෦͔ΒσʔλΛ઀ଓ͢Δ͜ͱͰɺϝʔλʔͷArc Angle͕ϦΞϧλΠϜʹมԽ͢ΔΑ͏ʹͳΔ 14 ಺ଆͷϝʔλʔͷ࡞੒ͱ

X Vehicle DataΛը໘ʹD&Dͯ͠ɺ্ਤͷΑ͏ʹϊʔυΛ઀ଓ͢Δ Vehicle Data͸ࠓճͷͨΊʹϥϯμϜͳ஋Λు͖ग़͢ComponentΛ༻ҙͨ͠΋ͷͰ ࣮ࡍʹ͸MQTTͳͲΛհ࣮ͯ͠σʔλΛऔಘ͢Δ͜ͱ΋Ͱ͖Δ 15 ࣮σʔλʢࠓճ͸μϛʔʣΛ൓ө͢Δ

X Bar GraphͷதͷGroupͷԼʹStack LayoutͰgraph itemΛ௥Ճ͢Δ graph item͸๮άϥϑͱԼͷຌྫΛࣔ͢΋ͷͰ͋Γɺॱ൪ʹؾମ੒෼Λ໊෇͚͓ͯ͘ 16 Bar Graphͷத਎Λ࡞੒͢Δ

X Air condition Data͔Β֤graph itemʹରͯ͠઀ଓ͢Δ ˎco2͸Co2ͷnumʹ઀ଓ͢Δ 17 ࣮σʔλʢμϛʔσʔλʣͷ઀ଓ

X GroupͱRectangleΛ࡞੒͢ΔɻRectangleͷHeightΛখ͘͢͞Δ͜ͱͰϥΠϯΛදݱ͢Δ Groupͷશ෯ʹରͯ͠LineΛগ͠খ͞Ίʹ࡞Δͱޙ΄ͲͷΧʔιϧΛى͖΍͘͢ͳΔ 18 Control Panel಺ͷ࡞੒ εϥΠυόʔ༻ͷϥΠϯ࡞੒

X GroupͱRectangleΛ࡞੒͢ΔɻRectangleΛ࠷దͳαΠζʹͯ͠Χʔιϧͱ͢Δ Group͸ΧʔιϧΑΓগ͠େ͖Ίʹ࡞Δͱλονݕग़ൣғ͕େ͖͘ͳΓ࢖͍΍͘͢ͳΔ 19 Control Panel಺ͷ࡞੒ εϥΠυόʔ༻ͷΧʔιϧ࡞੒

X ΧʔιϧͷGroup͔ΒDragʹରͯ͠This → Targetͱ઀ଓ͢Δ͜ͱͰɺGroup͕υϥοάՄೳʹͳΔ υϥοάൣғΛࢦఆ͢ΔͨΊʹLineͷWidthΛDragͷEndʹ઀ଓ͢Δ 20 εϥΠυόʔΛυϥοάͰ͖ΔΑ͏ʹ͢Δ

X Number RemapperΛ࢖͏͜ͱͰ0ʙ700ͷεϥΠμʔҐஔΛ0ʙ1ʹஔ͖׵͑Δ Position X → Input Value, Remapped Value

X EmergencyϘλϯΛImageͰ࡞੒͠ɺComponent OutputsͷEmergencyʹ઀ଓ͢Δ ˎ͜ͷϘλϯΛԡ͢ͱԿ͕ى͜Δ͔͸ࣗ༝ʹ࡞੒͢Δ 22 EmergencyϘλϯΛ࡞੒͢Δ

X എܠΠϝʔδͷ਌ʹEffect groupΛૠೖ͠ɺStandard Effectͱͯ͠Gaussian BlurΛબ୒͢Δ ControlPanelͷBarΛEffect groupͷEffect Amountʹ઀ଓ͢Δ͜ͱͰΧʔιϧͷ࠲ඪ͕ΤϑΣΫτͷڧ౓ʹ൓ө͞ΕΔΑ͏ʹͳΔ 23

X TimeͷԼʹGroupͱImageΛૠೖ͢Δ 24 UFOͷ࡞੒

X Touch PositionΛ࢖͏ͱλονͨ͠࠲ඪΛऔಘͰ͖Δ Position Yʹؔͯ͠͸1100ΑΓԼʹߦͬͨ৔߹ʹ1100ʹ͢ΔͨΊNumber RimapperͷClamp OutputΛ࢖͏ 25 λονϙδγϣϯͷ൓ө

X ׬੒Ͱ͢ʂ ͓ർΕ༷Ͱͨ͠ʂ 26