tkinter-TinUI-xml实战(11)多功能TinUIxml编辑器

引言

在TinUIXml简易编辑器中,我们通过TinUI搭建了一个简易的针对TinUIXml布局的编辑器,基本掌握了TinUIXml布局和TinUIXml的导入与导出。现在,就在此基础上,对编辑器进行升级。

本次升级的功能:

  1. 更合理的xml编辑与UI展示布局,python代码导出放到另一个子窗口
  2. python代码使用语法高亮显示
  3. 在UI展示中,允许打开鼠标十字线坐标定位
  4. 允许右键单击创建标记坐标点,并能够通过坐标点管理窗口来操作坐标点

新版TinUIXml简易编辑器内置到了TinUI包中,/test/tuxmltest.py,xml资源文件在/test/xmltestpage目录下。

重新布局

新的主界面main.xml

<tinui>
<line anchor='w' y='20'>
    <button2 text='导入xml' command='self.funcs["inxml"]'></button2>
    <button2 text='python代码' command='self.funcs["pycode"]'></button2>
    <checkbutton text='启用十字线定位' command='self.funcs["if_location"]'></checkbutton>
    <paragraph text='x: y:'>loctext</paragraph>
</line>
<line>
    <ui width='870' height='630' scrollbar='True'>xmlui</ui>
</line>
<line x='710' y='20' anchor='w'>
    <button2 text='打开标记点管理窗口' command='self.funcs["open_markw"]'></button2>
</line>
</tinui>

生成界面:
在这里插入图片描述

在新版TinUIXml编辑器中,默认添加了一段来自于TinUI.test.maintest里的back介绍界面xml,这样就可以一目了然明确文本框的交互意义,点击“导入xml”后如图:
在这里插入图片描述

新python代码窗口

在新版TinUIXml简易编辑器中,python代码部分被划归到了新的子窗口,名为pycodew,资源文件为pytest.xml

<!--弹窗显示python代码(IDO)部分-->
<tinui>
<line>
    <textbox width='500' height='500' scrollbar='True'>textbox</textbox>
</line>
<line anchor='w' y='530'>
    <button text='复制' command='self.funcs["copy_pycode"]'></button>
    <button text='标注重点' command='self.funcs["highlight"]'></button>
    <label text='※该内容不可更改'></label>
</line>
</tinui>

tuxmltest.py中,创建新的窗口:

import idlelib.colorizer as idc
import idlelib.percolator as idp

#...

#弹窗窗口
pycodew=Toplevel()
pycodew.title("Python代码")
# 设置窗口大小
window_width = 520
window_height = 550
# 获取屏幕大小
screen_width = pycodew.winfo_screenwidth()
screen_height = pycodew.winfo_screenheight()
# 计算窗口居中的x和y坐标
x_coordinate = int((screen_width/2) - (window_width/2))
y_coordinate = int((screen_height/2) - (window_height/2))
# 设置窗口的位置和大小,并禁止改变尺寸
pycodew.geometry("{}x{}+{}+{}".format(window_width, window_height,
                                      x_coordinate, y_coordinate))
pycodew.resizable(width=False, height=False)  # 禁止改变窗口大小
pctinui=BasicTinUI(pycodew)
pctinui.pack(fill='both',expand=True)
pycodew.protocol("WM_DELETE_WINDOW", lambda: pycodew.withdraw())  # 忽略关闭窗口的协议
pycodew.withdraw()
pctinuix=TinUIXml(pctinui)

xmlf=open(os.path.dirname(__file__)+r'\xmltestpage\pytest.xml','r',encoding='utf-8')
xml=xmlf.read()
xmlf.close()
pctinuix.environment(globals())
pctinuix.loadxml(xml)
textbox=pctinuix.tags['textbox'][0]
idc.color_config(textbox)
p = idp.Percolator(textbox)
d = idc.ColorDelegator()
p.insertfilter(d)

注意到其中的idc, idp等,都是从idlelib中导入的,用来对文本框进行python语法高亮处理。

新xml编辑器对于python代码的处理,与上一版一样,都是重新生成一遍TinUI界面,在此过程中生成对应IDO片段部分python代码,这里不做赘述。新的变化是能够直接复制python代码,同时可以通过注释生成重点内容。

功能代码如下:

def copy_pycode(e):#复制
    textbox.clipboard_clear()
    copyText = textbox.get(1.0,'end')
    textbox.clipboard_append(copyText)
