「App:Library:LVGL」の版間の差分

提供: robot-jp wiki
ナビゲーションに移動検索に移動
106行目: 106行目:
 
|-
 
|-
 
|日本語
 
|日本語
|<nowiki>右雨円王音下火花貝学気九休玉金空月犬見五口校左三山子四糸字耳七車手十出女小上森人水正生青夕石赤千川先早草足村大男竹中虫町天田土二日入年白八百文木本名目立力林六引羽雲園遠何科夏家歌画回会海絵外角楽活間丸岩顔汽記帰弓牛魚京強教近兄形計元言原戸古午後語工公広交光考行高黄合谷国黒今才細作算止市矢姉思紙寺自時室社弱首秋週春書少場色食心新親図数西声星晴切雪船線前組走多太体台地池知茶昼長鳥朝直通弟店点電刀冬当東答頭同道読内南肉馬売買麦半番父風分聞米歩母方北毎妹万明鳴毛門夜野友用曜来里理話悪安暗医委意育員院飲運泳駅央横屋温化荷界開階寒感漢館岸起期客究急級宮球去橋業曲局銀区苦具君係軽血決研県庫湖向幸港号根祭皿仕死使始指歯詩次事持式実写者主守取酒受州拾終習集住重宿所暑助昭消商章勝乗植申身神真深進世整昔全相送想息速族他打対待代第題炭短談着注柱丁帳調追定庭笛鉄転都度投豆島湯登等動童農波配倍箱畑発反坂板皮悲美鼻筆氷表秒病品負部服福物平返勉放味命面問役薬由油有遊予羊洋葉陽様落流旅両緑礼列練路和愛案以衣位囲胃印英栄塩億加果貨課芽改械害街各覚完官管関観願希季紀喜旗器機議求泣救給挙漁共協鏡競極訓軍郡径型景芸欠結建健験固功好候航康告差菜最材昨札刷殺察参産散残士氏史司試児治辞失借種周祝順初松笑唱焼象照賞臣信成省清静席積折節説浅戦選然争倉巣束側続卒孫帯隊達単置仲貯兆腸低底停的典伝徒努灯堂働特得毒熱念敗梅博飯飛費必票標不夫付府副粉兵別辺変便包法望牧末満未脈民無約勇要養浴利陸良料量輪類令冷例歴連老労録ー圧移因永営衛易益液演応往桜恩可仮価河過賀快解格確額刊幹慣眼基寄規技義逆久旧居許境均禁句群経潔件券険検限現減故個護効厚耕鉱構興講混査再災妻採際在財罪雑酸賛支志枝師資飼示似識質舎謝授修述術準序招承証条状常情織職制性政勢精製税責績接設舌絶銭祖素総造像増則測属率損退貸態団断築張提程適敵統銅導徳独任燃能破犯判版比肥非備俵評貧布婦富武復複仏編弁保墓報豊防貿暴務夢迷綿輸余預容略留領異遺域宇映延沿我灰拡革閣割株干巻看簡危机揮貴疑吸供胸郷勤筋系敬警劇激穴絹権憲源厳己呼誤后孝皇紅降鋼刻穀骨困砂座済裁策冊蚕至私姿視詞誌磁射捨尺若樹収宗就衆従縦縮熟純処署諸除将傷障城蒸針仁垂推寸盛聖誠宣専泉洗染善奏窓創装層操蔵臓存尊宅担探誕段暖値宙忠著庁頂潮賃痛展討党糖届難乳認納脳派拝背肺俳班晩否批秘腹奮並陛閉片補暮宝訪亡忘棒枚幕密盟模訳郵優幼欲翌乱卵覧裏律臨朗論()亜哀挨曖握扱宛嵐依威為畏尉萎偉椅彙違維慰緯壱逸芋咽姻淫陰隠韻唄鬱畝浦詠影鋭疫悦越謁閲炎怨宴援煙猿鉛縁艶汚凹押旺欧殴翁奥憶臆虞乙俺卸穏佳苛架華菓渦嫁暇禍靴寡箇稼蚊牙瓦雅餓介戒怪拐悔皆塊楷潰壊懐諧劾崖涯慨蓋該概骸垣柿核殻郭較隔獲嚇穫岳顎掛括喝渇葛滑褐轄且釜鎌一あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわゐゑをんがぎぐげござじずぜぞだぢづでどばびぶべぼぱぴぷぺぽぁぃぅぇぉっゃゅょアイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヰヱヲンガギグゲゴザジズゼゾダヂズデドバビブベボパピプペポァィゥェォッャュョヴ、。ー~「」【】『』゛゜♪♭■□◆◇△▲▽▼◎○●◯‥…・∴∵※×〒!”#$%&'()=~|`{+*}<>?_-^\@[;:],./\!”#$%&’()=~|`{+*}<>?_-^\@[;:],./\abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyz  ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789</nowiki>
+
JIS第1水準
 +
