A Little Java Help Please

Suggestions, Problems, Availability, etc. Everything is up for discussion.
Post Reply
User avatar
oakbarn
Posts: 846
Joined: Thu Jan 05, 2012 2:28 pm
Bot?: No
Location: Texas
Contact:

A Little Java Help Please

Post by oakbarn »

Blue Dot Code from ECC (http://www.embeddedcc.com/hmi/external.js)

I tried to add some code to create another widget (just a larger blue dot). I want to create a number of widgets. I get the single widget to work fine but am stymied on how to do more than one.

BTW: I am new to Java. I understand what most of the code is doing as I have programmed in Visual Basic for years. I am sure I am missing something simple. I did make 2 new Vars.

I added the following text after
ctx.closePath();
}
// More widgets here!








var newWidgetObj1 = new Object;
var TYP_LBLUE_DOT = 41;

newWidgetObj1.desc = "L Blue Dot";
newWidgetObj1.typ = TYP_LBLUE_DOT;
registerNewWidget(newWidgetObj1);

//*****************************************************************************
//
//! draws a custom widget
//!
//! \param widgetObj
//!
//! This function performs the periodic, refresh-based updates to the UI. It
//! is called every tick, and can be used to display real-time data, etc
//!
//! \return None.
//
//*****************************************************************************
drawExtWidget = function (widgetObj){

var oncolor,offcolor;

var ctx = widgetObj.ctx;
ctx.font = '1em Verdana';
ctx.textAlign = 'center';

//Test for type
if(widgetObj.typ==TYP_LBLUE_DOT)
{
var scale=1.1;
var rad, radgrad2,radgrad3;

rad=20*scale;
ctx.lineWidth = 5*scale;

oncolor = '#0000CD';
offcolor = '#CECECE';
ctx.beginPath();

ctx.arc(widgetObj.xcoord,widgetObj.ycoord,rad,0,Math.PI*2,true);
//On/Off Color
ctx.fillStyle = (widgetObj.act)? oncolor : offcolor;
ctx.fill();

//Reflection
radgrad3 = ctx.createRadialGradient(widgetObj.xcoord-rad/2,widgetObj.ycoord-rad/2,0.25*rad,widgetObj.xcoord,widgetObj.ycoord,rad);
radgrad3.addColorStop(0, 'rgba(255,255,255,0.8)');
radgrad3.addColorStop(0.5, 'rgba(255,255,255,0.25)');
ctx.fillStyle = radgrad3;
ctx.fill();

//Bezzle
radgrad2 = ctx.createRadialGradient(widgetObj.xcoord,widgetObj.ycoord,0.85*rad,widgetObj.xcoord,widgetObj.ycoord,1.1*rad);
radgrad2.addColorStop(0, '#222222');
radgrad2.addColorStop(0.5, '#CDCDCD'); //cdcdcd CDCDCD
radgrad2.addColorStop(1, '#222222');
ctx.strokeStyle = radgrad2;
ctx.stroke();

//Draw the name
if(widgetObj.draw_txt)
{
ctx.fillStyle='black';
ctx.fillText(widgetObj.txt,widgetObj.xcoord,widgetObj.ycoord+25);
}

ctx.closePath()
// More widgets here!

else
{

}

}//drawExtWidget


//Set this variable to signal the script is loaded.
externalJSloading=0;
brahn
Posts: 543
Joined: Thu Dec 13, 2012 11:01 am
Bot?: No

Re: A Little Java Help Please

Post by brahn »

First off, this will almost certainly be changing in the 4.0 firmware that we're currently working on. HMI is something we haven't touched at all, but existing external javascript almost certainly won't work anymore.

If you want to make the blue dot bigger, the third argument to arc is the radius so increasing 'rad' should make it bigger. That should work fine with the gradients as well, since they also use rad.

This is being drawn using the HTML 5 canvas element/api, so if you search for something like "html5 canvas" you'll find lots of information about what this code is doing.
User avatar
oakbarn
Posts: 846
Joined: Thu Jan 05, 2012 2:28 pm
Bot?: No
Location: Texas
Contact:

Re: A Little Java Help Please

Post by oakbarn »

I can make it bigger very easily as there is a "multiplier" in the code and I can change the color, but but since this feature is "going" away, I will stop trying to learn how to make more than a single widget. My problem was making the second widget, I got the first one figured out from the existing code, but as it is a "dead" issue, I will not continue. What are the "plans" for the HMI in ver 4? Is there another language I should be looking at? :D
Post Reply