Logical display of dynamic data in 3d HTMl5

I cant reveal my project details here. So I am taking an example of Electrical circuit.

Suppose we have 10 lights at home and there is a centrepoint from where the electricity flows to the lights when switched on. I want to draw a logical view that at a given time, from the centrepoint, to what lights the electricity is flowing.

This representation should be in 3d View. Imagine, I have been provided with a unique symbol for centrepoint and switch.

My thought process towards this is generate a json data from my application and feed this data to HTML5 which can render the json data into 3D representation.

But my query is, the data I have is quiet complex. Say, centrepoint is connected to many subnets and set of lights are connected to each of the subnet and at a given point, what subnet is connected to centrepoint and what lights are getting electricity is connect to the particular subnet. I should show neither the subnet nor the lights which is not getting the electricity (assuming, electricity will flow to subnet when atleast one light is glowing from that subnet)

How can I render this dynamic data in HTML5 in 3d?

Kindly please point me to the example projects in github.com or direct me right tutorial.

If HTML5 is not the right choice, Kindly please direct me to the right technology that I can use to do this?


Source: stackoverflow-javascript

Convert Json parsed date to fit html5 input date

I am using Knockout to make a nice looking Gui like so

Javascript:

   viewModel = {
        lookupCollection: ko.observableArray()
    };

    $(document).ready(function () {
        $.ajax({
            type: "GET",
            url:  "@Url.Action("GetView", "FakturaOmfangs", new {area = "" , id = ViewBag.id})",
        }).done(function (data) {
            $(data).each(function (index, element) {
                var mappedItem =
                    {
                        FakturaId: ko.observable(element.FakturaId),
                        FakturaProdukterId: ko.observable(element.FakturaProdukterId),
                        Beskrivelse: ko.observable(element.Beskrivelse),
                        Periode: ko.observable(element.Periode),
                        EndDate: ko.observable(element.EndDate),
                        procent: ko.observable(element.procent),
                        Rabat: ko.observable(element.Rabat),
                        Pris: ko.observable(element.Pris),
                        Ialt: ko.observable(element.Ialt),
                        Value: ko.observable(element.Value),
                        Mode: ko.observable("display")
                    };
                console.log(mappedItem);
                viewModel.lookupCollection.push(mappedItem);
            });
            ko.applyBindings(viewModel);
        });
    });

the EndDate is a Datetime? parsed from controller like this

  return Json(list, JsonRequestBehavior.AllowGet);

This is my input where i would like to put the Date into, so i can edit it.

<td><input class="form-control" type="date" data-bind="value: EndDate" /></td>

How do i format the date to the correct format? so that i can use it in input type=Date ?

Thanks.
Benny.


Source: stackoverflow-javascript

How do I make an HTML-button both redirect the user to a new .html-page whilst also saving data from form input using .value?

I have created a form where a user gets to type in data that is saved in variables when the data is submitted. I am requesting a solution that will both save the user’s data whilst also redirecting the user to a new .html-page when the button is pressed.

<button type="button" onclick="getInfo()">Submit</button>

As you can see above, the button is activating a function, that will save the info like this:

function getInfo(){
var firstname = document.getElementById("firstname").value
var lastname = document.getElementById("lastname").value
var adress = document.getElementById("adress").value
var password1 = document.getElementById("password1").value
var password2 = document.getElementById("password2").value
}

How can I make this possible? Sincerely, Decentralized.


Source: stackoverflow-javascript

HTML5 Video with Canvas transparency does not work in Safari

I’m trying to load a randomized video with alpha transparency using canvas on click, which is working in all browsers except Safari. For Safari, the audio is loading, however there is no video output. I tried removing the source tags as stated in https://www.experts-exchange.com/questions/28634434/HTML5-Video-Background-Not-Playing-on-Safari-or-IE11.html, however that did not seem to solve anything.