|<nowiki>亜唖娃阿哀愛挨姶逢葵茜穐悪握渥旭葦芦鯵梓圧斡扱宛姐虻飴絢綾鮎或粟袷安庵按暗案闇鞍杏以伊位依偉囲夷委威尉惟意慰易椅為畏異移維緯胃萎衣謂違遺医井亥域育郁磯一壱溢逸稲茨芋鰯允印咽員因姻引飲淫胤蔭院陰隠韻吋右宇烏羽迂雨卯鵜窺丑碓臼渦嘘唄欝蔚鰻姥厩浦瓜閏噂云運雲荏餌叡営嬰影映曳栄永泳洩瑛盈穎頴英衛詠鋭液疫益駅悦謁越閲榎厭円園堰奄宴延怨掩援沿演炎焔煙燕猿縁艶苑薗遠鉛鴛塩於汚甥凹央奥往応押旺横欧殴王翁襖鴬鴎黄岡沖荻億屋憶臆桶牡乙俺卸恩温穏音下化仮何伽価佳加可嘉夏嫁家寡科暇果架歌河火珂禍禾稼箇花苛茄荷華菓蝦課嘩貨迦過霞蚊俄峨我牙画臥芽蛾賀雅餓駕介会解回塊壊廻快怪悔恢懐戒拐改魁晦械海灰界皆絵芥蟹開階貝凱劾外咳害崖慨概涯碍蓋街該鎧骸浬馨蛙垣柿蛎鈎劃嚇各廓拡撹格核殻獲確穫覚角赫較郭閣隔革学岳楽額顎掛笠樫橿梶鰍潟割喝恰括活渇滑葛褐轄且鰹叶椛樺鞄株兜竃蒲釜鎌噛鴨栢茅萱粥刈苅瓦乾侃冠寒刊勘勧巻喚堪姦完官寛干幹患感慣憾換敢柑桓棺款歓汗漢澗潅環甘監看竿管簡緩缶翰肝艦莞観諌貫還鑑間閑関陥韓館舘丸含岸巌玩癌眼岩翫贋雁頑顔願企伎危喜器基奇嬉寄岐希幾忌揮机旗既期棋棄機帰毅気汽畿祈季稀紀徽規記貴起軌輝飢騎鬼亀偽儀妓宜戯技擬欺犠疑祇義蟻誼議掬菊鞠吉吃喫桔橘詰砧杵黍却客脚虐逆丘久仇休及吸宮弓急救朽求汲泣灸球究窮笈級糾給旧牛去居巨拒拠挙渠虚許距鋸漁禦魚亨享京供侠僑兇競共凶協匡卿叫喬境峡強彊怯恐恭挟教橋況狂狭矯胸脅興蕎郷鏡響饗驚仰凝尭暁業局曲極玉桐粁僅勤均巾錦斤欣欽琴禁禽筋緊芹菌衿襟謹近金吟銀九倶句区狗玖矩苦躯駆駈駒具愚虞喰空偶寓遇隅串櫛釧屑屈掘窟沓靴轡窪熊隈粂栗繰桑鍬勲君薫訓群軍郡卦袈祁係傾刑兄啓圭珪型契形径恵慶慧憩掲携敬景桂渓畦稽系経継繋罫茎荊蛍計詣警軽頚鶏芸迎鯨劇戟撃激隙桁傑欠決潔穴結血訣月件倹倦健兼券剣喧圏堅嫌建憲懸拳捲検権牽犬献研硯絹県肩見謙賢軒遣鍵険顕験鹸元原厳幻弦減源玄現絃舷言諺限乎個古呼固姑孤己庫弧戸故枯湖狐糊袴股胡菰虎誇跨鈷雇顧鼓五互伍午呉吾娯後御悟梧檎瑚碁語誤護醐乞鯉交佼侯候倖光公功効勾厚口向后喉坑垢好孔孝宏工巧巷幸広庚康弘恒慌抗拘控攻昂晃更杭校梗構江洪浩港溝甲皇硬稿糠紅紘絞綱耕考肯肱腔膏航荒行衡講貢購郊酵鉱砿鋼閤降項香高鴻剛劫号合壕拷濠豪轟麹克刻告国穀酷鵠黒獄漉腰甑忽惚骨狛込此頃今困坤墾婚恨懇昏昆根梱混痕紺艮魂些佐叉唆嵯左差査沙瑳砂詐鎖裟坐座挫債催再最哉塞妻宰彩才採栽歳済災采犀砕砦祭斎細菜裁載際剤在材罪財冴坂阪堺榊肴咲崎埼碕鷺作削咋搾昨朔柵窄策索錯桜鮭笹匙冊刷察拶撮擦札殺薩雑皐鯖捌錆鮫皿晒三傘参山惨撒散桟燦珊産算纂蚕讃賛酸餐斬暫残仕仔伺使刺司史嗣四士始姉姿子屍市師志思指支孜斯施旨枝止死氏獅祉私糸紙紫肢脂至視詞詩試誌諮資賜雌飼歯事似侍児字寺慈持時次滋治爾璽痔磁示而耳自蒔辞汐鹿式識鴫竺軸宍雫七叱執失嫉室悉湿漆疾質実蔀篠偲柴芝屡蕊縞舎写射捨赦斜煮社紗者謝車遮蛇邪借勺尺杓灼爵酌釈錫若寂弱惹主取守手朱殊狩珠種腫趣酒首儒受呪寿授樹綬需囚収周宗就州修愁拾洲秀秋終繍習臭舟蒐衆襲讐蹴輯週酋酬集醜什住充十従戎柔汁渋獣縦重銃叔夙宿淑祝縮粛塾熟出術述俊峻春瞬竣舜駿准循旬楯殉淳準潤盾純巡遵醇順処初所暑曙渚庶緒署書薯藷諸助叙女序徐恕鋤除傷償勝匠升召哨商唱嘗奨妾娼宵将小少尚庄床廠彰承抄招掌捷昇昌昭晶松梢樟樵沼消渉湘焼焦照症省硝礁祥称章笑粧紹肖菖蒋蕉衝裳訟証詔詳象賞醤鉦鍾鐘障鞘上丈丞乗冗剰城場壌嬢常情擾条杖浄状畳穣蒸譲醸錠嘱埴飾拭植殖燭織職色触食蝕辱尻伸信侵唇娠寝審心慎振新晋森榛浸深申疹真神秦紳臣芯薪親診身辛進針震人仁刃塵壬尋甚尽腎訊迅陣靭笥諏須酢図厨逗吹垂帥推水炊睡粋翠衰遂酔錐錘随瑞髄崇嵩数枢趨雛据杉椙菅頗雀裾澄摺寸世瀬畝是凄制勢姓征性成政整星晴棲栖正清牲生盛精聖声製西誠誓請逝醒青静斉税脆隻席惜戚斥昔析石積籍績脊責赤跡蹟碩切拙接摂折設窃節説雪絶舌蝉仙先千占宣専尖川戦扇撰栓栴泉浅洗染潜煎煽旋穿箭線繊羨腺舛船薦詮賎践選遷銭銑閃鮮前善漸然全禅繕膳糎噌塑岨措曾曽楚狙疏疎礎祖租粗素組蘇訴阻遡鼠僧創双叢倉喪壮奏爽宋層匝惣想捜掃挿掻操早曹巣槍槽漕燥争痩相窓糟総綜聡草荘葬蒼藻装走送遭鎗霜騒像増憎臓蔵贈造促側則即息捉束測足速俗属賊族続卒袖其揃存孫尊損村遜他多太汰詑唾堕妥惰打柁舵楕陀駄騨体堆対耐岱帯待怠態戴替泰滞胎腿苔袋貸退逮隊黛鯛代台大第醍題鷹滝瀧卓啄宅托択拓沢濯琢託鐸濁諾茸凧蛸只叩但達辰奪脱巽竪辿棚谷狸鱈樽誰丹単嘆坦担探旦歎淡湛炭短端箪綻耽胆蛋誕鍛団壇弾断暖檀段男談値知地弛恥智池痴稚置致蜘遅馳築畜竹筑蓄逐秩窒茶嫡着中仲宙忠抽昼柱注虫衷註酎鋳駐樗瀦猪苧著貯丁兆凋喋寵帖帳庁弔張彫徴懲挑暢朝潮牒町眺聴脹腸蝶調諜超跳銚長頂鳥勅捗直朕沈珍賃鎮陳津墜椎槌追鎚痛通塚栂掴槻佃漬柘辻蔦綴鍔椿潰坪壷嬬紬爪吊釣鶴亭低停偵剃貞呈堤定帝底庭廷弟悌抵挺提梯汀碇禎程締艇訂諦蹄逓邸鄭釘鼎泥摘擢敵滴的笛適鏑溺哲徹撤轍迭鉄典填天展店添纏甜貼転顛点伝殿澱田電兎吐堵塗妬屠徒斗杜渡登菟賭途都鍍砥砺努度土奴怒倒党冬凍刀唐塔塘套宕島嶋悼投搭東桃梼棟盗淘湯涛灯燈当痘祷等答筒糖統到董蕩藤討謄豆踏逃透鐙陶頭騰闘働動同堂導憧撞洞瞳童胴萄道銅峠鴇匿得徳涜特督禿篤毒独読栃橡凸突椴届鳶苫寅酉瀞噸屯惇敦沌豚遁頓呑曇鈍奈那内乍凪薙謎灘捺鍋楢馴縄畷南楠軟難汝二尼弐迩匂賑肉虹廿日乳入如尿韮任妊忍認濡禰祢寧葱猫熱年念捻撚燃粘乃廼之埜嚢悩濃納能脳膿農覗蚤巴把播覇杷波派琶破婆罵芭馬俳廃拝排敗杯盃牌背肺輩配倍培媒梅楳煤狽買売賠陪這蝿秤矧萩伯剥博拍柏泊白箔粕舶薄迫曝漠爆縛莫駁麦函箱硲箸肇筈櫨幡肌畑畠八鉢溌発醗髪伐罰抜筏閥鳩噺塙蛤隼伴判半反叛帆搬斑板氾汎版犯班畔繁般藩販範釆煩頒飯挽晩番盤磐蕃蛮匪卑否妃庇彼悲扉批披斐比泌疲皮碑秘緋罷肥被誹費避非飛樋簸備尾微枇毘琵眉美鼻柊稗匹疋髭彦膝菱肘弼必畢筆逼桧姫媛紐百謬俵彪標氷漂瓢票表評豹廟描病秒苗錨鋲蒜蛭鰭品彬斌浜瀕貧賓頻敏瓶不付埠夫婦富冨布府怖扶敷斧普浮父符腐膚芙譜負賦赴阜附侮撫武舞葡蕪部封楓風葺蕗伏副復幅服福腹複覆淵弗払沸仏物鮒分吻噴墳憤扮焚奮粉糞紛雰文聞丙併兵塀幣平弊柄並蔽閉陛米頁僻壁癖碧別瞥蔑箆偏変片篇編辺返遍便勉娩弁鞭保舗鋪圃捕歩甫補輔穂募墓慕戊暮母簿菩倣俸包呆報奉宝峰峯崩庖抱捧放方朋法泡烹砲縫胞芳萌蓬蜂褒訪豊邦鋒飽鳳鵬乏亡傍剖坊妨帽忘忙房暴望某棒冒紡肪膨謀貌貿鉾防吠頬北僕卜墨撲朴牧睦穆釦勃没殆堀幌奔本翻凡盆摩磨魔麻埋妹昧枚毎哩槙幕膜枕鮪柾鱒桝亦俣又抹末沫迄侭繭麿万慢満漫蔓味未魅巳箕岬密蜜湊蓑稔脈妙粍民眠務夢無牟矛霧鵡椋婿娘冥名命明盟迷銘鳴姪牝滅免棉綿緬面麺摸模茂妄孟毛猛盲網耗蒙儲木黙目杢勿餅尤戻籾貰問悶紋門匁也冶夜爺耶野弥矢厄役約薬訳躍靖柳薮鑓愉愈油癒諭輸唯佑優勇友宥幽悠憂揖有柚湧涌猶猷由祐裕誘遊邑郵雄融夕予余与誉輿預傭幼妖容庸揚揺擁曜楊様洋溶熔用窯羊耀葉蓉要謡踊遥陽養慾抑欲沃浴翌翼淀羅螺裸来莱頼雷洛絡落酪乱卵嵐欄濫藍蘭覧利吏履李梨理璃痢裏裡里離陸律率立葎掠略劉流溜琉留硫粒隆竜龍侶慮旅虜了亮僚両凌寮料梁涼猟療瞭稜糧良諒遼量陵領力緑倫厘林淋燐琳臨輪隣鱗麟瑠塁涙累類令伶例冷励嶺怜玲礼苓鈴隷零霊麗齢暦歴列劣烈裂廉恋憐漣煉簾練聯蓮連錬呂魯櫓炉賂路露労婁廊弄朗楼榔浪漏牢狼篭老聾蝋郎六麓禄肋録論倭和話歪賄脇惑枠鷲亙亘鰐詫藁蕨椀湾碗腕あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわゐゑをんがぎぐげござじずぜぞだぢづでどばびぶべぼぱぴぷぺぽぁぃぅぇぉっゃゅょアイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヰヱヲンガギグゲゴザジズゼゾダヂズデドバビブベボパピプペポァィゥェォッャュョヴ、。ー~「」【】『』゛゜♪♭■□◆◇△▲▽▼◎○●◯‥…・∴∵※×〒!”#$%&'()=~|`{+*}<>?_-^\@[;:],./\!”#$%&’()=~|`{+*}<>?_-^\@[;:],./\abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyz  ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789</nowiki>
 
