Chrome not displaying the image drawn on the canvas - javascript

I am trying to display some objects drawn on the canvas.
It works fine in the firefox but in chrome the image is drawn under the canvas.
In my case the there is an image on the top of canvas on which I am trying to draw some shapes.
Please help.
<SCRIPT>
var oImageBuffer = document.createElement('img');
$(document).ready(function() {
document.getElementById("semiAutoAdjustments").style.visibility = "hidden";
checkProgress();
setCanvas("ImageResultsCanvas");
CanvasUtils.ImageBuffer = oImageBuffer;
CanvasUtils.URLPrefix = "${ctx}/project/image?id=";
CanvasUtils.LongAxis = 440;
CanvasUtils.ShortAxis = 330;
populateRecipes();
changeCanvasImage("${selectedImageID}");
InstantiateProcessedImage();
setProcessedImage(m_oProcessedImage);
RepaintCanvas();
});
function InstantiateProcessedImage()
{
<c:if test="${not empty selectedProcessImage.toogleProcessedImage}">
var l_lImageId = "${selectedProcessImage.toogleProcessedImage.imageId}";
var imageName = "${selectedProcessImage.toogleProcessedImage.imageName}";
var i=0;var d=0;
m_oProcessedImage = new ProcessedImage();
m_oProcessedImage.ImageID = l_lImageId;
var l_aJSMeasurements = new Array();
<c:forEach var="measItem" varStatus="status" items="${selectedProcessImage.toogleProcessedImage.measurements}">
var l_oMeasurement = new Measurement();
l_oMeasurement.Name = "${measItem.name}";
l_oMeasurement.Value = ${measItem.value};
l_oMeasurement.DefiningPoints = new Array();
<c:forEach var="definingPointsItem" varStatus="cnt" items="${measItem.definingPoints}">
l_oMeasurement.DefiningPoints[${cnt.index}] = new Pixel();
l_oMeasurement.DefiningPoints[${cnt.index}].x = ${definingPointsItem.x};
l_oMeasurement.DefiningPoints[${cnt.index}].y = ${definingPointsItem.y};
</c:forEach>
l_aJSMeasurements.push(l_oMeasurement);
</c:forEach>
m_oProcessedImage.Measurements = l_aJSMeasurements;
var l_aJSMeasurementBoxes = new Array();
<c:forEach var="measBoxItem" varStatus="meanBoxCnt" items="${selectedProcessImage.toogleProcessedImage.measuredBoxes}">
var l_oMeasuredImageBox = new MeasuredImageBox();
l_oMeasuredImageBox.Region = new Box();
l_oMeasuredImageBox.Region.UL = new Pixel();
l_oMeasuredImageBox.Region.LR = new Pixel();
l_oMeasuredImageBox.Region.UL.x = ${measBoxItem.region.ul.x};
l_oMeasuredImageBox.Region.UL.y = ${measBoxItem.region.ul.y};
l_oMeasuredImageBox.Region.LR.x = ${measBoxItem.region.lr.x};
l_oMeasuredImageBox.Region.LR.y = ${measBoxItem.region.lr.y};
l_oMeasuredImageBox.LayerBottoms = ${measBoxItem.layerBottoms};
l_oMeasuredImageBox.Measurements = new Array();
<c:forEach var="measFromMeasBoxItem" varStatus="measFromMeasBoxItemCnt" items="${selectedProcessImage.toogleProcessedImage.measuredBoxes[meanBoxCnt.index].measurements}">
var l_oMeasurement = new Measurement();
l_oMeasurement.Name = "${measFromMeasBoxItem.name}";
l_oMeasurement.Value = ${measFromMeasBoxItem.value};
l_oMeasurement.DefiningPoints = new Array();
<c:forEach var="measDefPtsFromMeasBoxItem" varStatus="measDefPtsFromMeasBoxItemCnt" items="${measFromMeasBoxItem.definingPoints}">
l_oMeasurement.DefiningPoints[${measDefPtsFromMeasBoxItemCnt.index}] = new Pixel();
l_oMeasurement.DefiningPoints[${measDefPtsFromMeasBoxItemCnt.index}].x = ${measDefPtsFromMeasBoxItem.x};
l_oMeasurement.DefiningPoints[${measDefPtsFromMeasBoxItemCnt.index}].y = ${measDefPtsFromMeasBoxItem.y};
</c:forEach>
l_oMeasuredImageBox.Measurements.push(l_oMeasurement);
</c:forEach>
l_aJSMeasurementBoxes.push(l_oMeasuredImageBox);
</c:forEach>
m_oProcessedImage.MeasuredBoxes = l_aJSMeasurementBoxes;
</c:if>
}
function ProcessedImageFromDTO(p_oProcessImageDTO) {
var l_oProcessedImage = new ProcessedImage();
l_oProcessedImage.MeasuredBoxes = new Array();
for (var iBox=0; iBox<p_oProcessImageDTO.measurementList.length; ++iBox) {
}
return l_oProcessedImage;
}
function getResults4Image(obj)
{
//alert(obj.id);
var imageId = obj.id;
//get selected recipe name
var l_iSelectedRecipeIndex = document.getElementById("RecipeNameOptionsCB").selectedIndex
var recipeName = document.getElementById("RecipeNameOptionsCB").children[l_iSelectedRecipeIndex].text;
//refresh the page.
getResults(imageId, recipeName);
}
function getResults(imageId, recipeName)
{
window.location.href = "${ctx}/viewer/processedImageResults?recipeName=" + recipeName + "&imageId=" + imageId;
}
</SCRIPT>

