Please sign in to access this page
html-element-whiteboard
html-element-whiteboard is a live playground for HTML elements to be used in demonstrations—or for those times when you want to use MS Paint but you know it won't quite cut it. Designed for showing off concepts quickly & mutable content.
Followers
No followers yet
Ship Your Project
Get ready!
Once you ship this you can't edit the description of the project, but you'll be able to add more devlogs and re-ship it as you add new features!
Timeline
I think it's ready to ship! Just setting up hosting—unfortunately it seems the site I'm using has a watermark =(. Maybe my next project will have something to do with hosting static sites (I'm thinking something that packs them into bookmarklets) 😄
Okay, I'm still working on the UI but I took a short break to add a copy button. This was a little difficult because of how copying works in JavaScript—I need to make a deep copy, which is different from a normal one. Luckily, there is the node.cloneNode() function, which does exactly what I want. Side note—check out the new add menu!
I'm in the process of updating the UI (again)! I decided it would be better to design whole elements in Inkscape rather than just icons, this way they will stay the same on different browsers.
This update took the longest by far! It's a major update to the property editor. First, I vastly improved the code for setting values—before, it was terrible. Then, I added code to get all of the properties, so you could set more than just the ones listed. But since there are ~1000, I was far from happy with it. With the time it takes to get to the attribute you wanted, you could've just used the console to set it! So, I added code for a search bar. In the video demo, I used the search feature to set the style.fontFamily to one I have installed on my computer and then set the font size to 45px. I'm quite proud of how snappy the property editor is. Originally, I wanted to have it update whenever a property was changed, but I decided I should just have it update when an element is clicked or when the search text changes. Next up is probably importing/exporting unless I find a more pressing issue.
Overhauled the entire UI! First, I designed some icons in LibreOffice Draw (I thought it would be easier than figuring out the licensing for the Material Design icons). Then, I fiddled around with CSS—a LOT—until I came up with something that I was happy enough with. I will probably have to redo it when I add custom properties (actually—maybe I should just use the built in window.prompt() method to get info because that seems like the most efficient while being non-intrusive from an aesthetic standpoint)
I implemented the basic property editor! You can change basic things, like the text in a text element, or advanced things like z-index. However, I'm far from happy with it. There's still no scripting, and you can't change properties not already added to the property editor. I'd like to have different tags have different 'default properties' set up for quick changing, and I'd like to add a feature that lets you set any property of them with HTML. Scripting, however, will have to wait a little longer.
The first prototype is done! You can add text & buttons, drag them around, and move between states. The elements persist their properties (aside from drag-ability) when moving between states, and they're currently stored in a simple array which should make implementing importing/exporting much easier. Next up is the property editor, which will let you actually change things about the elements.
Basic UI is done! I also added some code to change between the two states (editing and playing). Next is programming basic functionality!
I just thought of the basic idea for this project—an interactive whiteboard-style playground with HTML elements. The main use case would be for giving demonstrations or explaining concepts in videos. The idea is there's two modes: editing and playing. In the editing environment, you can drag and drop elements in and edit them depending on your needs for the demo. In play mode, the elements' positions are locked and you interact with them how you would with normal HTML elements.
