We Keep Coding

Why does the ainteger setting not work right?

I have two versions of code. The first version doesn't work, the second version does. Why does the first version's ainteger setting not work right? It is suppose to cause "Player One" and "Player Two" to be displayed above the buttons on the second register button press. I have included the code below.
To be more specific the program is supposed to call the server's register function when the register button is pressed. The server sets the value in the html, using the server's setinteger() when its integer value is one. When the client's ainteger is two (second time register key was pressed,) the event handler will call the server's printthename() function. This in turn calls the client's printname() and printname2() and displays the names. These names are not being displayed!
By tracing the error, when the button is hit twice , the register button event is not breaking in the register buttons event handler, and the block for the ainteger does not seem to be calling the printthename(). It does however show up in the server's register function when the server's integer value is one.
The program uses SignalR and two explorer tabs with Visual Studio 2019.
I have tried changing the code, slimmed it down, made it simple, and traced. And printthename() called from setinteger() is a version that works.
The GitHub link is : https://github.com/Joshei/signalr1
Branch 3 : new version, works.
Branch 4 : old version, doesn't work (doesn't display the names.)
The Visual Studio version has comments to explain that there is no way this is causing any problems.
/////////////////////////////////////HUB://///////////////////////////////////
public class ChatHub : Hub
{
private static readonly List<clients> ClientList = new List<clients>();
public void printthename()
{
string name = "";
if (whoseturn == 0)
{
name = "Player one ";
Clients.Client(ClientList[0].ConnectionId).printname(name);
name = "Player two ";
Clients.Client(ClientList[1].ConnectionId).printname2(name);
}
}
public void register(string name1)
{
clients A_Client = new clients();
A_Client.ConnectionId = Context.ConnectionId;
A_Client.Name = name1;
ClientList.Add(A_Client);
if (integer == 0)
{
integer = integer + 1;
}
else if (integer == 1)
{
Clients.Client(ClientList[1].ConnectionId).setinteger();
Clients.Client(ClientList[0].ConnectionId).setinteger();
}
}
}
/////////////////////////////////////HTML CLIENT://///////////////////////////////////
$(function () {
var ainteger = "0";
$("#Join").click(function () {
$('#Join').hide();
$('#Name').hide();
chat.server.register("a");
if (ainteger == "1") {
chat.server.printthename();
}
});
chat.client.setinteger = function () {
ainteger = "1";
};
});
Thank you, I have been trying to get this working since November 30.

Can I move objects using JavaScript/jQuery in real time to create an animation?

I have a project that stores a series of moves in PHP.
For example, I have a 100x100 grid with two boxes in it. The PHP code creates the coordinates that the boxes move to and each box can do multiple moves per turn.
I would like to animate the moves so users could see the boxes move in real time. To do this, I created a JS array of the coordinates using PHP, then created a jQuery script to iterate through the array and move the objects one at a time, using a setTimeout to control the speed of the changes.
However, this seems to just process all the moves and then only output the final locations. Firefox works a bit better than Chrome, but the setTimeout just seems to delay the final result being shown, rather than delaying each step.
Is there a way to show each move in real time?
Here is my JS:
var locations = {};
locations[0] = { "box":"box1" , "left":"52" , "top":"94" };
locations[1] = { "box": "box2" , "left":"0" , "top":"18" };
locations[2] = { "box": "box1" , "left":"29" , "top":"34" };
...
$(document).ready(function(){
$.each(locations,function(step,details){
setTimeout(processMove,1000,step,details);
});
});
function processMove(step,details){
var box = $('#' + details['box']);
box.css("left",details['left'] + 'px');
box.css("top",details['top'] + 'px');
}
Thanks in advance :)

This would work with your setup but I would recommend using array locations rather than object.
var locations = {};
locations[0] = { "box":"box1" , "left":"52" , "top":"94" };
locations[1] = { "box": "box2" , "left":"0" , "top":"18" };
locations[2] = { "box": "box1" , "left":"29" , "top":"34" };var cnt = 0;
var handle = setInterval( function() {
//processMove(locations[cnt]);
console.log(locations[cnt++]);
if (cnt > Object.keys(locations).length - 1) {
clearInterval(handle);
}
}, 1000);