$(document).ready(function() {
	var outputCanvas = document.getElementById('outputSS'),
		output = outputCanvas.getContext('2d'),
		bufferCanvas = document.getElementById('bufferSS'),
		buffer = bufferCanvas.getContext('2d'),
		video = document.getElementById('videoSS'),
		width = outputCanvas.width,
		height = outputCanvas.height,
		interval;
				
		function processFrame() {
			buffer.drawImage(video, 0, 0);
			
			// this can be done without alphaData, except in Firefox which doesn't like it when image is bigger than the canvas
			var	image = buffer.getImageData(0, 0, width, height),
				imageData = image.data,
				alphaData = buffer.getImageData(0, height, width, height).data;

			
			for (var i = 3, len = imageData.length; i < len; i = i + 4) {
				imageData[i] = alphaData[i-1];
			}

			processFrame.crossOrigin = "anonymous";
			
			output.putImageData(image, 0, 0, 0, 0, width, height);
		}
		
		function randomColourVal() {
			return Math.floor( Math.random() * 2000 );
		}
		
		video.addEventListener('play', function() {
			clearInterval(interval);
			interval = setInterval(processFrame, 40)
		}, false);
			

	document.getElementById('buttonRedesign').onclick = function (){
		$( document ).ajaxSuccess(function( event, xhr, settings ) {
    		if ( settings.url.indexOf("/store/cart/mini_cart.jsp") >= 0) {
				var videos = [
				    [{type:'mp4', 'src':'/__ssobj/static/ellen_comp_2_ALPHA_Final2.mp4'}, {type:'webm', 'src':'/__ssobj/static/ellen_comp_2_ALPHA_Final2.webm'}, {type:'ogg', 'src':'/__ssobj/static/ellen_comp_2_ALPHA_Final2.ogv'}],
				    [{type:'mp4', 'src':'/__ssobj/static/ellen_comp_6_ALPHA_Final2.mp4'}, {type:'webm', 'src':'/__ssobj/static/ellen_comp_6_ALPHA_Final2.webm'}, {type:'ogg', 'src':'/__ssobj/static/ellen_comp_6_ALPHA_Final2.ogv'}],  
				    [{type:'mp4', 'src':'/__ssobj/static/ellen_comp_4_ALPHA_Final2.mp4'}, {type:'webm', 'src':'/__ssobj/static/ellen_comp_4_ALPHA_Final2.webm'}, {type:'ogg', 'src':'/__ssobj/static/ellen_comp_4_ALPHA_Final2.ogv'}],  
				    [{type:'mp4', 'src':'/__ssobj/static/ellen_comp_1_ALPHA_Final2.mp4'}, {type:'webm', 'src':'/__ssobj/static/ellen_comp_1_ALPHA_Final2.webm'}, {type:'ogg', 'src':'/__ssobj/static/ellen_comp_1_ALPHA_Final2.ogv'}],  
				    [{type:'mp4', 'src':'/__ssobj/static/ellen_comp_2_ALPHA_Final2.mp4'}, {type:'webm', 'src':'/__ssobj/static/ellen_comp_2_ALPHA_Final2.webm'}, {type:'ogg', 'src':'/__ssobj/static/ellen_comp_2_ALPHA_Final2.ogv'}],  
				    [{type:'mp4', 'src':'/__ssobj/static/ellen_comp_5_ALPHA_Final2.mp4'}, {type:'webm', 'src':'/__ssobj/static/ellen_comp_5_ALPHA_Final2.webm'}, {type:'ogg', 'src':'/__ssobj/static/ellen_comp_5_ALPHA_Final2.ogv'}],  
				];
				var number = Math.floor(Math.random()*videos.length);
			    $('#videoSS').find('source').each(function(index){ 
			          videoSrc = videos[number][index].src;
			          $(this).attr('src', videoSrc);
			          document.getElementById('videoSS').load();
			          document.getElementById('videoSS').play();
			    });
		 	}
		});
	};
	$(function(){
	    var video = $('#videoSS')[0];
	    video.addEventListener('ended', function(){
	        $('.videoCont').fadeOut();
	        $('.replayVideo').show();
	    })
		video.addEventListener('playing', function(){
	        $('.videoCont').fadeIn();
	        $('.replayVideo').hide();        
	    })

	});

	$('.replayVideo').click(function() {
		document.getElementById('videoSS').play();
	});

});
.videoCont {position: fixed;margin-left: -390px;z-index: 1000;bottom: 0px;display:none;width: 400px;display: block;}
.replayVideo {position: fixed;margin-left: -260px;z-index: 1001;bottom: 0px;display:none;cursor:pointer;text-align: center;}
.replayVideo img {width: 2rem;}
.replayVideo div {background: rgba(255, 255, 255, .8);display: block;padding: 15px;margin-bottom: 40px;}
#outputSS {width: 300px;height: 327px;display: inline-block;}
#bufferSS {display: none;}
<button id="buttonRedesign">Add</button>
Replay Video
REPLAY


