This is a bit of a messy question because I'm just starting to learn how web development works.
I'm attempting to use HTML, JavaScript, and probably CSS (although I'm not really thinking about that yet) to create a simple website. I plan on basing it off of MATLAB apps I created previously (there is a gif at this link).
The website should consist of widgets such as sliders and spinners which the user can toggle to modify 3D graphics and LaTex expressions.
This isn't really relevant to the question, but I'm using Domain.com for the domain seeciv.com and the hosting service.
I plan on using GlowScript written in JavaScript. GlowScript is an environment for creating 3D visuals with widgets, LaTex expressions and more. It seems able to handle decently intense graphics (I think it should be enough for my application) without lag, like with this example.
GlowScript is used by creating a webapp and embedding it into your code (by copying and pasting).
Here is a sample code for resizing a box with a slider. As you can see, the code creates a div, within the div there's a function main, and within the function there's the code for the slider and the box (the code which actually creates the box and slider is at the end):
<!DOCTYPE html>
<html>
<body>
<div id="glowscript" class="glowscript">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link type="text/css" href="https://www.glowscript.org/css/redmond/2.1/jquery-ui.custom.css" rel="stylesheet" />
<link type="text/css" href="https://www.glowscript.org/css/ide.css" rel="stylesheet" />
<script type="text/javascript" src="https://www.glowscript.org/lib/jquery/2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.glowscript.org/lib/jquery/2.1/jquery-ui.custom.min.js"></script>
<script type="text/javascript" src="https://www.glowscript.org/package/glow.3.0.min.js"></script>
<script type="text/javascript"><!--//--><![CDATA[//><!--
// START JAVASCRIPT
;(function() {;
async function __main__() {
"use strict";
var version = ["3.0", "glowscript"];
Array.prototype.toString = function() { return __parsearray(this) };
var scene = canvas();
var vector = vec;
scene.width = 350
scene.height = 300
scene.range = 1.3
scene.title = "Slider Changing Box Dimension\n"
scene.forward = vector(1["-u"](), 1["-u"](), 1["-u"]());
var box_object = box({visible:true})
var sl = slider({min:0.3, max:2, value:1.5, length:220, bind:change_size, right:15})
function change_size(h){
box_object.width=h.value
}
}
;$(function(){ window.__context = { glowscript_container: $("#glowscript").removeAttr("id") }; __main__() })})()
// END JAVASCRIPT
//--><!]]></script>
</div>
</body>
</html>The issue I'm running into is that I would want to have multiple widgets and graphics in different divs and have them interact. However, they would be in different functions. I have a few ideas for how I could approach this issue:
- Make the variables for the graphics and widgets global using window. I understand this isn't recommended.
- Somehow specify what div to put a graphic or widget in when I create it so it can all be in one function. I'm not sure if this is possible.
- Create multiple web apps, embed them all in the code, and somehow have the main functions interact with one another. I'm also not sure how this would be possible.
- Use a cloud database. This was offered as an option by one of the creators of GlowScript. I don't know anything about cloud databases, though, and I'm not sure how difficult this would be.
I'm not sure if these are possible and/or make sense. Would it be possible to have widgets in different divs which interact with one another. What would be the best approach?
Thanks.