Search code examples
xmlactionscript-3flashrangeline-drawing

Flash AS3 drawline displays text


I'm currently working on a nomograph and I was able to create 2 sliders connected with a line, but is there a way to get the line to read the middle numbers kind of like in the example below.

I'd need the line to display multiple numbers of the "Distance".

Also is it possible to have a slider display multiple numbers in different units of measure like meters/feet

OPTION 2

Would it be possible to have line.graphic play a movieclip or button overstate every time it passes through it?

As of now I'm thinking of using a type of enemy class, so whenever, line.graphic passes through it, it displays the number(s).

example nomograph

here's what i have so far...for the sliders I placed a movieclip "imageholder1" on top of another movieclip "rect"

var imgWidth:Number = imageHolder1.width;
var imgHeight:Number = imageHolder1.height;
var rectWidth:Number = rect.width;
var rectHeight:Number = rect.height;
var rectX:Number = rect.x;
var rectY:Number = rect.y;
var img1Width:Number = imageHolder2.width;
var img1Height:Number = imageHolder2.height;
var rect1Width:Number = rect1.width;
var rect1Height:Number = rect1.height;
var rect1X:Number = rect1.x;
var rect1Y:Number = rect1.y;
// Do math to correctly make the drag bounds using values attained above
var boundWidth = rectWidth - imgWidth;
var boundHeight = rectHeight - imgHeight;
var bound1Width = rect1Width - img1Width;
var bound1Height = rect1Height - img1Height;

var line:MovieClip = new MovieClip();
addChild(line);

draw(null);

imageHolder1.width = txtout.width
imageHolder1.minimum = 0;
imageHolder1.maximum = 100;
imageHolder1.value = 100;
imageHolder1.snapInterval = 2;

var sliderValues:uint = imageHolder1.y;
imageHolder1.addEventListener(Event.CHANGE, sliderChanged);
function sliderChanged(evt:Event):void {
sliderValues = imageHolder1.value/100;
txtout.text = (imageHolder1.value/100).toFixed(2);
}
// Now apply the variable numbers with the math we want as bounds
var boundsRect:Rectangle = new Rectangle(rectX, rectY, 
boundWidth, boundHeight);
    // Enable drag
    imageHolder1.addEventListener(MouseEvent.MOUSE_DOWN, DragImage1);
    function DragImage1(event:MouseEvent) {
// Here you see we apply the boundsRect when they drag
imageHolder1.startDrag(false, boundsRect);
 stage.addEventListener(Event.ENTER_FRAME, draw);
}
// Stop drag
imageHolder1.addEventListener(MouseEvent.MOUSE_UP, DropImage1);
function DropImage1(event:MouseEvent) {
imageHolder1.stopDrag();
 stage.addEventListener(Event.ENTER_FRAME, draw);
}

 var bounds1Rect:Rectangle = new Rectangle(rect1X, rect1Y, 
bound1Width, bound1Height);
    // Enable drag
    imageHolder2.addEventListener(MouseEvent.MOUSE_DOWN, DragImage2);
    function DragImage2(event:MouseEvent) {
    // Here you see we apply the boundsRect when they drag
imageHolder2.startDrag(false, bounds1Rect);
     stage.addEventListener(Event.ENTER_FRAME, draw);
}
// Stop drag
imageHolder2.addEventListener(MouseEvent.MOUSE_UP, DropImage2);
function DropImage2(event:MouseEvent) {
    imageHolder2.stopDrag();
     stage.addEventListener(Event.ENTER_FRAME, draw);
}

function draw(event:Event):void{
    line.graphics.clear();
    line.graphics.lineStyle(1,1);
    line.graphics.moveTo(imageHolder1.x,imageHolder1.y);
    line.graphics.lineTo(imageHolder2.x,imageHolder2.y);
}

var sliderValue:uint = imageHolder2.y;
addEventListener(Event.ENTER_FRAME, onEnterFrame);
function onEnterFrame(event:Event):void {
    sliderValue = imageHolder2.y;
    status_txt.text = "Slider position is: "+sliderValue;
}

update

So came accross this, which I'm editing to suit my needs and I was able to trace all the info in flash, and learning more about xml to flash.

But my question now is how to implement it all on to the flash stage?

 <?xml version="1.0" encoding="utf-8"?>

<flow>
    <axis name="diameter" type="parallel" 
    scaleFunction="log(t)"> 
    <range>0.01,02, ,50</range> 
    <xposition>0.0</xposition> 
    <crop>0.032,0.977</crop> 
    <title>Diameter [in.]</title> 
    </axis>
    <axis name="weightFlow" type="parallel" 
    scaleFunction="log(t)"> 
    <range>0.001,100000</range> 
    <xposition>0.16</xposition> 
    <crop>0.127,0.941</crop> 
    <title>Weight Flow [1000 
    lb./hr.]</title> 
    </axis> 
    <axis name="massVelocity" 
    type="parallel" scaleFunction="log(t)"> 
    <range>1.0,10000</range> 
    <xposition>0.325</xposition> 
    <crop>0.091,0.91</crop> 
    <title>Mass Velocity 
    [lb./(hr.)(sq.ft.)]</title> 
    </axis> 
    <axis name="turning" type="turning"> 
    <xposition>0.48</xposition> 
    </axis> 
    <axis name="pressureDrop" 
    type="parallel" scaleFunction="log(t)"> 
    <range>0.000001,100</range> 
    <xposition>0.713</xposition> 
    <crop>0.175,0.902</crop> 
    <title>Pressure Drop 
    [lb./sq.in./ft.pipe]</title> 
    </axis> 
    <axis name="pressure" type="parallel" 
    scaleFunction="log(t)" layout="left"> 
    <range>0.001,100</range> 
    <xposition>1.0</xposition> 
    <title>Centipoises^0.16/(lb./cu.ft. 
    at 1 atm)</title> 
    </axis>