|-
 
|-
 
|曜日
 
|曜日

2023年1月23日 (月) 00:03時点における版

Arduino IDE + LVGL8.3.3

注:LVGL8.3.3ArduinoIDEからインストールできるます<BR />
  いくつかのバグもありますが、バグは回避しながら使いましょう。

install

Arduino IDE

Arduino公式ページ または Windows Store からインストールして下さい。
ESP32を使えるように、追加のボードマネージャーを設定します。

"ファイル"→"環境設定"→"追加のボードマネージャーのURL"
https://raw.githubusercontent.com/espressif/arduino-esp32/gh-pages/package_esp32_index.json
https://raw.githubusercontent.com/espressif/arduino-esp32/gh-pages/package_esp32_dev_index.json

library

lv_Arduino

lv_arduinoがインストールされているとライブラリの重複でうまく動かないため、
先にライブラリフォルダからフォルダ丸ごと削除して下さい。
削除すれば次にArduinoIDEを起動した時に自動で認識されます。
ライブラリフォルダの場所は、"ファイル"→"環境設定"→"スケッチブックの保存場所" の "libraries" フォルダ内です。

Arduino IDEを起動、"ツール" → "ライブラリを管理..." → 検索:"LVGL"

LVGL Ard install 01.jpg

"lv_arduino" をインストールします。

次に、ライブラリをインストールしたフォルダ 〜/lvgl/ の中にある "lv_conf_template.h" を 1個下の階層にコピーして、さらにファイル名を"lv_conf.h"に変更します。

  (library folder)/lvgl/lv_conf_template.h
          /lv_conf.h

さらにこの"lv_conf.h"をテキストエディタで開き、最初の辺りにある "#if 0"を"#if 0"に書き換えて保存します。 これでLVGLが有効になります。

以上でインストール完了です。

LVGLの解説

https://www.arduino.cc/reference/en/libraries/lvgl/




Fontの追加

  • 組み込みたいFontをDownload

Free Fonts

7seg https://torinak.com/font/7-segment
押出M-Gothic https://tanukifont.com/oshidashi-m-gothic/

Font Viewer

https://fontdrop.info/
https://fontsee.com/
  • FontをLVGLの形式に変換
Online Font Converter https://lvgl.io/tools/fontconverter

7seg(60px)の入力例

Name 出力ファイル名 lv_font_7seg_60

※"-"は使えません

Size 縦幅 60

※日本語fontで50以上にすると、

 compile時にErrorになる事があります。

Bpp 1px分解能 4 bit-per-pixel


空白 Enable Font compression (reduces size but results in slower rendering)

Horizontal subpixel rendering (may improve font quality but results in larger fonts)
Try to use glyph color info from font to create grayscale icons.

Range 空白
Symbols 7seg 1234567890/-+÷×=:, .CALcalonON
日本語

JIS第1水準

