Ambiera Forum

Discussions, Help and Support.

Create a new account, Search, or Login:
Name:  Password:
Ambiera Forum > CopperCube > Programming and Scripting
Responsive html in CC
Author Text

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});




Create reply:


Posted by: (you are not logged in)


Enter the missing letter in: "In?ernational" (you are not logged in)


Text:

 

  

Forum 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