Responsive html in CC - Programming and Scripting Forum

Ambiera Forum

Discussions, Help and Support.

	Ambiera Forum > CopperCube > Programming and Scripting
	Responsive html in CC

eldeibit Registered User
Quote
2021-02-21 10:44:56

Hi ! I'm trying to make coppercube responsive html. If the canvas measures more than 700px it shows an object, if the canvas measures less than 700px it shows it.
This is my code and it runs //Before first drawing do something


function myFunction(x) {
  if (x.matches) { // If media query matches
  var s = ccbGetSceneNodeFromName("cubeMesh1");
ccbSetSceneNodeProperty(s, "Visible", false);
  } else {
  var s = ccbGetSceneNodeFromName("cubeMesh1");
ccbSetSceneNodeProperty(s, "Visible", true);
  }
}

var x = window.matchMedia("(max-width: 700px)")
myFunction(x) // Call listener function at run time
x.addListener(myFunction) // Attach listener function on state changes

Does anyone see any errors? Thank you !

csp-games Guest
Quote
2021-02-21 23:23:51

Why, isn't it working? If so, what says the browser javascript console? It was reported the "do something before first drawing" would do it every frame - under bug reports. I see some lines should have a semicolon at the end, but browsers seem tolerant these days.

Thanks for sharing. It is great to have access to the html, css and js functionality from within CC.

eldeibit Registered User
Quote
2021-02-22 15:33:56

Thanks for the reply. Yes, for some reason it doesn't work.

csp-games Guest
Quote
2021-02-23 20:22:43

addListener and matchMedia I don't know - this is far from how I code, sorry but I can't help you with these.

But one thing people misunderstand is: "do something before start drawing" isn't meant to be executed only once at game start, but (correct me if I'm wrong) every frame BEFORE the frame is rendered. It gives us a way to insert JS at this position in the pipeline, that may have diffrent implications compared to a behavior. That may be useful in respect to collision handler, but also to access the canvas pixels. For example the WebGL command to copy the canvas to an array gave me a black screen in the array, when executed in the behaviour with onAnimate every frame. Only after I used this:



<script type="text/javascript" src="copperlichtdata/copperlicht.js"></script>

<script type="text/javascript">
function onFrameDrawing()
{
 var mywidth=dd__canvas.width;
 var myheight=dd__canvas.height;
 var myheight2=myheight-4;
 dd__gl.readPixels(0, 0, mywidth, myheight, dd__gl.RGBA, dd__gl.UNSIGNED_BYTE, myarr,0); // copy cc canvas to array
}
ccbRegisterOnFrameEvent(onFrameDrawing);
</script>

</head>
right in the html page head, it worked and array myarr contained the rgba data of the canvas. That was for an 80x80 pixel canvas (don't ask), so I had these globals:

myarr=new Uint8Array(80*80*4);

 dd__canvas = document.getElementById('3darea');
 dd__gl = dd__canvas.getContext('webgl2', {preserveDrawingBuffer: true});

csp-games Guest
Quote
2022-01-06 23:05:41

Probably too late, but as I just stumbled upon this thread, today I would implement it this way, or try to:

First of all, I use the copperlicht.js directly, I only use Coppercube to assemble me a package of mesh and sound assets into a ccbz file, that I then can access in my main script. There is an option to do certain things once right after loading is complete:


		var engine = new CL3D.CopperLicht('3darea',  1, 30, 1, "loading", "noWebGL", 0, 1);
	engine.load('copperlichtdata/csp2coppercube.ccbz',1,0);
	// this is called when loading the 3d scene has finished
	engine.ingComplete = function() 
	{		
		var scene = engine.getScene();
		if (!scene)
			return;
		// here's your code
		var mytree=ccbGetSceneNodeFromName("my_pinetree1");
		var canw=document.getElementById('3darea').width;
		if(canw<700){
		// use the ccb command to hide stuff here
		}
		
		// other initializations ...
	}

csp-games Guest
Quote
2022-01-06 23:15:55

quote: engine.ingComplete

wtf

This forum messes up code contributions! Screw this Niko.

It was engine.O-n-L-o-a-d-i-n-g-C-o-m-p-l-e-t-e, but in fear of haxxors all js event handlers are erased - how unelegant.

You only have to filter all < (greather than) and > (lower than) and make them > and < to prevent any code injection.

That includes all input fields, not just the textarea, and script crossorigin must be denied.

csp-games Guest
Quote
2022-01-06 23:19:10

oops, I meant

You only have to filter all < (greather than) and > (lower than) and make them &-g-t-; and &-l-t-; to prevent any code injection.
(minus the minus signs in &-l-t-; of course)

Create reply:

Possible Codes

Feature	Code
Link	[url] www.example.com [/url]
Bold	[b]bold text[/b]
Image	[img]http://www.example.com/image.jpg[/img]
Quote	[quote]quoted text[/quote]
Code	[code]source code[/code]

Emoticons