亜唖娃阿哀愛挨姶逢葵茜穐悪握渥旭葦芦鯵梓圧斡扱宛姐虻飴絢綾鮎或粟袷安庵按暗案闇鞍杏以伊位依偉囲夷委威尉惟意慰易椅為畏異移維緯胃萎衣謂違遺医井亥域育郁磯一壱溢逸稲茨芋鰯允印咽員因姻引飲淫胤蔭院陰隠韻吋右宇烏羽迂雨卯鵜窺丑碓臼渦嘘唄欝蔚鰻姥厩浦瓜閏噂云運雲荏餌叡営嬰影映曳栄永泳洩瑛盈穎頴英衛詠鋭液疫益駅悦謁越閲榎厭円園堰奄宴延怨掩援沿演炎焔煙燕猿縁艶苑薗遠鉛鴛塩於汚甥凹央奥往応押旺横欧殴王翁襖鴬鴎黄岡沖荻億屋憶臆桶牡乙俺卸恩温穏音下化仮何伽価佳加可嘉夏嫁家寡科暇果架歌河火珂禍禾稼箇花苛茄荷華菓蝦課嘩貨迦過霞蚊俄峨我牙画臥芽蛾賀雅餓駕介会解回塊壊廻快怪悔恢懐戒拐改魁晦械海灰界皆絵芥蟹開階貝凱劾外咳害崖慨概涯碍蓋街該鎧骸浬馨蛙垣柿蛎鈎劃嚇各廓拡撹格核殻獲確穫覚角赫較郭閣隔革学岳楽額顎掛笠樫橿梶鰍潟割喝恰括活渇滑葛褐轄且鰹叶椛樺鞄株兜竃蒲釜鎌噛鴨栢茅萱粥刈苅瓦乾侃冠寒刊勘勧巻喚堪姦完官寛干幹患感慣憾換敢柑桓棺款歓汗漢澗潅環甘監看竿管簡緩缶翰肝艦莞観諌貫還鑑間閑関陥韓館舘丸含岸巌玩癌眼岩翫贋雁頑顔願企伎危喜器基奇嬉寄岐希幾忌揮机旗既期棋棄機帰毅気汽畿祈季稀紀徽規記貴起軌輝飢騎鬼亀偽儀妓宜戯技擬欺犠疑祇義蟻誼議掬菊鞠吉吃喫桔橘詰砧杵黍却客脚虐逆丘久仇休及吸宮弓急救朽求汲泣灸球究窮笈級糾給旧牛去居巨拒拠挙渠虚許距鋸漁禦魚亨享京供侠僑兇競共凶協匡卿叫喬境峡強彊怯恐恭挟教橋況狂狭矯胸脅興蕎郷鏡響饗驚仰凝尭暁業局曲極玉桐粁僅勤均巾錦斤欣欽琴禁禽筋緊芹菌衿襟謹近金吟銀九倶句区狗玖矩苦躯駆駈駒具愚虞喰空偶寓遇隅串櫛釧屑屈掘窟沓靴轡窪熊隈粂栗繰桑鍬勲君薫訓群軍郡卦袈祁係傾刑兄啓圭珪型契形径恵慶慧憩掲携敬景桂渓畦稽系経継繋罫茎荊蛍計詣警軽頚鶏芸迎鯨劇戟撃激隙桁傑欠決潔穴結血訣月件倹倦健兼券剣喧圏堅嫌建憲懸拳捲検権牽犬献研硯絹県肩見謙賢軒遣鍵険顕験鹸元原厳幻弦減源玄現絃舷言諺限乎個古呼固姑孤己庫弧戸故枯湖狐糊袴股胡菰虎誇跨鈷雇顧鼓五互伍午呉吾娯後御悟梧檎瑚碁語誤護醐乞鯉交佼侯候倖光公功効勾厚口向后喉坑垢好孔孝宏工巧巷幸広庚康弘恒慌抗拘控攻昂晃更杭校梗構江洪浩港溝甲皇硬稿糠紅紘絞綱耕考肯肱腔膏航荒行衡講貢購郊酵鉱砿鋼閤降項香高鴻剛劫号合壕拷濠豪轟麹克刻告国穀酷鵠黒獄漉腰甑忽惚骨狛込此頃今困坤墾婚恨懇昏昆根梱混痕紺艮魂些佐叉唆嵯左差査沙瑳砂詐鎖裟坐座挫債催再最哉塞妻宰彩才採栽歳済災采犀砕砦祭斎細菜裁載際剤在材罪財冴坂阪堺榊肴咲崎埼碕鷺作削咋搾昨朔柵窄策索錯桜鮭笹匙冊刷察拶撮擦札殺薩雑皐鯖捌錆鮫皿晒三傘参山惨撒散桟燦珊産算纂蚕讃賛酸餐斬暫残仕仔伺使刺司史嗣四士始姉姿子屍市師志思指支孜斯施旨枝止死氏獅祉私糸紙紫肢脂至視詞詩試誌諮資賜雌飼歯事似侍児字寺慈持時次滋治爾璽痔磁示而耳自蒔辞汐鹿式識鴫竺軸宍雫七叱執失嫉室悉湿漆疾質実蔀篠偲柴芝屡蕊縞舎写射捨赦斜煮社紗者謝車遮蛇邪借勺尺杓灼爵酌釈錫若寂弱惹主取守手朱殊狩珠種腫趣酒首儒受呪寿授樹綬需囚収周宗就州修愁拾洲秀秋終繍習臭舟蒐衆襲讐蹴輯週酋酬集醜什住充十従戎柔汁渋獣縦重銃叔夙宿淑祝縮粛塾熟出術述俊峻春瞬竣舜駿准循旬楯殉淳準潤盾純巡遵醇順処初所暑曙渚庶緒署書薯藷諸助叙女序徐恕鋤除傷償勝匠升召哨商唱嘗奨妾娼宵将小少尚庄床廠彰承抄招掌捷昇昌昭晶松梢樟樵沼消渉湘焼焦照症省硝礁祥称章笑粧紹肖菖蒋蕉衝裳訟証詔詳象賞醤鉦鍾鐘障鞘上丈丞乗冗剰城場壌嬢常情擾条杖浄状畳穣蒸譲醸錠嘱埴飾拭植殖燭織職色触食蝕辱尻伸信侵唇娠寝審心慎振新晋森榛浸深申疹真神秦紳臣芯薪親診身辛進針震人仁刃塵壬尋甚尽腎訊迅陣靭笥諏須酢図厨逗吹垂帥推水炊睡粋翠衰遂酔錐錘随瑞髄崇嵩数枢趨雛据杉椙菅頗雀裾澄摺寸世瀬畝是凄制勢姓征性成政整星晴棲栖正清牲生盛精聖声製西誠誓請逝醒青静斉税脆隻席惜戚斥昔析石積籍績脊責赤跡蹟碩切拙接摂折設窃節説雪絶舌蝉仙先千占宣専尖川戦扇撰栓栴泉浅洗染潜煎煽旋穿箭線繊羨腺舛船薦詮賎践選遷銭銑閃鮮前善漸然全禅繕膳糎噌塑岨措曾曽楚狙疏疎礎祖租粗素組蘇訴阻遡鼠僧創双叢倉喪壮奏爽宋層匝惣想捜掃挿掻操早曹巣槍槽漕燥争痩相窓糟総綜聡草荘葬蒼藻装走送遭鎗霜騒像増憎臓蔵贈造促側則即息捉束測足速俗属賊族続卒袖其揃存孫尊損村遜他多太汰詑唾堕妥惰打柁舵楕陀駄騨体堆対耐岱帯待怠態戴替泰滞胎腿苔袋貸退逮隊黛鯛代台大第醍題鷹滝瀧卓啄宅托択拓沢濯琢託鐸濁諾茸凧蛸只叩但達辰奪脱巽竪辿棚谷狸鱈樽誰丹単嘆坦担探旦歎淡湛炭短端箪綻耽胆蛋誕鍛団壇弾断暖檀段男談値知地弛恥智池痴稚置致蜘遅馳築畜竹筑蓄逐秩窒茶嫡着中仲宙忠抽昼柱注虫衷註酎鋳駐樗瀦猪苧著貯丁兆凋喋寵帖帳庁弔張彫徴懲挑暢朝潮牒町眺聴脹腸蝶調諜超跳銚長頂鳥勅捗直朕沈珍賃鎮陳津墜椎槌追鎚痛通塚栂掴槻佃漬柘辻蔦綴鍔椿潰坪壷嬬紬爪吊釣鶴亭低停偵剃貞呈堤定帝底庭廷弟悌抵挺提梯汀碇禎程締艇訂諦蹄逓邸鄭釘鼎泥摘擢敵滴的笛適鏑溺哲徹撤轍迭鉄典填天展店添纏甜貼転顛点伝殿澱田電兎吐堵塗妬屠徒斗杜渡登菟賭途都鍍砥砺努度土奴怒倒党冬凍刀唐塔塘套宕島嶋悼投搭東桃梼棟盗淘湯涛灯燈当痘祷等答筒糖統到董蕩藤討謄豆踏逃透鐙陶頭騰闘働動同堂導憧撞洞瞳童胴萄道銅峠鴇匿得徳涜特督禿篤毒独読栃橡凸突椴届鳶苫寅酉瀞噸屯惇敦沌豚遁頓呑曇鈍奈那内乍凪薙謎灘捺鍋楢馴縄畷南楠軟難汝二尼弐迩匂賑肉虹廿日乳入如尿韮任妊忍認濡禰祢寧葱猫熱年念捻撚燃粘乃廼之埜嚢悩濃納能脳膿農覗蚤巴把播覇杷波派琶破婆罵芭馬俳廃拝排敗杯盃牌背肺輩配倍培媒梅楳煤狽買売賠陪這蝿秤矧萩伯剥博拍柏泊白箔粕舶薄迫曝漠爆縛莫駁麦函箱硲箸肇筈櫨幡肌畑畠八鉢溌発醗髪伐罰抜筏閥鳩噺塙蛤隼伴判半反叛帆搬斑板氾汎版犯班畔繁般藩販範釆煩頒飯挽晩番盤磐蕃蛮匪卑否妃庇彼悲扉批披斐比泌疲皮碑秘緋罷肥被誹費避非飛樋簸備尾微枇毘琵眉美鼻柊稗匹疋髭彦膝菱肘弼必畢筆逼桧姫媛紐百謬俵彪標氷漂瓢票表評豹廟描病秒苗錨鋲蒜蛭鰭品彬斌浜瀕貧賓頻敏瓶不付埠夫婦富冨布府怖扶敷斧普浮父符腐膚芙譜負賦赴阜附侮撫武舞葡蕪部封楓風葺蕗伏副復幅服福腹複覆淵弗払沸仏物鮒分吻噴墳憤扮焚奮粉糞紛雰文聞丙併兵塀幣平弊柄並蔽閉陛米頁僻壁癖碧別瞥蔑箆偏変片篇編辺返遍便勉娩弁鞭保舗鋪圃捕歩甫補輔穂募墓慕戊暮母簿菩倣俸包呆報奉宝峰峯崩庖抱捧放方朋法泡烹砲縫胞芳萌蓬蜂褒訪豊邦鋒飽鳳鵬乏亡傍剖坊妨帽忘忙房暴望某棒冒紡肪膨謀貌貿鉾防吠頬北僕卜墨撲朴牧睦穆釦勃没殆堀幌奔本翻凡盆摩磨魔麻埋妹昧枚毎哩槙幕膜枕鮪柾鱒桝亦俣又抹末沫迄侭繭麿万慢満漫蔓味未魅巳箕岬密蜜湊蓑稔脈妙粍民眠務夢無牟矛霧鵡椋婿娘冥名命明盟迷銘鳴姪牝滅免棉綿緬面麺摸模茂妄孟毛猛盲網耗蒙儲木黙目杢勿餅尤戻籾貰問悶紋門匁也冶夜爺耶野弥矢厄役約薬訳躍靖柳薮鑓愉愈油癒諭輸唯佑優勇友宥幽悠憂揖有柚湧涌猶猷由祐裕誘遊邑郵雄融夕予余与誉輿預傭幼妖容庸揚揺擁曜楊様洋溶熔用窯羊耀葉蓉要謡踊遥陽養慾抑欲沃浴翌翼淀羅螺裸来莱頼雷洛絡落酪乱卵嵐欄濫藍蘭覧利吏履李梨理璃痢裏裡里離陸律率立葎掠略劉流溜琉留硫粒隆竜龍侶慮旅虜了亮僚両凌寮料梁涼猟療瞭稜糧良諒遼量陵領力緑倫厘林淋燐琳臨輪隣鱗麟瑠塁涙累類令伶例冷励嶺怜玲礼苓鈴隷零霊麗齢暦歴列劣烈裂廉恋憐漣煉簾練聯蓮連錬呂魯櫓炉賂路露労婁廊弄朗楼榔浪漏牢狼篭老聾蝋郎六麓禄肋録論倭和話歪賄脇惑枠鷲亙亘鰐詫藁蕨椀湾碗腕あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわゐゑをんがぎぐげござじずぜぞだぢづでどばびぶべぼぱぴぷぺぽぁぃぅぇぉっゃゅょアイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヰヱヲンガギグゲゴザジズゼゾダヂズデドバビブベボパピプペポァィゥェォッャュョヴ、。ー~「」【】『』゛゜♪♭■□◆◇△▲▽▼◎○●◯‥…・∴∵※×〒!”#$%&'()=~|`{+*}<>?_-^\@[;:],./\!”#$%&’()=~|`{+*}<>?_-^\@[;:],./\abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyz  ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789
曜日