def highlight(e):#标注funcs,datas等重点
    havefunc,havedata=False,False
    textbox.configure(state='normal')
    write('\n#TinUIXml导入重点:\n')
    for i in textbox.result:
        if i[0]=='funcs':
            if havefunc==False:
                havefunc=True
                write('#函数/方法(funcs):\n')
            write(f'#  {i[1]}(...)\n')
        elif i[0]=='datas':
            if havedata==False:
                havedata=True
                write('#数据(datas):\n')
            write(f'#  {i[1]}=...\n')
    havetag=False
    for tag in duixml.tags.keys():
        if havetag==False:
            havetag=True
            write('\n#TinUIXml导出重点:\n')
        write(f'#  {tag}\n')
    textbox.configure(state='disabled')

在这里插入图片描述

十字线定位

TinUIXml只是解决了每块包含若干控件元素的行元素默认布局问题,但是行元素<line>的起始位置是可以自定义的,同时,行元素内部也可以嵌套新的行元素,起始位置也可以自定义。如果我们要在TinUIXml布局时也保持绝对坐标布局的灵活性,就需要知道在当前xml布局(新xml布局编写之前)下,界面元素所占的空间位置状态。

在新TinUIXml编辑器中,直接使用了BasicTinUI自带的设计模式,通过display.show_location控制开启和关闭。

TinUI(BasicTinUI)设计模式在5.1版本中加入。

loclines=False#坐标十字线是否存在
def if_location(e):#是否显示坐标十字线
    global loclines
    loclines=e
    if loclines:
        tinui.itemconfig(loctext,state='normal')
        displayui.show_location(command=getloc)
    else:
        tinui.itemconfig(loctext,text='x:? y:?',state='hidden')
        displayui.show_location(False)

def getloc(x,y):
    tinui.itemconfig(loctext,text=f'x:{x} y:{y}')

在这里插入图片描述

标记点绘制

在新TinUIXml编辑器中,我们设计右键单击绘制标记点,这个功能非常简单,就先不在这里给出详细代码,稍后会随标记点的管理给出。不过需要注意的是,当ui界面重绘,也就是inxml()方法执行后,我们也需要重绘这些点,因此,我们使用mark_points:list=[]来记录这些点的位置信息和画布对象id。

只需要在inxml()后加入reset_marks()即可。

def inxml(e):#注入xml界面
    xml=text.get(1.0,'end')
    duixml.funcs=dict()
    duixml.datas=dict()
    duixml.tags=dict()
    result=re.findall("self\.(.*?)\[.(.*?).\]'",xml,re.M|re.S)
    for i in result:
        if i[0]=='funcs':
            duixml.funcs[i[1]]=None
        elif i[0]=='datas':
            duixml.datas[i[1]]=(None,None)
    duixml.yendy=5
    duixml.clean()
    duixml.loadxml(xml)
    rescroll()
    reset_marks()#!!!

def reset_marks():#重新绘制标记点
    if len(mark_points)==0:
        return
    index=1
    for i in mark_points[1:]:
        mark=displayui.create_oval((i[0][0],i[0][1],i[0][0]+3,i[0][1]+3),outline='red',fill="red")
        mark_points[index]=(i[0],mark)
        index+=1

标记点管理

仅仅有十字线坐标定位是不够的,有时候,我们需要记录几个关键标记点,比如窗口大小对角点、预留控件位置等等。在新TinUIXml编辑器中,我们可以通过另一个窗口,来管理这些标记点。

窗口布局marks.xml

<!--标记点控制窗口-->
<tinui>
<line y='14' anchor='w'>
    <paragraph text='鼠标右键单击确立标记点'></paragraph>
    <button2 text='删除标记点' command='self.funcs["del_mark"]'></button2>
</line>
<line>
    <listbox data='("TinUIXml编辑器标记点",)' width="365" height="535" command='self.funcs["sel_mark"]'>listbox</listbox>
</line>
</tinui>

这个窗口中的listbox列表框,就是我们的主要交互方式,我们也需要保持mark_points列表与列表框的同步更新。

now_mark=None#mark_index
def open_markw(e):
    markw.deiconify()
def del_mark(e):#删除选定标记点
    global now_mark
    if now_mark==None:
        return
    listbox.delete(now_mark)
    displayui.delete(mark_points[now_mark][1])
    del mark_points[now_mark]
    now_mark=None