Related

Add another field for legend in amcharts to show percentage

I am using amcharts to create a piechart for some details in codeigniter and I use pie chart with legend(http://www.amcharts.com/demos/pie-chart-with-legend/) and I made view the legend with title and value just like in the demo. Now I want to add another field for the legend that display relevant percentage in line for each. Are there any keyword or method to do that? I am new to programming.
Here's my code..
$data['chartOne'] = $this->prepareJson($totalQuotations, "q");
$data['chartTwo'] = $this->prepareJson($totalContribution, "c");
<script type = "text/javascript">
var chart1 = AmCharts.makeChart( "salesReportPerformanceChartdiv",' . $data["chartOne"] . ');
var chart2 = AmCharts.makeChart( "salesReportContributionChartdiv",' . $data["chartTwo"] . ');
</script>';
public function prepareJson($data, $type) {
$chatData = [];
foreach ($data as $status) {
$stustotal = new \stdClass();
$stustotal->y = $status->count;
if ($type == "q") {
$stustotal->x = $status->status_name;
} else if ($type == "c") {
$stustotal->x = $status->user_name;
}
array_push($chatData, $stustotal);
}
$listeners = new \stdClass();
$listeners->method = addLegendLabel;
$listeners->event = "drawn";
$export = new \stdClass();
$export->enabled = true;
$legend = new \stdClass();
$legend->position = "right";
$legend->markerType = "circle";
$legend->autoMargins = true;
$feOffset = new \stdClass();
$feOffset->result = "offOut";
$feOffset->in = "SourceAlpha";
$feOffset->dx = 0;
$feOffset->dy = 0;
$feGaussianBlur = new \stdClass();
$feGaussianBlur->result = "blurOut";
$feGaussianBlur->in = "offOut";
$feGaussianBlur->stdDeviation = 5;
$feBlend = new \stdClass();
$feBlend->in = "SourceGraphic";
$feBlend->in2 = "blurOut";
$feBlend->mode = "normal";
$filter = new \stdClass();
$filter->id = "shadow";
$filter->width = "200%";
$filter->height = "200%";
$filter->feOffset = $feOffset;
$filter->feGaussianBlur = $feGaussianBlur;
$filter->feBlend = $feBlend;
$defs = new \stdClass();
$defs->filter = $filter;
$chart = new \stdClass();
$chart->type = "pie";
$chart->startDuration = 0;
$chart->theme = "light";
$chart->addClassNames = true;
$chart->legend = $legend;
$chart->innerRadius = "85%";
$chart->defs = $defs;
$chart->dataProvider = (array)$chatData;
$chart->valueField = "y";
$chart->titleField = "x";
$chart->labelRadius = 5;
$chart->radius = "42%";
$chart->labelText = "";
$chart->listeners = $listeners;
$chart->export = $export;
$chartJSON = json_encode($chart);
return $chartJSON;
}
You can customize the legend's valueText to include the percents by adding the [[percents]] shortcode to the string. By default, it is set to "[[value]]". In your case, it looks like you have to set it through your $legend variable. You might also want to set the valueWidth to accommodate for the longer value string like so:
$legend->valueText = "[[value]] [[percents]]%"; //customize as needed
$legend->valueWidth = 100; //adjust as needed so it doesn't overlap
Fiddle

Create chart in a new Tab using Angular Js

I have a function that creates a chart in a new tab. I have done this in javascript. How should this be converted into AngularJs.
function OpenWin() {
var w = window.open();
w.document.open();
w.document.write('<div id="container" style="width:100%; height:400px;"></div>');
w.document.write('<select id="type" onchange="ChartFunc(this.value)"><option value="line">line</option><option value="column">column</option> <option value="area">area</option><option value="bar">bar</option></select>');
var scriptHead = w.document.createElement("SCRIPT");
var scriptHead1 = w.document.createElement("SCRIPT");
var link = "http://code.highcharts.com/highcharts.js";
var link1 = "http://code.highcharts.com/modules/exporting.js";
scriptHead.onload = function() {
var script = w.document.createElement("SCRIPT");
w.document.body.appendChild(script);
var js = w.document.createTextNode('var a = localStorage.getItem("ImportOptions"); var jsona = JSON.parse(a); var chart = new Highcharts.Chart(jsona);function ChartFunc(value){ console.log(value); jsona.chart.type = value;var chart = new Highcharts.Chart(jsona); }');
script.appendChild(js);
w.document.close();
scriptHead1.src = link1;
w.document.head.appendChild(scriptHead1);
}
scriptHead.src = link;
w.document.head.appendChild(scriptHead);
}

Converting javascript array to ViewBag or ViewData to acces data from controller

I have a dynamic table in my form on Save button click I am accessing the whole table and storing it to array using javascript. FOllowing is the javascript
function SaveData() {
var MedicineName = new Array();
var BatchNo = new Array();
var ExpiryDate = new Array();
var Qty = new Array();
var FreeQty = new Array();
var PurRate = new Array();
var Mrp = new Array();
var SellRate = new Array();
var Unit = new Array();
var Amount = new Array();
var DiscPer = new Array();
var DiscAmt = new Array();
var GrossAmt = new Array();
var VatPer = new Array();
var VatAmt = new Array();
var AddVatPer = new Array();
var AddVatAmt = new Array();
var NetAmt = new Array();
$("table#tbl1 tr").each(function (row, tr) {
MedicineName[row] = $(tr).find('td:eq(1)').text()
BatchNo[row] = $(tr).find('td:eq(2)').text()
ExpiryDate[row] = $(tr).find('td:eq(3)').text()
Qty[row] = $(tr).find('td:eq(4)').text()
FreeQty[row] = $(tr).find('td:eq(5)').text()
PurRate[row] = $(tr).find('td:eq(6)').text()
Mrp[row] = $(tr).find('td:eq(7)').text()
SellRate[row] = $(tr).find('td:eq(8)').text()
Unit[row] = $(tr).find('td:eq(9)').text()
Amount[row] = $(tr).find('td:eq(10)').text()
DiscPer[row] = $(tr).find('td:eq(11)').text()
DiscAmt[row] = $(tr).find('td:eq(12)').text()
GrossAmt[row] = $(tr).find('td:eq(13)').text()
VatPer[row] = $(tr).find('td:eq(14)').text()
VatAmt[row] = $(tr).find('td:eq(15)').text()
AddVatPer[row] = $(tr).find('td:eq(16)').text()
AddVatAmt[row] = $(tr).find('td:eq(17)').text()
NetAmt[row] = $(tr).find('td:eq(18)').text()
TableData.shift();
MedicineName.shift();
BatchNo.shift();
ExpiryDate.shift();
Qty.shift();
FreeQty.shift();
PurRate.shift();
Mrp.shift();
SellRate.shift();
Unit.shift();
Amount.shift();
DiscPer.shift();
DiscAmt.shift();
GrossAmt.shift();
VatPer.shift();
VatAmt.shift();
AddVatPer.shift();
AddVatAmt.shift();
NetAmt.shift();
}
Now I want to store it in ViewBag or ViewData or any more efficient way from this 2 to controller.
Note: I dont only have to save value of table there are couple other fields I am storing and all things are inter related so I want to get done this thing at once not like calling some other function first to save this data and other function for other data of the same form

Javascript doesn't generate email

I've coded some js into an Articulate Storyline file for a workshop. I'm trying to get the system to compile a number of variables and email the data to the user. When I click on the icon to generate the email I get nothing.
SET DATE CODE
var d = new Date();
var weekday=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday");
var monthName = new Array("January","February","March","April","May","June","July","August","Septemeber","October","November","December");
var dateVal = d.getDate().toString();
var delimeter = ", ";
var delimeter1 = " ";
var txtPostdate = ""
var lDigit = dateVal.charAt( dateVal.length-1);
if (lDigit = = "1"){
txtPostdate = "st";
}else if(lDigit = = "2"){
txtPostdate = "nd";
}else if(lDigit = = "3"){
txtPostdate = "rd";
}else{
txtPostdate = "th";
}
var dateString = weekday[d.getDay()]+delimeter+monthName[(d.getMonth())]+delimeter1+dateVal+txtPostdate+delimeter+d.getFullYear();
var player = GetPlayer();
player.SetVar("SystemDate",dateString);
SEND EMAIL CODE
var player = GetPlayer();
var useremail = player.GetVar("email");
var subject ="My Fact Sheet - Optimizing Your Online Job Applications";
var firstname = player.GetVar("firstname");
var lastname = player.GetVar("lastname");
var street = player.GetVar("street1");
var address2 = player.GetVar("street2");
var city = player.GetVar("city");
var state = player.GetVar("state");
var zip = player.GetVar("zip");
var phone = player.GetVar("phone");
var cell = player.GetVar("cell");
var mymail = player.GetVar("mymail");
var phone = player.GetVar("phone");
var cell = player.GetVar("cell");
var school1 = player.GetVar("school1");
var s1city = player.GetVar("s1city");
var s1degree = player.GetVar("s1degree");
var s1date = player.GetVar("s1date");
var s1start = player.GetVar("s1start");
var school2 = player.GetVar("school2");
var s2city = player.GetVar("s2city");
var s2degree = player.GetVar("s2degree");
var s2start = player.GetVar("s2start");
var s2date = player.GetVar("s2date");
var school3 = player.GetVar("school3");
var s3city = player.GetVar("s3city");
var s3degree = player.GetVar("s3degree");
var s3date = player.GetVar("s3date");
var s3start = player.GetVar("s3start");
var e1title = player.GetVar("e1title");
var e1start = player.GetVar("e1start");
var e1end = player.GetVar("e1end");
var e1 = player.GetVar("e1");
var e1employer = player.GetVar("e1employer");
var e1city = player.GetVar("e1city");
var e1state = player.GetVar("e1state");
var e1zip = player.GetVar("e1zip");
var e1super = player.GetVar("e1super");
var e1phone = player.GetVar("e1phone");
var e1reason = player.GetVar("e1reason");
var e1startsalary = player.GetVar("e1startsalary");
var e1endsalary = player.GetVar("e1endsalary");
var e1accomplish = player.GetVar("e1accomplish");
var e2title = player.GetVar("e2title");
var e2start = player.GetVar("e2start");
var e2end = player.GetVar("e2end");
var e2 = player.GetVar("e2");
var e2employer = player.GetVar("e2employer");
var e2city = player.GetVar("e2city");
var e2state = player.GetVar("e2state");
var e2zip = player.GetVar("e2zip");
var e2super = player.GetVar("e2super");
var e2phone = player.GetVar("e2phone");
var e2reason = player.GetVar("e2reason");
var e2startsalary = player.GetVar("e2startsalary");
var e2endsalary = player.GetVar("e2endsalary");
var e2accomplish = player.GetVar("e2accomplish");
var e3title = player.GetVar("e3title");
var e3start = player.GetVar("e3start");
var e3end = player.GetVar("e3end");
var e3 = player.GetVar("e3");
var e3employer = player.GetVar("e3employer");
var e3city = player.GetVar("e3city");
var e3state = player.GetVar("e3state");
var e3zip = player.GetVar("e3zip");
var e3super = player.GetVar("e3super");
var e3phone = player.GetVar("e3phone");
var e3reason = player.GetVar("e3reason");
var e3startsalary = player.GetVar("e3startsalary");
var e3endsalary = player.GetVar("e3endsalary");
var e3accomplish = player.GetVar("e3accomplish");
var r1name = player.GetVar("r1name");
var r1company = player.GetVar("r1company");
var r1email = player.GetVar("r1email");
var r1phone = player.GetVar("r1phone");
var r2name = player.GetVar("r2name");
var r2company = player.GetVar("r2company");
var r2email = player.GetVar("r2email");
var r2phone = player.GetVar("r2phone");
var r3name = player.GetVar("r3name");
var r3company = player.GetVar("r3company");
var r3email = player.GetVar("r3email");
var r3phone = player.GetVar("r3phone");
var cover = player.GetVar("cover");
var resume = player.GetVar("resume");
var mail = player.GetVar("mail");
var mailto_link='mailto:'+useremail+'?subject='+subject+'&body='+"Activity Notes – Optimizing Your Online Job Applications %0d%0A %0d%0AMy Name:%0d%0A”+firstname+”%0d%0A”+lastname+”%0d%0A%0d%0AMy Address:%0d%0A”+street1+”%0d%0A”+street2+”%0d%0A”+city+”%0d%0A”+state+”%0d%0A”+zip+”%0d%0A%0d%0AMy Home Phone: %0d%0A"+phone+”%0d%0A%0d%0AMy Cell Phone: %0d%0A”+cell+”%0d%0A%0d%0AMy eMail: %0d%0A "+mymail+”%0d%0A%0d%0AMy Education:%0d%0A”+school1+”%0d%0A”+s1city+”+s1degree+”%0d%0A”+s1start+”%0d%0A”+s1date+”%0d%0A%0d%0A”+school2+”%0d%0A”+s2city+”%0d%0A”+s2degree+”%0d%0A“+s1start+”%0d%0A”+s2date+”%0d%0A%0d%0A”+school3+”%0d%0A“+s3city+”%0d%0A“+s3degree+”%0d%0A“+s1start+”%0d%0A“+s3date+”%0d%0A%0d%0AMy Employment History - Job 1: %0d%0A“+e1title+”%0d%0A%0d%0ADates: %0d%0A “+e1start+”%0d%0A“+e1end+”%0d%0A%0d%0AEmployer Information:%0d%0A“+e1+”%0d%0A“+e1employer+”%0d%0A“+e1city+”%0d%0A“+e1state+”%0d%0A“+e1zip+”%0d%0A%0d%0ACompany Contact: %0d%0A“+e1super+”%0d%0A“+e1phone+”%0d%0A%0d%0AReason for Leaving: %0d%0A“+e1reason+”%0d%0A%0d%0AStarting Salary: “+e1startsalary+”%0d%0AEnding Salary: ”+e1endsalary+”%0d%0A%0d%0AAccomplishments:%0d%0A“+e1accomplish+”%0d%0A%0d%0AMy Employment History - Job 2:%0d%0A“+e2title+”%0d%0A%0d%0ADates:%0d%0A“+e2start+”%0d%0A“+e2end+”%0d%0A%0d%0AEmployer Information: %0d%0A“+e2+”%0d%0A“+e2employer+”%0d%0A“+e2city+”%0d%0A“+e2state+”%0d%0A“+e2zip+”%0d%0A%0d%0ACompany Contact: %0d%0A“+e2super+”%0d%0A“+e2phone+”%0d%0A%0d%0AReason for Leaving:%0d%0A“+e2reason+”%0d%0A%0d%0AStarting Salary: “+e2startsalary+”%0d%0AEnding Salary: “+e2endsalary+”%0d%0A%0d%0AAccomplishments:%0d%0A“+e2accomplish+”%0d%0A%0d%0AMy Employment History - Job 3:%0d%0A“+e3title+”%0d%0A%0d%0ADates:%0d%0A“+e3start+”%0d%0A“+e3end+”%0d%0A%0d%0AEmployer Information:%0d%0A
“+e3+”%0d%0A“+e3employer+”%0d%0A“+e3city+”%0d%0A“+e3state+”%0d%0A“+e3zip+”%0d%0A%0d%0ACompany Contact:%0d%0A“+e3super+”%0d%0A“+e3phone+”%0d%0A%0d%0AReason for Leaving:%0d%0A“+e3reason+”%0d%0A%0d%0AStarting Salary: “+e3startsalary+”%0d%0AEnding Salary: “+e3endsalary+”%0d%0A%0d%0AAccomplishments:%0d%0A“+e3accomplish+”%0d%0A%0d%0AMy References:%0d%0A“+r1name+”%0d%0A“+r1company+”%0d%0A“+r1email+”%0d%0A“+r1phone+”%0d%0A%0d%0A“+r2name+”%0d%0A“+r2company+”%0d%0A“+r2email+”%0d%0A“+r2phone+”%0d%0A%0d%0A“+r3name+”%0d%0A“+r3company+”%0d%0A“+r3email+”%0d%0A“+r3phone+”%0d%0A%0d%0AMy Resume:%0d%0A“+resume+”%0d%0A%0d%0AMy Cover Letter:%0d%0A“+cover+”%0d%0A%0d%0A
win=window.open(mailto_link,'emailWin');
Try putting %20 in place of spaces. Text in the submitted URL has spaces "Activity Notes – Optimizing Your Online.........". I did not survey the entire URL, but be sure to encode wherever needed.

Easeljs game project

I'm working on a game project but I have a a problem i received this error:
NS_ERROR_NOT_AVAILABLE:
ctx.drawImage(this.image, 0, 0); //Bitmap.js in Easeljs lib.
I used the bitmap in the next codes. Please tell me if in this there is a problem and how to fix it.
Thanks for collaboration.
Code 1:
p.initialize = function(x,y ,stage, world){
var bmp = new Bitmap('../assets/blackBall.png');
//console.log(bmp)
//alert(bmp)
bmp.regX = radius;
bmp.regY = radius;
bmp.x=x;
bmp.y=y;
this.skin = bmp;
stage.addChild(bmp);
var fixDef = new b2FixtureDef();
fixDef.density = 1.0;
fixDef.friction = 0.5;
fixDef.restitution = 0.8;
fixDef.shape = new b2CircleShape(38*CONST.pixelToMeter);
var bodyDef = new b2BodyDef();
bodyDef.type = b2Body.b2_dynamicBody;
bodyDef.position.x = bmp.x*CONST.pixelToMeter;
bodyDef.position.y = bmp.y*CONST.pixelToMeter;
this.body = world.CreateBody(bodyDef);
this.body.CreateFixture(fixDef);
this.skin.body = this.body;
setUserData(this.body);
/*Event handler*/
this.skin.onMouseOver = handleMouseOver;
this.skin.onMouseOut = handleMouseOut;
this.skin.onPress = handleMouseDown;
//console.log(this.skin);
}
Code 2:
p.initialize = function(stage, world){
var shooterSkin = new Container();
var cirlceSkin = new createjs.Bitmap('../assets/shooter.png');
cirlceSkin.name = "ball";
var arrowSkin = new createjs.Bitmap('../assets/arrow.png');
arrowSkin.name = "arrow";
arrowSkin.rotation = 0;
arrowSkin.scaleX =0;
arrowSkin.regY = arrowHeight;
cirlceSkin.regX = skinRadius;
cirlceSkin.regY = skinRadius;
cirlceSkin.x =0;
cirlceSkin.y = 0;
cirlceSkin.alpha=circleAlpha;
shooterSkin.x=110
shooterSkin.y = 110;
shooterSkin.addChild(cirlceSkin);
shooterSkin.addChild(arrowSkin);
arrowIndex = 1;
this.skin = shooterSkin;
stage.addChild(shooterSkin);
var fixDef = new b2FixtureDef();
fixDef.friction = 0;
fixDef.restitution = 0;
fixDef.isSensor = true;
fixDef.shape = new b2CircleShape(radius*CONST.pixelToMeter);
var bodyDef = new b2BodyDef();
bodyDef.type = b2Body.b2_kineticBody;
bodyDef.position.x = shooterSkin.x*CONST.pixelToMeter;
bodyDef.position.y = shooterSkin.y*CONST.pixelToMeter;
this.body = world.CreateBody(bodyDef);
this.body.CreateFixture(fixDef);
setUserData(this.body);

Categories

Resources