You can. There is a whole API for this in jQuery:
http://api.jquery.com/animate/

Dygraphs live trending and synchronization

There are two dygraphs on my page. On regular intervals new time series data is read from source and written to local variables, then the graphs are updated using the following commands:
vm.graph1.updateOptions(
{ 'file': customData1, 'labels': vm.labels1 });
vm.graph2.updateOptions(
{ 'file': customData2, 'labels': vm.labels2 });
This works perfectly fine, the graphs show the live trend as expected.
However, when I try to synchronize the two graphs by including the syncrhonizer.js and using the following command:
vm.graphSync = Dygraph.synchronize(vm.graph1, vm.graph2);
Then the "live updates" stop working. In other words, the graph doesn't display any of the new incoming values (it just displays the same static time span). The syncronization works fine, both for selection and zoom.
The data is still getting updated, but now I have to double click on the graph (or manually pan) in order to see the most recent data.
Anyone have any ideas or working solutions for syncrhronizing live trends using Dygraphs?

You'll need to explicitly set the dateWindow after updating the data:
vm.graph1.updateOptions(
{ 'file': customData1, 'labels': vm.labels1 });
vm.graph2.updateOptions(
{ 'file': customData2, 'labels': vm.labels2 });
vm.graph1.updateOptions({
dateWindow: vm.graph1.xAxisExtremes()
});
// ^^^ this will synchronize the other charts, too
The fact that you have to do this could be considered a bug with synchronizer. Feel free to file an issue against dygraphs, preferably with a link to a repro via dygraphs.com/fiddle.

This is a working solution, however, I had to change the "synchronizer.js" from dygraphs, so comments and other suggestions are still welcome.
In attachZoomHandlers function in synchronizer.js, I made this change:
for (var j = 0; j < gs.length; j++) {
if (gs[j] == me) continue;
//added if/else block, the original code was the stuff inside else block
if (me.ignoreXrangeSync && me.ignoreXrangeSync === true) {
//if ignoreXrangeSync flag is set, only update y-range
gs[j].updateOptions( {
valueRange: yrange
});
}
else {
//if ignoreXrangeSync flag is NOT set, run original code (so manual zoom works)
gs[j].updateOptions( {
dateWindow: range,
valueRange: yrange
});
}
}
And in my original code, I made this change.
vm.graph1.ignoreXrangeSync = vm.graph2.ignoreXrangeSync = true;
vm.graph1.updateOptions(
{ 'file': customData1, 'labels': vm.labels1 });
vm.graph2.updateOptions(
{ 'file': customData2, 'labels': vm.labels2 });
vm.graph1.ignoreXrangeSync = vm.graph2.ignoreXrangeSync = false;
Also, I needed to add these zoom callbacks (one for each graph) for my graph for live trending to start when double clicking after having manually zoomed in the graph(s).
var graph1ZoomCallback = function () { //callback for graph1
if(!vm.graph1.isZoomed()) { //if graph1 has been double clicked
vm.graph2.ignoreXrangeSync = true; //note, graph2
vm.graph2.resetZoom();
vm.graph2.ignoreXrangeSync = false;
}
}

How to find when reportviewer is loaded using reportviewer api

I have created a single page for all my reports and I am loading different versions of those reports (line, pie, chart, graph, etc) with a toolbar I made. All is working well there, except on the non-table type charts (line,pie,bar,etc). When those get rendered, I found that the text in the legends and series become blurry and through some research here and other places found that they are converted to images, which are then getting resized on me though a css class that is auto generated.
Firstly, what i'm trying to do:
I want to remove this class from the image that is generated at the time it is loaded. If i turn off async rendering on my report
AsyncRendering="false"
Along with this bit of jquery (targeting the div that contains the reportviewer):
$(document).ready(function () {
$('#reportDiv img').removeAttr('class');
});
Then the result is as expected. The image is not scaled and all is well. The problem, however, is that some of these reports may be quite large, resulting in the user not having any visual feedback of whether or not something is happening. I would like to continue using async rendering, so I started to look at the reportviewer javascript api.
Sys.Application.add_load(function () {
var reportViewer = $find("ctl00_mainContentPlaceHolder_ReportViewer1");
reportViewer.add_propertyChanged(viewerPropertyChanged);
});
function viewerPropertyChanged(sender, e) {
var viewer = $find("ctl00_mainContentPlaceHolder_ReportViewer1");
if (e.get_propertyName() === "isLoading") {
var button = document.getElementById("ctl00_mainContentPlaceHolder_ctlReportParamModuleId1_btnRunReport");
button.disabled = viewer.get_isLoading();
}
else {
if ($find("ctl00_mainContentPlaceHolder_ReportViewer1").get_reportAreaContent() == Microsoft.Reporting.WebFormsClient.ReportAreaContent.ReportPage) {
alert("here");
}
}
}
The first portion (isLoading) works as expected disabling the button. However immediately upon load I get
Object doesn't support property or method 'get_reportAreaContent'
Am I missing something obvious? These are the links from msdn that I used for reference:
reportviewer isLoading
reportviewer ReportAreaContentType