def sel_mark(name):#选定标记点
    global now_mark
    if name.index==0:
        now_mark=None
    else:
        if now_mark!=None:
            displayui.itemconfigure(mark_points[now_mark][1],outline='red',fill="red")
        now_mark=name.index
        displayui.itemconfigure(mark_points[now_mark][1],outline='blue',fill='blue')
def __set_mark(x,y):
    mark=displayui.create_oval((x,y,x+3,y+3),outline='red',fill="red")
    mark_points.append(((x,y),mark))
    listbox.add(f'({x} , {y})')
def set_mark(e):#绘制标记点
    __set_mark(e.x,e.y)

注意其中每次listbox的变动,都要伴随mark_points的变动,UI展示区域则视情况而定。

在这里插入图片描述
至此,完成一个新的TinUIXml简易编辑器。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/794285.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

大众汽车入职SHL在线测评、英语口语、招聘笔试如何通过、考点分析|备考建议

大众汽车入职在线测验真题考点分析&#xff0c;通过技巧&#xff1f; 大众汽车集团&#xff08;中国&#xff09;在招聘过程中&#xff0c;认知能力测试是评估候选人是否适合某个职位的重要环节。候选人会收到带有线上测评链接的邮件&#xff0c;测评包括胜任力潜力测试(Compe…

多输入多输出 | Matlab实现Transformer多输入多输出预测

多输入多输出 | Matlab实现Transformer多输入多输出预测 目录 多输入多输出 | Matlab实现Transformer多输入多输出预测预测效果基本介绍程序设计参考资料 预测效果 基本介绍 多输入多输出 | Matlab实现Transformer多输入多输出预测&#xff08;完整源码和数据&#xff09; 1.da…

CSS选择器:基本选择器、复合选择器、伪类选择器、伪元素选择器

CSS选择器包含&#xff1a;基本选择器、复合选择器、伪类选择器、伪元素选择器。 选择器是选择标签的一种方式&#xff0c;例如 ID 选择器就是通过 ID 选择标签的&#xff0c;类选择器就是通过类名选择标签的。 在 CSS3 中有很多类型的选择器&#xff0c;如下是《W3school》提…

Android 使用 Debug.startMethodTracing 分析方法耗时

参考 Generate Trace Logs by Instrumenting Your App 官网提供了 trace 工具来分析方法耗时。 生成 trace 文件 package com.test.luodemo.trace;import androidx.appcompat.app.AppCompatActivity;import android.os.Bundle; import android.os.Debug; import android.uti…

昇思25天学习打卡营第13天|基于MindNLP+MusicGen生成自己的个性化音乐

关于MindNLP MindNLP是一个依赖昇思MindSpore向上生长的NLP&#xff08;自然语言处理&#xff09;框架&#xff0c;旨在利用MindSpore的优势特性&#xff0c;如函数式融合编程、动态图功能、数据处理引擎等&#xff0c;致力于提供高效、易用的NLP解决方案。通过全面拥抱Huggin…

[C++]——同步异步日志系统(4)

同步异步日志系统 一、日志等级模块设计二、日志消息类设计 一、日志等级模块设计 定义出日志系统所包含的所有日志等级分别为&#xff1a;&#xff08;7个等级&#xff09; UNKNOW0&#xff0c;未知等级的日志DRBUG &#xff0c;调试等级的日志INFO &#xff0c;提示等级的日…

企业人事管理系统

1.课设要求描述 【系统描述】软件从登录界面开始&#xff0c;验证用户名与密码后&#xff0c;根据登录用户名权限的不同&#xff0c;打开软件后展示不同的功能模块。软件主要功能模块是人事管理、部门管理、备忘录、员工生日提醒、数据库的维护等。 通过简单分析后&#xf…

STM32串口工作原理

STM32的串口是相当丰富的&#xff0c;功能也很强劲。最多可提供5 路串口&#xff0c;有分数波特率发生器、支持单线光通信和半双工单线通讯、支持LIN、智能卡协议和IrDA SIRENDEC 规范(仅串口3支持)、具有DMA等。 串口最基本的设置&#xff0c;就是波特率的设置。STM32的串口使…

Nature Communications|柔性高密度、高灵敏应变传感器阵列(柔性应变传感/界面调控/电子皮肤/柔性电子)

复旦大学武利民( Limin Wu)和李卓( Zhuo Li)团队,在《Nature Communications》上发布了一篇题为“High-density, highly sensitive sensor array of spiky carbon nanospheres for strain field mapping”的论文。论文内容如下: 一、 摘要 在工程应用中,准确地映射应变…

暑假实践web前后端开发-笔记

