-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
130 lines (123 loc) · 7.24 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JukaGUI Generator</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@900&display=swap">
</head>
<body>
<h1>JukaGUI Generator</h1>
<p>1. Move elements to screen and double click to rename.<br>
a. You can resize image with right click.<br/>
b. You can change font sizes. <br/>
2. Once ready, click "Create and Download JukaConfig" which will download jukaconfig.json.<br>
3. Download JukaGUI-Trimui.zip template at <a href="https://github.com/jukaLang/JukaGUI/releases">JukaGUI releases</a>.<br>
4. Extract template and combine it with jukaconfig.json.<br>
5. Put the folder under Apps on SD card.<br>
<b>NOTE:</b> If images are used, make sure to combine them with the template.<br/>
<label for="loadFile">Load jukaconfig.json:</label>
<input type="file" id="loadFile" accept=".json"></input>
</p>
<div class="input-box">
<label for="title">Title:</label>
<input type="text" id="title" placeholder="Enter title">
<label for="author">Author:</label>
<input type="text" id="author" placeholder="Enter author">
<label for="description">Description:</label>
<input type="text" id="description" placeholder="Enter description">
</div>
<!-- Font Size Controls -->
<div class="font-size-controls">
<label for="titleSize">Title Size:</label>
<input type="number" id="titleSize" value="48">
<label for="bigSize">Big Size:</label>
<input type="number" id="bigSize" value="36">
<label for="mediumSize">Medium Size:</label>
<input type="number" id="mediumSize" value="24">
<label for="smallSize">Small Size:</label>
<input type="number" id="smallSize" value="18">
</div>
<div class="background-controls">
<label for="canvasSize">Device:</label>
<select id="canvasSize">
<option value="1280x720">TSP (1280 x 720)</option>
<option value="1024x768">Brick (1024 x 768)</option>
</select>
<label for="backgroundFile"> Change Background:</label>
<input type="file" id="backgroundFile" accept="image/*">
</div>
<div class="container">
<div class="scene-controls">
<button onclick="addScene()">Add Scene</button>
<select id="sceneSelector" onchange="changeScene()"></select>
<button onclick="renameScene()">Rename Scene</button>
</div>
<div class="variable-controls">
<button id="addVariableButton" onclick="addVariable()">Add Variable</button>
<select id="variableSelector" style="display: none;" onchange="changeVariable()"></select>
<input type="text" id="variableValueInput" style="display: none;" readonly>
<button id="renameVariableButton" style="display: none;" onclick="renameVariable()">Rename Variable</button>
<button id="changeValueButton" style="display: none;" onclick="showChangeValue()">Change Value</button>
</div>
<div class="toolbar">
<div class="element" draggable="true" data-type="button">Button</div>
<div class="element" draggable="true" data-type="label">Label</div>
<div class="element" draggable="true" data-type="image">Image</div>
<div class="element" draggable="true" data-type="input">Input</div>
</div>
<div class="color-controls">
<label for="hiddenSetting" class="control-label" style="display:inline;">Attributes:</label>
<select id="hiddenSetting" class="trigger-selector" style="visibility: hidden;">
</select>
<label for="datax" class="control-label" style="display:none;">X:</label>
<span id="datax" class="color-picker" style="display:none;" ></span>
<label for="datay" class="control-label" style="display:none;">Y:</label>
<span id="datay" class="color-picker" style="display:none;"></span>
<!-- Color Picker for Modifying Text Color -->
<label for="colorPicker" class="control-label" style="display:none;">Font Color:</label>
<input type="color" id="colorPicker" class="color-picker" value="#000000" style="display:none;" />
<!-- Background Color Picker for Buttons -->
<label for="bgColorPicker" class="control-label" style="display:none;">Background Color:</label>
<input type="color" id="bgColorPicker" class="bg-color-picker" value="#ffffff" style="display:none;" />
<!-- Font Size Picker -->
<label for="fontSizePicker" class="control-label" style="display:none;">Text Size:</label>
<select id="fontSizePicker" class="font-size-picker" style="display:none;">
<option value="title">Title</option>
<option value="big">Big</option>
<option value="medium">Medium</option>
<option value="small">Small</option>
</select>
<!-- Trigger Selector for Buttons -->
<label for="triggerSelector" class="control-label" style="display:none;">Trigger:</label>
<select id="triggerSelector" class="trigger-selector" style="display:none;">
<option value="">None</option>
<option value="change_scene">Change Scene</option>
<option value="exit">Exit</option>
<option value="external_app">Trigger External App</option>
<option value="set_variable">Set Variable</option>
<option value="play_video">Play Video</option>
<option value="play_image">Fullscreen Image</option>
</select>
<!-- Scene Selector for Change Scene Trigger -->
<select id="sceneChangeSelector" class="scene-change-selector" style="display:none;">
<!-- This will be populated dynamically with scene names -->
</select>
<!-- External App Path Input -->
<input type="text" id="externalAppPath" class="external-app-path" placeholder="Enter path to external app" style="display:none;">
<!-- Variable Selector for Set Variable Trigger -->
<select id="variableChangeSelector" class="variable-change-selector" style="display:none;">
<!-- This will be populated dynamically with variables -->
</select>
<!-- Variable Value Input for Set Variable Trigger -->
<input type="text" id="variableChangeValue" class="variable-change-value" placeholder="Enter new variable value" style="display:none;">
</div>
<div class="canvas" id="canvas"></div>
</div>
<button class="create-button" onclick="createJukaApp()">Create and Download JukaConfig</button>
<pre id="output"></pre>
<p class="contribute-banner">Need help or want to join the conversation? Join us on <a href="https://discord.gg/R9qgJjh5jG">Discord</a>! Want to contribute to the code? Visit our <a href="https://github.com/jukaLang/JukaGUI">GitHub</a>
<script src="script.js"></script>
</body>
</html>