</flow>

Solution

  • This code will show you how to calculate "Bore size" (middle value) from specified numbers of "Rate" and "Velocity". You can change inputNum_Rate and inputNum_Velo. For example, in that nomograph image you can see they have a flow-rate of 100 litres/min and a velocity of 4.5 metres/sec. The middle value should be around 22 mm (or 0.85 to 0.89 inches?). Try both formulas to decide which you feel is more precise for your project.

    The industry-standard formula for this is simply :

    D = Q / V (where D = diameter, Q = flow rate and V = velocity).

    However to closely match your nomograph image it seems this other formula works better :

    Q = input_FlowRate x offset_of_Rate;
    V = input_Velocity x offset_of_Velocity;
    result = Q / V;
    result = Math.sqrt(4 * result / Math.PI);
    result *= 10; //# multiply by 10 for millimetres

    Demo - Testing the numbers by code :
    Start a new project and paste the code in Actions panel then press ctrl+enter to debug.
    Results are shown in debugger (if you don't see text / feedback / output then try press F2).

    In the code section "TEST APP"... Go to step (2) and change inputNum_Rate = 100; and inputNum_Velo = 4.5; to whatever units you want (as listed on your nomograph).

    //# for: Define INPUT unit
    var inputNum_Rate : Number = 0;     
    var inputNum_Velo : Number = 0;
    
    //# for: Define INPUT unit type (format)
    var format_Rate : String = "ltr_pMin"; //set: "ltr_pMin" (Litres)or "gal_pMin" (Gallons)
    var format_Diam : String = "mm"; //set: "mm" or "inches"
    var format_Velo : String = "m_pSec"; //set: "m_pSec" (meters) or "ft_pSec" (feet)
    
    var offset_Rate : Number = 16.66666666666666666; //Litres per Min
    var offset_Velo : Number = 100.0; //Metres per Sec
    
    var nvel : Number = 0;  var svel : Number = 0;
    var nflow : Number = 0; var sflow : Number = 0;
    
    var s : Number = 0;
    var resultNum  : Number = 0; // holds the result
    
    ////////////// TEST APP /////////////////
    
    //# 1) setup INPUT TYPE
    format_Rate = "ltr_pMin"; //# Rate //set: "ltr_pMin" (Litres)or "gal_pMin" (Gallons)
    format_Diam = "mm"; //# Diameter //set: "mm" or "inches"
    format_Velo = "m_pSec"; //# Velocity //set: "m_pSec" (meters) or "ft_pSec" (feet)
    
    //# 2) setup INPUT values ("Rate" & "Velocity" to get middle "Diameter");
    inputNum_Rate = 100; inputNum_Velo = 4.5; //# These should be from input textbox
    
    //# 3) calculate Diameter based on inputs of Rate & Velocity
    resultNum = calculate_Diameter( inputNum_Rate, inputNum_Velo );
    trace ("final :: resultNum : " + resultNum );
    
    function calculate_Diameter( myRate:Number, myVelo:Number ) : Number
    {
        //# RESET
        svel = nvel = nflow = sflow = s = resultNum = 0; //reset
    
        sflow = myRate * offset_Rate;
        svel = myVelo * offset_Velo;
        s = sflow/svel; //get Area
        s = Math.sqrt(4 * s / Math.PI);
    
        //# CONVERT
        s = s * 10;     s = Number(s.toPrecision(5));
    
        //# CHECK RESULTS IN DEBUGGER....
        trace("===========================================" );
        trace("\n FLOW RATE : " );
        //convert Litres and US gallons :: US-Gallons = ( litres / 3.79) || Litres = (3.79 * US-Gallons)
        trace("litres p/sec : " + ( myRate ) );
        trace("gallon p/sec : " + ( myRate / 3.79 ) );
    
        trace("\n BORE SIZE : " );
        //convert Mm and Inches :: (1 mm = 0.0393701 inch || 1 inch = 25.4 mm)
        trace("millms : " + (s) );
        trace("inches : " + (s * 0.0393701) );
    
        trace("\n VELOCITY : " );
        //convert Metres and Feet :: (1 metre= 3.28084 foot || 1 foot= 0.3048 metres)
        trace("m/sec  : " + ( myVelo ) );
        trace("ft/sec : " + ( myVelo * 3.28084 ) );
        trace("===========================================" );
    
    
        //# RETURN result of this function
        return resultNum;
    
    }