&#xff08;主要是前端开发&#xff0c;不做后端&#xff0c;前面先介绍一个实现了前后端的项目&#xff09; 一. 安装和运行项目MoreMall 1.介绍项目MoreMall 已经实现前后端可以前后端交互&#xff0c;前端&#xff1a;client&#xff0c;后端&#xff1a;server&#xff…

轮转数组(超详细!)

前言&#xff1a; 小编在上一篇文章的时候拿过轮转数组作为例子来讲述复杂度&#xff0c;但是小编并没有给出这个题目的正确解答&#xff0c;既然读者朋友已经了解复杂度了&#xff08;不了解也没关系&#xff0c;可以看小编上一篇文章&#xff09;&#xff0c;下面&#xff0c…

【数据结构】深入理解哈希及其底层数据结构

目录 一、unordered系列关联式容器 二、底层结构 2.1 哈希的概念 2.2 哈希冲突&#xff08;哈希碰撞&#xff09; 2.3 哈希函数 2.4 哈希冲突处理 2.4.1 闭散列&#xff08;开放定址法&#xff09; 2.4.1.1 代码实现&#xff1a; 2.4.2 开散列&#xff08;链地址法&…

高职计算机网络实训室

一、高职计算机网络实训室建设的背景 如今&#xff0c;数字化发展已成为国家发展的战略方向&#xff0c;是推动社会进步和经济发展的重要动力。在这一时代背景下&#xff0c;计算机网络技术作为数字化发展的基础设施&#xff0c;其地位和作用愈发凸显。因此&#xff0c;高职院…

Python数据分析-乳腺癌诊断分析预测

一、研究背景 乳腺癌是全球女性中最常见的癌症之一&#xff0c;发病率和死亡率都处于较高水平。据世界卫生组织&#xff08;WHO&#xff09;统计&#xff0c;乳腺癌每年造成数百万女性的死亡&#xff0c;并且其发病率在许多国家呈上升趋势。乳腺癌的早期诊断对于提高患者的生存…

帕金森老人的锻炼建议

对于帕金森病老人来说&#xff0c;适当的锻炼可以帮助改善症状、增强肌肉力量、提高关节灵活性&#xff0c;并预防长期并发症。以下是一些基于最新信息的锻炼建议&#xff1a; 选择合适的运动类型&#xff1a;包括有氧运动、抗阻运动和牵伸运动。有氧运动如快走、慢跑、游泳和舞…

旅游景区度假村展示型网站如何建设渠道品牌

景区、度假村、境外旅游几乎每天的人流量都非常高&#xff0c;还包括本地附近游等&#xff0c;对景区及度假村等固定高流量场所&#xff0c;品牌和客户赋能都是需要完善的&#xff0c;尤其是信息展示方面&#xff0c;旅游客户了解前往及查看信息等。 通过雨科平台建设景区度假…

收银系统源码-视频介绍

千呼新零售2.0系统是零售行业连锁店一体化收银系统&#xff0c;包括线下收银线上商城连锁店管理ERP管理商品管理供应商管理会员营销等功能为一体&#xff0c;线上线下数据全部打通。 适用于商超、便利店、水果、生鲜、母婴、服装、零食、百货、宠物等连锁店使用。 详细介绍请…

目标检测基本标注工具-labelImg安装与使用

&#x1f349;一、安装 1.1 打开conda创建虚拟环境&#x1f388; conda create -n labelImg python3.8 -y 1.2 激活labelImg虚拟环境&#x1f388; activate labelImg1.3 安装labelImg&#x1f388; pip install -i https://pypi.tuna.tsinghua.edu.cn/simple lab…

LayoutLMv1

近年来&#xff0c;预训练技术在各种NLP任务中得到了成功的验证。尽管NLP应用程序广泛使用预训练模型&#xff0c;但它们几乎只关注文本级操作&#xff0c;而忽略了对文档图像理解至关重要的布局和样式信息。在本文中&#xff0c;我们提出了LayoutLM来联合建模文本和布局信息在…

【走出阴霾,拥抱阳光】当心情陷入抑郁,我们该如何自救?

在这个快节奏的时代&#xff0c;我们时常会感受到生活的压力和种种不如意。当心情长时间处于低落状态&#xff0c;甚至影响到日常生活时&#xff0c;我们或许已经步入了抑郁的阴影。面对这种情况&#xff0c;我们不必过于恐慌&#xff0c;更不能自暴自弃。接下来&#xff0c;就…