URL

温度

°%.,+-/: * abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789月火水木金土日曜()()0123456789[;:]℃

記入例
7sef font settings.jpg

  • Font fileを修正

先頭のlvgl.hの設定を変更

修正前
#ifdef LV_LVGL_H_INCLUDE_SIMPLE
#include "lvgl.h"
#else
#include "lvgl/lvgl.h"
#endif
修正後
#ifdef LV_LVGL_H_INCLUDE_SIMPLE
    #include "lvgl.h"
#else
    #include "../../lvgl.h"
#endif
  • lv_font.h:追加したFontの設定を追記
lv_font.h 242行目辺り /home/■/Arduino/Projects/libraries/lvgl/src/font
#if LV_FONT_7SEG_60
LV_FONT_DECLARE(lv_font_7seg_60)
#endif
  • lv_font.mk:追加したFontの設定を追記
lv_font.mk 32行目辺り /home/■/Arduino/Projects/libraries/lvgl/src/font
CSRCS += lv_font_7seg_60.c
  • lv_conf.h:追加したFontの設定を追記
lv_conf.h 390行目辺り /home/■/Arduino/Projects/libraries/lv_conf.h
#define LV_FONT_7SEG_60  1
  • Fontを配置
Windows
ubuntu store /home/■/Arduino/Projects/libraries/lvgl/src/font
  • Programを変更
