ZIM BEAM (zimstudiochange) - Code Sharing for JavaScript Canvas Framework

BEAM

Share ZIM CODE use ZIM BEAM

COPY

SHOW

zimstudiochange 2024-07-12 23:50:02

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>SLATE - ZIM Kids - Code Creativity!</title>

import zim_pizzazz from "https://zimjs.org/cdn/016/zim_pizzazz";
import zim_socket from "https://zimjs.org/cdn/016/zim_socket2";

new Frame(FIT,720,720,white,white,ready);
function ready() { 
    	
    	TextureActive.makeLogo(null,true).sca(.4).pos(-40, 250,CENTER,TOP)
   new Label({text:"CHANGE\n3D WALL\n COLOR",bgColor:blue}).pos(10,10,LEFT,TOP); 	F.madeWith().pos(10,10,RIGHT,TOP);
	new Label("made for zimjs.com/STUDIO/multiUser:\nwith this orginal https://zimjs.com/change\nremade and for ZIM BEAM to\nchange 3D WALL color you need \n1) https://zimjs.com/beam/zimstudioMultiUser\n2)https://zimjs.com/beam/zimstudioChange", 19, null, black).pos(140,20,RIGHT,TOP).tap(()=>{zgo("https://zimjs.com/beam/zimstudiomultiuser/show", "_blank")}); 
    
    	const socket = new Socket(zimSocketURL, "studio");
    
	
    	
	
	
    	new Label("1) Find the NUMBER to connect with the wall on\nhttps://zimjs.com/beam/zimstudiomulituser/show\nand set same number here", 25,null,black).pos(50,150,LEFT,TOP).tap(()=>{
    		zgo("https://zimjs.com/beam/zimstudiomultiuser/show", "_blank")
    	});
    
    	socket.on("ready", ()=>{
    		STYLE = {vertical:true, continuous:true, corner:8, stepperType:"number", shadowColor:black.toAlpha(.1), shadowBlur:2}
    		const num1 = new Stepper().change(key);
    		const num2 = new Stepper().change(key);
    		const num3 = new Stepper().change(key);
    		STYLE = {valign:CENTER}	
			
			
    		new Tile([new Label("to connect to the 3D WALL,\nyou need to match 2 numbers:\nWALL number = CHANGE number ?\nOK, so both 3 numbers steppers same\nGO to the colorpicker to choose a color",30,null,black).alp(1), num1, num2, num3], 4, 1, 40, 0, true).sca(.6).pos(80,310,LEFT, TOP);
    		STYLE = {}
    		function key(e) {
    			socket.setProperties({n1:num1.currentValue, n2:num2.currentValue, n3:num3.currentValue});
    		}

new Label("2) Click a color to change the color in the colorPicker\nand you will see the 3D WALL background changing",24,null,black).pos(40,200,LEFT,BOTTOM);
    		const cp = new ColorPicker({
    			colors:[light, red, green, blue],
    			cols:4,
    			selectedIndex:-1,
    			backgroundColor:dark,
    			spacing:20,
    			circles:true
    		}).scaleTo(S,90).pos(0,10,CENTER,BOTTOM).change(()=>{
    			socket.setProperty("color", cp.selectedColor);
				rect.color=cp.selectedColor;
    		});	
			cp.selectedColor=light;
			var rect = new Rectangle(W-100,190,cp.selectedColor).pos(0,-30,CENTER,CENTER).ske(3).bot();
    		S.update();
    	});
    
	
	
	
    	socket.on("error", ()=>{
    		STYLE = {backgroundColor:red, color:white, padding:30, align:CENTER};
    		new Label("Something went wrong\nlet us know at forum.zimjs.com")
    			.scaleTo(S,90).center().mov(0,50)
    			.tap(()=>{zgo("https://forum.zimjs.com","_blank")})
    		S.update();
    	});
    	
    
    
} // end of ready

</script>