After listening to Steve Klabnik‘s talk in RubyConf India, I really wanted to try Ruby and Shoes as well. After messing with it for few hours, I came up with Socks.
Socks is a Shoes app that takes in data in JSON format and renders them on screen. Its designed to be used as slides for presentations, so supports only text and images.
The best part is that you define your GUI in a declarative language in the JSON format. This is very much simpler to the CSS styles, so its real easy to get started. Moreover your slides are just your data, so you can write software on any platform to read them. (Data freedom? Yeah!)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
[ { "data" : "This is socks!", | |
"styles" : { "align" : "center", | |
"font" : "Ubuntu", | |
"stroke" : "#f00" | |
}, | |
"type" : "banner" | |
}, | |
{ "data" : "The partner of Shoes in presentation. You just write a plain JSON File, and we take the pains of creating the presentation for you.", | |
"styles" : { "stroke" : "#666" }, | |
"type" : "para" | |
} | |
] |
This produces a window like this:
Or you could write:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
[ { "data" : "Hello World!", | |
"styles" : { "align" : "center", | |
"font" : "Ubuntu", | |
"stroke" : "#f00" | |
}, | |
"type" : "banner" | |
}, | |
{ "data" : "I am Sankha", | |
"styles" : { "stroke" : "#666" }, | |
"type" : "para" | |
}, | |
{ "data" : "res/me.jpg", | |
"type" : "image" | |
} | |
] |
You can put all this together and Socks will create a nice presentation for you.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ "margin" : 10, | |
"name" : "Demo Presentation", | |
"slides" : [ [ { "data" : "Hello World!", | |
"styles" : { "align" : "center", | |
"font" : "Ubuntu", | |
"stroke" : "#f00" | |
}, | |
"type" : "banner" | |
}, | |
{ "data" : "I am Sankha", | |
"styles" : { "stroke" : "#666" }, | |
"type" : "para" | |
}, | |
{ "data" : "res/me.jpg", | |
"type" : "image" | |
} | |
], | |
[ { "data" : "This is socks!", | |
"styles" : { "align" : "center", | |
"font" : "Ubuntu", | |
"stroke" : "#f00" | |
}, | |
"type" : "banner" | |
}, | |
{ "data" : "The partner of Shoes in presentation. You just write a plain JSON File, and we take the pains of creating the presentation for you.", | |
"styles" : { "stroke" : "#666" }, | |
"type" : "para" | |
} | |
], | |
] | |
} |
It renders just text and images now. Go give it a try, its on GitHub. Any help for Socks is appreciated, so just fork and send me a pull request!