Bar graphs, Line graphs, pie charts, etc. are rendered as images. The images get re-sized based on the size of the report viewer control. Instead of using AsyncRendering="false", I created this javascript workaround and it has solved my problem.
var app = Sys.Application;
app.add_init(ApplicationInit);
function ApplicationInit(sender) {
var prm = Sys.WebForms.PageRequestManager.getInstance();
if (!prm.get_isInAsyncPostBack()) {
prm.add_endRequest(EndRequest)
}
}
function EndRequest(sender, args) {
var reportViewerControlId = "ReportViewer1";
if (sender._postBackControlClientIDs[0].indexOf(reportViewerControlId) >= 0) {
var reportViewerControlContainer = "reportViewerContainer"; // Id of <DIV>
var renderedReportImage = $("#" + reportViewerControlContainer + " img");
renderedReportImage.removeAttr("style").removeAttr("class");
var styleAttr = renderedReportImage.attr("style");
var classAttr = renderedReportImage.attr("class");
if (typeof styleAttr === 'undefined') {
console.log("Successfully removed the style attribute from the rendered report image!");
}
if (typeof classAttr === 'undefined') {
console.log("Successfully removed the class attribute from the rendered report image!");
}
}
}
Basically, I am listening to the endRequest of the PageRequestManager for my ReportViewerControl's ID, then simply removing the style and class attributes from the image to display it unmodified.

Firefox Addon Button Code Not Working - Javascript

I am creating a Firefox extension that is designed to place a button automatically on the toolbar that, when clicked, will open a web page in a new tab. I have used the code snippets from the Mozilla dev site but, when both are put together, only the button placement works. The button does nothing when clicked.
I don't know too much about javascript, so I have no idea what is going wrong here. The entire extension has passed all Mozilla validation checks with no errors and no warnings.
Here is the code. Any help you could offer would be greatly appreciated.
CustomButton = {
1: function installButton(toolbarId, id, afterId) {
if (!document.getElementById(id)) {
var toolbar = document.getElementById(toolbarId);
// If no afterId is given, then append the item to the toolbar
var before = null;
if (afterId) {
let elem = document.getElementById(afterId);
if (elem && elem.parentNode == toolbar)
before = elem.nextElementSibling;
}
toolbar.insertItem(id, before);
toolbar.setAttribute("currentset", toolbar.currentSet);
document.persist(toolbar.id, "currentset");
}
if (firstRun) {
installButton("nav-bar", "my-extension-navbar-button");
}
},
2: function () {
const url = "http://www.mysite.com/"
document
.getElementById("content")
.webNavigation
.loadURI(url, 0, null, null, null)
}
}
I am not very sharp at this, which is why I am asking the question here instead of searching for other examples, which make no sense to me. If someone could show me how to modify this specific code to do what I need it to do, I would be grateful.

This will work from FF 29, which will be released on April 2014
It adds an action-Button to the toolbar, once you click it it will load the http://www.example.com site in a new tab; if you prefer to load a new window use require("sdk/windows") instead.
Using the addon-sdk
var ui = require("sdk/ui");
var action_button = ui.ActionButton({
id: "my-button",
label: "Open example page!",
icon: "./icon.png",
onClick: function() {
require("sdk/tabs").open("http://www.example.com");
}
});