GUI -> HTML Converter

Help and Feedback Creations Feedback
#1

I spent the last few days working on a fun little project. I created a plugin that will convert a ScreenGui to HTML code. There isn’t really much else to say about it, other than it was frustrating at some points to get all the components correct. But I believe I got everything to work properly, though I do want to implement some more stuff in the future.

I’ve decided to start on another little project since this plugin has gotten to a working state.

All feedback is appreciated. :slight_smile:

Some screenshots:

My Test GUI

Resulting output (minutes the screenshot messages)

Explorer showing the hierarchy for the Test GUI and the resulting HTML/CSS

436fbb4ec1e5aa5f4eeef8f745103bec.png206×531 22.1 KB

Index.HTML has proper indentation!

[code]

Test







Hello, world!
Submit
External Media

External Media




[/code]

As does styles.CSS:

[code]body {
position: relative;
background-color: black;
}

#body-content {
position: absolute;
left: 50%;
margin-left: -516px;
width: 1032px;
height: 594px;
background: url(‘http://i.imgur.com/64FAZKh.png’) no-repeat center center;
background-size: cover;
}

#container {
background-color: rgba(255, 255, 255, 1.0000);
position: absolute;
top: 46px;
left: 265px;
width: 499px;
height: 499px;
border: 1px solid rgb(27, 42, 53);
display: table;
}

#greeting {
color: rgba(27, 42, 53, 1.0000);
font-family: sans-serif;
font-size: 12px;
text-align: Center;
background-color: rgba(0, 170, 127, 1.0000);
position: absolute;
top: -1px;
left: -1px;
width: 99px;
height: 99px;
border: 1px solid rgb(27, 42, 53);
display: table;
}

#greeting-wrapper {
display: table-cell;
vertical-align: Middle;
}

#submit-button {
cursor: pointer;
color: rgba(255, 170, 0, 1.0000);
font-family: sans-serif;
font-size: 31px;
text-align: Right;
background-color: rgba(170, 0, 0, 1.0000);
position: absolute;
top: 99px;
left: -1px;
width: 99px;
height: 99px;
border: 1px solid rgb(27, 42, 53);
display: table;
}

#submit-button-wrapper {
display: table-cell;
vertical-align: Bottom;
}

#dayz {
background-color: rgba(255, 255, 255, 1.0000);
position: absolute;
top: -1px;
left: 99px;
width: 99px;
height: 99px;
border: 1px solid rgb(27, 42, 53);
display: table;
}

#inputbox {
color: rgba(27, 42, 53, 1.0000);
font-family: sans-serif;
font-size: 12px;
padding:0px;
padding-bottom: 36px;
background-color: rgba(255, 255, 0, 1.0000);
position: absolute;
top: 199px;
left: -1px;
width: 201px;
height: 49px;
border: 1px solid rgb(27, 42, 53);
display: table;
}

#inputbox-wrapper {
display: table-cell;
vertical-align: Top;
}

#doge {
cursor: pointer;
background-color: rgba(255, 255, 255, 1.0000);
position: absolute;
top: 99px;
left: 99px;
width: 99px;
height: 99px;
border: 1px solid rgb(27, 42, 53);
display: table;
}

[/code]

Resulting in …

42a0f004b3de0a29c35e94bdb0ef72fb.png1152×698 350 KB

2 Likes
#2

If we can’t already, there should be a way to copy the HTML code. Maybe just save a string value or script to workspace and set the source or value to the code.

#3

Nice, that’s pretty neat.

#4

MAKE IT WORK THE OTHER WAY :woohoo:

#5

I started thinking about doing that and even wrote a little bit of code… The idea seemed do-able at first, but then when I got to thinking about all the nesting and proper content flow, various tags, and tables. Well, just a little more time then I really want to spend getting something like that to work. I still think it’s possible. Was even looking at incorporating AgentFirefox’s rbx.css.

1 Like