Skip to content

Commit

Permalink
Add files via upload
Browse files Browse the repository at this point in the history
  • Loading branch information
@canarddu38
canarddu38 authored Apr 5, 2024
1 parent a4535eb commit 2ffb7fa
Show file tree
Hide file tree
Showing 3 changed files with 532 additions and 51 deletions.
145 changes: 145 additions & 0 deletions docs/app.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,145 @@
const dropZone = document.getElementById('drop_zone');
const addElementButton = document.getElementById('addElement');
const buildButton = document.getElementById('build');
const pseudocodeElement = document.getElementById('pseudocode');
const draggables = [];
dropZone.style.width="240";
dropZone.style.height="320";


const Controls = {
"Text": {
"defaultHTML": "<h2 style='width: 50px; height: 25px; '>Text</h2>",
"doc": "https://github.com/d3m0n-project/d3m0n_os/blob/main/rootfs/usr/share/d3m0n/documentation/Text.md",
"edit": ["content", "font_size"]
},
"Image": {
"defaultHTML": "<img src='./default.png' style='width: 20px; height: 20px;'>",
"doc": "https://github.com/d3m0n-project/d3m0n_os/blob/main/rootfs/usr/share/d3m0n/documentation/Image.md",
"edit": ["src"]
},
"Button": {
"defaultHTML": "<button style='width: 100px; height: 50px;'>Button</button>",
"doc": "https://github.com/d3m0n-project/d3m0n_os/blob/main/rootfs/usr/share/d3m0n/documentation/Button.md",
"edit": ["content", "font_size"]
},
};

function loadEdit(type) {
var editFields = document.getElementsById("");

if(!type in Controls) {
alert("Invalid control type");
return;
}

// displays GeneralAttributes

// name="ControlName";
// visible="[true/false]";
// enabled="[true/false]";

// parent="ControlName";

// margin_top="10";
// margin_left="20";
// margin_right="5";
// margin_bottom="25";

// location="x, y";
// location="[top/top_left/top_right/bottom/bottom_left/bottom_right/left/right/center]";

// color="white";
// color="255, 255, 255";

// bg_color="black";
// bg_color="0, 0, 0";

// width="20";
// width="10%";

// height="10";
// width="5%";
}

function createDraggableElement(type) {
const draggable = document.createElement('div');
draggable.classList.add('draggable');

if(!type in Controls) {
alert("Invalid Control type!");
return;
}

// adds correct style class
draggable.classList.add('Control_'+type);


draggable.innerHTML += Controls[type]["defaultHTML"];
dropZone.appendChild(draggable);
let isDragging = false;
let startX, startY;

draggable.addEventListener('mousedown', (event) => {
isDragging = true;
startX = event.clientX;
startY = event.clientY;
});
document.addEventListener('mousemove', (event) => {
if (!isDragging) return;
// var rect = drop_zone.getBoundingClientRect();
// console.log(rect.top, rect.right, rect.bottom, rect.left);
const dx = event.clientX;// - startX;
const dy = event.clientY;// - startY;
const rect = dropZone.getBoundingClientRect();
var draggable_x = dx - rect.x;
var draggable_y = dy - rect.y;
var draggable_width = draggable.offsetWidth;
var draggable_height = draggable.clientHeight;
draggable.style.left = draggable_x + 'px';
draggable.style.top = draggable_y + 'px';
startX = event.clientX;
startY = event.clientY;


// manage window size
if(draggable_x < 0) {
draggable.style.left = '0px';
}
if(draggable_x > 240 - draggable_width) {
draggable.style.left = 240 - draggable_width + 'px';
}
if(draggable_y < 0) {
draggable.style.top = '0px';
}
if(draggable_y > 320 - draggable_height) {
draggable.style.top = 320 - draggable_height + 'px';
}
});
document.addEventListener('mouseup', () => {
isDragging = false;
draggables.push({
element: draggable,
position: {
x: draggable.offsetLeft,
y: draggable.offsetTop
}
});
});
}
buildButton.addEventListener('click', () => {
pseudocodeElement.textContent = generatePseudocode(draggables);
});
function generatePseudocode(draggables) {
let pseudocode = 'Building the layout:\n';
draggables.forEach((draggable, index) => {
pseudocode += `Element ${index + 1}:\n`;
pseudocode += `- Type: Draggable\n`;
pseudocode += `- Size: ${draggable.element.offsetWidth}x${draggable.element.offsetHeight}\n`;
pseudocode += `- Position: (${draggable.position.x}, ${draggable.position.y})\n\n`;
});
return pseudocode;
}
function debug(x, y) {
// document.body.innerHTML += "<div style='z-index: 9999; width: 5px; height: 5px; background: red; top: "+y+"px; left: "+x+"px; display: flex; position: absolute;'></div>"
}
105 changes: 54 additions & 51 deletions docs/studio.html
View file
Original file line number Diff line number Diff line change
@@ -1,53 +1,56 @@
<!DOCTYPE html>
<html>
<head>
<title>
d3m0n app studio
</title>
<link rel="icon" type="image/x-icon" href="favicon.ico">

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<link href="./studioc.css" rel="stylesheet">
<script src="src/canva.js"></script>
</head>
<body>
<!-- logo will be added soon -->
<img class="logo" src="">