lv_obj_set_style_text_font(label_, &lv_font_7seg_60 , LV_PART_MAIN | LV_STATE_DEFAULT);


  • 参考HP
組み込み手順 https://qiita.com/skyfish20ch/items/e5437221447b4307d299



動作確認

ここでは TFT_eSPI + LVGL8.3.3 の組み合わせで動作確認をします。

以下、書きかけです!!!!


TFT_eSPIは結線情報をヘッダーファイル(User_Setup.h)内に保存するため、色々なスケッチ例をほぼ変更なしで動かす事ができます。

※TFT_eSPI の代わりに LovyanGFX+LVGLで動作確認したい場合の動作確認の方法は
  (日本語字幕)LVGL8:Ep0.GFX Setup(ft.LovyanGFX)を参照してください。
 正直、LovyanGFXの方が良いのですが、ここではTFT_eSPIについて書きます。


TFT_eSPIのインストール

ディスプレイドライバ TFT_eSPI をインストールします。

スケッチ例で動作確認

LVGLの動作確認①

タッチセンサと画像表示の両方を確認するため、スライダーを動かすスケッチ例を動かします。
"ファイル" → "スケッチ例" → "lv_arduino" → "ESP32_TFT_Slider"
スライダーを操作できれば動作確認完了です。

LVGLの動作確認②

もう少し凝ったスケッチ例を Bodmer氏(TFT_eSPI の作者)が公開されています。
せっかくなので実行してみましょう。
Real-world LVGL demo example?ここのbodmer氏の投稿にある
LVGL_ESP32_Test_1.zip (3.45 KB)
これをダウンロード・解凍すると現れるフォルダの中に次のファイルがあります。

LVGL_ESP32_Test_1
Callbacks.ino
Loop.ino
LVGL_ESP32_Test_1.ino
Setup.ino

これを実行ファイルを置いているフォルダにフォルダごとコピーします。
実行ファイル置いてあるフォルダの場所は、デフォルトでは次の場所になっています。
"■"はPCにログインしているアカウント名です。

Linux /home/■/Arduino/projects/
Windows C:\Users\■\Documents\Arduino

LVGL_ESP32_Test_1.ino を実行します。

スライダー等が表示されて操作できれば動作確認完了です。

問題点のメモ

LVGL8.3.3は色々と未完成な部分が多い印象です。

機能 問題点 回避策
TFT_eSPI TFT_eSPIとセットで使うと、TFT_eSPIが出力するxy座標の画素数の計算がxyで逆になってしまい、画像の縦横比と合わない。

(LovyanGFXでは正常)

各軸の分解能比で補正。

 dat->point.x = touchX*4/3;

 dat->point.y = touchY*3/4;

又は、LovyanGFXを使う。

timer LVGLはArduinoのタイマーをch番号の小さい方順に使うっぽくて、LEDの明るさ制御等にタイマーを使うと衝突してうまく動かない事がある。 衝突しないchを探る
timer lv_timerを使うと、

1.動作回数の指定が効かない。

2.pauseは効くけど、resumeできない。

1.別で回数をカウントして最後にtimerをdelete

2.deleteは効くので、一旦消してからresumeするタイミングで再びタイマーを再定義する。

xTask xTaskCreateで並列処理させるとGuru Error多発。 lv_timerを使う。

タイミングの制約がある場合には他のタイマーを止める等で対策をする。

Tutorial : LVGL8

https://docs.arduino.cc/tutorials/portenta-h7/creating-gui-with-lvgl

Tutorial Video:lv_arduino

by That Project

github
YouTube
No. YouTube 内容 lvgl TFT_eSPI LovyanGFX SquareLine code
0 (日本語字幕)LVGL8 : Ep 0. GFX Setup (ft. LovyanGFX) LVGL+LovyanGFX

・LovyanGFXの初期設定

・タッチディスプレイのcalibration data取得 ここでタッチディスプレイの calibration data を得るため、下記Videoを見る前に実施しておく事。

github
1 (日本語字幕)ESP32 :LVGL8 : Ep 1. Demos with LILY PI github
2 (日本語字幕)ESP32 :LVGL8 : Ep 2. Shortcuts for Pull Stack Developer

Fullでなく、Pullスタックの開発者のためのショートカットキー

ESP32をキーボードとして使う github
3 ESP32 :LVGL8 : Ep3.Ep 3. Base Project for WiFi Settings

WiFi設定の基本プロジェクト LVGL8 Base roject

For Selecting WiFi Dynamically

WiFi接続・時刻取得・ github
4 QR Code Maker (ESP32+LVGL8) github
5 Make your own System Monitor with ESP32 + LVGL 8 github
LVGL8 | Ep 3. Base Project for WiFi Settings]

Arduino IDE + lv_arduino

lv_Arduino (Arduino向けLVGL ver3)

注:lv_Arduinoは古くて現在のLVGLとはあまり互換性がありませんが、新しいLVGLより軽く動きます
  いくつかの重大なバグもあるため、LVGL Ver8以降をお勧めします

install

Arduino IDE

Arduino公式ページ または Windows Store からインストールして下さい。
ESP32を使えるように、追加のボードマネージャーを設定します。

"ファイル"→"環境設定"→"追加のボードマネージャーのURL"
https://raw.githubusercontent.com/espressif/arduino-esp32/gh-pages/package_esp32_index.json
https://raw.githubusercontent.com/espressif/arduino-esp32/gh-pages/package_esp32_dev_index.json

library

lv_Arduino

Arduino IDEを起動、"ツール" → "ライブラリを管理..." → 検索:"LVGL"

LVGL Ard install 01.jpg

"lv_arduino" をインストールします。

lv_arduinoは旧版で、既にサポートされていません。新しいライブラリは lvgl , lv_example です。

しかし、Arduino IDE にライブラリマネージャからインストールした場合に

そのまま動作するのは lv_arduino である事から、ここでは lv_arduino を使用します。
同時に lvgl , lv_example がインストールされているとライブラリの重複で動作しなく

なるため、 lvgl , lv_example を消して下さい。

フォルダ丸ごと消してからアプリを再起動すればアンインストール完了です。
場所は、"ファイル"→"環境設定"→"スケッチブックの保存場所" の "libraries" フォルダ内です。

以上でインストール完了です。

LVGLの解説

https://www.arduino.cc/reference/en/libraries/lvgl/




動作確認

ここでは TFT_eSPI + LVGL の組み合わせで動作確認をします。
TFT_eSPIは結線情報をヘッダーファイル(User_Setup.h)内に保存するため、色々なスケッチ例をほぼ変更なしで動かす事ができます。

※TFT_eSPI の代わりに LovyanGFX+LVGLで動作確認したい場合の動作確認の方法は
  (日本語字幕)LVGL8:Ep0.GFX Setup(ft.LovyanGFX)を参照してください。


TFT_eSPIのインストール

ディスプレイドライバ TFT_eSPI をインストールします。

スケッチ例で動作確認

LVGLの動作確認①

タッチセンサと画像表示の両方を確認するため、スライダーを動かすスケッチ例を動かします。
"ファイル" → "スケッチ例" → "lv_arduino" → "ESP32_TFT_Slider"
スライダーを操作できれば動作確認完了です。