Source: stackoverflow-javascript

Music on iPhone stops playing when browsing the website

I have a strange problem. When I’m browsing my website on my iPhone, the music stops playing anytime I click on an element to load a new page. It will just stop playing any music.

I cannot find anything that handles such behavior. I researched quite some time but have not been able to find a solution. I would greatly appreciate any suggestions.


Source: stackoverflow-php

static webpage change file

I’m making a simple website in GitHub pages. I have a text file in the /docs folder (I can move though) and I want to change it’s content through index.html. I found a lot of back-end solutions but GitHub pages allows static webpages only. Is there a way to do so in static webpage and if so how to do it in javascript?


Source: stackoverflow-javascript

Javascript HTML select dropdown

I am trying to get the data from database and display it in select option through drop down menu. I am getting the data correctly in java script page as well. But it is not displaying in the drop down menu of html.

HTML code:

<td>Organization Name:</td>
                <td><select id="orgname" name="Oname" onload="getOrganizationname();">
                          <option selected disabled value=" ">Choose your Organization</option>

                        <!-- <option value="1" >xyz</option>
                        <option value="2">Brocade</option>
                        <option value="3">Citrix</option> --> 
                </select></td>

Javascript code: function getOrganizationname() {

    $.get('getOrganizationname.jsp',function(data)
            {
        document.getElementById("orgname").innerHTML= data;
        alert(data);
    }

    );
}


onload i am getting this in alert msg(trying to debug) This is info. from database:
<option value="Infosys"></option>
<option value="Akamai"></option>
<option value="Brocade"></option>
<option value="XYZ"></option>
<option value="XYZ1"></option>
<option value="XYZ2"></option>
Appreciate your help in advance.


Source: stackoverflow-javascript

Preview of settings before they take effect

I am building an admin page for my web site that will allow the admin to change small things like background color, fonts and other things that won’t effect the layout of the page. I would like to be able to preview the changes in realtime (as they are being made) before writing the values to the database, using php, where they will become permanent. My thinking is that I will bring up the page that is being changed in an next to a form where selections can be made for the different settings in the page. I would like to use javascript to change the CSS for the content of the as new selections are made. Is this possible or do I need to be looking in a different direction? I’m worried about not being able to interact with the page inside the . Will that page be part of the DOM, or does it stand on its own? At this time I’m just brainstorming so I dont have any code to look at.


Source: stackoverflow-javascript

How does the jQuery document ready function handle variable scoping?

I have a web application that loads tables within jQueryUI dialogs. We are using IgniteUI library for converting the tables into Grids.

The way the tables are loaded are by on a button click, an ajax call is made that returns an HTML fragment. Within that HTML fragment, we have a script tag that does jQuery initialization. It also created a GridManager for each grid:

AJAX call:

<script type="text/javascript">
    $(function () {
        $("#gridButton").click(function() {
            $.ajax({
                url: "Grids/CreateGrid",
                type: "post",
                contentType: 'application/json; charset=utf-8',
                data: request,
                cache: false,
            })
            .done(function (fragment) {
                $("#grids").append(fragment);
            });
        });
    });
<script>

HTML fragment:

...
<script type="text/javascript"> $(function () { $("#dialog-${dialog.name}").igDialog({ ... }); $("#grid-${tableGrid.name}").igGrid({ ... }); var manager = new GridManager($("#grid-${tableGrid.name}")); }); <script>

In the code, dialog.name and tableGrid.name are unique per call.

Since every fragment would have a script tag, this would not work, as every grid needs a GridManager, and every script tag would overwrite the previous manager.

What is the best practice for associating each GridManager to each tableGrid?


Source: stackoverflow-javascript