legato学习1 —— 修改例程为显示自定义图片

本节目标：使用microchip官方设计的开发板IGAT，修改例程并在屏幕上显示自己的图片

legato介绍

        Legato是microchip推出的一套可以方便快捷的搭建图形界面的中间件。

        可以方便的实现图形界面，提供了像按钮、滑条、文本框等组件，通过在legato界面内拖拉的方式进行画面布局，还可以导入自定义的图片直接插到屏幕上。

        Legato还会接收触摸屏的数据进行处理，直接将其转化为xx组件的按钮按下事件、滑动事件等，只需要用户自定义事件的处理函数即可。

 打开例程

        在IDE内没有直接打开例程的按钮，需要自己手动去对应文件夹内找。

1. 首先查找harmony插件的安装路径

        在IDE内点击Tools -> 已安装插件 -> Harmony 3 Content Manager

        

        弹出的框内，第一个即是harmony在电脑内的安装位置，例程也存放在这个路径下

        

 2. 打开上一步获得的harmony安装路径

        本文件夹内存放着所有harmony安装的包，legato是属于图形界面，例程名以gfx开头，我所用板子的主控是atsame51 ，所以我板子能用的例程在gfx_apps_sam_d5x_e5x\apps文件夹内。（官方命名真的乱）

         

        legato_quickstart 这个例程只有最简单的显示一个界面的功能，就选他了，我们先将他复制到别的地方再打开

        

 3.用MPLAB X IDE打开例程

        我用的是官方名为IGAT的开发板，主控为e51，所以在IDE内选择打开egato_quickstart\firmware\legato_qs_e51_igat.X这个项目

        这个IDE的项目文件结构比较独特，.x结尾的项目文件夹内存放的只是几个配置文件，main.c app.c等核心程序文件是存放在那个src文件夹下

        

        这个例程的功能，就是显示下面这副图片，右下角是个按钮但没有启用对应事件，只是用来展示按键按下时的按键图标切换效果。

        

4.先进入harmony插件

        通过点击tools -> 已安装插件 –> Harmony 3 Configurator

        

        Harmony打开后会看到有一堆已经连好了的块，这些都是legato运行所需的，本例程功能就只有用legato显示图片，没有开启多余的外设

        屏幕显示什么图片不是在这个界面设置的，这里只是设置一些硬件参数，需要根据自己屏幕的参数在legato的相关块里修改。

        由于我用的是官方开发板，所以这一步就不用修改了。

5.  从harmony这进入legato的编辑器

        在harmony界面上，点击 Tools -> legato Graphics Composer

        

         就进入legato的图形编辑界面了

        

替换为自定义图片

        首先删除原本的所有组件，可以在中间画布内点击组件然后按delete删除，也可以在左边组件列表内选择组件后按X按钮删除

 1. 先添加一张容器（Containers）

        右上角tool-box内任选一张自己喜欢的样式，拖到画面上覆盖那个灰黑相间的部分，作为屏幕的底图

        

         默认色是灰色，有点丑，我们先修改他的颜色配置。点一下右下角组件属性内的schme右边的按钮

         

 进入这个配色方案选择界面，有几种可选，我们就选择whitescheme

         

2. 添加图片组件

        从组件菜单内找到image组件并拖到屏幕画布上

        

        点击右下角组件参数内的image按钮，即可选择图片

        

但这里面目前只有系统自带的几张图片，还需要在资产管理器内添加我们的自定义图片

        

3. 添加自定义图片到资产管理器

        菜单栏的asset选项就是资产管理器，所有资源在这统一管理，我们要添加图片就进入images

        

        点那个图片图标，导入RGB图片

        

        图片导入后最好修改一下output name，后续方便找图片

        有两个必须注意的点，将output format修改为RGB，将color Mode修改为RGB565

        ​​

4. 往组件上绑定图片

        现在再选择组件属性内的image选项，就有刚刚添加的图片了

        

        

编译下载

1. legato generate

        注意legato界面左上角这四个按钮，从左到右分别是 创建新设计，打开设计，保存设计，生成代码

        点击右边两个，保存设计与生成代码。

        

2. harmony generate

        Legato是harmony的插件，生成的数据不会直接替换项目内的源码。需要使用harmony的生成代码按钮，才能将legato生成的数据转为项目的源码

        

3. 直接编译下载

        只是显示图片的话，不需要对生成后的代码做任何修改

        legato已经把屏幕初始化函数都生成在需要的位置，并已经将main等设置好，上电后会自动显示legato内的第一个屏幕的内容

        

        

下一篇：legato学习2 —— 数字时钟https://blog.csdn.net/weixin_43850980/article/details/121789280