LVGLの動作確認②

もう少し凝ったスケッチ例を Bodmer氏(TFT_eSPI の作者)が公開されています。
せっかくなので実行してみましょう。
Real-world LVGL demo example?ここのbodmer氏の投稿にある
LVGL_ESP32_Test_1.zip (3.45 KB)
これをダウンロード・解凍すると現れるフォルダの中に次のファイルがあります。

LVGL_ESP32_Test_1
Callbacks.ino
Loop.ino
LVGL_ESP32_Test_1.ino
Setup.ino

これを実行ファイルを置いているフォルダにフォルダごとコピーします。
実行ファイル置いてあるフォルダの場所は、デフォルトでは次の場所になっています。
"■"はPCにログインしているアカウント名です。

Linux /home/■/Arduino/projects/
Windows C:\Users\■\Documents\Arduino

LVGL_ESP32_Test_1.ino を実行します。

スライダー等が表示されて操作できれば動作確認完了です。

Tutorial : lv_arduino

https://docs.arduino.cc/tutorials/portenta-h7/creating-gui-with-lvgl

Tutorial Video:lv_arduino

by That Project

github
YouTube
No. YouTube 内容 lvgl TFT_eSPI LovyanGFX SquareLine code
ESP32Berry, "WiFi connection & Simple Note App" Version 0.1 Group: ESP32+LVGL Projects
0 Part.0 -

Touch Display Setup for Simple Note App📝

配線

I/O Port 設定

TFT_eSPI インストール

タッチ位置調整

LCD向き設定(横長)

1 Part.1 - Basic LittlevGL for Simple Note App📝
2 Part.2 - By LittlevGL for Simple Note App📝
1/2 ChatApp:ESP32 + ESP-NOW + LVGL7

Part 1/2 - LVGL GUI Layout

ESP-NOWとは:ESP同士で通信する機能

キー入力画面の作り方

github
2/2 ChatApp:ESP32 + ESP-NOW + LVGL7

Part 2/2 - ESP-NOW bidirectional Comm (Primary - Secondary)

github
1/2 ESP32 Dynamic WIFI configuration GUI using LVGL7.x

Part 1/2 - Basic Setting

インストール:TFT-eSPI, lv_arduino

TFT_eSPI:タッチセンサのcalibration parameter取得 ※defaultの方がいいかも?

LVGL:スライダーdemoの動作確認

github
2/2 ESP32 Dynamic WIFI configuration GUI using LVGL7.x

Part 2/2 - App Structure

Wifi:DropDownListからSSID選択、Passをキー入力

WiFi接続

プログラムの概要説明

※320x240の画面ではメーターがはみ出し、Status barは完全にはみだす。

1/2 Part.1: Creating Tesla's Website in SquareLine Studio (ESP32+LVGL) SquareLine Studio → Arduino IDE (LVGL+LovyanGFX) github
2/2 Part.2: Creating Tesla's Website in SquareLine Studio (ESP32+LVGL) イベント・アクションの設定→ Arduino IDE (LVGL+LovyanGFX)
1/2 トイカメラを作ります! パート1

ESP32CAM + ILI9488 LVGL7 : リアルタイムディスプレイ

2/2 トイカメラを作ります! パート2

ESP32CAM + ILI9488 LVGL7 : LVGL設定

LVGL8 | Ep 3. Base Project for WiFi Settings]

eclipse IDE + LVGL

フォルダ構成

#Linux
#Windows

LVGLドキュメント日本語訳

LVGL Ver8.2 docs

Introduction

Introduction

Requirements

License

Repository layout

Release policy

FAQ

Examples

Get started

Styles

Animations

Events

Layouts

Scrolling

Widgets

Get started

Quick overview

Get started in a simulator

Add LVGL into your project

Learn the basics

Examples

porting

Set up a project

Display interface

Tick interface

Task Handler

Sleep management

Operating system and interrupts

Logging

Add custom GPU

Overview

Objects

Positions, sizes, and layouts

Styles

Style properties

Scroll

Layers

Events

Input devices

Displays

Colors

Fonts

Images

File system

Animations

Timers

Drawing

New widget

Widgets

Layouts

Flex

Grid

3rd party libraries

File System Interfaces

BMP decoder

JPG decoder

PNG decoder

GIF decoder

FreeType support

QR code

Lottie player

FFmpeg support

Others

Snapshot

Monkey

Grid navigation

Contributing

Introduction

Pull request

Developer Certification of Origin (DCO)

Ways to contribute

Changelog

Roadmap

LVGL Readme (github)

日本語 English

LVGL+eclipse Tutorial Video

YouTube OS 作者 内容 IDE lvgl.h TFT_eSPI LovyanGFX
How to Run Littlev Graphics Library in PC Simulator (Linux)

※lv_pcはproj_pcに変更。

※最後のRun configuurationsでC/C++ Appricationsに"~/eclipse-workspace/proj_pc/Debug/proj_pc"を設定。

Linux LVGL Linux環境のSetupからSimを動かすまで。

インストール:SDL2,JRE,Eclipse

Run:PC Simulator

※Sim内容の説明なし

Eclipse
ILI9341 TFT LCDからESP32-ディスプレイ、SDカード、およびタッチの完全な方法。 TFT_eSPIドライバーの使用 XTronical TFT_eSPIの設定
LVGL8 | Ep 0. GFX Setup (ft. LovyanGFX)] Mac That Project Arduino環境構築
GUI on ESP32 with 30 FPS using LittlevGL LVGL 動作のdemoのみ
Make your own System Monitor with ESP32 + LVGL 8
ESP32-Watch for OpenHaystack
QR Code Maker (ESP32+LVGL8)
Not AirTag, But ESP32Tag
ESP32 | LVGL8 | Ep3.WiFi設定の基本プロジェクト
ESP32 Dynamic WIFI configuration GUI using LVGL7.x

Part 2/2 - Application Structure

Interface LVGL with STM32 Low Memory Controllers :: Parallel Display Windows Controllers

Tech

LVGLpageの初期設定方法の詳細な解説

フレームバッファの使い方等(STM32)

STM32CUBEIDE

SquareLine Studio

[EN]

インストール

次の順にインストールします。

  1. Git
  2. ESP-IDF+Eclipse
  3. SquareLine Studio

使い方 for Arduino IDE

Arduino用のファイルを出力するためには、次の通りです。

  1. 何かプロジェクトを作ります。
  2. "Export"→"Create Template Project"→保存先のフォルダを指定
  3. "Export"→"Export UI Files"

保存先のフォルダの中の次の場所にファイルが保存されます。
<folder>/stm32g0/ui/ui.ino 等
Arduino IDEから上記フォルダを開きます。

  1. 〜.ino  入り口のファイルです。
  2. ui.c   メインの処理をするファイルです。
  3. ui.h
  4. ui_comp.c
  5. ui.comp.h
  6. ui_helper.c
  7. ui_helper.h


詳細な中身をよく観察すればわかってくると思います。

TFT_eSPIで使う場合、

〜.inoファイルに追加するのは次の通りです。

・SETUPの前

#include <TFT_eSPI.h>

static const uint16_t screenWidth  = 320; //画素数:横