<div class="box">

<a><!-- add an onclick or href, you can also change these buttons if you want-->
<button type="button" class="btn btn-danger top_bar_btn">File</button>
</a>

<a>
<button type="button" class="btn btn-danger top_bar_btn">Edit</button>
</a>

<a>
<button type="button" class="btn btn-danger top_bar_btn">Settings</button>
</a>

<a>
<button type="button" class="btn btn-danger top_bar_btn">Tools</button>
</a>

<a>
<button type="button" class="btn btn-danger top_bar_btn">Help</button>
</a>

</div>
<div style="display: flex; flex-direction: row;">
<div style="width: 50%; height: 80vh; text-align: center; justify-content: center; display: flex; align-items: center; background: white">
<h1 id="dimentions">480x640</h1>
<div id="window" onmouseleave="resize()" onmousemove="resize()" class="canva" style="width: 350px; height: 200px; resize: both; overflow: hidden;border: 1px solid black;">
</div>
</div>
<div style="width: 50%; height: 80vh;">
<div class="drag">

</div>
</div>
</div>
</body>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>d3m0n App Studio</title>
<link rel="stylesheet" href="./style.css"></link>
</head>
<body>
<h1>d3m0n App Studio</h1>

<div id="appContainer">
<div id="control_editor">
<div style="width: 100%;" id="generalAttributes">
<p>General Attributes:</p>

<div style="width: 90%; display: block; overflow: hidden;">name:<input style="float: right; width: 60%;" type="text" id="edit-name" value="" /></div>
<div style="width: 90%; display: block; overflow: hidden;" >color:<input style="float: right; width: 60%;" type="color" id="edit-color" value="" /></div>
<div style="width: 90%; display: block; overflow: hidden;">bg_color:<input style="float: right; width: 60%;" type="color" id="edit-bg_color" value="" /></div>
<div style="width: 90%; display: block; overflow: hidden;" >visible:<input style="float: right; width: 60%;" type="checkbox" id="edit-visible" value="" /></div>
<div style="width: 90%; display: block; overflow: hidden;" >enabled:<input style="float: right; width: 60%;" type="checkbox" id="edit-enabled" value="" /></div>

<div style="width: 90%; display: block; overflow: hidden;" >margin_top:<input style="float: right; width: 60%;" type="number" id="edit-margin_top" value="" /></div>
<div style="width: 90%; display: block; overflow: hidden;" >margin_left:<input style="float: right; width: 60%;" type="number" id="edit-margin_left" value="" /></div>
<div style="width: 90%; display: block; overflow: hidden;" >margin_right:<input style="float: right; width: 60%;" type="number" id="edit-margin_right" value="" /></div>
<div style="width: 90%; display: block; overflow: hidden;" >margin_bottom:<input style="float: right; width: 60%;" type="number" id="edit-margin_bottom" value="" /></div>

// location="x, y";
// location="[top/top_left/top_right/bottom/bottom_left/bottom_right/left/right/center]";
<div style="width: 90%; display: block; overflow: hidden;">location:<input style="float: right; width: 60%;" type="number" id="edit-margin_bottom" value="" /></div>



</div>

</div>
<div style="width: 60%; flex-direction: row; display: flex;">
<div id="drop_zone">Drop elements here</div>
<div id="draggableElements">
<div style="padding: 10px; background: red; margin-bottom: 10px;" onclick="createDraggableElement('Text')">Text</div>
<div style="padding: 10px; background: red; margin-bottom: 10px;" onclick="createDraggableElement('Button')">Button</div>
<div style="padding: 10px; background: red; margin-bottom: 10px;" onclick="createDraggableElement('Image')">Image</div>
</div>
</div>


</div>

<button id="addElement" onclick="createDraggableElement('Text')">Add Draggable Element</button>
<button id="build">Build</button>
<pre id="pseudocode"></pre>


<script src="./app.js"></script>
</body>
</html>
Loading

0 comments on commit 2ffb7fa

Please sign in to comment.