模拟工控机的模拟(4):制作交互

现在有了了一个工控机类, 有了一个工控机模拟类, 要模拟出整个工控机系统可能还需要一个上位机类? 但Processing 本身就是一个可以和用户互动的窗口, 所以接下来只要发挥Processing的老本行, 写一套适合于要模拟的系统的界面, 把工控机的控制和模拟出来的机械动作用动画表现出来就可以了. 

传统的上位机软件的界面控件一般直接来源于传统的硬件操作面板上的电气开关, 具有不可救药的拟物传统, 倾向于仿制各种实际存在的开关仪表, 所以常常会有上图这种精美的控件库出现… …但这个例子希望能尽量简单. 大体上工业控制上的交互都能归纳到 数字量输入/输出, 模拟量输入/输出 的简单分类, 这里如果把用户的模拟量输入略去(比如增减操作也能用数字量操作代替), 那么可能就只需要三类控件:

– 按钮: 一个方块, 可以显示名称, 按钮的名称颜色可以改变用来表示按钮的开关状态, 在鼠标划过时能改变背景底色表示这是一个可点击的按钮.

– 指示灯: 一个圆, 可以显示名称也可以不显示, 鼠标划过时不会有任何反应, 灯只能表示点亮或未点亮的开关状态.

– 数值框: 一个方块, 里面显示一个数字字符串和它的单位, 可以显示名称也可以不显示.

回到上一次的水塔考题里面, 看看仅靠这三类控件是不是能够做出能对付那个考题的界面. 在水塔考题里, 考场提供的面板上只需要两个按钮和两个指示灯就能够完成. 但他们有一个水塔模型就放在面板的边上, 所以我的模拟Sketch 里也需要一个水塔模型. 另外考题里有一个不可调的确认时间, 考题只需要硬编码在考试程序里就行, 这可能不太友好? 那就需要再加一个设定功能, 让这个变成操作者可调的定时器.

水塔模型可以用四个指示灯来表示它的液位开关有没有动作, 以及一个指示灯来表示泵有没有动作. 水用一个数值框来表示可能有些单调, 这个可以改成一个可以自己长高的方块, 所以我还需要一个看起来像是纵向进度条的控件. 定时器的设定时间可以用数值框显示, 再放两个按钮, 一个用来 ‘_加’_一_’秒 , 一个用来减一秒, 这里也不需要什么新的东西. 现在我的Sketch 窗口里一共要放三种东西: 操作面板, 水塔模型, 和可调定时器. 我不想让它们看起来太乱, 还需要一个简单的框体用来划界.

差不多整理好了对控件库的要求了. 这些要求都太基本了, 我本应该可以在任何一个免费的UI库里找到能够满足他们的东西, 这个库可能能满足比这些要求多得多的东西, 但我不喜欢找东西, 我喜欢重复制造轮子, 我的轮子.

要做的是按钮, 指示灯, 数值框, 进度条, 和窗口. 但让我仔细想想, 开关和灯其实也差不多, 都只要表现一个数字量就可以了, 数字量和模拟量也差不多, 都只要表现一个值就可以了. 进度条和数值框也差不多, 就是表现值的时候是转换成字符串还是长度而已. 框体就更简单了, 它只要画在那就可以了. 那么我只需要一个控件类, 它有个模拟量值和数字量值, 能对鼠标动作做出反应, 能知道其他控件在哪并能调整自己的位置, 它还有诸如名字和识别号, 坐标和大小之类的一般属性. 剩下的只要对它做扩展就可以了, 之后还可以把水塔和水管的画像也作为控件写到排版里. 把它用Processing 表现出来的话, 可能会是这样:

class EcElement{
  //--
  int cmX,cmY,cmW,cmH;
  boolean cmAct;
  color cmOnColor,cmOffColor;
  String cmName;
  int cmID;
  EcElement(){
    cmX=0;cmY=0;cmW=0;cmH=0;cmAct=false;
    cmOnColor=color(0xEE,0xEE,0x77);
    cmOffColor=color(0x55,0x55,0x55);
    cmName="nc";
    cmID=0;
  }
  //--
  //override this!!
  void ccUpdate(){
    ;
  }
  //--
  void ccRepos(EcElement pxFollow, int cmOffsetX, int cmOffsetY){boolean lpNull=pxFollow==null;
    cmX=(lpNull?0:pxFollow.cmX)+cmOffsetX+(cmOffsetY==0?(lpNull?0:pxFollow.cmW):0);
    cmY=(lpNull?0:pxFollow.cmY)+cmOffsetY+(cmOffsetX==0?(lpNull?0:pxFollow.cmH):0);
  }
  //--
  boolean ccIsMouseOver(){return (mouseX>cmX)&&(mouseY>cmY)&&(mouseX<(cmX+cmW))&&(mouseY<(cmY+cmH));}
  int ccCheckClickedID(){if(ccIsMouseOver()){return cmID;}else{return 0;}}
  //--
}//+++

最后编辑：2017-09-21

作者：constrain

nullpointerexception

站内专栏 站点