static const uint16_t screenHeight = 240; //画素数:縦

TFT_eSPI tft = TFT_eSPI(screenWidth, screenHeight);

・void my_touchpad_read(〜)の中

bool touched = tft.getTouch( &touchX, &touchY, 600 );
defaultでは次のように書かれているので、必ず書き換える必要があります。

bool touched = false;//tft.getTouch( &touchX, &touchY, 600 );

・void setup()の中

    tft.begin();          /* TFT init */

    tft.setRotation( 3 ); /* Landscape orientation, flipped */

    uint16_t calData[5] = { 409, 3504, 274, 3542, 1 };

    tft.setTouch(calData);

calDataを書き込む後半の2行が欠けているため必ず追加します。

calDataの数列は Touch_calibrate.ino で取得します。

tft.setRotation(3)で向きが決まり、その値により

calDataの値は変化するので、4種類取得しておけば十分です。

おおよそこれで動くと思います。

ドキュメント日本語訳

 Readme

https://docs.squareline.io/docs/squareline/

Welcome

ようこそ

[EN] Welcome

Introduction (2)

はじめに

[EN] Overview

[EN] Typical Development Workflow

[EN] Licenses

[EN] Installation

[EN] Getting Started

[EN] Licence Manager

Designer environment

環境

[EN] How to use the SquareLine Studio layout?
[EN] Launcher
[EN] Preferences
[EN] Project Settings

Panels

[EN] Animation Panel
[EN] Asset Panel
[EN] Console Panel
[EN] Font Manager Panel
[EN] Hierarchy Panel
[EN] History Panel
[EN] Inspector Panel
[EN] Widget Panel

Styles

スタイル

[EN] Styles

Events and Actions

イベントとアクション

Events and Actions [EN]

Miscellaneous

その他

[EN] Changelog

[EN] How to upgrade SquareLine Studio to an up-to-date version?

[EN] Getting Help

[EN] Third Party Components in SquareLine Studio

Tutorials

チュートリアル

[EN] Tutorial 1 - Trying out an Example

[EN] Tutorial 2 - Create a New Application

[EN] Tutorial 3 - Add Styles

[EN] Tutorial 4 - Add Events

Tutorial Video:SuareLine Studio

https://youtu.be/9qp3Lmc8r-Q 全て英語です。日本語字幕で見る場合には、右下の歯車マークの"設定"から"字幕:英語(自動生成)"→"自動翻訳:日本語"とします。

SquareLine studio + eclipseのワークフローの全体像を知りたい人には★がオススメです。

eclipse Sim ArduinoIDE ESP32 title
Create an Impressive UI in 10 Minutes without Images 3Dプリンタ用UIを10分で作る
Developing Embedded GUI with Open Source LVGL. LVGL/SquareLine Studioの概要説明 Webinar
SquareLine Studio SquareLine studio プロモーションビデオ
Basic Tutorial #1:Get started アプリの概要説明
#2:Create a New Project 新prjの作り方、ボタンの配置・設定
#3:Styles Stylesの設定
#4:Events and Actions イベントとアクションの設定・動き方
#5:Animations アニメーションの作り方・動き方
Part.1: Creating Tesla's Website in SquareLine Studio (ESP32+LVGL) SquareLine Studio → Arduino IDE (LVGL+LovyanGFX) github
Part.2: Creating Tesla's Website in SquareLine Studio (ESP32+LVGL) イベント・アクションの設定→ Arduino IDE (LVGL+LovyanGFX)
LVGL官方GUI设计器【SquareLine Studio】试玩! Squareline Studio → VSCode

Link

LVGL 公式

LVGL https://lvgl.io/ (訳)
LVGL docs https://docs.lvgl.io/master/index.html (訳)
Github https://github.com/lvgl/lvgl (訳)
SquareLine Studio https://squareline.io/
SquareLine Studio docs https://docs.squareline.io/docs/squareline/ (訳)
LVGL's Blog

(ESP32関連)

2019/08/05 Pure Micropython Display Driver (訳)

2019/02/23 New release v5.3 - Micropython support, New object types, new features (訳)

2019/02/02 How to use the iPod Nano 6 LCD for LittlevGL (訳)

2019/01/31 Espressif officially supports LittlevGL on ESP32! Let's try it! (訳)

2018/12/26 LittlevGL References (訳)

LVGL Academy https://lvgl.academy/ ※英語・有料・Youtubeじゃないから自動翻訳不可

関連資料 (ESP32+LVGL)

参考 macsbug | LVGL 8 demo with 800×480 LCD and ESP32 S2 WROVER
OSRTOS | LittlevGL (訳)
Youtube ESP32 | LittlevGL | Arduino IDE - [Part.0] Touch Display Setup for Simple Note App

ESP32 | LittlevGL | Arduino IDE - [Part.1] Basic LittlevGL for Simple Note App


GUI on ESP32 with 30 FPS using LittlevGL


ESP32 | LVGL8 | Ep 0. GFX Setup

ESP32 | LVGL8 | Ep 1. Demos with LILY PI

ESP32 | LVGL8 | Ep 3. Base Project for WiFi Settings

トイカメラを作ります! = ESP32CAM + ILI9488 + LVGL7 | Part1、リアルタイムディスプレイ

トイカメラを作ります! = ESP32CAM + ILI9488 + LVGL7 | Part2、LVGL設定

補足

  • Arduino IDE の場合、ライブラリマネージャからインストール可能な LVGL は "lv_arduino" のみ。
  • Eclipse + ESP-IDF を入れる方法:Windows, Linux(ubuntu)
  • LVGLは旧名LittlevGL
  • LVGL作者は基本的には Linux+Eclipse+SDK の環境
  • Ver〜1.0.5は、ubuntuにインストールする場合、GPUの誤認識により起動直後に終了する事があります。

その場合、.desktop ファイルを書き換えると治る事があります。

   削除: ""  追加 : -force-opengl

   → Exec=/home/[user name]/ダウンロード/SquareLine_Studio_Linux_v1_1_0_Beta1/linux4/SquareLine_Studio_Beta.x86_64 -force-opengl %U

Ver1.1.0でこの問題は改善されました。

  • SquareLine Studio 1.1.0 から Arduino IDE 用のプログラム(〜.ino)を出力できるようになりました。

1. "File"→"Prefersences"内でLCDの解像度等の設定を必要な値に合わせます。

2. "Export" - "Create Template Project" :保存先のフォルダを指定すると、そこに "ui.ino" を含むフォルダが保存されます。Export folderの設定も自動で更新されます。

3. "Export" -  "Export UI Files" :必定な各種ファイルが上記フォルダに保存されます。

4. ArduinoIDEにライブラリ"TFT_eSPI"をインストールして、"ui.ino"を開き、"ui.ino"内のTFT_eSPIのタッチ設定部分が一部コメントアウトされている所(bool touched = tft.getTouch( &touchX, &touchY);)を戻せば基本的には動くようになります。


本来ならこの手順で出力した "ui.ino" をArduino IDEから開くだけで使えるはずですが、まだうまく動作してくれない場合もあるようです。原因は色々あります。

SquareLine StudioのSample Projectは解像度の違いで動作できないのものが多いのですが、自分でゼロから作ったProjectは動く事が多いので、色々試すとLVGLの便利さがわかってくると思います。


戻る/Previous